@vibe/core 3.87.0 → 4.0.0-alpha.1

package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import r,{forwardRef as s,useRef as i}from"react";import{noop as a}from"es-toolkit";import n from"../../../hooks/useMergeRef.js";import{getStyle as l}from"../../../helpers/typesciptCssModulesHelper.js";import{Icon as c}from"@vibe/icon/mockedClassNames";import{getTestId as d,ComponentDefaultTestId as m}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import{Tooltip as f}from"@vibe/tooltip/mockedClassNames";import{ComponentVibeId as u}from"../../../tests/constants.js";import{keyCodes as v}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";var b=s((function(s,b){var y=s.className,C=s.tabInnerClassName,k=s.id,j=s.value,N=void 0===j?0:j,E=s.disabled,I=void 0!==E&&E,h=s.active,T=void 0!==h&&h,A=s.focus,g=void 0!==A&&A,P=s.stretchedUnderline,S=void 0!==P&&P,x=s.onClick,B=void 0===x?a:x,H=s.tooltipProps,z=void 0===H?{}:H,D=s.icon,F=s.iconType,M=s.iconSide,R=void 0===M?"left":M,U=s.children,_=s["data-testid"],w=s.tabIndex,K=s.ariaControls,O=i(null),V=n(b,O);return r.createElement(f,Object.assign({},z,{content:z.content}),r.createElement("li",{ref:V,key:k,className:o(p.tabWrapper,y,e(e(e(e({},p.active,T),p.disabled,I),p.tabFocusVisibleInset,g),p.stretchedUnderline,S)),id:k,role:"tab","aria-selected":T,"aria-disabled":I,"aria-controls":K||void 0,tabIndex:w,"data-testid":_||d(m.TAB,k),"data-vibe":u.TAB,onClick:function(){return!I&&B(N)},onKeyDown:function(e){e.key!==v.ENTER&&e.key!==v.SPACE||(e.preventDefault(),!I&&B(N))}},r.createElement("div",{className:o(p.tabInner,C)},function(){if(!D)return U;var e=r.createElement(c,{ariaHidden:!0,iconType:F,icon:D,className:o(p.tabIcon,l(p,R)),iconSize:18,ignoreFocusStyle:!0}),s=r.Children.toArray(U);return"left"===R?[e].concat(t(s)):[].concat(t(s),[e])}())))}));export{b as default};
+import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import s,{forwardRef as r,useRef as a}from"react";import{noop as i}from"es-toolkit";import n from"../../../hooks/useMergeRef.js";import{getStyle as l}from"../../../helpers/typesciptCssModulesHelper.js";import{Icon as c}from"@vibe/icon/mockedClassNames";import{getTestId as d,ComponentDefaultTestId as m}from"../../../tests/testIds.js";import p from"./Tab.module.scss.js";import{Tooltip as f}from"@vibe/tooltip/mockedClassNames";import{ComponentVibeId as u}from"../../../tests/constants.js";import{keyCodes as v}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";var b=r((function(r,b){var y=r.className,k=r.tabInnerClassName,C=r.id,j=r.value,N=void 0===j?0:j,h=r.disabled,E=void 0!==h&&h,I=r.active,A=void 0!==I&&I,T=r.focus,g=void 0!==T&&T,P=r.stretchedUnderline,x=void 0!==P&&P,B=r.onClick,S=void 0===B?i:B,z=r.tooltipProps,D=void 0===z?{}:z,F=r.icon,H=r.iconType,M=r.iconSide,R=void 0===M?"left":M,U=r.children,_=r["data-testid"],w=r.tabIndex,K=r["aria-controls"],O=a(null),V=n(b,O);return s.createElement(f,Object.assign({},D,{content:D.content}),s.createElement("li",{ref:V,key:C,className:o(p.tabWrapper,y,e(e(e(e({},p.active,A),p.disabled,E),p.tabFocusVisibleInset,g),p.stretchedUnderline,x)),id:C,role:"tab","aria-selected":A,"aria-disabled":E,"aria-controls":K||void 0,tabIndex:w,"data-testid":_||d(m.TAB,C),"data-vibe":u.TAB,onClick:function(){return!E&&S(N)},onKeyDown:function(e){e.key!==v.ENTER&&e.key!==v.SPACE||(e.preventDefault(),!E&&S(N))}},s.createElement("div",{className:o(p.tabInner,k)},function(){if(!F)return U;var e=s.createElement(c,{"aria-hidden":!0,type:H,icon:F,className:o(p.tabIcon,l(p,R)),size:18,ignoreFocusStyle:!0}),r=s.Children.toArray(U);return"left"===R?[e].concat(t(r)):[].concat(t(r),[e])}())))}));export{b as default};
 //# sourceMappingURL=Tab.js.map

package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * If true, hides the individual tab border when using stretched underline.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n  /**\n   * Tab index for focus management.\n   */\n  tabIndex?: number;\n  /**\n   * The id of the associated TabPanel for aria-controls attribute.\n   */\n  ariaControls?: string;\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      stretchedUnderline = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId,\n      tabIndex,\n      ariaControls\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus,\n            [styles.stretchedUnderline]: stretchedUnderline\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          aria-controls={ariaControls || undefined}\n          tabIndex={tabIndex}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"4sBAwEMA,IAAAA,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACAC,EAAY3B,EAAZ2B,aAIIC,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAjB,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,EACA,gBAAAmB,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,gBAAC0B,EAAI,CACHC,YAAY,EACZtC,SAAUA,EACVD,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOoB,QAASC,EAASrB,EAAQjB,IAC/CuC,SAAU,GACVC,kBAAgB,IAIdC,EAAgBhC,EAAMiC,SAASC,QAAQ1C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA+B+DY,KAIjE"}
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * If true, hides the individual tab border when using stretched underline.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n  /**\n   * Tab index for focus management.\n   */\n  tabIndex?: number;\n  /**\n   * The id of the associated TabPanel for aria-controls attribute.\n   */\n  \"aria-controls\"?: string;\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      stretchedUnderline = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId,\n      tabIndex,\n      \"aria-controls\": ariaControls\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          aria-hidden={true}\n          type={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          size={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus,\n            [styles.stretchedUnderline]: stretchedUnderline\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          aria-controls={ariaControls || undefined}\n          tabIndex={tabIndex}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","type","tabIcon","getStyle","size","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"4sBAwEMA,IAAAA,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACiBC,EAAY3B,EAA7B,iBAII4B,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAjB,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,EACA,gBAAAmB,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,EAACC,cAAAyB,kBACc,EACbC,KAAMtC,EACND,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOoB,QAASC,EAASrB,EAAQjB,IAC/CuC,KAAM,GACNC,kBAAgB,IAIdC,EAAgBhC,EAAMiC,SAASC,QAAQ1C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA+B+DY,KAIjE"}

package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.module.scss.js

@@ -1,2 +1,2 @@
-var n={tabWrapper:"tabWrapper",stretchedUnderline:"stretchedUnderline",tabInner:"tabInner",tabIcon:"tabIcon",right:"right",tabFocusVisibleInset:"tabFocusVisibleInset",active:"active",disabled:"disabled"};!function(n){const e="s_id-304dfa4df00e_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper {\n  position: relative;\n  display: inline-block;\n  padding-left: 1px;\n  padding-right: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper.stretchedUnderline {\n  border-bottom: 0;\n}\n.tabWrapper:after {\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper .tabInner {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper .tabInner:focus {\n  outline: none;\n}\n.tabWrapper .tabInner .tabIcon {\n  color: var(--icon-color);\n  margin-right: var(--spacing-small);\n}\n.tabWrapper .tabInner .tabIcon.right {\n  margin-right: 0;\n  margin-left: var(--spacing-small);\n}\n.tabWrapper.tabFocusVisibleInset {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper.active:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper.disabled .tabInner {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper:not(.disabled) .tabInner:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{n as default};
+var n={tabWrapper:"tabWrapper",stretchedUnderline:"stretchedUnderline",tabInner:"tabInner",tabIcon:"tabIcon",right:"right",tabFocusVisibleInset:"tabFocusVisibleInset",active:"active",disabled:"disabled"};!function(n){const e="s_id-bfaa9c7255c3_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper {\n  position: relative;\n  display: inline-block;\n  padding-inline: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper.stretchedUnderline {\n  border-bottom: 0;\n}\n.tabWrapper:after {\n  display: block;\n  position: absolute;\n  inset-inline: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper .tabInner {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper .tabInner:focus {\n  outline: none;\n}\n.tabWrapper .tabInner .tabIcon {\n  color: var(--icon-color);\n  margin-inline-end: var(--space-8);\n}\n.tabWrapper .tabInner .tabIcon.right {\n  margin-inline-end: 0;\n  margin-inline-start: var(--space-8);\n}\n.tabWrapper.tabFocusVisibleInset {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper.active:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper.disabled .tabInner {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper:not(.disabled) .tabInner:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{n as default};
 //# sourceMappingURL=Tab.module.scss.js.map

package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as r}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as n}from"es-toolkit";import o,{forwardRef as i,useRef as s,useState as a,useEffect as l,useMemo as d,useCallback as c}from"react";import u from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import m from"../../../hooks/useMergeRef.js";import f from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as v,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as h}from"../../../helpers/typesciptCssModulesHelper.js";import I from"./TabList.module.scss.js";var C=i((function(i,C){var g=i.className,N=i.id,T=i.onTabChange,j=void 0===T?p:T,y=i.activeTabId,k=void 0===y?0:y,L=i.tabType,x=void 0===L?"Compact":L,A=i.size,E=i.stretchedUnderline,P=void 0!==E&&E,B=i.tabPanelIds,S=void 0===B?[]:B,U=i.children,_=i["data-testid"],G=s(null),H=m(C,G),K=s({}),M=a(k),O=e(M,2),W=O[0],w=O[1],z=f(k),R=f(W);l((function(){k!==z&&k!==W&&w(k)}),[k,z,W,w]),l((function(){var e;void 0!==R&&R!==W&&K.current[W]&&(null===(e=K.current[W])||void 0===e||e.focus())}),[W,R]);var q=d((function(){var e=new Set;return o.Children.forEach(U,(function(r,t){r.props.disabled&&e.add(t)})),e}),[U]),D=c((function(e){q.has(e)||(w(e),j&&j(e))}),[j,q]),F=c((function(e,r){var t,n=null===(t=U[r].props)||void 0===t?void 0:t.onClick;q.has(r)||(n&&n(r),D(r))}),[U,q,D]),J=c((function(e){return U[e]}),[U]),Q=d((function(){return Array.from(q)}),[q]),V=s(),X=u({ref:V,numberOfItemsInLine:null==U?void 0:U.length,itemsCount:null==U?void 0:U.length,getItemByIndex:J,onItemClicked:F,disabledIndexes:Q,circularNavigation:!0}),Y=X.activeIndex,Z=X.onSelectionAction,$=f(Y);l((function(){var e;void 0!==Y&&Y>=0&&$!==Y&&K.current[Y]&&(null===(e=K.current[Y])||void 0===e||e.focus())}),[Y,$]);var ee=d((function(){return o.Children.map(U,(function(e,r){var n=W===r,i=void 0===Y||0>Y?n:Y===r;return o.cloneElement(e,{value:r,active:n,focus:Y===r,onClick:Z,stretchedUnderline:P,className:t(I.tabListTabWrapper,e.props.className),tabInnerClassName:t(I.tabListTabInner,e.props.tabInnerClassName),tabIndex:i?0:-1,ariaControls:S[r],ref:function(e){K.current[r]=e}})}))}),[U,W,Y,Z,P,S,N]);return o.createElement("div",{ref:H,className:t(I.tabsWrapper,g,[h(I,n(x))],r({},I.stretchedUnderline,P)),id:N,"data-testid":_||v(b.TAB_LIST,N)},o.createElement("ul",{ref:V,className:t(I.tabsList,[h(I,A)]),role:"tablist"},ee))}));Object.assign(C,{isTabList:!0});export{C as default};
+import{slicedToArray as e,defineProperty as r}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import{camelCase as n}from"es-toolkit";import o,{forwardRef as i,useRef as s,useState as a,useEffect as l,useMemo as d,useCallback as c}from"react";import u from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import m from"../../../hooks/useMergeRef.js";import f from"../../../hooks/usePrevious/index.js";import{NOOP as p}from"../../../utils/function-utils.js";import{getTestId as v,ComponentDefaultTestId as b}from"../../../tests/testIds.js";import{getStyle as h}from"../../../helpers/typesciptCssModulesHelper.js";import I from"./TabList.module.scss.js";var C=i((function(i,C){var g=i.className,N=i.id,T=i.onTabChange,j=void 0===T?p:T,y=i.activeTabId,k=void 0===y?0:y,L=i.tabType,x=void 0===L?"Compact":L,A=i.size,E=i.stretchedUnderline,P=void 0!==E&&E,B=i.tabPanelIds,S=void 0===B?[]:B,U=i.children,_=i["data-testid"],G=s(null),H=m(C,G),K=s({}),M=a(k),O=e(M,2),W=O[0],w=O[1],z=f(k),R=f(W);l((function(){k!==z&&k!==W&&w(k)}),[k,z,W,w]),l((function(){var e;void 0!==R&&R!==W&&K.current[W]&&(null===(e=K.current[W])||void 0===e||e.focus())}),[W,R]);var q=d((function(){var e=new Set;return o.Children.forEach(U,(function(r,t){r.props.disabled&&e.add(t)})),e}),[U]),D=c((function(e){q.has(e)||(w(e),j&&j(e))}),[j,q]),F=c((function(e,r){var t,n=null===(t=U[r].props)||void 0===t?void 0:t.onClick;q.has(r)||(n&&n(r),D(r))}),[U,q,D]),J=c((function(e){return U[e]}),[U]),Q=d((function(){return Array.from(q)}),[q]),V=s(),X=u({ref:V,numberOfItemsInLine:null==U?void 0:U.length,itemsCount:null==U?void 0:U.length,getItemByIndex:J,onItemClicked:F,disabledIndexes:Q,circularNavigation:!0}),Y=X.activeIndex,Z=X.onSelectionAction,$=f(Y);l((function(){var e;void 0!==Y&&Y>=0&&$!==Y&&K.current[Y]&&(null===(e=K.current[Y])||void 0===e||e.focus())}),[Y,$]);var ee=d((function(){return o.Children.map(U,(function(e,r){var n=W===r,i=void 0===Y||0>Y?n:Y===r;return o.cloneElement(e,{value:r,active:n,focus:Y===r,onClick:Z,stretchedUnderline:P,className:t(I.tabListTabWrapper,e.props.className),tabInnerClassName:t(I.tabListTabInner,e.props.tabInnerClassName),tabIndex:i?0:-1,"aria-controls":S[r],ref:function(e){K.current[r]=e}})}))}),[U,W,Y,Z,P,S,N]);return o.createElement("div",{ref:H,className:t(I.tabsWrapper,g,[h(I,n(x))],r({},I.stretchedUnderline,P)),id:N,"data-testid":_||v(b.TAB_LIST,N)},o.createElement("ul",{ref:V,className:t(I.tabsList,[h(I,A)]),role:"tablist"},ee))}));Object.assign(C,{isTabList:!0});export{C as default};
 //# sourceMappingURL=TabList.js.map

package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * If true, Sets an E2E underline under the whole tabs component.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * Array of corresponding TabPanel ids for aria-controls relationship.\n   */\n  tabPanelIds?: string[];\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      stretchedUnderline = false,\n      tabPanelIds = [],\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const tabRefs = useRef<Record<number, HTMLElement | null>>({});\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n    const prevActiveTabState = usePrevious(activeTabState);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    // Focus management: when activeTabState changes, focus the active tab\n    useEffect(() => {\n      if (\n        prevActiveTabState !== undefined &&\n        prevActiveTabState !== activeTabState &&\n        tabRefs.current[activeTabState]\n      ) {\n        tabRefs.current[activeTabState]?.focus();\n      }\n    }, [activeTabState, prevActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes,\n      circularNavigation: true\n    });\n\n    // Focus management: when focusIndex changes during keyboard navigation, focus the focused tab\n    const prevFocusIndex = usePrevious(focusIndex);\n    useEffect(() => {\n      if (focusIndex !== undefined && focusIndex >= 0 && prevFocusIndex !== focusIndex && tabRefs.current[focusIndex]) {\n        tabRefs.current[focusIndex]?.focus();\n      }\n    }, [focusIndex, prevFocusIndex]);\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        const isActive = activeTabState === index;\n\n        const shouldBeFocusable = focusIndex !== undefined && focusIndex >= 0 ? focusIndex === index : isActive;\n\n        return React.cloneElement(child, {\n          value: index,\n          active: isActive,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          stretchedUnderline,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),\n          tabIndex: shouldBeFocusable ? 0 : -1,\n          ariaControls: tabPanelIds[index],\n          ref: (element: HTMLElement | null) => {\n            tabRefs.current[index] = element;\n          }\n        } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string; ariaControls?: string });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))], {\n          [styles.stretchedUnderline]: stretchedUnderline\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","_ref$stretchedUnderli","stretchedUnderline","_ref$tabPanelIds","tabPanelIds","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","tabRefs","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","prevActiveTabState","useEffect","undefined","current","_a","focus","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","prevFocusIndex","tabsToRender","map","isActive","shouldBeFocusable","cloneElement","active","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","tabIndex","ariaControls","element","createElement","tabsWrapper","getStyle","camelCase","_defineProperty","getTestId","ComponentDefaultTestId","TAB_LIST","tabsList","role","Object","assign","isTabList"],"mappings":"osBAoDMA,IAAAA,EAA4BC,GAChC,SAAAC,EAaEC,GACE,IAZAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KAAIC,EAAAZ,EACJa,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAd,EAC1Be,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAQhB,EAARgB,SACeC,EAAUjB,EAAzB,eAIIkB,EAAeC,EAAO,MACtBC,EAAYC,EAAYpB,EAAKiB,GAC7BI,EAAUH,EAA2C,CAAA,GAE3DI,EAA4CC,EAAiBhB,GAAYiB,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYtB,GAClCuB,EAAqBD,EAAYH,GAEvCK,GAAU,WAGJxB,IAAgBqB,GAAuBrB,IAAgBmB,GACzDC,EAAkBpB,EAErB,GAAE,CAACA,EAAaqB,EAAqBF,EAAgBC,IAGtDI,GAAU,sBAEiBC,IAAvBF,GACAA,IAAuBJ,GACvBL,EAAQY,QAAQP,KAEe,QAA/BQ,EAAAb,EAAQY,QAAQP,UAAe,IAAAQ,GAAAA,EAAEC,QAErC,GAAG,CAACT,EAAgBI,IAEpB,IAAMM,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACvB,IACEiC,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBvB,EAAkBuB,GAClB9C,GAAeA,EAAY8C,GAC7B,GACA,CAAC9C,EAAagC,IAEVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBpB,EAAAnB,EAASmC,GAAOL,aAAO,IAAAX,OAAA,EAAAA,EAAAqB,QAC3CnB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAACnC,EAAUqB,EAAgBY,IAEvBQ,EAAiBP,GAAY,SAACL,GAAa,OAA6B7B,EAAS6B,KAAQ,CAAC7B,IAC1F0C,EAAkBpB,GAAQ,WAAA,OAAMqB,MAAMC,KAAKvB,KAAiB,CAACA,IAC7DwB,EAAQ1C,IACd2C,EAAuDC,EAA0B,CAC/E9D,IAAK4D,EACLG,oBAAqBhD,aAAA,EAAAA,EAAUiD,OAC/BC,WAAYlD,aAAA,EAAAA,EAAUiD,OACtBR,eAAAA,EACAU,cAAed,EACfK,gBAAAA,EACAU,oBAAoB,IAPDC,EAAUP,EAAvBQ,YAAyBC,EAAiBT,EAAjBS,kBAW3BC,EAAiB1C,EAAYuC,GACnCrC,GAAU,sBACWC,IAAfoC,GAA4BA,GAAc,GAAKG,IAAmBH,GAAc/C,EAAQY,QAAQmC,KACvE,QAA3BlC,EAAAb,EAAQY,QAAQmC,UAAW,IAAAlC,GAAAA,EAAEC,QAEjC,GAAG,CAACiC,EAAYG,IAEhB,IAAMC,GAAenC,GAAQ,WAqB3B,OApByBG,EAAMC,SAASgC,IAAI1D,GAAU,SAAC4B,EAAOC,GAC5D,IAAM8B,EAAWhD,IAAmBkB,EAE9B+B,OAAmC3C,IAAfoC,GAA0C,EAAdA,EAAyCM,EAAvBN,IAAexB,EAEvF,OAAOJ,EAAMoC,aAAajC,EAAO,CAC/BU,MAAOT,EACPiC,OAAQH,EACRvC,MAAOiC,IAAexB,EACtBW,QAASe,EACT1D,mBAAAA,EACAX,UAAW6E,EAAGC,EAAOC,kBAAmBrC,EAAME,MAAM5C,WACpDgF,kBAAmBH,EAAGC,EAAOG,gBAAiBvC,EAAME,MAAMoC,mBAC1DE,SAAUR,EAAoB,GAAK,EACnCS,aAActE,EAAY8B,GAC1B5C,IAAK,SAACqF,GACJhE,EAAQY,QAAQW,GAASyC,CAC3B,GAEJ,GAEF,GAAG,CAACtE,EAAUW,EAAgB0C,EAAYE,EAAmB1D,EAAoBE,EAAaZ,IAE9F,OACEsC,EACE8C,cAAA,MAAA,CAAAtF,IAAKmB,EACLlB,UAAW6E,EAAGC,EAAOQ,YAAatF,EAAW,CAACuF,EAAST,EAAQU,EAAUhF,KAAUiF,EAChFX,CAAAA,EAAAA,EAAOnE,mBAAqBA,IAE/BV,GAAIA,gBACSc,GAAc2E,EAAUC,EAAuBC,SAAU3F,IAEtEsC,EAAA8C,cAAA,KAAA,CAAItF,IAAK4D,EAAO3D,UAAW6E,EAAGC,EAAOe,SAAU,CAACN,EAAST,EAAQrE,KAASqF,KAAK,WAC5EvB,IAIT,IAEFwB,OAAOC,OAAOpG,EAAS,CACrBqG,WAAW"}
+{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * If true, Sets an E2E underline under the whole tabs component.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * Array of corresponding TabPanel ids for aria-controls relationship.\n   */\n  tabPanelIds?: string[];\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      stretchedUnderline = false,\n      tabPanelIds = [],\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const tabRefs = useRef<Record<number, HTMLElement | null>>({});\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n    const prevActiveTabState = usePrevious(activeTabState);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    // Focus management: when activeTabState changes, focus the active tab\n    useEffect(() => {\n      if (\n        prevActiveTabState !== undefined &&\n        prevActiveTabState !== activeTabState &&\n        tabRefs.current[activeTabState]\n      ) {\n        tabRefs.current[activeTabState]?.focus();\n      }\n    }, [activeTabState, prevActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes,\n      circularNavigation: true\n    });\n\n    // Focus management: when focusIndex changes during keyboard navigation, focus the focused tab\n    const prevFocusIndex = usePrevious(focusIndex);\n    useEffect(() => {\n      if (focusIndex !== undefined && focusIndex >= 0 && prevFocusIndex !== focusIndex && tabRefs.current[focusIndex]) {\n        tabRefs.current[focusIndex]?.focus();\n      }\n    }, [focusIndex, prevFocusIndex]);\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        const isActive = activeTabState === index;\n\n        const shouldBeFocusable = focusIndex !== undefined && focusIndex >= 0 ? focusIndex === index : isActive;\n\n        return React.cloneElement(child, {\n          value: index,\n          active: isActive,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          stretchedUnderline,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),\n          tabIndex: shouldBeFocusable ? 0 : -1,\n          \"aria-controls\": tabPanelIds[index],\n          ref: (element: HTMLElement | null) => {\n            tabRefs.current[index] = element;\n          }\n        } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))], {\n          [styles.stretchedUnderline]: stretchedUnderline\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"],"names":["TabList","forwardRef","_ref","ref","className","id","_ref$onTabChange","onTabChange","NOOP","_ref$activeTabId","activeTabId","_ref$tabType","tabType","size","_ref$stretchedUnderli","stretchedUnderline","_ref$tabPanelIds","tabPanelIds","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","tabRefs","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","prevActiveTabIdProp","usePrevious","prevActiveTabState","useEffect","undefined","current","_a","focus","disabledTabIds","useMemo","disabledIds","Set","React","Children","forEach","child","index","props","disabled","add","onTabSelect","useCallback","tabId","has","onTabClick","value","tabCallbackFunc","onClick","getItemByIndex","disabledIndexes","Array","from","ulRef","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","prevFocusIndex","tabsToRender","map","isActive","shouldBeFocusable","cloneElement","active","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","tabIndex","element","createElement","tabsWrapper","getStyle","camelCase","_defineProperty","getTestId","ComponentDefaultTestId","TAB_LIST","tabsList","role","Object","assign","isTabList"],"mappings":"osBAoDMA,IAAAA,EAA4BC,GAChC,SAAAC,EAaEC,GACE,IAZAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAClBQ,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAT,EACfU,QAAAA,OAAU,IAAHD,EAAG,UAASA,EACnBE,EAAIX,EAAJW,KAAIC,EAAAZ,EACJa,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAd,EAC1Be,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAQhB,EAARgB,SACeC,EAAUjB,EAAzB,eAIIkB,EAAeC,EAAO,MACtBC,EAAYC,EAAYpB,EAAKiB,GAC7BI,EAAUH,EAA2C,CAAA,GAE3DI,EAA4CC,EAAiBhB,GAAYiB,EAAAC,EAAAH,EAAA,GAAlEI,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAElCI,EAAsBC,EAAYtB,GAClCuB,EAAqBD,EAAYH,GAEvCK,GAAU,WAGJxB,IAAgBqB,GAAuBrB,IAAgBmB,GACzDC,EAAkBpB,EAErB,GAAE,CAACA,EAAaqB,EAAqBF,EAAgBC,IAGtDI,GAAU,sBAEiBC,IAAvBF,GACAA,IAAuBJ,GACvBL,EAAQY,QAAQP,KAEe,QAA/BQ,EAAAb,EAAQY,QAAQP,UAAe,IAAAQ,GAAAA,EAAEC,QAErC,GAAG,CAACT,EAAgBI,IAEpB,IAAMM,EAAiBC,GAAQ,WAC7B,IAAMC,EAAc,IAAIC,IAMxB,OALAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,EAAOC,GACnCD,EAAME,MAAMC,UACdR,EAAYS,IAAIH,EAEpB,IACON,CACT,GAAG,CAACvB,IACEiC,EAAcC,GAClB,SAACC,GACKd,EAAee,IAAID,KACvBvB,EAAkBuB,GAClB9C,GAAeA,EAAY8C,GAC7B,GACA,CAAC9C,EAAagC,IAEVgB,EAAaH,GACjB,SAACI,EAA2BH,SACpBI,EAAyC,QAAvBpB,EAAAnB,EAASmC,GAAOL,aAAO,IAAAX,OAAA,EAAAA,EAAAqB,QAC3CnB,EAAee,IAAID,KACnBI,GAAiBA,EAAgBJ,GACrCF,EAAYE,GACb,GACD,CAACnC,EAAUqB,EAAgBY,IAEvBQ,EAAiBP,GAAY,SAACL,GAAa,OAA6B7B,EAAS6B,KAAQ,CAAC7B,IAC1F0C,EAAkBpB,GAAQ,WAAA,OAAMqB,MAAMC,KAAKvB,KAAiB,CAACA,IAC7DwB,EAAQ1C,IACd2C,EAAuDC,EAA0B,CAC/E9D,IAAK4D,EACLG,oBAAqBhD,aAAA,EAAAA,EAAUiD,OAC/BC,WAAYlD,aAAA,EAAAA,EAAUiD,OACtBR,eAAAA,EACAU,cAAed,EACfK,gBAAAA,EACAU,oBAAoB,IAPDC,EAAUP,EAAvBQ,YAAyBC,EAAiBT,EAAjBS,kBAW3BC,EAAiB1C,EAAYuC,GACnCrC,GAAU,sBACWC,IAAfoC,GAA4BA,GAAc,GAAKG,IAAmBH,GAAc/C,EAAQY,QAAQmC,KACvE,QAA3BlC,EAAAb,EAAQY,QAAQmC,UAAW,IAAAlC,GAAAA,EAAEC,QAEjC,GAAG,CAACiC,EAAYG,IAEhB,IAAMC,GAAenC,GAAQ,WAqB3B,OApByBG,EAAMC,SAASgC,IAAI1D,GAAU,SAAC4B,EAAOC,GAC5D,IAAM8B,EAAWhD,IAAmBkB,EAE9B+B,OAAmC3C,IAAfoC,GAA0C,EAAdA,EAAyCM,EAAvBN,IAAexB,EAEvF,OAAOJ,EAAMoC,aAAajC,EAAO,CAC/BU,MAAOT,EACPiC,OAAQH,EACRvC,MAAOiC,IAAexB,EACtBW,QAASe,EACT1D,mBAAAA,EACAX,UAAW6E,EAAGC,EAAOC,kBAAmBrC,EAAME,MAAM5C,WACpDgF,kBAAmBH,EAAGC,EAAOG,gBAAiBvC,EAAME,MAAMoC,mBAC1DE,SAAUR,EAAoB,GAAK,EACnC,gBAAiB7D,EAAY8B,GAC7B5C,IAAK,SAACoF,GACJ/D,EAAQY,QAAQW,GAASwC,CAC3B,GAEJ,GAEF,GAAG,CAACrE,EAAUW,EAAgB0C,EAAYE,EAAmB1D,EAAoBE,EAAaZ,IAE9F,OACEsC,EACE6C,cAAA,MAAA,CAAArF,IAAKmB,EACLlB,UAAW6E,EAAGC,EAAOO,YAAarF,EAAW,CAACsF,EAASR,EAAQS,EAAU/E,KAAUgF,EAChFV,CAAAA,EAAAA,EAAOnE,mBAAqBA,IAE/BV,GAAIA,gBACSc,GAAc0E,EAAUC,EAAuBC,SAAU1F,IAEtEsC,EAAA6C,cAAA,KAAA,CAAIrF,IAAK4D,EAAO3D,UAAW6E,EAAGC,EAAOc,SAAU,CAACN,EAASR,EAAQrE,KAASoF,KAAK,WAC5EtB,IAIT,IAEFuB,OAAOC,OAAOnG,EAAS,CACrBoG,WAAW"}

package/dist/mocked_classnames/src/components/Tabs/TabList/TabList.module.scss.js

@@ -1,2 +1,2 @@
-var e={tabsWrapper:"tabsWrapper",tabsList:"tabsList",sm:"sm",lg:"lg",stretched:"stretched",tabListTabWrapper:"tabListTabWrapper",tabListTabInner:"tabListTabInner",disabled:"disabled",stretchedUnderline:"stretchedUnderline"};!function(e){const t="s_id-1dd2e005bc2f_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const s=document.createElement("style");s.id=t,n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper .tabsList {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper .tabsList.sm {\n  height: 32px;\n}\n.tabsWrapper .tabsList.lg {\n  height: 48px;\n}\n.tabsWrapper.stretched .tabsList {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper .tabListTabInner {\n  width: 100%;\n}\n.tabsWrapper.disabled {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper.stretchedUnderline {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
+var e={tabsWrapper:"tabsWrapper",tabsList:"tabsList",sm:"sm",lg:"lg",stretched:"stretched",tabListTabWrapper:"tabListTabWrapper",tabListTabInner:"tabListTabInner",disabled:"disabled",stretchedUnderline:"stretchedUnderline"};!function(e){const t="s_id-1dd2e005bc2f_4_0_0-alpha_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper .tabsList {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper .tabsList.sm {\n  height: 32px;\n}\n.tabsWrapper .tabsList.lg {\n  height: 48px;\n}\n.tabsWrapper.stretched .tabsList {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper .tabListTabInner {\n  width: 100%;\n}\n.tabsWrapper.disabled {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper.stretchedUnderline {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
 //# sourceMappingURL=TabList.module.scss.js.map

package/dist/mocked_classnames/src/components/Tabs/TabPanel/TabPanel.module.scss.js

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

package/dist/mocked_classnames/src/components/Tabs/TabPanels/TabPanels.js

@@ -1,2 +1,2 @@
-import t from"classnames";import{camelCase as e}from"es-toolkit";import s,{forwardRef as a,useRef as r,useMemo as i}from"react";import o from"../../../hooks/useMergeRef.js";import{TabPanelsAnimationDirection as n}from"./TabPanelsConstants.js";import{getTestId as m,ComponentDefaultTestId as l}from"../../../tests/testIds.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import{withStaticProps as p}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import d from"./TabPanels.module.scss.js";var f=a((function(a,n){var p=a.className,f=a.id,u=a.activeTabId,v=void 0===u?0:u,j=a.animationDirection,b=void 0===j?"rtl":j,P=a.children,h=a["data-testid"],N=r(null),T=o(n,N),g=i((function(){return s.Children.map(P,(function(a,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(b):"";return s.cloneElement(a,Object.assign(Object.assign({index:r},a.props),{className:t(d.tabPanel,[c(d,o)],[c(d,e(n))],a.props.className)}))})).filter(Boolean)}),[P,v,b]);return s.createElement("div",{ref:T,className:t(d.tabPanelsWrapper,p),id:f,"data-testid":h||m(l.TAB_PANELS,f)},g)}));Object.assign(f,{isTabPanels:!0});var u=p(f,{animationDirections:n});export{u as default};
+import e from"classnames";import{camelCase as t}from"es-toolkit";import a,{forwardRef as s,useRef as r,useMemo as i}from"react";import o from"../../../hooks/useMergeRef.js";import{getTestId as n,ComponentDefaultTestId as l}from"../../../tests/testIds.js";import{getStyle as m}from"../../../helpers/typesciptCssModulesHelper.js";import c from"./TabPanels.module.scss.js";var p=s((function(s,p){var d=s.className,f=s.id,u=s.activeTabId,v=void 0===u?0:u,b=s.animationDirection,j=void 0===b?"rtl":b,N=s.children,P=s["data-testid"],g=r(null),h=o(p,g),T=i((function(){return a.Children.map(N,(function(s,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(j):"";return a.cloneElement(s,Object.assign(Object.assign({index:r},s.props),{className:e(c.tabPanel,[m(c,o)],[m(c,t(n))],s.props.className)}))})).filter(Boolean)}),[N,v,j]);return a.createElement("div",{ref:h,className:e(c.tabPanelsWrapper,d),id:f,"data-testid":P||n(l.TAB_PANELS,f)},T)}));Object.assign(p,{isTabPanels:!0});export{p as default};
 //# sourceMappingURL=TabPanels.js.map

package/dist/mocked_classnames/src/components/Tabs/TabPanels/TabPanels.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanels.js","sources":["../../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { TabPanelsAnimationDirection as TabPanelsAnimationDirectionEnum } from \"./TabPanelsConstants\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab panel.\n   */\n  activeTabId?: number;\n  /**\n   * The animation direction when switching between tab panels.\n   */\n  animationDirection?: TabPanelsAnimationDirection;\n  /**\n   * The child elements representing tab panels.\n   */\n  children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n  (\n    { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const renderedTabs = useMemo(() => {\n      return React.Children.map(children, (child, index) => {\n        const isActiveTab = activeTabId === index;\n        if (!isActiveTab) return null;\n        const activeClass = isActiveTab ? \"active\" : \"non-active\";\n        const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n        return React.cloneElement(child, {\n          index,\n          ...child.props,\n          className: cx(\n            styles.tabPanel,\n            [getStyle(styles, activeClass)],\n            [getStyle(styles, camelCase(animationClass))],\n            child.props.className\n          )\n        });\n      }).filter(Boolean);\n    }, [children, activeTabId, animationDirection]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabPanelsWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n      >\n        {renderedTabs}\n      </div>\n    );\n  }\n);\n\nObject.assign(TabPanels, {\n  isTabPanels: true\n});\n\ninterface TabPanelsStaticProps {\n  animationDirections: typeof TabPanelsAnimationDirectionEnum;\n}\n\nexport default withStaticProps<TabPanelsProps, TabPanelsStaticProps>(TabPanels, {\n  animationDirections: TabPanelsAnimationDirectionEnum\n});\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels","withStaticProps","animationDirections","TabPanelsAnimationDirectionEnum"],"mappings":"siBA2BA,IAAMA,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,EACxBO,OAAAC,OAAAD,OAAAC,OAAA,CAAAP,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,QACX,GAAE,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,EACS,cAAAM,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa,IAOf,IAAeC,EAAAA,EAAsD5C,EAAW,CAC9E6C,oBAAqBC"}
+{"version":3,"file":"TabPanels.js","sources":["../../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab panel.\n   */\n  activeTabId?: number;\n  /**\n   * The animation direction when switching between tab panels.\n   */\n  animationDirection?: TabPanelsAnimationDirection;\n  /**\n   * The child elements representing tab panels.\n   */\n  children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n  (\n    { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const renderedTabs = useMemo(() => {\n      return React.Children.map(children, (child, index) => {\n        const isActiveTab = activeTabId === index;\n        if (!isActiveTab) return null;\n        const activeClass = isActiveTab ? \"active\" : \"non-active\";\n        const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n        return React.cloneElement(child, {\n          index,\n          ...child.props,\n          className: cx(\n            styles.tabPanel,\n            [getStyle(styles, activeClass)],\n            [getStyle(styles, camelCase(animationClass))],\n            child.props.className\n          )\n        });\n      }).filter(Boolean);\n    }, [children, activeTabId, animationDirection]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabPanelsWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n      >\n        {renderedTabs}\n      </div>\n    );\n  }\n);\n\nObject.assign(TabPanels, {\n  isTabPanels: true\n});\n\nexport default TabPanels;\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels"],"mappings":"kXA0BMA,IAAAA,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,EACxBO,OAAAC,OAAAD,OAAAC,OAAA,CAAAP,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,QACX,GAAE,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,EACS,cAAAM,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa"}

package/dist/mocked_classnames/src/components/Tabs/TabPanels/TabPanels.module.scss.js

@@ -1,2 +1,2 @@
-var n={tabPanelsWrapper:"tabPanelsWrapper",tabPanel:"tabPanel",animationDirectionRtl:"animationDirectionRtl",animationDirectionLtr:"animationDirectionLtr",active:"active",panelSlideIn:"panelSlideIn"};!function(n){const e="s_id-078bacbdb1e4_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper .tabPanel {\n  display: none;\n}\n.tabPanelsWrapper .tabPanel.animationDirectionRtl {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper .tabPanel.animationDirectionLtr {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper .tabPanel.active {\n  display: block;\n  animation: panelSlideIn var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{n as default};
+var n={tabPanelsWrapper:"tabPanelsWrapper",tabPanel:"tabPanel",animationDirectionRtl:"animationDirectionRtl",animationDirectionLtr:"animationDirectionLtr",active:"active",panelSlideIn:"panelSlideIn"};!function(n){const e="s_id-078bacbdb1e4_4_0_0-alpha_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper .tabPanel {\n  display: none;\n}\n.tabPanelsWrapper .tabPanel.animationDirectionRtl {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper .tabPanel.animationDirectionLtr {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper .tabPanel.active {\n  display: block;\n  animation: panelSlideIn var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{n as default};
 //# sourceMappingURL=TabPanels.module.scss.js.map

package/dist/mocked_classnames/src/components/TextArea/TextArea.module.scss.js

@@ -1,2 +1,2 @@
-var e={textAreaWrapper:"textAreaWrapper",label:"label",required:"required",subTextContainer:"subTextContainer",helpText:"helpText",limitText:"limitText",textArea:"textArea",small:"small",large:"large",resize:"resize",success:"success",error:"error",disabled:"disabled",readOnly:"readOnly"};!function(e){const r="s_id-c3fc7910bb37_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--spacing-xs);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper .label {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper .label.required::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper .subTextContainer {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper .subTextContainer .helpText {\n  display: flex;\n}\n.textAreaWrapper .subTextContainer .limitText {\n  margin-left: auto;\n}\n.textAreaWrapper .textArea {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--spacing-small) var(--spacing-medium);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea:active, .textAreaWrapper .textArea:focus, .textAreaWrapper .textArea:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper .textArea.small {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper .textArea.large {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper .textArea:not(.resize) {\n  resize: none;\n}\n.textAreaWrapper.success .textArea {\n  border-color: var(--color-success);\n}\n.textAreaWrapper.success .helpText {\n  color: var(--color-success);\n}\n.textAreaWrapper.error .textArea {\n  border-color: var(--color-error);\n}\n.textAreaWrapper.error .helpText,\n.textAreaWrapper.error .limitText {\n  color: var(--color-error);\n}\n.textAreaWrapper.disabled .textArea,\n.textAreaWrapper.disabled .textArea:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper.disabled .helpText {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper.readOnly .textArea,\n.textAreaWrapper.readOnly .textArea:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
+var e={textAreaWrapper:"textAreaWrapper",label:"label",required:"required",subTextContainer:"subTextContainer",helpText:"helpText",limitText:"limitText",textArea:"textArea",small:"small",large:"large",resize:"resize",success:"success",error:"error",disabled:"disabled",readOnly:"readOnly"};!function(e){const r="s_id-48d7f417273f_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+r))return;const a=document.createElement("style");a.id=r,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--space-4);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper .label {\n  display: inline-flex;\n  gap: var(--space-4);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper .label.required::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper .subTextContainer {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper .subTextContainer .helpText {\n  display: flex;\n}\n.textAreaWrapper .subTextContainer .limitText {\n  margin-inline-start: auto;\n}\n.textAreaWrapper .textArea {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--space-8);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textAreaWrapper .textArea:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper .textArea:active, .textAreaWrapper .textArea:focus, .textAreaWrapper .textArea:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper .textArea.small {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper .textArea.large {\n  padding: var(--space-12);\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper .textArea:not(.resize) {\n  resize: none;\n}\n.textAreaWrapper.success .textArea {\n  border-color: var(--color-success);\n}\n.textAreaWrapper.success .helpText {\n  color: var(--color-success);\n}\n.textAreaWrapper.error .textArea {\n  border-color: var(--color-error);\n}\n.textAreaWrapper.error .helpText,\n.textAreaWrapper.error .limitText {\n  color: var(--color-error);\n}\n.textAreaWrapper.disabled .textArea,\n.textAreaWrapper.disabled .textArea:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper.disabled .textArea::placeholder,\n.textAreaWrapper.disabled .textArea:hover::placeholder {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper.disabled .helpText {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper.readOnly .textArea,\n.textAreaWrapper.readOnly .textArea:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
 //# sourceMappingURL=TextArea.module.scss.js.map

package/dist/mocked_classnames/src/components/TextField/TextField.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as a}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import t,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as s,useEffect as c}from"react";import d from"../../hooks/useDebounceEvent/index.js";import{Icon as m}from"@vibe/icon/mockedClassNames";import{Loader as u}from"@vibe/loader/mockedClassNames";import{Text as p}from"@vibe/typography/mockedClassNames";import v from"../FieldLabel/FieldLabel.js";import{TextFieldFeedbackState as f,TextFieldTextType as b,FEEDBACK_CLASSES as C,SIZE_MAPPER as x,TextFieldAriaLabel as y}from"./TextFieldConstants.js";import{BASE_SIZES as E}from"../../constants/sizes.js";import N from"../../hooks/useMergeRef.js";import{Clickable as h}from"@vibe/clickable/mockedClassNames";import{getTestId as g}from"../../tests/testIds.js";import{NOOP as T}from"../../utils/function-utils.js";import{ComponentDefaultTestId as I,ComponentVibeId as k}from"../../tests/constants.js";import{withStaticProps as F}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import j from"./TextField.module.scss.js";import{Tooltip as L}from"@vibe/tooltip/mockedClassNames";import D from"../HiddenText/HiddenText.js";var w={primary:"",secondary:""},H=F(n((function(n,f){var b=n.className,E=void 0===b?"":b,F=n.placeholder,H=void 0===F?"":F,A=n.autoComplete,S=void 0===A?"off":A,_=n.value,q=n.onChange,R=void 0===q?T:q,W=n.onBlur,z=void 0===W?T:W,B=n.onFocus,O=void 0===B?T:B,K=n.onKeyDown,M=void 0===K?T:K,P=n.onWheel,V=void 0===P?T:P,X=n.debounceRate,U=void 0===X?0:X,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,ae=void 0===ee?T:ee,oe=n.iconName,te=n.secondaryIconName,ne=n.id,re=void 0===ne?"input":ne,ie=n.title,le=void 0===ie?"":ie,se=n.size,ce=void 0===se?"small":se,de=n.validation,me=void 0===de?null:de,ue=n.wrapperClassName,pe=void 0===ue?"":ue,ve=n.onIconClick,fe=void 0===ve?T:ve,be=n.clearOnIconClick,Ce=void 0!==be&&be,xe=n.labelIconName,ye=n.showCharCount,Ee=void 0!==ye&&ye,Ne=n.inputAriaLabel,he=n.searchResultsContainerId,ge=void 0===he?"":he,Te=n.activeDescendant,Ie=void 0===Te?"":Te,ke=n.iconsNames,Fe=void 0===ke?w:ke,je=n.type,Le=void 0===je?"text":je,De=n.maxLength,we=void 0===De?null:De,He=n.allowExceedingMaxLength,Ae=void 0!==He&&He,Se=n.trim,_e=void 0!==Se&&Se,qe=n.role,Re=void 0===qe?"":qe,We=n.required,ze=void 0!==We&&We,Be=n.requiredErrorText,Oe=void 0===Be?"":Be,Ke=n.loading,Me=void 0!==Ke&&Ke,Pe=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Ue=n.underline,Ye=void 0!==Ue&&Ue,Ge=n.name,Je=n.controlled,Qe=void 0!==Je&&Je,Ze=n.iconTooltipContent,$e=n.secondaryTooltipContent,ea=n.dir,aa=r(!1),oa=e(aa,2),ta=oa[0],na=oa[1],ra=i(null),ia=N(f,ra,ae),la=l((function(e){ze&&!e.target.value&&na(!0),z(e)}),[z,ze]),sa=l((function(e,a){ta&&e&&na(!1),R(e,a||{target:ra.current})}),[R,ta]),ca=d({delay:U,onChange:sa,initialStateValue:_,trim:_e}),da=ca.inputValue,ma=ca.onEventChanged,ua=ca.clearValue,pa=s((function(){return Qe?_:da}),[Qe,_,da]),va=l((function(e){Qe?sa(e.target.value,e):ma(e)}),[Qe,sa,ma]),fa=s((function(){return te&&pa?te:oe}),[oe,te,pa]),ba=l((function(){Q||(Ce&&(ra.current&&ra.current.focus(),ra.current.value="",Qe?sa(""):ua()),fe(fa))}),[Q,Ce,fe,fa,Qe,sa,ua]),Ca=s((function(){return"number"==typeof we&&pa&&pa.length>we?C.error:me&&me.status||ta?C[ta?"error":me.status]:""}),[we,me,ta,pa]),xa=oe||te,ya=Ee||me&&me.text||ta&&Oe,Ea=te===fa,Na=oe===fa,ha=(fe!==T||Fe.primary||Ze)&&pa&&oe.length&&Na,ga=(te||$e)&&Ea&&!!pa,Ta=Ae?"".concat(re,"-allow-exceeding-max-length-text"):void 0;c((function(){if((null==ra?void 0:ra.current)&&G){var e=requestAnimationFrame((function(){return ra.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[ra,G]);var Ia=fe!==T||Ce,ka=Fe.primary||Ze,Fa=Fe.secondary||$e;return t.createElement("div",{className:o(j.textField,pe,a(a({},j.disabled,Q),j.onlyUnderline,Ye)),role:Re,"aria-busy":Me},t.createElement("div",{className:o(j.labelWrapper)},t.createElement(v,{labelText:le,icon:xe,labelFor:re,required:ze}),t.createElement("div",{className:o(j.inputWrapper,x[ce],Ca)},t.createElement("input",{className:o(E,j.input,a(a({},j.inputHasIcon,!!xa),j.readOnly,$)),placeholder:H,autoComplete:S,value:pa,onChange:va,disabled:Q,readOnly:$,ref:ia,type:Le,id:re,"data-testid":Pe||g(I.TEXT_FIELD,re),"data-vibe":k.TEXT_FIELD,name:Ge,onBlur:la,onFocus:O,onKeyDown:M,onWheel:V,maxLength:"number"!=typeof we||Ae?void 0:we,role:ge&&"combobox","aria-label":Ne||H,"aria-invalid":me&&"error"===me.status||ta,"aria-owns":ge,"aria-activedescendant":Ie,"aria-required":ze,"aria-describedby":Ta,required:ze,tabIndex:Xe,dir:ea}),Me&&t.createElement("div",{className:o(j.loaderContainer,a({},j.loaderContainerHasIcon,xa))},t.createElement("div",{className:o(j.loader)},t.createElement(u,{className:o(j.loaderSvg)}))),oe&&t.createElement(L,{content:Na?Ze:void 0,referenceWrapperClassName:j.tooltipContainer},t.createElement(h,{className:o(j.iconContainer,a(a(a({},j.iconContainerHasIcon,xa),j.iconContainerActive,Na),j.iconContainerClickable,Ia)),onClick:ba,tabIndex:ha?"0":"-1",ariaLabel:ka},t.createElement(m,{icon:oe,className:o(j.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"}))),te&&t.createElement(L,{content:Ea?$e:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:j.tooltipContainer},t.createElement(h,{className:o(j.iconContainer,a(a(a({},j.iconContainerHasIcon,xa),j.iconContainerActive,Ea),j.iconContainerClickable,Ia)),onClick:ba,tabIndex:ga?"0":"-1","data-testid":Ve||g(I.TEXT_FIELD_SECONDARY_BUTTON,re),ariaLabel:Fa},t.createElement(m,{icon:te,className:o(j.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"})))),ya&&t.createElement(p,{type:"text2",color:"secondary",className:o(j.subTextContainer)},(me&&me.text||ta&&Oe)&&t.createElement("span",{className:o(j.subTextContainerStatus)},ta?Oe:me.text),Ee&&t.createElement("span",{className:o(j.counter),"aria-label":y.CHAR},pa&&pa.length||0,"number"==typeof we&&"/".concat(we),t.createElement(D,{id:Ta,text:"Maximum of ".concat(we," characters")})))))})),{sizes:E,feedbacks:f,types:b});export{H as default};
+import{slicedToArray as e,defineProperty as a}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import o,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as c,useEffect as s}from"react";import d from"../../hooks/useDebounceEvent/index.js";import{Icon as m}from"@vibe/icon/mockedClassNames";import{Loader as u}from"@vibe/loader/mockedClassNames";import{Text as v}from"@vibe/typography/mockedClassNames";import p from"../FieldLabel/FieldLabel.js";import{FEEDBACK_CLASSES as f,SIZE_MAPPER as b,TextFieldAriaLabel as C}from"./TextFieldConstants.js";import x from"../../hooks/useMergeRef.js";import{Clickable as E}from"@vibe/clickable/mockedClassNames";import{getTestId as y}from"../../tests/testIds.js";import{NOOP as N}from"../../utils/function-utils.js";import{ComponentDefaultTestId as g,ComponentVibeId as h}from"../../tests/constants.js";import T from"./TextField.module.scss.js";import{Tooltip as I}from"@vibe/tooltip/mockedClassNames";import k from"../HiddenText/HiddenText.js";var F=n((function(n,F){var L=n.className,j=void 0===L?"":L,D=n.placeholder,H=void 0===D?"":D,w=n.autoComplete,A=void 0===w?"off":w,_=n.value,q=n.onChange,R=void 0===q?N:q,W=n.onBlur,B=void 0===W?N:W,O=n.onFocus,S=void 0===O?N:O,z=n.onKeyDown,K=void 0===z?N:z,M=n.onWheel,V=void 0===M?N:M,X=n.debounceRate,P=void 0===X?0:X,U=n.autoFocus,Y=void 0!==U&&U,G=n.disabled,J=void 0!==G&&G,Q=n.readonly,Z=void 0!==Q&&Q,$=n.setRef,ee=void 0===$?N:$,ae=n.icon,te=n.secondaryIconName,oe=n.id,ne=void 0===oe?"input":oe,re=n.title,ie=void 0===re?"":re,le=n.size,ce=void 0===le?"small":le,se=n.validation,de=void 0===se?null:se,me=n.wrapperClassName,ue=void 0===me?"":me,ve=n.onIconClick,pe=void 0===ve?N:ve,fe=n.clearOnIconClick,be=void 0!==fe&&fe,Ce=n.labelIconName,xe=n.showCharCount,Ee=void 0!==xe&&xe,ye=n.inputAriaLabel,Ne=n.searchResultsContainerId,ge=void 0===Ne?"":Ne,he=n.activeDescendant,Te=void 0===he?"":he,Ie=n.iconLabel,ke=n.secondaryIconLabel,Fe=n.type,Le=void 0===Fe?"text":Fe,je=n.maxLength,De=void 0===je?null:je,He=n.allowExceedingMaxLength,we=void 0!==He&&He,Ae=n.trim,_e=void 0!==Ae&&Ae,qe=n.role,Re=void 0===qe?"":qe,We=n.required,Be=void 0!==We&&We,Oe=n.requiredErrorText,Se=void 0===Oe?"":Oe,ze=n.loading,Ke=void 0!==ze&&ze,Me=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Pe=n.underline,Ue=void 0!==Pe&&Pe,Ye=n.name,Ge=n.controlled,Je=void 0!==Ge&&Ge,Qe=n.iconTooltipContent,Ze=n.secondaryTooltipContent,$e=n.dir,ea=r(!1),aa=e(ea,2),ta=aa[0],oa=aa[1],na=i(null),ra=x(F,na,ee),ia=l((function(e){Be&&!e.target.value&&oa(!0),B(e)}),[B,Be]),la=l((function(e,a){ta&&e&&oa(!1),R(e,a||{target:na.current})}),[R,ta]),ca=d({delay:P,onChange:la,initialStateValue:_,trim:_e}),sa=ca.inputValue,da=ca.onEventChanged,ma=ca.clearValue,ua=c((function(){return Je?_:sa}),[Je,_,sa]),va=l((function(e){Je?la(e.target.value,e):da(e)}),[Je,la,da]),pa=c((function(){return te&&ua?te:ae}),[ae,te,ua]),fa=l((function(){J||(be&&(na.current&&na.current.focus(),na.current.value="",Je?la(""):ma()),pe(pa))}),[J,be,pe,pa,Je,la,ma]),ba=c((function(){return"number"==typeof De&&ua&&ua.length>De?f.error:de&&de.status||ta?f[ta?"error":de.status]:""}),[De,de,ta,ua]),Ca=ae||te,xa=Ee||de&&de.text||ta&&Se,Ea=te===pa,ya=ae===pa,Na=(pe!==N||Ie||Qe)&&ua&&ae.length&&ya,ga=(te||Ze)&&Ea&&!!ua,ha=we?"".concat(ne,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==na?void 0:na.current)&&Y){var e=requestAnimationFrame((function(){return na.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[na,Y]);var Ta=pe!==N||be,Ia=Ie||Qe,ka=ke||Ze;return o.createElement("div",{className:t(T.textField,ue,a(a({},T.disabled,J),T.onlyUnderline,Ue)),role:Re,"aria-busy":Ke},o.createElement("div",{className:t(T.labelWrapper)},o.createElement(p,{labelText:ie,icon:Ce,labelFor:ne,required:Be}),o.createElement("div",{className:t(T.inputWrapper,b[ce],ba)},o.createElement("input",{className:t(j,T.input,a(a({},T.inputHasIcon,!!Ca),T.readOnly,Z)),placeholder:H,autoComplete:A,value:ua,onChange:va,disabled:J,readOnly:Z,ref:ra,type:Le,id:ne,"data-testid":Me||y(g.TEXT_FIELD,ne),"data-vibe":h.TEXT_FIELD,name:Ye,onBlur:ia,onFocus:S,onKeyDown:K,onWheel:V,maxLength:"number"!=typeof De||we?void 0:De,role:ge&&"combobox","aria-label":ye||H,"aria-invalid":de&&"error"===de.status||ta,"aria-owns":ge,"aria-activedescendant":Te,"aria-required":Be,"aria-describedby":ha,required:Be,tabIndex:Xe,dir:$e}),Ke&&o.createElement("div",{className:t(T.loaderContainer,a({},T.loaderContainerHasIcon,Ca))},o.createElement("div",{className:t(T.loader)},o.createElement(u,{className:t(T.loaderSvg)}))),ae&&o.createElement(I,{content:ya?Qe:void 0,referenceWrapperClassName:T.tooltipContainer},o.createElement(E,{className:t(T.iconContainer,a(a(a({},T.iconContainerHasIcon,Ca),T.iconContainerActive,ya),T.iconContainerClickable,Ta)),onClick:fa,tabIndex:Na?0:-1,"aria-label":Ia},o.createElement(m,{icon:ae,className:t(T.icon),type:"font",size:"small"===ce?"16px":"18px"}))),te&&o.createElement(I,{content:Ea?Ze:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:T.tooltipContainer},o.createElement(E,{className:t(T.iconContainer,a(a(a({},T.iconContainerHasIcon,Ca),T.iconContainerActive,Ea),T.iconContainerClickable,Ta)),onClick:fa,tabIndex:ga?0:-1,"data-testid":Ve||y(g.TEXT_FIELD_SECONDARY_BUTTON,ne),"aria-label":ka},o.createElement(m,{icon:te,className:t(T.icon),type:"font",size:"small"===ce?"16px":"18px"})))),xa&&o.createElement(v,{type:"text2",color:"secondary",className:t(T.subTextContainer)},(de&&de.text||ta&&Se)&&o.createElement("span",{className:t(T.subTextContainerStatus)},ta?Se:de.text),Ee&&o.createElement("span",{className:t(T.counter),"aria-label":C.CHAR},ua&&ua.length||0,"number"==typeof De&&"/".concat(De),o.createElement(k,{id:ha,text:"Maximum of ".concat(De," characters")})))))}));export{F as default};
 //# sourceMappingURL=TextField.js.map

package/dist/mocked_classnames/src/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  ChangeEvent,\n  type ChangeEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport {\n  FEEDBACK_CLASSES,\n  SIZE_MAPPER,\n  TextFieldAriaLabel,\n  TextFieldFeedbackState as TextFieldFeedbackStateEnum,\n  TextFieldTextType as TextFieldTextTypeEnum\n} from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport { BASE_SIZES } from \"../../constants/sizes\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  iconName?: string | React.FunctionComponent | null;\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Icon labels for accessibility.\n   */\n  iconsNames?: {\n    primary: string;\n    secondary: string;\n  };\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      iconName,\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconsNames = EMPTY_OBJECT,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconsNames.primary || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconLabel = iconsNames.primary || iconTooltipContent;\n    const secondaryIconLabel = iconsNames.secondary || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n            {/*Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule*/}\n            {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n            <input\n              className={cx(className, styles.input, {\n                [styles.inputHasIcon]: !!hasIcon,\n                [styles.readOnly]: readonly\n              })}\n              placeholder={placeholder}\n              autoComplete={autoComplete}\n              value={inputValue}\n              onChange={handleChange}\n              disabled={disabled}\n              readOnly={readonly}\n              ref={mergedRef}\n              type={type}\n              id={id}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n              data-vibe={ComponentVibeId.TEXT_FIELD}\n              name={name}\n              onBlur={onBlurCallback}\n              onFocus={onFocus}\n              onKeyDown={onKeyDown}\n              onWheel={onWheel}\n              maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n              role={searchResultsContainerId && \"combobox\"} // For voice reader\n              aria-label={inputAriaLabel || placeholder}\n              aria-invalid={(validation && validation.status === \"error\") || isRequiredAndEmpty}\n              aria-owns={searchResultsContainerId}\n              aria-activedescendant={activeDescendant}\n              aria-required={required}\n              aria-describedby={allowExceedingMaxLengthTextId}\n              required={required}\n              tabIndex={tabIndex}\n              dir={dir}\n            />\n            {loading && (\n              <div\n                className={cx(styles.loaderContainer, {\n                  [styles.loaderContainerHasIcon]: hasIcon\n                })}\n              >\n                <div className={cx(styles.loader)}>\n                  <Loader className={cx(styles.loaderSvg)} />\n                </div>\n              </div>\n            )}\n            {iconName && (\n              <Tooltip\n                content={isPrimary ? iconTooltipContent : undefined}\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isPrimary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n                  ariaLabel={primaryIconLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  ariaLabel={secondaryIconLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\ninterface TextFieldStaticProps {\n  sizes: typeof BASE_SIZES;\n  types: typeof TextFieldTextTypeEnum;\n  feedbacks: typeof TextFieldFeedbackStateEnum;\n}\n\nexport default withStaticProps<TextFieldProps, TextFieldStaticProps, unknown>(TextField, {\n  sizes: BASE_SIZES,\n  feedbacks: TextFieldFeedbackStateEnum,\n  types: TextFieldTextTypeEnum\n});\n"],"names":["EMPTY_OBJECT","primary","secondary","withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","ariaLabel","Icon","iconType","iconSize","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText","sizes","BASE_SIZES","feedbacks","TextFieldFeedbackStateEnum","types","TextFieldTextTypeEnum"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type ChangeEventHandler, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport { FEEDBACK_CLASSES, SIZE_MAPPER, TextFieldAriaLabel } from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  icon?: string | React.FunctionComponent | null;\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Accessible label for the primary icon.\n   */\n  iconLabel?: string;\n  /**\n   * Accessible label for the secondary icon.\n   */\n  secondaryIconLabel?: string;\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      icon: iconName,\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconLabel,\n      secondaryIconLabel,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconLabel || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconAriaLabel = iconLabel || iconTooltipContent;\n    const secondaryIconAriaLabel = secondaryIconLabel || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n            {/*Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule*/}\n            {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n            <input\n              className={cx(className, styles.input, {\n                [styles.inputHasIcon]: !!hasIcon,\n                [styles.readOnly]: readonly\n              })}\n              placeholder={placeholder}\n              autoComplete={autoComplete}\n              value={inputValue}\n              onChange={handleChange}\n              disabled={disabled}\n              readOnly={readonly}\n              ref={mergedRef}\n              type={type}\n              id={id}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n              data-vibe={ComponentVibeId.TEXT_FIELD}\n              name={name}\n              onBlur={onBlurCallback}\n              onFocus={onFocus}\n              onKeyDown={onKeyDown}\n              onWheel={onWheel}\n              maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n              role={searchResultsContainerId && \"combobox\"} // For voice reader\n              aria-label={inputAriaLabel || placeholder}\n              aria-invalid={(validation && validation.status === \"error\") || isRequiredAndEmpty}\n              aria-owns={searchResultsContainerId}\n              aria-activedescendant={activeDescendant}\n              aria-required={required}\n              aria-describedby={allowExceedingMaxLengthTextId}\n              required={required}\n              tabIndex={tabIndex}\n              dir={dir}\n            />\n            {loading && (\n              <div\n                className={cx(styles.loaderContainer, {\n                  [styles.loaderContainerHasIcon]: hasIcon\n                })}\n              >\n                <div className={cx(styles.loader)}>\n                  <Loader className={cx(styles.loaderSvg)} />\n                </div>\n              </div>\n            )}\n            {iconName && (\n              <Tooltip\n                content={isPrimary ? iconTooltipContent : undefined}\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isPrimary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? 0 : -1}\n                  aria-label={primaryIconAriaLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? 0 : -1}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  aria-label={secondaryIconAriaLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default TextField;\n"],"names":["TextField","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","icon","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","iconLabel","secondaryIconLabel","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconAriaLabel","secondaryIconAriaLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","Icon","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText"],"mappings":"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"}

package/dist/mocked_classnames/src/components/TextField/TextField.module.scss.js

@@ -1,2 +1,2 @@
-var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-695413f4db8e_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField * {\n  box-sizing: border-box;\n}\n.textField .labelWrapper {\n  width: 100%;\n}\n.textField .subTextContainer {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField .subTextContainer .counter {\n  margin-left: auto;\n}\n.textField.disabled .icon {\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper {\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper .input {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper .input::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n  background-color: transparent;\n}\n.textField .inputWrapper {\n  width: 100%;\n  position: relative;\n}\n.textField .inputWrapper .input {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField .inputWrapper .input.readOnly {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField .inputWrapper .input.inputHover {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n  border-color: var(--primary-color);\n}\n.textField .inputWrapper .input::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField .inputWrapper .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField .inputWrapper .input.round {\n  border-radius: 50px;\n}\n.textField .inputWrapper .input.square {\n  border-radius: 0;\n}\n.textField .inputWrapper .input.onlyUnderline {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n.textField .inputWrapper .tooltipContainer {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n  width: 40px;\n}\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n  width: 46px;\n}\n.textField .inputWrapper .iconContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive {\n  opacity: 1;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField .inputWrapper .iconContainer .icon {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField .inputWrapper.inputErrorValidation:hover .input {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .input {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .input {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.wrapperSizeSmall {\n  height: 32px;\n}\n.textField .inputWrapper.wrapperSizeSmall .input {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n.textField .inputWrapper.wrapperSizeMedium {\n  height: 40px;\n}\n.textField .inputWrapper.wrapperSizeMedium .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n  padding-left: 4px;\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper.wrapperSizeLarge {\n  height: 48px;\n}\n.textField .inputWrapper.wrapperSizeLarge .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n  height: 40px;\n  width: 40px;\n}\n.textField .inputWrapper:hover .input {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper .loaderContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n  right: 32px;\n}\n.textField .inputWrapper .loaderContainer .loader {\n  width: 16px;\n  height: 16px;\n}\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n  color: var(--secondary-text-color);\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{n as default};
+var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-c26ff539ba97_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField * {\n  box-sizing: border-box;\n}\n.textField .labelWrapper {\n  width: 100%;\n}\n.textField .subTextContainer {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField .subTextContainer .counter {\n  margin-inline-start: auto;\n}\n.textField.disabled .icon {\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper {\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper .input {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField.disabled .inputWrapper .input::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n  background-color: transparent;\n}\n.textField .inputWrapper {\n  width: 100%;\n  position: relative;\n}\n.textField .inputWrapper .input {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField .inputWrapper .input.readOnly {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField .inputWrapper .input.inputHover {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n  border-color: var(--primary-color);\n}\n.textField .inputWrapper .input::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textField .inputWrapper .input.inputHasIcon {\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);\n}\n.textField .inputWrapper .input.round {\n  border-radius: 50px;\n}\n.textField .inputWrapper .input.square {\n  border-radius: 0;\n}\n.textField .inputWrapper .input.onlyUnderline {\n  border-inline: none;\n  border-top: none;\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);\n  border-radius: 0 !important;\n}\n.textField .inputWrapper .tooltipContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n  width: 40px;\n}\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n  width: 46px;\n}\n.textField .inputWrapper .iconContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive {\n  opacity: 1;\n}\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField .inputWrapper .iconContainer .icon {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField .inputWrapper.inputErrorValidation:hover .input {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .input {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n  border-color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n  color: var(--negative-color);\n}\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .input {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n  border-color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n  color: var(--positive-color);\n}\n.textField .inputWrapper.wrapperSizeSmall {\n  height: 32px;\n}\n.textField .inputWrapper.wrapperSizeSmall .input {\n  padding-inline-start: var(--space-8);\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: var(--space-4);\n}\n.textField .inputWrapper.wrapperSizeMedium {\n  height: 40px;\n}\n.textField .inputWrapper.wrapperSizeMedium .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: 4px;\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper.wrapperSizeLarge {\n  height: 48px;\n}\n.textField .inputWrapper.wrapperSizeLarge .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: var(--space-4);\n}\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n  height: 40px;\n  width: 40px;\n}\n.textField .inputWrapper:hover .input {\n  border-color: var(--primary-text-color);\n}\n.textField .inputWrapper .loaderContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n  inset-inline-end: 32px;\n}\n.textField .inputWrapper .loaderContainer .loader {\n  width: 16px;\n  height: 16px;\n}\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n  color: var(--secondary-text-color);\n}\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{n as default};
 //# sourceMappingURL=TextField.module.scss.js.map

package/dist/mocked_classnames/src/components/TextField/TextFieldConstants.js

@@ -1,2 +1,2 @@
-import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{BASE_SIZES as r}from"../../constants/sizes.js";import t from"./TextField.module.scss.js";var i,a,o;!function(e){e.CHAR="Input char count",e.VALIDATION_TEXT="Additional helper text"}(i||(i={})),function(e){e.TEXT="text",e.PASSWORD="password",e.SEARCH="search",e.DATE="date",e.DATE_TIME="datetime-local",e.NUMBER="number",e.TEL="tel",e.URL="url",e.EMAIL="email"}(a||(a={})),function(e){e.ERROR="error",e.SUCCESS="success"}(o||(o={}));var s=e(e({},o.ERROR,t.inputErrorValidation),o.SUCCESS,t.inputSuccessValidation),l=e(e(e({},r.SMALL,t.wrapperSizeSmall),r.MEDIUM,t.wrapperSizeMedium),r.LARGE,t.wrapperSizeLarge);export{s as FEEDBACK_CLASSES,l as SIZE_MAPPER,i as TextFieldAriaLabel,o as TextFieldFeedbackState,a as TextFieldTextType};
+import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{BASE_SIZES as e}from"../../constants/sizes.js";import i from"./TextField.module.scss.js";var t;!function(r){r.CHAR="Input char count",r.VALIDATION_TEXT="Additional helper text"}(t||(t={}));var o={error:i.inputErrorValidation,success:i.inputSuccessValidation},a=r(r(r({},e.SMALL,i.wrapperSizeSmall),e.MEDIUM,i.wrapperSizeMedium),e.LARGE,i.wrapperSizeLarge);export{o as FEEDBACK_CLASSES,a as SIZE_MAPPER,t as TextFieldAriaLabel};
 //# sourceMappingURL=TextFieldConstants.js.map

package/dist/mocked_classnames/src/components/TextField/TextFieldConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldConstants.js","sources":["../../../../../src/components/TextField/TextFieldConstants.ts"],"sourcesContent":["import { BASE_SIZES } from \"../../constants\";\nimport styles from \"./TextField.module.scss\";\n\nexport enum TextFieldAriaLabel {\n  CHAR = \"Input char count\",\n  VALIDATION_TEXT = \"Additional helper text\"\n}\n\nconst OLD_TEXT_FIELD_SIZES = {\n  s: BASE_SIZES.SMALL,\n  md: BASE_SIZES.MEDIUM,\n  l: BASE_SIZES.LARGE\n};\n\nexport type TextFieldSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyof typeof OLD_TEXT_FIELD_SIZES;\n\n/**\n * @deprecated\n */\nexport enum TextFieldTextType {\n  TEXT = \"text\",\n  PASSWORD = \"password\",\n  SEARCH = \"search\",\n  DATE = \"date\",\n  DATE_TIME = \"datetime-local\",\n  NUMBER = \"number\",\n  TEL = \"tel\",\n  URL = \"url\",\n  EMAIL = \"email\"\n}\n\n/**\n * @deprecated\n */\nexport enum TextFieldFeedbackState {\n  ERROR = \"error\",\n  SUCCESS = \"success\"\n}\n\nexport const FEEDBACK_CLASSES = {\n  [TextFieldFeedbackState.ERROR]: styles.inputErrorValidation,\n  [TextFieldFeedbackState.SUCCESS]: styles.inputSuccessValidation\n};\n\nexport const SIZE_MAPPER = {\n  [BASE_SIZES.SMALL]: styles.wrapperSizeSmall,\n  [BASE_SIZES.MEDIUM]: styles.wrapperSizeMedium,\n  [BASE_SIZES.LARGE]: styles.wrapperSizeLarge\n};\n"],"names":["TextFieldAriaLabel","TextFieldTextType","TextFieldFeedbackState","FEEDBACK_CLASSES","_defineProperty","ERROR","styles","inputErrorValidation","SUCCESS","inputSuccessValidation","SIZE_MAPPER","BASE_SIZES","SMALL","wrapperSizeSmall","MEDIUM","wrapperSizeMedium","LARGE","wrapperSizeLarge"],"mappings":"oLAGYA,EAgBAC,EAeAC,GA/BZ,SAAYF,GACVA,EAAA,KAAA,mBACAA,EAAA,gBAAA,wBACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAaD,SAAYC,GACVA,EAAA,KAAA,OACAA,EAAA,SAAA,WACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,UAAA,iBACAA,EAAA,OAAA,SACAA,EAAA,IAAA,MACAA,EAAA,IAAA,MACAA,EAAA,MAAA,OACD,CAVD,CAAYA,IAAAA,EAUX,CAAA,IAKD,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAEM,IAAMC,EAAgBC,EAAAA,EAAA,CAAA,EAC1BF,EAAuBG,MAAQC,EAAOC,sBACtCL,EAAuBM,QAAUF,EAAOG,wBAG9BC,EAAWN,EAAAA,EAAAA,EAAA,CAAA,EACrBO,EAAWC,MAAQN,EAAOO,kBAC1BF,EAAWG,OAASR,EAAOS,mBAC3BJ,EAAWK,MAAQV,EAAOW"}
+{"version":3,"file":"TextFieldConstants.js","sources":["../../../../../src/components/TextField/TextFieldConstants.ts"],"sourcesContent":["import { BASE_SIZES } from \"../../constants\";\nimport styles from \"./TextField.module.scss\";\n\nexport enum TextFieldAriaLabel {\n  CHAR = \"Input char count\",\n  VALIDATION_TEXT = \"Additional helper text\"\n}\n\nconst OLD_TEXT_FIELD_SIZES = {\n  s: BASE_SIZES.SMALL,\n  md: BASE_SIZES.MEDIUM,\n  l: BASE_SIZES.LARGE\n};\n\nexport type TextFieldSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyof typeof OLD_TEXT_FIELD_SIZES;\n\nexport const FEEDBACK_CLASSES = {\n  error: styles.inputErrorValidation,\n  success: styles.inputSuccessValidation\n};\n\nexport const SIZE_MAPPER = {\n  [BASE_SIZES.SMALL]: styles.wrapperSizeSmall,\n  [BASE_SIZES.MEDIUM]: styles.wrapperSizeMedium,\n  [BASE_SIZES.LARGE]: styles.wrapperSizeLarge\n};\n"],"names":["TextFieldAriaLabel","FEEDBACK_CLASSES","error","styles","inputErrorValidation","success","inputSuccessValidation","SIZE_MAPPER","_defineProperty","BASE_SIZES","SMALL","wrapperSizeSmall","MEDIUM","wrapperSizeMedium","LARGE","wrapperSizeLarge"],"mappings":"oLAGYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,mBACAA,EAAA,gBAAA,wBACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAUM,IAAMC,EAAmB,CAC9BC,MAAOC,EAAOC,qBACdC,QAASF,EAAOG,wBAGLC,EAAWC,EAAAA,EAAAA,EAAA,CAAA,EACrBC,EAAWC,MAAQP,EAAOQ,kBAC1BF,EAAWG,OAAST,EAAOU,mBAC3BJ,EAAWK,MAAQX,EAAOY"}

package/dist/mocked_classnames/src/components/TextWithHighlight/TextWithHighlight.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 s,useRef as l,useMemo as a}from"react";import{Tooltip as n}from"@vibe/tooltip/mockedClassNames";import{useIsOverflowing as m}from"@vibe/hooks";import p from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import c from"../../hooks/useMergeRef.js";import f from"./TextWithHighlight.module.scss.js";var d=function(e,t,i){return i?r.createElement(arguments.length>3&&void 0!==arguments[3]?arguments[3]:"em",{className:o(f.highlightText,arguments.length>4?arguments[4]:void 0),key:t},e):r.createElement("span",{key:t},e)},h=s((function(s,h){var g=s.className,u=s.id,v=s.text,T=void 0===v?"":v,E=s.highlightTerm,j=s.limit,x=s.useEllipsis,H=void 0===x||x,k=s.linesToClamp,y=void 0===k?3:k,I=s.ignoreCase,N=void 0===I||I,P=s.allowTermSplit,b=void 0===P||P,w=s.nonEllipsisTooltip,C=s.tooltipPosition,W=s.wrappingTextTag,_=void 0===W?"em":W,G=s.wrappingElementClassName,L=s.tooltipProps,R=void 0===L?{}:L,$=s["data-testid"],B=l(null),M=c(h,B),O=a((function(){if(!T||!E||0===j)return T;var e=E.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");b&&(e=e.split(" ").join("|"));for(var t=RegExp("(".concat(e,")"),N?"i":""),i=T.split(t),o=[],r=0,s=0,l=0;i.length>l;l++)if(i[l]){var a=l%2==1;o.push(d(i[l],s++,a&&(!j||0>j||j>r),_,G)),a&&r++}return o}),[T,E,j,N,b,_,G]),S=m({ref:H&&B});p((function(){B.current&&B.current.style.setProperty("--heading-clamp-lines",""+y)}),[B,y,S]);var X=r.createElement("div",{ref:M,className:o(f.textWithHighlightWrapper,g,e({},f.withEllipsis,H)),id:u,"data-testid":$||t(i.TEXT_WITH_HIGHLIGHT,u)},O);return S||w?r.createElement(n,Object.assign({content:S?T:w,position:C},R),X):X}));export{h as default};
+import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as i}from"../../tests/testIds.js";import r from"classnames";import o,{forwardRef as s,useRef as l,useMemo as a}from"react";import{Tooltip as n}from"@vibe/tooltip/mockedClassNames";import{useIsOverflowing as m}from"@vibe/hooks";import p from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import c from"../../hooks/useMergeRef.js";import f from"./TextWithHighlight.module.scss.js";var d=function(e,t,i){return i?o.createElement(arguments.length>3&&void 0!==arguments[3]?arguments[3]:"em",{className:r(f.highlightText,arguments.length>4?arguments[4]:void 0),key:t},e):o.createElement("span",{key:t},e)},h=s((function(s,h){var g=s.className,u=s.id,v=s.text,T=void 0===v?"":v,E=s.highlightTerm,j=s.limit,x=s.useEllipsis,H=void 0===x||x,k=s.linesToClamp,y=void 0===k?3:k,I=s.ignoreCase,N=void 0===I||I,b=s.allowTermSplit,w=void 0===b||b,C=s.nonEllipsisTooltip,P=s.wrappingTextTag,W=void 0===P?"em":P,_=s.wrappingElementClassName,G=s.tooltipProps,L=void 0===G?{}:G,R=s["data-testid"],$=l(null),B=c(h,$),M=a((function(){if(!T||!E||0===j)return T;var e=E.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");w&&(e=e.split(" ").join("|"));for(var t=RegExp("(".concat(e,")"),N?"i":""),i=T.split(t),r=[],o=0,s=0,l=0;i.length>l;l++)if(i[l]){var a=l%2==1;r.push(d(i[l],s++,a&&(!j||0>j||j>o),W,_)),a&&o++}return r}),[T,E,j,N,w,W,_]),O=m({ref:H&&$});p((function(){$.current&&$.current.style.setProperty("--heading-clamp-lines",""+y)}),[$,y,O]);var S=o.createElement("div",{ref:B,className:r(f.textWithHighlightWrapper,g,e({},f.withEllipsis,H)),id:u,"data-testid":R||t(i.TEXT_WITH_HIGHLIGHT,u)},M);return O||C?o.createElement(n,Object.assign({content:O?T:C},L),S):S}));export{h as default};
 //# sourceMappingURL=TextWithHighlight.js.map