@vibe/core 3.42.0 → 3.43.0

package/dist/src/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"lodash-es\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport { AvatarBadge, AvatarBadgeProps } from \"./AvatarBadge\";\nimport { AvatarContent } from \"./AvatarContent\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./Avatar.module.scss\";\n\nexport interface AvatarProps extends VibeComponentProps {\n  /**\n   * The image source for the avatar.\n   */\n  src?: string;\n  /**\n   * The text displayed inside the avatar.\n   */\n  text?: string;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The ARIA label of the avatar.\n   */\n  ariaLabel?: string;\n  /**\n   * If true, the tooltip is disabled.\n   */\n  withoutTooltip?: boolean;\n  /**\n   * The icon displayed inside the avatar.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * Class name applied to the text inside the avatar.\n   */\n  textClassName?: string;\n  /**\n   * Class name applied to the avatar content wrapper.\n   */\n  avatarContentWrapperClassName?: string;\n  /**\n   * The background color of the avatar.\n   */\n  backgroundColor?: ElementAllowedColor;\n  /**\n   * A custom background color.\n   */\n  customBackgroundColor?: string;\n  /**\n   * The ARIA role of the avatar.\n   */\n  role?: AriaRole;\n  /**\n   * The size of the avatar.\n   */\n  size?: AvatarSize;\n  /**\n   * A custom size in pixels.\n   */\n  customSize?: number;\n  /**\n   * The tab index of the avatar.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the avatar is hidden from assistive technologies.\n   */\n  ariaHidden?: boolean;\n  /**\n   * If true, the avatar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, renders the avatar as a square instead of a circle.\n   */\n  square?: boolean;\n  /**\n   * Props for the top-left badge.\n   */\n  topLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the top-right badge.\n   */\n  topRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-left badge.\n   */\n  bottomLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-right badge.\n   */\n  bottomRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * If true, removes the avatar's border.\n   */\n  withoutBorder?: boolean;\n  /**\n   * Callback fired when the avatar is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar: React.FC<AvatarProps> & {\n  types?: typeof AvatarTypeEnum;\n  sizes?: typeof AvatarSizeEnum;\n  colors?: typeof ElementAllowedColorEnum;\n  backgroundColors?: typeof ElementAllowedColorEnum;\n} = ({\n  id,\n  type = \"text\",\n  className,\n  avatarContentWrapperClassName,\n  textClassName = \"\",\n  size = \"large\",\n  src,\n  icon,\n  text,\n  tooltipProps,\n  ariaLabel,\n  withoutTooltip = false,\n  role,\n  backgroundColor = \"chili-blue\",\n  square,\n  disabled,\n  tabIndex,\n  ariaHidden = false,\n  topLeftBadgeProps,\n  topRightBadgeProps,\n  bottomLeftBadgeProps,\n  bottomRightBadgeProps,\n  withoutBorder = false,\n  customSize = null,\n  customBackgroundColor = null,\n  onClick,\n  \"data-testid\": dataTestId\n}: AvatarProps) => {\n  const backgroundColorStyle = useMemo(() => {\n    if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n    return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n  }, [src, backgroundColor, customBackgroundColor]);\n  const sizeStyle = useMemo(() => {\n    return customSize ? { height: customSize, width: customSize } : {};\n  }, [customSize]);\n\n  const overrideTooltipProps = useMemo(() => {\n    if (withoutTooltip) return undefined;\n\n    if (tooltipProps) {\n      return { content: ariaLabel, ...tooltipProps };\n    } else {\n      return { content: ariaLabel };\n    }\n  }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n  const badgesContainer = useMemo(() => {\n    const badges = [];\n    if (!isNil(topLeftBadgeProps)) {\n      badges.push(\n        <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n          <AvatarBadge size={size} {...topLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(topRightBadgeProps)) {\n      badges.push(\n        <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n          <AvatarBadge size={size} {...topRightBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomLeftBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n          <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomRightBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n          <AvatarBadge size={size} {...bottomRightBadgeProps} />\n        </div>\n      );\n    }\n\n    return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n  }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n  const defaultTabIndex = useMemo(() => {\n    if (!disabled && (onClick || overrideTooltipProps?.content)) {\n      return 0;\n    }\n    return -1;\n  }, [disabled, onClick, overrideTooltipProps?.content]);\n\n  const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n  const clickHandler = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event, id);\n      }\n    },\n    [onClick, id]\n  );\n\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n      className={cx(styles.avatar, styles[size], className)}\n      style={sizeStyle}\n    >\n      <ClickableWrapper\n        isClickable={!!onClick}\n        clickableProps={{\n          onClick: clickHandler,\n          tabIndex: \"-1\",\n          className: styles.clickableWrapper\n        }}\n      >\n        <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n          <div\n            className={cx(\n              styles.circle,\n              getStyle(styles, camelCase(\"circle--\" + type)),\n              {\n                [styles.disabled]: disabled,\n                [styles.square]: square,\n                [styles.withoutBorder]: withoutBorder\n              },\n              avatarContentWrapperClassName\n            )}\n            aria-hidden={ariaHidden}\n            tabIndex={overrideTabIndex}\n            style={{ ...backgroundColorStyle }}\n          >\n            <AvatarContent\n              type={type}\n              size={size}\n              src={src}\n              icon={icon}\n              text={text}\n              ariaLabel={ariaLabel}\n              role={role}\n              textClassName={textClassName}\n            />\n          </div>\n          {badgesContainer}\n        </Tooltip>\n      </ClickableWrapper>\n    </div>\n  );\n};\n\nexport default withStaticProps(Avatar, {\n  types: AvatarTypeEnum,\n  sizes: AvatarSizeEnum,\n  colors: ElementAllowedColorEnum,\n  backgroundColors: ElementAllowedColorEnum\n});\n"],"names":["withStaticProps","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent","types","AvatarTypeEnum","sizes","AvatarSizeEnum","colors","ElementAllowedColorEnum","backgroundColors"],"mappings":"k0BAoHA,IA0JeA,EAAAA,GArJX,SALQC,GAiCM,IA3BhBC,EAAED,EAAFC,GAAEC,EAAAF,EACFG,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAASJ,EAATI,UACAC,EAA6BL,EAA7BK,8BAA6BC,EAAAN,EAC7BO,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EAClBS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAGV,EAAHU,IACAC,EAAIX,EAAJW,KACAC,EAAIZ,EAAJY,KACAC,EAAYb,EAAZa,aACAC,EAASd,EAATc,UAASC,EAAAf,EACTgB,eAAAA,OAAiB,IAAHD,GAAQA,EACtBE,EAAIjB,EAAJiB,KAAIC,EAAAlB,EACJmB,gBAAAA,OAAkB,IAAHD,EAAG,aAAYA,EAC9BE,EAAMpB,EAANoB,OACAC,EAAQrB,EAARqB,SACAC,EAAQtB,EAARsB,SAAQC,EAAAvB,EACRwB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAiBzB,EAAjByB,kBACAC,EAAkB1B,EAAlB0B,mBACAC,EAAoB3B,EAApB2B,qBACAC,EAAqB5B,EAArB4B,sBAAqBC,EAAA7B,EACrB8B,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAA/B,EACrBgC,WAAAA,OAAa,IAAHD,EAAG,KAAIA,EAAAE,EAAAjC,EACjBkC,sBAAAA,OAAwB,IAAHD,EAAG,KAAIA,EAC5BE,EAAOnC,EAAPmC,QACeC,EAAUpC,EAAzB,eAEMqC,EAAuBC,GAAQ,WACnC,OAAIJ,EAA8B,CAAEf,gBAAiBe,GAC9CxB,EAAM,CAAA,EAAK,CAAES,gBAAiBoB,EAAgBpB,GACtD,GAAE,CAACT,EAAKS,EAAiBe,IACpBM,GAAYF,GAAQ,WACxB,OAAON,EAAa,CAAES,OAAQT,EAAYU,MAAOV,GAAe,EAClE,GAAG,CAACA,IAEEW,GAAuBL,GAAQ,WACnC,IAAItB,EAEJ,OAAIH,EACF+B,OAAAC,OAAA,CAASC,QAAShC,GAAcD,GAEzB,CAAEiC,QAAShC,EAErB,GAAE,CAACA,EAAWD,EAAcG,IAEvB+B,GAAkBT,GAAQ,WAC9B,IAAMU,EAAS,GA8Bf,OA7BKC,EAAMxB,IACTuB,EAAOE,KACLC,uBAAKC,IAAI,iBAAiBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOE,eAC3DL,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUgB,MAI9BwB,EAAMvB,IACTsB,EAAOE,KACLC,uBAAKC,IAAI,kBAAkBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOK,gBAC5DR,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUiB,MAI9BuB,EAAMtB,IACTqB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOM,kBAC9DT,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUkB,MAI9BsB,EAAMrB,IACToB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOO,mBAC9DV,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUmB,MAK5BoB,EAAOc,OAAS,EAAIX,EAAKM,cAAA,MAAA,CAAArD,UAAWiD,EAAGC,EAAON,SAAUA,GAAgB,IACjF,GAAG,CAACvC,EAAMgB,EAAmBC,EAAoBC,EAAsBC,IAEjEmC,GAAkBzB,GAAQ,WAC9B,OAAKjB,IAAac,KAAWQ,gBAAAA,GAAsBG,UAG3C,EAFC,CAGV,GAAE,CAACzB,EAAUc,EAASQ,gBAAAA,GAAsBG,UAEvCkB,GAAmB1C,QAAAA,EAAYyC,GAE/BE,GAAeC,GACnB,SAACC,GACCA,EAAMC,iBACFjC,GACFA,EAAQgC,EAAOlE,EAEnB,GACA,CAACkC,EAASlC,IAGZ,OACEkD,EAAAM,cAAA,MAAA,CACExD,GAAIA,EACS,cAAAmC,GAAciC,EAAUC,EAAuBC,OAAQtE,GACpEG,UAAWiD,EAAGC,EAAOkB,OAAQlB,EAAO7C,GAAOL,GAC3CqE,MAAOjC,IAEPW,EAACM,cAAAiB,GACCC,cAAexC,EACfyC,eAAgB,CACdzC,QAAS8B,GACT3C,SAAU,KACVlB,UAAWkD,EAAOuB,mBAGpB1B,EAAAM,cAACqB,EAAQlC,OAAAC,OAAA,CAAAkC,YAAa,CAAC,QAAS,cAAeC,YAAa,CAAC,OAAQ,eAAmBrC,IACtFQ,EAAAM,cAAA,MAAA,CACErD,UAAWiD,EACTC,EAAO2B,OACPC,EAAS5B,EAAQ6B,EAAU,WAAahF,IAAMiF,EAAAA,EAAAA,EAAA,CAAA,EAE3C9B,EAAOjC,SAAWA,GAClBiC,EAAOlC,OAASA,GAChBkC,EAAOxB,cAAgBA,GAE1BzB,GACD,cACYmB,EACbF,SAAU0C,GACVS,MAAK7B,OAAAC,OAAA,CAAA,EAAOR,IAEZc,EAAAM,cAAC4B,EAAa,CACZlF,KAAMA,EACNM,KAAMA,EACNC,IAAKA,EACLC,KAAMA,EACNC,KAAMA,EACNE,UAAWA,EACXG,KAAMA,EACNV,cAAeA,KAGlBwC,KAKX,GAEuC,CACrCuC,MAAOC,EACPC,MAAOC,EACPC,OAAQC,EACRC,iBAAkBD"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"lodash-es\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./Avatar.module.scss\";\n\nexport interface AvatarProps extends VibeComponentProps {\n  /**\n   * The image source for the avatar.\n   */\n  src?: string;\n  /**\n   * The text displayed inside the avatar.\n   */\n  text?: string;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The ARIA label of the avatar.\n   */\n  ariaLabel?: string;\n  /**\n   * If true, the tooltip is disabled.\n   */\n  withoutTooltip?: boolean;\n  /**\n   * The icon displayed inside the avatar.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * Class name applied to the text inside the avatar.\n   */\n  textClassName?: string;\n  /**\n   * Class name applied to the avatar content wrapper.\n   */\n  avatarContentWrapperClassName?: string;\n  /**\n   * The background color of the avatar.\n   */\n  backgroundColor?: ElementAllowedColor;\n  /**\n   * A custom background color.\n   */\n  customBackgroundColor?: string;\n  /**\n   * The ARIA role of the avatar.\n   */\n  role?: AriaRole;\n  /**\n   * The size of the avatar.\n   */\n  size?: AvatarSize;\n  /**\n   * A custom size in pixels.\n   */\n  customSize?: number;\n  /**\n   * The tab index of the avatar.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the avatar is hidden from assistive technologies.\n   */\n  ariaHidden?: boolean;\n  /**\n   * If true, the avatar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, renders the avatar as a square instead of a circle.\n   */\n  square?: boolean;\n  /**\n   * Props for the top-left badge.\n   */\n  topLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the top-right badge.\n   */\n  topRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-left badge.\n   */\n  bottomLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-right badge.\n   */\n  bottomRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * If true, removes the avatar's border.\n   */\n  withoutBorder?: boolean;\n  /**\n   * Callback fired when the avatar is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n  id,\n  type = \"text\",\n  className,\n  avatarContentWrapperClassName,\n  textClassName = \"\",\n  size = \"large\",\n  src,\n  icon,\n  text,\n  tooltipProps,\n  ariaLabel,\n  withoutTooltip = false,\n  role,\n  backgroundColor = \"chili-blue\",\n  square,\n  disabled,\n  tabIndex,\n  ariaHidden = false,\n  topLeftBadgeProps,\n  topRightBadgeProps,\n  bottomLeftBadgeProps,\n  bottomRightBadgeProps,\n  withoutBorder = false,\n  customSize = null,\n  customBackgroundColor = null,\n  onClick,\n  \"data-testid\": dataTestId\n}: AvatarProps) => {\n  const backgroundColorStyle = useMemo(() => {\n    if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n    return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n  }, [src, backgroundColor, customBackgroundColor]);\n  const sizeStyle = useMemo(() => {\n    return customSize ? { height: customSize, width: customSize } : {};\n  }, [customSize]);\n\n  const overrideTooltipProps = useMemo(() => {\n    if (withoutTooltip) return undefined;\n\n    if (tooltipProps) {\n      return { content: ariaLabel, ...tooltipProps };\n    } else {\n      return { content: ariaLabel };\n    }\n  }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n  const badgesContainer = useMemo(() => {\n    const badges = [];\n    if (!isNil(topLeftBadgeProps)) {\n      badges.push(\n        <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n          <AvatarBadge size={size} {...topLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(topRightBadgeProps)) {\n      badges.push(\n        <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n          <AvatarBadge size={size} {...topRightBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomLeftBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n          <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomRightBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n          <AvatarBadge size={size} {...bottomRightBadgeProps} />\n        </div>\n      );\n    }\n\n    return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n  }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n  const defaultTabIndex = useMemo(() => {\n    if (!disabled && (onClick || overrideTooltipProps?.content)) {\n      return 0;\n    }\n    return -1;\n  }, [disabled, onClick, overrideTooltipProps?.content]);\n\n  const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n  const clickHandler = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event, id);\n      }\n    },\n    [onClick, id]\n  );\n\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n      className={cx(styles.avatar, styles[size], className)}\n      style={sizeStyle}\n    >\n      <ClickableWrapper\n        isClickable={!!onClick}\n        clickableProps={{\n          onClick: clickHandler,\n          tabIndex: \"-1\",\n          className: styles.clickableWrapper\n        }}\n      >\n        <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n          <div\n            className={cx(\n              styles.circle,\n              getStyle(styles, camelCase(\"circle--\" + type)),\n              {\n                [styles.disabled]: disabled,\n                [styles.square]: square,\n                [styles.withoutBorder]: withoutBorder\n              },\n              avatarContentWrapperClassName\n            )}\n            aria-hidden={ariaHidden}\n            tabIndex={overrideTabIndex}\n            style={{ ...backgroundColorStyle }}\n          >\n            <AvatarContent\n              type={type}\n              size={size}\n              src={src}\n              icon={icon}\n              text={text}\n              ariaLabel={ariaLabel}\n              role={role}\n              textClassName={textClassName}\n            />\n          </div>\n          {badgesContainer}\n        </Tooltip>\n      </ClickableWrapper>\n    </div>\n  );\n};\n\ninterface AvatarStaticProps {\n  types: typeof AvatarTypeEnum;\n  sizes: typeof AvatarSizeEnum;\n  colors: typeof ElementAllowedColorEnum;\n  backgroundColors: typeof ElementAllowedColorEnum;\n}\n\nexport default withStaticProps<AvatarProps, AvatarStaticProps>(Avatar, {\n  types: AvatarTypeEnum,\n  sizes: AvatarSizeEnum,\n  colors: ElementAllowedColorEnum,\n  backgroundColors: ElementAllowedColorEnum\n});\n"],"names":["withStaticProps","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent","types","AvatarTypeEnum","sizes","AvatarSizeEnum","colors","ElementAllowedColorEnum","backgroundColors"],"mappings":"kyBAoHA,IA4JeA,EAAAA,GA5JA,SAAHC,GA4BM,IA3BhBC,EAAED,EAAFC,GAAEC,EAAAF,EACFG,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAASJ,EAATI,UACAC,EAA6BL,EAA7BK,8BAA6BC,EAAAN,EAC7BO,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EAClBS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAGV,EAAHU,IACAC,EAAIX,EAAJW,KACAC,EAAIZ,EAAJY,KACAC,EAAYb,EAAZa,aACAC,EAASd,EAATc,UAASC,EAAAf,EACTgB,eAAAA,OAAiB,IAAHD,GAAQA,EACtBE,EAAIjB,EAAJiB,KAAIC,EAAAlB,EACJmB,gBAAAA,OAAkB,IAAHD,EAAG,aAAYA,EAC9BE,EAAMpB,EAANoB,OACAC,EAAQrB,EAARqB,SACAC,EAAQtB,EAARsB,SAAQC,EAAAvB,EACRwB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAiBzB,EAAjByB,kBACAC,EAAkB1B,EAAlB0B,mBACAC,EAAoB3B,EAApB2B,qBACAC,EAAqB5B,EAArB4B,sBAAqBC,EAAA7B,EACrB8B,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAA/B,EACrBgC,WAAAA,OAAa,IAAHD,EAAG,KAAIA,EAAAE,EAAAjC,EACjBkC,sBAAAA,OAAwB,IAAHD,EAAG,KAAIA,EAC5BE,EAAOnC,EAAPmC,QACeC,EAAUpC,EAAzB,eAEMqC,EAAuBC,GAAQ,WACnC,OAAIJ,EAA8B,CAAEf,gBAAiBe,GAC9CxB,EAAM,CAAA,EAAK,CAAES,gBAAiBoB,EAAgBpB,GACtD,GAAE,CAACT,EAAKS,EAAiBe,IACpBM,GAAYF,GAAQ,WACxB,OAAON,EAAa,CAAES,OAAQT,EAAYU,MAAOV,GAAe,EAClE,GAAG,CAACA,IAEEW,GAAuBL,GAAQ,WACnC,IAAItB,EAEJ,OAAIH,EACF+B,OAAAC,OAAA,CAASC,QAAShC,GAAcD,GAEzB,CAAEiC,QAAShC,EAErB,GAAE,CAACA,EAAWD,EAAcG,IAEvB+B,GAAkBT,GAAQ,WAC9B,IAAMU,EAAS,GA8Bf,OA7BKC,EAAMxB,IACTuB,EAAOE,KACLC,uBAAKC,IAAI,iBAAiBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOE,eAC3DL,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUgB,MAI9BwB,EAAMvB,IACTsB,EAAOE,KACLC,uBAAKC,IAAI,kBAAkBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOK,gBAC5DR,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUiB,MAI9BuB,EAAMtB,IACTqB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOM,kBAC9DT,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUkB,MAI9BsB,EAAMrB,IACToB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOO,mBAC9DV,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUmB,MAK5BoB,EAAOc,OAAS,EAAIX,EAAKM,cAAA,MAAA,CAAArD,UAAWiD,EAAGC,EAAON,SAAUA,GAAgB,IACjF,GAAG,CAACvC,EAAMgB,EAAmBC,EAAoBC,EAAsBC,IAEjEmC,GAAkBzB,GAAQ,WAC9B,OAAKjB,IAAac,KAAWQ,gBAAAA,GAAsBG,UAG3C,EAFC,CAGV,GAAE,CAACzB,EAAUc,EAASQ,gBAAAA,GAAsBG,UAEvCkB,GAAmB1C,QAAAA,EAAYyC,GAE/BE,GAAeC,GACnB,SAACC,GACCA,EAAMC,iBACFjC,GACFA,EAAQgC,EAAOlE,EAEnB,GACA,CAACkC,EAASlC,IAGZ,OACEkD,EAAAM,cAAA,MAAA,CACExD,GAAIA,EACS,cAAAmC,GAAciC,EAAUC,EAAuBC,OAAQtE,GACpEG,UAAWiD,EAAGC,EAAOkB,OAAQlB,EAAO7C,GAAOL,GAC3CqE,MAAOjC,IAEPW,EAACM,cAAAiB,GACCC,cAAexC,EACfyC,eAAgB,CACdzC,QAAS8B,GACT3C,SAAU,KACVlB,UAAWkD,EAAOuB,mBAGpB1B,EAAAM,cAACqB,EAAQlC,OAAAC,OAAA,CAAAkC,YAAa,CAAC,QAAS,cAAeC,YAAa,CAAC,OAAQ,eAAmBrC,IACtFQ,EAAAM,cAAA,MAAA,CACErD,UAAWiD,EACTC,EAAO2B,OACPC,EAAS5B,EAAQ6B,EAAU,WAAahF,IAAMiF,EAAAA,EAAAA,EAAA,CAAA,EAE3C9B,EAAOjC,SAAWA,GAClBiC,EAAOlC,OAASA,GAChBkC,EAAOxB,cAAgBA,GAE1BzB,GACD,cACYmB,EACbF,SAAU0C,GACVS,MAAK7B,OAAAC,OAAA,CAAA,EAAOR,IAEZc,EAAAM,cAAC4B,EAAa,CACZlF,KAAMA,EACNM,KAAMA,EACNC,IAAKA,EACLC,KAAMA,EACNC,KAAMA,EACNE,UAAWA,EACXG,KAAMA,EACNV,cAAeA,KAGlBwC,KAKX,GASuE,CACrEuC,MAAOC,EACPC,MAAOC,EACPC,OAAQC,EACRC,iBAAkBD"}

package/dist/src/components/Avatar/Avatar.module.scss.js

@@ -1,2 +1,2 @@
-var e={avatar:"avatar_d1d0fa9d65",large:"large_fbce917c87",medium:"medium_7f3b557892",small:"small_d6a90bc738",xs:"xs_af44dfb521",clickableWrapper:"clickableWrapper_8b6277983a",circle:"circle_ee3c198a0e","focus-visible":"focus-visible_0dc7d430b2",circleImg:"circleImg_4b5ebd0798",circleText:"circleText_e654522c74",disabled:"disabled_d1d0fa9d65",square:"square_c1bcc52158",withoutBorder:"withoutBorder_daf504ec91",badges:"badges_d0d5f5a060",badge:"badge_dd0103839a",badgeTopLeft:"badgeTopLeft_f439058938",badgeTopRight:"badgeTopRight_761c5834a8",badgeBottomLeft:"badgeBottomLeft_a50fe857bd",badgeBottomRight:"badgeBottomRight_81048b8c54"};!function(e){const n="s_id-dccf983c2f60_3_41_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,d.firstChild?d.insertBefore(a,d.firstChild):d.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.avatar_d1d0fa9d65 {\n  position: relative;\n}\n\n.large_fbce917c87 {\n  height: 50px;\n  width: 50px;\n}\n\n.medium_7f3b557892 {\n  height: 32px;\n  width: 32px;\n}\n\n.small_d6a90bc738 {\n  height: 28px;\n  width: 28px;\n}\n\n.xs_af44dfb521 {\n  height: 20px;\n  width: 20px;\n}\n\n.clickableWrapper_8b6277983a {\n  height: 100%;\n  width: 100%;\n}\n\n.circle_ee3c198a0e {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  border: 1px solid;\n  border-radius: 50%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--text-color-on-primary);\n}\n\n.circle_ee3c198a0e:focus {\n  outline: none;\n}\n\n.circle_ee3c198a0e:focus:focus-visible, .circle_ee3c198a0e:focus.focus-visible_0dc7d430b2 {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.circle_ee3c198a0e:focus:focus:not(.focus-visible_0dc7d430b2) {\n  outline: none;\n}\n\n.circleImg_4b5ebd0798 {\n  border-color: var(--primary-background-color);\n}\n\n.circleText_e654522c74 {\n  border-color: var(--layout-border-color);\n}\n\n.disabled_d1d0fa9d65:before {\n  content: "";\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  opacity: 0.7;\n  background: var(--primary-background-color);\n}\n\n.square_c1bcc52158 {\n  border-radius: var(--border-radius-small);\n}\n\n.square_c1bcc52158:focus {\n  outline: none;\n}\n\n.square_c1bcc52158:focus:focus-visible, .square_c1bcc52158:focus.focus-visible_0dc7d430b2 {\n  outline: none;\n  z-index: 11;\n  border-radius: var(--border-radius-small);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.square_c1bcc52158:focus:focus:not(.focus-visible_0dc7d430b2) {\n  outline: none;\n}\n\n.withoutBorder_daf504ec91 {\n  border: none;\n}\n\n.badges_d0d5f5a060 {\n  position: absolute;\n  top: 50%;\n  left: 50%; /* position the left edge of the element at the middle of the parent */\n  transform: translate(-50%, -50%);\n  display: grid;\n  grid-template-columns: 50% 50%;\n  margin-left: auto;\n  margin-right: auto;\n  height: 110%;\n  width: 110%;\n}\n\n.badges_d0d5f5a060 .badge_dd0103839a {\n  display: flex;\n}\n\n.badges_d0d5f5a060 .badgeTopLeft_f439058938 {\n  grid-row: 1;\n  grid-column: 1;\n  justify-self: start;\n}\n\n.badges_d0d5f5a060 .badgeTopRight_761c5834a8 {\n  grid-row: 1;\n  grid-column: 2;\n  justify-self: end;\n}\n\n.badges_d0d5f5a060 .badgeBottomLeft_a50fe857bd {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  align-self: end;\n}\n\n.badges_d0d5f5a060 .badgeBottomRight_81048b8c54 {\n  grid-row: 2;\n  grid-column: 2;\n  justify-self: end;\n  align-self: end;\n}');export{e as default};
+var e={avatar:"avatar_1288542e42",large:"large_43dcf9c18a",medium:"medium_3060d81369",small:"small_be77e29fae",xs:"xs_0c4b315ec1",clickableWrapper:"clickableWrapper_1820a269c0",circle:"circle_e874e30295","focus-visible":"focus-visible_aefb99aafa",circleImg:"circleImg_73fd069ca1",circleText:"circleText_d9c683d2d5",disabled:"disabled_1288542e42",square:"square_ba26c5a24e",withoutBorder:"withoutBorder_03c611fedf",badges:"badges_ebbbebc445",badge:"badge_0b156b15f9",badgeTopLeft:"badgeTopLeft_8a2cc9502d",badgeTopRight:"badgeTopRight_a9e76ccb17",badgeBottomLeft:"badgeBottomLeft_e632e69346",badgeBottomRight:"badgeBottomRight_767056dcc3"};!function(e){const n="s_id-dccf983c2f60_3_42_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.avatar_1288542e42 {\n  position: relative;\n}\n\n.large_43dcf9c18a {\n  height: 50px;\n  width: 50px;\n}\n\n.medium_3060d81369 {\n  height: 32px;\n  width: 32px;\n}\n\n.small_be77e29fae {\n  height: 28px;\n  width: 28px;\n}\n\n.xs_0c4b315ec1 {\n  height: 20px;\n  width: 20px;\n}\n\n.clickableWrapper_1820a269c0 {\n  height: 100%;\n  width: 100%;\n}\n\n.circle_e874e30295 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  border: 1px solid;\n  border-radius: 50%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--text-color-on-primary);\n}\n\n.circle_e874e30295:focus {\n  outline: none;\n}\n\n.circle_e874e30295:focus:focus-visible, .circle_e874e30295:focus.focus-visible_aefb99aafa {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.circle_e874e30295:focus:focus:not(.focus-visible_aefb99aafa) {\n  outline: none;\n}\n\n.circleImg_73fd069ca1 {\n  border-color: var(--primary-background-color);\n}\n\n.circleText_d9c683d2d5 {\n  border-color: var(--layout-border-color);\n}\n\n.disabled_1288542e42:before {\n  content: "";\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  opacity: 0.7;\n  background: var(--primary-background-color);\n}\n\n.square_ba26c5a24e {\n  border-radius: var(--border-radius-small);\n}\n\n.square_ba26c5a24e:focus {\n  outline: none;\n}\n\n.square_ba26c5a24e:focus:focus-visible, .square_ba26c5a24e:focus.focus-visible_aefb99aafa {\n  outline: none;\n  z-index: 11;\n  border-radius: var(--border-radius-small);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.square_ba26c5a24e:focus:focus:not(.focus-visible_aefb99aafa) {\n  outline: none;\n}\n\n.withoutBorder_03c611fedf {\n  border: none;\n}\n\n.badges_ebbbebc445 {\n  position: absolute;\n  top: 50%;\n  left: 50%; /* position the left edge of the element at the middle of the parent */\n  transform: translate(-50%, -50%);\n  display: grid;\n  grid-template-columns: 50% 50%;\n  margin-left: auto;\n  margin-right: auto;\n  height: 110%;\n  width: 110%;\n}\n\n.badges_ebbbebc445 .badge_0b156b15f9 {\n  display: flex;\n}\n\n.badges_ebbbebc445 .badgeTopLeft_8a2cc9502d {\n  grid-row: 1;\n  grid-column: 1;\n  justify-self: start;\n}\n\n.badges_ebbbebc445 .badgeTopRight_a9e76ccb17 {\n  grid-row: 1;\n  grid-column: 2;\n  justify-self: end;\n}\n\n.badges_ebbbebc445 .badgeBottomLeft_e632e69346 {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  align-self: end;\n}\n\n.badges_ebbbebc445 .badgeBottomRight_767056dcc3 {\n  grid-row: 2;\n  grid-column: 2;\n  justify-self: end;\n  align-self: end;\n}');export{e as default};
 //# sourceMappingURL=Avatar.module.scss.js.map

package/dist/src/components/Avatar/AvatarBadge.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"../../../_virtual/_tslib.js";import{camelCase as t}from"lodash-es";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as a,ComponentDefaultTestId as o}from"../../tests/testIds.js";import r from"classnames";import i from"react";import m from"../Icon/CustomSvgIcon/CustomSvgIcon.js";import{AvatarSize as c}from"./AvatarConstants.js";import n from"./AvatarBadge.module.scss.js";import d from"../Icon/Icon.js";var l=function(c){var l=c.src,p=c.icon,f=c.tabIndex,j=void 0===f?0:f,v=c.className,b=c.size,g=void 0===b?"large":b,u=c.id,I=c["data-testid"],A=s(c,["src","icon","tabIndex","className","size","id","data-testid"]),C=r(e(n,t("badge--"+g)),v),N=I||a(o.AVATAR_BADGE,u);return p?i.createElement(d,Object.assign({icon:p,className:C},A,{"data-testid":N})):l?i.createElement(m,Object.assign({src:l,className:C,clickable:-1===j},A,{"data-testid":N})):null};Object.assign(l,{sizes:c});export{l as AvatarBadge};
+import{__rest as s}from"../../../_virtual/_tslib.js";import t from"react";import{camelCase as o}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as e,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import m from"../Icon/CustomSvgIcon/CustomSvgIcon.js";import{AvatarSize as c}from"./AvatarConstants.js";import l from"./AvatarBadge.module.scss.js";import d from"../Icon/Icon.js";import{withStaticProps as n}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var p=n((function(c){var n=c.src,p=c.icon,f=c.tabIndex,j=void 0===f?0:f,u=c.className,v=c.size,I=void 0===v?"large":v,b=c.id,g=c["data-testid"],A=s(c,["src","icon","tabIndex","className","size","id","data-testid"]),C=i(a(l,o("badge--"+I)),u),N=g||e(r.AVATAR_BADGE,b);return p?t.createElement(d,Object.assign({icon:p,className:C},A,{"data-testid":N})):n?t.createElement(m,Object.assign({src:n,className:C,clickable:-1===j},A,{"data-testid":N})):null}),{sizes:c});export{p as default};
 //# sourceMappingURL=AvatarBadge.js.map

package/dist/src/components/Avatar/AvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport CustomSvgIcon from \"../Icon/CustomSvgIcon/CustomSvgIcon\";\nimport { AvatarSize as AvatarSizeEnum } from \"./AvatarConstants\";\nimport { AvatarSize } from \"./Avatar.types\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport Icon from \"../Icon/Icon\";\nimport { SubIcon } from \"../../types\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n  /**\n   * The image source for the badge.\n   */\n  src?: string;\n  /**\n   * The icon displayed inside the badge.\n   */\n  icon?: SubIcon;\n  /**\n   * The tab index of the badge.\n   */\n  tabIndex?: string | number;\n  /**\n   * The size of the badge.\n   */\n  size?: AvatarSize;\n}\n\nexport const AvatarBadge: React.FC<AvatarBadgeProps> & {\n  sizes?: typeof AvatarSizeEnum;\n} = ({\n  src,\n  icon,\n  tabIndex = 0,\n  className,\n  size = \"large\",\n  id,\n  \"data-testid\": dataTestId,\n  ...otherProps\n}: AvatarBadgeProps) => {\n  const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n  const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n\n  if (icon) {\n    return <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />;\n  }\n\n  return src ? (\n    <CustomSvgIcon src={src} className={classNames} clickable={tabIndex === -1} {...otherProps} data-testid={testId} />\n  ) : null;\n};\n\nObject.assign(AvatarBadge, {\n  sizes: AvatarSizeEnum\n});\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","React","createElement","Icon","Object","assign","CustomSvgIcon","clickable","sizes","AvatarSizeEnum"],"mappings":"sdAgCaA,EAET,SAACC,OACHC,IAAAA,IACAC,IAAAA,KAAIC,IACJC,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,IAAAA,UAASC,IACTC,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,IAAAA,GACeC,IAAf,eACGC,EARAC,EAAAX,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,gBAUGY,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYT,IAAQF,GAC/DY,EAASR,GAAcS,EAAUC,EAAuBC,aAAcZ,GAE5E,OAAIN,EACKmB,EAACC,cAAAC,EAAKC,OAAAC,OAAA,CAAAvB,KAAMA,EAAMG,UAAWO,GAAgBF,EAAyB,CAAA,cAAAO,KAGxEhB,EACLoB,EAACC,cAAAI,EAAcF,OAAAC,OAAA,CAAAxB,IAAKA,EAAKI,UAAWO,EAAYe,WAAyB,IAAdvB,GAAqBM,EAAU,CAAA,cAAeO,KACvG,IACN,EAEAO,OAAOC,OAAO1B,EAAa,CACzB6B,MAAOC"}
+{"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport CustomSvgIcon from \"../Icon/CustomSvgIcon/CustomSvgIcon\";\nimport { AvatarSize as AvatarSizeEnum } from \"./AvatarConstants\";\nimport { AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport Icon from \"../Icon/Icon\";\nimport { VibeComponentProps, SubIcon, withStaticProps } from \"../../types\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n  /**\n   * The image source for the badge.\n   */\n  src?: string;\n  /**\n   * The icon displayed inside the badge.\n   */\n  icon?: SubIcon;\n  /**\n   * The tab index of the badge.\n   */\n  tabIndex?: string | number;\n  /**\n   * The size of the badge.\n   */\n  size?: AvatarSize;\n}\n\nconst AvatarBadge = ({\n  src,\n  icon,\n  tabIndex = 0,\n  className,\n  size = \"large\",\n  id,\n  \"data-testid\": dataTestId,\n  ...otherProps\n}: AvatarBadgeProps) => {\n  const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n  const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n\n  if (icon) {\n    return <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />;\n  }\n\n  return src ? (\n    <CustomSvgIcon src={src} className={classNames} clickable={tabIndex === -1} {...otherProps} data-testid={testId} />\n  ) : null;\n};\n\ninterface AvatarBadgeStaticProps {\n  sizes: typeof AvatarSizeEnum;\n}\n\nexport default withStaticProps<AvatarBadgeProps, AvatarBadgeStaticProps>(AvatarBadge, {\n  sizes: AvatarSizeEnum\n});\n"],"names":["withStaticProps","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","React","createElement","Icon","Object","assign","CustomSvgIcon","clickable","sizes","AvatarSizeEnum"],"mappings":"0jBA+BA,IA0BeA,EAAAA,GA1BK,SAACC,OACnBC,IAAAA,IACAC,IAAAA,KAAIC,IACJC,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,IAAAA,UAASC,IACTC,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,IAAAA,GACeC,IAAf,eACGC,EARgBC,EAAAX,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,gBAUbY,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYT,IAAQF,GAC/DY,EAASR,GAAcS,EAAUC,EAAuBC,aAAcZ,GAE5E,OAAIN,EACKmB,EAACC,cAAAC,EAAKC,OAAAC,OAAA,CAAAvB,KAAMA,EAAMG,UAAWO,GAAgBF,EAAyB,CAAA,cAAAO,KAGxEhB,EACLoB,EAACC,cAAAI,EAAcF,OAAAC,OAAA,CAAAxB,IAAKA,EAAKI,UAAWO,EAAYe,WAAyB,IAAdvB,GAAqBM,EAAU,CAAA,cAAeO,KACvG,IACN,GAMsF,CACpFW,MAAOC"}

package/dist/src/components/Avatar/AvatarBadge.module.scss.js

@@ -1,2 +1,2 @@
-var e={badgeLarge:"badgeLarge_9f74e37510",badgeMedium:"badgeMedium_0d860f5efb",badgeSmall:"badgeSmall_702fdada74",badgeXs:"badgeXs_324182504d"};!function(e){const d="s_id-e545a08d61b0_3_41_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge_9f74e37510 {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_0d860f5efb {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_702fdada74,\n.badgeXs_324182504d {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
+var e={badgeLarge:"badgeLarge_872c9a1eb5",badgeMedium:"badgeMedium_b772871cdb",badgeSmall:"badgeSmall_70aa18db1e",badgeXs:"badgeXs_cf6d2906e7"};!function(e){const d="s_id-e545a08d61b0_3_42_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const n=document.createElement("style");n.id=d,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge_872c9a1eb5 {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_b772871cdb {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_70aa18db1e,\n.badgeXs_cf6d2906e7 {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
 //# sourceMappingURL=AvatarBadge.module.scss.js.map

package/dist/src/components/Avatar/AvatarContent.js

@@ -1,2 +1,2 @@
-import{camelCase as t}from"lodash-es";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as a,ComponentDefaultTestId as s}from"../../tests/testIds.js";import r from"classnames";import o from"react";import{AvatarType as i,AvatarSize as m}from"./AvatarConstants.js";import n from"../Icon/Icon.js";import l from"./AvatarContent.module.scss.js";var c=function(i){var m=i.type,c=void 0===m?"text":m,d=i.src,p=i.icon,A=i.text,f=i.ariaLabel,N=i.role,u=i.size,T=void 0===u?"large":u,v=i.textClassName,C=void 0===v?"":v,j=i.id,E=i["data-testid"],x=r(e(l,t("content_"+c)),e(l,t("content_"+c+"--"+T)));switch(c){case"img":return o.createElement("img",{role:N,alt:f,src:d,className:x,id:j,"data-testid":E||a(s.AVATAR_CONTENT,j)});case"icon":return o.createElement(n,{icon:p,"aria-label":f,className:x,ariaHidden:!1,id:j,"data-testid":E||a(s.AVATAR_CONTENT,j)});case"text":return o.createElement("span",{"aria-label":f,role:N,className:r(x,C),id:j,"data-testid":E||a(s.AVATAR_CONTENT,j)},A);default:return null}};Object.assign(c,{types:i,sizes:m});export{c as AvatarContent};
+import{camelCase as t}from"lodash-es";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as s,ComponentDefaultTestId as a}from"../../tests/testIds.js";import r from"classnames";import o from"react";import{AvatarSize as i,AvatarType as m}from"./AvatarConstants.js";import l from"../Icon/Icon.js";import{withStaticProps as c}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import n from"./AvatarContent.module.scss.js";var d=c((function(i){var m=i.type,c=void 0===m?"text":m,d=i.src,p=i.icon,f=i.text,u=i.ariaLabel,A=i.role,N=i.size,T=void 0===N?"large":N,v=i.textClassName,j=void 0===v?"":v,C=i.id,E=i["data-testid"],x=r(e(n,t("content_"+c)),e(n,t("content_"+c+"--"+T)));switch(c){case"img":return o.createElement("img",{role:A,alt:u,src:d,className:x,id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)});case"icon":return o.createElement(l,{icon:p,"aria-label":u,className:x,ariaHidden:!1,id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)});case"text":return o.createElement("span",{"aria-label":u,role:A,className:r(x,j),id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)},f);default:return null}}),{sizes:i,types:m});export{d as default};
 //# sourceMappingURL=AvatarContent.js.map

package/dist/src/components/Avatar/AvatarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport Icon from \"../Icon/Icon\";\nimport { SubIcon, VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n  /**\n   * The image source when the type is set to `img`.\n   */\n  src?: string;\n  /**\n   * The type of content displayed inside the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * The size of the avatar content.\n   */\n  size?: AvatarSize;\n  /**\n   * The ARIA role of the content.\n   */\n  role?: string;\n  /**\n   * The label of the content for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * The icon displayed when the type is set to `icon`.\n   */\n  icon?: SubIcon;\n  /**\n   * Class name applied to the text content.\n   */\n  textClassName?: string;\n  /**\n   * The text displayed when the type is set to `text`.\n   */\n  text?: string;\n}\n\nexport const AvatarContent: React.FC<AvatarContentProps> & {\n  sizes?: typeof AvatarSizeEnum;\n  types?: typeof AvatarTypeEnum;\n} = ({\n  type = \"text\",\n  src,\n  icon,\n  text,\n  ariaLabel,\n  role,\n  size = \"large\",\n  textClassName = \"\",\n  id,\n  \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n  const className = cx(\n    getStyle(styles, camelCase(\"content_\" + type)),\n    getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n  );\n  switch (type) {\n    case \"img\":\n      return (\n        <img\n          role={role}\n          alt={ariaLabel}\n          src={src}\n          className={className}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"icon\":\n      return (\n        <Icon\n          icon={icon}\n          aria-label={ariaLabel}\n          // role={role}\n          className={className}\n          ariaHidden={false}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"text\":\n      return (\n        <span\n          aria-label={ariaLabel}\n          role={role}\n          className={cx(className, textClassName)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        >\n          {text}\n        </span>\n      );\n    default:\n      return null;\n  }\n};\n\nObject.assign(AvatarContent, {\n  types: AvatarTypeEnum,\n  sizes: AvatarSizeEnum\n});\n"],"names":["AvatarContent","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon","ariaHidden","Object","assign","types","AvatarTypeEnum","sizes","AvatarSizeEnum"],"mappings":"6XA8CaA,EAGT,SAHsBC,GAcD,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACAC,EAASN,EAATM,UACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EACXY,YAAY,EACZd,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb,EAEAsB,OAAOC,OAAO7B,EAAe,CAC3B8B,MAAOC,EACPC,MAAOC"}
+{"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport Icon from \"../Icon/Icon\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n  /**\n   * The image source when the type is set to `img`.\n   */\n  src?: string;\n  /**\n   * The type of content displayed inside the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * The size of the avatar content.\n   */\n  size?: AvatarSize;\n  /**\n   * The ARIA role of the content.\n   */\n  role?: string;\n  /**\n   * The label of the content for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * The icon displayed when the type is set to `icon`.\n   */\n  icon?: SubIcon;\n  /**\n   * Class name applied to the text content.\n   */\n  textClassName?: string;\n  /**\n   * The text displayed when the type is set to `text`.\n   */\n  text?: string;\n}\n\nconst AvatarContent = ({\n  type = \"text\",\n  src,\n  icon,\n  text,\n  ariaLabel,\n  role,\n  size = \"large\",\n  textClassName = \"\",\n  id,\n  \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n  const className = cx(\n    getStyle(styles, camelCase(\"content_\" + type)),\n    getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n  );\n  switch (type) {\n    case \"img\":\n      return (\n        <img\n          role={role}\n          alt={ariaLabel}\n          src={src}\n          className={className}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"icon\":\n      return (\n        <Icon\n          icon={icon}\n          aria-label={ariaLabel}\n          // role={role}\n          className={className}\n          ariaHidden={false}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"text\":\n      return (\n        <span\n          aria-label={ariaLabel}\n          role={role}\n          className={cx(className, textClassName)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        >\n          {text}\n        </span>\n      );\n    default:\n      return null;\n  }\n};\n\ninterface AvatarContentStaticProps {\n  sizes: typeof AvatarSizeEnum;\n  types: typeof AvatarTypeEnum;\n}\n\nexport default withStaticProps<AvatarContentProps, AvatarContentStaticProps>(AvatarContent, {\n  sizes: AvatarSizeEnum,\n  types: AvatarTypeEnum\n});\n"],"names":["withStaticProps","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon","ariaHidden","sizes","AvatarSizeEnum","types","AvatarTypeEnum"],"mappings":"ieA8CA,IA8DeA,EAAAA,GA9DO,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACAC,EAASN,EAATM,UACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EACXY,YAAY,EACZd,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb,GAO4F,CAC1FsB,MAAOC,EACPC,MAAOC"}

package/dist/src/components/Avatar/AvatarContent.module.scss.js

@@ -1,2 +1,2 @@
-var n={contentImg:"contentImg_a817e35a98",contentText:"contentText_b316bd565b",contentTextLarge:"contentTextLarge_6be4442fee",contentTextMedium:"contentTextMedium_f6252dfe2e",contentTextSmall:"contentTextSmall_a5456d2478",contentTextXs:"contentTextXs_4355e91402",contentIconLarge:"contentIconLarge_d6a90bc738",contentIconMedium:"contentIconMedium_f98f6f22c3",contentIconSmall:"contentIconSmall_b720e75641"};!function(n){const t="s_id-50188146c7c7_3_41_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".contentImg_a817e35a98 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.contentText_b316bd565b {\n  font-family: var(--font-family);\n  font-weight: 400;\n  line-height: 21px;\n  letter-spacing: -0.5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.contentTextLarge_6be4442fee {\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font-family: var(--font-family) !important;\n}\n\n.contentTextMedium_f6252dfe2e {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n\n.contentTextSmall_a5456d2478 {\n  margin-top: 1px;\n  font-size: 12px;\n}\n\n.contentTextXs_4355e91402 {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n\n.contentIconLarge_d6a90bc738 {\n  height: 28px;\n  width: 28px;\n}\n\n.contentIconMedium_f98f6f22c3 {\n  height: 18px;\n  width: 18px;\n}\n\n.contentIconSmall_b720e75641 {\n  height: 12px;\n  width: 12px;\n}");export{n as default};
+var n={contentImg:"contentImg_d409851ee0",contentText:"contentText_86517a80a3",contentTextLarge:"contentTextLarge_b3cd95d864",contentTextMedium:"contentTextMedium_62c973b5c4",contentTextSmall:"contentTextSmall_57575bf059",contentTextXs:"contentTextXs_e689fcb079",contentIconLarge:"contentIconLarge_be77e29fae",contentIconMedium:"contentIconMedium_fecb5d8585",contentIconSmall:"contentIconSmall_638deb0ed1"};!function(n){const t="s_id-50188146c7c7_3_42_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,e.firstChild?e.insertBefore(o,e.firstChild):e.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".contentImg_d409851ee0 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.contentText_86517a80a3 {\n  font-family: var(--font-family);\n  font-weight: 400;\n  line-height: 21px;\n  letter-spacing: -0.5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.contentTextLarge_b3cd95d864 {\n  font: var(--font-h3-normal);\n  letter-spacing: var(--letter-spacing-h3-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font-family: var(--font-family) !important;\n}\n\n.contentTextMedium_62c973b5c4 {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n\n.contentTextSmall_57575bf059 {\n  margin-top: 1px;\n  font-size: 12px;\n}\n\n.contentTextXs_e689fcb079 {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n\n.contentIconLarge_be77e29fae {\n  height: 28px;\n  width: 28px;\n}\n\n.contentIconMedium_fecb5d8585 {\n  height: 18px;\n  width: 18px;\n}\n\n.contentIconSmall_638deb0ed1 {\n  height: 12px;\n  width: 12px;\n}");export{n as default};
 //# sourceMappingURL=AvatarContent.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroup.module.scss.js

@@ -1,2 +1,2 @@
-var e={avatarGroupContainer:"avatarGroupContainer_fbf6edff39",avatarContainer:"avatarContainer_43d49433e8"};!function(e){const n="s_id-0d36779f5b9e_3_41_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".avatarGroupContainer_fbf6edff39 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_43d49433e8 {\n  margin-left: calc(-1 * var(--spacing-small));\n}");export{e as default};
+var e={avatarGroupContainer:"avatarGroupContainer_391a3e3e7f",avatarContainer:"avatarContainer_dc8e5217b8"};!function(e){const a="s_id-0d36779f5b9e_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}(".avatarGroupContainer_391a3e3e7f {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_dc8e5217b8 {\n  margin-left: calc(-1 * var(--spacing-small));\n}");export{e as default};
 //# sourceMappingURL=AvatarGroup.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js

@@ -1,2 +1,2 @@
-var n={counterContainer:"counterContainer_4b952f6bc9","focus-visible":"focus-visible_70eaa646d8",xs:"xs_8e8f71d01e",small:"small_a2b02c7ba9",medium:"medium_221dec5c65",large:"large_1698f9cd93",primary:"primary_a4a19f8faf",dark:"dark_3440f1a032",negative:"negative_1daf633064",light:"light_d0436beda4",disabled:"disabled_ca20cfa403",menu:"menu_db282c7d97"};!function(n){const e="s_id-6c7433759f1e_3_41_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".counterContainer_4b952f6bc9 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: calc(-1 * var(--spacing-small));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_4b952f6bc9:focus-visible, .counterContainer_4b952f6bc9.focus-visible_70eaa646d8 {\n  outline: none;\n}\n.counterContainer_4b952f6bc9:focus-visible:focus-visible, .counterContainer_4b952f6bc9:focus-visible.focus-visible_70eaa646d8, .counterContainer_4b952f6bc9.focus-visible_70eaa646d8:focus-visible, .counterContainer_4b952f6bc9.focus-visible_70eaa646d8.focus-visible_70eaa646d8 {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer_4b952f6bc9:focus-visible:focus:not(.focus-visible_70eaa646d8), .counterContainer_4b952f6bc9.focus-visible_70eaa646d8:focus:not(.focus-visible_70eaa646d8) {\n  outline: none;\n}\n.counterContainer_4b952f6bc9.xs_8e8f71d01e {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_4b952f6bc9.small_a2b02c7ba9 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_4b952f6bc9.medium_221dec5c65 {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_4b952f6bc9.large_1698f9cd93 {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--spacing-xs);\n}\n.counterContainer_4b952f6bc9.primary_a4a19f8faf {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_4b952f6bc9.dark_3440f1a032 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_4b952f6bc9.negative_1daf633064 {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_4b952f6bc9.light_d0436beda4 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_4b952f6bc9 .disabled_ca20cfa403, .counterContainer_4b952f6bc9.disabled_ca20cfa403 {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_db282c7d97 {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_db282c7d97::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_db282c7d97::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{n as default};
+var n={counterContainer:"counterContainer_f33244f982","focus-visible":"focus-visible_0783e7438e",xs:"xs_6e1c7ff15b",small:"small_436cb6f550",medium:"medium_4f11767ca8",large:"large_7c6e5ad243",primary:"primary_05fe28f74c",dark:"dark_fba91d5720",negative:"negative_feb531fc47",light:"light_6f19dc5a2d",disabled:"disabled_cfc938f399",menu:"menu_cf7fcbd2bc"};!function(n){const e="s_id-6c7433759f1e_3_42_0";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".counterContainer_f33244f982 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: calc(-1 * var(--spacing-small));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_f33244f982:focus-visible, .counterContainer_f33244f982.focus-visible_0783e7438e {\n  outline: none;\n}\n.counterContainer_f33244f982:focus-visible:focus-visible, .counterContainer_f33244f982:focus-visible.focus-visible_0783e7438e, .counterContainer_f33244f982.focus-visible_0783e7438e:focus-visible, .counterContainer_f33244f982.focus-visible_0783e7438e.focus-visible_0783e7438e {\n  outline: none;\n  z-index: 11;\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.counterContainer_f33244f982:focus-visible:focus:not(.focus-visible_0783e7438e), .counterContainer_f33244f982.focus-visible_0783e7438e:focus:not(.focus-visible_0783e7438e) {\n  outline: none;\n}\n.counterContainer_f33244f982.xs_6e1c7ff15b {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_f33244f982.small_436cb6f550 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_f33244f982.medium_4f11767ca8 {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_f33244f982.large_7c6e5ad243 {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--spacing-xs);\n}\n.counterContainer_f33244f982.primary_05fe28f74c {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_f33244f982.dark_fba91d5720 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_f33244f982.negative_feb531fc47 {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_f33244f982.light_6f19dc5a2d {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_f33244f982 .disabled_cfc938f399, .counterContainer_f33244f982.disabled_cfc938f399 {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_cf7fcbd2bc {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_cf7fcbd2bc::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_cf7fcbd2bc::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{n as default};
 //# sourceMappingURL=AvatarGroupCounter.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss.js

@@ -1,2 +1,2 @@
-var t={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_df080a823f",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_c97c8ce069",tooltipContainer:"tooltipContainer_ecaea23039","focus-visible":"focus-visible_70eaa646d8",tooltipGridContainer:"tooltipGridContainer_3b21168871",scrollableContainer:"scrollableContainer_c8fce98bc7"};!function(t){const e="s_id-6cc986178da6_3_41_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}(".tooltipAvatarItemTitle_df080a823f {\n  white-space: nowrap;\n}\n\n.tooltipAvatarItemAvatar_c97c8ce069 {\n  flex-shrink: 0;\n}\n\n.tooltipContainer_ecaea23039 {\n  max-height: 300px;\n  padding-right: var(--spacing-medium);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n\n.tooltipContainer_ecaea23039:focus, .tooltipContainer_ecaea23039:focus-visible, .tooltipContainer_ecaea23039.focus-visible_70eaa646d8 {\n  outline: none;\n}\n\n.tooltipGridContainer_3b21168871 {\n  max-width: 160px;\n  padding-right: 0;\n}\n\n.scrollableContainer_c8fce98bc7::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n\n.scrollableContainer_c8fce98bc7::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{t as default};
+var t={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_d1e2bf77fa",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_7312c07f4c",tooltipContainer:"tooltipContainer_453ff67d3d","focus-visible":"focus-visible_0783e7438e",tooltipGridContainer:"tooltipGridContainer_8619e1f455",scrollableContainer:"scrollableContainer_01354ab7eb"};!function(t){const e="s_id-6cc986178da6_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}(".tooltipAvatarItemTitle_d1e2bf77fa {\n  white-space: nowrap;\n}\n\n.tooltipAvatarItemAvatar_7312c07f4c {\n  flex-shrink: 0;\n}\n\n.tooltipContainer_453ff67d3d {\n  max-height: 300px;\n  padding-right: var(--spacing-medium);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--spacing-small);\n}\n\n.tooltipContainer_453ff67d3d:focus, .tooltipContainer_453ff67d3d:focus-visible, .tooltipContainer_453ff67d3d.focus-visible_0783e7438e {\n  outline: none;\n}\n\n.tooltipGridContainer_8619e1f455 {\n  max-width: 160px;\n  padding-right: 0;\n}\n\n.scrollableContainer_01354ab7eb::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n\n.scrollableContainer_01354ab7eb::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{t as default};
 //# sourceMappingURL=AvatarGroupCounterTooltipContent.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js

@@ -1,2 +1,2 @@
-var e={scrollableContainer:"scrollableContainer_82ce28b6e9",virtualizedTooltipContainer:"virtualizedTooltipContainer_2d78df20f3","focus-visible":"focus-visible_70eaa646d8"};!function(e){const i="s_id-13c8e71f272d_3_41_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const o=document.createElement("style");o.id=i,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".scrollableContainer_82ce28b6e9::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_82ce28b6e9::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_2d78df20f3 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_2d78df20f3:focus, .virtualizedTooltipContainer_2d78df20f3:focus-visible, .virtualizedTooltipContainer_2d78df20f3.focus-visible_70eaa646d8 {\n  outline: none;\n}");export{e as default};
+var e={scrollableContainer:"scrollableContainer_878c7c59b8",virtualizedTooltipContainer:"virtualizedTooltipContainer_53e5893536","focus-visible":"focus-visible_0783e7438e"};!function(e){const i="s_id-13c8e71f272d_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const o=document.createElement("style");o.id=i,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".scrollableContainer_878c7c59b8::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_878c7c59b8::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_53e5893536 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_53e5893536:focus, .virtualizedTooltipContainer_53e5893536:focus-visible, .virtualizedTooltipContainer_53e5893536.focus-visible_0783e7438e {\n  outline: none;\n}");export{e as default};
 //# sourceMappingURL=AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { CSSProperties, RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport Flex from \"../Flex/Flex\";\nimport Avatar, { AvatarProps } from \"../Avatar/Avatar\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { AvatarType } from \"../Avatar/Avatar.types\";\nimport { ElementContent } from \"src/types/ElementContent\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n  counterContainerRef = undefined,\n  tooltipContentContainerRef,\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  isKeyboardTooltipVisible,\n  setIsKeyboardTooltipVisible\n}: {\n  counterContainerRef: RefObject<HTMLDivElement>;\n  tooltipContentContainerRef: RefObject<HTMLElement>;\n  focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n  focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n  isKeyboardTooltipVisible: boolean;\n  setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n  const showKeyboardTooltip = useCallback(() => {\n    if (!isKeyboardTooltipVisible) {\n      // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n      setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n    }\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  const hideKeyboardTooltip = useCallback(() => {\n    if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  // Open tooltip manually when keyboard focusing on counter\n  useListenFocusTriggers({\n    ref: counterContainerRef,\n    onFocusByKeyboard: showKeyboardTooltip\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: tooltipContentContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  //Move focus to content by keyboard\n  useKeyEvent({\n    keys: TAB,\n    ref: counterContainerRef,\n    withoutAnyModifier: true,\n    preventDefault: true,\n    callback: useCallback(() => {\n      if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n    }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n  });\n\n  // Close tooltip by keyboard\n  useKeyEvent({\n    keys: TAB,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    withoutAnyModifier: true,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: tooltipContentContainerRef,\n    callback: useCallback(() => {\n      counterContainerRef?.current && counterContainerRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  // Close tooltip when moving focus to next element\n  useEventListener({\n    eventName: \"focus\",\n    ref: focusNextPlaceholderRef,\n    callback: hideKeyboardTooltip\n  });\n}\n\nexport const avatarRenderer = (\n  item: { value: AvatarProps & { tooltipContent: ElementContent } },\n  index: number,\n  style: CSSProperties,\n  type: AvatarType,\n  displayAsGrid: boolean\n) => {\n  const avatarProps = item.value;\n  const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n  const labelId = `tooltip-item-${index}-label`;\n\n  return (\n    <ClickableWrapper\n      key={index}\n      isClickable={!!avatarProps?.onClick}\n      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: \"-1\" }}\n    >\n      <div style={overrideStyle}>\n        <Flex direction=\"row\" gap=\"xs\" ariaLabelledby={labelId}>\n          <Avatar\n            {...avatarProps}\n            tooltipProps={undefined}\n            ariaLabel={\"\"}\n            customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n            type={type || avatarProps?.type}\n            tabIndex={-1}\n            size={Avatar.sizes.SMALL}\n            className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n          />\n          {!displayAsGrid && (\n            <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n              {avatarProps.tooltipContent}\n            </div>\n          )}\n        </Flex>\n      </div>\n    </ClickableWrapper>\n  );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","ariaLabelledby","Avatar","tooltipProps","ariaLabel","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","sizes","SMALL","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"4kBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,OAAsBC,IAAHF,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,EAC3D,GAAE,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,CAEagB,IAAAA,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,EAAoCC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAP,GAAO,CAAAQ,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,EAAa,UAE7C,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,SAAU,OAE1FR,EAAKS,cAAA,MAAA,CAAApB,MAAOK,GACVM,EAAAS,cAACC,EAAI,CAACC,UAAU,MAAMC,IAAI,KAAKC,eAAgBf,GAC7CE,EAACS,cAAAK,mBACKtB,EAAW,CACfuB,kBAAcvD,EACdwD,UAAW,GACXC,WAAYC,EACZ5B,KAAMA,IAAQE,eAAAA,EAAaF,MAC3BkB,UAAW,EACXW,KAAML,EAAOM,MAAMC,MACnBC,UAAWC,EAAuCC,4BAElDjC,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASwB,UAAWC,EAAuCE,wBACjEjC,EAAYkC,kBAO3B"}
+{"version":3,"file":"AvatarGroupCounterTooltipHelper.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx"],"sourcesContent":["import React, { CSSProperties, RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport Flex from \"../Flex/Flex\";\nimport Avatar, { AvatarProps } from \"../Avatar/Avatar\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { AvatarType } from \"../Avatar\";\nimport { ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n  counterContainerRef = undefined,\n  tooltipContentContainerRef,\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  isKeyboardTooltipVisible,\n  setIsKeyboardTooltipVisible\n}: {\n  counterContainerRef: RefObject<HTMLDivElement>;\n  tooltipContentContainerRef: RefObject<HTMLElement>;\n  focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n  focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n  isKeyboardTooltipVisible: boolean;\n  setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n  const showKeyboardTooltip = useCallback(() => {\n    if (!isKeyboardTooltipVisible) {\n      // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n      setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n    }\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  const hideKeyboardTooltip = useCallback(() => {\n    if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  // Open tooltip manually when keyboard focusing on counter\n  useListenFocusTriggers({\n    ref: counterContainerRef,\n    onFocusByKeyboard: showKeyboardTooltip\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: tooltipContentContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  //Move focus to content by keyboard\n  useKeyEvent({\n    keys: TAB,\n    ref: counterContainerRef,\n    withoutAnyModifier: true,\n    preventDefault: true,\n    callback: useCallback(() => {\n      if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n    }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n  });\n\n  // Close tooltip by keyboard\n  useKeyEvent({\n    keys: TAB,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    withoutAnyModifier: true,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: tooltipContentContainerRef,\n    callback: useCallback(() => {\n      counterContainerRef?.current && counterContainerRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  // Close tooltip when moving focus to next element\n  useEventListener({\n    eventName: \"focus\",\n    ref: focusNextPlaceholderRef,\n    callback: hideKeyboardTooltip\n  });\n}\n\nexport const avatarRenderer = (\n  item: { value: AvatarProps & { tooltipContent: ElementContent } },\n  index: number,\n  style: CSSProperties,\n  type: AvatarType,\n  displayAsGrid: boolean\n) => {\n  const avatarProps = item.value;\n  const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n  const labelId = `tooltip-item-${index}-label`;\n\n  return (\n    <ClickableWrapper\n      key={index}\n      isClickable={!!avatarProps?.onClick}\n      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: \"-1\" }}\n    >\n      <div style={overrideStyle}>\n        <Flex direction=\"row\" gap=\"xs\" ariaLabelledby={labelId}>\n          <Avatar\n            {...avatarProps}\n            tooltipProps={undefined}\n            ariaLabel={\"\"}\n            customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n            type={type || avatarProps?.type}\n            tabIndex={-1}\n            size={Avatar.sizes.SMALL}\n            className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n          />\n          {!displayAsGrid && (\n            <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n              {avatarProps.tooltipContent}\n            </div>\n          )}\n        </Flex>\n      </div>\n    </ClickableWrapper>\n  );\n};\n"],"names":["TAB","keyCodes","ESC","ESCAPE","useTooltipContentTabNavigation","_ref","_ref$counterContainer","counterContainerRef","undefined","tooltipContentContainerRef","focusPrevPlaceholderRef","focusNextPlaceholderRef","isKeyboardTooltipVisible","setIsKeyboardTooltipVisible","showKeyboardTooltip","useCallback","setTimeout","AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY","hideKeyboardTooltip","useListenFocusTriggers","ref","onFocusByKeyboard","useEventListener","eventName","callback","useKeyEvent","keys","withoutAnyModifier","preventDefault","current","focus","modifier","modifiers","SHIFT","avatarRenderer","item","index","style","type","displayAsGrid","avatarProps","value","overrideStyle","Object","assign","width","labelId","concat","React","ClickableWrapper","key","isClickable","onClick","clickableProps","event","id","tabIndex","createElement","Flex","direction","gap","ariaLabelledby","Avatar","tooltipProps","ariaLabel","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","size","sizes","SMALL","className","avatarGroupCounterTooltipContentStyles","tooltipAvatarItemAvatar","tooltipAvatarItemTitle","tooltipContent"],"mappings":"4kBAaA,IAAMA,EAAM,CAACC,EAASD,KAChBE,EAAM,CAACD,EAASE,iBAENC,EAA8BC,GAc7C,IAAAC,EAAAD,EAbCE,oBAAAA,OAAsBC,IAAHF,OAAGE,EAASF,EAC/BG,EAA0BJ,EAA1BI,2BACAC,EAAuBL,EAAvBK,wBACAC,EAAuBN,EAAvBM,wBACAC,EAAwBP,EAAxBO,yBACAC,EAA2BR,EAA3BQ,4BASMC,EAAsBC,GAAY,WACjCH,GAEHI,YAAW,WAAA,OAAMH,GAA4B,EAAK,GAAEI,EAExD,GAAG,CAACL,EAA0BC,IAExBK,EAAsBH,GAAY,WAClCH,GAA0BC,GAA4B,EAC5D,GAAG,CAACD,EAA0BC,IAG9BM,EAAuB,CACrBC,IAAKb,EACLc,kBAAmBP,IAGrBQ,EAAiB,CACfC,UAAW,OACXH,IAAKX,EACLe,SAAUN,IAIZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKb,EACLoB,oBAAoB,EACpBC,gBAAgB,EAChBJ,SAAUT,GAAY,WAChBH,IAA0BH,aAA0B,EAA1BA,EAA4BoB,UAAWpB,EAA2BoB,QAAQC,OAC1G,GAAG,CAAClB,EAA0BH,MAIhCgB,EAAY,CACVC,KAAM1B,EACN+B,SAAUN,EAAYO,UAAUC,MAChCb,IAAKb,EACLiB,SAAUN,IAEZO,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLkB,oBAAoB,EACpBH,SAAUT,GAAY,YAGpBJ,aAAuB,EAAvBA,EAAyBkB,UAAWlB,EAAwBkB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACF,EAAyBC,EAA0BC,MAEzDY,EAAY,CACVC,KAAM1B,EACNoB,IAAKX,EACLsB,SAAUN,EAAYO,UAAUC,MAChCT,SAAUT,GAAY,YAGpBL,aAAuB,EAAvBA,EAAyBmB,UAAWnB,EAAwBmB,QAAQC,QAChElB,GAA0BC,GAA4B,EAC3D,GAAE,CAACH,EAAyBE,EAA0BC,MAEzDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKX,EACLe,SAAUT,GAAY,YACpBR,aAAmB,EAAnBA,EAAqBsB,UAAWtB,EAAoBsB,QAAQC,QACxDlB,GAA0BC,GAA4B,EAC3D,GAAE,CAACN,EAAqBK,EAA0BC,MAErDY,EAAY,CACVC,KAAMxB,EACNkB,IAAKb,EACLiB,SAAUN,IAIZI,EAAiB,CACfC,UAAW,QACXH,IAAKT,EACLa,SAAUN,GAEd,CAEagB,IAAAA,EAAiB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEA,IAAMC,EAAcL,EAAKM,MACnBC,EAAoCC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAP,GAAO,CAAAQ,MAAON,OAAgB/B,EAAY,SAC9EsC,EAAO,gBAAAC,OAAmBX,EAAa,UAE7C,OACEY,gBAACC,EAAgB,CACfC,IAAKd,EACLe,eAAeX,eAAAA,EAAaY,SAC5BC,eAAgB,CAAED,QAAS,SAAAE,GAAK,OAAId,EAAYY,QAAQE,EAAOd,EAAYe,GAAG,EAAEC,SAAU,OAE1FR,EAAKS,cAAA,MAAA,CAAApB,MAAOK,GACVM,EAAAS,cAACC,EAAI,CAACC,UAAU,MAAMC,IAAI,KAAKC,eAAgBf,GAC7CE,EAACS,cAAAK,mBACKtB,EAAW,CACfuB,kBAAcvD,EACdwD,UAAW,GACXC,WAAYC,EACZ5B,KAAMA,IAAQE,eAAAA,EAAaF,MAC3BkB,UAAW,EACXW,KAAML,EAAOM,MAAMC,MACnBC,UAAWC,EAAuCC,4BAElDjC,GACAS,EAAAS,cAAA,MAAA,CAAKF,GAAIT,EAASwB,UAAWC,EAAuCE,wBACjEjC,EAAYkC,kBAO3B"}

package/dist/src/components/Badge/Badge.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import s from"classnames";import{camelCase as a}from"lodash-es";import i from"../../hooks/useMergeRef.js";import{getTestId as n}from"../../tests/testIds.js";import{ComponentDefaultTestId as m}from"../../tests/constants.js";import{BadgeType as c,BadgeAlignments as d,BadgeAnchor as l}from"./BadgeConstants.js";import p from"./Indicator/Indicator.js";import f from"../Counter/Counter.js";import{getStyle as g}from"../../helpers/typesciptCssModulesHelper.js";import u from"./Badge.module.scss.js";var j=r((function(r,c){var d=r.type,l=void 0===d?"indicator":d,j=r.anchor,v=void 0===j?"top-end":j,h=r.alignment,b=void 0===h?"rectangular":h,E=r.className,y=r.id,C=r["data-testid"],N=r.children,B=t(r,["type","anchor","alignment","className","id","data-testid","children"]),I=o(null),M=i(c,I),O=s(u.badge,g(u,a(v)),g(u,b)),_=B.color||"indicator"===l?"notification":"negative";return e.createElement("div",{ref:M,className:s(u.badgeWrapper,E),id:y},N,e.createElement("div",{className:O,"data-testid":C||n(m.BADGE,y)},"indicator"===l?e.createElement(p,Object.assign({color:_},B)):"counter"===l&&e.createElement(f,Object.assign({color:_},B))))}));j.types=c,j.alignments=d,j.anchors=l;export{j as default};
+import{__rest as t}from"../../../_virtual/_tslib.js";import e,{forwardRef as r,useRef as o}from"react";import s from"classnames";import{camelCase as a}from"lodash-es";import i from"../../hooks/useMergeRef.js";import{getTestId as m}from"../../tests/testIds.js";import{ComponentDefaultTestId as n}from"../../tests/constants.js";import{BadgeType as c,BadgeAlignments as d,BadgeAnchor as l}from"./BadgeConstants.js";import p from"./Indicator/Indicator.js";import f from"../Counter/Counter.js";import{getStyle as j}from"../../helpers/typesciptCssModulesHelper.js";import u from"./Badge.module.scss.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var v=g(r((function(r,c){var d=r.type,l=void 0===d?"indicator":d,g=r.anchor,v=void 0===g?"top-end":g,h=r.alignment,b=void 0===h?"rectangular":h,y=r.className,E=r.id,C=r["data-testid"],N=r.children,B=t(r,["type","anchor","alignment","className","id","data-testid","children"]),I=o(null),M=i(c,I),O=s(u.badge,j(u,a(v)),j(u,b)),_=B.color||"indicator"===l?"notification":"negative";return e.createElement("div",{ref:M,className:s(u.badgeWrapper,y),id:E},N,e.createElement("div",{className:O,"data-testid":C||m(n.BADGE,E)},"indicator"===l?e.createElement(p,Object.assign({color:_},B)):"counter"===l&&e.createElement(f,Object.assign({color:_},B))))})),{types:c,alignments:d,anchors:l});export{v as default};
 //# sourceMappingURL=Badge.js.map

package/dist/src/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport {\n  BadgeAlignments as BadgeAlignmentsEnum,\n  BadgeAnchor as BadgeAnchorEnum,\n  BadgeType as BadgeTypeEnum\n} from \"./BadgeConstants\";\nimport { BadgeAlignments, BadgeAnchor, BadgeType } from \"./Badge.types\";\nimport Indicator, { IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { CounterProps } from \"../Counter/Counter\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { IndicatorColor } from \"./Indicator/IndicatorConstants\";\nimport { CounterColor } from \"../Counter/CounterConstants\";\nimport styles from \"./Badge.module.scss\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n  /**\n   * The position of the badge relative to its parent.\n   */\n  anchor?: BadgeAnchor;\n  /**\n   * The alignment style of the badge.\n   */\n  alignment?: BadgeAlignments;\n  /**\n   * The content the badge is attached to.\n   */\n  children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n  /**\n   * The type of badge, set to `\"counter\"` for numeric values.\n   */\n  type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n  /**\n   * The type of badge, set to `\"indicator\"` for a simple dot.\n   */\n  type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);\n\nconst Badge: VibeComponent<BadgeProps> & {\n  types?: typeof BadgeTypeEnum;\n  alignments?: typeof BadgeAlignmentsEnum;\n  anchors?: typeof BadgeAnchorEnum;\n} = forwardRef(\n  (\n    {\n      type = \"indicator\",\n      anchor = \"top-end\",\n      alignment = \"rectangular\",\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      children,\n      ...badgeProps\n    }: BadgeProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const badgeClassNames = cx(\n      styles.badge,\n      getStyle(styles, camelCase(anchor as unknown as string)),\n      getStyle(styles, alignment)\n    );\n\n    const color = badgeProps.color || type === \"indicator\" ? \"notification\" : \"negative\";\n\n    return (\n      <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id}>\n        {children}\n        <div className={badgeClassNames} data-testid={dataTestId || getTestId(ComponentDefaultTestId.BADGE, id)}>\n          {type === \"indicator\" ? (\n            <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n          ) : (\n            type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nBadge.types = BadgeTypeEnum;\nBadge.alignments = BadgeAlignmentsEnum;\nBadge.anchors = BadgeAnchorEnum;\n\nexport default Badge;\n"],"names":["Badge","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","createElement","badgeWrapper","getTestId","ComponentDefaultTestId","BADGE","Indicator","Object","assign","Counter","types","BadgeTypeEnum","alignments","BadgeAlignmentsEnum","anchors","BadgeAnchorEnum"],"mappings":"qlBAoDMA,IAAAA,EAIFC,GACF,SACEC,EAUAC,SAHUD,EANRE,KAAAA,OAAO,IAAHC,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,OAAY,IAAHD,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,EARLC,EAAAb,EAAA,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,EAAKC,cAAA,MAAA,CAAAzB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOO,aAAcnB,GAAYC,GAAIA,GACrEE,EACDc,EAAKC,cAAA,MAAA,CAAAlB,UAAWU,EAA8B,cAAAR,GAAckB,EAAUC,EAAuBC,MAAOrB,IACxF,cAATP,EACCuB,EAACC,cAAAK,EAAUC,OAAAC,OAAA,CAAAT,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACS,EAAOF,OAAAC,OAAA,CAACT,MAAOA,GAA4BZ,KAK5E,IAGFd,EAAMqC,MAAQC,EACdtC,EAAMuC,WAAaC,EACnBxC,EAAMyC,QAAUC"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"lodash-es\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport {\n  BadgeAlignments as BadgeAlignmentsEnum,\n  BadgeAnchor as BadgeAnchorEnum,\n  BadgeType as BadgeTypeEnum\n} from \"./BadgeConstants\";\nimport { BadgeAlignments, BadgeAnchor, BadgeType } from \"./Badge.types\";\nimport Indicator, { IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { CounterProps } from \"../Counter/Counter\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { IndicatorColor } from \"./Indicator/IndicatorConstants\";\nimport { CounterColor } from \"../Counter/CounterConstants\";\nimport styles from \"./Badge.module.scss\";\nimport { VibeComponentProps, withStaticProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n  /**\n   * The position of the badge relative to its parent.\n   */\n  anchor?: BadgeAnchor;\n  /**\n   * The alignment style of the badge.\n   */\n  alignment?: BadgeAlignments;\n  /**\n   * The content the badge is attached to.\n   */\n  children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n  /**\n   * The type of badge, set to `\"counter\"` for numeric values.\n   */\n  type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n  /**\n   * The type of badge, set to `\"indicator\"` for a simple dot.\n   */\n  type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n  (\n    {\n      type = \"indicator\",\n      anchor = \"top-end\",\n      alignment = \"rectangular\",\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      children,\n      ...badgeProps\n    }: BadgeProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const badgeClassNames = cx(\n      styles.badge,\n      getStyle(styles, camelCase(anchor as unknown as string)),\n      getStyle(styles, alignment)\n    );\n\n    const color = badgeProps.color || type === \"indicator\" ? \"notification\" : \"negative\";\n\n    return (\n      <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id}>\n        {children}\n        <div className={badgeClassNames} data-testid={dataTestId || getTestId(ComponentDefaultTestId.BADGE, id)}>\n          {type === \"indicator\" ? (\n            <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n          ) : (\n            type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\ninterface BadgeStaticProps {\n  types: typeof BadgeTypeEnum;\n  alignments: typeof BadgeAlignmentsEnum;\n  anchors: typeof BadgeAnchorEnum;\n}\n\nexport default withStaticProps<BadgeProps, BadgeStaticProps>(Badge, {\n  types: BadgeTypeEnum,\n  alignments: BadgeAlignmentsEnum,\n  anchors: BadgeAnchorEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","type","_a$type","_a$anchor","anchor","_a$alignment","alignment","className","id","dataTestId","children","badgeProps","__rest","componentRef","useRef","mergedRef","useMergeRef","badgeClassNames","cx","styles","badge","getStyle","camelCase","color","React","createElement","badgeWrapper","getTestId","ComponentDefaultTestId","BADGE","Indicator","Object","assign","Counter","types","BadgeTypeEnum","alignments","BadgeAlignmentsEnum","anchors","BadgeAnchorEnum"],"mappings":"6rBAmDA,IA6CeA,EAAAA,EA7CDC,GACZ,SACEC,EAUAC,SAHUD,EANRE,KAAAA,OAAO,IAAHC,EAAG,YAAWA,EAAAC,EAMVJ,EALRK,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAAAE,EAKVN,EAJRO,UAAAA,OAAY,IAAHD,EAAG,cAAaA,EACzBE,EAGQR,EAHRQ,UACAC,EAEQT,EAFRS,GACeC,EACPV,EADR,eACAW,EAAQX,EAARW,SACGC,EARLC,EAAAb,EAAA,CAAA,OAAA,SAAA,YAAA,YAAA,KAAA,cAAA,aAYMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAC7BI,EAAkBC,EACtBC,EAAOC,MACPC,EAASF,EAAQG,EAAUlB,IAC3BiB,EAASF,EAAQb,IAGbiB,EAAQZ,EAAWY,OAAkB,cAATtB,EAAuB,eAAiB,WAE1E,OACEuB,EAAKC,cAAA,MAAA,CAAAzB,IAAKe,EAAWR,UAAWW,EAAGC,EAAOO,aAAcnB,GAAYC,GAAIA,GACrEE,EACDc,EAAKC,cAAA,MAAA,CAAAlB,UAAWU,EAA8B,cAAAR,GAAckB,EAAUC,EAAuBC,MAAOrB,IACxF,cAATP,EACCuB,EAACC,cAAAK,EAAUC,OAAAC,OAAA,CAAAT,MAAOA,GAA8BZ,IAEvC,YAATV,GAAsBuB,gBAACS,EAAOF,OAAAC,OAAA,CAACT,MAAOA,GAA4BZ,KAK5E,IASkE,CAClEuB,MAAOC,EACPC,WAAYC,EACZC,QAASC"}

package/dist/src/components/Badge/Badge.module.scss.js

@@ -1,2 +1,2 @@
-var a={badgeWrapper:"badgeWrapper_d1d0fa9d65",badge:"badge_a73b7cb7ca",outside:"outside_4434d3b955",topEnd:"topEnd_76c0f2b064",rectangular:"rectangular_af096bcc71",circular:"circular_63492cb78a",topStart:"topStart_efb15fe1ce",bottomEnd:"bottomEnd_58c327a62d",bottomStart:"bottomStart_968f3a5beb"};!function(a){const t="s_id-b5dca6298ea9_3_41_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,e.firstChild?e.insertBefore(d,e.firstChild):e.appendChild(d),d.appendChild(document.createTextNode(a))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=a)}(".badgeWrapper_d1d0fa9d65 {\n  position: relative;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca {\n  z-index: 1;\n  position: absolute;\n  border-radius: 16px;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca:not(.outside_4434d3b955) {\n  border: 2px solid;\n  border-color: var(--primary-background-color);\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topEnd_76c0f2b064.rectangular_af096bcc71 {\n  top: 0;\n  right: 0;\n  translate: 50% -50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topEnd_76c0f2b064.outside_4434d3b955 {\n  top: 0;\n  right: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topEnd_76c0f2b064.circular_63492cb78a {\n  top: 15%;\n  right: 15%;\n  translate: 50% -50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topStart_efb15fe1ce.rectangular_af096bcc71 {\n  top: 0;\n  left: 0;\n  translate: -50% -50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topStart_efb15fe1ce.outside_4434d3b955 {\n  top: 0;\n  left: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.topStart_efb15fe1ce.circular_63492cb78a {\n  top: 15%;\n  left: 15%;\n  translate: -50% -50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomEnd_58c327a62d.rectangular_af096bcc71 {\n  bottom: 0;\n  right: 0;\n  translate: 50% 50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomEnd_58c327a62d.outside_4434d3b955 {\n  bottom: 0;\n  right: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomEnd_58c327a62d.circular_63492cb78a {\n  bottom: 15%;\n  right: 15%;\n  translate: 50% 50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomStart_968f3a5beb.rectangular_af096bcc71 {\n  bottom: 0;\n  left: 0;\n  translate: -50% 50%;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomStart_968f3a5beb.outside_4434d3b955 {\n  bottom: 0;\n  left: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_d1d0fa9d65 .badge_a73b7cb7ca.bottomStart_968f3a5beb.circular_63492cb78a {\n  bottom: 15%;\n  left: 15%;\n  translate: -50% 50%;\n}");export{a as default};
+var a={badgeWrapper:"badgeWrapper_1288542e42",badge:"badge_819a68f14f",outside:"outside_64392af893",topEnd:"topEnd_39dad14f90",rectangular:"rectangular_d7e852b23a",circular:"circular_b277a7a862",topStart:"topStart_c1ae36e59c",bottomEnd:"bottomEnd_d110dd7796",bottomStart:"bottomStart_5bf32f3d82"};!function(a){const e="s_id-b5dca6298ea9_3_42_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const n=document.createElement("style");n.id=e,t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.appendChild(document.createTextNode(a))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=a)}(".badgeWrapper_1288542e42 {\n  position: relative;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f {\n  z-index: 1;\n  position: absolute;\n  border-radius: 16px;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f:not(.outside_64392af893) {\n  border: 2px solid;\n  border-color: var(--primary-background-color);\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topEnd_39dad14f90.rectangular_d7e852b23a {\n  top: 0;\n  right: 0;\n  translate: 50% -50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topEnd_39dad14f90.outside_64392af893 {\n  top: 0;\n  right: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topEnd_39dad14f90.circular_b277a7a862 {\n  top: 15%;\n  right: 15%;\n  translate: 50% -50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topStart_c1ae36e59c.rectangular_d7e852b23a {\n  top: 0;\n  left: 0;\n  translate: -50% -50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topStart_c1ae36e59c.outside_64392af893 {\n  top: 0;\n  left: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.topStart_c1ae36e59c.circular_b277a7a862 {\n  top: 15%;\n  left: 15%;\n  translate: -50% -50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomEnd_d110dd7796.rectangular_d7e852b23a {\n  bottom: 0;\n  right: 0;\n  translate: 50% 50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomEnd_d110dd7796.outside_64392af893 {\n  bottom: 0;\n  right: -2px;\n  translate: 100% 0;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomEnd_d110dd7796.circular_b277a7a862 {\n  bottom: 15%;\n  right: 15%;\n  translate: 50% 50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomStart_5bf32f3d82.rectangular_d7e852b23a {\n  bottom: 0;\n  left: 0;\n  translate: -50% 50%;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomStart_5bf32f3d82.outside_64392af893 {\n  bottom: 0;\n  left: -2px;\n  translate: -100% 0;\n}\n.badgeWrapper_1288542e42 .badge_819a68f14f.bottomStart_5bf32f3d82.circular_b277a7a862 {\n  bottom: 15%;\n  left: 15%;\n  translate: -50% 50%;\n}");export{a as default};
 //# sourceMappingURL=Badge.module.scss.js.map

package/dist/src/components/Badge/Indicator/Indicator.js

@@ -1,2 +1,2 @@
-import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{IndicatorColor as r}from"./IndicatorConstants.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{getTestId as i}from"../../../tests/testIds.js";var e=function(r){var e=r.color,m=r.id,c=r["data-testid"];return t.createElement("div",{className:s(o.indicator,o[void 0===e?"notification":e],r.className),"data-testid":c||i(a.INDICATOR,m)})};e.colors=r;export{e as default};
+import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{IndicatorColor as r}from"./IndicatorConstants.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{withStaticProps as i}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import{getTestId as m}from"../../../tests/testIds.js";var e=i((function(r){var i=r.color,e=r.id,c=r["data-testid"];return t.createElement("div",{className:s(o.indicator,o[void 0===i?"notification":i],r.className),"data-testid":c||m(a.INDICATOR,e)})}),{colors:r});export{e as default};
 //# sourceMappingURL=Indicator.js.map

package/dist/src/components/Badge/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { IndicatorColor as IndicatorColorEnum } from \"./IndicatorConstants\";\nimport { IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n  /**\n   * The color of the indicator.\n   */\n  color?: IndicatorColor;\n}\n\nconst Indicator: React.FC<IndicatorProps> & { colors?: typeof IndicatorColorEnum } = ({\n  color = \"notification\",\n  className,\n  id,\n  \"data-testid\": dataTestId\n}: IndicatorProps) => {\n  return (\n    <div\n      className={cx(styles.indicator, styles[color], className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.INDICATOR, id)}\n    />\n  );\n};\n\nIndicator.colors = IndicatorColorEnum;\n\nexport default Indicator;\n"],"names":["Indicator","_ref","_ref$color","color","id","dataTestId","React","createElement","className","cx","styles","indicator","getTestId","ComponentDefaultTestId","INDICATOR","colors","IndicatorColorEnum"],"mappings":"6QAgBA,IAAMA,EAA+E,SAAtEC,GAKM,IAAAC,EAAAD,EAJnBE,MAEAC,EAAEH,EAAFG,GACeC,EAAUJ,EAAzB,eAEA,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAGC,EAAOC,UAAWD,OAP5B,IAAHR,EAAG,eAAcA,GACbD,EAATO,WAOiB,cAAAH,GAAcO,EAAUC,EAAuBC,UAAWV,IAG7E,EAEAJ,EAAUe,OAASC"}
+{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { IndicatorColor as IndicatorColorEnum } from \"./IndicatorConstants\";\nimport { IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { VibeComponentProps, withStaticProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n  /**\n   * The color of the indicator.\n   */\n  color?: IndicatorColor;\n}\n\nconst Indicator = ({ color = \"notification\", className, id, \"data-testid\": dataTestId }: IndicatorProps) => {\n  return (\n    <div\n      className={cx(styles.indicator, styles[color], className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.INDICATOR, id)}\n    />\n  );\n};\n\ninterface IndicatorStaticProps {\n  colors: typeof IndicatorColorEnum;\n}\n\nexport default withStaticProps<IndicatorProps, IndicatorStaticProps>(Indicator, {\n  colors: IndicatorColorEnum\n});\n"],"names":["withStaticProps","_ref","_ref$color","color","id","dataTestId","React","createElement","className","cx","styles","indicator","getTestId","ComponentDefaultTestId","INDICATOR","colors","IndicatorColorEnum"],"mappings":"2XAgBA,IAaeA,EAAAA,GAbG,SAAHC,GAA4F,IAAAC,EAAAD,EAAtFE,MAAmCC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAC1D,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAGC,EAAOC,UAAWD,OAHT,IAAHR,EAAG,eAAcA,GAAWD,EAATO,WAI1B,cAAAH,GAAcO,EAAUC,EAAuBC,UAAWV,IAG7E,GAMgF,CAC9EW,OAAQC"}

package/dist/src/components/Badge/Indicator/Indicator.module.scss.js

@@ -1,2 +1,2 @@
-var e={indicator:"indicator_6000edc9c6",primary:"primary_112696f326",notification:"notification_8fd8b9cb27"};!function(e){const i="s_id-d6448d74722f_3_41_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const t=document.createElement("style");t.id=i,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".indicator_6000edc9c6 {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.indicator_6000edc9c6.primary_112696f326 {\n  background-color: var(--primary-color);\n}\n.indicator_6000edc9c6.notification_8fd8b9cb27 {\n  background-color: var(--negative-color);\n}");export{e as default};
+var e={indicator:"indicator_12dadc9f4c",primary:"primary_63afce1810",notification:"notification_12be58a175"};!function(e){const i="s_id-d6448d74722f_3_42_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const t=document.createElement("style");t.id=i,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".indicator_12dadc9f4c {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.indicator_12dadc9f4c.primary_63afce1810 {\n  background-color: var(--primary-color);\n}\n.indicator_12dadc9f4c.notification_12be58a175 {\n  background-color: var(--negative-color);\n}");export{e as default};
 //# sourceMappingURL=Indicator.module.scss.js.map

package/dist/src/components/BaseInput/BaseInput.module.scss.js

@@ -1,2 +1,2 @@
-var e={wrapper:"wrapper_6b8ae67afb",small:"small_0e1479ff26",medium:"medium_7e53cb7fb0",large:"large_1fc458369c",rightThinnerPadding:"rightThinnerPadding_3d70a1b7cf",input:"input_e10d25563e",success:"success_331f4a5f56",readOnly:"readOnly_e2daab18f0",disabled:"disabled_599e5e2dd7",error:"error_7cbe81c243"};!function(e){const r="s_id-1f2ba40749da_3_41_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}(".wrapper_6b8ae67afb {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-small);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-medium) var(--spacing-xs);\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n}\n.wrapper_6b8ae67afb.small_0e1479ff26 {\n  min-height: 32px;\n  height: 32px;\n  font: var(--font-text2-normal);\n}\n.wrapper_6b8ae67afb.medium_7e53cb7fb0 {\n  min-height: 40px;\n  height: 40px;\n}\n.wrapper_6b8ae67afb.large_1fc458369c {\n  min-height: 48px;\n  height: 48px;\n  padding-block: var(--spacing-small);\n}\n.wrapper_6b8ae67afb.rightThinnerPadding_3d70a1b7cf {\n  padding-inline-end: var(--spacing-medium);\n}\n.wrapper_6b8ae67afb:hover {\n  border-color: var(--primary-text-color);\n}\n@supports selector(:has(*)) {\n  .wrapper_6b8ae67afb:has(.input_e10d25563e:active, .input_e10d25563e:focus) {\n    border-color: var(--primary-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e:read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e:read-only) .input_e10d25563e {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e:disabled) {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e:disabled) .input_e10d25563e {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56:has(.input_e10d25563e:active, .input_e10d25563e:focus) {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e[aria-invalid=true]) {\n    border-color: var(--negative-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e[aria-invalid=true]):hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_6b8ae67afb:has(.input_e10d25563e[aria-invalid=true]):has(.input_e10d25563e:active, .input_e10d25563e:focus) {\n    border-color: var(--negative-color);\n  }\n}\n@supports not selector(:has(*)) {\n  .wrapper_6b8ae67afb:focus-within {\n    border-color: var(--primary-color);\n  }\n  .wrapper_6b8ae67afb.readOnly_e2daab18f0 {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_6b8ae67afb.readOnly_e2daab18f0 .input_e10d25563e {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_6b8ae67afb.disabled_599e5e2dd7 {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_6b8ae67afb.disabled_599e5e2dd7 .input_e10d25563e {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb.success_331f4a5f56:focus-within {\n    border-color: var(--positive-color);\n  }\n  .wrapper_6b8ae67afb.error_7cbe81c243 {\n    border-color: var(--negative-color);\n  }\n  .wrapper_6b8ae67afb.error_7cbe81c243:hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_6b8ae67afb.error_7cbe81c243:focus-within {\n    border-color: var(--negative-color);\n  }\n}\n.wrapper_6b8ae67afb .input_e10d25563e {\n  all: unset;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  outline: none;\n}\n.wrapper_6b8ae67afb .input_e10d25563e::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.wrapper_6b8ae67afb .input_e10d25563e:disabled::placeholder {\n  color: var(--disabled-text-color);\n}");export{e as default};
+var r={wrapper:"wrapper_63bb085a18",small:"small_4e892de34f",medium:"medium_7f2e45520e",large:"large_78719175fb",rightThinnerPadding:"rightThinnerPadding_58d109dea6",input:"input_7685faae89",success:"success_58289d3876",readOnly:"readOnly_4bd9d0a952",disabled:"disabled_4f9bf368bc",error:"error_680f1250ba"};!function(r){const n="s_id-1f2ba40749da_3_42_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const e=document.createElement("style");e.id=n,a.firstChild?a.insertBefore(e,a.firstChild):a.appendChild(e),e.appendChild(document.createTextNode(r))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=r)}(".wrapper_63bb085a18 {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-small);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-medium) var(--spacing-xs);\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n}\n.wrapper_63bb085a18.small_4e892de34f {\n  min-height: 32px;\n  height: 32px;\n  font: var(--font-text2-normal);\n}\n.wrapper_63bb085a18.medium_7f2e45520e {\n  min-height: 40px;\n  height: 40px;\n}\n.wrapper_63bb085a18.large_78719175fb {\n  min-height: 48px;\n  height: 48px;\n  padding-block: var(--spacing-small);\n}\n.wrapper_63bb085a18.rightThinnerPadding_58d109dea6 {\n  padding-inline-end: var(--spacing-medium);\n}\n.wrapper_63bb085a18:hover {\n  border-color: var(--primary-text-color);\n}\n@supports selector(:has(*)) {\n  .wrapper_63bb085a18:has(.input_7685faae89:active, .input_7685faae89:focus) {\n    border-color: var(--primary-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89:read-only) {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89:read-only) .input_7685faae89 {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89:disabled) {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89:disabled) .input_7685faae89 {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876:has(.input_7685faae89:active, .input_7685faae89:focus) {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89[aria-invalid=true]) {\n    border-color: var(--negative-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89[aria-invalid=true]):hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_63bb085a18:has(.input_7685faae89[aria-invalid=true]):has(.input_7685faae89:active, .input_7685faae89:focus) {\n    border-color: var(--negative-color);\n  }\n}\n@supports not selector(:has(*)) {\n  .wrapper_63bb085a18:focus-within {\n    border-color: var(--primary-color);\n  }\n  .wrapper_63bb085a18.readOnly_4bd9d0a952 {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n  .wrapper_63bb085a18.readOnly_4bd9d0a952 .input_7685faae89 {\n    background-color: var(--allgrey-background-color);\n  }\n  .wrapper_63bb085a18.disabled_4f9bf368bc {\n    cursor: not-allowed;\n    user-select: none;\n    border: none;\n    pointer-events: none;\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_63bb085a18.disabled_4f9bf368bc .input_7685faae89 {\n    background-color: var(--disabled-background-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876 {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876:hover {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18.success_58289d3876:focus-within {\n    border-color: var(--positive-color);\n  }\n  .wrapper_63bb085a18.error_680f1250ba {\n    border-color: var(--negative-color);\n  }\n  .wrapper_63bb085a18.error_680f1250ba:hover {\n    border-color: var(--negative-color);\n  }\n  .wrapper_63bb085a18.error_680f1250ba:focus-within {\n    border-color: var(--negative-color);\n  }\n}\n.wrapper_63bb085a18 .input_7685faae89 {\n  all: unset;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n  outline: none;\n}\n.wrapper_63bb085a18 .input_7685faae89::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.wrapper_63bb085a18 .input_7685faae89:disabled::placeholder {\n  color: var(--disabled-text-color);\n}");export{r as default};
 //# sourceMappingURL=BaseInput.module.scss.js.map

package/dist/src/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport {\n  BackgroundColor as BackgroundColorEnum,\n  BorderColor as BorderColorEnum,\n  BoxTextColor as BoxTextColorEnum,\n  Margin as MarginEnum,\n  MarginBottom as MarginBottomEnum,\n  MarginEnd as MarginEndEnum,\n  MarginStart as MarginStartEnum,\n  MarginTop as MarginTopEnum,\n  MarginX as MarginXEnum,\n  MarginY as MarginYEnum,\n  Padding as PaddingEnum,\n  PaddingBottom as PaddingBottomEnum,\n  PaddingEnd as PaddingEndEnum,\n  PaddingStart as PaddingStartEnum,\n  PaddingTop as PaddingTopEnum,\n  PaddingX as PaddingXEnum,\n  PaddingY as PaddingYEnum,\n  Rounded as RoundedEnum,\n  Shadow as ShadowEnum,\n  SizePrefixMapping\n} from \"./BoxConstants\";\nimport { BackgroundColor, BorderColor, BaseBoxSize, BoxSize, BoxTextColor, RoundedSize, Shadow } from \"./Box.types\";\nimport { VibeComponent, VibeComponentProps, withStaticProps, ElementContent } from \"../../types\";\nimport styles from \"./Box.module.scss\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\n\nexport interface BoxProps extends VibeComponentProps {\n  /**\n   * The HTML element or custom component used as the root.\n   */\n  elementType?: keyof JSX.IntrinsicElements | string;\n  /**\n   * The content inside the box.\n   */\n  children?: ElementContent;\n  /**\n   * If true, the box is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, applies a border to the box.\n   */\n  border?: boolean;\n  /**\n   * The color of the border.\n   */\n  borderColor?: BorderColor;\n  /**\n   * The border radius of the box.\n   */\n  rounded?: RoundedSize;\n  /**\n   * The shadow style applied to the box.\n   */\n  shadow?: Shadow;\n  /**\n   * The margin applied to all sides.\n   */\n  margin?: BoxSize;\n  /**\n   * The horizontal margin.\n   */\n  marginX?: BoxSize;\n  /**\n   * The vertical margin.\n   */\n  marginY?: BoxSize;\n  /**\n   * The top margin.\n   */\n  marginTop?: BoxSize;\n  /**\n   * The end (right in LTR, left in RTL) margin.\n   */\n  marginEnd?: BoxSize;\n  /**\n   * The bottom margin.\n   */\n  marginBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) margin.\n   */\n  marginStart?: BaseBoxSize;\n  /**\n   * The padding applied to all sides.\n   */\n  padding?: BaseBoxSize;\n  /**\n   * The horizontal padding.\n   */\n  paddingX?: BaseBoxSize;\n  /**\n   * The vertical padding.\n   */\n  paddingY?: BaseBoxSize;\n  /**\n   * The top padding.\n   */\n  paddingTop?: BaseBoxSize;\n  /**\n   * The end (right in LTR, left in RTL) padding.\n   */\n  paddingEnd?: BaseBoxSize;\n  /**\n   * The bottom padding.\n   */\n  paddingBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) padding.\n   */\n  paddingStart?: BaseBoxSize;\n  /**\n   * The background color of the box.\n   */\n  backgroundColor?: BackgroundColor;\n  /**\n   * The text color inside the box.\n   */\n  textColor?: BoxTextColor;\n  /**\n   * If true, the box content is scrollable.\n   */\n  scrollable?: boolean;\n  /**\n   * Inline styles applied to the box.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Box: VibeComponent<BoxProps> & {\n  borderColors?: typeof BorderColorEnum;\n  roundeds?: typeof RoundedEnum;\n  shadows?: typeof ShadowEnum;\n  margins?: typeof MarginEnum;\n  marginXs?: typeof MarginXEnum;\n  marginYs?: typeof MarginYEnum;\n  marginTops?: typeof MarginTopEnum;\n  marginEnds?: typeof MarginEndEnum;\n  marginBottoms?: typeof MarginBottomEnum;\n  marginStarts?: typeof MarginStartEnum;\n  paddings?: typeof PaddingEnum;\n  paddingXs?: typeof PaddingXEnum;\n  paddingYs?: typeof PaddingYEnum;\n  paddingTops?: typeof PaddingTopEnum;\n  paddingEnds?: typeof PaddingEndEnum;\n  paddingBottoms?: typeof PaddingBottomEnum;\n  paddingStarts?: typeof PaddingStartEnum;\n  backgroundColors?: typeof BackgroundColorEnum;\n  textColors?: typeof BoxTextColorEnum;\n} = forwardRef(\n  (\n    {\n      className,\n      id,\n      elementType = \"div\",\n      children,\n      disabled,\n      border,\n      scrollable,\n      style,\n      \"data-testid\": dataTestId,\n      ...props\n    }: BoxProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const getClassNames = (styles: Record<string, string>, props: Record<string, any | undefined>) => {\n      return Object.keys(props)\n        .filter(prop => props[prop])\n        .map(prop => {\n          const value = props[prop];\n          const prefix = SizePrefixMapping[prop as keyof typeof SizePrefixMapping];\n          return prefix && typeof value === \"string\" ? styles[camelCase(`${prefix}-${value}`)] : styles[value];\n        })\n        .filter(Boolean);\n    };\n\n    return React.createElement(\n      elementType,\n      {\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BOX, id),\n        ref: mergedRef,\n        className: cx(\n          styles.box,\n          className,\n          { [styles.opacityDisabled]: disabled, [styles.scrollable]: scrollable, [styles.border]: border },\n          ...getClassNames(styles, props)\n        ),\n        id: id,\n        style\n      },\n      children\n    );\n  }\n);\n\nexport default withStaticProps(Box, {\n  borderColors: BorderColorEnum,\n  roundeds: RoundedEnum,\n  shadows: ShadowEnum,\n  margins: MarginEnum,\n  marginXs: MarginXEnum,\n  marginYs: MarginYEnum,\n  marginTops: MarginTopEnum,\n  marginEnds: MarginEndEnum,\n  marginBottoms: MarginBottomEnum,\n  marginStarts: MarginStartEnum,\n  paddings: PaddingEnum,\n  paddingXs: PaddingXEnum,\n  paddingYs: PaddingYEnum,\n  paddingTops: PaddingTopEnum,\n  paddingEnds: PaddingEndEnum,\n  paddingBottoms: PaddingBottomEnum,\n  paddingStarts: PaddingStartEnum,\n  backgroundColors: BackgroundColorEnum,\n  textColors: BoxTextColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","className","id","_a$elementType","elementType","children","disabled","border","scrollable","style","dataTestId","props","__rest","componentRef","useRef","mergedRef","useMergeRef","React","createElement","getTestId","ComponentDefaultTestId","BOX","cx","apply","styles","box","_defineProperty","opacityDisabled","concat","_toConsumableArray","Object","keys","filter","prop","map","value","prefix","SizePrefixMapping","camelCase","Boolean","getClassNames","borderColors","BorderColorEnum","roundeds","RoundedEnum","shadows","ShadowEnum","margins","MarginEnum","marginXs","MarginXEnum","marginYs","MarginYEnum","marginTops","MarginTopEnum","marginEnds","MarginEndEnum","marginBottoms","MarginBottomEnum","marginStarts","MarginStartEnum","paddings","PaddingEnum","paddingXs","PaddingXEnum","paddingYs","PaddingYEnum","paddingTops","PaddingTopEnum","paddingEnds","PaddingEndEnum","paddingBottoms","PaddingBottomEnum","paddingStarts","PaddingStartEnum","backgroundColors","BackgroundColorEnum","textColors","BoxTextColorEnum"],"mappings":"q5BAuIA,IAqEeA,EAAAA,EAjDXC,GACF,SACEC,EAYAC,OAXEC,EAQyBF,EARzBE,UACAC,EAOyBH,EAPzBG,GAAEC,EAOuBJ,EANzBK,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EACnBE,EAKyBN,EALzBM,SACAC,EAIyBP,EAJzBO,SACAC,EAGyBR,EAHzBQ,OACAC,EAEyBT,EAFzBS,WACAC,EACyBV,EADzBU,MACeC,EAAUX,EAAzB,eACGY,EAVLC,EAAAb,EAAA,CAAA,YAAA,KAAA,cAAA,WAAA,WAAA,SAAA,aAAA,QAAA,gBAcMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAanC,OAAOI,EAAMC,cACXd,EACA,CACE,cAAeM,GAAcS,EAAUC,EAAuBC,IAAKnB,GACnEF,IAAKe,EACLd,UAAWqB,EAAEC,cACXC,EAAOC,IACPxB,EAASyB,EAAAA,EAAAA,KACNF,EAAOG,gBAAkBrB,GAAWkB,EAAOhB,WAAaA,GAAagB,EAAOjB,OAASA,IAAMqB,OAAAC,EAnB9E,SAACL,EAAgCb,GACrD,OAAOmB,OAAOC,KAAKpB,GAChBqB,QAAO,SAAAC,GAAI,OAAItB,EAAMsB,EAAK,IAC1BC,KAAI,SAAAD,GACH,IAAME,EAAQxB,EAAMsB,GACdG,EAASC,EAAkBJ,GACjC,OAAOG,GAA2B,iBAAVD,EAAqBX,EAAOc,EAASV,GAAAA,OAAIQ,EAAM,KAAAR,OAAIO,KAAYX,EAAOW,EAChG,IACCH,OAAOO,SAYHC,CAAchB,EAAQb,MAE3BT,GAAIA,EACJO,MAAAA,GAEFJ,EAEJ,IAGkC,CAClCoC,aAAcC,EACdC,SAAUC,EACVC,QAASC,EACTC,QAASC,EACTC,SAAUC,EACVC,SAAUC,EACVC,WAAYC,EACZC,WAAYC,EACZC,cAAeC,EACfC,aAAcC,EACdC,SAAUC,EACVC,UAAWC,EACXC,UAAWC,EACXC,YAAaC,EACbC,YAAaC,EACbC,eAAgBC,EAChBC,cAAeC,EACfC,iBAAkBC,EAClBC,WAAYC"}
+{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport {\n  BackgroundColor as BackgroundColorEnum,\n  BorderColor as BorderColorEnum,\n  BoxTextColor as BoxTextColorEnum,\n  Margin as MarginEnum,\n  MarginBottom as MarginBottomEnum,\n  MarginEnd as MarginEndEnum,\n  MarginStart as MarginStartEnum,\n  MarginTop as MarginTopEnum,\n  MarginX as MarginXEnum,\n  MarginY as MarginYEnum,\n  Padding as PaddingEnum,\n  PaddingBottom as PaddingBottomEnum,\n  PaddingEnd as PaddingEndEnum,\n  PaddingStart as PaddingStartEnum,\n  PaddingTop as PaddingTopEnum,\n  PaddingX as PaddingXEnum,\n  PaddingY as PaddingYEnum,\n  Rounded as RoundedEnum,\n  Shadow as ShadowEnum,\n  SizePrefixMapping\n} from \"./BoxConstants\";\nimport { BackgroundColor, BorderColor, BaseBoxSize, BoxSize, BoxTextColor, RoundedSize, Shadow } from \"./Box.types\";\nimport { VibeComponentProps, withStaticProps, ElementContent } from \"../../types\";\nimport styles from \"./Box.module.scss\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\n\nexport interface BoxProps extends VibeComponentProps {\n  /**\n   * The HTML element or custom component used as the root.\n   */\n  elementType?: keyof JSX.IntrinsicElements | string;\n  /**\n   * The content inside the box.\n   */\n  children?: ElementContent;\n  /**\n   * If true, the box is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, applies a border to the box.\n   */\n  border?: boolean;\n  /**\n   * The color of the border.\n   */\n  borderColor?: BorderColor;\n  /**\n   * The border radius of the box.\n   */\n  rounded?: RoundedSize;\n  /**\n   * The shadow style applied to the box.\n   */\n  shadow?: Shadow;\n  /**\n   * The margin applied to all sides.\n   */\n  margin?: BoxSize;\n  /**\n   * The horizontal margin.\n   */\n  marginX?: BoxSize;\n  /**\n   * The vertical margin.\n   */\n  marginY?: BoxSize;\n  /**\n   * The top margin.\n   */\n  marginTop?: BoxSize;\n  /**\n   * The end (right in LTR, left in RTL) margin.\n   */\n  marginEnd?: BoxSize;\n  /**\n   * The bottom margin.\n   */\n  marginBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) margin.\n   */\n  marginStart?: BaseBoxSize;\n  /**\n   * The padding applied to all sides.\n   */\n  padding?: BaseBoxSize;\n  /**\n   * The horizontal padding.\n   */\n  paddingX?: BaseBoxSize;\n  /**\n   * The vertical padding.\n   */\n  paddingY?: BaseBoxSize;\n  /**\n   * The top padding.\n   */\n  paddingTop?: BaseBoxSize;\n  /**\n   * The end (right in LTR, left in RTL) padding.\n   */\n  paddingEnd?: BaseBoxSize;\n  /**\n   * The bottom padding.\n   */\n  paddingBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) padding.\n   */\n  paddingStart?: BaseBoxSize;\n  /**\n   * The background color of the box.\n   */\n  backgroundColor?: BackgroundColor;\n  /**\n   * The text color inside the box.\n   */\n  textColor?: BoxTextColor;\n  /**\n   * If true, the box content is scrollable.\n   */\n  scrollable?: boolean;\n  /**\n   * Inline styles applied to the box.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Box = forwardRef(\n  (\n    {\n      className,\n      id,\n      elementType = \"div\",\n      children,\n      disabled,\n      border,\n      scrollable,\n      style,\n      \"data-testid\": dataTestId,\n      ...props\n    }: BoxProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const getClassNames = (styles: Record<string, string>, props: Record<string, any | undefined>) => {\n      return Object.keys(props)\n        .filter(prop => props[prop])\n        .map(prop => {\n          const value = props[prop];\n          const prefix = SizePrefixMapping[prop as keyof typeof SizePrefixMapping];\n          return prefix && typeof value === \"string\" ? styles[camelCase(`${prefix}-${value}`)] : styles[value];\n        })\n        .filter(Boolean);\n    };\n\n    return React.createElement(\n      elementType,\n      {\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BOX, id),\n        ref: mergedRef,\n        className: cx(\n          styles.box,\n          className,\n          { [styles.opacityDisabled]: disabled, [styles.scrollable]: scrollable, [styles.border]: border },\n          ...getClassNames(styles, props)\n        ),\n        id: id,\n        style\n      },\n      children\n    );\n  }\n);\n\ninterface BoxStaticProps {\n  borderColors: typeof BorderColorEnum;\n  roundeds: typeof RoundedEnum;\n  shadows: typeof ShadowEnum;\n  margins: typeof MarginEnum;\n  marginXs: typeof MarginXEnum;\n  marginYs: typeof MarginYEnum;\n  marginTops: typeof MarginTopEnum;\n  marginEnds: typeof MarginEndEnum;\n  marginBottoms: typeof MarginBottomEnum;\n  marginStarts: typeof MarginStartEnum;\n  paddings: typeof PaddingEnum;\n  paddingXs: typeof PaddingXEnum;\n  paddingYs: typeof PaddingYEnum;\n  paddingTops: typeof PaddingTopEnum;\n  paddingEnds: typeof PaddingEndEnum;\n  paddingBottoms: typeof PaddingBottomEnum;\n  paddingStarts: typeof PaddingStartEnum;\n  backgroundColors: typeof BackgroundColorEnum;\n  textColors: typeof BoxTextColorEnum;\n}\n\nexport default withStaticProps<BoxProps, BoxStaticProps>(Box, {\n  borderColors: BorderColorEnum,\n  roundeds: RoundedEnum,\n  shadows: ShadowEnum,\n  margins: MarginEnum,\n  marginXs: MarginXEnum,\n  marginYs: MarginYEnum,\n  marginTops: MarginTopEnum,\n  marginEnds: MarginEndEnum,\n  marginBottoms: MarginBottomEnum,\n  marginStarts: MarginStartEnum,\n  paddings: PaddingEnum,\n  paddingXs: PaddingXEnum,\n  paddingYs: PaddingYEnum,\n  paddingTops: PaddingTopEnum,\n  paddingEnds: PaddingEndEnum,\n  paddingBottoms: PaddingBottomEnum,\n  paddingStarts: PaddingStartEnum,\n  backgroundColors: BackgroundColorEnum,\n  textColors: BoxTextColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_a","ref","className","id","_a$elementType","elementType","children","disabled","border","scrollable","style","dataTestId","props","__rest","componentRef","useRef","mergedRef","useMergeRef","React","createElement","getTestId","ComponentDefaultTestId","BOX","cx","apply","styles","box","_defineProperty","opacityDisabled","concat","_toConsumableArray","Object","keys","filter","prop","map","value","prefix","SizePrefixMapping","camelCase","Boolean","getClassNames","borderColors","BorderColorEnum","roundeds","RoundedEnum","shadows","ShadowEnum","margins","MarginEnum","marginXs","MarginXEnum","marginYs","MarginYEnum","marginTops","MarginTopEnum","marginEnds","MarginEndEnum","marginBottoms","MarginBottomEnum","marginStarts","MarginStartEnum","paddings","PaddingEnum","paddingXs","PaddingXEnum","paddingYs","PaddingYEnum","paddingTops","PaddingTopEnum","paddingEnds","PaddingEndEnum","paddingBottoms","PaddingBottomEnum","paddingStarts","PaddingStartEnum","backgroundColors","BackgroundColorEnum","textColors","BoxTextColorEnum"],"mappings":"q5BAuIA,IAuEeA,EAAAA,EAvEHC,GACV,SACEC,EAYAC,OAXEC,EAQyBF,EARzBE,UACAC,EAOyBH,EAPzBG,GAAEC,EAOuBJ,EANzBK,YAAAA,OAAc,IAAHD,EAAG,MAAKA,EACnBE,EAKyBN,EALzBM,SACAC,EAIyBP,EAJzBO,SACAC,EAGyBR,EAHzBQ,OACAC,EAEyBT,EAFzBS,WACAC,EACyBV,EADzBU,MACeC,EAAUX,EAAzB,eACGY,EAVLC,EAAAb,EAAA,CAAA,YAAA,KAAA,cAAA,WAAA,WAAA,SAAA,aAAA,QAAA,gBAcMc,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAanC,OAAOI,EAAMC,cACXd,EACA,CACE,cAAeM,GAAcS,EAAUC,EAAuBC,IAAKnB,GACnEF,IAAKe,EACLd,UAAWqB,EAAEC,cACXC,EAAOC,IACPxB,EAASyB,EAAAA,EAAAA,KACNF,EAAOG,gBAAkBrB,GAAWkB,EAAOhB,WAAaA,GAAagB,EAAOjB,OAASA,IAAMqB,OAAAC,EAnB9E,SAACL,EAAgCb,GACrD,OAAOmB,OAAOC,KAAKpB,GAChBqB,QAAO,SAAAC,GAAI,OAAItB,EAAMsB,EAAK,IAC1BC,KAAI,SAAAD,GACH,IAAME,EAAQxB,EAAMsB,GACdG,EAASC,EAAkBJ,GACjC,OAAOG,GAA2B,iBAAVD,EAAqBX,EAAOc,EAASV,GAAAA,OAAIQ,EAAM,KAAAR,OAAIO,KAAYX,EAAOW,EAChG,IACCH,OAAOO,SAYHC,CAAchB,EAAQb,MAE3BT,GAAIA,EACJO,MAAAA,GAEFJ,EAEJ,IAyB4D,CAC5DoC,aAAcC,EACdC,SAAUC,EACVC,QAASC,EACTC,QAASC,EACTC,SAAUC,EACVC,SAAUC,EACVC,WAAYC,EACZC,WAAYC,EACZC,cAAeC,EACfC,aAAcC,EACdC,SAAUC,EACVC,UAAWC,EACXC,UAAWC,EACXC,YAAaC,EACbC,YAAaC,EACbC,eAAgBC,EAChBC,cAAeC,EACfC,iBAAkBC,EAClBC,WAAYC"}

package/dist/src/components/Box/Box.module.scss.js

@@ -1,2 +1,2 @@
-var n={box:"box_8bd64ead09",scrollable:"scrollable_a13a45a205",opacityDisabled:"opacityDisabled_cc2811a120",border:"border_75797f0c2d",borderColorUiBorderColor:"borderColorUiBorderColor_de5cdf74a2",borderColorLayoutBorderColor:"borderColorLayoutBorderColor_6b285ef17a",rounded0:"rounded0_cdded93f8e",roundedSmall:"roundedSmall_3b5fead0a6",roundedMedium:"roundedMedium_b282f0b107",roundedBig:"roundedBig_7d95c7cf95",shadowXs:"shadowXs_eb8c1dc7c8",shadowSmall:"shadowSmall_5022ebcfaa",shadowMedium:"shadowMedium_83fc735b86",shadowLarge:"shadowLarge_bf708c1cc1",m0:"m0_9cb2f720de",mXs:"mXs_edec437525",mSmall:"mSmall_dbaf31abf7",mMedium:"mMedium_2f013aae42",mLarge:"mLarge_5b125e8f69",mXl:"mXl_8e6ef3e954",mXxl:"mXxl_4f6a93ae41",mXxxl:"mXxxl_2164c6b09c",mAuto:"mAuto_62c2ddfe90",mx0:"mx0_904700c1bd",mxXs:"mxXs_12fcc411a3",mxSmall:"mxSmall_43111acad5",mxMedium:"mxMedium_ca560fd444",mxLarge:"mxLarge_c9da20b5d3",mxXl:"mxXl_3f5f4dd868",mxXxl:"mxXxl_3da93a9521",mxXxxl:"mxXxxl_f162201742",mxAuto:"mxAuto_2a5e715a11",my0:"my0_78cc3d617d",myXs:"myXs_3199c35393",mySmall:"mySmall_6561517642",myMedium:"myMedium_376d57f41d",myLarge:"myLarge_2ca41b4e6b",myXl:"myXl_c5c7eb050e",myXxl:"myXxl_fc4e0b4c4b",myXxxl:"myXxxl_75e0207e7e",myAuto:"myAuto_3a7f1677a3",mt0:"mt0_b3ceb9f551",mtXs:"mtXs_306b969ca8",mtSmall:"mtSmall_464180a7f4",mtMedium:"mtMedium_3763a78c18",mtLarge:"mtLarge_96623951f6",mtXl:"mtXl_5162ed86e0",mtXxl:"mtXxl_044080ca00",mtXxxl:"mtXxxl_86baa84e7f",mtAuto:"mtAuto_d675013795",me0:"me0_bcef060f6f",meXs:"meXs_a806d7fe21",meSmall:"meSmall_b051c21b4f",meMedium:"meMedium_ef32e7e9cc",meLarge:"meLarge_d01d1ef19e",meXl:"meXl_f549d6464d",meXxl:"meXxl_d459674d1e",meXxxl:"meXxxl_5925fe18e2",meAuto:"meAuto_d7fa767448",mb0:"mb0_66203f54e2",mbXs:"mbXs_b04ce17bc8",mbSmall:"mbSmall_dac6dbbf1e",mbMedium:"mbMedium_2e7adfa23b",mbLarge:"mbLarge_4ba1e222c2",mbXl:"mbXl_f4a64dcdd0",mbXxl:"mbXxl_3c1a3f93bd",mbXxxl:"mbXxxl_eddb853b89",mbAuto:"mbAuto_9a13f84bad",ms0:"ms0_ef97fd395a",msXs:"msXs_722f8b12e2",msSmall:"msSmall_39270c37ea",msMedium:"msMedium_fa550ae369",msLarge:"msLarge_5b6e10d159",msXl:"msXl_b77583aa43",msXxl:"msXxl_a22e6ad8bc",msXxxl:"msXxxl_cc6455fced",msAuto:"msAuto_9f5a392ec6",p0:"p0_d6b6b6d37e",pXs:"pXs_5871df65af",pSmall:"pSmall_c638e5a363",pMedium:"pMedium_3c0dcc2c4f",pLarge:"pLarge_7207932bd4",pXl:"pXl_e4d46fb4be",pXxl:"pXxl_9be25d9ae0",pXxxl:"pXxxl_aed0a724c7",px0:"px0_28299f1b2b",pxXs:"pxXs_3abb650d9d",pxSmall:"pxSmall_7223c8fd6d",pxMedium:"pxMedium_074c31e671",pxLarge:"pxLarge_e8b62b8ee7",pxXl:"pxXl_af24952eab",pxXxl:"pxXxl_96b0afd85c",pxXxxl:"pxXxxl_ee1ff8d2b9",py0:"py0_9d60ab91ab",pyXs:"pyXs_b9c396d5eb",pySmall:"pySmall_d2583ff3cf",pyMedium:"pyMedium_dfd11718eb",pyLarge:"pyLarge_24df49eed7",pyXl:"pyXl_fb54584550",pyXxl:"pyXxl_5bac4817be",pyXxxl:"pyXxxl_468dd3cb6b",pt0:"pt0_b3975a87aa",ptXs:"ptXs_7c5cf3c86d",ptSmall:"ptSmall_dd7ebbfb45",ptMedium:"ptMedium_1622a9d8f7",ptLarge:"ptLarge_e01c485184",ptXl:"ptXl_b8b63a6697",ptXxl:"ptXxl_80abd04e39",ptXxxl:"ptXxxl_877914ac66",pe0:"pe0_70e5b545bd",peXs:"peXs_8fd3e07609",peSmall:"peSmall_8361f59e13",peMedium:"peMedium_37691dca51",peLarge:"peLarge_3967d772ac",peXl:"peXl_9cc556faee",peXxl:"peXxl_8ef0bb96c0",peXxxl:"peXxxl_17ed4b2a72",pb0:"pb0_14c8a386cd",pbXs:"pbXs_e4194b4c60",pbSmall:"pbSmall_e0b259e0b9",pbMedium:"pbMedium_9c47cf00c5",pbLarge:"pbLarge_e4f5956c22",pbXl:"pbXl_7f82b18990",pbXxl:"pbXxl_34d09fef7e",pbXxxl:"pbXxxl_3327472eda",ps0:"ps0_f40cd46e43",psXs:"psXs_8d6e4eabde",psSmall:"psSmall_ecaf9c53a2",psMedium:"psMedium_038c3f399f",psLarge:"psLarge_67f71d5717",psXl:"psXl_616ee34bfe",psXxl:"psXxl_aa9e514f49",psXxxl:"psXxxl_126cfef62d",textPrimaryTextColor:"textPrimaryTextColor_bab58b0255",textTextColorOnInverted:"textTextColorOnInverted_b91f977b84",textSecondaryTextColor:"textSecondaryTextColor_f3d423e070",bgPrimaryBackgroundColor:"bgPrimaryBackgroundColor_e522fae97b",bgSecondaryBackgroundColor:"bgSecondaryBackgroundColor_a9c9a85ffe",bgGreyBackgroundColor:"bgGreyBackgroundColor_3d3a60f6cf",bgAllgreyBackgroundColor:"bgAllgreyBackgroundColor_f6327dcb46",bgInvertedColorBackground:"bgInvertedColorBackground_1e3962c4c0"};!function(n){const a="s_id-e8ebf0c89fee_3_41_0";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=n)}("/*  stylelint-disable scss/at-if-no-null */\n/*  stylelint-enable scss/at-if-no-null */\n.box_8bd64ead09 {\n  overflow: hidden;\n}\n.box_8bd64ead09.scrollable_a13a45a205 {\n  overflow: auto;\n}\n.box_8bd64ead09.scrollable_a13a45a205::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.box_8bd64ead09.scrollable_a13a45a205::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.opacityDisabled_cc2811a120 {\n  opacity: var(--disabled-component-opacity) !important;\n}\n.border_75797f0c2d {\n  border: var(--border-width) var(--border-style) var(--ui-border-color) !important;\n}\n.borderColorUiBorderColor_de5cdf74a2 {\n  border-color: var(--ui-border-color) !important;\n}\n.borderColorLayoutBorderColor_6b285ef17a {\n  border-color: var(--layout-border-color) !important;\n}\n.rounded0_cdded93f8e {\n  border-radius: 0 !important;\n}\n.roundedSmall_3b5fead0a6 {\n  border-radius: var(--border-radius-small) !important;\n}\n.roundedMedium_b282f0b107 {\n  border-radius: var(--border-radius-medium) !important;\n}\n.roundedBig_7d95c7cf95 {\n  border-radius: var(--border-radius-big) !important;\n}\n.shadowXs_eb8c1dc7c8 {\n  box-shadow: var(--box-shadow-xs) !important;\n}\n.shadowSmall_5022ebcfaa {\n  box-shadow: var(--box-shadow-small) !important;\n}\n.shadowMedium_83fc735b86 {\n  box-shadow: var(--box-shadow-medium) !important;\n}\n.shadowLarge_bf708c1cc1 {\n  box-shadow: var(--box-shadow-large) !important;\n}\n.m0_9cb2f720de {\n  margin: 0 !important;\n}\n.mXs_edec437525 {\n  margin: var(--spacing-xs) !important;\n}\n.mSmall_dbaf31abf7 {\n  margin: var(--spacing-small) !important;\n}\n.mMedium_2f013aae42 {\n  margin: var(--spacing-medium) !important;\n}\n.mLarge_5b125e8f69 {\n  margin: var(--spacing-large) !important;\n}\n.mXl_8e6ef3e954 {\n  margin: var(--spacing-xl) !important;\n}\n.mXxl_4f6a93ae41 {\n  margin: var(--spacing-xxl) !important;\n}\n.mXxxl_2164c6b09c {\n  margin: var(--spacing-xxxl) !important;\n}\n.mAuto_62c2ddfe90 {\n  margin: auto !important;\n}\n.mx0_904700c1bd {\n  margin-right: 0 !important;\n  margin-left: 0 !important;\n}\n.mxXs_12fcc411a3 {\n  margin-right: var(--spacing-xs) !important;\n  margin-left: var(--spacing-xs) !important;\n}\n.mxSmall_43111acad5 {\n  margin-right: var(--spacing-small) !important;\n  margin-left: var(--spacing-small) !important;\n}\n.mxMedium_ca560fd444 {\n  margin-right: var(--spacing-medium) !important;\n  margin-left: var(--spacing-medium) !important;\n}\n.mxLarge_c9da20b5d3 {\n  margin-right: var(--spacing-large) !important;\n  margin-left: var(--spacing-large) !important;\n}\n.mxXl_3f5f4dd868 {\n  margin-right: var(--spacing-xl) !important;\n  margin-left: var(--spacing-xl) !important;\n}\n.mxXxl_3da93a9521 {\n  margin-right: var(--spacing-xxl) !important;\n  margin-left: var(--spacing-xxl) !important;\n}\n.mxXxxl_f162201742 {\n  margin-right: var(--spacing-xxxl) !important;\n  margin-left: var(--spacing-xxxl) !important;\n}\n.mxAuto_2a5e715a11 {\n  margin-right: auto !important;\n  margin-left: auto !important;\n}\n.my0_78cc3d617d {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n.myXs_3199c35393 {\n  margin-top: var(--spacing-xs) !important;\n  margin-bottom: var(--spacing-xs) !important;\n}\n.mySmall_6561517642 {\n  margin-top: var(--spacing-small) !important;\n  margin-bottom: var(--spacing-small) !important;\n}\n.myMedium_376d57f41d {\n  margin-top: var(--spacing-medium) !important;\n  margin-bottom: var(--spacing-medium) !important;\n}\n.myLarge_2ca41b4e6b {\n  margin-top: var(--spacing-large) !important;\n  margin-bottom: var(--spacing-large) !important;\n}\n.myXl_c5c7eb050e {\n  margin-top: var(--spacing-xl) !important;\n  margin-bottom: var(--spacing-xl) !important;\n}\n.myXxl_fc4e0b4c4b {\n  margin-top: var(--spacing-xxl) !important;\n  margin-bottom: var(--spacing-xxl) !important;\n}\n.myXxxl_75e0207e7e {\n  margin-top: var(--spacing-xxxl) !important;\n  margin-bottom: var(--spacing-xxxl) !important;\n}\n.myAuto_3a7f1677a3 {\n  margin-top: auto !important;\n  margin-bottom: auto !important;\n}\n.mt0_b3ceb9f551 {\n  margin-top: 0 !important;\n}\n.mtXs_306b969ca8 {\n  margin-top: var(--spacing-xs) !important;\n}\n.mtSmall_464180a7f4 {\n  margin-top: var(--spacing-small) !important;\n}\n.mtMedium_3763a78c18 {\n  margin-top: var(--spacing-medium) !important;\n}\n.mtLarge_96623951f6 {\n  margin-top: var(--spacing-large) !important;\n}\n.mtXl_5162ed86e0 {\n  margin-top: var(--spacing-xl) !important;\n}\n.mtXxl_044080ca00 {\n  margin-top: var(--spacing-xxl) !important;\n}\n.mtXxxl_86baa84e7f {\n  margin-top: var(--spacing-xxxl) !important;\n}\n.mtAuto_d675013795 {\n  margin-top: auto !important;\n}\n.me0_bcef060f6f {\n  margin-inline-end: 0 !important;\n}\n.meXs_a806d7fe21 {\n  margin-inline-end: var(--spacing-xs) !important;\n}\n.meSmall_b051c21b4f {\n  margin-inline-end: var(--spacing-small) !important;\n}\n.meMedium_ef32e7e9cc {\n  margin-inline-end: var(--spacing-medium) !important;\n}\n.meLarge_d01d1ef19e {\n  margin-inline-end: var(--spacing-large) !important;\n}\n.meXl_f549d6464d {\n  margin-inline-end: var(--spacing-xl) !important;\n}\n.meXxl_d459674d1e {\n  margin-inline-end: var(--spacing-xxl) !important;\n}\n.meXxxl_5925fe18e2 {\n  margin-inline-end: var(--spacing-xxxl) !important;\n}\n.meAuto_d7fa767448 {\n  margin-inline-end: auto !important;\n}\n.mb0_66203f54e2 {\n  margin-bottom: 0 !important;\n}\n.mbXs_b04ce17bc8 {\n  margin-bottom: var(--spacing-xs) !important;\n}\n.mbSmall_dac6dbbf1e {\n  margin-bottom: var(--spacing-small) !important;\n}\n.mbMedium_2e7adfa23b {\n  margin-bottom: var(--spacing-medium) !important;\n}\n.mbLarge_4ba1e222c2 {\n  margin-bottom: var(--spacing-large) !important;\n}\n.mbXl_f4a64dcdd0 {\n  margin-bottom: var(--spacing-xl) !important;\n}\n.mbXxl_3c1a3f93bd {\n  margin-bottom: var(--spacing-xxl) !important;\n}\n.mbXxxl_eddb853b89 {\n  margin-bottom: var(--spacing-xxxl) !important;\n}\n.mbAuto_9a13f84bad {\n  margin-bottom: auto !important;\n}\n.ms0_ef97fd395a {\n  margin-inline-start: 0 !important;\n}\n.msXs_722f8b12e2 {\n  margin-inline-start: var(--spacing-xs) !important;\n}\n.msSmall_39270c37ea {\n  margin-inline-start: var(--spacing-small) !important;\n}\n.msMedium_fa550ae369 {\n  margin-inline-start: var(--spacing-medium) !important;\n}\n.msLarge_5b6e10d159 {\n  margin-inline-start: var(--spacing-large) !important;\n}\n.msXl_b77583aa43 {\n  margin-inline-start: var(--spacing-xl) !important;\n}\n.msXxl_a22e6ad8bc {\n  margin-inline-start: var(--spacing-xxl) !important;\n}\n.msXxxl_cc6455fced {\n  margin-inline-start: var(--spacing-xxxl) !important;\n}\n.msAuto_9f5a392ec6 {\n  margin-inline-start: auto !important;\n}\n.p0_d6b6b6d37e {\n  padding: 0 !important;\n}\n.pXs_5871df65af {\n  padding: var(--spacing-xs) !important;\n}\n.pSmall_c638e5a363 {\n  padding: var(--spacing-small) !important;\n}\n.pMedium_3c0dcc2c4f {\n  padding: var(--spacing-medium) !important;\n}\n.pLarge_7207932bd4 {\n  padding: var(--spacing-large) !important;\n}\n.pXl_e4d46fb4be {\n  padding: var(--spacing-xl) !important;\n}\n.pXxl_9be25d9ae0 {\n  padding: var(--spacing-xxl) !important;\n}\n.pXxxl_aed0a724c7 {\n  padding: var(--spacing-xxxl) !important;\n}\n.px0_28299f1b2b {\n  padding-right: 0 !important;\n  padding-left: 0 !important;\n}\n.pxXs_3abb650d9d {\n  padding-right: var(--spacing-xs) !important;\n  padding-left: var(--spacing-xs) !important;\n}\n.pxSmall_7223c8fd6d {\n  padding-right: var(--spacing-small) !important;\n  padding-left: var(--spacing-small) !important;\n}\n.pxMedium_074c31e671 {\n  padding-right: var(--spacing-medium) !important;\n  padding-left: var(--spacing-medium) !important;\n}\n.pxLarge_e8b62b8ee7 {\n  padding-right: var(--spacing-large) !important;\n  padding-left: var(--spacing-large) !important;\n}\n.pxXl_af24952eab {\n  padding-right: var(--spacing-xl) !important;\n  padding-left: var(--spacing-xl) !important;\n}\n.pxXxl_96b0afd85c {\n  padding-right: var(--spacing-xxl) !important;\n  padding-left: var(--spacing-xxl) !important;\n}\n.pxXxxl_ee1ff8d2b9 {\n  padding-right: var(--spacing-xxxl) !important;\n  padding-left: var(--spacing-xxxl) !important;\n}\n.py0_9d60ab91ab {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.pyXs_b9c396d5eb {\n  padding-top: var(--spacing-xs) !important;\n  padding-bottom: var(--spacing-xs) !important;\n}\n.pySmall_d2583ff3cf {\n  padding-top: var(--spacing-small) !important;\n  padding-bottom: var(--spacing-small) !important;\n}\n.pyMedium_dfd11718eb {\n  padding-top: var(--spacing-medium) !important;\n  padding-bottom: var(--spacing-medium) !important;\n}\n.pyLarge_24df49eed7 {\n  padding-top: var(--spacing-large) !important;\n  padding-bottom: var(--spacing-large) !important;\n}\n.pyXl_fb54584550 {\n  padding-top: var(--spacing-xl) !important;\n  padding-bottom: var(--spacing-xl) !important;\n}\n.pyXxl_5bac4817be {\n  padding-top: var(--spacing-xxl) !important;\n  padding-bottom: var(--spacing-xxl) !important;\n}\n.pyXxxl_468dd3cb6b {\n  padding-top: var(--spacing-xxxl) !important;\n  padding-bottom: var(--spacing-xxxl) !important;\n}\n.pt0_b3975a87aa {\n  padding-top: 0 !important;\n}\n.ptXs_7c5cf3c86d {\n  padding-top: var(--spacing-xs) !important;\n}\n.ptSmall_dd7ebbfb45 {\n  padding-top: var(--spacing-small) !important;\n}\n.ptMedium_1622a9d8f7 {\n  padding-top: var(--spacing-medium) !important;\n}\n.ptLarge_e01c485184 {\n  padding-top: var(--spacing-large) !important;\n}\n.ptXl_b8b63a6697 {\n  padding-top: var(--spacing-xl) !important;\n}\n.ptXxl_80abd04e39 {\n  padding-top: var(--spacing-xxl) !important;\n}\n.ptXxxl_877914ac66 {\n  padding-top: var(--spacing-xxxl) !important;\n}\n.pe0_70e5b545bd {\n  padding-inline-end: 0 !important;\n}\n.peXs_8fd3e07609 {\n  padding-inline-end: var(--spacing-xs) !important;\n}\n.peSmall_8361f59e13 {\n  padding-inline-end: var(--spacing-small) !important;\n}\n.peMedium_37691dca51 {\n  padding-inline-end: var(--spacing-medium) !important;\n}\n.peLarge_3967d772ac {\n  padding-inline-end: var(--spacing-large) !important;\n}\n.peXl_9cc556faee {\n  padding-inline-end: var(--spacing-xl) !important;\n}\n.peXxl_8ef0bb96c0 {\n  padding-inline-end: var(--spacing-xxl) !important;\n}\n.peXxxl_17ed4b2a72 {\n  padding-inline-end: var(--spacing-xxxl) !important;\n}\n.pb0_14c8a386cd {\n  padding-bottom: 0 !important;\n}\n.pbXs_e4194b4c60 {\n  padding-bottom: var(--spacing-xs) !important;\n}\n.pbSmall_e0b259e0b9 {\n  padding-bottom: var(--spacing-small) !important;\n}\n.pbMedium_9c47cf00c5 {\n  padding-bottom: var(--spacing-medium) !important;\n}\n.pbLarge_e4f5956c22 {\n  padding-bottom: var(--spacing-large) !important;\n}\n.pbXl_7f82b18990 {\n  padding-bottom: var(--spacing-xl) !important;\n}\n.pbXxl_34d09fef7e {\n  padding-bottom: var(--spacing-xxl) !important;\n}\n.pbXxxl_3327472eda {\n  padding-bottom: var(--spacing-xxxl) !important;\n}\n.ps0_f40cd46e43 {\n  padding-inline-start: 0 !important;\n}\n.psXs_8d6e4eabde {\n  padding-inline-start: var(--spacing-xs) !important;\n}\n.psSmall_ecaf9c53a2 {\n  padding-inline-start: var(--spacing-small) !important;\n}\n.psMedium_038c3f399f {\n  padding-inline-start: var(--spacing-medium) !important;\n}\n.psLarge_67f71d5717 {\n  padding-inline-start: var(--spacing-large) !important;\n}\n.psXl_616ee34bfe {\n  padding-inline-start: var(--spacing-xl) !important;\n}\n.psXxl_aa9e514f49 {\n  padding-inline-start: var(--spacing-xxl) !important;\n}\n.psXxxl_126cfef62d {\n  padding-inline-start: var(--spacing-xxxl) !important;\n}\n.textPrimaryTextColor_bab58b0255 {\n  color: var(--primary-text-color) !important;\n}\n.textTextColorOnInverted_b91f977b84 {\n  color: var(--text-color-on-inverted) !important;\n}\n.textSecondaryTextColor_f3d423e070 {\n  color: var(--secondary-text-color) !important;\n}\n.bgPrimaryBackgroundColor_e522fae97b {\n  background-color: var(--primary-background-color) !important;\n}\n.bgSecondaryBackgroundColor_a9c9a85ffe {\n  background-color: var(--secondary-background-color) !important;\n}\n.bgGreyBackgroundColor_3d3a60f6cf {\n  background-color: var(--grey-background-color) !important;\n}\n.bgAllgreyBackgroundColor_f6327dcb46 {\n  background-color: var(--allgrey-background-color) !important;\n}\n.bgInvertedColorBackground_1e3962c4c0 {\n  background-color: var(--inverted-color-background) !important;\n}");export{n as default};
+var n={box:"box_4144b258b5",scrollable:"scrollable_f8e638080d",opacityDisabled:"opacityDisabled_c3a306e85d",border:"border_dbb83cc4cd",borderColorUiBorderColor:"borderColorUiBorderColor_2d8f7ed2dd",borderColorLayoutBorderColor:"borderColorLayoutBorderColor_7de56bb697",rounded0:"rounded0_7bb08d975f",roundedSmall:"roundedSmall_ec7f8ab421",roundedMedium:"roundedMedium_df40d48647",roundedBig:"roundedBig_22ea1253b1",shadowXs:"shadowXs_2c75a2705c",shadowSmall:"shadowSmall_f5e935bce9",shadowMedium:"shadowMedium_96b9720fb7",shadowLarge:"shadowLarge_ecaf71c3f4",m0:"m0_8a534adf18",mXs:"mXs_43c547eb72",mSmall:"mSmall_14f0e5f260",mMedium:"mMedium_e0d08f9805",mLarge:"mLarge_06da6db374",mXl:"mXl_dde13359e8",mXxl:"mXxl_2f800b27be",mXxxl:"mXxxl_ba1de62817",mAuto:"mAuto_492bd32aac",mx0:"mx0_9e42caef50",mxXs:"mxXs_09aaf7da70",mxSmall:"mxSmall_aafa886976",mxMedium:"mxMedium_d72a99c3aa",mxLarge:"mxLarge_cb4750da35",mxXl:"mxXl_a68f5174a1",mxXxl:"mxXxl_c9bb350f31",mxXxxl:"mxXxxl_cf533a4e15",mxAuto:"mxAuto_3c1cfc1553",my0:"my0_ccc46d492e",myXs:"myXs_990395a0b9",mySmall:"mySmall_b2ae78c293",myMedium:"myMedium_64d0dc2eac",myLarge:"myLarge_7e6f7e132e",myXl:"myXl_9983b71c15",myXxl:"myXxl_8ec7e1ce6b",myXxxl:"myXxxl_68b8052391",myAuto:"myAuto_85a292cefa",mt0:"mt0_a5db1bdf52",mtXs:"mtXs_1cd45e0f51",mtSmall:"mtSmall_cb824920c4",mtMedium:"mtMedium_cd16f36b16",mtLarge:"mtLarge_72d9a66d62",mtXl:"mtXl_98aee0ba34",mtXxl:"mtXxl_61966a001a",mtXxxl:"mtXxxl_61d65e9658",mtAuto:"mtAuto_4640b5ca66",me0:"me0_ebb574b2ff",meXs:"meXs_113dee6128",meSmall:"meSmall_2ab3ab7410",meMedium:"meMedium_a986e88c97",meLarge:"meLarge_e929cbab33",meXl:"meXl_70bc90c2d6",meXxl:"meXxl_4a2a9d8be3",meXxxl:"meXxxl_c37f4f98b4",meAuto:"meAuto_4dc7dbdabf",mb0:"mb0_e27578580b",mbXs:"mbXs_939cd14fe9",mbSmall:"mbSmall_8b7eadebd1",mbMedium:"mbMedium_4065723f1a",mbLarge:"mbLarge_64dada48bd",mbXl:"mbXl_ab3fb03a04",mbXxl:"mbXxl_0849667644",mbXxxl:"mbXxxl_21a50936ab",mbAuto:"mbAuto_e75731a674",ms0:"ms0_4932d24cbe",msXs:"msXs_9b6ae24eed",msSmall:"msSmall_a55084f101",msMedium:"msMedium_305d2db47d",msLarge:"msLarge_76ceeff644",msXl:"msXl_8fc5cb9436",msXxl:"msXxl_382e6bec7f",msXxxl:"msXxxl_177abf6ca7",msAuto:"msAuto_e29bb87ced",p0:"p0_4353801053",pXs:"pXs_06f9126015",pSmall:"pSmall_178c0788a3",pMedium:"pMedium_975e991af8",pLarge:"pLarge_f975240510",pXl:"pXl_f3276a6b49",pXxl:"pXxl_7744c9c646",pXxxl:"pXxxl_087aa88f81",px0:"px0_0a2c62821d",pxXs:"pxXs_1d73d311d0",pxSmall:"pxSmall_8234d1a52f",pxMedium:"pxMedium_3996c0bfa9",pxLarge:"pxLarge_ba8cbd18cd",pxXl:"pxXl_acc2b2f850",pxXxl:"pxXxl_3d30c91238",pxXxxl:"pxXxxl_0dfc56912f",py0:"py0_400b721006",pyXs:"pyXs_8099b6a12d",pySmall:"pySmall_227943cc1e",pyMedium:"pyMedium_0c7c4d7f2d",pyLarge:"pyLarge_adbc7c8812",pyXl:"pyXl_d32e35a691",pyXxl:"pyXxl_d6f0ffef56",pyXxxl:"pyXxxl_e8ff77ee92",pt0:"pt0_1b26df73f5",ptXs:"ptXs_4c5f3613ae",ptSmall:"ptSmall_ebb23d20a2",ptMedium:"ptMedium_9e96186e85",ptLarge:"ptLarge_6f4dc63fb0",ptXl:"ptXl_461e360b6e",ptXxl:"ptXxl_2e86800718",ptXxxl:"ptXxxl_6735f027e9",pe0:"pe0_ee9cc05bbe",peXs:"peXs_a557d69a6a",peSmall:"peSmall_0da1120a51",peMedium:"peMedium_deee557401",peLarge:"peLarge_22bfe6fbf7",peXl:"peXl_812b058d12",peXxl:"peXxl_46509d1c1d",peXxxl:"peXxxl_b3e74af855",pb0:"pb0_8eb5508b57",pbXs:"pbXs_4bc16d17a8",pbSmall:"pbSmall_be6654debc",pbMedium:"pbMedium_7854384da7",pbLarge:"pbLarge_eb1f404db2",pbXl:"pbXl_2f6af01a44",pbXxl:"pbXxl_314912b9b9",pbXxxl:"pbXxxl_8d48e1c20f",ps0:"ps0_6999631880",psXs:"psXs_52784c8ba1",psSmall:"psSmall_414933340d",psMedium:"psMedium_5826f622ec",psLarge:"psLarge_2d48faaa21",psXl:"psXl_2ee090d078",psXxl:"psXxl_308256cb47",psXxxl:"psXxxl_fd18fec7e0",textPrimaryTextColor:"textPrimaryTextColor_632b7538f1",textTextColorOnInverted:"textTextColorOnInverted_857c6fd379",textSecondaryTextColor:"textSecondaryTextColor_bd93dac89e",bgPrimaryBackgroundColor:"bgPrimaryBackgroundColor_a3eef1f584",bgSecondaryBackgroundColor:"bgSecondaryBackgroundColor_7892ef39bb",bgGreyBackgroundColor:"bgGreyBackgroundColor_37370bd4b4",bgAllgreyBackgroundColor:"bgAllgreyBackgroundColor_ca50797ef2",bgInvertedColorBackground:"bgInvertedColorBackground_cf444414a6"};!function(n){const a="s_id-e8ebf0c89fee_3_42_0";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=n)}("/*  stylelint-disable scss/at-if-no-null */\n/*  stylelint-enable scss/at-if-no-null */\n.box_4144b258b5 {\n  overflow: hidden;\n}\n.box_4144b258b5.scrollable_f8e638080d {\n  overflow: auto;\n}\n.box_4144b258b5.scrollable_f8e638080d::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.box_4144b258b5.scrollable_f8e638080d::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.opacityDisabled_c3a306e85d {\n  opacity: var(--disabled-component-opacity) !important;\n}\n.border_dbb83cc4cd {\n  border: var(--border-width) var(--border-style) var(--ui-border-color) !important;\n}\n.borderColorUiBorderColor_2d8f7ed2dd {\n  border-color: var(--ui-border-color) !important;\n}\n.borderColorLayoutBorderColor_7de56bb697 {\n  border-color: var(--layout-border-color) !important;\n}\n.rounded0_7bb08d975f {\n  border-radius: 0 !important;\n}\n.roundedSmall_ec7f8ab421 {\n  border-radius: var(--border-radius-small) !important;\n}\n.roundedMedium_df40d48647 {\n  border-radius: var(--border-radius-medium) !important;\n}\n.roundedBig_22ea1253b1 {\n  border-radius: var(--border-radius-big) !important;\n}\n.shadowXs_2c75a2705c {\n  box-shadow: var(--box-shadow-xs) !important;\n}\n.shadowSmall_f5e935bce9 {\n  box-shadow: var(--box-shadow-small) !important;\n}\n.shadowMedium_96b9720fb7 {\n  box-shadow: var(--box-shadow-medium) !important;\n}\n.shadowLarge_ecaf71c3f4 {\n  box-shadow: var(--box-shadow-large) !important;\n}\n.m0_8a534adf18 {\n  margin: 0 !important;\n}\n.mXs_43c547eb72 {\n  margin: var(--spacing-xs) !important;\n}\n.mSmall_14f0e5f260 {\n  margin: var(--spacing-small) !important;\n}\n.mMedium_e0d08f9805 {\n  margin: var(--spacing-medium) !important;\n}\n.mLarge_06da6db374 {\n  margin: var(--spacing-large) !important;\n}\n.mXl_dde13359e8 {\n  margin: var(--spacing-xl) !important;\n}\n.mXxl_2f800b27be {\n  margin: var(--spacing-xxl) !important;\n}\n.mXxxl_ba1de62817 {\n  margin: var(--spacing-xxxl) !important;\n}\n.mAuto_492bd32aac {\n  margin: auto !important;\n}\n.mx0_9e42caef50 {\n  margin-right: 0 !important;\n  margin-left: 0 !important;\n}\n.mxXs_09aaf7da70 {\n  margin-right: var(--spacing-xs) !important;\n  margin-left: var(--spacing-xs) !important;\n}\n.mxSmall_aafa886976 {\n  margin-right: var(--spacing-small) !important;\n  margin-left: var(--spacing-small) !important;\n}\n.mxMedium_d72a99c3aa {\n  margin-right: var(--spacing-medium) !important;\n  margin-left: var(--spacing-medium) !important;\n}\n.mxLarge_cb4750da35 {\n  margin-right: var(--spacing-large) !important;\n  margin-left: var(--spacing-large) !important;\n}\n.mxXl_a68f5174a1 {\n  margin-right: var(--spacing-xl) !important;\n  margin-left: var(--spacing-xl) !important;\n}\n.mxXxl_c9bb350f31 {\n  margin-right: var(--spacing-xxl) !important;\n  margin-left: var(--spacing-xxl) !important;\n}\n.mxXxxl_cf533a4e15 {\n  margin-right: var(--spacing-xxxl) !important;\n  margin-left: var(--spacing-xxxl) !important;\n}\n.mxAuto_3c1cfc1553 {\n  margin-right: auto !important;\n  margin-left: auto !important;\n}\n.my0_ccc46d492e {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n.myXs_990395a0b9 {\n  margin-top: var(--spacing-xs) !important;\n  margin-bottom: var(--spacing-xs) !important;\n}\n.mySmall_b2ae78c293 {\n  margin-top: var(--spacing-small) !important;\n  margin-bottom: var(--spacing-small) !important;\n}\n.myMedium_64d0dc2eac {\n  margin-top: var(--spacing-medium) !important;\n  margin-bottom: var(--spacing-medium) !important;\n}\n.myLarge_7e6f7e132e {\n  margin-top: var(--spacing-large) !important;\n  margin-bottom: var(--spacing-large) !important;\n}\n.myXl_9983b71c15 {\n  margin-top: var(--spacing-xl) !important;\n  margin-bottom: var(--spacing-xl) !important;\n}\n.myXxl_8ec7e1ce6b {\n  margin-top: var(--spacing-xxl) !important;\n  margin-bottom: var(--spacing-xxl) !important;\n}\n.myXxxl_68b8052391 {\n  margin-top: var(--spacing-xxxl) !important;\n  margin-bottom: var(--spacing-xxxl) !important;\n}\n.myAuto_85a292cefa {\n  margin-top: auto !important;\n  margin-bottom: auto !important;\n}\n.mt0_a5db1bdf52 {\n  margin-top: 0 !important;\n}\n.mtXs_1cd45e0f51 {\n  margin-top: var(--spacing-xs) !important;\n}\n.mtSmall_cb824920c4 {\n  margin-top: var(--spacing-small) !important;\n}\n.mtMedium_cd16f36b16 {\n  margin-top: var(--spacing-medium) !important;\n}\n.mtLarge_72d9a66d62 {\n  margin-top: var(--spacing-large) !important;\n}\n.mtXl_98aee0ba34 {\n  margin-top: var(--spacing-xl) !important;\n}\n.mtXxl_61966a001a {\n  margin-top: var(--spacing-xxl) !important;\n}\n.mtXxxl_61d65e9658 {\n  margin-top: var(--spacing-xxxl) !important;\n}\n.mtAuto_4640b5ca66 {\n  margin-top: auto !important;\n}\n.me0_ebb574b2ff {\n  margin-inline-end: 0 !important;\n}\n.meXs_113dee6128 {\n  margin-inline-end: var(--spacing-xs) !important;\n}\n.meSmall_2ab3ab7410 {\n  margin-inline-end: var(--spacing-small) !important;\n}\n.meMedium_a986e88c97 {\n  margin-inline-end: var(--spacing-medium) !important;\n}\n.meLarge_e929cbab33 {\n  margin-inline-end: var(--spacing-large) !important;\n}\n.meXl_70bc90c2d6 {\n  margin-inline-end: var(--spacing-xl) !important;\n}\n.meXxl_4a2a9d8be3 {\n  margin-inline-end: var(--spacing-xxl) !important;\n}\n.meXxxl_c37f4f98b4 {\n  margin-inline-end: var(--spacing-xxxl) !important;\n}\n.meAuto_4dc7dbdabf {\n  margin-inline-end: auto !important;\n}\n.mb0_e27578580b {\n  margin-bottom: 0 !important;\n}\n.mbXs_939cd14fe9 {\n  margin-bottom: var(--spacing-xs) !important;\n}\n.mbSmall_8b7eadebd1 {\n  margin-bottom: var(--spacing-small) !important;\n}\n.mbMedium_4065723f1a {\n  margin-bottom: var(--spacing-medium) !important;\n}\n.mbLarge_64dada48bd {\n  margin-bottom: var(--spacing-large) !important;\n}\n.mbXl_ab3fb03a04 {\n  margin-bottom: var(--spacing-xl) !important;\n}\n.mbXxl_0849667644 {\n  margin-bottom: var(--spacing-xxl) !important;\n}\n.mbXxxl_21a50936ab {\n  margin-bottom: var(--spacing-xxxl) !important;\n}\n.mbAuto_e75731a674 {\n  margin-bottom: auto !important;\n}\n.ms0_4932d24cbe {\n  margin-inline-start: 0 !important;\n}\n.msXs_9b6ae24eed {\n  margin-inline-start: var(--spacing-xs) !important;\n}\n.msSmall_a55084f101 {\n  margin-inline-start: var(--spacing-small) !important;\n}\n.msMedium_305d2db47d {\n  margin-inline-start: var(--spacing-medium) !important;\n}\n.msLarge_76ceeff644 {\n  margin-inline-start: var(--spacing-large) !important;\n}\n.msXl_8fc5cb9436 {\n  margin-inline-start: var(--spacing-xl) !important;\n}\n.msXxl_382e6bec7f {\n  margin-inline-start: var(--spacing-xxl) !important;\n}\n.msXxxl_177abf6ca7 {\n  margin-inline-start: var(--spacing-xxxl) !important;\n}\n.msAuto_e29bb87ced {\n  margin-inline-start: auto !important;\n}\n.p0_4353801053 {\n  padding: 0 !important;\n}\n.pXs_06f9126015 {\n  padding: var(--spacing-xs) !important;\n}\n.pSmall_178c0788a3 {\n  padding: var(--spacing-small) !important;\n}\n.pMedium_975e991af8 {\n  padding: var(--spacing-medium) !important;\n}\n.pLarge_f975240510 {\n  padding: var(--spacing-large) !important;\n}\n.pXl_f3276a6b49 {\n  padding: var(--spacing-xl) !important;\n}\n.pXxl_7744c9c646 {\n  padding: var(--spacing-xxl) !important;\n}\n.pXxxl_087aa88f81 {\n  padding: var(--spacing-xxxl) !important;\n}\n.px0_0a2c62821d {\n  padding-right: 0 !important;\n  padding-left: 0 !important;\n}\n.pxXs_1d73d311d0 {\n  padding-right: var(--spacing-xs) !important;\n  padding-left: var(--spacing-xs) !important;\n}\n.pxSmall_8234d1a52f {\n  padding-right: var(--spacing-small) !important;\n  padding-left: var(--spacing-small) !important;\n}\n.pxMedium_3996c0bfa9 {\n  padding-right: var(--spacing-medium) !important;\n  padding-left: var(--spacing-medium) !important;\n}\n.pxLarge_ba8cbd18cd {\n  padding-right: var(--spacing-large) !important;\n  padding-left: var(--spacing-large) !important;\n}\n.pxXl_acc2b2f850 {\n  padding-right: var(--spacing-xl) !important;\n  padding-left: var(--spacing-xl) !important;\n}\n.pxXxl_3d30c91238 {\n  padding-right: var(--spacing-xxl) !important;\n  padding-left: var(--spacing-xxl) !important;\n}\n.pxXxxl_0dfc56912f {\n  padding-right: var(--spacing-xxxl) !important;\n  padding-left: var(--spacing-xxxl) !important;\n}\n.py0_400b721006 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n.pyXs_8099b6a12d {\n  padding-top: var(--spacing-xs) !important;\n  padding-bottom: var(--spacing-xs) !important;\n}\n.pySmall_227943cc1e {\n  padding-top: var(--spacing-small) !important;\n  padding-bottom: var(--spacing-small) !important;\n}\n.pyMedium_0c7c4d7f2d {\n  padding-top: var(--spacing-medium) !important;\n  padding-bottom: var(--spacing-medium) !important;\n}\n.pyLarge_adbc7c8812 {\n  padding-top: var(--spacing-large) !important;\n  padding-bottom: var(--spacing-large) !important;\n}\n.pyXl_d32e35a691 {\n  padding-top: var(--spacing-xl) !important;\n  padding-bottom: var(--spacing-xl) !important;\n}\n.pyXxl_d6f0ffef56 {\n  padding-top: var(--spacing-xxl) !important;\n  padding-bottom: var(--spacing-xxl) !important;\n}\n.pyXxxl_e8ff77ee92 {\n  padding-top: var(--spacing-xxxl) !important;\n  padding-bottom: var(--spacing-xxxl) !important;\n}\n.pt0_1b26df73f5 {\n  padding-top: 0 !important;\n}\n.ptXs_4c5f3613ae {\n  padding-top: var(--spacing-xs) !important;\n}\n.ptSmall_ebb23d20a2 {\n  padding-top: var(--spacing-small) !important;\n}\n.ptMedium_9e96186e85 {\n  padding-top: var(--spacing-medium) !important;\n}\n.ptLarge_6f4dc63fb0 {\n  padding-top: var(--spacing-large) !important;\n}\n.ptXl_461e360b6e {\n  padding-top: var(--spacing-xl) !important;\n}\n.ptXxl_2e86800718 {\n  padding-top: var(--spacing-xxl) !important;\n}\n.ptXxxl_6735f027e9 {\n  padding-top: var(--spacing-xxxl) !important;\n}\n.pe0_ee9cc05bbe {\n  padding-inline-end: 0 !important;\n}\n.peXs_a557d69a6a {\n  padding-inline-end: var(--spacing-xs) !important;\n}\n.peSmall_0da1120a51 {\n  padding-inline-end: var(--spacing-small) !important;\n}\n.peMedium_deee557401 {\n  padding-inline-end: var(--spacing-medium) !important;\n}\n.peLarge_22bfe6fbf7 {\n  padding-inline-end: var(--spacing-large) !important;\n}\n.peXl_812b058d12 {\n  padding-inline-end: var(--spacing-xl) !important;\n}\n.peXxl_46509d1c1d {\n  padding-inline-end: var(--spacing-xxl) !important;\n}\n.peXxxl_b3e74af855 {\n  padding-inline-end: var(--spacing-xxxl) !important;\n}\n.pb0_8eb5508b57 {\n  padding-bottom: 0 !important;\n}\n.pbXs_4bc16d17a8 {\n  padding-bottom: var(--spacing-xs) !important;\n}\n.pbSmall_be6654debc {\n  padding-bottom: var(--spacing-small) !important;\n}\n.pbMedium_7854384da7 {\n  padding-bottom: var(--spacing-medium) !important;\n}\n.pbLarge_eb1f404db2 {\n  padding-bottom: var(--spacing-large) !important;\n}\n.pbXl_2f6af01a44 {\n  padding-bottom: var(--spacing-xl) !important;\n}\n.pbXxl_314912b9b9 {\n  padding-bottom: var(--spacing-xxl) !important;\n}\n.pbXxxl_8d48e1c20f {\n  padding-bottom: var(--spacing-xxxl) !important;\n}\n.ps0_6999631880 {\n  padding-inline-start: 0 !important;\n}\n.psXs_52784c8ba1 {\n  padding-inline-start: var(--spacing-xs) !important;\n}\n.psSmall_414933340d {\n  padding-inline-start: var(--spacing-small) !important;\n}\n.psMedium_5826f622ec {\n  padding-inline-start: var(--spacing-medium) !important;\n}\n.psLarge_2d48faaa21 {\n  padding-inline-start: var(--spacing-large) !important;\n}\n.psXl_2ee090d078 {\n  padding-inline-start: var(--spacing-xl) !important;\n}\n.psXxl_308256cb47 {\n  padding-inline-start: var(--spacing-xxl) !important;\n}\n.psXxxl_fd18fec7e0 {\n  padding-inline-start: var(--spacing-xxxl) !important;\n}\n.textPrimaryTextColor_632b7538f1 {\n  color: var(--primary-text-color) !important;\n}\n.textTextColorOnInverted_857c6fd379 {\n  color: var(--text-color-on-inverted) !important;\n}\n.textSecondaryTextColor_bd93dac89e {\n  color: var(--secondary-text-color) !important;\n}\n.bgPrimaryBackgroundColor_a3eef1f584 {\n  background-color: var(--primary-background-color) !important;\n}\n.bgSecondaryBackgroundColor_7892ef39bb {\n  background-color: var(--secondary-background-color) !important;\n}\n.bgGreyBackgroundColor_37370bd4b4 {\n  background-color: var(--grey-background-color) !important;\n}\n.bgAllgreyBackgroundColor_ca50797ef2 {\n  background-color: var(--allgrey-background-color) !important;\n}\n.bgInvertedColorBackground_cf444414a6 {\n  background-color: var(--inverted-color-background) !important;\n}");export{n as default};
 //# sourceMappingURL=Box.module.scss.js.map