npm - @vibe/core - Versions diffs - 4.0.0-rc.0 → 4.0.1-alpha-649fd.0 - Mend

@vibe/core 4.0.0-rc.0 → 4.0.1-alpha-649fd.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (866) hide show

package/dist/src/components/AlertBanner/AlertBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlertBanner.js","sources":["../../../../src/components/AlertBanner/AlertBanner.tsx"],"sourcesContent":["import { getStyle } from \"~~../../helpers~~/~~typesciptCssModulesHelper~~\";\nimport cx from \"classnames\";\nimport React, { type ForwardedRef, forwardRef, type ReactElement, useMemo } from \"react\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { type AlertBannerBackgroundColor } from \"./AlertBanner.types\";\~~nimport { NOOP } from~~ \~~"../../utils/function-utils\";\~~nimport { type AlertBannerLinkProps } from \"./AlertBannerLink/AlertBannerLink\";\nimport { type AlertBannerButtonProps } from \"./AlertBannerButton/AlertBannerButton\";\nimport { type AlertBannerTextProps } from \"./AlertBannerText/AlertBannerText\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AlertBanner.module.scss\";\nimport { Text } from \"@vibe/typography\";\nimport { AlertBannerContext } from \"./AlertBannerContext\";\n\ntype ChildrenType = ReactElement<AlertBannerButtonProps \| AlertBannerLinkProps \| AlertBannerTextProps>;\n\nexport interface AlertBannerProps extends VibeComponentProps {\n /*\n The background color of the alert banner.\n /\n backgroundColor?: AlertBannerBackgroundColor;\n /\n If true, the close button is hidden.\n /\n isCloseHidden?: boolean;\n /\n The ARIA label of the alert banner for accessibility.\n /\n \"aria-label\"?: string;\n /\n The ARIA label of the close button for accessibility.\n /\n closeButtonAriaLabel?: string;\n /\n Callback fired when the close button is clicked.\n /\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /\n The content of the alert banner.\n */\n children?: ChildrenType \| ChildrenType[];\n}\n\nconst AlertBanner = forwardRef(\n (\n {\n children: originalChildren,\n className,\n backgroundColor = \"primary\",\n onClose = NOOP,\n \"aria-label\": ariaLabel = \"\",\n closeButtonAriaLabel = \"Close\",\n isCloseHidden = false,\n id,\n \"data-testid\": dataTestId\n }: AlertBannerProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const classNames = useMemo(() => {\n return cx(className, styles.alertBanner, getStyle(styles, backgroundColor));\n }, [className, backgroundColor]);\n\n const isDarkBackground = backgroundColor === \"dark\";\n const isFixedColor = backgroundColor === \"warning\";\n const textColor = useMemo(() => {\n if (isFixedColor) {\n return \"fixedDark\";\n }\n return isDarkBackground ? \"onInverted\" : \"onPrimary\";\n }, [isDarkBackground, isFixedColor]);\n const children = useMemo(() => {\n const allChildren = React.Children.toArray(originalChildren) as ReactElement[];\n const filteredChildren = allChildren.filter(\n (\n child: ReactElement & {\n type: Record<string, unknown>;\n }\n ) => {\n if (child.type.isAlertBannerItem \|\| child.type.displayName === \"MDXCreateElement\") return true;\n console.error(\n \"Alert banner child is not supported. Please use AlertBannerText, AlertBannerLink or AlertBannerButton.\",\n child\n );\n return false;\n }\n );\n\n return filteredChildren.map((child, index) => {\n return React.cloneElement(child, {\n ...child?.props,\n marginLeft: index > 0,\n isDarkBackground\n });\n });\n }, [originalChildren, isDarkBackground]);\n\n return (\n <Text\n type=\"text2\"\n color={textColor}\n ref={ref}\n className={classNames}\n role=\"banner\"\n aria-label={ariaLabel \|\| \"banner\"}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.ALERT_BANNER, id)}\n data-vibe={ComponentVibeId.ALERT_BANNER}\n >\n <AlertBannerContext.Provider value={{ textColor }}>\n <div className={cx(styles.content)}>\n {children.map(\n (\n child: ReactElement & {\n type: Record<string, unknown>;\n },\n index\n ) => {\n const childTypeIsAlertBannerText = child.type.isAlertBannerText;\n return (\n <div\n key={index}\n className={cx(styles.contentItem, {\n [styles.contentItemText]: childTypeIsAlertBannerText\n })}\n >\n {childTypeIsAlertBannerText ? <div className={cx(styles.ellipsis)}>{child}</div> : child}\n </div>\n );\n }\n )}\n </div>\n </AlertBannerContext.Provider>\n <div className={cx(styles.closeButtonWrapper)}>\n {isCloseHidden ? null : (\n <IconButton\n data-testid=\"alert-banner-close-button\"\n icon={CloseSmall}\n className={cx(styles.closeBtn)}\n hideTooltip\n onClick={onClose}\n size=\"small\"\n kind=\"tertiary\"\n color={isDarkBackground ? \"on-inverted-background\" : \"on-primary-color\"}\n aria-label={closeButtonAriaLabel}\n />\n )}\n </div>\n </Text>\n );\n }\n);\n\nexport default AlertBanner;\n"],"names":["AlertBanner","forwardRef","_ref","ref","originalChildren","children","className","_ref$backgroundColor","backgroundColor","_ref$onClose","onClose","NOOP","_ref$ariaLabel","ariaLabel","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$isCloseHidden","isCloseHidden","id","dataTestId","classNames","useMemo","cx","styles","alertBanner","getStyle","isDarkBackground","isFixedColor","textColor","React","Children","toArray","filter","child","type","isAlertBannerItem","displayName","console","error","map","index","cloneElement","Object","assign","props","marginLeft","Text","color","role","getTestId","ComponentDefaultTestId","ALERT_BANNER","ComponentVibeId","createElement","AlertBannerContext","Provider","value","content","childTypeIsAlertBannerText","isAlertBannerText","key","contentItem","_defineProperty","contentItemText","ellipsis","closeButtonWrapper","IconButton","icon","CloseSmall","closeBtn","hideTooltip","onClick","size","kind"],"mappings":"~~+sBA8CMA~~,IAAAA,EAAcC,GAClB,SAAAC,EAYEC,GACE,IAXUC,EAAgBF,EAA1BG,SACAC,EAASJ,EAATI,UAASC,EAAAL,EACTM,gBAAAA,OAAkB,IAAHD,EAAG,UAASA,EAAAE,EAAAP,EAC3BQ,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAV,EACd,cAAcW,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EAC5Ba,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAAAE,EAAAd,EAC9Be,cAAAA,OAAgB,IAAHD,GAAQA,EACrBE,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAIIkB,EAAaC,GAAQ,WACzB,OAAOC,EAAGhB,EAAWiB,EAAOC,YAAaC,EAASF,EAAQf,GAC5D,GAAG,CAACF,EAAWE,IAETkB,EAAuC,SAApBlB,EACnBmB,EAAmC,YAApBnB,EACfoB,EAAYP,GAAQ,WACxB,OAAIM,EACK,YAEFD,EAAmB,aAAe,WAC3C,GAAG,CAACA,EAAkBC,IAChBtB,EAAWgB,GAAQ,WAiBvB,OAhBoBQ,EAAMC,SAASC,QAAQ3B,GACN4B,QACnC,SACEC,GAIA,SAAIA,EAAMC,KAAKC,mBAAgD,qBAA3BF,EAAMC,KAAKE,eAC/CC,QAAQC,MACN,yGACAL,IAEK,EACT,IAGsBM,KAAI,SAACN,EAAOO,GAClC,OAAOX,EAAMY,aAAaR,EACrBS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAV,aAAA,EAAAA,EAAOW,OAAK,CACfC,WAAYL,EAAQ,EACpBd,iBAAAA,IAEJ,GACF,GAAG,CAACtB,EAAkBsB,IAEtB,OACEG,gBAACiB,EAAI,CACHZ,KAAK,QACLa,MAAOnB,EACPzB,IAAKA,EACLG,UAAWc,EACX4B,KAAK,SACO,aAAAnC,GAAa,SACzBK,GAAIA,gBACSC,GAAc8B,EAAUC,EAAuBC,aAAcjC,GAAG,YAClEkC,EAAgBD,cAE3BtB,EAACwB,cAAAC,EAAmBC,SAAQ,CAACC,MAAO,CAAE5B,UAAAA,IACpCC,EAAAwB,cAAA,MAAA,CAAK/C,UAAWgB,EAAGC,EAAOkC,UACvBpD,EAASkC,KACR,SACEN,EAGAO,GAEA,IAAMkB,EAA6BzB,EAAMC,KAAKyB,kBAC9C,OACE9B,EAAAwB,cAAA,MAAA,CACEO,IAAKpB,EACLlC,UAAWgB,EAAGC,EAAOsC,YAAWC,EAAA,CAAA,EAC7BvC,EAAOwC,gBAAkBL,KAG3BA,EAA6B7B,EAAKwB,cAAA,MAAA,CAAA/C,UAAWgB,EAAGC,EAAOyC,WAAY/B,GAAeA,EAGxF,MAIPJ,EAAAwB,cAAA,MAAA,CAAK/C,UAAWgB,EAAGC,EAAO0C,qBACvBhD,EAAgB,KACfY,EAACwB,cAAAa,EACa,CAAA,cAAA,4BACZC,KAAMC,EACN9D,UAAWgB,EAAGC,EAAO8C,UACrBC,aAAW,EACXC,QAAS7D,EACT8D,KAAK,QACLC,KAAK,WACL1B,MAAOrB,EAAmB,yBAA2B,mBACzC,aAAAX,KAMxB"}
1	+ {"version":3,"file":"AlertBanner.js","sources":["../../../../src/components/AlertBanner/AlertBanner.tsx"],"sourcesContent":["import { getStyle, NOOP } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport React, { type ForwardedRef, forwardRef, type ReactElement, useMemo } from \"react\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { type AlertBannerBackgroundColor } from \"./AlertBanner.types\";\n\nimport { type AlertBannerLinkProps } from \"./AlertBannerLink/AlertBannerLink\";\nimport { type AlertBannerButtonProps } from \"./AlertBannerButton/AlertBannerButton\";\nimport { type AlertBannerTextProps } from \"./AlertBannerText/AlertBannerText\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AlertBanner.module.scss\";\nimport { Text } from \"@vibe/typography\";\nimport { AlertBannerContext } from \"./AlertBannerContext\";\n\ntype ChildrenType = ReactElement<AlertBannerButtonProps \| AlertBannerLinkProps \| AlertBannerTextProps>;\n\nexport interface AlertBannerProps extends VibeComponentProps {\n /*\n The background color of the alert banner.\n /\n backgroundColor?: AlertBannerBackgroundColor;\n /\n If true, the close button is hidden.\n /\n isCloseHidden?: boolean;\n /\n The ARIA label of the alert banner for accessibility.\n /\n \"aria-label\"?: string;\n /\n The ARIA label of the close button for accessibility.\n /\n closeButtonAriaLabel?: string;\n /\n Callback fired when the close button is clicked.\n /\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n /\n The content of the alert banner.\n */\n children?: ChildrenType \| ChildrenType[];\n}\n\nconst AlertBanner = forwardRef(\n (\n {\n children: originalChildren,\n className,\n backgroundColor = \"primary\",\n onClose = NOOP,\n \"aria-label\": ariaLabel = \"\",\n closeButtonAriaLabel = \"Close\",\n isCloseHidden = false,\n id,\n \"data-testid\": dataTestId\n }: AlertBannerProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const classNames = useMemo(() => {\n return cx(className, styles.alertBanner, getStyle(styles, backgroundColor));\n }, [className, backgroundColor]);\n\n const isDarkBackground = backgroundColor === \"dark\";\n const isFixedColor = backgroundColor === \"warning\";\n const textColor = useMemo(() => {\n if (isFixedColor) {\n return \"fixedDark\";\n }\n return isDarkBackground ? \"onInverted\" : \"onPrimary\";\n }, [isDarkBackground, isFixedColor]);\n const children = useMemo(() => {\n const allChildren = React.Children.toArray(originalChildren) as ReactElement[];\n const filteredChildren = allChildren.filter(\n (\n child: ReactElement & {\n type: Record<string, unknown>;\n }\n ) => {\n if (child.type.isAlertBannerItem \|\| child.type.displayName === \"MDXCreateElement\") return true;\n console.error(\n \"Alert banner child is not supported. Please use AlertBannerText, AlertBannerLink or AlertBannerButton.\",\n child\n );\n return false;\n }\n );\n\n return filteredChildren.map((child, index) => {\n return React.cloneElement(child, {\n ...child?.props,\n marginLeft: index > 0,\n isDarkBackground\n });\n });\n }, [originalChildren, isDarkBackground]);\n\n return (\n <Text\n type=\"text2\"\n color={textColor}\n ref={ref}\n className={classNames}\n role=\"banner\"\n aria-label={ariaLabel \|\| \"banner\"}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.ALERT_BANNER, id)}\n data-vibe={ComponentVibeId.ALERT_BANNER}\n >\n <AlertBannerContext.Provider value={{ textColor }}>\n <div className={cx(styles.content)}>\n {children.map(\n (\n child: ReactElement & {\n type: Record<string, unknown>;\n },\n index\n ) => {\n const childTypeIsAlertBannerText = child.type.isAlertBannerText;\n return (\n <div\n key={index}\n className={cx(styles.contentItem, {\n [styles.contentItemText]: childTypeIsAlertBannerText\n })}\n >\n {childTypeIsAlertBannerText ? <div className={cx(styles.ellipsis)}>{child}</div> : child}\n </div>\n );\n }\n )}\n </div>\n </AlertBannerContext.Provider>\n <div className={cx(styles.closeButtonWrapper)}>\n {isCloseHidden ? null : (\n <IconButton\n data-testid=\"alert-banner-close-button\"\n icon={CloseSmall}\n className={cx(styles.closeBtn)}\n hideTooltip\n onClick={onClose}\n size=\"small\"\n kind=\"tertiary\"\n color={isDarkBackground ? \"on-inverted-background\" : \"on-primary-color\"}\n aria-label={closeButtonAriaLabel}\n />\n )}\n </div>\n </Text>\n );\n }\n);\n\nexport default AlertBanner;\n"],"names":["AlertBanner","forwardRef","_ref","ref","originalChildren","children","className","_ref$backgroundColor","backgroundColor","_ref$onClose","onClose","NOOP","_ref$ariaLabel","ariaLabel","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$isCloseHidden","isCloseHidden","id","dataTestId","classNames","useMemo","cx","styles","alertBanner","getStyle","isDarkBackground","isFixedColor","textColor","React","Children","toArray","filter","child","type","isAlertBannerItem","displayName","console","error","map","index","cloneElement","Object","assign","props","marginLeft","Text","color","role","getTestId","ComponentDefaultTestId","ALERT_BANNER","ComponentVibeId","createElement","AlertBannerContext","Provider","value","content","childTypeIsAlertBannerText","isAlertBannerText","key","contentItem","_defineProperty","contentItemText","ellipsis","closeButtonWrapper","IconButton","icon","CloseSmall","closeBtn","hideTooltip","onClick","size","kind"],"mappings":"2uBA8CMA,IAAAA,EAAcC,GAClB,SAAAC,EAYEC,GACE,IAXUC,EAAgBF,EAA1BG,SACAC,EAASJ,EAATI,UAASC,EAAAL,EACTM,gBAAAA,OAAkB,IAAHD,EAAG,UAASA,EAAAE,EAAAP,EAC3BQ,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAV,EACd,cAAcW,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EAC5Ba,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAAAE,EAAAd,EAC9Be,cAAAA,OAAgB,IAAHD,GAAQA,EACrBE,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAIIkB,EAAaC,GAAQ,WACzB,OAAOC,EAAGhB,EAAWiB,EAAOC,YAAaC,EAASF,EAAQf,GAC5D,GAAG,CAACF,EAAWE,IAETkB,EAAuC,SAApBlB,EACnBmB,EAAmC,YAApBnB,EACfoB,EAAYP,GAAQ,WACxB,OAAIM,EACK,YAEFD,EAAmB,aAAe,WAC3C,GAAG,CAACA,EAAkBC,IAChBtB,EAAWgB,GAAQ,WAiBvB,OAhBoBQ,EAAMC,SAASC,QAAQ3B,GACN4B,QACnC,SACEC,GAIA,SAAIA,EAAMC,KAAKC,mBAAgD,qBAA3BF,EAAMC,KAAKE,eAC/CC,QAAQC,MACN,yGACAL,IAEK,EACT,IAGsBM,KAAI,SAACN,EAAOO,GAClC,OAAOX,EAAMY,aAAaR,EACrBS,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAV,aAAA,EAAAA,EAAOW,OAAK,CACfC,WAAYL,EAAQ,EACpBd,iBAAAA,IAEJ,GACF,GAAG,CAACtB,EAAkBsB,IAEtB,OACEG,gBAACiB,EAAI,CACHZ,KAAK,QACLa,MAAOnB,EACPzB,IAAKA,EACLG,UAAWc,EACX4B,KAAK,SACO,aAAAnC,GAAa,SACzBK,GAAIA,gBACSC,GAAc8B,EAAUC,EAAuBC,aAAcjC,GAAG,YAClEkC,EAAgBD,cAE3BtB,EAACwB,cAAAC,EAAmBC,SAAQ,CAACC,MAAO,CAAE5B,UAAAA,IACpCC,EAAAwB,cAAA,MAAA,CAAK/C,UAAWgB,EAAGC,EAAOkC,UACvBpD,EAASkC,KACR,SACEN,EAGAO,GAEA,IAAMkB,EAA6BzB,EAAMC,KAAKyB,kBAC9C,OACE9B,EAAAwB,cAAA,MAAA,CACEO,IAAKpB,EACLlC,UAAWgB,EAAGC,EAAOsC,YAAWC,EAAA,CAAA,EAC7BvC,EAAOwC,gBAAkBL,KAG3BA,EAA6B7B,EAAKwB,cAAA,MAAA,CAAA/C,UAAWgB,EAAGC,EAAOyC,WAAY/B,GAAeA,EAGxF,MAIPJ,EAAAwB,cAAA,MAAA,CAAK/C,UAAWgB,EAAGC,EAAO0C,qBACvBhD,EAAgB,KACfY,EAACwB,cAAAa,EACa,CAAA,cAAA,4BACZC,KAAMC,EACN9D,UAAWgB,EAAGC,EAAO8C,UACrBC,aAAW,EACXC,QAAS7D,EACT8D,KAAK,QACLC,KAAK,WACL1B,MAAOrB,EAAmB,yBAA2B,mBACzC,aAAAX,KAMxB"}

package/dist/src/components/AlertBanner/AlertBanner.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={alertBanner:"alertBanner_4f83823bc2",primary:"primary_773d079442",positive:"positive_bfa3289992",negative:"negative_febd55f67e",dark:"dark_10c0d7f579",warning:"warning_f07609e587",closeBtn:"closeBtn_a6ef575bb1",content:"content_3363905f29",closeButtonWrapper:"closeButtonWrapper_85811e657c",ellipsis:"ellipsis_9cbfdd544e",contentItem:"contentItem_854e3b6e25",contentItemText:"contentItemText_ff4321ce80"};!function(n){const e="s_id-d6894f952adc_4_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".alertBanner_4f83823bc2 {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.primary_773d079442 {\n  background-color: var(--primary-color);\n}\n\n.positive_bfa3289992 {\n  background-color: var(--positive-color);\n}\n\n.negative_febd55f67e {\n  background-color: var(--negative-color);\n}\n\n.dark_10c0d7f579 {\n  background-color: var(--inverted-color-background);\n}\n\n.warning_f07609e587 {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n\n.warning_f07609e587 .closeBtn_a6ef575bb1 {\n  color: var(--fixed-dark-color);\n}\n\n.content_3363905f29 {\n  flex: 1 1 auto;\n  display: flex;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline-start: var(--space-16);\n}\n\n.closeButtonWrapper_85811e657c {\n  flex: 0 0 40px;\n  position: relative;\n  height: 100%;\n  min-width: 0;\n}\n\n.closeBtn_a6ef575bb1 {\n  position: absolute;\n  inset-inline-end: 4px;\n  top: 4px;\n}\n\n.ellipsis_9cbfdd544e {\n  flex: 0 1 auto;\n}\n\n.contentItem_854e3b6e25 {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.contentItemText_ff4321ce80 {\n  flex: 0 1 auto;\n  min-width: 0;\n}");export{n as default};
+var n={alertBanner:"alertBanner_053087ab52",primary:"primary_bc18f03e0f",positive:"positive_2f08df895a",negative:"negative_095e6e077b",dark:"dark_2bd80ed3de",warning:"warning_756316a26f",closeBtn:"closeBtn_217dd74e34",content:"content_05ea33a770",closeButtonWrapper:"closeButtonWrapper_251a9a7b01",ellipsis:"ellipsis_1c4f5714b8",contentItem:"contentItem_2b7dec4d56",contentItemText:"contentItemText_25ef7b1269"};!function(n){const e="s_id-d6894f952adc_4_0_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".alertBanner_053087ab52 {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.primary_bc18f03e0f {\n  background-color: var(--primary-color);\n}\n\n.positive_2f08df895a {\n  background-color: var(--positive-color);\n}\n\n.negative_095e6e077b {\n  background-color: var(--negative-color);\n}\n\n.dark_2bd80ed3de {\n  background-color: var(--inverted-color-background);\n}\n\n.warning_756316a26f {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n\n.warning_756316a26f .closeBtn_217dd74e34 {\n  color: var(--fixed-dark-color);\n}\n\n.content_05ea33a770 {\n  flex: 1 1 auto;\n  display: flex;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline-start: var(--space-16);\n}\n\n.closeButtonWrapper_251a9a7b01 {\n  flex: 0 0 40px;\n  position: relative;\n  height: 100%;\n  min-width: 0;\n}\n\n.closeBtn_217dd74e34 {\n  position: absolute;\n  inset-inline-end: 4px;\n  top: 4px;\n}\n\n.ellipsis_1c4f5714b8 {\n  flex: 0 1 auto;\n}\n\n.contentItem_2b7dec4d56 {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.contentItemText_25ef7b1269 {\n  flex: 0 1 auto;\n  min-width: 0;\n}");export{n as default};
 //# sourceMappingURL=AlertBanner.module.scss.js.map

package/dist/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={bannerButton:"bannerButton_6512aa2e02",darkBackground:"darkBackground_6512aa2e02",marginLeft:"marginLeft_0baa49e533"};!function(e){const n="s_id-35a7e70934a8_4_0_0-beta_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)}(".bannerButton_6512aa2e02 {\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.dark-app-theme .darkBackground_6512aa2e02 .bannerButton_6512aa2e02 {\n  background-color: var(--dark-background-color);\n}\n\n.marginLeft_0baa49e533 {\n  margin-inline-start: var(--space-8);\n}");export{e as default};
+var e={bannerButton:"bannerButton_5704ebaca5",darkBackground:"darkBackground_5704ebaca5",marginLeft:"marginLeft_3f9b4c787d"};!function(e){const n="s_id-35a7e70934a8_4_0_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)}(".bannerButton_5704ebaca5 {\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.dark-app-theme .darkBackground_5704ebaca5 .bannerButton_5704ebaca5 {\n  background-color: var(--dark-background-color);\n}\n\n.marginLeft_3f9b4c787d {\n  margin-inline-start: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=AlertBannerButton.module.scss.js.map

package/dist/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={bannerLink:"bannerLink_27ce5bd00b",bannerLinkTextColorOnPrimary:"bannerLinkTextColorOnPrimary_525f6756e8",bannerLinkTextColorOnInverted:"bannerLinkTextColorOnInverted_8c87309fbb",marginLeft:"marginLeft_0baa49e533"};!function(n){const e="s_id-b8e9178179b1_4_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerLink_27ce5bd00b {\n  text-decoration: underline;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.bannerLinkTextColorOnPrimary_525f6756e8 {\n  color: var(--text-color-on-primary);\n}\n\n.bannerLinkTextColorOnInverted_8c87309fbb {\n  color: var(--text-color-on-inverted);\n}\n\n.marginLeft_0baa49e533 {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
+var n={bannerLink:"bannerLink_b7981eebfa",bannerLinkTextColorOnPrimary:"bannerLinkTextColorOnPrimary_2f6344029f",bannerLinkTextColorOnInverted:"bannerLinkTextColorOnInverted_fc8995b8f1",marginLeft:"marginLeft_3f9b4c787d"};!function(n){const e="s_id-b8e9178179b1_4_0_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerLink_b7981eebfa {\n  text-decoration: underline;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.bannerLinkTextColorOnPrimary_2f6344029f {\n  color: var(--text-color-on-primary);\n}\n\n.bannerLinkTextColorOnInverted_fc8995b8f1 {\n  color: var(--text-color-on-inverted);\n}\n\n.marginLeft_3f9b4c787d {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
 //# sourceMappingURL=AlertBannerLink.module.scss.js.map

package/dist/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={bannerText:"bannerText_9d9c28c3ab",marginLeft:"marginLeft_0baa49e533"};!function(e){const n="s_id-306a220e9849_4_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".bannerText_9d9c28c3ab {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.marginLeft_0baa49e533 {\n  margin-inline-start: var(--space-8);\n}");export{e as default};
+var e={bannerText:"bannerText_9d547d1345",marginLeft:"marginLeft_3f9b4c787d"};!function(e){const n="s_id-306a220e9849_4_0_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".bannerText_9d547d1345 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.marginLeft_3f9b4c787d {\n  margin-inline-start: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=AlertBannerText.module.scss.js.map

package/dist/src/components/AttentionBox/AttentionBox.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={attention:"attention_0992c158d5",animate:"animate_6b3b383aab",attentionBoxAnimation:"attentionBoxAnimation_41f7513fec",primary:"primary_4cd6aac0b2",positive:"positive_9f191bd965",negative:"negative_482102beec",warning:"warning_beb19ebd70",neutral:"neutral_55b81cc605"};!function(n){const e="s_id-4a6eadcbcb7d_4_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("@keyframes attentionBoxAnimation_41f7513fec {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.attention_0992c158d5 {\n  width: 100%;\n  border-radius: var(--border-radius-medium);\n  padding: var(--space-12) var(--space-16);\n  position: relative;\n  overflow: hidden;\n}\n.attention_0992c158d5.animate_6b3b383aab {\n  animation: attentionBoxAnimation_41f7513fec 200ms var(--motion-timing-transition);\n}\n.attention_0992c158d5.primary_4cd6aac0b2 {\n  background-color: var(--primary-selected-color);\n}\n.attention_0992c158d5.positive_9f191bd965 {\n  background-color: var(--positive-color-selected);\n}\n.attention_0992c158d5.negative_482102beec {\n  background-color: var(--negative-color-selected);\n}\n.attention_0992c158d5.warning_beb19ebd70 {\n  background-color: var(--warning-color-selected);\n}\n.attention_0992c158d5.neutral_55b81cc605 {\n  background-color: var(--allgrey-background-color);\n}");export{n as default};
+var n={attention:"attention_73f2285060",animate:"animate_1d2dd77e5f",attentionBoxAnimation:"attentionBoxAnimation_46307e5b84",primary:"primary_ddfddef826",positive:"positive_cab25168d1",negative:"negative_48a9d5337c",warning:"warning_e6e94cae1d",neutral:"neutral_7229d33b7f"};!function(n){const e="s_id-4a6eadcbcb7d_4_0_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("@keyframes attentionBoxAnimation_46307e5b84 {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.attention_73f2285060 {\n  width: 100%;\n  border-radius: var(--border-radius-medium);\n  padding: var(--space-12) var(--space-16);\n  position: relative;\n  overflow: hidden;\n}\n.attention_73f2285060.animate_1d2dd77e5f {\n  animation: attentionBoxAnimation_46307e5b84 200ms var(--motion-timing-transition);\n}\n.attention_73f2285060.primary_ddfddef826 {\n  background-color: var(--primary-selected-color);\n}\n.attention_73f2285060.positive_cab25168d1 {\n  background-color: var(--positive-color-selected);\n}\n.attention_73f2285060.negative_48a9d5337c {\n  background-color: var(--negative-color-selected);\n}\n.attention_73f2285060.warning_e6e94cae1d {\n  background-color: var(--warning-color-selected);\n}\n.attention_73f2285060.neutral_7229d33b7f {\n  background-color: var(--allgrey-background-color);\n}");export{n as default};
 //# sourceMappingURL=AttentionBox.module.scss.js.map

package/dist/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={closeButton:"closeButton_f27cf44e8f"};!function(e){const t="s_id-979f8aeb619b_4_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".closeButton_f27cf44e8f {\n  flex-shrink: 0;\n}\n.closeButton_f27cf44e8f:hover {\n  background-color: var(--primary-background-hover-color);\n}");export{e as default};
+var e={closeButton:"closeButton_666b51864d"};!function(e){const t="s_id-979f8aeb619b_4_0_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".closeButton_666b51864d {\n  flex-shrink: 0;\n}\n.closeButton_666b51864d:hover {\n  background-color: var(--primary-background-hover-color);\n}");export{e as default};
 //# sourceMappingURL=AttentionBoxCloseButton.module.scss.js.map

package/dist/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={icon:"icon_f79b3a8fb7"};!function(e){const t="s_id-55a80ba34ba3_4_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".icon_f79b3a8fb7 {\n  color: var(--primary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
+var e={icon:"icon_a1ce2c57b0"};!function(e){const t="s_id-55a80ba34ba3_4_0_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const c=document.createElement("style");c.id=t,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".icon_a1ce2c57b0 {\n  color: var(--primary-text-color);\n  flex-shrink: 0;\n}");export{e as default};
 //# sourceMappingURL=AttentionBoxLeadingIcon.module.scss.js.map

package/dist/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={attentionBoxLink:"attentionBoxLink_b678bbafbe"};!function(e){const t="s_id-f7cefb69d475_4_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("a.attentionBoxLink_b678bbafbe {\n  color: var(--primary-text-color);\n  text-decoration: underline;\n}");export{e as default};
+var e={attentionBoxLink:"attentionBoxLink_9ab9c16cde"};!function(e){const t="s_id-f7cefb69d475_4_0_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const o=document.createElement("style");o.id=t,n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("a.attentionBoxLink_9ab9c16cde {\n  color: var(--primary-text-color);\n  text-decoration: underline;\n}");export{e as default};
 //# sourceMappingURL=AttentionBoxLink.module.scss.js.map

package/dist/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={container:"container_e77a7c6bb7",mainContentGroup:"mainContentGroup_769929ce58",leadingIcon:"leadingIcon_ff45f65f91",actionsGroup:"actionsGroup_33e79a0498"};!function(e){const n="s_id-2f71fab0a877_4_0_0-beta_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".container_e77a7c6bb7 {\n  gap: var(--space-32);\n}\n\n.mainContentGroup_769929ce58 {\n  min-width: 0;\n}\n\n.leadingIcon_ff45f65f91 {\n  align-self: flex-start;\n}\n\n.actionsGroup_33e79a0498 {\n  gap: var(--space-12);\n}");export{e as default};
+var n={container:"container_2e5521d33c",mainContentGroup:"mainContentGroup_486f726ab4",leadingIcon:"leadingIcon_672f1c6fbd",actionsGroup:"actionsGroup_22fbf7a433"};!function(n){const e="s_id-2f71fab0a877_4_0_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".container_2e5521d33c {\n  gap: var(--space-32);\n}\n\n.mainContentGroup_486f726ab4 {\n  min-width: 0;\n}\n\n.leadingIcon_672f1c6fbd {\n  align-self: flex-start;\n}\n\n.actionsGroup_22fbf7a433 {\n  gap: var(--space-12);\n}");export{n as default};
 //# sourceMappingURL=AttentionBoxCompact.module.scss.js.map

package/dist/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={container:"container_54c2418e7b",icon:"icon_911e26c68c",title:"title_06b1705300",text:"text_e0da0c99da",actions:"actions_793f45dbee",closeButton:"closeButton_3db358a3fa",hasIcon:"hasIcon_f4faad510b",hasCloseButton:"hasCloseButton_2a1c5203d7",hasTitle:"hasTitle_a895fc0ade"};!function(n){const e="s_id-d1aa0b2532e6_4_0_0-beta_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".container_54c2418e7b {\n  --grid-columns: auto 1fr auto;\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  grid-template-columns: var(--grid-columns);\n}\n.container_54c2418e7b .icon_911e26c68c {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n}\n.container_54c2418e7b .title_06b1705300 {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: center;\n}\n.container_54c2418e7b .text_e0da0c99da,\n.container_54c2418e7b .actions_793f45dbee {\n  grid-column: 2/-1;\n}\n.container_54c2418e7b .text_e0da0c99da {\n  grid-row: 2;\n  min-width: 0;\n  margin-inline-end: var(--space-8);\n}\n.container_54c2418e7b .closeButton_3db358a3fa {\n  grid-row: 1;\n  grid-column: 3;\n  align-self: start;\n}\n.container_54c2418e7b .actions_793f45dbee {\n  grid-row: 3;\n  margin-block-start: var(--space-8);\n}\n.container_54c2418e7b:not(.hasIcon_f4faad510b) {\n  --grid-columns: 1fr auto;\n}\n.container_54c2418e7b:not(.hasIcon_f4faad510b):not(.hasCloseButton_2a1c5203d7) {\n  --grid-columns: 1fr;\n}\n.container_54c2418e7b:not(.hasIcon_f4faad510b) .title_06b1705300 {\n  grid-column: 1;\n}\n.container_54c2418e7b:not(.hasIcon_f4faad510b) .text_e0da0c99da,\n.container_54c2418e7b:not(.hasIcon_f4faad510b) .actions_793f45dbee {\n  grid-column: 1/-1;\n}\n.container_54c2418e7b:not(.hasIcon_f4faad510b) .closeButton_3db358a3fa {\n  grid-column: 2;\n}\n.container_54c2418e7b:not(.hasCloseButton_2a1c5203d7) {\n  --grid-columns: auto 1fr;\n}\n.container_54c2418e7b:not(.hasTitle_a895fc0ade) .icon_911e26c68c {\n  align-self: start;\n}\n.container_54c2418e7b:not(.hasTitle_a895fc0ade) .text_e0da0c99da {\n  grid-row: 1;\n  grid-column-end: -2;\n}\n.container_54c2418e7b:not(.hasTitle_a895fc0ade) .closeButton_3db358a3fa {\n  margin-block-start: -1px;\n}\n.container_54c2418e7b:not(.hasTitle_a895fc0ade) .actions_793f45dbee {\n  grid-row: 2;\n}");export{n as default};
+var n={container:"container_37526479a4",icon:"icon_3a6ff11f05",title:"title_b0a7c38e7b",text:"text_fd72c6947a",actions:"actions_0ea22f3bab",closeButton:"closeButton_2dc4527521",hasIcon:"hasIcon_c53c23f75e",hasCloseButton:"hasCloseButton_0233f3bad5",hasTitle:"hasTitle_1e331e2a7e"};!function(n){const e="s_id-d1aa0b2532e6_4_0_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".container_37526479a4 {\n  --grid-columns: auto 1fr auto;\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  grid-template-columns: var(--grid-columns);\n}\n.container_37526479a4 .icon_3a6ff11f05 {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n}\n.container_37526479a4 .title_b0a7c38e7b {\n  grid-row: 1;\n  grid-column: 2;\n  align-self: center;\n}\n.container_37526479a4 .text_fd72c6947a,\n.container_37526479a4 .actions_0ea22f3bab {\n  grid-column: 2/-1;\n}\n.container_37526479a4 .text_fd72c6947a {\n  grid-row: 2;\n  min-width: 0;\n  margin-inline-end: var(--space-8);\n}\n.container_37526479a4 .closeButton_2dc4527521 {\n  grid-row: 1;\n  grid-column: 3;\n  align-self: start;\n}\n.container_37526479a4 .actions_0ea22f3bab {\n  grid-row: 3;\n  margin-block-start: var(--space-8);\n}\n.container_37526479a4:not(.hasIcon_c53c23f75e) {\n  --grid-columns: 1fr auto;\n}\n.container_37526479a4:not(.hasIcon_c53c23f75e):not(.hasCloseButton_0233f3bad5) {\n  --grid-columns: 1fr;\n}\n.container_37526479a4:not(.hasIcon_c53c23f75e) .title_b0a7c38e7b {\n  grid-column: 1;\n}\n.container_37526479a4:not(.hasIcon_c53c23f75e) .text_fd72c6947a,\n.container_37526479a4:not(.hasIcon_c53c23f75e) .actions_0ea22f3bab {\n  grid-column: 1/-1;\n}\n.container_37526479a4:not(.hasIcon_c53c23f75e) .closeButton_2dc4527521 {\n  grid-column: 2;\n}\n.container_37526479a4:not(.hasCloseButton_0233f3bad5) {\n  --grid-columns: auto 1fr;\n}\n.container_37526479a4:not(.hasTitle_1e331e2a7e) .icon_3a6ff11f05 {\n  align-self: start;\n}\n.container_37526479a4:not(.hasTitle_1e331e2a7e) .text_fd72c6947a {\n  grid-row: 1;\n  grid-column-end: -2;\n}\n.container_37526479a4:not(.hasTitle_1e331e2a7e) .closeButton_2dc4527521 {\n  margin-block-start: -1px;\n}\n.container_37526479a4:not(.hasTitle_1e331e2a7e) .actions_0ea22f3bab {\n  grid-row: 2;\n}");export{n as default};
 //# sourceMappingURL=AttentionBoxDefault.module.scss.js.map

package/dist/src/components/Avatar/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{isNil as t,camelCase as o}from"es-toolkit";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import i from"classnames";import l,{useMemo as n,useCallback as c}from"react";import{getElementColor as d}from"../../types/Colors.js";import m from"./AvatarBadge.js";import p from"./AvatarContent.js";import u from"./Avatar.module.scss.js";import{ComponentVibeId as b}from"../../tests/constants.js";import g from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import f from"../../../components/tooltip/dist/Tooltip/Tooltip.js";var v=function(v){var h=v.id,j=v.type,k=void 0===j?"text":j,C=v.className,E=v.avatarContentWrapperClassName,N=v.textClassName,y=void 0===N?"":N,B=v.size,x=void 0===B?"large":B,A=v.src,T=v.icon,P=v.text,z=v.tooltipProps,O=v["aria-label"],R=v.withoutTooltip,w=void 0!==R&&R,I=v.role,L=v.backgroundColor,W=void 0===L?"chili-blue":L,q=v.square,H=v.disabled,V=v.tabIndex,_=v["aria-hidden"],D=void 0!==_&&_,M=v.topLeftBadgeProps,S=v.topRightBadgeProps,F=v.bottomLeftBadgeProps,G=v.bottomRightBadgeProps,J=v.withoutBorder,K=void 0!==J&&J,Q=v.customSize,U=void 0===Q?null:Q,X=v.customBackgroundColor,Y=void 0===X?null:X,Z=v.onClick,$=v["data-testid"],ee=n((function(){return Y?{backgroundColor:Y}:A?{}:{backgroundColor:d(W)}}),[A,W,Y]),te=n((function(){return U?{height:U,width:U}:{}}),[U]),oe=n((function(){if(!w)return z?Object.assign({content:O},z):{content:O}}),[O,z,w]),ae=n((function(){var e=[];return t(M)||e.push(l.createElement("div",{key:"top-left-badge",className:i(u.badge,u.badgeTopLeft)},l.createElement(m,Object.assign({size:x},M)))),t(S)||e.push(l.createElement("div",{key:"top-right-badge",className:i(u.badge,u.badgeTopRight)},l.createElement(m,Object.assign({size:x},S)))),t(F)||e.push(l.createElement("div",{key:"bottom-left-badge",className:i(u.badge,u.badgeBottomLeft)},l.createElement(m,Object.assign({size:x},F)))),t(G)||e.push(l.createElement("div",{key:"bottom-right-bade",className:i(u.badge,u.badgeBottomRight)},l.createElement(m,Object.assign({size:x},G)))),e.length>0?l.createElement("div",{className:i(u.badges)},e):null}),[x,M,S,F,G]),re=n((function(){return H||!Z&&!(null==oe?void 0:oe.content)?-1:0}),[H,Z,null==oe?void 0:oe.content]),se=null!=V?V:re,ie=c((function(e){e.preventDefault(),Z&&Z(e,h)}),[Z,h]);return l.createElement("div",{id:h,"data-testid":$||r(s.AVATAR,h),className:i(u.avatar,u[x],C),style:te,"data-vibe":b.AVATAR},l.createElement(g,{isClickable:!!Z,clickableProps:{onClick:ie,tabIndex:-1,className:u.clickableWrapper}},l.createElement(f,Object.assign({showTrigger:["focus","mouseenter"],hideTrigger:["blur","mouseleave"]},oe),l.createElement("div",{className:i(u.circle,a(u,o("circle--"+k)),e(e(e({},u.disabled,H),u.square,q),u.withoutBorder,K),E),"aria-hidden":D,tabIndex:se,style:Object.assign({},ee)},l.createElement(p,{type:k,size:x,src:A,icon:T,text:P,"aria-label":O,role:I,textClassName:y})),ae)))};export{v as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{isNil as t,camelCase as a}from"es-toolkit";import{getTestId as o,ComponentDefaultTestId as r}from"../../tests/testIds.js";import s from"classnames";import i,{useMemo as l,useCallback as n}from"react";import{getElementColor as c}from"../../types/Colors.js";import d from"./AvatarBadge.js";import m from"./AvatarContent.js";import p from"./Avatar.module.scss.js";import{ComponentVibeId as u}from"../../tests/constants.js";import b from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import g from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var v=function(v){var h=v.id,j=v.type,k=void 0===j?"text":j,C=v.className,E=v.avatarContentWrapperClassName,N=v.textClassName,y=void 0===N?"":N,B=v.size,x=void 0===B?"large":B,A=v.src,T=v.icon,P=v.text,z=v.tooltipProps,O=v["aria-label"],R=v.withoutTooltip,w=void 0!==R&&R,I=v.role,L=v.backgroundColor,W=void 0===L?"chili-blue":L,q=v.square,H=v.disabled,V=v.tabIndex,_=v["aria-hidden"],D=void 0!==_&&_,M=v.topLeftBadgeProps,S=v.topRightBadgeProps,F=v.bottomLeftBadgeProps,G=v.bottomRightBadgeProps,J=v.withoutBorder,K=void 0!==J&&J,Q=v.customSize,U=void 0===Q?null:Q,X=v.customBackgroundColor,Y=void 0===X?null:X,Z=v.onClick,$=v["data-testid"],ee=l((function(){return Y?{backgroundColor:Y}:A?{}:{backgroundColor:c(W)}}),[A,W,Y]),te=l((function(){return U?{height:U,width:U}:{}}),[U]),ae=l((function(){if(!w)return z?Object.assign({content:O},z):{content:O}}),[O,z,w]),oe=l((function(){var e=[];return t(M)||e.push(i.createElement("div",{key:"top-left-badge",className:s(p.badge,p.badgeTopLeft)},i.createElement(d,Object.assign({size:x},M)))),t(S)||e.push(i.createElement("div",{key:"top-right-badge",className:s(p.badge,p.badgeTopRight)},i.createElement(d,Object.assign({size:x},S)))),t(F)||e.push(i.createElement("div",{key:"bottom-left-badge",className:s(p.badge,p.badgeBottomLeft)},i.createElement(d,Object.assign({size:x},F)))),t(G)||e.push(i.createElement("div",{key:"bottom-right-bade",className:s(p.badge,p.badgeBottomRight)},i.createElement(d,Object.assign({size:x},G)))),e.length>0?i.createElement("div",{className:s(p.badges)},e):null}),[x,M,S,F,G]),re=l((function(){return H||!Z&&!(null==ae?void 0:ae.content)?-1:0}),[H,Z,null==ae?void 0:ae.content]),se=null!=V?V:re,ie=n((function(e){e.preventDefault(),Z&&Z(e,h)}),[Z,h]);return i.createElement("div",{id:h,"data-testid":$||o(r.AVATAR,h),className:s(p.avatar,p[x],C),style:te,"data-vibe":u.AVATAR},i.createElement(b,{isClickable:!!Z,clickableProps:{onClick:ie,tabIndex:-1,className:p.clickableWrapper}},i.createElement(g,Object.assign({showTrigger:["focus","mouseenter"],hideTrigger:["blur","mouseleave"]},ae),i.createElement("div",{className:s(p.circle,f(p,a("circle--"+k)),e(e(e({},p.disabled,H),p.square,q),p.withoutBorder,K),E),"aria-hidden":D,tabIndex:se,style:Object.assign({},ee)},i.createElement(m,{type:k,size:x,src:A,icon:T,text:P,"aria-label":O,role:I,textClassName:y})),oe)))};export{v as default};
 //# sourceMappingURL=Avatar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { type AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./Avatar.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\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 \"aria-label\"?: 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 \"aria-hidden\"?: 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 \"aria-label\": ariaLabel,\n withoutTooltip = false,\n role,\n backgroundColor = \"chili-blue\",\n square,\n disabled,\n tabIndex,\n \"aria-hidden\": 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 data-vibe={ComponentVibeId.AVATAR}\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 aria-label={ariaLabel}\n role={role}\n textClassName={textClassName}\n />\n </div>\n {badgesContainer}\n </Tooltip>\n </ClickableWrapper>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["Avatar","_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","ComponentVibeId","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent"],"mappings":"otBAoHA,IAAMA,EAAS,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,aACcC,EAASd,EAAvB,cAAYe,EAAAf,EACZgB,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,EACR,eAAewB,OAAa,IAAHD,GAAQA,EACjCE,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,GAAuBC,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,cAAoB,EAApBA,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,EACEM,cAAA,MAAA,CAAAxD,GAAIA,gBACSmC,GAAciC,EAAUC,EAAuBC,OAAQtE,GACpEG,UAAWiD,EAAGC,EAAOkB,OAAQlB,EAAO7C,GAAOL,GAC3CqE,MAAOjC,GACI,YAAAkC,EAAgBH,QAE3BpB,EAACM,cAAAkB,GACCC,cAAezC,EACf0C,eAAgB,CACd1C,QAAS8B,GACT3C,UAAW,EACXlB,UAAWkD,EAAOwB,mBAGpB3B,EAAAM,cAACsB,EAAQnC,OAAAC,OAAA,CAAAmC,YAAa,CAAC,QAAS,cAAeC,YAAa,CAAC,OAAQ,eAAmBtC,IACtFQ,EAAAM,cAAA,MAAA,CACErD,UAAWiD,EACTC,EAAO4B,OACPC,EAAS7B,EAAQ8B,EAAU,WAAajF,IAAMkF,EAAAA,EAAAA,EAAA,CAAA,EAE3C/B,EAAOjC,SAAWA,GAClBiC,EAAOlC,OAASA,GAChBkC,EAAOxB,cAAgBA,GAE1BzB,GACD,cACYmB,EACbF,SAAU0C,GACVS,MAAK7B,OAAAC,OAAA,CAAA,EAAOR,KAEZc,EAAAM,cAAC6B,EAAa,CACZnF,KAAMA,EACNM,KAAMA,EACNC,IAAKA,EACLC,KAAMA,EACNC,KAAMA,EAAI,aACEE,EACZG,KAAMA,EACNV,cAAeA,KAGlBwC,KAKX"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { type AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./Avatar.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\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 \"aria-label\"?: 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 \"aria-hidden\"?: 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 \"aria-label\": ariaLabel,\n withoutTooltip = false,\n role,\n backgroundColor = \"chili-blue\",\n square,\n disabled,\n tabIndex,\n \"aria-hidden\": 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 data-vibe={ComponentVibeId.AVATAR}\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 aria-label={ariaLabel}\n role={role}\n textClassName={textClassName}\n />\n </div>\n {badgesContainer}\n </Tooltip>\n </ClickableWrapper>\n </div>\n );\n};\n\nexport default Avatar;\n"],"names":["Avatar","_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","ComponentVibeId","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={avatar:"avatar_da32598863",large:"large_bacd2e8535",medium:"medium_2c51fcae9a",small:"small_b7553b4a3c",xs:"xs_ce3e890f15",clickableWrapper:"clickableWrapper_17d31b46ed",circle:"circle_196bc3e0d3","focus-visible":"focus-visible_bd3facfca1",circleImg:"circleImg_8873c5d341",circleText:"circleText_7c0bd5d18f",disabled:"disabled_250af21584",square:"square_af9c9acd55",withoutBorder:"withoutBorder_a2ecb67424",badges:"badges_01bef5cb87",badge:"badge_f5929e4089",badgeTopLeft:"badgeTopLeft_d0e8f55686",badgeTopRight:"badgeTopRight_786885a61a",badgeBottomLeft:"badgeBottomLeft_bf60d77717",badgeBottomRight:"badgeBottomRight_a11f4f569d"};!function(e){const n="s_id-4487266934ef_4_0_0-beta_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n.avatar_da32598863 {\n  position: relative;\n}\n.large_bacd2e8535 {\n  height: 50px;\n  width: 50px;\n}\n.medium_2c51fcae9a {\n  height: 32px;\n  width: 32px;\n}\n.small_b7553b4a3c {\n  height: 28px;\n  width: 28px;\n}\n.xs_ce3e890f15 {\n  height: 20px;\n  width: 20px;\n}\n.clickableWrapper_17d31b46ed {\n  height: 100%;\n  width: 100%;\n}\n.circle_196bc3e0d3 {\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.circle_196bc3e0d3:focus {\n  outline: none;\n}\n.circle_196bc3e0d3:focus:focus-visible, .circle_196bc3e0d3:focus.focus-visible_bd3facfca1 {\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.circle_196bc3e0d3:focus:focus:not(.focus-visible_bd3facfca1) {\n  outline: none;\n}\n.circleImg_8873c5d341 {\n  border-color: var(--primary-background-color);\n}\n.circleText_7c0bd5d18f {\n  border-color: var(--layout-border-color);\n}\n.disabled_250af21584: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.square_af9c9acd55 {\n  border-radius: var(--border-radius-small);\n}\n.square_af9c9acd55:focus {\n  outline: none;\n}\n.square_af9c9acd55:focus:focus-visible, .square_af9c9acd55:focus.focus-visible_bd3facfca1 {\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.square_af9c9acd55:focus:focus:not(.focus-visible_bd3facfca1) {\n  outline: none;\n}\n.withoutBorder_a2ecb67424 {\n  border: none;\n}\n.badges_01bef5cb87 {\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-inline: auto;\n  height: 110%;\n  width: 110%;\n}\n.badges_01bef5cb87 .badge_f5929e4089 {\n  display: flex;\n}\n.badges_01bef5cb87 .badgeTopLeft_d0e8f55686 {\n  grid-row: 1;\n  grid-column: 1;\n  justify-self: start;\n}\n.badges_01bef5cb87 .badgeTopRight_786885a61a {\n  grid-row: 1;\n  grid-column: 2;\n  justify-self: end;\n}\n.badges_01bef5cb87 .badgeBottomLeft_bf60d77717 {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  align-self: end;\n}\n.badges_01bef5cb87 .badgeBottomRight_a11f4f569d {\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_c8c4d3b9fa",large:"large_f86a3ee41c",medium:"medium_4a4c0dfdda",small:"small_ad9a5856dc",xs:"xs_04cef0e921",clickableWrapper:"clickableWrapper_cc9136ea93",circle:"circle_86d52a1bb7","focus-visible":"focus-visible_9d13b59560",circleImg:"circleImg_dc35e2edc0",circleText:"circleText_a55afe8785",disabled:"disabled_ac2aa3344f",square:"square_1d8a7bb9ca",withoutBorder:"withoutBorder_db5d768ccb",badges:"badges_5dee794432",badge:"badge_a9da1e9cc3",badgeTopLeft:"badgeTopLeft_aaee8db4d2",badgeTopRight:"badgeTopRight_a8253a6719",badgeBottomLeft:"badgeBottomLeft_d84bca230b",badgeBottomRight:"badgeBottomRight_95c3cbc07b"};!function(e){const n="s_id-4487266934ef_4_0_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const d=document.createElement("style");d.id=n,a.firstChild?a.insertBefore(d,a.firstChild):a.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n.avatar_c8c4d3b9fa {\n  position: relative;\n}\n.large_f86a3ee41c {\n  height: 50px;\n  width: 50px;\n}\n.medium_4a4c0dfdda {\n  height: 32px;\n  width: 32px;\n}\n.small_ad9a5856dc {\n  height: 28px;\n  width: 28px;\n}\n.xs_04cef0e921 {\n  height: 20px;\n  width: 20px;\n}\n.clickableWrapper_cc9136ea93 {\n  height: 100%;\n  width: 100%;\n}\n.circle_86d52a1bb7 {\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.circle_86d52a1bb7:focus {\n  outline: none;\n}\n.circle_86d52a1bb7:focus:focus-visible, .circle_86d52a1bb7:focus.focus-visible_9d13b59560 {\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.circle_86d52a1bb7:focus:focus:not(.focus-visible_9d13b59560) {\n  outline: none;\n}\n.circleImg_dc35e2edc0 {\n  border-color: var(--primary-background-color);\n}\n.circleText_a55afe8785 {\n  border-color: var(--layout-border-color);\n}\n.disabled_ac2aa3344f: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.square_1d8a7bb9ca {\n  border-radius: var(--border-radius-small);\n}\n.square_1d8a7bb9ca:focus {\n  outline: none;\n}\n.square_1d8a7bb9ca:focus:focus-visible, .square_1d8a7bb9ca:focus.focus-visible_9d13b59560 {\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.square_1d8a7bb9ca:focus:focus:not(.focus-visible_9d13b59560) {\n  outline: none;\n}\n.withoutBorder_db5d768ccb {\n  border: none;\n}\n.badges_5dee794432 {\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-inline: auto;\n  height: 110%;\n  width: 110%;\n}\n.badges_5dee794432 .badge_a9da1e9cc3 {\n  display: flex;\n}\n.badges_5dee794432 .badgeTopLeft_aaee8db4d2 {\n  grid-row: 1;\n  grid-column: 1;\n  justify-self: start;\n}\n.badges_5dee794432 .badgeTopRight_a8253a6719 {\n  grid-row: 1;\n  grid-column: 2;\n  justify-self: end;\n}\n.badges_5dee794432 .badgeBottomLeft_d84bca230b {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  align-self: end;\n}\n.badges_5dee794432 .badgeBottomRight_95c3cbc07b {\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 CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import t from"react";import{camelCase as s}from"es-toolkit";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as i,ComponentDefaultTestId as o}from"../../tests/testIds.js";import c from"classnames";import r from"./AvatarBadge.module.scss.js";import l from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import n from"../../../components/icon/dist/Icon/Icon.js";import m from"../../../components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js";var d=function(d){var p=d.src,b=d.icon,f=d.tabIndex,k=void 0===f?0:f,C=d.className,j=d.size,u=void 0===j?"large":j,I=d.id,v=d.onClick,g=d["data-testid"],x=e(d,["src","icon","tabIndex","className","size","id","onClick","data-testid"]),E=c(a(r,s("badge--"+u)),C),A=g||i(o.AVATAR_BADGE,I),N=-1===k&&!!v;if(b)return N?t.createElement(l,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},t.createElement(n,Object.assign({icon:b,className:E},x,{"data-testid":A}))):t.createElement(n,Object.assign({icon:b,className:E,tabindex:k},x,{"data-testid":A}));var O=t.createElement(m,Object.assign({src:p,className:E},x,{"data-testid":A}));return p?N?t.createElement(l,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},O):O:null};export{d as default};
+import{__rest as t}from"../../../_virtual/_tslib.js";import e from"react";import{camelCase as s}from"es-toolkit";import{getTestId as a,ComponentDefaultTestId as i}from"../../tests/testIds.js";import o from"classnames";import c from"./AvatarBadge.module.scss.js";import r from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import l from"../../../components/icon/dist/Icon/Icon.js";import n from"../../../components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js";import{getStyle as m}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var d=function(d){var p=d.src,b=d.icon,f=d.tabIndex,k=void 0===f?0:f,u=d.className,C=d.size,j=void 0===C?"large":C,I=d.id,v=d.onClick,g=d["data-testid"],x=t(d,["src","icon","tabIndex","className","size","id","onClick","data-testid"]),E=o(m(c,s("badge--"+j)),u),A=g||a(i.AVATAR_BADGE,I),N=-1===k&&!!v;if(b)return N?e.createElement(r,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},e.createElement(l,Object.assign({icon:b,className:E},x,{"data-testid":A}))):e.createElement(l,Object.assign({icon:b,className:E,tabindex:k},x,{"data-testid":A}));var O=e.createElement(n,Object.assign({src:p,className:E},x,{"data-testid":A}));return p?N?e.createElement(r,{isClickable:!0,clickableProps:{onClick:v,tabIndex:k}},O):O:null};export{d as default};
 //# sourceMappingURL=AvatarBadge.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"~~../../helpers~~/~~typesciptCssModulesHelper~~\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\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?: number;\n /\n The size of the badge.\n /\n size?: AvatarSize;\n /\n Callback fired when the badge is clicked.\n */\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n src,\n icon,\n tabIndex = 0,\n className,\n size = \"large\",\n id,\n onClick,\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 const isClickable = tabIndex === -1 && !!onClick;\n\n if (icon) {\n return isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n </ClickableWrapper>\n ) : (\n <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n );\n }\n\n const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n return src ? (\n isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n {svgIcon}\n </ClickableWrapper>\n ) : (\n svgIcon\n )\n ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"~~uiBAmCA~~,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,EATgBC,EAAAZ,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,GAA4B,IAAdlB,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,EAAKC,OAAAC,OAAA,CAAA3B,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,EAACG,cAAAC,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,EAAyB,CAAA,cAAAO,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}
1	+ {"version":3,"file":"AvatarBadge.js","sources":["../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\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?: number;\n /\n The size of the badge.\n /\n size?: AvatarSize;\n /\n Callback fired when the badge is clicked.\n */\n onClick?: (event: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n src,\n icon,\n tabIndex = 0,\n className,\n size = \"large\",\n id,\n onClick,\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 const isClickable = tabIndex === -1 && !!onClick;\n\n if (icon) {\n return isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n </ClickableWrapper>\n ) : (\n <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n );\n }\n\n const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n return src ? (\n isClickable ? (\n <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n {svgIcon}\n </ClickableWrapper>\n ) : (\n svgIcon\n )\n ) : null;\n};\n\nexport default AvatarBadge;\n"],"names":["AvatarBadge","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","onClick","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","isClickable","React","ClickableWrapper","clickableProps","createElement","Icon","Object","assign","tabindex","svgIcon","CustomSvgIcon"],"mappings":"ojBAmCA,IAAMA,EAAc,SAACC,OACnBC,EAOyBD,EAPzBC,IACAC,EAMyBF,EANzBE,KAAIC,EAMqBH,EALzBI,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAIyBL,EAJzBK,UAASC,EAIgBN,EAHzBO,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAEyBR,EAFzBQ,GACAC,EACyBT,EADzBS,QACeC,EAAUV,EAAzB,eACGW,EATgBC,EAAAZ,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,UAAA,gBAWba,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYV,IAAQF,GAC/Da,EAASR,GAAcS,EAAUC,EAAuBC,aAAcb,GACtEc,GAA4B,IAAdlB,KAAqBK,EAEzC,GAAIP,EACF,OAAOoB,EACLC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACvDmB,EAAAG,cAACC,EAAKC,OAAAC,OAAA,CAAA3B,KAAMA,EAAMG,UAAWQ,GAAgBF,iBAAyBO,MAGxEK,EAACG,cAAAC,iBAAKzB,KAAMA,EAAMG,UAAWQ,EAAYiB,SAAU1B,GAAcO,iBAAyBO,KAI9F,IAAMa,EAAUR,EAAAG,cAACM,EAAaJ,OAAAC,OAAA,CAAC5B,IAAKA,EAAKI,UAAWQ,GAAgBF,EAAyB,CAAA,cAAAO,KAE7F,OAAOjB,EACLqB,EACEC,gBAACC,EAAgB,CAACF,aAAW,EAACG,eAAgB,CAAEhB,QAAAA,EAASL,SAAAA,IACtD2B,GAGHA,EAEA,IACN"}

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

@@ -1,2 +1,2 @@
-var e={badgeLarge:"badgeLarge_e9b0d3ef5c",badgeMedium:"badgeMedium_71031519a6",badgeSmall:"badgeSmall_38e959ecd0",badgeXs:"badgeXs_a40f06a5d8"};!function(e){const d="s_id-e545a08d61b0_4_0_0-beta_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+d))return;const t=document.createElement("style");t.id=d,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}(".badgeLarge_e9b0d3ef5c {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_71031519a6 {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_38e959ecd0,\n.badgeXs_a40f06a5d8 {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
+var e={badgeLarge:"badgeLarge_5bd750ac7b",badgeMedium:"badgeMedium_5a3fa78bf4",badgeSmall:"badgeSmall_595d361fba",badgeXs:"badgeXs_adc2944649"};!function(e){const d="s_id-e545a08d61b0_4_0_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_5bd750ac7b {\n  height: 19px;\n  width: 19px;\n}\n\n.badgeMedium_5a3fa78bf4 {\n  height: 13px;\n  width: 13px;\n}\n\n.badgeSmall_595d361fba,\n.badgeXs_adc2944649 {\n  height: 10px;\n  width: 10px;\n}");export{e as default};
 //# sourceMappingURL=AvatarBadge.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{camelCase as t}from"es-toolkit";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 i from"./AvatarContent.module.scss.js";import l from"../../../components/icon/dist/Icon/Icon.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,f=n.text,u=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=r(e(i,t("content_"+m)),e(i,t("content_"+m+"--"+T)));switch(m){case"img":return o.createElement("img",{role:A,alt:u,src:d,className:_,id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)});case"icon":return o.createElement(l,{icon:p,"aria-label":u,className:_,"aria-hidden":!1,id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)});case"text":return o.createElement("span",{"aria-label":u,role:A,className:r(_,C),id:E,"data-testid":x||a(s.AVATAR_CONTENT,E)},f);default:return null}};export{n as default};
+import{camelCase as t}from"es-toolkit";import{getTestId as e,ComponentDefaultTestId as a}from"../../tests/testIds.js";import s from"classnames";import r from"react";import i from"./AvatarContent.module.scss.js";import o from"../../../components/icon/dist/Icon/Icon.js";import{getStyle as l}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var n=function(n){var c=n.type,m=void 0===c?"text":c,d=n.src,p=n.icon,u=n.text,f=n["aria-label"],A=n.role,N=n.size,T=void 0===N?"large":N,v=n.textClassName,C=void 0===v?"":v,E=n.id,x=n["data-testid"],_=s(l(i,t("content_"+m)),l(i,t("content_"+m+"--"+T)));switch(m){case"img":return r.createElement("img",{role:A,alt:f,src:d,className:_,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"icon":return r.createElement(o,{icon:p,"aria-label":f,className:_,"aria-hidden":!1,id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)});case"text":return r.createElement("span",{"aria-label":f,role:A,className:s(_,C),id:E,"data-testid":x||e(a.AVATAR_CONTENT,E)},u);default:return null}};export{n as default};
 //# sourceMappingURL=AvatarContent.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"~~../../helpers~~/~~typesciptCssModulesHelper~~\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type 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 \"aria-label\"?: 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 \"aria-label\": 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 aria-hidden={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\nexport default AvatarContent;\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"],"mappings":"~~mVA6CA~~,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,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,EACE,eAAA,EACbF,GAAIA,EACS,cAAAC,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"}
1	+ {"version":3,"file":"AvatarContent.js","sources":["../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type 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 \"aria-label\"?: 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 \"aria-label\": 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 aria-hidden={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\nexport default AvatarContent;\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"],"mappings":"gWA6CA,IAAMA,EAAgB,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACcC,EAASN,EAAvB,cACAO,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,EACE,eAAA,EACbF,GAAIA,EACS,cAAAC,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"}

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

@@ -1,2 +1,2 @@
-var n={contentImg:"contentImg_e8535e2859",contentText:"contentText_ced19cacfe",contentTextLarge:"contentTextLarge_e153dd8576",contentTextMedium:"contentTextMedium_3e3cb8866d",contentTextSmall:"contentTextSmall_ff95d3feb5",contentTextXs:"contentTextXs_35bba071b3",contentIconLarge:"contentIconLarge_b7553b4a3c",contentIconMedium:"contentIconMedium_4021065a7f",contentIconSmall:"contentIconSmall_e68e187319"};!function(n){const t="s_id-50188146c7c7_4_0_0-beta_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)}("/* stylelint-disable */\n/* stylelint-enable */\n.contentImg_e8535e2859 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.contentText_ced19cacfe {\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.contentTextLarge_e153dd8576 {\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.contentTextMedium_3e3cb8866d {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n.contentTextSmall_ff95d3feb5 {\n  margin-top: 1px;\n  font-size: 12px;\n}\n.contentTextXs_35bba071b3 {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n.contentIconLarge_b7553b4a3c {\n  height: 28px;\n  width: 28px;\n}\n.contentIconMedium_4021065a7f {\n  height: 18px;\n  width: 18px;\n}\n.contentIconSmall_e68e187319 {\n  height: 12px;\n  width: 12px;\n}");export{n as default};
+var n={contentImg:"contentImg_8cde6fbdeb",contentText:"contentText_cc1bbfa7a5",contentTextLarge:"contentTextLarge_363b8471a8",contentTextMedium:"contentTextMedium_c82510405d",contentTextSmall:"contentTextSmall_8136ab29d3",contentTextXs:"contentTextXs_019ee32c0e",contentIconLarge:"contentIconLarge_ad9a5856dc",contentIconMedium:"contentIconMedium_525dfae415",contentIconSmall:"contentIconSmall_84bd173c2c"};!function(n){const t="s_id-50188146c7c7_4_0_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)}("/* stylelint-disable */\n/* stylelint-enable */\n.contentImg_8cde6fbdeb {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.contentText_cc1bbfa7a5 {\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.contentTextLarge_363b8471a8 {\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.contentTextMedium_c82510405d {\n  font: var(--font-text1-normal);\n  margin-top: 1px;\n}\n.contentTextSmall_8136ab29d3 {\n  margin-top: 1px;\n  font-size: 12px;\n}\n.contentTextXs_019ee32c0e {\n  margin-top: 1px;\n  font: var(--font-text3-normal);\n}\n.contentIconLarge_ad9a5856dc {\n  height: 28px;\n  width: 28px;\n}\n.contentIconMedium_525dfae415 {\n  height: 18px;\n  width: 18px;\n}\n.contentIconSmall_84bd173c2c {\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 CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={avatarGroupContainer:"avatarGroupContainer_ca64831a7e",avatarContainer:"avatarContainer_72e2c19a48"};!function(e){const a="s_id-34c07868a875_4_0_0-beta_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_ca64831a7e {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_72e2c19a48 {\n  margin-inline-start: calc(-1 * var(--space-8));\n}");export{e as default};
+var e={avatarGroupContainer:"avatarGroupContainer_af9acec542",avatarContainer:"avatarContainer_c03b43efad"};!function(e){const a="s_id-34c07868a875_4_0_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_af9acec542 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer_c03b43efad {\n  margin-inline-start: calc(-1 * var(--space-8));\n}");export{e as default};
 //# sourceMappingURL=AvatarGroup.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounter.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{getStyle as m}from"../../helpers/typesciptCssModulesHelper.js";import{avatarOnClick as c}from"./AvatarGroupHelper.js";import p from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";var v=function(v){var f=v.counterTooltipAvatars,b=void 0===f?[]:f,C=v.counterTooltipCustomProps,x=v.counterTooltipIsVirtualizedList,I=void 0!==x&&x,j=v.size,P=void 0===j?"medium":j,g=v.type,M=v.counterAriaLabel,A=v.disabled,E=v.counterProps||{},z=E.color,N=void 0===z?"light":z,T=E.count,h=void 0===T?b.length:T,y=E.prefix,G=void 0===y?"+":y,L=E.maxDigits,k=void 0===L?3:L,B=E.ariaLabelItemsName,H=void 0===B?"items":B,O=E.noAnimation,R=E.dialogContainerSelector,S=E.tabIndex,D=void 0===S?0:S,V=m(p,null==P?void 0:""+P),_=p[N],q=t(null),w=t(null),F=t(null),J=r((function(){return o.createElement(i,{color:N,count:h,prefix:G,maxDigits:k,"aria-label":M||"Tab for more ".concat(H),noAnimation:O,counterClassName:n(e({},p.disabled,A)),size:"xs"===P?"xs":void 0})}),[M,H,N,k,G,h,A,O]);return b.length||h?A?o.createElement("div",{ref:F,className:n(p.counterContainer,p.disabled,V,_)},J()):b.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:J,zIndex:1,className:n(p.counterContainer,V,_),"aria-label":M||"".concat(h," additional ").concat(H),dialogContainerSelector:R},o.createElement(l,{id:"menu",size:"medium",className:p.menu,focusItemIndexOnMount:0},b.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a["aria-label"]),onClick:function(o){return c(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,"aria-label":"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:q,focusNextPlaceholderRef:w,counterContainerRef:F,avatars:b,counterTooltipCustomProps:C,counterTooltipIsVirtualizedList:I,type:g},o.createElement("div",{tabIndex:-1,ref:q}),o.createElement("div",{tabIndex:D,className:n(p.counterContainer,V,_),ref:F},J(),o.createElement("div",{tabIndex:-1,ref:w}))):null};export{v as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useCallback as r}from"react";import n from"classnames";import i from"../Counter/Counter.js";import a from"../MenuButton/MenuButton.js";import l from"../Menu/Menu/Menu.js";import s from"../Menu/MenuItem/AvatarMenuItem.js";import u from"./AvatarGroupCounterTooltipContainer.js";import{avatarOnClick as m}from"./AvatarGroupHelper.js";import c from"./AvatarGroupCounter.module.scss.js";import{AVATAR_GROUP_COUNTER_AVATAR_SIZE as d}from"./AvatarGroupConstants.js";import{getStyle as p}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var v=function(v){var f=v.counterTooltipAvatars,b=void 0===f?[]:f,C=v.counterTooltipCustomProps,x=v.counterTooltipIsVirtualizedList,I=void 0!==x&&x,j=v.size,P=void 0===j?"medium":j,g=v.type,M=v.counterAriaLabel,A=v.disabled,E=v.counterProps||{},z=E.color,N=void 0===z?"light":z,T=E.count,h=void 0===T?b.length:T,y=E.prefix,G=void 0===y?"+":y,L=E.maxDigits,k=void 0===L?3:L,B=E.ariaLabelItemsName,H=void 0===B?"items":B,O=E.noAnimation,R=E.dialogContainerSelector,S=E.tabIndex,D=void 0===S?0:S,V=p(c,null==P?void 0:""+P),_=c[N],q=t(null),w=t(null),F=t(null),J=r((function(){return o.createElement(i,{color:N,count:h,prefix:G,maxDigits:k,"aria-label":M||"Tab for more ".concat(H),noAnimation:O,counterClassName:n(e({},c.disabled,A)),size:"xs"===P?"xs":void 0})}),[M,H,N,k,G,h,A,O]);return b.length||h?A?o.createElement("div",{ref:F,className:n(c.counterContainer,c.disabled,V,_)},J()):b.some((function(e){var o;return null===(o=e.props)||void 0===o?void 0:o.onClick}))?o.createElement(a,{component:J,zIndex:1,className:n(c.counterContainer,V,_),"aria-label":M||"".concat(h," additional ").concat(H),dialogContainerSelector:R},o.createElement(l,{id:"menu",size:"medium",className:c.menu,focusItemIndexOnMount:0},b.map((function(e,t){var r,n,i,a;return o.createElement(s,{menuItemProps:{key:(null===(r=e.props)||void 0===r?void 0:r.id)||t+"",title:(null===(i=null===(n=e.props)||void 0===n?void 0:n.tooltipProps)||void 0===i?void 0:i.content)||(null===(a=null==e?void 0:e.props)||void 0===a?void 0:a["aria-label"]),onClick:function(o){return m(o,e.props)}},avatarProps:Object.assign(Object.assign({},e.props),{customSize:d,"aria-label":"",tabIndex:-1})})})))):o.createElement(u,{focusPrevPlaceholderRef:q,focusNextPlaceholderRef:w,counterContainerRef:F,avatars:b,counterTooltipCustomProps:C,counterTooltipIsVirtualizedList:I,type:g},o.createElement("div",{tabIndex:-1,ref:q}),o.createElement("div",{tabIndex:D,className:n(c.counterContainer,V,_),ref:F},J(),o.createElement("div",{tabIndex:-1,ref:w}))):null};export{v as default};
 //# sourceMappingURL=AvatarGroupCounter.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"~~../../helpers~~/~~typesciptCssModulesHelper~~\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /*\n The list of avatars hidden behind the counter.\n /\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /\n Props for customizing the counter appearance.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props for customizing the counter tooltip.\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n The size of the counter.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the counter.\n /\n type?: AvatarType;\n /\n The label of the counter for accessibility.\n /\n counterAriaLabel?: string;\n /\n If true, the counter is disabled and non-interactive.\n /\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector,\n tabIndex: counterTabIndex = 0\n } = counterProps \|\| {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n size={size === \"xs\" ? \"xs\" : undefined}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id \|\| String(index),\n title: (avatar.props?.tooltipProps?.content as string) \|\| avatar?.props?.[\"aria-label\"],\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n \"aria-label\": \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/ eslint-disable jsx-a11y/no-noninteractive-tabindex /}\n <div\n tabIndex={counterTabIndex}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/ eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"~~unBAoDA~~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"}
1	+ {"version":3,"file":"AvatarGroupCounter.js","sources":["../../../../src/components/AvatarGroup/AvatarGroupCounter.tsx"],"sourcesContent":["import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n /*\n The list of avatars hidden behind the counter.\n /\n counterTooltipAvatars?: ReactElement<AvatarProps>[];\n /\n Props for customizing the counter appearance.\n /\n counterProps?: AvatarGroupCounterVisualProps;\n /\n Props for customizing the counter tooltip.\n /\n counterTooltipCustomProps?: Partial<TooltipProps>;\n /\n If true, the counter tooltip uses a virtualized list for performance optimization.\n /\n counterTooltipIsVirtualizedList?: boolean;\n /\n The size of the counter.\n /\n size?: AvatarSize;\n /\n The type of the avatars in the counter.\n /\n type?: AvatarType;\n /\n The label of the counter for accessibility.\n /\n counterAriaLabel?: string;\n /\n If true, the counter is disabled and non-interactive.\n /\n disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n counterTooltipAvatars = [],\n counterProps,\n counterTooltipCustomProps,\n counterTooltipIsVirtualizedList = false,\n size = \"medium\",\n type,\n counterAriaLabel,\n disabled\n}: AvatarGroupCounterProps) => {\n const {\n color: counterColor = \"light\",\n count: counterValue = counterTooltipAvatars.length,\n prefix: counterPrefix = \"+\",\n maxDigits: counterMaxDigits = 3,\n ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n noAnimation,\n dialogContainerSelector,\n tabIndex: counterTabIndex = 0\n } = counterProps \|\| {};\n\n const counterSizeStyle = getStyle(styles, size?.toString());\n const counterColorStyle = styles[counterColor];\n\n const focusPrevPlaceholderRef = useRef(null);\n const focusNextPlaceholderRef = useRef(null);\n const counterContainerRef = useRef(null);\n const counterComponent = useCallback(() => {\n return (\n <Counter\n color={counterColor}\n count={counterValue}\n prefix={counterPrefix}\n maxDigits={counterMaxDigits}\n aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n noAnimation={noAnimation}\n counterClassName={cx({ [styles.disabled]: disabled })}\n size={size === \"xs\" ? \"xs\" : undefined}\n />\n );\n }, [\n counterAriaLabel,\n counterAriaLabelItemsName,\n counterColor,\n counterMaxDigits,\n counterPrefix,\n counterValue,\n disabled,\n noAnimation\n ]);\n\n if (!counterTooltipAvatars.length && !counterValue) {\n return null;\n }\n\n if (disabled) {\n return (\n <div\n ref={counterContainerRef}\n className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n >\n {counterComponent()}\n </div>\n );\n }\n\n const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n if (areAvatarsClickable) {\n return (\n <MenuButton\n component={counterComponent}\n zIndex={1}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n dialogContainerSelector={dialogContainerSelector}\n >\n <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n {counterTooltipAvatars.map((avatar, index) => {\n return (\n // eslint-disable-next-line react/jsx-key\n <AvatarMenuItem\n menuItemProps={{\n key: avatar.props?.id \|\| String(index),\n title: (avatar.props?.tooltipProps?.content as string) \|\| avatar?.props?.[\"aria-label\"],\n onClick: (event: React.MouseEvent \| React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n }}\n avatarProps={{\n ...avatar.props,\n customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n \"aria-label\": \"\",\n tabIndex: -1\n }}\n />\n );\n })}\n </Menu>\n </MenuButton>\n );\n }\n\n return (\n <AvatarGroupCounterTooltipContainer\n focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n focusNextPlaceholderRef={focusNextPlaceholderRef}\n counterContainerRef={counterContainerRef}\n avatars={counterTooltipAvatars}\n counterTooltipCustomProps={counterTooltipCustomProps}\n counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n type={type}\n >\n <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n {/ eslint-disable jsx-a11y/no-noninteractive-tabindex /}\n <div\n tabIndex={counterTabIndex}\n className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n ref={counterContainerRef}\n >\n {/ eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n {counterComponent()}\n <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n </div>\n </AvatarGroupCounterTooltipContainer>\n );\n};\n\nexport default AvatarGroupCounter;\n"],"names":["AvatarGroupCounter","_ref","_ref$counterTooltipAv","counterTooltipAvatars","counterTooltipCustomProps","_ref$counterTooltipIs","counterTooltipIsVirtualizedList","_ref$size","size","type","counterAriaLabel","disabled","_ref2","counterProps","_ref2$color","color","counterColor","_ref2$count","count","counterValue","length","_ref2$prefix","prefix","counterPrefix","_ref2$maxDigits","maxDigits","counterMaxDigits","_ref2$ariaLabelItemsN","ariaLabelItemsName","counterAriaLabelItemsName","noAnimation","dialogContainerSelector","_ref2$tabIndex","tabIndex","counterTabIndex","counterSizeStyle","getStyle","styles","counterColorStyle","focusPrevPlaceholderRef","useRef","focusNextPlaceholderRef","counterContainerRef","counterComponent","useCallback","React","createElement","Counter","concat","counterClassName","cx","_defineProperty","undefined","ref","className","counterContainer","some","a","_a","props","onClick","MenuButton","component","zIndex","Menu","id","menu","focusItemIndexOnMount","map","avatar","index","AvatarMenuItem","menuItemProps","key","String","title","_c","_b","tooltipProps","content","_d","event","avatarOnClick","avatarProps","customSize","AVATAR_GROUP_COUNTER_AVATAR_SIZE","AvatarGroupCounterTooltipContainer","avatars"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var n={counterContainer:"counterContainer_3abd099ff3","focus-visible":"focus-visible_9df028a3eb",xs:"xs_f688ca3d7f",small:"small_d768442975",medium:"medium_77b990f09a",large:"large_e9bb801fbc",primary:"primary_63ccc39c09",dark:"dark_c1d8aa87dd",negative:"negative_4c94085aff",light:"light_6d86d05f09",disabled:"disabled_1d80041eca",menu:"menu_46fdbb1d96"};!function(n){const e="s_id-98062d6d439a_4_0_0-beta_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)}("/* stylelint-disable */\n/* stylelint-enable */\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: calc(-1 * var(--space-8));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3:focus-visible, .counterContainer_3abd099ff3.counterContainer_3abd099ff3.focus-visible_9df028a3eb { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3:focus-visible:focus-visible, .counterContainer_3abd099ff3.counterContainer_3abd099ff3:focus-visible.focus-visible_9df028a3eb, .counterContainer_3abd099ff3.counterContainer_3abd099ff3.focus-visible_9df028a3eb:focus-visible, .counterContainer_3abd099ff3.counterContainer_3abd099ff3.focus-visible_9df028a3eb.focus-visible_9df028a3eb {\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_3abd099ff3.counterContainer_3abd099ff3:focus-visible:focus:not(.focus-visible_9df028a3eb), .counterContainer_3abd099ff3.counterContainer_3abd099ff3.focus-visible_9df028a3eb:focus:not(.focus-visible_9df028a3eb) {\n  outline: none;\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.xs_f688ca3d7f {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.small_d768442975 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.medium_77b990f09a {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.large_e9bb801fbc {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--space-4);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.primary_63ccc39c09 {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.dark_c1d8aa87dd {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.negative_4c94085aff {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3.light_6d86d05f09 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_3abd099ff3.counterContainer_3abd099ff3 .disabled_1d80041eca, .counterContainer_3abd099ff3.counterContainer_3abd099ff3.disabled_1d80041eca {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_46fdbb1d96 {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_46fdbb1d96::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_46fdbb1d96::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{n as default};
+var n={counterContainer:"counterContainer_070c62a731","focus-visible":"focus-visible_2bc79fd502",xs:"xs_fce3637bcb",small:"small_81b0519e36",medium:"medium_ac3077f6b3",large:"large_b414e316cf",primary:"primary_5a4804face",dark:"dark_0bae6311b3",negative:"negative_40b4611b69",light:"light_9f71a9d2a8",disabled:"disabled_5174130d39",menu:"menu_6c24f1b901"};!function(n){const e="s_id-98062d6d439a_4_0_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)}("/* stylelint-disable */\n/* stylelint-enable */\n.counterContainer_070c62a731.counterContainer_070c62a731 {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: calc(-1 * var(--space-8));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731:focus-visible, .counterContainer_070c62a731.counterContainer_070c62a731.focus-visible_2bc79fd502 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.counterContainer_070c62a731.counterContainer_070c62a731:focus-visible:focus-visible, .counterContainer_070c62a731.counterContainer_070c62a731:focus-visible.focus-visible_2bc79fd502, .counterContainer_070c62a731.counterContainer_070c62a731.focus-visible_2bc79fd502:focus-visible, .counterContainer_070c62a731.counterContainer_070c62a731.focus-visible_2bc79fd502.focus-visible_2bc79fd502 {\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_070c62a731.counterContainer_070c62a731:focus-visible:focus:not(.focus-visible_2bc79fd502), .counterContainer_070c62a731.counterContainer_070c62a731.focus-visible_2bc79fd502:focus:not(.focus-visible_2bc79fd502) {\n  outline: none;\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.xs_fce3637bcb {\n  height: 20px;\n  min-width: 20px;\n  border-radius: 10px;\n  padding: 0 1px;\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.small_81b0519e36 {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 14px;\n  padding: 0 1px;\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.medium_ac3077f6b3 {\n  height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n  padding: 0 2px;\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.large_b414e316cf {\n  height: 50px;\n  min-width: 50px;\n  border-radius: 25px;\n  padding: 0 var(--space-4);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.primary_5a4804face {\n  color: var(--text-color-on-primary);\n  background-color: var(--primary-color);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.dark_0bae6311b3 {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.negative_40b4611b69 {\n  color: var(--text-color-on-primary);\n  background-color: var(--negative-color);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731.light_9f71a9d2a8 {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n.counterContainer_070c62a731.counterContainer_070c62a731 .disabled_5174130d39, .counterContainer_070c62a731.counterContainer_070c62a731.disabled_5174130d39 {\n  background-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n}\n.menu_6c24f1b901 {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.menu_6c24f1b901::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.menu_6c24f1b901::-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 CHANGED Viewed

@@ -1,2 +1,2 @@
-var t={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_09b4e59dbc",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_f27cf44e8f",tooltipContainer:"tooltipContainer_ac8d179684","focus-visible":"focus-visible_9df028a3eb",tooltipGridContainer:"tooltipGridContainer_3806ac16a1",scrollableContainer:"scrollableContainer_872af31d27"};!function(t){const e="s_id-886ef7c132b6_4_0_0-beta_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.tooltipAvatarItemTitle_09b4e59dbc {\n  white-space: nowrap;\n}\n.tooltipAvatarItemAvatar_f27cf44e8f {\n  flex-shrink: 0;\n}\n.tooltipContainer_ac8d179684 {\n  max-height: 300px;\n  padding-inline-end: var(--space-16);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.tooltipContainer_ac8d179684:focus, .tooltipContainer_ac8d179684:focus-visible, .tooltipContainer_ac8d179684.focus-visible_9df028a3eb { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.tooltipGridContainer_3806ac16a1 {\n  max-width: 160px;\n  padding-inline-end: 0;\n}\n.scrollableContainer_872af31d27::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_872af31d27::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}");export{t as default};
+var t={tooltipAvatarItemTitle:"tooltipAvatarItemTitle_4ca07202ab",tooltipAvatarItemAvatar:"tooltipAvatarItemAvatar_666b51864d",tooltipContainer:"tooltipContainer_c59855f2f6","focus-visible":"focus-visible_2bc79fd502",tooltipGridContainer:"tooltipGridContainer_8e4498f15c",scrollableContainer:"scrollableContainer_a370452bd9"};!function(t){const e="s_id-886ef7c132b6_4_0_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(t))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=t)}("/* stylelint-disable */\n/* stylelint-enable */\n.tooltipAvatarItemTitle_4ca07202ab {\n  white-space: nowrap;\n}\n.tooltipAvatarItemAvatar_666b51864d {\n  flex-shrink: 0;\n}\n.tooltipContainer_c59855f2f6 {\n  max-height: 300px;\n  padding-inline-end: var(--space-16);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n.tooltipContainer_c59855f2f6:focus, .tooltipContainer_c59855f2f6:focus-visible, .tooltipContainer_c59855f2f6.focus-visible_2bc79fd502 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}\n.tooltipGridContainer_8e4498f15c {\n  max-width: 160px;\n  padding-inline-end: 0;\n}\n.scrollableContainer_a370452bd9::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_a370452bd9::-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 CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={scrollableContainer:"scrollableContainer_65a0642a61",virtualizedTooltipContainer:"virtualizedTooltipContainer_0f2b8d8d12","focus-visible":"focus-visible_9df028a3eb"};!function(e){const i="s_id-21f61936150a_4_0_0-beta_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)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_65a0642a61::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_65a0642a61::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_0f2b8d8d12 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_0f2b8d8d12:focus, .virtualizedTooltipContainer_0f2b8d8d12:focus-visible, .virtualizedTooltipContainer_0f2b8d8d12.focus-visible_9df028a3eb { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}");export{e as default};
+var e={scrollableContainer:"scrollableContainer_7e19e8abfb",virtualizedTooltipContainer:"virtualizedTooltipContainer_848b5f2481","focus-visible":"focus-visible_2bc79fd502"};!function(e){const i="s_id-21f61936150a_4_0_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+i))return;const l=document.createElement("style");l.id=i,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.scrollableContainer_7e19e8abfb::-webkit-scrollbar {\n  width: 4px;\n  height: 6px;\n}\n.scrollableContainer_7e19e8abfb::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.virtualizedTooltipContainer_848b5f2481 {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n}\n.virtualizedTooltipContainer_848b5f2481:focus, .virtualizedTooltipContainer_848b5f2481:focus-visible, .virtualizedTooltipContainer_848b5f2481.focus-visible_2bc79fd502 { /* stylelint-disable-line selector-class-pattern */\n  outline: none;\n}");export{e as default};
 //# sourceMappingURL=AvatarGroupCounterTooltipContentVirtualizedList.module.scss.js.map

package/dist/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useCallback as t}from"react";import o from"../../hooks/useKeyEvent/index.js";import r from"../Avatar/Avatar.js";import i from"./AvatarGroupCounterTooltipContent.module.scss.js";import n from"../../hooks/useEventListener/index.js";import l from"../../hooks/useListenFocusTriggers/index.js";import{AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY as a,AVATAR_GROUP_COUNTER_AVATAR_SIZE as c}from"./AvatarGroupConstants.js";import{keyCodes as s}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import u from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import f from"../../../components/layout/dist/Flex/Flex.js";var m=[s.TAB],d=[s.ESCAPE];function p(e){var r=e.counterContainerRef,i=void 0===r?void 0:r,c=e.tooltipContentContainerRef,s=e.focusPrevPlaceholderRef,u=e.focusNextPlaceholderRef,f=e.isKeyboardTooltipVisible,p=e.setIsKeyboardTooltipVisible,v=t((function(){f||setTimeout((function(){return p(!0)}),a)}),[f,p]),b=t((function(){f&&p(!1)}),[f,p]);l({ref:i,onFocusByKeyboard:v}),n({eventName:"blur",ref:c,callback:b}),o({keys:m,ref:i,withoutAnyModifier:!0,preventDefault:!0,callback:t((function(){f&&(null==c?void 0:c.current)&&c.current.focus()}),[f,c])}),o({keys:m,modifier:o.modifiers.SHIFT,ref:i,callback:b}),o({keys:m,ref:c,withoutAnyModifier:!0,callback:t((function(){(null==u?void 0:u.current)&&u.current.focus(),f&&p(!1)}),[u,f,p])}),o({keys:m,ref:c,modifier:o.modifiers.SHIFT,callback:t((function(){(null==s?void 0:s.current)&&s.current.focus(),f&&p(!1)}),[s,f,p])}),o({keys:d,ref:c,callback:t((function(){(null==i?void 0:i.current)&&i.current.focus(),f&&p(!1)}),[i,f,p])}),o({keys:d,ref:i,callback:b}),n({eventName:"focus",ref:u,callback:b})}var v=function(t,o,n,l,a){var s=t.value,m=Object.assign(Object.assign({},n),{width:a?void 0:"100%"}),d="tooltip-item-".concat(o,"-label");return e.createElement(u,{key:o,isClickable:!!(null==s?void 0:s.onClick),clickableProps:{onClick:function(e){return s.onClick(e,s.id)},tabIndex:-1}},e.createElement("div",{style:m},e.createElement(f,{direction:"row",gap:"xs","aria-labelledby":d},e.createElement(r,Object.assign({},s,{tooltipProps:void 0,"aria-label":"",customSize:c,type:l||(null==s?void 0:s.type),tabIndex:-1,size:"small",className:i.tooltipAvatarItemAvatar})),!a&&e.createElement("div",{id:d,className:i.tooltipAvatarItemTitle},s.tooltipContent))))};export{v as avatarRenderer,p as useTooltipContentTabNavigation};
+import e,{useCallback as t}from"react";import o from"../Avatar/Avatar.js";import r from"./AvatarGroupCounterTooltipContent.module.scss.js";import i from"../../hooks/useListenFocusTriggers/index.js";import{AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY as n,AVATAR_GROUP_COUNTER_AVATAR_SIZE as a}from"./AvatarGroupConstants.js";import{keyCodes as l}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import s from"../../../components/clickable/dist/Clickable/ClickableWrapper.js";import c from"../../../components/layout/dist/Flex/Flex.js";import{useEventListener as u}from"../../../shared/dist/hooks/useEventListener.js";import{useKeyEvent as f}from"../../../shared/dist/hooks/useKeyEvent.js";var m=[l.TAB],d=[l.ESCAPE];function p(e){var o=e.counterContainerRef,r=void 0===o?void 0:o,a=e.tooltipContentContainerRef,l=e.focusPrevPlaceholderRef,s=e.focusNextPlaceholderRef,c=e.isKeyboardTooltipVisible,p=e.setIsKeyboardTooltipVisible,v=t((function(){c||setTimeout((function(){return p(!0)}),n)}),[c,p]),b=t((function(){c&&p(!1)}),[c,p]);i({ref:r,onFocusByKeyboard:v}),u({eventName:"blur",ref:a,callback:b}),f({keys:m,ref:r,withoutAnyModifier:!0,preventDefault:!0,callback:t((function(){c&&(null==a?void 0:a.current)&&a.current.focus()}),[c,a])}),f({keys:m,modifier:f.modifiers.SHIFT,ref:r,callback:b}),f({keys:m,ref:a,withoutAnyModifier:!0,callback:t((function(){(null==s?void 0:s.current)&&s.current.focus(),c&&p(!1)}),[s,c,p])}),f({keys:m,ref:a,modifier:f.modifiers.SHIFT,callback:t((function(){(null==l?void 0:l.current)&&l.current.focus(),c&&p(!1)}),[l,c,p])}),f({keys:d,ref:a,callback:t((function(){(null==r?void 0:r.current)&&r.current.focus(),c&&p(!1)}),[r,c,p])}),f({keys:d,ref:r,callback:b}),u({eventName:"focus",ref:s,callback:b})}var v=function(t,i,n,l,u){var f=t.value,m=Object.assign(Object.assign({},n),{width:u?void 0:"100%"}),d="tooltip-item-".concat(i,"-label");return e.createElement(s,{key:i,isClickable:!!(null==f?void 0:f.onClick),clickableProps:{onClick:function(e){return f.onClick(e,f.id)},tabIndex:-1}},e.createElement("div",{style:m},e.createElement(c,{direction:"row",gap:"xs","aria-labelledby":d},e.createElement(o,Object.assign({},f,{tooltipProps:void 0,"aria-label":"",customSize:a,type:l||(null==f?void 0:f.type),tabIndex:-1,size:"small",className:r.tooltipAvatarItemAvatar})),!u&&e.createElement("div",{id:d,className:r.tooltipAvatarItemTitle},f.tooltipContent))))};export{v as avatarRenderer,p as useTooltipContentTabNavigation};
 //# sourceMappingURL=AvatarGroupCounterTooltipHelper.js.map