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

package/dist/src/components/EmptyState/EmptyState.js

@@ -1,2 +1,2 @@
-import{typeof as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import i,{forwardRef as n}from"react";import r from"classnames";import s from"./EmptyState.module.scss.js";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as m}from"../../tests/testIds.js";import l from"../Link/Link.js";import{ComponentVibeId as c}from"../../tests/constants.js";import p from"../../../components/layout/dist/Flex/Flex.js";import u from"../../../components/typography/dist/Heading/Heading.js";import d from"../../../components/typography/dist/Text/Text.js";import f from"../../../components/button/dist/Button/Button.js";var g=n((function(n,g){var j=n.className,x=n.title,y=n.description,E=n.visual,b=n.mainAction,v=n.supportingAction,T=n.layout,h=void 0===T?"default":T,N=n.id,_=n["data-testid"],k="compact"===h;return i.createElement(p,{direction:"column",align:"center",justify:"center",gap:k?"small":"medium",className:r(s.emptyState,a(s,h),j),id:N,"data-testid":_||o(m.EMPTY_STATE,N),"data-vibe":c.EMPTY_STATE,ref:g},!!E&&E,i.createElement(p,{direction:"column",align:"center",gap:k?12:"medium",className:s.content},i.createElement(p,{direction:"column",align:"center",gap:"xs"},x&&i.createElement(u,{type:"h3",weight:"normal",className:s.title,align:"center",ellipsis:!1},x),"string"==typeof y?i.createElement(d,{className:s.description,align:"center",ellipsis:!1},y):y),(b||v)&&i.createElement(p,{direction:"column",align:"center",gap:"small",className:s.actions},function(e,n){if("object"===t(e)&&"text"in e)return i.createElement(f,Object.assign({kind:"secondary",size:n?"small":"medium"},e),e.text);return e}(b,k),function(n,r){if("object"===t(n)){if("text"in n&&"href"in n){var s=n.text,a=e(n,["text"]);return i.createElement(l,Object.assign({text:s},a))}if("text"in n){var o=n.text,m=e(n,["text"]);return i.createElement(f,Object.assign({kind:"tertiary",size:r?"small":"medium"},m),o)}}return n}(v,k))))}));export{g as default};
+import{typeof as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import i,{forwardRef as s}from"react";import n from"classnames";import r from"./EmptyState.module.scss.js";import{getTestId as a,ComponentDefaultTestId as o}from"../../tests/testIds.js";import m from"../Link/Link.js";import{ComponentVibeId as l}from"../../tests/constants.js";import c from"../../../components/layout/dist/Flex/Flex.js";import p from"../../../components/typography/dist/Heading/Heading.js";import d from"../../../components/typography/dist/Text/Text.js";import u from"../../../components/button/dist/Button/Button.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var g=s((function(s,g){var j=s.className,x=s.title,y=s.description,E=s.visual,b=s.mainAction,v=s.supportingAction,T=s.layout,h=void 0===T?"default":T,N=s.id,_=s["data-testid"],k="compact"===h;return i.createElement(c,{direction:"column",align:"center",justify:"center",gap:k?"small":"medium",className:n(r.emptyState,f(r,h),j),id:N,"data-testid":_||a(o.EMPTY_STATE,N),"data-vibe":l.EMPTY_STATE,ref:g},!!E&&E,i.createElement(c,{direction:"column",align:"center",gap:k?12:"medium",className:r.content},i.createElement(c,{direction:"column",align:"center",gap:"xs"},x&&i.createElement(p,{type:"h3",weight:"normal",className:r.title,align:"center",ellipsis:!1},x),"string"==typeof y?i.createElement(d,{className:r.description,align:"center",ellipsis:!1},y):y),(b||v)&&i.createElement(c,{direction:"column",align:"center",gap:"small",className:r.actions},function(e,s){if("object"===t(e)&&"text"in e)return i.createElement(u,Object.assign({kind:"secondary",size:s?"small":"medium"},e),e.text);return e}(b,k),function(s,n){if("object"===t(s)){if("text"in s&&"href"in s){var r=s.text,a=e(s,["text"]);return i.createElement(m,Object.assign({text:r},a))}if("text"in s){var o=s.text,l=e(s,["text"]);return i.createElement(u,Object.assign({kind:"tertiary",size:n?"small":"medium"},l),o)}}return s}(v,k))))}));export{g as default};
 //# sourceMappingURL=EmptyState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Flex } from \"@vibe/layout\";\nimport { Heading, Text } from \"@vibe/typography\";\nimport { type EmptyStateProps } from \"./EmptyState.types\";\nimport styles from \"./EmptyState.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Link, type LinkProps } from \"../Link\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      visual,\n      mainAction,\n      supportingAction,\n      layout = \"default\",\n      id,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const isCompact = layout === \"compact\";\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"center\"\n        justify=\"center\"\n        gap={isCompact ? \"small\" : \"medium\"}\n        className={cx(styles.emptyState, getStyle(styles, layout), className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EMPTY_STATE, id)}\n        data-vibe={ComponentVibeId.EMPTY_STATE}\n        ref={ref}\n      >\n        {!!visual && visual}\n\n        <Flex direction=\"column\" align=\"center\" gap={isCompact ? 12 : \"medium\"} className={styles.content}>\n          <Flex direction=\"column\" align=\"center\" gap=\"xs\">\n            {title && (\n              <Heading type=\"h3\" weight=\"normal\" className={styles.title} align=\"center\" ellipsis={false}>\n                {title}\n              </Heading>\n            )}\n\n            {typeof description === \"string\" ? (\n              <Text className={styles.description} align=\"center\" ellipsis={false}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n\n          {(mainAction || supportingAction) && (\n            <Flex direction=\"column\" align=\"center\" gap=\"small\" className={styles.actions}>\n              {renderMainAction(mainAction, isCompact)}\n              {renderSupportingAction(supportingAction, isCompact)}\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nfunction renderMainAction(mainAction: EmptyStateProps[\"mainAction\"], isCompact: boolean) {\n  if (typeof mainAction === \"object\" && \"text\" in mainAction) {\n    return (\n      <Button kind=\"secondary\" size={isCompact ? \"small\" : \"medium\"} {...mainAction}>\n        {mainAction.text}\n      </Button>\n    );\n  }\n\n  return mainAction;\n}\n\nfunction renderSupportingAction(supportingAction: EmptyStateProps[\"supportingAction\"], isCompact: boolean) {\n  if (typeof supportingAction === \"object\") {\n    if (\"text\" in supportingAction && \"href\" in supportingAction) {\n      const { text, ...linkProps } = supportingAction as LinkProps & { text: string };\n      return <Link text={text} {...linkProps} />;\n    }\n    if (\"text\" in supportingAction) {\n      const { text, ...buttonProps } = supportingAction as ButtonProps & { text: string };\n      return (\n        <Button kind=\"tertiary\" size={isCompact ? \"small\" : \"medium\"} {...buttonProps}>\n          {text}\n        </Button>\n      );\n    }\n  }\n\n  return supportingAction;\n}\n\nexport default EmptyState;\n"],"names":["EmptyState","forwardRef","_ref","ref","className","title","description","visual","mainAction","supportingAction","_ref$layout","layout","id","dataTestId","isCompact","React","createElement","Flex","direction","align","justify","gap","cx","styles","emptyState","getStyle","getTestId","ComponentDefaultTestId","EMPTY_STATE","ComponentVibeId","content","Heading","type","weight","ellipsis","Text","actions","_typeof","Button","Object","assign","kind","size","text","renderMainAction","linkProps","__rest","Link","buttonProps","renderSupportingAction"],"mappings":"ytBAYMA,IAAAA,EAAaC,GACjB,SAAAC,EAYEC,GACE,IAXAC,EAASF,EAATE,UACAC,EAAKH,EAALG,MACAC,EAAWJ,EAAXI,YACAC,EAAML,EAANK,OACAC,EAAUN,EAAVM,WACAC,EAAgBP,EAAhBO,iBAAgBC,EAAAR,EAChBS,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAClBE,EAAEV,EAAFU,GACeC,EAAUX,EAAzB,eAIIY,EAAuB,YAAXH,EAElB,OACEI,EAAAC,cAACC,EAAI,CACHC,UAAU,SACVC,MAAM,SACNC,QAAQ,SACRC,IAAKP,EAAY,QAAU,SAC3BV,UAAWkB,EAAGC,EAAOC,WAAYC,EAASF,EAAQZ,GAASP,GAC3DQ,GAAIA,EACS,cAAAC,GAAca,EAAUC,EAAuBC,YAAahB,GAC9D,YAAAiB,EAAgBD,YAC3BzB,IAAKA,KAEFI,GAAUA,EAEbQ,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAKP,EAAY,GAAK,SAAUV,UAAWmB,EAAOO,SACxFf,EAAAC,cAACC,EAAI,CAACC,UAAU,SAASC,MAAM,SAASE,IAAI,MACzChB,GACCU,EAACC,cAAAe,EAAQ,CAAAC,KAAK,KAAKC,OAAO,SAAS7B,UAAWmB,EAAOlB,MAAOc,MAAM,SAASe,UAAU,GAClF7B,GAImB,iBAAhBC,EACNS,EAACC,cAAAmB,EAAK,CAAA/B,UAAWmB,EAAOjB,YAAaa,MAAM,SAASe,UAAU,GAC3D5B,GAGHA,IAIFE,GAAcC,IACdM,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAI,QAAQjB,UAAWmB,EAAOa,SAWlF,SAA0B5B,EAA2CM,GACnE,GAA0B,WAAtBuB,EAAO7B,IAA2B,SAAUA,EAC9C,OACEO,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,YAAYC,KAAM5B,EAAY,QAAU,UAAcN,GAChEA,EAAWmC,MAKlB,OAAOnC,CACT,CApBeoC,CAAiBpC,EAAYM,GAsB5C,SAAgCL,EAAuDK,GACrF,GAAgC,WAA5BuB,EAAO5B,GAA+B,CACxC,GAAI,SAAUA,GAAoB,SAAUA,EAAkB,CACtD,IAAEkC,EAAuBlC,EAAvBkC,KAASE,EAASC,EAAKrC,EAAzB,CAAsB,SAC5B,OAAOM,EAAAC,cAAC+B,EAAKR,OAAAC,OAAA,CAAAG,KAAMA,GAAUE,GAC/B,CACA,GAAI,SAAUpC,EAAkB,CACxB,IAAEkC,EAAyBlC,EAAzBkC,KAASK,EAAWF,EAAKrC,EAA3B,CAAwB,SAC9B,OACEM,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,WAAWC,KAAM5B,EAAY,QAAU,UAAckC,GAC/DL,EAGP,CACF,CAEA,OAAOlC,CACT,CAtCewC,CAAuBxC,EAAkBK,KAMtD"}
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Flex } from \"@vibe/layout\";\nimport { Heading, Text } from \"@vibe/typography\";\nimport { type EmptyStateProps } from \"./EmptyState.types\";\nimport styles from \"./EmptyState.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Link, type LinkProps } from \"../Link\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      visual,\n      mainAction,\n      supportingAction,\n      layout = \"default\",\n      id,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const isCompact = layout === \"compact\";\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"center\"\n        justify=\"center\"\n        gap={isCompact ? \"small\" : \"medium\"}\n        className={cx(styles.emptyState, getStyle(styles, layout), className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EMPTY_STATE, id)}\n        data-vibe={ComponentVibeId.EMPTY_STATE}\n        ref={ref}\n      >\n        {!!visual && visual}\n\n        <Flex direction=\"column\" align=\"center\" gap={isCompact ? 12 : \"medium\"} className={styles.content}>\n          <Flex direction=\"column\" align=\"center\" gap=\"xs\">\n            {title && (\n              <Heading type=\"h3\" weight=\"normal\" className={styles.title} align=\"center\" ellipsis={false}>\n                {title}\n              </Heading>\n            )}\n\n            {typeof description === \"string\" ? (\n              <Text className={styles.description} align=\"center\" ellipsis={false}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n\n          {(mainAction || supportingAction) && (\n            <Flex direction=\"column\" align=\"center\" gap=\"small\" className={styles.actions}>\n              {renderMainAction(mainAction, isCompact)}\n              {renderSupportingAction(supportingAction, isCompact)}\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nfunction renderMainAction(mainAction: EmptyStateProps[\"mainAction\"], isCompact: boolean) {\n  if (typeof mainAction === \"object\" && \"text\" in mainAction) {\n    return (\n      <Button kind=\"secondary\" size={isCompact ? \"small\" : \"medium\"} {...mainAction}>\n        {mainAction.text}\n      </Button>\n    );\n  }\n\n  return mainAction;\n}\n\nfunction renderSupportingAction(supportingAction: EmptyStateProps[\"supportingAction\"], isCompact: boolean) {\n  if (typeof supportingAction === \"object\") {\n    if (\"text\" in supportingAction && \"href\" in supportingAction) {\n      const { text, ...linkProps } = supportingAction as LinkProps & { text: string };\n      return <Link text={text} {...linkProps} />;\n    }\n    if (\"text\" in supportingAction) {\n      const { text, ...buttonProps } = supportingAction as ButtonProps & { text: string };\n      return (\n        <Button kind=\"tertiary\" size={isCompact ? \"small\" : \"medium\"} {...buttonProps}>\n          {text}\n        </Button>\n      );\n    }\n  }\n\n  return supportingAction;\n}\n\nexport default EmptyState;\n"],"names":["EmptyState","forwardRef","_ref","ref","className","title","description","visual","mainAction","supportingAction","_ref$layout","layout","id","dataTestId","isCompact","React","createElement","Flex","direction","align","justify","gap","cx","styles","emptyState","getStyle","getTestId","ComponentDefaultTestId","EMPTY_STATE","ComponentVibeId","content","Heading","type","weight","ellipsis","Text","actions","_typeof","Button","Object","assign","kind","size","text","renderMainAction","linkProps","__rest","Link","buttonProps","renderSupportingAction"],"mappings":"suBAYMA,IAAAA,EAAaC,GACjB,SAAAC,EAYEC,GACE,IAXAC,EAASF,EAATE,UACAC,EAAKH,EAALG,MACAC,EAAWJ,EAAXI,YACAC,EAAML,EAANK,OACAC,EAAUN,EAAVM,WACAC,EAAgBP,EAAhBO,iBAAgBC,EAAAR,EAChBS,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAClBE,EAAEV,EAAFU,GACeC,EAAUX,EAAzB,eAIIY,EAAuB,YAAXH,EAElB,OACEI,EAAAC,cAACC,EAAI,CACHC,UAAU,SACVC,MAAM,SACNC,QAAQ,SACRC,IAAKP,EAAY,QAAU,SAC3BV,UAAWkB,EAAGC,EAAOC,WAAYC,EAASF,EAAQZ,GAASP,GAC3DQ,GAAIA,EACS,cAAAC,GAAca,EAAUC,EAAuBC,YAAahB,GAC9D,YAAAiB,EAAgBD,YAC3BzB,IAAKA,KAEFI,GAAUA,EAEbQ,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAKP,EAAY,GAAK,SAAUV,UAAWmB,EAAOO,SACxFf,EAAAC,cAACC,EAAI,CAACC,UAAU,SAASC,MAAM,SAASE,IAAI,MACzChB,GACCU,EAACC,cAAAe,EAAQ,CAAAC,KAAK,KAAKC,OAAO,SAAS7B,UAAWmB,EAAOlB,MAAOc,MAAM,SAASe,UAAU,GAClF7B,GAImB,iBAAhBC,EACNS,EAACC,cAAAmB,EAAK,CAAA/B,UAAWmB,EAAOjB,YAAaa,MAAM,SAASe,UAAU,GAC3D5B,GAGHA,IAIFE,GAAcC,IACdM,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAI,QAAQjB,UAAWmB,EAAOa,SAWlF,SAA0B5B,EAA2CM,GACnE,GAA0B,WAAtBuB,EAAO7B,IAA2B,SAAUA,EAC9C,OACEO,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,YAAYC,KAAM5B,EAAY,QAAU,UAAcN,GAChEA,EAAWmC,MAKlB,OAAOnC,CACT,CApBeoC,CAAiBpC,EAAYM,GAsB5C,SAAgCL,EAAuDK,GACrF,GAAgC,WAA5BuB,EAAO5B,GAA+B,CACxC,GAAI,SAAUA,GAAoB,SAAUA,EAAkB,CACtD,IAAEkC,EAAuBlC,EAAvBkC,KAASE,EAASC,EAAKrC,EAAzB,CAAsB,SAC5B,OAAOM,EAAAC,cAAC+B,EAAKR,OAAAC,OAAA,CAAAG,KAAMA,GAAUE,GAC/B,CACA,GAAI,SAAUpC,EAAkB,CACxB,IAAEkC,EAAyBlC,EAAzBkC,KAASK,EAAWF,EAAKrC,EAA3B,CAAwB,SAC9B,OACEM,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,WAAWC,KAAM5B,EAAY,QAAU,UAAckC,GAC/DL,EAGP,CACF,CAEA,OAAOlC,CACT,CAtCewC,CAAuBxC,EAAkBK,KAMtD"}

package/dist/src/components/ExpandCollapse/ExpandCollapse.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import n,{forwardRef as r,useRef as a,useState as i,useCallback as s}from"react";import c from"../../hooks/useMergeRef.js";import{getTestId as l,ComponentDefaultTestId as d}from"../../tests/testIds.js";import m from"./ExpandCollapse.module.scss.js";import{ComponentVibeId as p}from"../../tests/constants.js";import f from"../../../components/typography/dist/Text/Text.js";import u from"../../../components/icon/dist/Icon/Icon.js";import v from"../../../icons/dist/react/DropdownChevronDown.js";var C=r((function(r,C){var h=r.children,E=r.headerComponentRenderer,N=void 0===E?null:E,g=r.title,y=void 0===g?"":g,j=r.className,x=r.defaultOpenState,P=void 0!==x&&x,B=r.iconSize,I=void 0===B?24:B,O=r.iconPosition,k=void 0===O?"right":O,A=r.id,b=void 0===A?"":A,D=r.open,L=r.onClick,S=void 0===L?null:L,_=r.hideBorder,w=void 0!==_&&_,T=r.headerClassName,z=r.contentClassName,R=r.componentClassName,X=r["data-testid"],H=r.captureOnClick,M=void 0===H||H,q=a(null),F=c(C,q),G=i(P),J=e(G,2),K=J[0],Q=J[1],U=void 0===D?K:D,V=function(){Q(!K)},W=s((function(){return"string"==typeof y?n.createElement(f,{type:"text1",className:o(m.headerContent)},y):y}),[y]),Y=function(){return n.createElement(u,{className:o(m.iconComponent,t(t({},m.animateIconOpen,U),m.animateIconClose,!U)),type:"svg",icon:v,size:I})};return n.createElement("div",{ref:F,className:j,id:b,"data-testid":X||l(d.EXPAND_COLLAPSE,b),"data-vibe":p.EXPAND_COLLAPSE},n.createElement("div",{className:o(m.expandCollapse,t(t({},m.hideBorder,w),m.showBorder,!w),R)},n.createElement("button",{type:"button",className:o(m.header,m.section,T,t(t(t({},m.headerOpen,U),m.hideBorderBottom,w),m.leftIcon,"left"===k)),onClickCapture:M?S||V:void 0,onClick:M?void 0:S||V,"aria-expanded":U,"aria-controls":"".concat(b,"-controls")},"left"===k&&Y(),"string"!=typeof y||0!==y.length?W():N&&N(),"right"===k&&Y()),U&&n.createElement("div",{className:o(m.content,m.section,z,t({},m.animateExpandCollapseContent,U)),id:"".concat(b,"-controls"),role:"region"},h)))}));export{C as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import n,{forwardRef as r,useRef as a,useState as i,useCallback as s}from"react";import{getTestId as c,ComponentDefaultTestId as d}from"../../tests/testIds.js";import l from"./ExpandCollapse.module.scss.js";import{ComponentVibeId as m}from"../../tests/constants.js";import p from"../../../components/typography/dist/Text/Text.js";import f from"../../../components/icon/dist/Icon/Icon.js";import u from"../../../icons/dist/react/DropdownChevronDown.js";import{useMergeRef as v}from"../../../shared/dist/hooks/useMergeRef.js";var C=r((function(r,C){var h=r.children,E=r.headerComponentRenderer,N=void 0===E?null:E,g=r.title,y=void 0===g?"":g,j=r.className,x=r.defaultOpenState,P=void 0!==x&&x,B=r.iconSize,I=void 0===B?24:B,O=r.iconPosition,k=void 0===O?"right":O,A=r.id,b=void 0===A?"":A,D=r.open,L=r.onClick,S=void 0===L?null:L,_=r.hideBorder,w=void 0!==_&&_,T=r.headerClassName,z=r.contentClassName,R=r.componentClassName,X=r["data-testid"],H=r.captureOnClick,M=void 0===H||H,q=a(null),F=v(C,q),G=i(P),J=e(G,2),K=J[0],Q=J[1],U=void 0===D?K:D,V=function(){Q(!K)},W=s((function(){return"string"==typeof y?n.createElement(p,{type:"text1",className:o(l.headerContent)},y):y}),[y]),Y=function(){return n.createElement(f,{className:o(l.iconComponent,t(t({},l.animateIconOpen,U),l.animateIconClose,!U)),type:"svg",icon:u,size:I})};return n.createElement("div",{ref:F,className:j,id:b,"data-testid":X||c(d.EXPAND_COLLAPSE,b),"data-vibe":m.EXPAND_COLLAPSE},n.createElement("div",{className:o(l.expandCollapse,t(t({},l.hideBorder,w),l.showBorder,!w),R)},n.createElement("button",{type:"button",className:o(l.header,l.section,T,t(t(t({},l.headerOpen,U),l.hideBorderBottom,w),l.leftIcon,"left"===k)),onClickCapture:M?S||V:void 0,onClick:M?void 0:S||V,"aria-expanded":U,"aria-controls":"".concat(b,"-controls")},"left"===k&&Y(),"string"!=typeof y||0!==y.length?W():N&&N(),"right"===k&&Y()),U&&n.createElement("div",{className:o(l.content,l.section,z,t({},l.animateExpandCollapseContent,U)),id:"".concat(b,"-controls"),role:"region"},h)))}));export{C as default};
 //# sourceMappingURL=ExpandCollapse.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.js","sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useCallback, useRef, useState } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Icon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ExpandCollapse.module.scss\";\nimport { type ExpandCollapseIconPosition } from \"./ExpandCollapse.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ExpandCollapseProps extends VibeComponentProps {\n  /**\n   * Custom renderer for the header component.\n   */\n  headerComponentRenderer?: () => ReactElement;\n  /**\n   * Class name applied to the header.\n   */\n  headerClassName?: string;\n  /**\n   * Class name applied to the content.\n   */\n  contentClassName?: string;\n  /**\n   * Class name applied to the root component.\n   */\n  componentClassName?: string;\n  /**\n   * The title displayed in the header.\n   */\n  title?: ElementContent;\n  /**\n   * The content inside the expandable section.\n   */\n  children?: ElementContent;\n  /**\n   * The size of the expand/collapse icon.\n   */\n  iconSize?: number | string;\n  /**\n   * The position of the icon.\n   */\n  iconPosition?: ExpandCollapseIconPosition;\n  /**\n   * If true, the section is open by default when rendered.\n   */\n  defaultOpenState?: boolean;\n  /**\n   * Controls the open state of the section.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the header is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * If true, hides the border around the component.\n   */\n  hideBorder?: boolean;\n  /**\n   * If true, captures the click event on the button.\n   */\n  captureOnClick?: boolean;\n}\n\nconst ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(\n  (\n    {\n      children,\n      headerComponentRenderer = null,\n      title = \"\",\n      className,\n      defaultOpenState = false,\n      iconSize = 24,\n      iconPosition = \"right\",\n      id = \"\",\n      open,\n      onClick = null,\n      hideBorder = false,\n      headerClassName,\n      contentClassName,\n      componentClassName,\n      \"data-testid\": dataTestId,\n      captureOnClick = true\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(defaultOpenState);\n    const isExpanded = open === undefined ? isOpen : open;\n\n    const toggleExpand = () => {\n      setIsOpen(!isOpen);\n    };\n    const renderHeader = useCallback(() => {\n      return typeof title === \"string\" ? (\n        <Text type=\"text1\" className={cx(styles.headerContent)}>\n          {title}\n        </Text>\n      ) : (\n        title\n      );\n    }, [title]);\n\n    const renderIcon = () => (\n      <Icon\n        className={cx(styles.iconComponent, {\n          [styles.animateIconOpen]: isExpanded,\n          [styles.animateIconClose]: !isExpanded\n        })}\n        type=\"svg\"\n        icon={DropdownChevronDown}\n        size={iconSize}\n      />\n    );\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EXPAND_COLLAPSE, id)}\n        data-vibe={ComponentVibeId.EXPAND_COLLAPSE}\n      >\n        <div\n          className={cx(\n            styles.expandCollapse,\n            {\n              [styles.hideBorder]: hideBorder,\n              [styles.showBorder]: !hideBorder\n            },\n            componentClassName\n          )}\n        >\n          <button\n            type=\"button\"\n            className={cx(styles.header, styles.section, headerClassName, {\n              [styles.headerOpen]: isExpanded,\n              [styles.hideBorderBottom]: hideBorder,\n              [styles.leftIcon]: iconPosition === \"left\"\n            })}\n            onClickCapture={captureOnClick ? onClick || toggleExpand : undefined}\n            onClick={!captureOnClick ? onClick || toggleExpand : undefined}\n            aria-expanded={isExpanded}\n            aria-controls={`${id}-controls`}\n          >\n            {iconPosition === \"left\" && renderIcon()}\n            {typeof title !== \"string\" || title.length !== 0\n              ? renderHeader()\n              : headerComponentRenderer && headerComponentRenderer()}\n            {iconPosition === \"right\" && renderIcon()}\n          </button>\n          {isExpanded && (\n            <div\n              className={cx(styles.content, styles.section, contentClassName, {\n                [styles.animateExpandCollapseContent]: isExpanded\n              })}\n              id={`${id}-controls`}\n              role=\"region\"\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"],"names":["ExpandCollapse","forwardRef","_ref","ref","children","_ref$headerComponentR","headerComponentRenderer","_ref$title","title","className","_ref$defaultOpenState","defaultOpenState","_ref$iconSize","iconSize","_ref$iconPosition","iconPosition","_ref$id","id","open","_ref$onClick","onClick","_ref$hideBorder","hideBorder","headerClassName","contentClassName","componentClassName","dataTestId","_ref$captureOnClick","captureOnClick","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isExpanded","undefined","toggleExpand","renderHeader","useCallback","React","createElement","Text","type","cx","styles","headerContent","renderIcon","Icon","iconComponent","_defineProperty","animateIconOpen","animateIconClose","icon","DropdownChevronDown","size","getTestId","ComponentDefaultTestId","EXPAND_COLLAPSE","ComponentVibeId","expandCollapse","showBorder","header","section","headerOpen","hideBorderBottom","leftIcon","onClickCapture","concat","length","content","animateExpandCollapseContent","role"],"mappings":"2mBAmEMA,IAAAA,EAA0CC,GAC9C,SAAAC,EAmBEC,GACE,IAlBAC,EAAQF,EAARE,SAAQC,EAAAH,EACRI,wBAAAA,OAA0B,IAAHD,EAAG,KAAIA,EAAAE,EAAAL,EAC9BM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAASP,EAATO,UAASC,EAAAR,EACTS,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAAV,EACxBW,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EACba,aAAAA,OAAe,IAAHD,EAAG,QAAOA,EAAAE,EAAAd,EACtBe,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EACPE,EAAIhB,EAAJgB,KAAIC,EAAAjB,EACJkB,QAAAA,OAAU,IAAHD,EAAG,KAAIA,EAAAE,EAAAnB,EACdoB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAerB,EAAfqB,gBACAC,EAAgBtB,EAAhBsB,iBACAC,EAAkBvB,EAAlBuB,mBACeC,EAAUxB,EAAzB,eAAayB,EAAAzB,EACb0B,eAAAA,OAAiB,IAAHD,GAAOA,EAIjBE,EAAeC,EAAO,MACtBC,EAAYC,EAAY7B,EAAK0B,GAEnCI,EAA4BC,EAASvB,GAAiBwB,EAAAC,EAAAH,EAAA,GAA/CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAClBI,OAAsBC,IAATtB,EAAqBmB,EAASnB,EAE3CuB,EAAe,WACnBH,GAAWD,IAEPK,EAAeC,GAAY,WAC/B,MAAwB,iBAAVnC,EACZoC,EAAAC,cAACC,EAAI,CAACC,KAAK,QAAQtC,UAAWuC,EAAGC,EAAOC,gBACrC1C,GAGHA,CAEJ,GAAG,CAACA,IAEE2C,EAAa,WAAH,OACdP,EAACC,cAAAO,EACC,CAAA3C,UAAWuC,EAAGC,EAAOI,cAAaC,EAAAA,EAC/BL,CAAAA,EAAAA,EAAOM,gBAAkBhB,GACzBU,EAAOO,kBAAoBjB,IAE9BQ,KAAK,MACLU,KAAMC,EACNC,KAAM9C,KAIV,OACE+B,EACEC,cAAA,MAAA,CAAA1C,IAAK4B,EACLtB,UAAWA,EACXQ,GAAIA,EACS,cAAAS,GAAckC,EAAUC,EAAuBC,gBAAiB7C,GAAG,YACrE8C,EAAgBD,iBAE3BlB,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EACTC,EAAOe,eAAcV,EAAAA,EAElBL,GAAAA,EAAO3B,WAAaA,GACpB2B,EAAOgB,YAAc3C,GAExBG,IAGFmB,EAAAC,cAAA,SAAA,CACEE,KAAK,SACLtC,UAAWuC,EAAGC,EAAOiB,OAAQjB,EAAOkB,QAAS5C,EAAe+B,EAAAA,EAAAA,EAAA,CAAA,EACzDL,EAAOmB,WAAa7B,GACpBU,EAAOoB,iBAAmB/C,GAC1B2B,EAAOqB,SAA4B,SAAjBvD,IAErBwD,eAAgB3C,EAAiBR,GAAWqB,OAAeD,EAC3DpB,QAAUQ,OAA2CY,EAA1BpB,GAAWqB,EACvB,gBAAAF,EACA,gBAAA,GAAAiC,OAAGvD,EAAE,cAEF,SAAjBF,GAA2BoC,IACV,iBAAV3C,GAAuC,IAAjBA,EAAMiE,OAChC/B,IACApC,GAA2BA,IACb,UAAjBS,GAA4BoC,KAE9BZ,GACCK,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EAAGC,EAAOyB,QAASzB,EAAOkB,QAAS3C,EAAgB8B,EAC3DL,CAAAA,EAAAA,EAAO0B,6BAA+BpC,IAEzCtB,GAAEuD,GAAAA,OAAKvD,EAAa,aACpB2D,KAAK,UAEJxE,IAMb"}
+{"version":3,"file":"ExpandCollapse.js","sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useCallback, useRef, useState } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { Icon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ExpandCollapse.module.scss\";\nimport { type ExpandCollapseIconPosition } from \"./ExpandCollapse.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ExpandCollapseProps extends VibeComponentProps {\n  /**\n   * Custom renderer for the header component.\n   */\n  headerComponentRenderer?: () => ReactElement;\n  /**\n   * Class name applied to the header.\n   */\n  headerClassName?: string;\n  /**\n   * Class name applied to the content.\n   */\n  contentClassName?: string;\n  /**\n   * Class name applied to the root component.\n   */\n  componentClassName?: string;\n  /**\n   * The title displayed in the header.\n   */\n  title?: ElementContent;\n  /**\n   * The content inside the expandable section.\n   */\n  children?: ElementContent;\n  /**\n   * The size of the expand/collapse icon.\n   */\n  iconSize?: number | string;\n  /**\n   * The position of the icon.\n   */\n  iconPosition?: ExpandCollapseIconPosition;\n  /**\n   * If true, the section is open by default when rendered.\n   */\n  defaultOpenState?: boolean;\n  /**\n   * Controls the open state of the section.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the header is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * If true, hides the border around the component.\n   */\n  hideBorder?: boolean;\n  /**\n   * If true, captures the click event on the button.\n   */\n  captureOnClick?: boolean;\n}\n\nconst ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(\n  (\n    {\n      children,\n      headerComponentRenderer = null,\n      title = \"\",\n      className,\n      defaultOpenState = false,\n      iconSize = 24,\n      iconPosition = \"right\",\n      id = \"\",\n      open,\n      onClick = null,\n      hideBorder = false,\n      headerClassName,\n      contentClassName,\n      componentClassName,\n      \"data-testid\": dataTestId,\n      captureOnClick = true\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(defaultOpenState);\n    const isExpanded = open === undefined ? isOpen : open;\n\n    const toggleExpand = () => {\n      setIsOpen(!isOpen);\n    };\n    const renderHeader = useCallback(() => {\n      return typeof title === \"string\" ? (\n        <Text type=\"text1\" className={cx(styles.headerContent)}>\n          {title}\n        </Text>\n      ) : (\n        title\n      );\n    }, [title]);\n\n    const renderIcon = () => (\n      <Icon\n        className={cx(styles.iconComponent, {\n          [styles.animateIconOpen]: isExpanded,\n          [styles.animateIconClose]: !isExpanded\n        })}\n        type=\"svg\"\n        icon={DropdownChevronDown}\n        size={iconSize}\n      />\n    );\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EXPAND_COLLAPSE, id)}\n        data-vibe={ComponentVibeId.EXPAND_COLLAPSE}\n      >\n        <div\n          className={cx(\n            styles.expandCollapse,\n            {\n              [styles.hideBorder]: hideBorder,\n              [styles.showBorder]: !hideBorder\n            },\n            componentClassName\n          )}\n        >\n          <button\n            type=\"button\"\n            className={cx(styles.header, styles.section, headerClassName, {\n              [styles.headerOpen]: isExpanded,\n              [styles.hideBorderBottom]: hideBorder,\n              [styles.leftIcon]: iconPosition === \"left\"\n            })}\n            onClickCapture={captureOnClick ? onClick || toggleExpand : undefined}\n            onClick={!captureOnClick ? onClick || toggleExpand : undefined}\n            aria-expanded={isExpanded}\n            aria-controls={`${id}-controls`}\n          >\n            {iconPosition === \"left\" && renderIcon()}\n            {typeof title !== \"string\" || title.length !== 0\n              ? renderHeader()\n              : headerComponentRenderer && headerComponentRenderer()}\n            {iconPosition === \"right\" && renderIcon()}\n          </button>\n          {isExpanded && (\n            <div\n              className={cx(styles.content, styles.section, contentClassName, {\n                [styles.animateExpandCollapseContent]: isExpanded\n              })}\n              id={`${id}-controls`}\n              role=\"region\"\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"],"names":["ExpandCollapse","forwardRef","_ref","ref","children","_ref$headerComponentR","headerComponentRenderer","_ref$title","title","className","_ref$defaultOpenState","defaultOpenState","_ref$iconSize","iconSize","_ref$iconPosition","iconPosition","_ref$id","id","open","_ref$onClick","onClick","_ref$hideBorder","hideBorder","headerClassName","contentClassName","componentClassName","dataTestId","_ref$captureOnClick","captureOnClick","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isExpanded","undefined","toggleExpand","renderHeader","useCallback","React","createElement","Text","type","cx","styles","headerContent","renderIcon","Icon","iconComponent","_defineProperty","animateIconOpen","animateIconClose","icon","DropdownChevronDown","size","getTestId","ComponentDefaultTestId","EXPAND_COLLAPSE","ComponentVibeId","expandCollapse","showBorder","header","section","headerOpen","hideBorderBottom","leftIcon","onClickCapture","concat","length","content","animateExpandCollapseContent","role"],"mappings":"yoBAmEMA,IAAAA,EAA0CC,GAC9C,SAAAC,EAmBEC,GACE,IAlBAC,EAAQF,EAARE,SAAQC,EAAAH,EACRI,wBAAAA,OAA0B,IAAHD,EAAG,KAAIA,EAAAE,EAAAL,EAC9BM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAASP,EAATO,UAASC,EAAAR,EACTS,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAAV,EACxBW,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EACba,aAAAA,OAAe,IAAHD,EAAG,QAAOA,EAAAE,EAAAd,EACtBe,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EACPE,EAAIhB,EAAJgB,KAAIC,EAAAjB,EACJkB,QAAAA,OAAU,IAAHD,EAAG,KAAIA,EAAAE,EAAAnB,EACdoB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAerB,EAAfqB,gBACAC,EAAgBtB,EAAhBsB,iBACAC,EAAkBvB,EAAlBuB,mBACeC,EAAUxB,EAAzB,eAAayB,EAAAzB,EACb0B,eAAAA,OAAiB,IAAHD,GAAOA,EAIjBE,EAAeC,EAAO,MACtBC,EAAYC,EAAY7B,EAAK0B,GAEnCI,EAA4BC,EAASvB,GAAiBwB,EAAAC,EAAAH,EAAA,GAA/CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAClBI,OAAsBC,IAATtB,EAAqBmB,EAASnB,EAE3CuB,EAAe,WACnBH,GAAWD,IAEPK,EAAeC,GAAY,WAC/B,MAAwB,iBAAVnC,EACZoC,EAAAC,cAACC,EAAI,CAACC,KAAK,QAAQtC,UAAWuC,EAAGC,EAAOC,gBACrC1C,GAGHA,CAEJ,GAAG,CAACA,IAEE2C,EAAa,WAAH,OACdP,EAACC,cAAAO,EACC,CAAA3C,UAAWuC,EAAGC,EAAOI,cAAaC,EAAAA,EAC/BL,CAAAA,EAAAA,EAAOM,gBAAkBhB,GACzBU,EAAOO,kBAAoBjB,IAE9BQ,KAAK,MACLU,KAAMC,EACNC,KAAM9C,KAIV,OACE+B,EACEC,cAAA,MAAA,CAAA1C,IAAK4B,EACLtB,UAAWA,EACXQ,GAAIA,EACS,cAAAS,GAAckC,EAAUC,EAAuBC,gBAAiB7C,GAAG,YACrE8C,EAAgBD,iBAE3BlB,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EACTC,EAAOe,eAAcV,EAAAA,EAElBL,GAAAA,EAAO3B,WAAaA,GACpB2B,EAAOgB,YAAc3C,GAExBG,IAGFmB,EAAAC,cAAA,SAAA,CACEE,KAAK,SACLtC,UAAWuC,EAAGC,EAAOiB,OAAQjB,EAAOkB,QAAS5C,EAAe+B,EAAAA,EAAAA,EAAA,CAAA,EACzDL,EAAOmB,WAAa7B,GACpBU,EAAOoB,iBAAmB/C,GAC1B2B,EAAOqB,SAA4B,SAAjBvD,IAErBwD,eAAgB3C,EAAiBR,GAAWqB,OAAeD,EAC3DpB,QAAUQ,OAA2CY,EAA1BpB,GAAWqB,EACvB,gBAAAF,EACA,gBAAA,GAAAiC,OAAGvD,EAAE,cAEF,SAAjBF,GAA2BoC,IACV,iBAAV3C,GAAuC,IAAjBA,EAAMiE,OAChC/B,IACApC,GAA2BA,IACb,UAAjBS,GAA4BoC,KAE9BZ,GACCK,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EAAGC,EAAOyB,QAASzB,EAAOkB,QAAS3C,EAAgB8B,EAC3DL,CAAAA,EAAAA,EAAO0B,6BAA+BpC,IAEzCtB,GAAEuD,GAAAA,OAAKvD,EAAa,aACpB2D,KAAK,UAEJxE,IAMb"}

package/dist/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.js

@@ -1,2 +1,2 @@
-import n,{useMemo as o,useContext as r,useCallback as i}from"react";import e from"../../hooks/useEventListener/index.js";import{useLastNavigationDirection as t}from"../Menu/Menu/hooks/useLastNavigationDirection.js";import{getDirectionMaps as u,getOppositeDirection as a,getOutmostElementInDirection as l,getNextElementToFocusInDirection as d}from"./helper.js";var s=n.createContext(null),v=function(n,v){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{disabled:!1},f=o((function(){return u(n)}),[n]),b=r(s),m=t().lastNavigationDirectionRef,p=i((function(){var n,o=m.current;if(o&&!c.disabled){var r=a(o),i=l(f,r);null===(n=null==i?void 0:i.current)||void 0===n||n.focus()}}),[f,c.disabled,m]);return e({eventName:"focus",callback:p,ref:v}),{onOutboundNavigation:i((function(n,o){var r,i;if(!c.disabled){var e=d(f[o],n);if(e)return null===(r=n.current)||void 0===r||r.blur(),void(null===(i=e.current)||void 0===i||i.focus());null==b||b.onOutboundNavigation(v,o)}}),[f,b,v,c.disabled])}};export{s as GridKeyboardNavigationContext,v as useGridKeyboardNavigationContext};
+import n,{useMemo as r,useContext as o,useCallback as i}from"react";import{useLastNavigationDirection as e}from"../Menu/Menu/hooks/useLastNavigationDirection.js";import{getDirectionMaps as t,getOppositeDirection as u,getOutmostElementInDirection as a,getNextElementToFocusInDirection as l}from"./helper.js";import{useEventListener as d}from"../../../shared/dist/hooks/useEventListener.js";var s=n.createContext(null),v=function(n,v){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{disabled:!1},f=r((function(){return t(n)}),[n]),b=o(s),m=e().lastNavigationDirectionRef,p=i((function(){var n,r=m.current;if(r&&!c.disabled){var o=u(r),i=a(f,o);null===(n=null==i?void 0:i.current)||void 0===n||n.focus()}}),[f,c.disabled,m]);return d({eventName:"focus",callback:p,ref:v}),{onOutboundNavigation:i((function(n,r){var o,i;if(!c.disabled){var e=l(f[r],n);if(e)return null===(o=n.current)||void 0===o||o.blur(),void(null===(i=e.current)||void 0===i||i.focus());null==b||b.onOutboundNavigation(v,r)}}),[f,b,v,c.disabled])}};export{s as GridKeyboardNavigationContext,v as useGridKeyboardNavigationContext};
 //# sourceMappingURL=GridKeyboardNavigationContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GridKeyboardNavigationContext.js","sources":["../../../../src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.ts"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from \"react\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport { useLastNavigationDirection } from \"../Menu/Menu/hooks/useLastNavigationDirection\";\nimport {\n  getDirectionMaps,\n  getNextElementToFocusInDirection,\n  getOppositeDirection,\n  getOutmostElementInDirection\n} from \"./helper\";\nimport { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport {\n  type GridElementRef,\n  type GridKeyboardNavigationContextType,\n  type Position\n} from \"./GridKeyboardNavigationContextConstants\";\n\nexport const GridKeyboardNavigationContext = React.createContext<GridKeyboardNavigationContextType>(null);\n\n/**\n * @param {({topElement: MutableRefObject, bottomElement: MutableRefObject}|\n * {leftElement: MutableRefObject, rightElement: MutableRefObject})[]} positions - the positions of the navigable items\n * @param {*} wrapperRef - a reference for a wrapper element which contains all the referenced elements\n * @param options - { disabled: boolean }\n */\nexport const useGridKeyboardNavigationContext = (\n  positions: Position[],\n  wrapperRef: GridElementRef,\n  options: { disabled: boolean } = { disabled: false }\n) => {\n  const directionMaps = useMemo(() => getDirectionMaps(positions), [positions]);\n  const upperContext = useContext(GridKeyboardNavigationContext);\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n\n  const onWrapperFocus = useCallback(() => {\n    const keyboardDirection = lastNavigationDirectionRef.current;\n    if (!keyboardDirection || options.disabled) {\n      return;\n    }\n    const oppositeDirection = getOppositeDirection(keyboardDirection);\n    const refToFocus = getOutmostElementInDirection(directionMaps, oppositeDirection);\n    refToFocus?.current?.focus();\n  }, [directionMaps, options.disabled, lastNavigationDirectionRef]);\n  useEventListener({ eventName: \"focus\", callback: onWrapperFocus, ref: wrapperRef });\n\n  const onOutboundNavigation = useCallback(\n    (elementRef: GridElementRef, direction: NavDirections) => {\n      if (options.disabled) return;\n      const maybeNextElement = getNextElementToFocusInDirection(directionMaps[direction], elementRef);\n      if (maybeNextElement) {\n        elementRef.current?.blur();\n        maybeNextElement.current?.focus();\n        return;\n      }\n      // nothing on that direction - try updating the upper context\n      upperContext?.onOutboundNavigation(wrapperRef, direction);\n    },\n    [directionMaps, upperContext, wrapperRef, options.disabled]\n  );\n  return { onOutboundNavigation };\n};\n"],"names":["GridKeyboardNavigationContext","React","createContext","useGridKeyboardNavigationContext","positions","wrapperRef","options","arguments","length","undefined","disabled","directionMaps","useMemo","getDirectionMaps","upperContext","useContext","lastNavigationDirectionRef","useLastNavigationDirection","onWrapperFocus","useCallback","keyboardDirection","current","oppositeDirection","getOppositeDirection","refToFocus","getOutmostElementInDirection","_a","focus","useEventListener","eventName","callback","ref","onOutboundNavigation","elementRef","direction","maybeNextElement","getNextElementToFocusInDirection","blur","_b"],"mappings":"wWAgBO,IAAMA,EAAgCC,EAAMC,cAAiD,MAQvFC,EAAmC,SAC9CC,EACAC,GAEE,IADFC,EAAAC,UAAAC,OAAAD,QAAAE,IAAAF,UAAAE,GAAAF,UAAiC,GAAA,CAAEG,UAAU,GAEvCC,EAAgBC,GAAQ,WAAA,OAAMC,EAAiBT,KAAY,CAACA,IAC5DU,EAAeC,EAAWf,GACxBgB,EAA+BC,IAA/BD,2BAEFE,EAAiBC,GAAY,iBAC3BC,EAAoBJ,EAA2BK,QACrD,GAAKD,IAAqBd,EAAQI,SAAlC,CAGA,IAAMY,EAAoBC,EAAqBH,GACzCI,EAAaC,EAA6Bd,EAAeW,GAC5C,QAAnBI,EAAAF,aAAA,EAAAA,EAAYH,eAAO,IAAAK,GAAAA,EAAEC,OAHrB,CAID,GAAE,CAAChB,EAAeL,EAAQI,SAAUM,IAiBrC,OAhBAY,EAAiB,CAAEC,UAAW,QAASC,SAAUZ,EAAgBa,IAAK1B,IAgB/D,CAAE2B,qBAdoBb,GAC3B,SAACc,EAA4BC,WAC3B,IAAI5B,EAAQI,SAAZ,CACA,IAAMyB,EAAmBC,EAAiCzB,EAAcuB,GAAYD,GACpF,GAAIE,EAGF,OAFoB,QAApBT,EAAAO,EAAWZ,eAAS,IAAAK,GAAAA,EAAAW,YACM,QAA1BC,EAAAH,EAAiBd,eAAS,IAAAiB,GAAAA,EAAAX,SAI5Bb,SAAAA,EAAckB,qBAAqB3B,EAAY6B,EARzB,CASxB,GACA,CAACvB,EAAeG,EAAcT,EAAYC,EAAQI,WAGtD"}
+{"version":3,"file":"GridKeyboardNavigationContext.js","sources":["../../../../src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.ts"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from \"react\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport { useLastNavigationDirection } from \"../Menu/Menu/hooks/useLastNavigationDirection\";\nimport {\n  getDirectionMaps,\n  getNextElementToFocusInDirection,\n  getOppositeDirection,\n  getOutmostElementInDirection\n} from \"./helper\";\nimport { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport {\n  type GridElementRef,\n  type GridKeyboardNavigationContextType,\n  type Position\n} from \"./GridKeyboardNavigationContextConstants\";\n\nexport const GridKeyboardNavigationContext = React.createContext<GridKeyboardNavigationContextType>(null);\n\n/**\n * @param {({topElement: MutableRefObject, bottomElement: MutableRefObject}|\n * {leftElement: MutableRefObject, rightElement: MutableRefObject})[]} positions - the positions of the navigable items\n * @param {*} wrapperRef - a reference for a wrapper element which contains all the referenced elements\n * @param options - { disabled: boolean }\n */\nexport const useGridKeyboardNavigationContext = (\n  positions: Position[],\n  wrapperRef: GridElementRef,\n  options: { disabled: boolean } = { disabled: false }\n) => {\n  const directionMaps = useMemo(() => getDirectionMaps(positions), [positions]);\n  const upperContext = useContext(GridKeyboardNavigationContext);\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n\n  const onWrapperFocus = useCallback(() => {\n    const keyboardDirection = lastNavigationDirectionRef.current;\n    if (!keyboardDirection || options.disabled) {\n      return;\n    }\n    const oppositeDirection = getOppositeDirection(keyboardDirection);\n    const refToFocus = getOutmostElementInDirection(directionMaps, oppositeDirection);\n    refToFocus?.current?.focus();\n  }, [directionMaps, options.disabled, lastNavigationDirectionRef]);\n  useEventListener({ eventName: \"focus\", callback: onWrapperFocus, ref: wrapperRef });\n\n  const onOutboundNavigation = useCallback(\n    (elementRef: GridElementRef, direction: NavDirections) => {\n      if (options.disabled) return;\n      const maybeNextElement = getNextElementToFocusInDirection(directionMaps[direction], elementRef);\n      if (maybeNextElement) {\n        elementRef.current?.blur();\n        maybeNextElement.current?.focus();\n        return;\n      }\n      // nothing on that direction - try updating the upper context\n      upperContext?.onOutboundNavigation(wrapperRef, direction);\n    },\n    [directionMaps, upperContext, wrapperRef, options.disabled]\n  );\n  return { onOutboundNavigation };\n};\n"],"names":["GridKeyboardNavigationContext","React","createContext","useGridKeyboardNavigationContext","positions","wrapperRef","options","arguments","length","undefined","disabled","directionMaps","useMemo","getDirectionMaps","upperContext","useContext","lastNavigationDirectionRef","useLastNavigationDirection","onWrapperFocus","useCallback","keyboardDirection","current","oppositeDirection","getOppositeDirection","refToFocus","getOutmostElementInDirection","_a","focus","useEventListener","eventName","callback","ref","onOutboundNavigation","elementRef","direction","maybeNextElement","getNextElementToFocusInDirection","blur","_b"],"mappings":"qYAgBO,IAAMA,EAAgCC,EAAMC,cAAiD,MAQvFC,EAAmC,SAC9CC,EACAC,GAEE,IADFC,EAAAC,UAAAC,OAAAD,QAAAE,IAAAF,UAAAE,GAAAF,UAAiC,GAAA,CAAEG,UAAU,GAEvCC,EAAgBC,GAAQ,WAAA,OAAMC,EAAiBT,KAAY,CAACA,IAC5DU,EAAeC,EAAWf,GACxBgB,EAA+BC,IAA/BD,2BAEFE,EAAiBC,GAAY,iBAC3BC,EAAoBJ,EAA2BK,QACrD,GAAKD,IAAqBd,EAAQI,SAAlC,CAGA,IAAMY,EAAoBC,EAAqBH,GACzCI,EAAaC,EAA6Bd,EAAeW,GAC5C,QAAnBI,EAAAF,aAAA,EAAAA,EAAYH,eAAO,IAAAK,GAAAA,EAAEC,OAHrB,CAID,GAAE,CAAChB,EAAeL,EAAQI,SAAUM,IAiBrC,OAhBAY,EAAiB,CAAEC,UAAW,QAASC,SAAUZ,EAAgBa,IAAK1B,IAgB/D,CAAE2B,qBAdoBb,GAC3B,SAACc,EAA4BC,WAC3B,IAAI5B,EAAQI,SAAZ,CACA,IAAMyB,EAAmBC,EAAiCzB,EAAcuB,GAAYD,GACpF,GAAIE,EAGF,OAFoB,QAApBT,EAAAO,EAAWZ,eAAS,IAAAK,GAAAA,EAAAW,YACM,QAA1BC,EAAAH,EAAiBd,eAAS,IAAAiB,GAAAA,EAAAX,SAI5Bb,SAAAA,EAAckB,qBAAqB3B,EAAY6B,EARzB,CASxB,GACA,CAACvB,EAAeG,EAAcT,EAAYC,EAAQI,WAGtD"}

package/dist/src/components/HiddenText/HiddenText.js

@@ -1,2 +1,2 @@
-import e from"classnames";import t,{forwardRef as s,useRef as r}from"react";import a from"../../hooks/useMergeRef.js";import{getTestId as d,ComponentDefaultTestId as o}from"../../tests/testIds.js";import i from"./HiddenText.module.scss.js";var m=s((function(s,m){var n=s.text,f=s.className,p=void 0===f?"":f,l=s.id,c=void 0===l?"hiddenText":l,u=s["data-testid"],x=r(null),T=a(m,x);return t.createElement("span",{ref:T,id:c,"data-testid":u||d(o.HIDDEN_TEXT,c),className:e(i.hiddenTextWrapper,p)},n)}));export{m as default};
+import e from"classnames";import t,{forwardRef as s,useRef as r}from"react";import{getTestId as a,ComponentDefaultTestId as d}from"../../tests/testIds.js";import o from"./HiddenText.module.scss.js";import{useMergeRef as i}from"../../../shared/dist/hooks/useMergeRef.js";var m=s((function(s,m){var n=s.text,f=s.className,p=void 0===f?"":f,l=s.id,c=void 0===l?"hiddenText":l,u=s["data-testid"],x=r(null),T=i(m,x);return t.createElement("span",{ref:T,id:c,"data-testid":u||a(d.HIDDEN_TEXT,c),className:e(o.hiddenTextWrapper,p)},n)}));export{m as default};
 //# sourceMappingURL=HiddenText.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HiddenText.js","sources":["../../../../src/components/HiddenText/HiddenText.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./HiddenText.module.scss\";\n\nexport interface HiddenTextProps extends VibeComponentProps {\n  /**\n   * The text content that is hidden but available for assistive technologies.\n   */\n  text: string;\n}\n\nconst HiddenText = forwardRef<HTMLSpanElement, HiddenTextProps>(\n  ({ text, className = \"\", id = \"hiddenText\", \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <span\n        ref={mergedRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.HIDDEN_TEXT, id)}\n        className={cx(styles.hiddenTextWrapper, className)}\n      >\n        {text}\n      </span>\n    );\n  }\n);\n\nexport default HiddenText;\n"],"names":["HiddenText","forwardRef","_ref","ref","text","_ref$className","className","_ref$id","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","getTestId","ComponentDefaultTestId","HIDDEN_TEXT","cx","styles","hiddenTextWrapper"],"mappings":"gPAcMA,IAAAA,EAAaC,GACjB,SAAAC,EAAyEC,GAAO,IAA7EC,EAAIF,EAAJE,KAAIC,EAAAH,EAAEI,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EAAEM,GAAAA,OAAK,IAAHD,EAAG,aAAYA,EAAiBE,EAAUP,EAAzB,eACpCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnC,OACEI,EAAAC,cAAA,OAAA,CACEZ,IAAKS,EACLJ,GAAIA,gBACSC,GAAcO,EAAUC,EAAuBC,YAAaV,GACzEF,UAAWa,EAAGC,EAAOC,kBAAmBf,IAEvCF,EAGP"}
+{"version":3,"file":"HiddenText.js","sources":["../../../../src/components/HiddenText/HiddenText.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./HiddenText.module.scss\";\n\nexport interface HiddenTextProps extends VibeComponentProps {\n  /**\n   * The text content that is hidden but available for assistive technologies.\n   */\n  text: string;\n}\n\nconst HiddenText = forwardRef<HTMLSpanElement, HiddenTextProps>(\n  ({ text, className = \"\", id = \"hiddenText\", \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <span\n        ref={mergedRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.HIDDEN_TEXT, id)}\n        className={cx(styles.hiddenTextWrapper, className)}\n      >\n        {text}\n      </span>\n    );\n  }\n);\n\nexport default HiddenText;\n"],"names":["HiddenText","forwardRef","_ref","ref","text","_ref$className","className","_ref$id","id","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","createElement","getTestId","ComponentDefaultTestId","HIDDEN_TEXT","cx","styles","hiddenTextWrapper"],"mappings":"8QAcMA,IAAAA,EAAaC,GACjB,SAAAC,EAAyEC,GAAO,IAA7EC,EAAIF,EAAJE,KAAIC,EAAAH,EAAEI,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EAAEM,GAAAA,OAAK,IAAHD,EAAG,aAAYA,EAAiBE,EAAUP,EAAzB,eACpCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnC,OACEI,EAAAC,cAAA,OAAA,CACEZ,IAAKS,EACLJ,GAAIA,gBACSC,GAAcO,EAAUC,EAAuBC,YAAaV,GACzEF,UAAWa,EAAGC,EAAOC,kBAAmBf,IAEvCF,EAGP"}

package/dist/src/components/Info/Info.js

@@ -1,2 +1,2 @@
-import{slicedToArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as e,useRef as t,useState as a,useCallback as n}from"react";import"../../../_virtual/_tslib.js";import"classnames";import{getTestId as s}from"../../tests/testIds.js";import"es-toolkit";import"../Link/Link.module.scss.js";import{ComponentDefaultTestId as r,ComponentVibeId as l}from"../../tests/constants.js";import"./components/InfoLink/InfoLink.module.scss.js";import d from"./components/InfoDialogContent/InfoDialogContent.js";import c from"../../hooks/useMergeRef.js";import m from"../../../components/dialog/dist/Dialog/Dialog.js";import p from"../../../components/icon-button/dist/IconButton/IconButton.js";import u from"../../../icons/dist/react/Info.js";var f=e((function(e,f){var g=e.id,b=e.className,k=e.title,v=e.body,j=e.link,h=e["aria-label"],y=e["aria-labelledby"],D=e.position,I=void 0===D?"bottom-start":D,N=e.disabled,B=void 0!==N&&N,T=e.onDialogShow,E=e.onDialogHide,H=e.hideButtonTooltip,L=e.dialogClassName,S=e.containerSelector,_=e["data-testid"],w=t(null),x=c(f,w),C=t(null),F=a(!1),A=o(F,2),O=A[0],R=A[1],q=g?"".concat(g,"-dialog"):void 0,z=n((function(){R(!0),null==T||T(),requestAnimationFrame((function(){var o;null===(o=C.current)||void 0===o||o.focus()}))}),[T]),M=n((function(o){var i;R(!1),null==E||E(),"Escape"===o.key&&(null===(i=w.current)||void 0===i||i.focus())}),[E]);return i.createElement(m,{id:q,disable:B,position:I,moveBy:{main:4,secondary:0},showTrigger:["click"],hideTrigger:["click","clickoutside","esckey"],onDialogDidShow:z,onDialogDidHide:M,containerSelector:S,content:i.createElement(d,{ref:C,id:q,title:k,body:v,link:j,className:L}),hideWhenReferenceHidden:!0},i.createElement(p,{ref:x,id:g,className:b,icon:u,size:"xs",kind:"tertiary",active:O,disabled:B,"aria-label":h,"aria-labelledby":y,"aria-controls":q,"aria-haspopup":"dialog","aria-expanded":O,"data-testid":_||s(r.INFO,g),"data-vibe":l.INFO,hideTooltip:H}))}));export{f as default};
+import{slicedToArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as e,useRef as t,useState as a,useCallback as n}from"react";import"../../../_virtual/_tslib.js";import"classnames";import{getTestId as s}from"../../tests/testIds.js";import"../Link/Link.module.scss.js";import"es-toolkit";import{ComponentDefaultTestId as r,ComponentVibeId as l}from"../../tests/constants.js";import"./components/InfoLink/InfoLink.module.scss.js";import d from"./components/InfoDialogContent/InfoDialogContent.js";import c from"../../../components/dialog/dist/Dialog/Dialog.js";import m from"../../../components/icon-button/dist/IconButton/IconButton.js";import p from"../../../icons/dist/react/Info.js";import{useMergeRef as u}from"../../../shared/dist/hooks/useMergeRef.js";var f=e((function(e,f){var g=e.id,b=e.className,k=e.title,v=e.body,h=e.link,j=e["aria-label"],y=e["aria-labelledby"],D=e.position,I=void 0===D?"bottom-start":D,N=e.disabled,B=void 0!==N&&N,T=e.onDialogShow,E=e.onDialogHide,H=e.hideButtonTooltip,L=e.dialogClassName,S=e.containerSelector,_=e["data-testid"],w=t(null),x=u(f,w),C=t(null),F=a(!1),A=o(F,2),O=A[0],R=A[1],q=g?"".concat(g,"-dialog"):void 0,z=n((function(){R(!0),null==T||T(),requestAnimationFrame((function(){var o;null===(o=C.current)||void 0===o||o.focus()}))}),[T]),M=n((function(o){var i;R(!1),null==E||E(),"Escape"===o.key&&(null===(i=w.current)||void 0===i||i.focus())}),[E]);return i.createElement(c,{id:q,disable:B,position:I,moveBy:{main:4,secondary:0},showTrigger:["click"],hideTrigger:["click","clickoutside","esckey"],onDialogDidShow:z,onDialogDidHide:M,containerSelector:S,content:i.createElement(d,{ref:C,id:q,title:k,body:v,link:h,className:L}),hideWhenReferenceHidden:!0},i.createElement(m,{ref:x,id:g,className:b,icon:p,size:"xs",kind:"tertiary",active:O,disabled:B,"aria-label":j,"aria-labelledby":y,"aria-controls":q,"aria-haspopup":"dialog","aria-expanded":O,"data-testid":_||s(r.INFO,g),"data-vibe":l.INFO,hideTooltip:H}))}));export{f as default};
 //# sourceMappingURL=Info.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sources":["../../../../src/components/Info/Info.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Info as InfoIcon } from \"@vibe/icons\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Dialog, type DialogEvent } from \"@vibe/dialog\";\nimport { InfoDialogContent } from \"./components\";\nimport { type InfoProps } from \"./Info.types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\n\nconst Info = forwardRef(\n  (\n    {\n      id,\n      className,\n      title,\n      body,\n      link,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      position = \"bottom-start\",\n      disabled = false,\n      onDialogShow,\n      onDialogHide,\n      hideButtonTooltip,\n      dialogClassName,\n      containerSelector,\n      \"data-testid\": dataTestId\n    }: InfoProps,\n    ref: React.ForwardedRef<HTMLButtonElement>\n  ) => {\n    const iconButtonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, iconButtonRef);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const dialogId = id ? `${id}-dialog` : undefined;\n\n    const handleDialogShow = useCallback(() => {\n      setIsOpen(true);\n      onDialogShow?.();\n      requestAnimationFrame(() => {\n        dialogContentRef.current?.focus();\n      });\n    }, [onDialogShow]);\n\n    const handleDialogHide = useCallback(\n      (e: DialogEvent) => {\n        setIsOpen(false);\n        onDialogHide?.();\n        if ((e as React.KeyboardEvent).key === \"Escape\") {\n          iconButtonRef.current?.focus();\n        }\n      },\n      [onDialogHide]\n    );\n\n    return (\n      <Dialog\n        id={dialogId}\n        disable={disabled}\n        position={position}\n        moveBy={{ main: 4, secondary: 0 }}\n        showTrigger={[\"click\"]}\n        hideTrigger={[\"click\", \"clickoutside\", \"esckey\"]}\n        onDialogDidShow={handleDialogShow}\n        onDialogDidHide={handleDialogHide}\n        containerSelector={containerSelector}\n        content={\n          <InfoDialogContent\n            ref={dialogContentRef}\n            id={dialogId}\n            title={title}\n            body={body}\n            link={link}\n            className={dialogClassName}\n          />\n        }\n        hideWhenReferenceHidden\n      >\n        <IconButton\n          ref={mergedRef}\n          id={id}\n          className={className}\n          icon={InfoIcon}\n          size=\"xs\"\n          kind=\"tertiary\"\n          active={isOpen}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-controls={dialogId}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}\n          data-vibe={ComponentVibeId.INFO}\n          hideTooltip={hideButtonTooltip}\n        />\n      </Dialog>\n    );\n  }\n);\n\nexport default Info;\n"],"names":["Info","forwardRef","_ref","ref","id","className","title","body","link","ariaLabel","ariaLabelledby","_ref$position","position","_ref$disabled","disabled","onDialogShow","onDialogHide","hideButtonTooltip","dialogClassName","containerSelector","dataTestId","iconButtonRef","useRef","mergedRef","useMergeRef","dialogContentRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","dialogId","concat","undefined","handleDialogShow","useCallback","requestAnimationFrame","_a","current","focus","handleDialogHide","e","key","React","createElement","Dialog","disable","moveBy","main","secondary","showTrigger","hideTrigger","onDialogDidShow","onDialogDidHide","content","InfoDialogContent","hideWhenReferenceHidden","IconButton","icon","InfoIcon","size","kind","active","getTestId","ComponentDefaultTestId","INFO","ComponentVibeId","hideTooltip"],"mappings":"yvBAUMA,IAAAA,EAAOC,GACX,SAAAC,EAkBEC,GACE,IAjBAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACAC,EAAKJ,EAALI,MACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KACcC,EAASP,EAAvB,cACmBQ,EAAcR,EAAjC,mBAAiBS,EAAAT,EACjBU,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAX,EACzBY,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAYb,EAAZa,aACAC,EAAYd,EAAZc,aACAC,EAAiBf,EAAjBe,kBACAC,EAAehB,EAAfgB,gBACAC,EAAiBjB,EAAjBiB,kBACeC,EAAUlB,EAAzB,eAIImB,EAAgBC,EAA0B,MAC1CC,EAAYC,EAAYrB,EAAKkB,GAC7BI,EAAmBH,EAAuB,MAEhDI,EAA4BC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAApCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAElBI,EAAW5B,EAAE,GAAA6B,OAAM7B,kBAAc8B,EAEjCC,EAAmBC,GAAY,WACnCL,GAAU,GACVhB,SAAAA,IACAsB,uBAAsB,iBACM,QAA1BC,EAAAb,EAAiBc,eAAS,IAAAD,GAAAA,EAAAE,OAC5B,GACF,GAAG,CAACzB,IAEE0B,EAAmBL,GACvB,SAACM,SACCX,GAAU,GACVf,SAAAA,IACuC,WAAlC0B,EAA0BC,MACN,QAAvBL,EAAAjB,EAAckB,eAAS,IAAAD,GAAAA,EAAAE,QAE3B,GACA,CAACxB,IAGH,OACE4B,EAACC,cAAAC,GACC1C,GAAI4B,EACJe,QAASjC,EACTF,SAAUA,EACVoC,OAAQ,CAAEC,KAAM,EAAGC,UAAW,GAC9BC,YAAa,CAAC,SACdC,YAAa,CAAC,QAAS,eAAgB,UACvCC,gBAAiBlB,EACjBmB,gBAAiBb,EACjBtB,kBAAmBA,EACnBoC,QACEX,EAAAC,cAACW,EACC,CAAArD,IAAKsB,EACLrB,GAAI4B,EACJ1B,MAAOA,EACPC,KAAMA,EACNC,KAAMA,EACNH,UAAWa,IAGfuC,yBAAuB,GAEvBb,EAAAC,cAACa,EAAU,CACTvD,IAAKoB,EACLnB,GAAIA,EACJC,UAAWA,EACXsD,KAAMC,EACNC,KAAK,KACLC,KAAK,WACLC,OAAQjC,EACRhB,SAAUA,EAAQ,aACNL,EAAS,kBACJC,EAAc,gBAChBsB,EAAQ,gBACT,SAAQ,gBACPF,EAAM,cACRV,GAAc4C,EAAUC,EAAuBC,KAAM9D,GAAG,YAC1D+D,EAAgBD,KAC3BE,YAAanD,IAIrB"}
+{"version":3,"file":"Info.js","sources":["../../../../src/components/Info/Info.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Info as InfoIcon } from \"@vibe/icons\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Dialog, type DialogEvent } from \"@vibe/dialog\";\nimport { InfoDialogContent } from \"./components\";\nimport { type InfoProps } from \"./Info.types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { useMergeRef } from \"@vibe/shared\";\n\nconst Info = forwardRef(\n  (\n    {\n      id,\n      className,\n      title,\n      body,\n      link,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      position = \"bottom-start\",\n      disabled = false,\n      onDialogShow,\n      onDialogHide,\n      hideButtonTooltip,\n      dialogClassName,\n      containerSelector,\n      \"data-testid\": dataTestId\n    }: InfoProps,\n    ref: React.ForwardedRef<HTMLButtonElement>\n  ) => {\n    const iconButtonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, iconButtonRef);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const dialogId = id ? `${id}-dialog` : undefined;\n\n    const handleDialogShow = useCallback(() => {\n      setIsOpen(true);\n      onDialogShow?.();\n      requestAnimationFrame(() => {\n        dialogContentRef.current?.focus();\n      });\n    }, [onDialogShow]);\n\n    const handleDialogHide = useCallback(\n      (e: DialogEvent) => {\n        setIsOpen(false);\n        onDialogHide?.();\n        if ((e as React.KeyboardEvent).key === \"Escape\") {\n          iconButtonRef.current?.focus();\n        }\n      },\n      [onDialogHide]\n    );\n\n    return (\n      <Dialog\n        id={dialogId}\n        disable={disabled}\n        position={position}\n        moveBy={{ main: 4, secondary: 0 }}\n        showTrigger={[\"click\"]}\n        hideTrigger={[\"click\", \"clickoutside\", \"esckey\"]}\n        onDialogDidShow={handleDialogShow}\n        onDialogDidHide={handleDialogHide}\n        containerSelector={containerSelector}\n        content={\n          <InfoDialogContent\n            ref={dialogContentRef}\n            id={dialogId}\n            title={title}\n            body={body}\n            link={link}\n            className={dialogClassName}\n          />\n        }\n        hideWhenReferenceHidden\n      >\n        <IconButton\n          ref={mergedRef}\n          id={id}\n          className={className}\n          icon={InfoIcon}\n          size=\"xs\"\n          kind=\"tertiary\"\n          active={isOpen}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-controls={dialogId}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}\n          data-vibe={ComponentVibeId.INFO}\n          hideTooltip={hideButtonTooltip}\n        />\n      </Dialog>\n    );\n  }\n);\n\nexport default Info;\n"],"names":["Info","forwardRef","_ref","ref","id","className","title","body","link","ariaLabel","ariaLabelledby","_ref$position","position","_ref$disabled","disabled","onDialogShow","onDialogHide","hideButtonTooltip","dialogClassName","containerSelector","dataTestId","iconButtonRef","useRef","mergedRef","useMergeRef","dialogContentRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","dialogId","concat","undefined","handleDialogShow","useCallback","requestAnimationFrame","_a","current","focus","handleDialogHide","e","key","React","createElement","Dialog","disable","moveBy","main","secondary","showTrigger","hideTrigger","onDialogDidShow","onDialogDidHide","content","InfoDialogContent","hideWhenReferenceHidden","IconButton","icon","InfoIcon","size","kind","active","getTestId","ComponentDefaultTestId","INFO","ComponentVibeId","hideTooltip"],"mappings":"uxBAUMA,IAAAA,EAAOC,GACX,SAAAC,EAkBEC,GACE,IAjBAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACAC,EAAKJ,EAALI,MACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KACcC,EAASP,EAAvB,cACmBQ,EAAcR,EAAjC,mBAAiBS,EAAAT,EACjBU,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAX,EACzBY,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAYb,EAAZa,aACAC,EAAYd,EAAZc,aACAC,EAAiBf,EAAjBe,kBACAC,EAAehB,EAAfgB,gBACAC,EAAiBjB,EAAjBiB,kBACeC,EAAUlB,EAAzB,eAIImB,EAAgBC,EAA0B,MAC1CC,EAAYC,EAAYrB,EAAKkB,GAC7BI,EAAmBH,EAAuB,MAEhDI,EAA4BC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAApCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAElBI,EAAW5B,EAAE,GAAA6B,OAAM7B,kBAAc8B,EAEjCC,EAAmBC,GAAY,WACnCL,GAAU,GACVhB,SAAAA,IACAsB,uBAAsB,iBACM,QAA1BC,EAAAb,EAAiBc,eAAS,IAAAD,GAAAA,EAAAE,OAC5B,GACF,GAAG,CAACzB,IAEE0B,EAAmBL,GACvB,SAACM,SACCX,GAAU,GACVf,SAAAA,IACuC,WAAlC0B,EAA0BC,MACN,QAAvBL,EAAAjB,EAAckB,eAAS,IAAAD,GAAAA,EAAAE,QAE3B,GACA,CAACxB,IAGH,OACE4B,EAACC,cAAAC,GACC1C,GAAI4B,EACJe,QAASjC,EACTF,SAAUA,EACVoC,OAAQ,CAAEC,KAAM,EAAGC,UAAW,GAC9BC,YAAa,CAAC,SACdC,YAAa,CAAC,QAAS,eAAgB,UACvCC,gBAAiBlB,EACjBmB,gBAAiBb,EACjBtB,kBAAmBA,EACnBoC,QACEX,EAAAC,cAACW,EACC,CAAArD,IAAKsB,EACLrB,GAAI4B,EACJ1B,MAAOA,EACPC,KAAMA,EACNC,KAAMA,EACNH,UAAWa,IAGfuC,yBAAuB,GAEvBb,EAAAC,cAACa,EAAU,CACTvD,IAAKoB,EACLnB,GAAIA,EACJC,UAAWA,EACXsD,KAAMC,EACNC,KAAK,KACLC,KAAK,WACLC,OAAQjC,EACRhB,SAAUA,EAAQ,aACNL,EAAS,kBACJC,EAAc,gBAChBsB,EAAQ,gBACT,SAAQ,gBACPF,EAAM,cACRV,GAAc4C,EAAUC,EAAuBC,KAAM9D,GAAG,YAC1D+D,EAAgBD,KAC3BE,YAAanD,IAIrB"}

package/dist/src/components/Label/Label.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as r}from"es-toolkit";import o from"classnames";import{getTestId as a,ComponentDefaultTestId as l}from"../../tests/testIds.js";import{getStyle as s}from"../../helpers/typesciptCssModulesHelper.js";import i,{forwardRef as n,useRef as m,useState as c,useMemo as p,useCallback as d,useEffect as u}from"react";import f from"./Leg.js";import{contentColors as b}from"../../utils/colors-vars-map.js";import v from"../../hooks/useMergeRef.js";import j from"./Label.module.scss.js";import k from"./LabelCelebrationAnimation.js";import{mapSizesToTextSize as y}from"./LabelConstants.js";import{ComponentVibeId as L}from"../../tests/constants.js";import g from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import C from"../../../components/typography/dist/Text/Text.js";var E=n((function(n,E){var h=n.className,x=n.labelClassName,A=n.kind,N=void 0===A?"fill":A,P=n.color,T=void 0===P?"primary":P,B=n.text,I=void 0===B?"":B,H=n.isLegIncluded,M=void 0!==H&&H,W=n.id,_=n["data-testid"],w=n.onClick,z=n.celebrationAnimation,D=n.size,O=void 0===D?"medium":D,R=m(null),q=v(E,R),F=c(z),G=e(F,2),J=G[0],K=G[1],Q=!!w,S=p((function(){return o(j.label,s(j,r("kind-"+N)),s(j,r("color-"+T)),t(t(t({},j.withLeg,M),j.clickable,Q),j.small,"small"===O),x)}),[N,T,M,x,Q,O]),U=p((function(){if(b.includes(T))return"line"===N?{color:"var(--color-".concat(T,")")}:{backgroundColor:"var(--color-".concat(T,")")}}),[T,N]),V=d((function(e){w&&(e.preventDefault(),w(e))}),[w]),X=g({onClick:V,id:W,"aria-hidden":!1,"aria-haspopup":!1,"aria-expanded":!1},R);u((function(){K(z)}),[z]);var Y=p((function(){return i.createElement("span",Object.assign({},Q&&X,{className:o(t({},j.clickableWrapper,Q),h),"data-testid":_||a(l.LABEL,W),"data-vibe":L.LABEL,ref:q}),i.createElement(C,{style:U,element:"span",type:y[O],className:S,color:"dark"===T?"onInverted":"onPrimary","data-celebration-text":J},i.createElement(C,{element:"span",type:y[O],color:"inherit",className:o(t({},j.smallText,"small"===O))},I),i.createElement("span",{className:o(j.legWrapper)},M?i.createElement(f,null):null)))}),[Q,X,h,_,W,q,S,J,I,M,O,U,T]);return J&&"line"===N?i.createElement(k,{onAnimationEnd:function(){return K(!1)}},Y):Y}));export{E as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as r}from"es-toolkit";import o from"classnames";import{getTestId as a,ComponentDefaultTestId as s}from"../../tests/testIds.js";import l,{forwardRef as i,useRef as n,useState as m,useMemo as c,useCallback as p,useEffect as d}from"react";import u from"./Leg.js";import{contentColors as f}from"../../utils/colors-vars-map.js";import b from"./Label.module.scss.js";import v from"./LabelCelebrationAnimation.js";import{mapSizesToTextSize as j}from"./LabelConstants.js";import{ComponentVibeId as k}from"../../tests/constants.js";import y from"../../../components/clickable/dist/useClickableProps/useClickableProps.js";import L from"../../../components/typography/dist/Text/Text.js";import{useMergeRef as g}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as C}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var E=i((function(i,E){var h=i.className,x=i.labelClassName,A=i.kind,N=void 0===A?"fill":A,P=i.color,T=void 0===P?"primary":P,B=i.text,I=void 0===B?"":B,H=i.isLegIncluded,M=void 0!==H&&H,W=i.id,_=i["data-testid"],w=i.onClick,z=i.celebrationAnimation,D=i.size,O=void 0===D?"medium":D,R=n(null),q=g(E,R),F=m(z),G=e(F,2),J=G[0],K=G[1],Q=!!w,S=c((function(){return o(b.label,C(b,r("kind-"+N)),C(b,r("color-"+T)),t(t(t({},b.withLeg,M),b.clickable,Q),b.small,"small"===O),x)}),[N,T,M,x,Q,O]),U=c((function(){if(f.includes(T))return"line"===N?{color:"var(--color-".concat(T,")")}:{backgroundColor:"var(--color-".concat(T,")")}}),[T,N]),V=p((function(e){w&&(e.preventDefault(),w(e))}),[w]),X=y({onClick:V,id:W,"aria-hidden":!1,"aria-haspopup":!1,"aria-expanded":!1},R);d((function(){K(z)}),[z]);var Y=c((function(){return l.createElement("span",Object.assign({},Q&&X,{className:o(t({},b.clickableWrapper,Q),h),"data-testid":_||a(s.LABEL,W),"data-vibe":k.LABEL,ref:q}),l.createElement(L,{style:U,element:"span",type:j[O],className:S,color:"dark"===T?"onInverted":"onPrimary","data-celebration-text":J},l.createElement(L,{element:"span",type:j[O],color:"inherit",className:o(t({},b.smallText,"small"===O))},I),l.createElement("span",{className:o(b.legWrapper)},M?l.createElement(u,null):null)))}),[Q,X,h,_,W,q,S,J,I,M,O,U,T]);return J&&"line"===N?l.createElement(v,{onAnimationEnd:function(){return K(!1)}},Y):Y}));export{E as default};
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Text } from \"@vibe/typography\";\nimport Leg from \"./Leg\";\nimport { type LabelColor, type LabelKind, type ContentColor } from \"./Label.types\";\nimport { contentColors } from \"../../utils/colors-vars-map\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { useClickableProps } from \"@vibe/clickable\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport styles from \"./Label.module.scss\";\nimport LabelCelebrationAnimation from \"./LabelCelebrationAnimation\";\nimport { type LabelSizes } from \"./Label.types\";\nimport { mapSizesToTextSize } from \"./LabelConstants\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LabelProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner text wrapper.\n   */\n  labelClassName?: string;\n  /**\n   * The visual style of the label.\n   */\n  kind?: LabelKind;\n  /**\n   * The background color of the label.\n   */\n  color?: LabelColor;\n  /**\n   * The text content of the label.\n   */\n  text?: string;\n  /**\n   * If true, includes a leg (decorative extension).\n   */\n  isLegIncluded?: boolean;\n  /**\n   * Callback fired when the label is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n  /**\n   * If true, triggers a celebration animation.\n   */\n  celebrationAnimation?: boolean;\n  /**\n   * The size of the label.\n   */\n  size?: LabelSizes;\n}\n\nconst Label = forwardRef<HTMLElement, LabelProps>(\n  (\n    {\n      className,\n      labelClassName,\n      kind = \"fill\",\n      color = \"primary\",\n      text = \"\",\n      isLegIncluded = false,\n      id,\n      \"data-testid\": dataTestId,\n      onClick,\n      celebrationAnimation,\n      size = \"medium\"\n    }: LabelProps,\n    ref\n  ) => {\n    const labelRef = useRef<HTMLSpanElement>(null);\n    const mergedRef = useMergeRef(ref, labelRef);\n    const [isCelebrationAnimation, setIsCelebrationAnimation] = useState(celebrationAnimation);\n\n    const isClickable = Boolean(onClick);\n\n    const classNames = useMemo(\n      () =>\n        cx(\n          styles.label,\n          getStyle(styles, camelCase(\"kind\" + \"-\" + kind)),\n          getStyle(styles, camelCase(\"color\" + \"-\" + color)),\n          {\n            [styles.withLeg]: isLegIncluded,\n            [styles.clickable]: isClickable,\n            [styles.small]: size === \"small\"\n          },\n          labelClassName\n        ),\n      [kind, color, isLegIncluded, labelClassName, isClickable, size]\n    );\n\n    const backgroundColorStyle = useMemo(() => {\n      if (contentColors.includes(color as ContentColor)) {\n        if (kind === \"line\") {\n          return { color: `var(--color-${color})` };\n        }\n        return { backgroundColor: `var(--color-${color})` };\n      }\n    }, [color, kind]);\n\n    const onClickCallback = useCallback(\n      (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        if (onClick) {\n          event.preventDefault();\n          onClick(event);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        id,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": false,\n        \"aria-expanded\": false\n      },\n      labelRef\n    );\n\n    useEffect(() => {\n      setIsCelebrationAnimation(celebrationAnimation);\n    }, [celebrationAnimation]);\n\n    const label = useMemo(() => {\n      return (\n        <span\n          {...(isClickable && clickableProps)}\n          className={cx({ [styles.clickableWrapper]: isClickable }, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LABEL, id)}\n          data-vibe={ComponentVibeId.LABEL}\n          ref={mergedRef}\n        >\n          <Text\n            style={backgroundColorStyle}\n            element=\"span\"\n            type={mapSizesToTextSize[size]}\n            className={classNames}\n            color={color === \"dark\" ? \"onInverted\" : \"onPrimary\"}\n            data-celebration-text={isCelebrationAnimation}\n          >\n            <Text\n              element=\"span\"\n              type={mapSizesToTextSize[size]}\n              color=\"inherit\"\n              className={cx({ [styles.smallText]: size === \"small\" })}\n            >\n              {text}\n            </Text>\n            <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>\n          </Text>\n        </span>\n      );\n    }, [\n      isClickable,\n      clickableProps,\n      className,\n      dataTestId,\n      id,\n      mergedRef,\n      classNames,\n      isCelebrationAnimation,\n      text,\n      isLegIncluded,\n      size,\n      backgroundColorStyle,\n      color\n    ]);\n\n    // Celebration animation is applied only for line kind\n    if (isCelebrationAnimation && kind === \"line\") {\n      return (\n        <LabelCelebrationAnimation onAnimationEnd={() => setIsCelebrationAnimation(false)}>\n          {label}\n        </LabelCelebrationAnimation>\n      );\n    }\n\n    return label;\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","className","labelClassName","_ref$kind","kind","_ref$color","color","_ref$text","text","_ref$isLegIncluded","isLegIncluded","id","dataTestId","onClick","celebrationAnimation","_ref$size","size","labelRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isCelebrationAnimation","setIsCelebrationAnimation","isClickable","classNames","useMemo","cx","styles","label","getStyle","camelCase","_defineProperty","withLeg","clickable","small","backgroundColorStyle","contentColors","includes","concat","backgroundColor","onClickCallback","useCallback","event","preventDefault","clickableProps","useClickableProps","useEffect","React","createElement","Object","assign","clickableWrapper","getTestId","ComponentDefaultTestId","LABEL","ComponentVibeId","Text","style","element","type","mapSizesToTextSize","smallText","legWrapper","Leg","LabelCelebrationAnimation","onAnimationEnd"],"mappings":"w4BAqDMA,IAAAA,EAAQC,GACZ,SAAAC,EAcEC,GACE,IAbAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAR,EACjBS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAV,EACTW,cAAAA,OAAgB,IAAHD,GAAQA,EACrBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eACAc,EAAOd,EAAPc,QACAC,EAAoBf,EAApBe,qBAAoBC,EAAAhB,EACpBiB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAIXE,EAAWC,EAAwB,MACnCC,EAAYC,EAAYpB,EAAKiB,GACnCI,EAA4DC,EAASR,GAAqBS,EAAAC,EAAAH,EAAA,GAAnFI,EAAsBF,EAAA,GAAEG,EAAyBH,EAAA,GAElDI,IAAsBd,EAEtBe,EAAaC,GACjB,WAAA,OACEC,EACEC,EAAOC,MACPC,EAASF,EAAQG,EAAU,QAAe9B,IAC1C6B,EAASF,EAAQG,EAAU,SAAgB5B,IAAO6B,EAAAA,EAAAA,EAAA,CAAA,EAE/CJ,EAAOK,QAAU1B,GACjBqB,EAAOM,UAAYV,GACnBI,EAAOO,MAAiB,UAATtB,GAElBd,EACD,GACH,CAACE,EAAME,EAAOI,EAAeR,EAAgByB,EAAaX,IAGtDuB,EAAuBV,GAAQ,WACnC,GAAIW,EAAcC,SAASnC,GACzB,MAAa,SAATF,EACK,CAAEE,MAAK,eAAAoC,OAAiBpC,EAAK,MAE/B,CAAEqC,gBAAe,eAAAD,OAAiBpC,EAAK,KAElD,GAAG,CAACA,EAAOF,IAELwC,EAAkBC,GACtB,SAACC,GACKjC,IACFiC,EAAMC,iBACNlC,EAAQiC,GAEZ,GACA,CAACjC,IAGGmC,EAAiBC,EACrB,CACEpC,QAAS+B,EACTjC,GAAAA,EACA,eAAe,EACf,iBAAiB,EACjB,iBAAiB,GAEnBM,GAGFiC,GAAU,WACRxB,EAA0BZ,EAC5B,GAAG,CAACA,IAEJ,IAAMkB,EAAQH,GAAQ,WACpB,OACEsB,EACMC,cAAA,OAAAC,OAAAC,OAAA,CAAA,EAAC3B,GAAeqB,EACpB,CAAA/C,UAAW6B,EAAEK,EAAIJ,CAAAA,EAAAA,EAAOwB,iBAAmB5B,GAAe1B,GAC7C,cAAAW,GAAc4C,EAAUC,EAAuBC,MAAO/C,eACxDgD,EAAgBD,MAC3B1D,IAAKmB,IAELgC,EAAAC,cAACQ,EAAI,CACHC,MAAOtB,EACPuB,QAAQ,OACRC,KAAMC,EAAmBhD,GACzBf,UAAW2B,EACXtB,MAAiB,SAAVA,EAAmB,aAAe,oCAClBmB,GAEvB0B,EAAAC,cAACQ,EAAI,CACHE,QAAQ,OACRC,KAAMC,EAAmBhD,GACzBV,MAAM,UACNL,UAAW6B,EAAEK,EAAIJ,CAAAA,EAAAA,EAAOkC,UAAqB,UAATjD,KAEnCR,GAEH2C,EAAMC,cAAA,OAAA,CAAAnD,UAAW6B,EAAGC,EAAOmC,aAAcxD,EAAgByC,EAACC,cAAAe,EAAM,MAAG,OAI3E,GAAG,CACDxC,EACAqB,EACA/C,EACAW,EACAD,EACAQ,EACAS,EACAH,EACAjB,EACAE,EACAM,EACAuB,EACAjC,IAIF,OAAImB,GAAmC,SAATrB,EAE1B+C,EAACC,cAAAgB,EAA0B,CAAAC,eAAgB,WAAA,OAAM3C,GAA0B,EAAM,GAC9EM,GAKAA,CACT"}
+{"version":3,"file":"Label.js","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Text } from \"@vibe/typography\";\nimport Leg from \"./Leg\";\nimport { type LabelColor, type LabelKind, type ContentColor } from \"./Label.types\";\nimport { contentColors } from \"../../utils/colors-vars-map\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { useClickableProps } from \"@vibe/clickable\";\n\nimport styles from \"./Label.module.scss\";\nimport LabelCelebrationAnimation from \"./LabelCelebrationAnimation\";\nimport { type LabelSizes } from \"./Label.types\";\nimport { mapSizesToTextSize } from \"./LabelConstants\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LabelProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner text wrapper.\n   */\n  labelClassName?: string;\n  /**\n   * The visual style of the label.\n   */\n  kind?: LabelKind;\n  /**\n   * The background color of the label.\n   */\n  color?: LabelColor;\n  /**\n   * The text content of the label.\n   */\n  text?: string;\n  /**\n   * If true, includes a leg (decorative extension).\n   */\n  isLegIncluded?: boolean;\n  /**\n   * Callback fired when the label is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n  /**\n   * If true, triggers a celebration animation.\n   */\n  celebrationAnimation?: boolean;\n  /**\n   * The size of the label.\n   */\n  size?: LabelSizes;\n}\n\nconst Label = forwardRef<HTMLElement, LabelProps>(\n  (\n    {\n      className,\n      labelClassName,\n      kind = \"fill\",\n      color = \"primary\",\n      text = \"\",\n      isLegIncluded = false,\n      id,\n      \"data-testid\": dataTestId,\n      onClick,\n      celebrationAnimation,\n      size = \"medium\"\n    }: LabelProps,\n    ref\n  ) => {\n    const labelRef = useRef<HTMLSpanElement>(null);\n    const mergedRef = useMergeRef(ref, labelRef);\n    const [isCelebrationAnimation, setIsCelebrationAnimation] = useState(celebrationAnimation);\n\n    const isClickable = Boolean(onClick);\n\n    const classNames = useMemo(\n      () =>\n        cx(\n          styles.label,\n          getStyle(styles, camelCase(\"kind\" + \"-\" + kind)),\n          getStyle(styles, camelCase(\"color\" + \"-\" + color)),\n          {\n            [styles.withLeg]: isLegIncluded,\n            [styles.clickable]: isClickable,\n            [styles.small]: size === \"small\"\n          },\n          labelClassName\n        ),\n      [kind, color, isLegIncluded, labelClassName, isClickable, size]\n    );\n\n    const backgroundColorStyle = useMemo(() => {\n      if (contentColors.includes(color as ContentColor)) {\n        if (kind === \"line\") {\n          return { color: `var(--color-${color})` };\n        }\n        return { backgroundColor: `var(--color-${color})` };\n      }\n    }, [color, kind]);\n\n    const onClickCallback = useCallback(\n      (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        if (onClick) {\n          event.preventDefault();\n          onClick(event);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        id,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": false,\n        \"aria-expanded\": false\n      },\n      labelRef\n    );\n\n    useEffect(() => {\n      setIsCelebrationAnimation(celebrationAnimation);\n    }, [celebrationAnimation]);\n\n    const label = useMemo(() => {\n      return (\n        <span\n          {...(isClickable && clickableProps)}\n          className={cx({ [styles.clickableWrapper]: isClickable }, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LABEL, id)}\n          data-vibe={ComponentVibeId.LABEL}\n          ref={mergedRef}\n        >\n          <Text\n            style={backgroundColorStyle}\n            element=\"span\"\n            type={mapSizesToTextSize[size]}\n            className={classNames}\n            color={color === \"dark\" ? \"onInverted\" : \"onPrimary\"}\n            data-celebration-text={isCelebrationAnimation}\n          >\n            <Text\n              element=\"span\"\n              type={mapSizesToTextSize[size]}\n              color=\"inherit\"\n              className={cx({ [styles.smallText]: size === \"small\" })}\n            >\n              {text}\n            </Text>\n            <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>\n          </Text>\n        </span>\n      );\n    }, [\n      isClickable,\n      clickableProps,\n      className,\n      dataTestId,\n      id,\n      mergedRef,\n      classNames,\n      isCelebrationAnimation,\n      text,\n      isLegIncluded,\n      size,\n      backgroundColorStyle,\n      color\n    ]);\n\n    // Celebration animation is applied only for line kind\n    if (isCelebrationAnimation && kind === \"line\") {\n      return (\n        <LabelCelebrationAnimation onAnimationEnd={() => setIsCelebrationAnimation(false)}>\n          {label}\n        </LabelCelebrationAnimation>\n      );\n    }\n\n    return label;\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","className","labelClassName","_ref$kind","kind","_ref$color","color","_ref$text","text","_ref$isLegIncluded","isLegIncluded","id","dataTestId","onClick","celebrationAnimation","_ref$size","size","labelRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isCelebrationAnimation","setIsCelebrationAnimation","isClickable","classNames","useMemo","cx","styles","label","getStyle","camelCase","_defineProperty","withLeg","clickable","small","backgroundColorStyle","contentColors","includes","concat","backgroundColor","onClickCallback","useCallback","event","preventDefault","clickableProps","useClickableProps","useEffect","React","createElement","Object","assign","clickableWrapper","getTestId","ComponentDefaultTestId","LABEL","ComponentVibeId","Text","style","element","type","mapSizesToTextSize","smallText","legWrapper","Leg","LabelCelebrationAnimation","onAnimationEnd"],"mappings":"m7BAqDMA,IAAAA,EAAQC,GACZ,SAAAC,EAcEC,GACE,IAbAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAN,EACbO,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAR,EACjBS,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAV,EACTW,cAAAA,OAAgB,IAAHD,GAAQA,EACrBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eACAc,EAAOd,EAAPc,QACAC,EAAoBf,EAApBe,qBAAoBC,EAAAhB,EACpBiB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAIXE,EAAWC,EAAwB,MACnCC,EAAYC,EAAYpB,EAAKiB,GACnCI,EAA4DC,EAASR,GAAqBS,EAAAC,EAAAH,EAAA,GAAnFI,EAAsBF,EAAA,GAAEG,EAAyBH,EAAA,GAElDI,IAAsBd,EAEtBe,EAAaC,GACjB,WAAA,OACEC,EACEC,EAAOC,MACPC,EAASF,EAAQG,EAAU,QAAe9B,IAC1C6B,EAASF,EAAQG,EAAU,SAAgB5B,IAAO6B,EAAAA,EAAAA,EAAA,CAAA,EAE/CJ,EAAOK,QAAU1B,GACjBqB,EAAOM,UAAYV,GACnBI,EAAOO,MAAiB,UAATtB,GAElBd,EACD,GACH,CAACE,EAAME,EAAOI,EAAeR,EAAgByB,EAAaX,IAGtDuB,EAAuBV,GAAQ,WACnC,GAAIW,EAAcC,SAASnC,GACzB,MAAa,SAATF,EACK,CAAEE,MAAK,eAAAoC,OAAiBpC,EAAK,MAE/B,CAAEqC,gBAAe,eAAAD,OAAiBpC,EAAK,KAElD,GAAG,CAACA,EAAOF,IAELwC,EAAkBC,GACtB,SAACC,GACKjC,IACFiC,EAAMC,iBACNlC,EAAQiC,GAEZ,GACA,CAACjC,IAGGmC,EAAiBC,EACrB,CACEpC,QAAS+B,EACTjC,GAAAA,EACA,eAAe,EACf,iBAAiB,EACjB,iBAAiB,GAEnBM,GAGFiC,GAAU,WACRxB,EAA0BZ,EAC5B,GAAG,CAACA,IAEJ,IAAMkB,EAAQH,GAAQ,WACpB,OACEsB,EACMC,cAAA,OAAAC,OAAAC,OAAA,CAAA,EAAC3B,GAAeqB,EACpB,CAAA/C,UAAW6B,EAAEK,EAAIJ,CAAAA,EAAAA,EAAOwB,iBAAmB5B,GAAe1B,GAC7C,cAAAW,GAAc4C,EAAUC,EAAuBC,MAAO/C,eACxDgD,EAAgBD,MAC3B1D,IAAKmB,IAELgC,EAAAC,cAACQ,EAAI,CACHC,MAAOtB,EACPuB,QAAQ,OACRC,KAAMC,EAAmBhD,GACzBf,UAAW2B,EACXtB,MAAiB,SAAVA,EAAmB,aAAe,oCAClBmB,GAEvB0B,EAAAC,cAACQ,EAAI,CACHE,QAAQ,OACRC,KAAMC,EAAmBhD,GACzBV,MAAM,UACNL,UAAW6B,EAAEK,EAAIJ,CAAAA,EAAAA,EAAOkC,UAAqB,UAATjD,KAEnCR,GAEH2C,EAAMC,cAAA,OAAA,CAAAnD,UAAW6B,EAAGC,EAAOmC,aAAcxD,EAAgByC,EAACC,cAAAe,EAAM,MAAG,OAI3E,GAAG,CACDxC,EACAqB,EACA/C,EACAW,EACAD,EACAQ,EACAS,EACAH,EACAjB,EACAE,EACAM,EACAuB,EACAjC,IAIF,OAAImB,GAAmC,SAATrB,EAE1B+C,EAACC,cAAAgB,EAA0B,CAAAC,eAAgB,WAAA,OAAM3C,GAA0B,EAAM,GAC9EM,GAKAA,CACT"}

package/dist/src/components/Link/Link.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as i}from"../../tests/testIds.js";import o from"classnames";import r,{forwardRef as a,useCallback as s}from"react";import{NOOP as n}from"../../utils/function-utils.js";import l from"./Link.module.scss.js";import{getStyle as d}from"../../helpers/typesciptCssModulesHelper.js";import{camelCase as m}from"es-toolkit";import{ComponentVibeId as c}from"../../tests/constants.js";import f from"../../../components/icon/dist/Icon/Icon.js";var p=a((function(a,f){var p=a.className,u=a.textClassName,b=a.href,y=void 0===b?"":b,N=a.text,j=void 0===N?"":N,k=a.rel,x=void 0===k?"noreferrer":k,h=a.onClick,I=void 0===h?n:h,g=a.target,C=void 0===g?"_blank":g,E=a["aria-label"],L=void 0===E?"":E,P=a.color,S=void 0===P?"primary":P,_=a["aria-describedby"],z=void 0===_?"":_,F=a.icon,H=void 0===F?"":F,K=a.iconPosition,T=a.id,B=void 0===T?"":T,D=a["aria-labelledby"],M=void 0===D?"":D,q=a.disableNavigation,w=void 0!==q&&q,A=a.inheritFontSize,G=void 0!==A&&A,J=a.inlineText,O=void 0!==J&&J,Q=a.style,R=a["data-testid"],U="start"===(void 0===K?"start":K),V=s((function(e){w&&e.preventDefault(),I&&I(e)}),[w,I]);return r.createElement("a",{"data-testid":R||t(i.LINK,B),"data-vibe":c.LINK,id:B,href:y,rel:x,ref:f,onClick:V,target:C,style:Q,className:o(l.link,p,d(l,m("color-"+S)),e(e({},l.inheritFontSize,G),l.inlineText,O)),"aria-label":L,"aria-describedby":z,"aria-labelledby":M},v(U,H,o(l.iconStart)),r.createElement("span",{className:o(l.text,u)},j),v(!U,H,o(l.iconEnd)))}));function v(e,t,i){if(e)return r.createElement(f,{className:i,icon:t,type:"font"})}export{p as default};
+import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as e,ComponentDefaultTestId as i}from"../../tests/testIds.js";import o from"classnames";import r,{forwardRef as a,useCallback as s}from"react";import n from"./Link.module.scss.js";import{camelCase as l}from"es-toolkit";import{ComponentVibeId as d}from"../../tests/constants.js";import m from"../../../components/icon/dist/Icon/Icon.js";import{getStyle as c}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";import{NOOP as f}from"../../../shared/dist/utils/function-utils.js";var p=a((function(a,m){var p=a.className,u=a.textClassName,b=a.href,y=void 0===b?"":b,N=a.text,j=void 0===N?"":N,h=a.rel,k=void 0===h?"noreferrer":h,x=a.onClick,I=void 0===x?f:x,g=a.target,C=void 0===g?"_blank":g,E=a["aria-label"],L=void 0===E?"":E,P=a.color,S=void 0===P?"primary":P,_=a["aria-describedby"],z=void 0===_?"":_,F=a.icon,H=void 0===F?"":F,K=a.iconPosition,T=a.id,B=void 0===T?"":T,D=a["aria-labelledby"],M=void 0===D?"":D,q=a.disableNavigation,w=void 0!==q&&q,A=a.inheritFontSize,G=void 0!==A&&A,J=a.inlineText,O=void 0!==J&&J,Q=a.style,R=a["data-testid"],U="start"===(void 0===K?"start":K),V=s((function(t){w&&t.preventDefault(),I&&I(t)}),[w,I]);return r.createElement("a",{"data-testid":R||e(i.LINK,B),"data-vibe":d.LINK,id:B,href:y,rel:k,ref:m,onClick:V,target:C,style:Q,className:o(n.link,p,c(n,l("color-"+S)),t(t({},n.inheritFontSize,G),n.inlineText,O)),"aria-label":L,"aria-describedby":z,"aria-labelledby":M},v(U,H,o(n.iconStart)),r.createElement("span",{className:o(n.text,u)},j),v(!U,H,o(n.iconEnd)))}));function v(t,e,i){if(t)return r.createElement(m,{className:i,icon:e,type:"font"})}export{p as default};
 //# sourceMappingURL=Link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type LinkColor, type LinkIconPosition, type LinkTarget } from \"./Link.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Link.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LinkProps extends VibeComponentProps {\n  /**\n   * Class name applied to the link text.\n   */\n  textClassName?: string;\n  /**\n   * The URL the link points to.\n   */\n  href?: string;\n  /**\n   * The text content of the link.\n   */\n  text?: string;\n  /**\n   * Specifies the relationship between the current document and the linked resource.\n   */\n  rel?: string;\n  /**\n   * Callback fired when the link is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Specifies where to open the linked document.\n   */\n  target?: LinkTarget;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of the element that describes this link.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of the element labeling this link.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Icon displayed next to the link text.\n   */\n  icon?: SubIcon;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconPosition?: LinkIconPosition;\n  /**\n   * If true, disables navigation when the link is clicked.\n   */\n  disableNavigation?: boolean;\n  /**\n   * If true, the link inherits the surrounding text's font size.\n   */\n  inheritFontSize?: boolean;\n  /**\n   * If true, the link is styled to fit within inline text content.\n   */\n  inlineText?: boolean;\n  /** The link's color style */\n  color?: LinkColor;\n  /**\n   * Inline style object applied to the link element.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Link = forwardRef(\n  (\n    {\n      className,\n      textClassName,\n      href = \"\",\n      text = \"\",\n      rel = \"noreferrer\",\n      onClick = NOOP,\n      target = \"_blank\",\n      \"aria-label\": ariaLabel = \"\",\n      color = \"primary\",\n      \"aria-describedby\": ariaDescribedby = \"\",\n      icon = \"\",\n      iconPosition = \"start\",\n      id = \"\",\n      \"aria-labelledby\": ariaLabelledBy = \"\",\n      disableNavigation = false,\n      inheritFontSize = false,\n      inlineText = false,\n      style,\n      \"data-testid\": dataTestId\n    }: LinkProps,\n    ref: React.ForwardedRef<HTMLAnchorElement>\n  ) => {\n    const isStart = iconPosition === \"start\";\n\n    const onClickWrapper = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        if (disableNavigation) {\n          e.preventDefault();\n        }\n        onClick && onClick(e);\n      },\n      [disableNavigation, onClick]\n    );\n\n    return (\n      <a\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINK, id)}\n        data-vibe={ComponentVibeId.LINK}\n        id={id}\n        href={href}\n        rel={rel}\n        ref={ref}\n        onClick={onClickWrapper}\n        target={target}\n        style={style}\n        className={cx(styles.link, className, getStyle(styles, camelCase(\"color-\" + color)), {\n          [styles.inheritFontSize]: inheritFontSize,\n          [styles.inlineText]: inlineText\n        })}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {getIcon(isStart, icon, cx(styles.iconStart))}\n        <span className={cx(styles.text, textClassName)}>{text}</span>\n        {getIcon(!isStart, icon, cx(styles.iconEnd))}\n      </a>\n    );\n  }\n);\n\nfunction getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {\n  if (!shouldShow) return;\n  return <Icon className={className} icon={icon} type=\"font\" />;\n}\n\nexport default Link;\n"],"names":["Link","forwardRef","_ref","ref","className","textClassName","_ref$href","href","_ref$text","text","_ref$rel","rel","_ref$onClick","onClick","NOOP","_ref$target","target","_ref$ariaLabel","ariaLabel","_ref$color","color","_ref$ariaDescribedby","ariaDescribedby","_ref$icon","icon","_ref$iconPosition","iconPosition","_ref$id","id","_ref$ariaLabelledby","ariaLabelledBy","_ref$disableNavigatio","disableNavigation","_ref$inheritFontSize","inheritFontSize","_ref$inlineText","inlineText","style","dataTestId","isStart","onClickWrapper","useCallback","e","preventDefault","React","createElement","getTestId","ComponentDefaultTestId","LINK","ComponentVibeId","cx","styles","link","getStyle","camelCase","_defineProperty","getIcon","iconStart","iconEnd","shouldShow","Icon","type"],"mappings":"4iBA6EMA,IAAAA,EAAOC,GACX,SAAAC,EAsBEC,GACE,IArBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cAAaC,EAAAJ,EACbK,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACTO,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EACTS,IAAAA,OAAM,IAAHD,EAAG,aAAYA,EAAAE,EAAAV,EAClBW,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAb,EACdc,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EAAAE,EAAAf,EACjB,cAAcgB,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EAC5BkB,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAnB,EACjB,oBAAoBoB,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACxCsB,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAvB,EACTwB,aAAsBC,EAAAzB,EACtB0B,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAA3B,EACP,mBAAmB4B,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAAA7B,EACtC8B,kBAAAA,OAAoB,IAAHD,GAAQA,EAAAE,EAAA/B,EACzBgC,gBAAAA,OAAkB,IAAHD,GAAQA,EAAAE,EAAAjC,EACvBkC,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAKnC,EAALmC,MACeC,EAAUpC,EAAzB,eAIIqC,EAA2B,gBAXhB,IAAHd,EAAG,QAAOA,GAalBe,EAAiBC,GACrB,SAACC,GACKV,GACFU,EAAEC,iBAEJ9B,GAAWA,EAAQ6B,EACrB,GACA,CAACV,EAAmBnB,IAGtB,OACE+B,EAAAC,cAAA,IAAA,CAAA,cACeP,GAAcQ,EAAUC,EAAuBC,KAAMpB,eACvDqB,EAAgBD,KAC3BpB,GAAIA,EACJrB,KAAMA,EACNI,IAAKA,EACLR,IAAKA,EACLU,QAAS2B,EACTxB,OAAQA,EACRqB,MAAOA,EACPjC,UAAW8C,EAAGC,EAAOC,KAAMhD,EAAWiD,EAASF,EAAQG,EAAU,SAAWlC,IAAOmC,EAAAA,EAAA,CAAA,EAChFJ,EAAOjB,gBAAkBA,GACzBiB,EAAOf,WAAaA,IAEX,aAAAlB,EACM,mBAAAI,oBACDQ,GAEhB0B,EAAQjB,EAASf,EAAM0B,EAAGC,EAAOM,YAClCb,EAAAC,cAAA,OAAA,CAAMzC,UAAW8C,EAAGC,EAAO1C,KAAMJ,IAAiBI,GACjD+C,GAASjB,EAASf,EAAM0B,EAAGC,EAAOO,UAGzC,IAGF,SAASF,EAAQG,EAAqBnC,EAA+CpB,GACnF,GAAKuD,EACL,OAAOf,EAACC,cAAAe,EAAK,CAAAxD,UAAWA,EAAWoB,KAAMA,EAAMqC,KAAK,QACtD"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type LinkColor, type LinkIconPosition, type LinkTarget } from \"./Link.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Link.module.scss\";\n\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LinkProps extends VibeComponentProps {\n  /**\n   * Class name applied to the link text.\n   */\n  textClassName?: string;\n  /**\n   * The URL the link points to.\n   */\n  href?: string;\n  /**\n   * The text content of the link.\n   */\n  text?: string;\n  /**\n   * Specifies the relationship between the current document and the linked resource.\n   */\n  rel?: string;\n  /**\n   * Callback fired when the link is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Specifies where to open the linked document.\n   */\n  target?: LinkTarget;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of the element that describes this link.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of the element labeling this link.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Icon displayed next to the link text.\n   */\n  icon?: SubIcon;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconPosition?: LinkIconPosition;\n  /**\n   * If true, disables navigation when the link is clicked.\n   */\n  disableNavigation?: boolean;\n  /**\n   * If true, the link inherits the surrounding text's font size.\n   */\n  inheritFontSize?: boolean;\n  /**\n   * If true, the link is styled to fit within inline text content.\n   */\n  inlineText?: boolean;\n  /** The link's color style */\n  color?: LinkColor;\n  /**\n   * Inline style object applied to the link element.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Link = forwardRef(\n  (\n    {\n      className,\n      textClassName,\n      href = \"\",\n      text = \"\",\n      rel = \"noreferrer\",\n      onClick = NOOP,\n      target = \"_blank\",\n      \"aria-label\": ariaLabel = \"\",\n      color = \"primary\",\n      \"aria-describedby\": ariaDescribedby = \"\",\n      icon = \"\",\n      iconPosition = \"start\",\n      id = \"\",\n      \"aria-labelledby\": ariaLabelledBy = \"\",\n      disableNavigation = false,\n      inheritFontSize = false,\n      inlineText = false,\n      style,\n      \"data-testid\": dataTestId\n    }: LinkProps,\n    ref: React.ForwardedRef<HTMLAnchorElement>\n  ) => {\n    const isStart = iconPosition === \"start\";\n\n    const onClickWrapper = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        if (disableNavigation) {\n          e.preventDefault();\n        }\n        onClick && onClick(e);\n      },\n      [disableNavigation, onClick]\n    );\n\n    return (\n      <a\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINK, id)}\n        data-vibe={ComponentVibeId.LINK}\n        id={id}\n        href={href}\n        rel={rel}\n        ref={ref}\n        onClick={onClickWrapper}\n        target={target}\n        style={style}\n        className={cx(styles.link, className, getStyle(styles, camelCase(\"color-\" + color)), {\n          [styles.inheritFontSize]: inheritFontSize,\n          [styles.inlineText]: inlineText\n        })}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {getIcon(isStart, icon, cx(styles.iconStart))}\n        <span className={cx(styles.text, textClassName)}>{text}</span>\n        {getIcon(!isStart, icon, cx(styles.iconEnd))}\n      </a>\n    );\n  }\n);\n\nfunction getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {\n  if (!shouldShow) return;\n  return <Icon className={className} icon={icon} type=\"font\" />;\n}\n\nexport default Link;\n"],"names":["Link","forwardRef","_ref","ref","className","textClassName","_ref$href","href","_ref$text","text","_ref$rel","rel","_ref$onClick","onClick","NOOP","_ref$target","target","_ref$ariaLabel","ariaLabel","_ref$color","color","_ref$ariaDescribedby","ariaDescribedby","_ref$icon","icon","_ref$iconPosition","iconPosition","_ref$id","id","_ref$ariaLabelledby","ariaLabelledBy","_ref$disableNavigatio","disableNavigation","_ref$inheritFontSize","inheritFontSize","_ref$inlineText","inlineText","style","dataTestId","isStart","onClickWrapper","useCallback","e","preventDefault","React","createElement","getTestId","ComponentDefaultTestId","LINK","ComponentVibeId","cx","styles","link","getStyle","camelCase","_defineProperty","getIcon","iconStart","iconEnd","shouldShow","Icon","type"],"mappings":"wkBA6EMA,IAAAA,EAAOC,GACX,SAAAC,EAsBEC,GACE,IArBAC,EAASF,EAATE,UACAC,EAAaH,EAAbG,cAAaC,EAAAJ,EACbK,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACTO,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EACTS,IAAAA,OAAM,IAAHD,EAAG,aAAYA,EAAAE,EAAAV,EAClBW,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAb,EACdc,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EAAAE,EAAAf,EACjB,cAAcgB,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EAC5BkB,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAnB,EACjB,oBAAoBoB,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACxCsB,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAvB,EACTwB,aAAsBC,EAAAzB,EACtB0B,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAA3B,EACP,mBAAmB4B,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAAA7B,EACtC8B,kBAAAA,OAAoB,IAAHD,GAAQA,EAAAE,EAAA/B,EACzBgC,gBAAAA,OAAkB,IAAHD,GAAQA,EAAAE,EAAAjC,EACvBkC,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAKnC,EAALmC,MACeC,EAAUpC,EAAzB,eAIIqC,EAA2B,gBAXhB,IAAHd,EAAG,QAAOA,GAalBe,EAAiBC,GACrB,SAACC,GACKV,GACFU,EAAEC,iBAEJ9B,GAAWA,EAAQ6B,EACrB,GACA,CAACV,EAAmBnB,IAGtB,OACE+B,EAAAC,cAAA,IAAA,CAAA,cACeP,GAAcQ,EAAUC,EAAuBC,KAAMpB,eACvDqB,EAAgBD,KAC3BpB,GAAIA,EACJrB,KAAMA,EACNI,IAAKA,EACLR,IAAKA,EACLU,QAAS2B,EACTxB,OAAQA,EACRqB,MAAOA,EACPjC,UAAW8C,EAAGC,EAAOC,KAAMhD,EAAWiD,EAASF,EAAQG,EAAU,SAAWlC,IAAOmC,EAAAA,EAAA,CAAA,EAChFJ,EAAOjB,gBAAkBA,GACzBiB,EAAOf,WAAaA,IAEX,aAAAlB,EACM,mBAAAI,oBACDQ,GAEhB0B,EAAQjB,EAASf,EAAM0B,EAAGC,EAAOM,YAClCb,EAAAC,cAAA,OAAA,CAAMzC,UAAW8C,EAAGC,EAAO1C,KAAMJ,IAAiBI,GACjD+C,GAASjB,EAASf,EAAM0B,EAAGC,EAAOO,UAGzC,IAGF,SAASF,EAAQG,EAAqBnC,EAA+CpB,GACnF,GAAKuD,EACL,OAAOf,EAACC,cAAAe,EAAK,CAAAxD,UAAWA,EAAWoB,KAAMA,EAAMqC,KAAK,QACtD"}

package/dist/src/components/List/List.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import r,{forwardRef as i,useRef as n,useState as o,useCallback as s,useEffect as a,useMemo as l}from"react";import u from"../../hooks/useMergeRef.js";import c from"../../hooks/useKeyEvent/index.js";import{VirtualizedListItems as d}from"./VirtualizedListItems/VirtualizedListItems.js";import{keyCodes as m,UP_DOWN_ARROWS as f}from"../../constants/keyCodes.js";import{getTestId as p,ComponentDefaultTestId as v}from"../../tests/testIds.js";import{ListContext as b}from"./utils/ListContext.js";import{useListId as y,getListItemIndexById as I,getNextListItemIndex as j,getPrevListItemIndex as x,getListItemIdByIndex as L,isListItem as k,getListItemComponentType as A}from"./utils/ListUtils.js";import E from"./List.module.scss.js";import{ComponentVibeId as h}from"../../tests/constants.js";var g=i((function(i,g){var R=i.className,O=i.id,T=i.component,V=void 0===T?"ul":T,_=i.children,C=i["aria-label"],N=i["aria-describedby"],P=i["aria-controls"],W=i.renderOnlyVisibleItems,z=void 0!==W&&W,D=i.style,H=i.role,M=void 0===H?"listbox":H,S=i["data-testid"],U=n(null),B=u(g,U),F=n([]),K=y(O),q=o(0),w=e(q,2),G=w[0],J=w[1],Q=V,X=s((function(e){var t;J(I(F,e)),null===(t=null==U?void 0:U.current)||void 0===t||t.setAttribute("aria-activedescendant",e)}),[]),Y=s((function(e){if(!z){e.preventDefault();var t=e.key===m.UP_ARROW,r=void 0;e.key===m.DOWN_ARROW&&F.current.length>G+1?r=j(G,F):t&&G>0&&(r=x(G,F)),void 0!==r&&(X(L(F,r)),F.current[r].focus())}}),[G,z,X]);c({keys:f,callback:Y,ref:U}),a((function(){var e=F.current.findIndex((function(e){return e instanceof HTMLElement&&k(e)&&"true"===(null==e?void 0:e.getAttribute("aria-selected"))}));if(-1!==e)X(L(F,e));else{var t=F.current.findIndex((function(e){return k(e)}));-1!==t&&X(L(F,t))}}),[X]);var Z=l((function(){var e=Array.isArray(_)?_:[_];return z?e=r.createElement(d,null,e):(F.current=F.current.slice(0,e.length),e=r.Children.map(e,(function(e,t){if(!r.isValidElement(e))return e;var i=e.props.id||"".concat(K,"-item-").concat(t),n=F.current[t],o=null==n||k(n);return r.cloneElement(e,{ref:function(e){return F.current[t]=e},tabIndex:G===t&&o?0:-1,id:i,component:A(V),role:e.props.role})}))),e}),[_,V,G,K,z]);return r.createElement(b.Provider,{value:{updateFocusedItem:X}},r.createElement(Q,{"data-testid":S||p(v.LIST,O),"data-vibe":h.LIST,ref:B,style:D,className:t(E.list,R),id:K,"aria-label":C,"aria-describedby":N,"aria-controls":P,tabIndex:-1,role:M},Z))}));export{g as default};
+import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import r,{forwardRef as i,useRef as n,useState as s,useCallback as o,useEffect as a,useMemo as l}from"react";import{VirtualizedListItems as u}from"./VirtualizedListItems/VirtualizedListItems.js";import{keyCodes as c,UP_DOWN_ARROWS as d}from"../../constants/keyCodes.js";import{getTestId as m,ComponentDefaultTestId as f}from"../../tests/testIds.js";import{ListContext as p}from"./utils/ListContext.js";import{useListId as v,getListItemIndexById as b,getNextListItemIndex as y,getPrevListItemIndex as I,getListItemIdByIndex as j,isListItem as h,getListItemComponentType as L}from"./utils/ListUtils.js";import k from"./List.module.scss.js";import{ComponentVibeId as x}from"../../tests/constants.js";import{useMergeRef as A}from"../../../shared/dist/hooks/useMergeRef.js";import{useKeyEvent as E}from"../../../shared/dist/hooks/useKeyEvent.js";var g=i((function(i,g){var R=i.className,O=i.id,T=i.component,V=void 0===T?"ul":T,_=i.children,C=i["aria-label"],N=i["aria-describedby"],P=i["aria-controls"],W=i.renderOnlyVisibleItems,z=void 0!==W&&W,D=i.style,H=i.role,M=void 0===H?"listbox":H,S=i["data-testid"],U=n(null),B=A(g,U),F=n([]),K=v(O),q=s(0),w=e(q,2),G=w[0],J=w[1],Q=V,X=o((function(e){var t;J(b(F,e)),null===(t=null==U?void 0:U.current)||void 0===t||t.setAttribute("aria-activedescendant",e)}),[]),Y=o((function(e){if(!z){e.preventDefault();var t=e.key===c.UP_ARROW,r=void 0;e.key===c.DOWN_ARROW&&F.current.length>G+1?r=y(G,F):t&&G>0&&(r=I(G,F)),void 0!==r&&(X(j(F,r)),F.current[r].focus())}}),[G,z,X]);E({keys:d,callback:Y,ref:U}),a((function(){var e=F.current.findIndex((function(e){return e instanceof HTMLElement&&h(e)&&"true"===(null==e?void 0:e.getAttribute("aria-selected"))}));if(-1!==e)X(j(F,e));else{var t=F.current.findIndex((function(e){return h(e)}));-1!==t&&X(j(F,t))}}),[X]);var Z=l((function(){var e=Array.isArray(_)?_:[_];return z?e=r.createElement(u,null,e):(F.current=F.current.slice(0,e.length),e=r.Children.map(e,(function(e,t){if(!r.isValidElement(e))return e;var i=e.props.id||"".concat(K,"-item-").concat(t),n=F.current[t],s=null==n||h(n);return r.cloneElement(e,{ref:function(e){return F.current[t]=e},tabIndex:G===t&&s?0:-1,id:i,component:L(V),role:e.props.role})}))),e}),[_,V,G,K,z]);return r.createElement(p.Provider,{value:{updateFocusedItem:X}},r.createElement(Q,{"data-testid":S||m(f.LIST,O),"data-vibe":x.LIST,ref:B,style:D,className:t(k.list,R),id:K,"aria-label":C,"aria-describedby":N,"aria-controls":P,tabIndex:-1,role:M},Z))}));export{g as default};
 //# sourceMappingURL=List.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { VirtualizedListItems } from \"./VirtualizedListItems/VirtualizedListItems\";\nimport { keyCodes, UP_DOWN_ARROWS } from \"../../constants/keyCodes\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ListItemProps } from \"../ListItem/ListItem\";\nimport { type ListTitleProps } from \"../ListTitle/ListTitle\";\nimport { type ListElement } from \"./List.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { ListContext } from \"./utils/ListContext\";\nimport {\n  getListItemComponentType,\n  getListItemIdByIndex,\n  getListItemIndexById,\n  getNextListItemIndex,\n  getPrevListItemIndex,\n  isListItem,\n  useListId\n} from \"./utils/ListUtils\";\nimport styles from \"./List.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ListProps extends VibeComponentProps {\n  /**\n   * The wrapping component for the list.\n   */\n  component?: ListElement;\n  /**\n   * The ARIA label describing the list.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of an element that describes the list.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of an element controlled by the list.\n   */\n  \"aria-controls\"?: AriaAttributes[\"aria-controls\"];\n  /**\n   * The child elements inside the list.\n   */\n  children?: ReactElement<ListItemProps | ListTitleProps> | ReactElement<ListItemProps | ListTitleProps>[];\n  /**\n   * If true, uses a virtualized list to render only visible items for performance optimization.\n   */\n  renderOnlyVisibleItems?: boolean;\n  /**\n   * Custom inline styles applied to the list.\n   */\n  style?: CSSProperties;\n  /**\n   * The ARIA role of the list.\n   */\n  role?: AriaRole;\n}\n\nconst List = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      renderOnlyVisibleItems = false,\n      style,\n      role = \"listbox\",\n      \"data-testid\": dataTestId\n    }: ListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const childrenRefs: React.MutableRefObject<HTMLElement[]> = useRef([]);\n\n    const overrideId = useListId(id);\n    const [focusIndex, setFocusIndex] = useState(0);\n    const Component = component;\n\n    const updateFocusedItem = useCallback((id: string) => {\n      setFocusIndex(getListItemIndexById(childrenRefs, id));\n      componentRef?.current?.setAttribute(\"aria-activedescendant\", id);\n    }, []);\n\n    const onUpDownArrows = useCallback(\n      (event: KeyboardEvent) => {\n        if (renderOnlyVisibleItems) {\n          return;\n        }\n        event.preventDefault();\n\n        const isUpKey = event.key === keyCodes.UP_ARROW;\n        const isDownKey = event.key === keyCodes.DOWN_ARROW;\n        let overrideFocusIndex = undefined;\n\n        if (isDownKey && focusIndex + 1 < childrenRefs.current.length) {\n          overrideFocusIndex = getNextListItemIndex(focusIndex, childrenRefs);\n        } else if (isUpKey && focusIndex > 0) {\n          overrideFocusIndex = getPrevListItemIndex(focusIndex, childrenRefs);\n        }\n        if (overrideFocusIndex !== undefined) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, overrideFocusIndex));\n          childrenRefs.current[overrideFocusIndex].focus();\n        }\n      },\n      [focusIndex, renderOnlyVisibleItems, updateFocusedItem]\n    );\n\n    useKeyEvent({\n      keys: UP_DOWN_ARROWS,\n      callback: onUpDownArrows,\n      ref: componentRef\n    });\n\n    useEffect(() => {\n      const selectedItemIndex = childrenRefs.current.findIndex(\n        child => child instanceof HTMLElement && isListItem(child) && child?.getAttribute(\"aria-selected\") === \"true\"\n      );\n      if (selectedItemIndex !== -1) {\n        updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));\n      } else {\n        const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));\n        if (firstFocusableIndex !== -1) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));\n        }\n      }\n    }, [updateFocusedItem]);\n\n    const overrideChildren = useMemo(() => {\n      let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];\n      if (renderOnlyVisibleItems) {\n        override = <VirtualizedListItems>{override}</VirtualizedListItems>;\n      } else {\n        childrenRefs.current = childrenRefs.current.slice(0, override.length);\n        override = React.Children.map(override, (child, index) => {\n          if (!React.isValidElement(child)) {\n            return child;\n          }\n          const id = (child.props as ListItemProps).id || `${overrideId}-item-${index}`;\n          const currentRef = childrenRefs.current[index];\n          const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n          return React.cloneElement(child, {\n            // @ts-ignore not sure how to deal with ref here\n            ref: ref => (childrenRefs.current[index] = ref),\n            tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n            id,\n            component: getListItemComponentType(component),\n            role: (child.props as ListItemProps).role\n          });\n        });\n      }\n\n      return override;\n    }, [children, component, focusIndex, overrideId, renderOnlyVisibleItems]);\n\n    return (\n      <ListContext.Provider value={{ updateFocusedItem }}>\n        <Component\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST, id)}\n          data-vibe={ComponentVibeId.LIST}\n          ref={mergedRef}\n          style={style}\n          className={cx(styles.list, className)}\n          id={overrideId}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          tabIndex={-1}\n          role={role}\n        >\n          {overrideChildren}\n        </Component>\n      </ListContext.Provider>\n    );\n  }\n);\n\nexport default List;\n"],"names":["List","forwardRef","_ref","ref","className","id","_ref$component","component","children","ariaLabel","ariaDescribedBy","ariaControls","_ref$renderOnlyVisibl","renderOnlyVisibleItems","style","_ref$role","role","dataTestId","componentRef","useRef","mergedRef","useMergeRef","childrenRefs","overrideId","useListId","_useState","useState","_useState2","_slicedToArray","focusIndex","setFocusIndex","Component","updateFocusedItem","useCallback","getListItemIndexById","_a","current","setAttribute","onUpDownArrows","event","preventDefault","isUpKey","key","keyCodes","UP_ARROW","overrideFocusIndex","undefined","DOWN_ARROW","length","getNextListItemIndex","getPrevListItemIndex","getListItemIdByIndex","focus","useKeyEvent","keys","UP_DOWN_ARROWS","callback","useEffect","selectedItemIndex","findIndex","child","HTMLElement","isListItem","getAttribute","firstFocusableIndex","overrideChildren","useMemo","override","Array","isArray","React","createElement","VirtualizedListItems","slice","Children","map","index","isValidElement","props","concat","currentRef","isFocusableItem","cloneElement","_ref2","tabIndex","getListItemComponentType","ListContext","Provider","value","getTestId","ComponentDefaultTestId","LIST","ComponentVibeId","cx","styles","list"],"mappings":"43BAsEMA,IAAAA,EAAOC,GACX,SAAAC,EAcEC,GACE,IAbAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAChBE,EAAQN,EAARM,SACcC,EAASP,EAAvB,cACoBQ,EAAeR,EAAnC,oBACiBS,EAAYT,EAA7B,iBAAeU,EAAAV,EACfW,uBAAAA,OAAyB,IAAHD,GAAQA,EAC9BE,EAAKZ,EAALY,MAAKC,EAAAb,EACLc,KAAAA,OAAO,IAAHD,EAAG,UAASA,EACDE,EAAUf,EAAzB,eAIIgB,EAAeC,EAAO,MACtBC,EAAYC,EAAYlB,EAAKe,GAC7BI,EAAsDH,EAAO,IAE7DI,EAAaC,EAAUnB,GAC7BoB,EAAoCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxCI,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAC1BI,EAAYxB,EAEZyB,EAAoBC,GAAY,SAAC5B,SACrCyB,EAAcI,EAAqBZ,EAAcjB,IAC1B,QAAvB8B,EAAAjB,aAAY,EAAZA,EAAckB,eAAS,IAAAD,GAAAA,EAAAE,aAAa,wBAAyBhC,EAC9D,GAAE,IAEGiC,EAAiBL,GACrB,SAACM,GACC,IAAI1B,EAAJ,CAGA0B,EAAMC,iBAEN,IAAMC,EAAUF,EAAMG,MAAQC,EAASC,SAEnCC,OAAqBC,EADPP,EAAMG,MAAQC,EAASI,YAGPzB,EAAac,QAAQY,OAAtCnB,EAAa,EAC5BgB,EAAqBI,EAAqBpB,EAAYP,GAC7CmB,GAAWZ,EAAa,IACjCgB,EAAqBK,EAAqBrB,EAAYP,SAE7BwB,IAAvBD,IACFb,EAAkBmB,EAAqB7B,EAAcuB,IACrDvB,EAAac,QAAQS,GAAoBO,QAd3C,CAgBD,GACD,CAACvB,EAAYhB,EAAwBmB,IAGvCqB,EAAY,CACVC,KAAMC,EACNC,SAAUlB,EACVnC,IAAKe,IAGPuC,GAAU,WACR,IAAMC,EAAoBpC,EAAac,QAAQuB,WAC7C,SAAAC,GAAK,OAAIA,aAAiBC,aAAeC,EAAWF,IAAmD,UAAzCA,aAAA,EAAAA,EAAOG,aAAa,qBAEpF,IAA2B,IAAvBL,EACF1B,EAAkBmB,EAAqB7B,EAAcoC,QAChD,CACL,IAAMM,EAAsB1C,EAAac,QAAQuB,WAAU,SAAAC,GAAK,OAAIE,EAAWF,OAClD,IAAzBI,GACFhC,EAAkBmB,EAAqB7B,EAAc0C,GAEzD,CACF,GAAG,CAAChC,IAEJ,IAAMiC,EAAmBC,GAAQ,WAC/B,IAAIC,EAA0CC,MAAMC,QAAQ7D,GAAYA,EAAW,CAACA,GAuBpF,OAtBIK,EACFsD,EAAWG,EAACC,cAAAC,EAAsB,KAAAL,IAElC7C,EAAac,QAAUd,EAAac,QAAQqC,MAAM,EAAGN,EAASnB,QAC9DmB,EAAWG,EAAMI,SAASC,IAAIR,GAAU,SAACP,EAAOgB,GAC9C,IAAKN,EAAMO,eAAejB,GACxB,OAAOA,EAET,IAAMvD,EAAMuD,EAAMkB,MAAwBzE,IAAE0E,GAAAA,OAAOxD,EAAU,UAAAwD,OAASH,GAChEI,EAAa1D,EAAac,QAAQwC,GAClCK,EAAkBD,SAAmDlB,EAAWkB,GACtF,OAAOV,EAAMY,aAAatB,EAAO,CAE/BzD,IAAK,SAAGgF,GAAA,OAAK7D,EAAac,QAAQwC,GAASzE,CAAI,EAC/CiF,SAAUvD,IAAe+C,GAASK,EAAkB,GAAK,EACzD5E,GAAAA,EACAE,UAAW8E,EAAyB9E,GACpCS,KAAO4C,EAAMkB,MAAwB9D,MAEzC,KAGKmD,CACT,GAAG,CAAC3D,EAAUD,EAAWsB,EAAYN,EAAYV,IAEjD,OACEyD,EAACC,cAAAe,EAAYC,UAASC,MAAO,CAAExD,kBAAAA,IAC7BsC,EAACC,cAAAxC,EACc,CAAA,cAAAd,GAAcwE,EAAUC,EAAuBC,KAAMtF,GAAG,YAC1DuF,EAAgBD,KAC3BxF,IAAKiB,EACLN,MAAOA,EACPV,UAAWyF,EAAGC,EAAOC,KAAM3F,GAC3BC,GAAIkB,EACQ,aAAAd,EACM,mBAAAC,EACH,gBAAAC,EACfyE,UAAW,EACXpE,KAAMA,GAELiD,GAIT"}
+{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { VirtualizedListItems } from \"./VirtualizedListItems/VirtualizedListItems\";\nimport { keyCodes, UP_DOWN_ARROWS } from \"../../constants/keyCodes\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ListItemProps } from \"../ListItem/ListItem\";\nimport { type ListTitleProps } from \"../ListTitle/ListTitle\";\nimport { type ListElement } from \"./List.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { ListContext } from \"./utils/ListContext\";\nimport {\n  getListItemComponentType,\n  getListItemIdByIndex,\n  getListItemIndexById,\n  getNextListItemIndex,\n  getPrevListItemIndex,\n  isListItem,\n  useListId\n} from \"./utils/ListUtils\";\nimport styles from \"./List.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ListProps extends VibeComponentProps {\n  /**\n   * The wrapping component for the list.\n   */\n  component?: ListElement;\n  /**\n   * The ARIA label describing the list.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of an element that describes the list.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of an element controlled by the list.\n   */\n  \"aria-controls\"?: AriaAttributes[\"aria-controls\"];\n  /**\n   * The child elements inside the list.\n   */\n  children?: ReactElement<ListItemProps | ListTitleProps> | ReactElement<ListItemProps | ListTitleProps>[];\n  /**\n   * If true, uses a virtualized list to render only visible items for performance optimization.\n   */\n  renderOnlyVisibleItems?: boolean;\n  /**\n   * Custom inline styles applied to the list.\n   */\n  style?: CSSProperties;\n  /**\n   * The ARIA role of the list.\n   */\n  role?: AriaRole;\n}\n\nconst List = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      renderOnlyVisibleItems = false,\n      style,\n      role = \"listbox\",\n      \"data-testid\": dataTestId\n    }: ListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const childrenRefs: React.MutableRefObject<HTMLElement[]> = useRef([]);\n\n    const overrideId = useListId(id);\n    const [focusIndex, setFocusIndex] = useState(0);\n    const Component = component;\n\n    const updateFocusedItem = useCallback((id: string) => {\n      setFocusIndex(getListItemIndexById(childrenRefs, id));\n      componentRef?.current?.setAttribute(\"aria-activedescendant\", id);\n    }, []);\n\n    const onUpDownArrows = useCallback(\n      (event: KeyboardEvent) => {\n        if (renderOnlyVisibleItems) {\n          return;\n        }\n        event.preventDefault();\n\n        const isUpKey = event.key === keyCodes.UP_ARROW;\n        const isDownKey = event.key === keyCodes.DOWN_ARROW;\n        let overrideFocusIndex = undefined;\n\n        if (isDownKey && focusIndex + 1 < childrenRefs.current.length) {\n          overrideFocusIndex = getNextListItemIndex(focusIndex, childrenRefs);\n        } else if (isUpKey && focusIndex > 0) {\n          overrideFocusIndex = getPrevListItemIndex(focusIndex, childrenRefs);\n        }\n        if (overrideFocusIndex !== undefined) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, overrideFocusIndex));\n          childrenRefs.current[overrideFocusIndex].focus();\n        }\n      },\n      [focusIndex, renderOnlyVisibleItems, updateFocusedItem]\n    );\n\n    useKeyEvent({\n      keys: UP_DOWN_ARROWS,\n      callback: onUpDownArrows,\n      ref: componentRef\n    });\n\n    useEffect(() => {\n      const selectedItemIndex = childrenRefs.current.findIndex(\n        child => child instanceof HTMLElement && isListItem(child) && child?.getAttribute(\"aria-selected\") === \"true\"\n      );\n      if (selectedItemIndex !== -1) {\n        updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));\n      } else {\n        const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));\n        if (firstFocusableIndex !== -1) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));\n        }\n      }\n    }, [updateFocusedItem]);\n\n    const overrideChildren = useMemo(() => {\n      let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];\n      if (renderOnlyVisibleItems) {\n        override = <VirtualizedListItems>{override}</VirtualizedListItems>;\n      } else {\n        childrenRefs.current = childrenRefs.current.slice(0, override.length);\n        override = React.Children.map(override, (child, index) => {\n          if (!React.isValidElement(child)) {\n            return child;\n          }\n          const id = (child.props as ListItemProps).id || `${overrideId}-item-${index}`;\n          const currentRef = childrenRefs.current[index];\n          const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n          return React.cloneElement(child, {\n            // @ts-ignore not sure how to deal with ref here\n            ref: ref => (childrenRefs.current[index] = ref),\n            tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n            id,\n            component: getListItemComponentType(component),\n            role: (child.props as ListItemProps).role\n          });\n        });\n      }\n\n      return override;\n    }, [children, component, focusIndex, overrideId, renderOnlyVisibleItems]);\n\n    return (\n      <ListContext.Provider value={{ updateFocusedItem }}>\n        <Component\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST, id)}\n          data-vibe={ComponentVibeId.LIST}\n          ref={mergedRef}\n          style={style}\n          className={cx(styles.list, className)}\n          id={overrideId}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          tabIndex={-1}\n          role={role}\n        >\n          {overrideChildren}\n        </Component>\n      </ListContext.Provider>\n    );\n  }\n);\n\nexport default List;\n"],"names":["List","forwardRef","_ref","ref","className","id","_ref$component","component","children","ariaLabel","ariaDescribedBy","ariaControls","_ref$renderOnlyVisibl","renderOnlyVisibleItems","style","_ref$role","role","dataTestId","componentRef","useRef","mergedRef","useMergeRef","childrenRefs","overrideId","useListId","_useState","useState","_useState2","_slicedToArray","focusIndex","setFocusIndex","Component","updateFocusedItem","useCallback","getListItemIndexById","_a","current","setAttribute","onUpDownArrows","event","preventDefault","isUpKey","key","keyCodes","UP_ARROW","overrideFocusIndex","undefined","DOWN_ARROW","length","getNextListItemIndex","getPrevListItemIndex","getListItemIdByIndex","focus","useKeyEvent","keys","UP_DOWN_ARROWS","callback","useEffect","selectedItemIndex","findIndex","child","HTMLElement","isListItem","getAttribute","firstFocusableIndex","overrideChildren","useMemo","override","Array","isArray","React","createElement","VirtualizedListItems","slice","Children","map","index","isValidElement","props","concat","currentRef","isFocusableItem","cloneElement","_ref2","tabIndex","getListItemComponentType","ListContext","Provider","value","getTestId","ComponentDefaultTestId","LIST","ComponentVibeId","cx","styles","list"],"mappings":"k7BAsEMA,IAAAA,EAAOC,GACX,SAAAC,EAcEC,GACE,IAbAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAChBE,EAAQN,EAARM,SACcC,EAASP,EAAvB,cACoBQ,EAAeR,EAAnC,oBACiBS,EAAYT,EAA7B,iBAAeU,EAAAV,EACfW,uBAAAA,OAAyB,IAAHD,GAAQA,EAC9BE,EAAKZ,EAALY,MAAKC,EAAAb,EACLc,KAAAA,OAAO,IAAHD,EAAG,UAASA,EACDE,EAAUf,EAAzB,eAIIgB,EAAeC,EAAO,MACtBC,EAAYC,EAAYlB,EAAKe,GAC7BI,EAAsDH,EAAO,IAE7DI,EAAaC,EAAUnB,GAC7BoB,EAAoCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAAxCI,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAC1BI,EAAYxB,EAEZyB,EAAoBC,GAAY,SAAC5B,SACrCyB,EAAcI,EAAqBZ,EAAcjB,IAC1B,QAAvB8B,EAAAjB,aAAY,EAAZA,EAAckB,eAAS,IAAAD,GAAAA,EAAAE,aAAa,wBAAyBhC,EAC9D,GAAE,IAEGiC,EAAiBL,GACrB,SAACM,GACC,IAAI1B,EAAJ,CAGA0B,EAAMC,iBAEN,IAAMC,EAAUF,EAAMG,MAAQC,EAASC,SAEnCC,OAAqBC,EADPP,EAAMG,MAAQC,EAASI,YAGPzB,EAAac,QAAQY,OAAtCnB,EAAa,EAC5BgB,EAAqBI,EAAqBpB,EAAYP,GAC7CmB,GAAWZ,EAAa,IACjCgB,EAAqBK,EAAqBrB,EAAYP,SAE7BwB,IAAvBD,IACFb,EAAkBmB,EAAqB7B,EAAcuB,IACrDvB,EAAac,QAAQS,GAAoBO,QAd3C,CAgBD,GACD,CAACvB,EAAYhB,EAAwBmB,IAGvCqB,EAAY,CACVC,KAAMC,EACNC,SAAUlB,EACVnC,IAAKe,IAGPuC,GAAU,WACR,IAAMC,EAAoBpC,EAAac,QAAQuB,WAC7C,SAAAC,GAAK,OAAIA,aAAiBC,aAAeC,EAAWF,IAAmD,UAAzCA,aAAA,EAAAA,EAAOG,aAAa,qBAEpF,IAA2B,IAAvBL,EACF1B,EAAkBmB,EAAqB7B,EAAcoC,QAChD,CACL,IAAMM,EAAsB1C,EAAac,QAAQuB,WAAU,SAAAC,GAAK,OAAIE,EAAWF,OAClD,IAAzBI,GACFhC,EAAkBmB,EAAqB7B,EAAc0C,GAEzD,CACF,GAAG,CAAChC,IAEJ,IAAMiC,EAAmBC,GAAQ,WAC/B,IAAIC,EAA0CC,MAAMC,QAAQ7D,GAAYA,EAAW,CAACA,GAuBpF,OAtBIK,EACFsD,EAAWG,EAACC,cAAAC,EAAsB,KAAAL,IAElC7C,EAAac,QAAUd,EAAac,QAAQqC,MAAM,EAAGN,EAASnB,QAC9DmB,EAAWG,EAAMI,SAASC,IAAIR,GAAU,SAACP,EAAOgB,GAC9C,IAAKN,EAAMO,eAAejB,GACxB,OAAOA,EAET,IAAMvD,EAAMuD,EAAMkB,MAAwBzE,IAAE0E,GAAAA,OAAOxD,EAAU,UAAAwD,OAASH,GAChEI,EAAa1D,EAAac,QAAQwC,GAClCK,EAAkBD,SAAmDlB,EAAWkB,GACtF,OAAOV,EAAMY,aAAatB,EAAO,CAE/BzD,IAAK,SAAGgF,GAAA,OAAK7D,EAAac,QAAQwC,GAASzE,CAAI,EAC/CiF,SAAUvD,IAAe+C,GAASK,EAAkB,GAAK,EACzD5E,GAAAA,EACAE,UAAW8E,EAAyB9E,GACpCS,KAAO4C,EAAMkB,MAAwB9D,MAEzC,KAGKmD,CACT,GAAG,CAAC3D,EAAUD,EAAWsB,EAAYN,EAAYV,IAEjD,OACEyD,EAACC,cAAAe,EAAYC,UAASC,MAAO,CAAExD,kBAAAA,IAC7BsC,EAACC,cAAAxC,EACc,CAAA,cAAAd,GAAcwE,EAAUC,EAAuBC,KAAMtF,GAAG,YAC1DuF,EAAgBD,KAC3BxF,IAAKiB,EACLN,MAAOA,EACPV,UAAWyF,EAAGC,EAAOC,KAAM3F,GAC3BC,GAAIkB,EACQ,aAAAd,EACM,mBAAAC,EACH,gBAAAC,EACfyE,UAAW,EACXpE,KAAMA,GAELiD,GAIT"}

package/dist/src/components/List/utils/ListContext.js

@@ -1,2 +1,2 @@
-import t from"react";import{NOOP as e}from"../../../utils/function-utils.js";var o=t.createContext({updateFocusedItem:e});export{o as ListContext};
+import t from"react";import{NOOP as e}from"../../../../shared/dist/utils/function-utils.js";var r=t.createContext({updateFocusedItem:e});export{r as ListContext};
 //# sourceMappingURL=ListContext.js.map

package/dist/src/components/List/utils/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","sources":["../../../../../src/components/List/utils/ListContext.ts"],"sourcesContent":["import React from \"react\";\nimport { NOOP } from \"../../../utils/function-utils\";\n\ntype ListContextType = {\n  /**\n   * A callback function which is being called when the item is being focused by keyboard navigation\n   * @param ListItem id\n   */\n  updateFocusedItem: (id: string) => void;\n};\n\nexport const ListContext = React.createContext<ListContextType>({ updateFocusedItem: NOOP });\n"],"names":["ListContext","React","createContext","updateFocusedItem","NOOP"],"mappings":"iFAWaA,EAAcC,EAAMC,cAA+B,CAAEC,kBAAmBC"}
+{"version":3,"file":"ListContext.js","sources":["../../../../../src/components/List/utils/ListContext.ts"],"sourcesContent":["import React from \"react\";\nimport { NOOP } from \"@vibe/shared\";\n\ntype ListContextType = {\n  /**\n   * A callback function which is being called when the item is being focused by keyboard navigation\n   * @param ListItem id\n   */\n  updateFocusedItem: (id: string) => void;\n};\n\nexport const ListContext = React.createContext<ListContextType>({ updateFocusedItem: NOOP });\n"],"names":["ListContext","React","createContext","updateFocusedItem","NOOP"],"mappings":"gGAWaA,EAAcC,EAAMC,cAA+B,CAAEC,kBAAmBC"}

package/dist/src/components/List/utils/ListUtils.js

@@ -1,2 +1,2 @@
-import{slicedToArray as r}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as t}from"react";import n from"../../../hooks/ssr/useIsomorphicLayoutEffect.js";var e=0,u=function(){return"list-".concat(e++)},i=["option","listitem","menuitem","tab","treeitem"],o=function(e){var i=t(),o=r(i,2),c=o[0],f=o[1];return n((function(){f(e||u())}),[e]),c},c=function(r,t){var n;return null===(n=r.current[t])||void 0===n?void 0:n.id},f=function(r,t){return r.current.findIndex((function(r){return(null==r?void 0:r.id)===t}))},l=function(r){switch(r){case"ul":case"ol":return"li";case"nav":return"a";default:return"div"}},a=function(r){return r&&r instanceof HTMLElement&&i.includes(r.getAttribute("role"))},s=function(r,t){for(;t.current.length-1>r;){var n=t.current[++r];if(a(n))return r}},m=function(r,t){for(;r>0;){var n=t.current[--r];if(a(n))return r}};export{u as generateListId,l as getListItemComponentType,c as getListItemIdByIndex,f as getListItemIndexById,s as getNextListItemIndex,m as getPrevListItemIndex,a as isListItem,o as useListId};
+import{slicedToArray as r}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as t}from"react";import{useIsomorphicLayoutEffect as n}from"../../../../shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js";var e=0,i=function(){return"list-".concat(e++)},u=["option","listitem","menuitem","tab","treeitem"],o=function(e){var u=t(),o=r(u,2),c=o[0],f=o[1];return n((function(){f(e||i())}),[e]),c},c=function(r,t){var n;return null===(n=r.current[t])||void 0===n?void 0:n.id},f=function(r,t){return r.current.findIndex((function(r){return(null==r?void 0:r.id)===t}))},a=function(r){switch(r){case"ul":case"ol":return"li";case"nav":return"a";default:return"div"}},l=function(r){return r&&r instanceof HTMLElement&&u.includes(r.getAttribute("role"))},s=function(r,t){for(;t.current.length-1>r;){var n=t.current[++r];if(l(n))return r}},d=function(r,t){for(;r>0;){var n=t.current[--r];if(l(n))return r}};export{i as generateListId,a as getListItemComponentType,c as getListItemIdByIndex,f as getListItemIndexById,s as getNextListItemIndex,d as getPrevListItemIndex,l as isListItem,o as useListId};
 //# sourceMappingURL=ListUtils.js.map

package/dist/src/components/List/utils/ListUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListUtils.js","sources":["../../../../../src/components/List/utils/ListUtils.ts"],"sourcesContent":["import { type MutableRefObject, useState } from \"react\";\nimport { type ListItemElement } from \"../../ListItem/ListItem.types\";\nimport { type ListElement } from \"../List.types\";\nimport useIsomorphicLayoutEffect from \"../../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nlet listIdCounter = 0;\nexport const generateListId = () => {\n  return `list-${listIdCounter++}`;\n};\n\nconst VALID_ROLES = [\"option\", \"listitem\", \"menuitem\", \"tab\", \"treeitem\"];\n\nexport const useListId = (id: string) => {\n  const [listId, setListId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setListId(id || generateListId());\n  }, [id]);\n  return listId;\n};\n\nexport const getListItemIdByIndex = (childrenRefs: MutableRefObject<HTMLElement[]>, index: number): string => {\n  return childrenRefs.current[index]?.id;\n};\n\nexport const getListItemIndexById = (childrenRefs: MutableRefObject<HTMLElement[]>, id: string): number => {\n  return childrenRefs.current.findIndex(child => child?.id === id);\n};\n\nexport const getListItemComponentType = (listComponent: ListElement): ListItemElement => {\n  switch (listComponent) {\n    case \"ul\":\n    case \"ol\":\n      return \"li\";\n    case \"nav\":\n      return \"a\";\n    default:\n      return \"div\";\n  }\n};\n\nexport const isListItem = (element: HTMLElement) => {\n  return element && element instanceof HTMLElement && VALID_ROLES.includes(element.getAttribute(\"role\"));\n};\n\nexport const getNextListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex < childrenRefs.current.length - 1) {\n    const child = childrenRefs.current[++currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n\nexport const getPrevListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex > 0) {\n    const child = childrenRefs.current[--currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n"],"names":["listIdCounter","generateListId","concat","VALID_ROLES","useListId","id","_useState","useState","_useState2","_slicedToArray","listId","setListId","useIsomorphicLayoutEffect","getListItemIdByIndex","childrenRefs","index","_a","current","getListItemIndexById","findIndex","child","getListItemComponentType","listComponent","isListItem","element","HTMLElement","includes","getAttribute","getNextListItemIndex","currentIndex","length","getPrevListItemIndex"],"mappings":"kLAKA,IAAIA,EAAgB,EACPC,EAAiB,WAC5B,MAAAC,QAAAA,OAAeF,IACjB,EAEMG,EAAc,CAAC,SAAU,WAAY,WAAY,MAAO,YAEjDC,EAAY,SAACC,GACxB,IAAAC,EAA4BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAvCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAIxB,OAHAI,GAA0B,WACxBD,EAAUN,GAAMJ,IAClB,GAAG,CAACI,IACGK,CACT,EAEaG,EAAuB,SAACC,EAA+CC,SAClF,OAAoC,QAA7BC,EAAAF,EAAaG,QAAQF,UAAQ,IAAAC,OAAA,EAAAA,EAAAX,EACtC,EAEaa,EAAuB,SAACJ,EAA+CT,GAClF,OAAOS,EAAaG,QAAQE,WAAU,SAAAC,GAAK,OAAIA,aAAA,EAAAA,EAAOf,MAAOA,IAC/D,EAEagB,EAA2B,SAACC,GACvC,OAAQA,GACN,IAAK,KACL,IAAK,KACH,MAAO,KACT,IAAK,MACH,MAAO,IACT,QACE,MAAO,MAEb,EAEaC,EAAa,SAACC,GACzB,OAAOA,GAAWA,aAAmBC,aAAetB,EAAYuB,SAASF,EAAQG,aAAa,QAChG,EAEaC,EAAuB,SAACC,EAAsBf,GACzD,KAAsBA,EAAaG,QAAQa,OAAS,EAA7CD,GAAgD,CACrD,IAAMT,EAAQN,EAAaG,UAAUY,GACrC,GAAIN,EAAWH,GACb,OAAOS,CAEX,CAEF,EAEaE,EAAuB,SAACF,EAAsBf,GACzD,KAAOe,EAAe,GAAG,CACvB,IAAMT,EAAQN,EAAaG,UAAUY,GACrC,GAAIN,EAAWH,GACb,OAAOS,CAEX,CAEF"}
+{"version":3,"file":"ListUtils.js","sources":["../../../../../src/components/List/utils/ListUtils.ts"],"sourcesContent":["import { type MutableRefObject, useState } from \"react\";\nimport { type ListItemElement } from \"../../ListItem/ListItem.types\";\nimport { type ListElement } from \"../List.types\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nlet listIdCounter = 0;\nexport const generateListId = () => {\n  return `list-${listIdCounter++}`;\n};\n\nconst VALID_ROLES = [\"option\", \"listitem\", \"menuitem\", \"tab\", \"treeitem\"];\n\nexport const useListId = (id: string) => {\n  const [listId, setListId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setListId(id || generateListId());\n  }, [id]);\n  return listId;\n};\n\nexport const getListItemIdByIndex = (childrenRefs: MutableRefObject<HTMLElement[]>, index: number): string => {\n  return childrenRefs.current[index]?.id;\n};\n\nexport const getListItemIndexById = (childrenRefs: MutableRefObject<HTMLElement[]>, id: string): number => {\n  return childrenRefs.current.findIndex(child => child?.id === id);\n};\n\nexport const getListItemComponentType = (listComponent: ListElement): ListItemElement => {\n  switch (listComponent) {\n    case \"ul\":\n    case \"ol\":\n      return \"li\";\n    case \"nav\":\n      return \"a\";\n    default:\n      return \"div\";\n  }\n};\n\nexport const isListItem = (element: HTMLElement) => {\n  return element && element instanceof HTMLElement && VALID_ROLES.includes(element.getAttribute(\"role\"));\n};\n\nexport const getNextListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex < childrenRefs.current.length - 1) {\n    const child = childrenRefs.current[++currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n\nexport const getPrevListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex > 0) {\n    const child = childrenRefs.current[--currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n"],"names":["listIdCounter","generateListId","concat","VALID_ROLES","useListId","id","_useState","useState","_useState2","_slicedToArray","listId","setListId","useIsomorphicLayoutEffect","getListItemIdByIndex","childrenRefs","index","_a","current","getListItemIndexById","findIndex","child","getListItemComponentType","listComponent","isListItem","element","HTMLElement","includes","getAttribute","getNextListItemIndex","currentIndex","length","getPrevListItemIndex"],"mappings":"8NAKA,IAAIA,EAAgB,EACPC,EAAiB,WAC5B,MAAAC,QAAAA,OAAeF,IACjB,EAEMG,EAAc,CAAC,SAAU,WAAY,WAAY,MAAO,YAEjDC,EAAY,SAACC,GACxB,IAAAC,EAA4BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAvCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAIxB,OAHAI,GAA0B,WACxBD,EAAUN,GAAMJ,IAClB,GAAG,CAACI,IACGK,CACT,EAEaG,EAAuB,SAACC,EAA+CC,SAClF,OAAoC,QAA7BC,EAAAF,EAAaG,QAAQF,UAAQ,IAAAC,OAAA,EAAAA,EAAAX,EACtC,EAEaa,EAAuB,SAACJ,EAA+CT,GAClF,OAAOS,EAAaG,QAAQE,WAAU,SAAAC,GAAK,OAAIA,aAAA,EAAAA,EAAOf,MAAOA,IAC/D,EAEagB,EAA2B,SAACC,GACvC,OAAQA,GACN,IAAK,KACL,IAAK,KACH,MAAO,KACT,IAAK,MACH,MAAO,IACT,QACE,MAAO,MAEb,EAEaC,EAAa,SAACC,GACzB,OAAOA,GAAWA,aAAmBC,aAAetB,EAAYuB,SAASF,EAAQG,aAAa,QAChG,EAEaC,EAAuB,SAACC,EAAsBf,GACzD,KAAsBA,EAAaG,QAAQa,OAAS,EAA7CD,GAAgD,CACrD,IAAMT,EAAQN,EAAaG,UAAUY,GACrC,GAAIN,EAAWH,GACb,OAAOS,CAEX,CAEF,EAEaE,EAAuB,SAACF,EAAsBf,GACzD,KAAOe,EAAe,GAAG,CACvB,IAAMT,EAAQN,EAAaG,UAAUY,GACrC,GAAIN,EAAWH,GACb,OAAOS,CAEX,CAEF"}

package/dist/src/components/ListItem/ListItem.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import t,{forwardRef as s,useContext as i,useRef as r,useEffect as n,useCallback as a}from"react";import{camelCase as m}from"es-toolkit";import{getStyle as l}from"../../helpers/typesciptCssModulesHelper.js";import{SELECTION_KEYS as d}from"../../constants/keyCodes.js";import{SIZES as p}from"../../constants/sizes.js";import{NOOP as u}from"../../utils/function-utils.js";import c from"../../hooks/useKeyEvent/index.js";import"../Menu/Menu/hooks/useLastNavigationDirection.js";import"../../hooks/useFullKeyboardListeners.js";import"../../hooks/useActiveDescendantListFocus/index.js";import"../../hooks/useVibeMediaQuery/index.js";import"../../hooks/useSwitch/index.js";import f from"../../hooks/useMergeRef.js";import{ListContext as v}from"../List/utils/ListContext.js";import j from"./ListItem.module.scss.js";import k from"../../../components/typography/dist/Text/Text.js";var h=s((function(s,h){var x=s.className,y=s.id,b=s.component,L=void 0===b?"div":b,M=s.onClick,I=void 0===M?u:M,g=s.onHover,C=void 0===g?u:g,F=s.selected,N=s.disabled,P=void 0!==N&&N,E=s.size,H=void 0===E?p.SMALL:E,z=s.tabIndex,A=void 0===z?0:z,D=s.children,K=s["aria-current"],S=s["data-testid"],T=s.role,_=void 0===T?"option":T,w=s.tooltipProps,B=i(v).updateFocusedItem,O=r(null),Q=f(h,O);n((function(){F&&(null==B||B(y))}),[F,y,B]);var R=a((function(e){P||I(e,y)}),[P,I,y]),V=a((function(e){return R(e)}),[R]);c({keys:d,ref:O,callback:V});var q=a((function(e){P||C(e,y)}),[P,C,y]);return t.createElement(k,{element:L,"data-testid":S||y,ref:Q,className:o(j.listItem,x,l(j,m(H)),e(e({},j.selected,F&&!P),j.disabled,P)),id:y,type:"text2","aria-disabled":P,"aria-selected":F,onClick:R,onMouseEnter:q,onFocus:q,role:_,tabIndex:A,"aria-current":K,tooltipProps:w},D)}));Object.assign(h,{displayName:"ListItem"});export{h as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import o,{forwardRef as s,useContext as i,useRef as r,useEffect as n,useCallback as a}from"react";import{camelCase as d}from"es-toolkit";import{SELECTION_KEYS as m}from"../../constants/keyCodes.js";import{SIZES as l}from"../../constants/sizes.js";import"../Menu/Menu/hooks/useLastNavigationDirection.js";import"../../hooks/useFullKeyboardListeners.js";import"../../hooks/useActiveDescendantListFocus/index.js";import"../../hooks/useVibeMediaQuery/index.js";import"../../hooks/useSwitch/index.js";import{ListContext as u}from"../List/utils/ListContext.js";import p from"./ListItem.module.scss.js";import c from"../../../components/typography/dist/Text/Text.js";import{useMergeRef as f}from"../../../shared/dist/hooks/useMergeRef.js";import{useKeyEvent as v}from"../../../shared/dist/hooks/useKeyEvent.js";import{getStyle as j}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";import{NOOP as h}from"../../../shared/dist/utils/function-utils.js";var k=s((function(s,k){var y=s.className,b=s.id,x=s.component,L=void 0===x?"div":x,M=s.onClick,I=void 0===M?h:M,g=s.onHover,C=void 0===g?h:g,F=s.selected,N=s.disabled,P=void 0!==N&&N,E=s.size,H=void 0===E?l.SMALL:E,z=s.tabIndex,A=void 0===z?0:z,D=s.children,K=s["aria-current"],S=s["data-testid"],T=s.role,_=void 0===T?"option":T,w=s.tooltipProps,B=i(u).updateFocusedItem,O=r(null),Q=f(k,O);n((function(){F&&(null==B||B(b))}),[F,b,B]);var R=a((function(e){P||I(e,b)}),[P,I,b]),V=a((function(e){return R(e)}),[R]);v({keys:m,ref:O,callback:V});var q=a((function(e){P||C(e,b)}),[P,C,b]);return o.createElement(c,{element:L,"data-testid":S||b,ref:Q,className:t(p.listItem,y,j(p,d(H)),e(e({},p.selected,F&&!P),p.disabled,P)),id:b,type:"text2","aria-disabled":P,"aria-selected":F,onClick:R,onMouseEnter:q,onFocus:q,role:_,tabIndex:A,"aria-current":K,tooltipProps:w},D)}));Object.assign(k,{displayName:"ListItem"});export{k as default};
 //# sourceMappingURL=ListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef\n} from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { Text } from \"@vibe/typography\";\nimport { SIZES, SELECTION_KEYS } from \"../../constants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { useKeyEvent } from \"../../hooks\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ListContext } from \"../List/utils/ListContext\";\nimport { type ListItemElement, type ListItemSize } from \"./ListItem.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./ListItem.module.scss\";\n\nexport interface ListItemProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item.\n   */\n  component?: ListItemElement;\n  /**\n   * The textual content inside the list item.\n   */\n  children?: ElementContent;\n  /**\n   * Callback fired when the item is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;\n  /**\n   * Callback fired when the item is hovered.\n   */\n  onHover?: (event: React.MouseEvent | React.FocusEvent, id: string) => void;\n  /**\n   * If true, disables the item and prevents interactions.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the item as selected.\n   */\n  selected?: boolean;\n  /**\n   * The size of the list item.\n   */\n  size?: ListItemSize;\n  /**\n   * The tab index of the list item for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * Indicates the current state of the item in a set of items.\n   */\n  \"aria-current\"?: AriaAttributes[\"aria-current\"];\n  /**\n   * The ARIA role of the list item.\n   */\n  role?: AriaRole;\n  /**\n   * Props passed to the tooltip displayed when hovering over the text.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst ListItem = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"div\",\n      onClick = NOOP,\n      onHover = NOOP,\n      selected,\n      disabled = false,\n      size = SIZES.SMALL,\n      tabIndex = 0,\n      children,\n      \"aria-current\": ariaCurrent,\n      \"data-testid\": dataTestId,\n      role = \"option\",\n      tooltipProps\n    }: ListItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const { updateFocusedItem } = useContext(ListContext);\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    useEffect(() => {\n      if (selected) {\n        updateFocusedItem?.(id);\n      }\n    }, [selected, id, updateFocusedItem]);\n\n    const componentOnClick = useCallback(\n      (event: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabled) return;\n        onClick(event, id);\n      },\n      [disabled, onClick, id]\n    );\n\n    const onKeyboardSelect = useCallback((event: React.KeyboardEvent) => componentOnClick(event), [componentOnClick]);\n\n    useKeyEvent({\n      keys: SELECTION_KEYS,\n      ref: componentRef,\n      callback: onKeyboardSelect\n    });\n\n    const componentOnHover = useCallback(\n      (event: React.MouseEvent | React.FocusEvent) => {\n        if (disabled) return;\n        onHover(event, id);\n      },\n      [disabled, onHover, id]\n    );\n\n    return (\n      <Text\n        element={component}\n        data-testid={dataTestId || id}\n        ref={mergedRef}\n        className={cx(styles.listItem, className, getStyle(styles, camelCase(size)), {\n          [styles.selected]: selected && !disabled,\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        type=\"text2\"\n        aria-disabled={disabled}\n        aria-selected={selected}\n        onClick={componentOnClick}\n        onMouseEnter={componentOnHover}\n        onFocus={componentOnHover}\n        role={role}\n        tabIndex={tabIndex}\n        aria-current={ariaCurrent}\n        tooltipProps={tooltipProps}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nObject.assign(ListItem, {\n  // Used by VirtualizedListItems\n  displayName: \"ListItem\"\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$onClick","onClick","NOOP","_ref$onHover","onHover","selected","_ref$disabled","disabled","_ref$size","size","SIZES","SMALL","_ref$tabIndex","tabIndex","children","ariaCurrent","dataTestId","_ref$role","role","tooltipProps","updateFocusedItem","useContext","ListContext","componentRef","useRef","mergedRef","useMergeRef","useEffect","componentOnClick","useCallback","event","onKeyboardSelect","useKeyEvent","keys","SELECTION_KEYS","callback","componentOnHover","React","createElement","Text","element","cx","styles","listItem","getStyle","camelCase","_defineProperty","type","onMouseEnter","onFocus","Object","assign","displayName"],"mappings":"m9BAsEMA,IAAAA,EAAWC,GACf,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,MAAKA,EAAAE,EAAAN,EACjBO,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAT,EACdU,QAAAA,OAAUF,IAAHC,EAAGD,EAAIC,EACdE,EAAQX,EAARW,SAAQC,EAAAZ,EACRa,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAd,EAChBe,KAAAA,OAAI,IAAAD,EAAGE,EAAMC,MAAKH,EAAAI,EAAAlB,EAClBmB,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAAQpB,EAARoB,SACgBC,EAAWrB,EAA3B,gBACesB,EAAUtB,EAAzB,eAAauB,EAAAvB,EACbwB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAYzB,EAAZyB,aAIMC,EAAsBC,EAAWC,GAAjCF,kBACFG,EAAeC,EAAO,MACtBC,EAAYC,EAAY/B,EAAK4B,GAEnCI,GAAU,WACJtB,IACFe,SAAAA,EAAoBvB,GAEvB,GAAE,CAACQ,EAAUR,EAAIuB,IAElB,IAAMQ,EAAmBC,GACvB,SAACC,GACKvB,GACJN,EAAQ6B,EAAOjC,EAChB,GACD,CAACU,EAAUN,EAASJ,IAGhBkC,EAAmBF,GAAY,SAACC,GAA0B,OAAKF,EAAiBE,KAAQ,CAACF,IAE/FI,EAAY,CACVC,KAAMC,EACNvC,IAAK4B,EACLY,SAAUJ,IAGZ,IAAMK,EAAmBP,GACvB,SAACC,GACKvB,GACJH,EAAQ0B,EAAOjC,EAChB,GACD,CAACU,EAAUH,EAASP,IAGtB,OACEwC,EAAAC,cAACC,EAAI,CACHC,QAASzC,EACI,cAAAiB,GAAcnB,EAC3BF,IAAK8B,EACL7B,UAAW6C,EAAGC,EAAOC,SAAU/C,EAAWgD,EAASF,EAAQG,EAAUpC,IAAMqC,EAAAA,EACxEJ,CAAAA,EAAAA,EAAOrC,SAAWA,IAAaE,GAC/BmC,EAAOnC,SAAWA,IAErBV,GAAIA,EACJkD,KAAK,QAAO,gBACGxC,EACA,gBAAAF,EACfJ,QAAS2B,EACToB,aAAcZ,EACda,QAASb,EACTlB,KAAMA,EACNL,SAAUA,iBACIE,EACdI,aAAcA,GAEbL,EAGP,IAGFoC,OAAOC,OAAO3D,EAAU,CAEtB4D,YAAa"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef\n} from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP, useMergeRef } from \"@vibe/shared\";\nimport { Text } from \"@vibe/typography\";\nimport { SIZES, SELECTION_KEYS } from \"../../constants\";\n\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { useKeyEvent } from \"../../hooks\";\n\nimport { ListContext } from \"../List/utils/ListContext\";\nimport { type ListItemElement, type ListItemSize } from \"./ListItem.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./ListItem.module.scss\";\n\nexport interface ListItemProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item.\n   */\n  component?: ListItemElement;\n  /**\n   * The textual content inside the list item.\n   */\n  children?: ElementContent;\n  /**\n   * Callback fired when the item is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;\n  /**\n   * Callback fired when the item is hovered.\n   */\n  onHover?: (event: React.MouseEvent | React.FocusEvent, id: string) => void;\n  /**\n   * If true, disables the item and prevents interactions.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the item as selected.\n   */\n  selected?: boolean;\n  /**\n   * The size of the list item.\n   */\n  size?: ListItemSize;\n  /**\n   * The tab index of the list item for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * Indicates the current state of the item in a set of items.\n   */\n  \"aria-current\"?: AriaAttributes[\"aria-current\"];\n  /**\n   * The ARIA role of the list item.\n   */\n  role?: AriaRole;\n  /**\n   * Props passed to the tooltip displayed when hovering over the text.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst ListItem = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"div\",\n      onClick = NOOP,\n      onHover = NOOP,\n      selected,\n      disabled = false,\n      size = SIZES.SMALL,\n      tabIndex = 0,\n      children,\n      \"aria-current\": ariaCurrent,\n      \"data-testid\": dataTestId,\n      role = \"option\",\n      tooltipProps\n    }: ListItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const { updateFocusedItem } = useContext(ListContext);\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    useEffect(() => {\n      if (selected) {\n        updateFocusedItem?.(id);\n      }\n    }, [selected, id, updateFocusedItem]);\n\n    const componentOnClick = useCallback(\n      (event: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabled) return;\n        onClick(event, id);\n      },\n      [disabled, onClick, id]\n    );\n\n    const onKeyboardSelect = useCallback((event: React.KeyboardEvent) => componentOnClick(event), [componentOnClick]);\n\n    useKeyEvent({\n      keys: SELECTION_KEYS,\n      ref: componentRef,\n      callback: onKeyboardSelect\n    });\n\n    const componentOnHover = useCallback(\n      (event: React.MouseEvent | React.FocusEvent) => {\n        if (disabled) return;\n        onHover(event, id);\n      },\n      [disabled, onHover, id]\n    );\n\n    return (\n      <Text\n        element={component}\n        data-testid={dataTestId || id}\n        ref={mergedRef}\n        className={cx(styles.listItem, className, getStyle(styles, camelCase(size)), {\n          [styles.selected]: selected && !disabled,\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        type=\"text2\"\n        aria-disabled={disabled}\n        aria-selected={selected}\n        onClick={componentOnClick}\n        onMouseEnter={componentOnHover}\n        onFocus={componentOnHover}\n        role={role}\n        tabIndex={tabIndex}\n        aria-current={ariaCurrent}\n        tooltipProps={tooltipProps}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nObject.assign(ListItem, {\n  // Used by VirtualizedListItems\n  displayName: \"ListItem\"\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$onClick","onClick","NOOP","_ref$onHover","onHover","selected","_ref$disabled","disabled","_ref$size","size","SIZES","SMALL","_ref$tabIndex","tabIndex","children","ariaCurrent","dataTestId","_ref$role","role","tooltipProps","updateFocusedItem","useContext","ListContext","componentRef","useRef","mergedRef","useMergeRef","useEffect","componentOnClick","useCallback","event","onKeyboardSelect","useKeyEvent","keys","SELECTION_KEYS","callback","componentOnHover","React","createElement","Text","element","cx","styles","listItem","getStyle","camelCase","_defineProperty","type","onMouseEnter","onFocus","Object","assign","displayName"],"mappings":"qiCAsEMA,IAAAA,EAAWC,GACf,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,MAAKA,EAAAE,EAAAN,EACjBO,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAT,EACdU,QAAAA,OAAUF,IAAHC,EAAGD,EAAIC,EACdE,EAAQX,EAARW,SAAQC,EAAAZ,EACRa,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAd,EAChBe,KAAAA,OAAI,IAAAD,EAAGE,EAAMC,MAAKH,EAAAI,EAAAlB,EAClBmB,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAAQpB,EAARoB,SACgBC,EAAWrB,EAA3B,gBACesB,EAAUtB,EAAzB,eAAauB,EAAAvB,EACbwB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAYzB,EAAZyB,aAIMC,EAAsBC,EAAWC,GAAjCF,kBACFG,EAAeC,EAAO,MACtBC,EAAYC,EAAY/B,EAAK4B,GAEnCI,GAAU,WACJtB,IACFe,SAAAA,EAAoBvB,GAEvB,GAAE,CAACQ,EAAUR,EAAIuB,IAElB,IAAMQ,EAAmBC,GACvB,SAACC,GACKvB,GACJN,EAAQ6B,EAAOjC,EAChB,GACD,CAACU,EAAUN,EAASJ,IAGhBkC,EAAmBF,GAAY,SAACC,GAA0B,OAAKF,EAAiBE,KAAQ,CAACF,IAE/FI,EAAY,CACVC,KAAMC,EACNvC,IAAK4B,EACLY,SAAUJ,IAGZ,IAAMK,EAAmBP,GACvB,SAACC,GACKvB,GACJH,EAAQ0B,EAAOjC,EAChB,GACD,CAACU,EAAUH,EAASP,IAGtB,OACEwC,EAAAC,cAACC,EAAI,CACHC,QAASzC,EACI,cAAAiB,GAAcnB,EAC3BF,IAAK8B,EACL7B,UAAW6C,EAAGC,EAAOC,SAAU/C,EAAWgD,EAASF,EAAQG,EAAUpC,IAAMqC,EAAAA,EACxEJ,CAAAA,EAAAA,EAAOrC,SAAWA,IAAaE,GAC/BmC,EAAOnC,SAAWA,IAErBV,GAAIA,EACJkD,KAAK,QAAO,gBACGxC,EACA,gBAAAF,EACfJ,QAAS2B,EACToB,aAAcZ,EACda,QAASb,EACTlB,KAAMA,EACNL,SAAUA,iBACIE,EACdI,aAAcA,GAEbL,EAGP,IAGFoC,OAAOC,OAAO3D,EAAU,CAEtB4D,YAAa"}

package/dist/src/components/ListItemAvatar/ListItemAvatar.js

@@ -1,2 +1,2 @@
-import a,{forwardRef as e,useRef as r}from"react";import t from"classnames";import s from"../../hooks/useMergeRef.js";import m from"../Avatar/Avatar.js";import o from"./ListItemAvatar.module.scss.js";var i=e((function(e,i){var l=e.className,c=e.id,n=e.src,v=e.avatarClassName,f=e.component,d=void 0===f?"div":f,p=r(null),u=s(i,p);return a.createElement(d,{ref:u,className:t(o.listItemAvatar,l),id:c,"aria-hidden":"true"},a.createElement(m,{src:n,type:"img",size:"small",className:t(o.avatar,v)}))}));export{i as default};
+import a,{forwardRef as e,useRef as r}from"react";import s from"classnames";import t from"../Avatar/Avatar.js";import m from"./ListItemAvatar.module.scss.js";import{useMergeRef as o}from"../../../shared/dist/hooks/useMergeRef.js";var i=e((function(e,i){var l=e.className,c=e.id,d=e.src,n=e.avatarClassName,v=e.component,f=void 0===v?"div":v,p=r(null),u=o(i,p);return a.createElement(f,{ref:u,className:s(m.listItemAvatar,l),id:c,"aria-hidden":"true"},a.createElement(t,{src:d,type:"img",size:"small",className:s(m.avatar,n)}))}));export{i as default};
 //# sourceMappingURL=ListItemAvatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemAvatar.js","sources":["../../../../src/components/ListItemAvatar/ListItemAvatar.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { type ListItemElement } from \"../ListItem\";\nimport styles from \"./ListItemAvatar.module.scss\";\n\nexport interface ListItemAvatarProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item avatar.\n   */\n  component?: ListItemElement;\n  /**\n   * The source URL of the avatar image.\n   */\n  src?: string;\n  /**\n   * Class name applied to the avatar.\n   */\n  avatarClassName?: string;\n}\n\nconst ListItemAvatar = forwardRef(\n  (\n    { className, id, src, avatarClassName, component: Component = \"div\" }: ListItemAvatarProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Component ref={mergedRef} className={cx(styles.listItemAvatar, className)} id={id} aria-hidden=\"true\">\n        <Avatar src={src} type=\"img\" size=\"small\" className={cx(styles.avatar, avatarClassName)} />\n      </Component>\n    );\n  }\n);\n\nexport default ListItemAvatar;\n"],"names":["ListItemAvatar","forwardRef","_ref","ref","className","id","src","avatarClassName","_ref$component","component","Component","componentRef","useRef","mergedRef","useMergeRef","React","cx","styles","listItemAvatar","createElement","Avatar","type","size","avatar"],"mappings":"wMAuBMA,IAAAA,EAAiBC,GACrB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAGJ,EAAHI,IAAKC,EAAeL,EAAfK,gBAAeC,EAAAN,EAAEO,UAAWC,OAAY,IAAHF,EAAG,MAAKA,EAG7DG,EAAeC,EAAO,MACtBC,EAAYC,EAAYX,EAAKQ,GAEnC,OACEI,gBAACL,EAAS,CAACP,IAAKU,EAAWT,UAAWY,EAAGC,EAAOC,eAAgBd,GAAYC,GAAIA,EAAE,cAAc,QAC9FU,EAACI,cAAAC,EAAO,CAAAd,IAAKA,EAAKe,KAAK,MAAMC,KAAK,QAAQlB,UAAWY,EAAGC,EAAOM,OAAQhB,KAG7E"}
+{"version":3,"file":"ListItemAvatar.js","sources":["../../../../src/components/ListItemAvatar/ListItemAvatar.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { type ListItemElement } from \"../ListItem\";\nimport styles from \"./ListItemAvatar.module.scss\";\n\nexport interface ListItemAvatarProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item avatar.\n   */\n  component?: ListItemElement;\n  /**\n   * The source URL of the avatar image.\n   */\n  src?: string;\n  /**\n   * Class name applied to the avatar.\n   */\n  avatarClassName?: string;\n}\n\nconst ListItemAvatar = forwardRef(\n  (\n    { className, id, src, avatarClassName, component: Component = \"div\" }: ListItemAvatarProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Component ref={mergedRef} className={cx(styles.listItemAvatar, className)} id={id} aria-hidden=\"true\">\n        <Avatar src={src} type=\"img\" size=\"small\" className={cx(styles.avatar, avatarClassName)} />\n      </Component>\n    );\n  }\n);\n\nexport default ListItemAvatar;\n"],"names":["ListItemAvatar","forwardRef","_ref","ref","className","id","src","avatarClassName","_ref$component","component","Component","componentRef","useRef","mergedRef","useMergeRef","React","cx","styles","listItemAvatar","createElement","Avatar","type","size","avatar"],"mappings":"sOAuBMA,IAAAA,EAAiBC,GACrB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAGJ,EAAHI,IAAKC,EAAeL,EAAfK,gBAAeC,EAAAN,EAAEO,UAAWC,OAAY,IAAHF,EAAG,MAAKA,EAG7DG,EAAeC,EAAO,MACtBC,EAAYC,EAAYX,EAAKQ,GAEnC,OACEI,gBAACL,EAAS,CAACP,IAAKU,EAAWT,UAAWY,EAAGC,EAAOC,eAAgBd,GAAYC,GAAIA,EAAE,cAAc,QAC9FU,EAACI,cAAAC,EAAO,CAAAd,IAAKA,EAAKe,KAAK,MAAMC,KAAK,QAAQlB,UAAWY,EAAGC,EAAOM,OAAQhB,KAG7E"}