{"version":3,"sources":["../src/type.ts","../src/shared/constants.ts","../src/loader/comment.tsx"],"names":["DEFAULT_WAI_ARIA_ATTRIBUTE","SVG_NAMESPACE","Comment","visible","width","height","backgroundColor","color","wrapperClass","wrapperStyle","ariaLabel","jsxs","jsx"],"mappings":"yCAIO,IAAMA,EAA6B,CACxC,WAAA,CAAa,IAAA,CACb,IAAA,CAAM,aACR,CAAA,CCPO,IAAMC,CAAAA,CAAgB,4BAAA,KCsChBC,CAAAA,CAA2C,CAAC,CACvD,OAAA,CAAAC,EAAU,IAAA,CACV,KAAA,CAAAC,CAAAA,CAAQ,IAAA,CACR,OAAAC,CAAAA,CAAS,IAAA,CACT,eAAA,CAAAC,CAAAA,CAAkB,UAClB,KAAA,CAAAC,CAAAA,CAAQ,OACR,YAAA,CAAAC,CAAAA,CAAe,GACf,YAAA,CAAAC,CAAAA,CAAe,EAAC,CAChB,UAAAC,CAAAA,CAAY,iBACd,CAAA,GACUP,CAAAA,CACNQ,KAAC,KAAA,CAAA,CACC,KAAA,CAAOP,CAAAA,CACP,MAAA,CAAQC,EACR,KAAA,CAAOJ,CAAAA,CACP,QAAQ,aAAA,CACR,mBAAA,CAAoB,WACpB,SAAA,CAAWO,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACP,aAAYC,CAAAA,CACZ,aAAA,CAAa,aAAA,CACZ,GAAGV,EAEJ,QAAA,CAAA,CAAAY,GAAAA,CAAC,MAAA,CAAA,CACC,CAAA,CAAE,+LACF,IAAA,CAAMN,CAAAA,CACP,EACDM,GAAAA,CAAC,QAAA,CAAA,CAAO,GAAG,IAAA,CAAK,EAAA,CAAG,IAAA,CAAK,CAAA,CAAE,IAAI,IAAA,CAAML,CAAAA,CAClC,QAAA,CAAAK,GAAAA,CAAC,WACC,aAAA,CAAc,SAAA,CACd,QAAA,CAAS,QAAA,CACT,OAAO,OAAA,CACP,QAAA,CAAS,UACT,GAAA,CAAI,GAAA,CACJ,MAAM,IAAA,CACN,WAAA,CAAY,YAAA,CACb,CAAA,CACH,EACAA,GAAAA,CAAC,QAAA,CAAA,CAAO,EAAA,CAAG,IAAA,CAAK,GAAG,IAAA,CAAK,CAAA,CAAE,GAAA,CAAI,IAAA,CAAML,EAClC,QAAA,CAAAK,GAAAA,CAAC,WACC,aAAA,CAAc,SAAA,CACd,SAAS,QAAA,CACT,MAAA,CAAO,SAAA,CACP,QAAA,CAAS,cACT,GAAA,CAAI,GAAA,CACJ,KAAA,CAAM,IAAA,CACN,YAAY,YAAA,CACb,CAAA,CACH,CAAA,CACAA,GAAAA,CAAC,UAAO,EAAA,CAAG,IAAA,CAAK,GAAG,IAAA,CAAK,CAAA,CAAE,IAAI,IAAA,CAAML,CAAAA,CAClC,QAAA,CAAAK,GAAAA,CAAC,WACC,aAAA,CAAc,SAAA,CACd,QAAA,CAAS,QAAA,CACT,OAAO,SAAA,CACP,QAAA,CAAS,aAAA,CACT,GAAA,CAAI,IACJ,KAAA,CAAM,IAAA,CACN,YAAY,YAAA,CACb,CAAA,CACH,GACF,CAAA,CAlDgB","file":"comment.mjs","sourcesContent":["import { CSSProperties } from 'react'\n\nexport const DEFAULT_COLOR = '#4fa94d'\n\nexport const DEFAULT_WAI_ARIA_ATTRIBUTE = {\n  'aria-busy': true,\n  role: 'progressbar',\n}\n\n// Reuse React's CSSProperties for consistent style typing across components\nexport type Style = CSSProperties\n\n// PrimaryProps includes common props shared by experimental components\nexport interface PrimaryProps {\n  height?: string | number\n  width?: string | number\n  color?: string\n  ariaLabel?: string\n  wrapperStyle?: CSSProperties\n  wrapperClass?: string\n  visible?: boolean\n}\n\n\n","export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'\n","import { FunctionComponent, ReactElement, CSSProperties } from 'react'\nimport { DEFAULT_WAI_ARIA_ATTRIBUTE } from '../type'\nimport { SVG_NAMESPACE } from '../shared/constants'\n\n/**\n * Props for the Comment loader component.\n * \n * The Comment loader shows a comment bubble with animated dots inside.\n * \n * @interface CommentProps\n */\ninterface CommentProps {\n  /** Height of the SVG (number interpreted as px). */\n  height?: string | number\n  /** Width of the SVG (number interpreted as px). */\n  width?: string | number\n  /** Primary color applied to the loader. Defaults to DEFAULT_COLOR. */\n  color?: string\n  /** Accessible label announced to screen readers. */\n  ariaLabel?: string\n  /** Inline style object applied to the wrapper element. */\n  wrapperStyle?: CSSProperties\n  /** CSS class applied to the wrapper for custom styling. */\n  wrapperClass?: string\n  /** When false, the loader is not rendered. Defaults to true. */\n  visible?: boolean\n  /** \n   * Provide multiple colors to render a gradient instead of a solid color.\n   * When 2 or more colors are supplied a gradient will be applied to the loader.\n   */\n  colors?: string[]\n  /** Type of gradient (linear or radial). Defaults to linear. */\n  gradientType?: 'linear' | 'radial'\n  /** Angle (in degrees) applied via rotate() transform for linear gradients. */\n  gradientAngle?: number\n  backgroundColor?: string\n}\n\nexport const Comment: FunctionComponent<CommentProps> = ({\n  visible = true,\n  width = '80',\n  height = '80',\n  backgroundColor = '#ff6d00',\n  color = '#fff',\n  wrapperClass = '',\n  wrapperStyle = {},\n  ariaLabel = 'comment-loading',\n}): ReactElement | null => {\n  return !visible ? null : (\n    <svg\n      width={width}\n      height={height}\n      xmlns={SVG_NAMESPACE}\n      viewBox=\"0 0 100 100\"\n      preserveAspectRatio=\"xMidYMid\"\n      className={wrapperClass}\n      style={wrapperStyle}\n      aria-label={ariaLabel}\n      data-testid={'comment-svg'}\n      {...DEFAULT_WAI_ARIA_ATTRIBUTE}\n    >\n      <path\n        d=\"M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z\"\n        fill={backgroundColor}\n      ></path>\n      <circle cx=\"30\" cy=\"47\" r=\"5\" fill={color}>\n        <animate\n          attributeName=\"opacity\"\n          calcMode=\"linear\"\n          values=\"0;1;1\"\n          keyTimes=\"0;0.2;1\"\n          dur=\"1\"\n          begin=\"0s\"\n          repeatCount=\"indefinite\"\n        ></animate>\n      </circle>\n      <circle cx=\"50\" cy=\"47\" r=\"5\" fill={color}>\n        <animate\n          attributeName=\"opacity\"\n          calcMode=\"linear\"\n          values=\"0;0;1;1\"\n          keyTimes=\"0;0.2;0.4;1\"\n          dur=\"1\"\n          begin=\"0s\"\n          repeatCount=\"indefinite\"\n        ></animate>\n      </circle>\n      <circle cx=\"70\" cy=\"47\" r=\"5\" fill={color}>\n        <animate\n          attributeName=\"opacity\"\n          calcMode=\"linear\"\n          values=\"0;0;1;1\"\n          keyTimes=\"0;0.4;0.6;1\"\n          dur=\"1\"\n          begin=\"0s\"\n          repeatCount=\"indefinite\"\n        ></animate>\n      </circle>\n    </svg>\n  )\n}\n"]}