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

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          \"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":"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"}
+{"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, NOOP, getStyle } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\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":"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"}

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

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,useRef as a}from"react";import r from"classnames";import s from"../../../hooks/useMergeRef.js";import{getTestId as o,ComponentDefaultTestId as m}from"../../../tests/testIds.js";import i from"./TabPanel.module.scss.js";var l=t((function(t,l){var n=t.className,c=t.id,d=t.children,f=t.index,p=t["data-testid"],u=a(null),b=s(l,u);return e.createElement("div",{key:"".concat(c,"_").concat(f),ref:b,className:r(i.tabPanelWrapper,n),id:c,"data-testid":p||o(m.TAB_PANEL,c),role:"tabpanel"},d)}));export{l as default};
+import e,{forwardRef as a,useRef as t}from"react";import r from"classnames";import{useMergeRef as s}from"@vibe/shared";import{getTestId as o,ComponentDefaultTestId as m}from"../../../tests/testIds.js";import i from"./TabPanel.module.scss.js";var d=a((function(a,d){var l=a.className,n=a.id,c=a.children,p=a.index,f=a["data-testid"],u=t(null),b=s(d,u);return e.createElement("div",{key:"".concat(n,"_").concat(p),ref:b,className:r(i.tabPanelWrapper,l),id:n,"data-testid":f||o(m.TAB_PANEL,n),role:"tabpanel"},c)}));export{d as default};
 //# sourceMappingURL=TabPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./TabPanel.module.scss\";\n\nexport interface TabPanelProps extends VibeComponentProps {\n  /**\n   * The content inside the tab panel.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The index of the tab panel.\n   */\n  index?: number;\n}\n\nconst TabPanel: FC<TabPanelProps> = forwardRef(({ className, id, children, index, \"data-testid\": dataTestId }, ref) => {\n  const componentRef = useRef(null);\n  const mergedRef = useMergeRef(ref, componentRef);\n\n  return (\n    <div\n      key={`${id}_${index}`}\n      ref={mergedRef}\n      className={cx(styles.tabPanelWrapper, className)}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANEL, id)}\n      role=\"tabpanel\"\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","_ref","ref","className","id","children","index","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","key","concat","cx","styles","tabPanelWrapper","getTestId","ComponentDefaultTestId","TAB_PANEL","role"],"mappings":"oPAkBMA,IAAAA,EAA8BC,GAAW,SAAAC,EAAgEC,GAAO,IAApEC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAQJ,EAARI,SAAUC,EAAKL,EAALK,MAAsBC,EAAUN,EAAzB,eAC1EO,EAAeC,EAAO,MACtBC,EAAYC,EAAYT,EAAKM,GAEnC,OACEI,uBACEC,IAAG,GAAAC,OAAKV,OAAEU,OAAIR,GACdJ,IAAKQ,EACLP,UAAWY,EAAGC,EAAOC,gBAAiBd,GACtCC,GAAIA,EAAE,cACOG,GAAcW,EAAUC,EAAuBC,UAAWhB,GACvEiB,KAAK,YAEJhB,EAGP"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./TabPanel.module.scss\";\n\nexport interface TabPanelProps extends VibeComponentProps {\n  /**\n   * The content inside the tab panel.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The index of the tab panel.\n   */\n  index?: number;\n}\n\nconst TabPanel: FC<TabPanelProps> = forwardRef(({ className, id, children, index, \"data-testid\": dataTestId }, ref) => {\n  const componentRef = useRef(null);\n  const mergedRef = useMergeRef(ref, componentRef);\n\n  return (\n    <div\n      key={`${id}_${index}`}\n      ref={mergedRef}\n      className={cx(styles.tabPanelWrapper, className)}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANEL, id)}\n      role=\"tabpanel\"\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","_ref","ref","className","id","children","index","dataTestId","componentRef","useRef","mergedRef","useMergeRef","React","key","concat","cx","styles","tabPanelWrapper","getTestId","ComponentDefaultTestId","TAB_PANEL","role"],"mappings":"kPAkBMA,IAAAA,EAA8BC,GAAW,SAAAC,EAAgEC,GAAO,IAApEC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAQJ,EAARI,SAAUC,EAAKL,EAALK,MAAsBC,EAAUN,EAAzB,eAC1EO,EAAeC,EAAO,MACtBC,EAAYC,EAAYT,EAAKM,GAEnC,OACEI,uBACEC,IAAG,GAAAC,OAAKV,OAAEU,OAAIR,GACdJ,IAAKQ,EACLP,UAAWY,EAAGC,EAAOC,gBAAiBd,GACtCC,GAAIA,EAAE,cACOG,GAAcW,EAAUC,EAAuBC,UAAWhB,GACvEiB,KAAK,YAEJhB,EAGP"}

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

@@ -1,2 +1,2 @@
-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};
+import a from"classnames";import{camelCase as e}from"es-toolkit";import t,{forwardRef as r,useRef as i,useMemo as s}from"react";import{useMergeRef as n,getStyle as o}from"@vibe/shared";import{getTestId as l,ComponentDefaultTestId as c}from"../../../tests/testIds.js";import m from"./TabPanels.module.scss.js";var d=r((function(r,d){var p=r.className,f=r.id,u=r.activeTabId,v=void 0===u?0:u,b=r.animationDirection,j=void 0===b?"rtl":b,N=r.children,P=r["data-testid"],T=i(null),g=n(d,T),h=s((function(){return t.Children.map(N,(function(r,i){var s=v===i;if(!s)return null;var n=s?"active":"non-active",l=s?"animation-direction-".concat(j):"";return t.cloneElement(r,Object.assign(Object.assign({index:i},r.props),{className:a(m.tabPanel,[o(m,n)],[o(m,e(l))],r.props.className)}))})).filter(Boolean)}),[N,v,j]);return t.createElement("div",{ref:g,className:a(m.tabPanelsWrapper,p),id:f,"data-testid":P||l(c.TAB_PANELS,f)},h)}));Object.assign(d,{isTabPanels:!0});export{d 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 { 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"}
+{"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, getStyle } from \"@vibe/shared\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\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":"qTA0BMA,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/TabsContext/TabsContext.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as t,useRef as n,useState as a,useEffect as i,useCallback as o,useMemo as s}from"react";import l from"../../../hooks/useMergeRef.js";import c from"../../../hooks/usePrevious/index.js";import{getTestId as d,ComponentDefaultTestId as u}from"../../../tests/testIds.js";var f=t((function(t,f){var p=t.className,m=t.id,v=t.activeTabId,T=void 0===v?0:v,h=t.children,b=t["data-testid"],C=n(null),E=l(f,C),I=a(T),P=e(I,2),g=P[0],j=P[1],y=a(T),N=e(y,2),_=N[0],k=N[1],x=c(T);i((function(){T!==x&&T!==_&&(j(_),k(T))}),[T,_,x]);var A=o((function(e){j(_),k(e)}),[_]),B=s((function(){var e=[];return r.Children.forEach(h,(function(t){t.type.isTabPanels&&r.Children.forEach(t.props.children,(function(r,t){e[t]=r.props.id}))})),e}),[h]);return r.createElement("div",{ref:E,className:p,id:m,"data-testid":b||d(u.TABS_CONTEXT,m)},r.Children.map(h,(function(e){if(e.type.isTabList){var t=e.props.onTabChange;return r.cloneElement(e,{activeTabId:_,onTabChange:function(e){A(e),null==t||t(e)},tabPanelIds:B})}return e.type.isTabPanels?r.cloneElement(e,{activeTabId:_,animationDirection:_>g?"ltr":"rtl"}):e})))}));export{f as default};
+import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as t,useRef as a,useState as n,useEffect as i,useCallback as o,useMemo as s}from"react";import{useMergeRef as l}from"@vibe/shared";import c from"../../../hooks/usePrevious/index.js";import{getTestId as d,ComponentDefaultTestId as u}from"../../../tests/testIds.js";var f=t((function(t,f){var p=t.className,m=t.id,v=t.activeTabId,T=void 0===v?0:v,b=t.children,h=t["data-testid"],C=a(null),E=l(f,C),I=n(T),P=e(I,2),y=P[0],g=P[1],j=n(T),N=e(j,2),_=N[0],x=N[1],A=c(T);i((function(){T!==A&&T!==_&&(g(_),x(T))}),[T,_,A]);var B=o((function(e){g(_),x(e)}),[_]),k=s((function(){var e=[];return r.Children.forEach(b,(function(t){t.type.isTabPanels&&r.Children.forEach(t.props.children,(function(r,t){e[t]=r.props.id}))})),e}),[b]);return r.createElement("div",{ref:E,className:p,id:m,"data-testid":h||d(u.TABS_CONTEXT,m)},r.Children.map(b,(function(e){if(e.type.isTabList){var t=e.props.onTabChange;return r.cloneElement(e,{activeTabId:_,onTabChange:function(e){B(e),null==t||t(e)},tabPanelIds:k})}return e.type.isTabPanels?r.cloneElement(e,{activeTabId:_,animationDirection:_>y?"ltr":"rtl"}):e})))}));export{f as default};
 //# sourceMappingURL=TabsContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsContext.js","sources":["../../../../../../src/components/Tabs/TabsContext/TabsContext.tsx"],"sourcesContent":["import React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useMemo\n} from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface TabsContextProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The child elements representing the tab list and tab panels.\n   */\n  children?: ReactElement | ReactElement[];\n}\n\ntype TabsChild = ReactElement & {\n  type: Record<string, unknown>;\n};\n\nconst TabsContext: FC<TabsContextProps> = forwardRef(\n  ({ className, id, activeTabId = 0, children, \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [previousActiveTabIdState, setPreviousActiveTabIdState] = useState(activeTabId);\n    const [activeTabIdState, setActiveTabIdState] = useState(activeTabId);\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabIdState) {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(activeTabId);\n      }\n    }, [activeTabId, activeTabIdState, prevActiveTabIdProp]);\n\n    const onTabClick = useCallback(\n      (tabId: number) => {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(tabId);\n      },\n      [activeTabIdState]\n    );\n\n    // Collect TabPanel ids for aria-controls relationship\n    const tabPanelIds = useMemo(() => {\n      const ids: string[] = [];\n      React.Children.forEach(children, (child: TabsChild) => {\n        if (child.type.isTabPanels) {\n          React.Children.forEach(child.props.children, (panelChild: ReactElement, index: number) => {\n            ids[index] = panelChild.props.id;\n          });\n        }\n      });\n      return ids;\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)}\n      >\n        {React.Children.map(children, (child: TabsChild) => {\n          if (child.type.isTabList) {\n            const originalOnTabChange = child.props.onTabChange;\n            const onTabChange = (tabId: number) => {\n              onTabClick(tabId);\n              originalOnTabChange?.(tabId);\n            };\n            return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange, tabPanelIds });\n          }\n          if (child.type.isTabPanels) {\n            const animationDirection = previousActiveTabIdState < activeTabIdState ? \"ltr\" : \"rtl\";\n            return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });\n          }\n          return child;\n        })}\n      </div>\n    );\n  }\n);\n\nexport default TabsContext;\n"],"names":["TabsContext","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","previousActiveTabIdState","setPreviousActiveTabIdState","_useState3","_useState4","activeTabIdState","setActiveTabIdState","prevActiveTabIdProp","usePrevious","useEffect","onTabClick","useCallback","tabId","tabPanelIds","useMemo","ids","React","Children","forEach","child","type","isTabPanels","props","panelChild","index","createElement","getTestId","ComponentDefaultTestId","TABS_CONTEXT","map","isTabList","originalOnTabChange","onTabChange","cloneElement","animationDirection"],"mappings":"iXA8BMA,IAAAA,EAAoCC,GACxC,SAAAC,EAA0EC,GAAO,IAA9EC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAEE,EAAQN,EAARM,SAAyBC,EAAUP,EAAzB,eACrCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnCI,EAAgEC,EAASR,GAAYS,EAAAC,EAAAH,EAAA,GAA9EI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GAC5DI,EAAgDL,EAASR,GAAYc,EAAAJ,EAAAG,EAAA,GAA9DE,EAAgBD,EAAA,GAAEE,EAAmBF,EAAA,GACtCG,EAAsBC,EAAYlB,GAExCmB,GAAU,WAEJnB,IAAgBiB,GAAuBjB,IAAgBe,IACzDH,EAA4BG,GAC5BC,EAAoBhB,GAEvB,GAAE,CAACA,EAAae,EAAkBE,IAEnC,IAAMG,EAAaC,GACjB,SAACC,GACCV,EAA4BG,GAC5BC,EAAoBM,EACtB,GACA,CAACP,IAIGQ,EAAcC,GAAQ,WAC1B,IAAMC,EAAgB,GAQtB,OAPAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,GAC5BA,EAAMC,KAAKC,aACbL,EAAMC,SAASC,QAAQC,EAAMG,MAAM/B,UAAU,SAACgC,EAA0BC,GACtET,EAAIS,GAASD,EAAWD,MAAMlC,EAChC,GAEJ,IACO2B,CACT,GAAG,CAACxB,IAEJ,OACEyB,EACES,cAAA,MAAA,CAAAvC,IAAKS,EACLR,UAAWA,EACXC,GAAIA,EACS,cAAAI,GAAckC,EAAUC,EAAuBC,aAAcxC,IAEzE4B,EAAMC,SAASY,IAAItC,GAAU,SAAC4B,GAC7B,GAAIA,EAAMC,KAAKU,UAAW,CACxB,IAAMC,EAAsBZ,EAAMG,MAAMU,YAKxC,OAAOhB,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB2B,YAJ9C,SAACpB,GACnBF,EAAWE,GACXmB,SAAAA,EAAsBnB,IAEuDC,YAAAA,GACjF,CACA,OAAIM,EAAMC,KAAKC,YAENL,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB6B,mBADZ7B,EAA3BJ,EAA8C,MAAQ,QAG5EkB,CACR,IAGP"}
+{"version":3,"file":"TabsContext.js","sources":["../../../../../../src/components/Tabs/TabsContext/TabsContext.tsx"],"sourcesContent":["import React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useMemo\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface TabsContextProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The child elements representing the tab list and tab panels.\n   */\n  children?: ReactElement | ReactElement[];\n}\n\ntype TabsChild = ReactElement & {\n  type: Record<string, unknown>;\n};\n\nconst TabsContext: FC<TabsContextProps> = forwardRef(\n  ({ className, id, activeTabId = 0, children, \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [previousActiveTabIdState, setPreviousActiveTabIdState] = useState(activeTabId);\n    const [activeTabIdState, setActiveTabIdState] = useState(activeTabId);\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabIdState) {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(activeTabId);\n      }\n    }, [activeTabId, activeTabIdState, prevActiveTabIdProp]);\n\n    const onTabClick = useCallback(\n      (tabId: number) => {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(tabId);\n      },\n      [activeTabIdState]\n    );\n\n    // Collect TabPanel ids for aria-controls relationship\n    const tabPanelIds = useMemo(() => {\n      const ids: string[] = [];\n      React.Children.forEach(children, (child: TabsChild) => {\n        if (child.type.isTabPanels) {\n          React.Children.forEach(child.props.children, (panelChild: ReactElement, index: number) => {\n            ids[index] = panelChild.props.id;\n          });\n        }\n      });\n      return ids;\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)}\n      >\n        {React.Children.map(children, (child: TabsChild) => {\n          if (child.type.isTabList) {\n            const originalOnTabChange = child.props.onTabChange;\n            const onTabChange = (tabId: number) => {\n              onTabClick(tabId);\n              originalOnTabChange?.(tabId);\n            };\n            return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange, tabPanelIds });\n          }\n          if (child.type.isTabPanels) {\n            const animationDirection = previousActiveTabIdState < activeTabIdState ? \"ltr\" : \"rtl\";\n            return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });\n          }\n          return child;\n        })}\n      </div>\n    );\n  }\n);\n\nexport default TabsContext;\n"],"names":["TabsContext","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","previousActiveTabIdState","setPreviousActiveTabIdState","_useState3","_useState4","activeTabIdState","setActiveTabIdState","prevActiveTabIdProp","usePrevious","useEffect","onTabClick","useCallback","tabId","tabPanelIds","useMemo","ids","React","Children","forEach","child","type","isTabPanels","props","panelChild","index","createElement","getTestId","ComponentDefaultTestId","TABS_CONTEXT","map","isTabList","originalOnTabChange","onTabChange","cloneElement","animationDirection"],"mappings":"+WA8BMA,IAAAA,EAAoCC,GACxC,SAAAC,EAA0EC,GAAO,IAA9EC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAEE,EAAQN,EAARM,SAAyBC,EAAUP,EAAzB,eACrCQ,EAAeC,EAAO,MACtBC,EAAYC,EAAYV,EAAKO,GAEnCI,EAAgEC,EAASR,GAAYS,EAAAC,EAAAH,EAAA,GAA9EI,EAAwBF,EAAA,GAAEG,EAA2BH,EAAA,GAC5DI,EAAgDL,EAASR,GAAYc,EAAAJ,EAAAG,EAAA,GAA9DE,EAAgBD,EAAA,GAAEE,EAAmBF,EAAA,GACtCG,EAAsBC,EAAYlB,GAExCmB,GAAU,WAEJnB,IAAgBiB,GAAuBjB,IAAgBe,IACzDH,EAA4BG,GAC5BC,EAAoBhB,GAEvB,GAAE,CAACA,EAAae,EAAkBE,IAEnC,IAAMG,EAAaC,GACjB,SAACC,GACCV,EAA4BG,GAC5BC,EAAoBM,EACtB,GACA,CAACP,IAIGQ,EAAcC,GAAQ,WAC1B,IAAMC,EAAgB,GAQtB,OAPAC,EAAMC,SAASC,QAAQ3B,GAAU,SAAC4B,GAC5BA,EAAMC,KAAKC,aACbL,EAAMC,SAASC,QAAQC,EAAMG,MAAM/B,UAAU,SAACgC,EAA0BC,GACtET,EAAIS,GAASD,EAAWD,MAAMlC,EAChC,GAEJ,IACO2B,CACT,GAAG,CAACxB,IAEJ,OACEyB,EACES,cAAA,MAAA,CAAAvC,IAAKS,EACLR,UAAWA,EACXC,GAAIA,EACS,cAAAI,GAAckC,EAAUC,EAAuBC,aAAcxC,IAEzE4B,EAAMC,SAASY,IAAItC,GAAU,SAAC4B,GAC7B,GAAIA,EAAMC,KAAKU,UAAW,CACxB,IAAMC,EAAsBZ,EAAMG,MAAMU,YAKxC,OAAOhB,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB2B,YAJ9C,SAACpB,GACnBF,EAAWE,GACXmB,SAAAA,EAAsBnB,IAEuDC,YAAAA,GACjF,CACA,OAAIM,EAAMC,KAAKC,YAENL,EAAMiB,aAAad,EAAO,CAAE7B,YAAae,EAAkB6B,mBADZ7B,EAA3BJ,EAA8C,MAAQ,QAG5EkB,CACR,IAGP"}

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 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};
+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{useMergeRef as x,NOOP as E}from"@vibe/shared";import{Clickable as y}from"@vibe/clickable/mockedClassNames";import{getTestId as N}from"../../tests/testIds.js";import{ComponentDefaultTestId as h,ComponentVibeId as g}from"../../tests/constants.js";import T from"./TextField.module.scss.js";import{Tooltip as I}from"@vibe/tooltip/mockedClassNames";import F from"../HiddenText/HiddenText.js";var k=n((function(n,k){var L=n.className,D=void 0===L?"":L,H=n.placeholder,j=void 0===H?"":H,w=n.autoComplete,A=void 0===w?"off":w,_=n.value,q=n.onChange,W=void 0===q?E:q,B=n.onBlur,O=void 0===B?E:B,R=n.onFocus,S=void 0===R?E:R,z=n.onKeyDown,K=void 0===z?E:z,V=n.onWheel,X=void 0===V?E:V,M=n.debounceRate,P=void 0===M?0:M,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===$?E:$,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?E: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,he=void 0===Ne?"":Ne,ge=n.activeDescendant,Te=void 0===ge?"":ge,Ie=n.iconLabel,Fe=n.secondaryIconLabel,ke=n.type,Le=void 0===ke?"text":ke,De=n.maxLength,He=void 0===De?null:De,je=n.allowExceedingMaxLength,we=void 0!==je&&je,Ae=n.trim,_e=void 0!==Ae&&Ae,qe=n.role,We=void 0===qe?"":qe,Be=n.required,Oe=void 0!==Be&&Be,Re=n.requiredErrorText,Se=void 0===Re?"":Re,ze=n.loading,Ke=void 0!==ze&&ze,Ve=n["data-testid"],Xe=n.secondaryDataTestId,Me=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(k,na,ee),ia=l((function(e){Oe&&!e.target.value&&oa(!0),O(e)}),[O,Oe]),la=l((function(e,a){ta&&e&&oa(!1),W(e,a||{target:na.current})}),[W,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 He&&ua&&ua.length>He?f.error:de&&de.status||ta?f[ta?"error":de.status]:""}),[He,de,ta,ua]),Ca=ae||te,xa=Ee||de&&de.text||ta&&Se,Ea=te===pa,ya=ae===pa,Na=(pe!==E||Ie||Qe)&&ua&&ae.length&&ya,ha=(te||Ze)&&Ea&&!!ua,ga=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!==E||be,Ia=Ie||Qe,Fa=Fe||Ze;return o.createElement("div",{className:t(T.textField,ue,a(a({},T.disabled,J),T.onlyUnderline,Ue)),role:We,"aria-busy":Ke},o.createElement("div",{className:t(T.labelWrapper)},o.createElement(p,{labelText:ie,icon:Ce,labelFor:ne,required:Oe}),o.createElement("div",{className:t(T.inputWrapper,b[ce],ba)},o.createElement("input",{className:t(D,T.input,a(a({},T.inputHasIcon,!!Ca),T.readOnly,Z)),placeholder:j,autoComplete:A,value:ua,onChange:va,disabled:J,readOnly:Z,ref:ra,type:Le,id:ne,"data-testid":Ve||N(h.TEXT_FIELD,ne),"data-vibe":g.TEXT_FIELD,name:Ye,onBlur:ia,onFocus:S,onKeyDown:K,onWheel:X,maxLength:"number"!=typeof He||we?void 0:He,role:he&&"combobox","aria-label":ye||j,"aria-invalid":de&&"error"===de.status||ta,"aria-owns":he,"aria-activedescendant":Te,"aria-required":Oe,"aria-describedby":ga,required:Oe,tabIndex:Me,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(y,{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(y,{className:t(T.iconContainer,a(a(a({},T.iconContainerHasIcon,Ca),T.iconContainerActive,Ea),T.iconContainerClickable,Ta)),onClick:fa,tabIndex:ha?0:-1,"data-testid":Xe||N(h.TEXT_FIELD_SECONDARY_BUTTON,ne),"aria-label":Fa},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 He&&"/".concat(He),o.createElement(F,{id:ga,text:"Maximum of ".concat(He," characters")})))))}));export{k 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, { 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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"}
+{"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, NOOP } from \"@vibe/shared\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\n\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/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 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};
+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{useMergeRef as p,useIsomorphicLayoutEffect as c}from"@vibe/shared";import d from"./TextWithHighlight.module.scss.js";var g=function(e,t,i){return i?o.createElement(arguments.length>3&&void 0!==arguments[3]?arguments[3]:"em",{className:r(d.highlightText,arguments.length>4?arguments[4]:void 0),key:t},e):o.createElement("span",{key:t},e)},h=s((function(s,h){var v=s.className,f=s.id,u=s.text,T=void 0===u?"":u,E=s.highlightTerm,x=s.limit,H=s.useEllipsis,b=void 0===H||H,j=s.linesToClamp,y=void 0===j?3:j,N=s.ignoreCase,k=void 0===N||N,w=s.allowTermSplit,C=void 0===w||w,I=s.nonEllipsisTooltip,P=s.wrappingTextTag,W=void 0===P?"em":P,_=s.wrappingElementClassName,G=s.tooltipProps,$=void 0===G?{}:G,B=s["data-testid"],L=l(null),O=p(h,L),R=a((function(){if(!T||!E||0===x)return T;var e=E.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");C&&(e=e.split(" ").join("|"));for(var t=RegExp("(".concat(e,")"),k?"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(g(i[l],s++,a&&(!x||0>x||x>o),W,_)),a&&o++}return r}),[T,E,x,k,C,W,_]),S=m({ref:b&&L});c((function(){L.current&&L.current.style.setProperty("--heading-clamp-lines",""+y)}),[L,y,S]);var X=o.createElement("div",{ref:O,className:r(d.textWithHighlightWrapper,v,e({},d.withEllipsis,b)),id:f,"data-testid":B||t(i.TEXT_WITH_HIGHLIGHT,f)},R);return S||I?o.createElement(n,Object.assign({content:S?T:I},$),X):X}));export{h as default};
 //# sourceMappingURL=TextWithHighlight.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextWithHighlight.js","sources":["../../../../../src/components/TextWithHighlight/TextWithHighlight.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./TextWithHighlight.module.scss\";\n\nconst getTextPart = (\n  text: string,\n  key: number,\n  shouldHighlight: boolean,\n  wrappingTextTag: keyof JSX.IntrinsicElements = \"em\",\n  wrappingElementClassName: string\n) => {\n  const WrappingElement = wrappingTextTag;\n  if (shouldHighlight) {\n    return (\n      <WrappingElement className={cx(styles.highlightText, wrappingElementClassName)} key={key}>\n        {text}\n      </WrappingElement>\n    );\n  }\n  return <span key={key}>{text}</span>;\n};\n\nexport interface TextWithHighlightProps extends VibeComponentProps {\n  /**\n   * The text content to display.\n   */\n  text?: string;\n  /**\n   * The term to highlight within the text.\n   */\n  highlightTerm?: string;\n  /**\n   * The maximum number of highlighted terms allowed.\n   */\n  limit?: number;\n  /**\n   * If true, the highlight search is case-insensitive.\n   */\n  ignoreCase?: boolean;\n  /**\n   * If true, truncates overflowing text with an ellipsis.\n   */\n  useEllipsis?: boolean;\n  /**\n   * If true, allows splitting the highlight term into separate words.\n   */\n  allowTermSplit?: boolean;\n  /**\n   * The number of lines to display before truncating with an ellipsis.\n   */\n  linesToClamp?: number;\n  /**\n   * Tooltip content displayed when there is no overflow.\n   */\n  nonEllipsisTooltip?: string;\n  /**\n   * The HTML tag used to wrap highlighted text.\n   */\n  wrappingTextTag?: keyof JSX.IntrinsicElements;\n  /**\n   * Class name applied to the wrapping element of highlighted text.\n   */\n  wrappingElementClassName?: string;\n  /**\n   * Additional props to customize the tooltip component.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      text = \"\",\n      highlightTerm,\n      limit,\n      useEllipsis = true,\n      linesToClamp = 3,\n      ignoreCase = true,\n      allowTermSplit = true,\n      nonEllipsisTooltip,\n      wrappingTextTag = \"em\",\n      wrappingElementClassName,\n      tooltipProps = {},\n      \"data-testid\": dataTestId\n    }: TextWithHighlightProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const textWithHighlights = useMemo(() => {\n      if (!text || !highlightTerm || limit === 0) return text;\n      let finalTerm = escapeRegExp(highlightTerm);\n      if (allowTermSplit) {\n        finalTerm = finalTerm.split(\" \").join(\"|\");\n      }\n      const regex = new RegExp(`(${finalTerm})`, ignoreCase ? \"i\" : \"\");\n      const tokens = text.split(regex);\n      const parts = [];\n      // Tokens include the term search (in odd indices)\n      let highlightTermsCount = 0;\n      let key = 0;\n      for (let i = 0; i < tokens.length; i++) {\n        // skip empty tokens\n        if (tokens[i]) {\n          // adding highlight part\n          const isTermPart = i % 2 === 1;\n          const shouldHighlight = isTermPart && (!limit || limit < 0 || highlightTermsCount < limit);\n          parts.push(getTextPart(tokens[i], key++, shouldHighlight, wrappingTextTag, wrappingElementClassName));\n          if (isTermPart) highlightTermsCount++;\n        }\n      }\n\n      return parts;\n    }, [text, highlightTerm, limit, ignoreCase, allowTermSplit, wrappingTextTag, wrappingElementClassName]);\n\n    const isOverflowing = useIsOverflowing({ ref: useEllipsis && componentRef });\n\n    useIsomorphicLayoutEffect(() => {\n      if (componentRef.current) {\n        componentRef.current.style.setProperty(\"--heading-clamp-lines\", linesToClamp.toString());\n      }\n    }, [componentRef, linesToClamp, isOverflowing]);\n\n    const Element = (\n      <div\n        ref={mergedRef}\n        className={cx(styles.textWithHighlightWrapper, className, {\n          [styles.withEllipsis]: useEllipsis\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_WITH_HIGHLIGHT, id)}\n      >\n        {textWithHighlights}\n      </div>\n    );\n\n    if (isOverflowing || nonEllipsisTooltip) {\n      const tooltipContent = isOverflowing ? text : nonEllipsisTooltip;\n      return (\n        <Tooltip content={tooltipContent} {...tooltipProps}>\n          {Element}\n        </Tooltip>\n      );\n    }\n    return Element;\n  }\n);\n\nexport default TextWithHighlight;\n\nfunction escapeRegExp(string: string) {\n  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n"],"names":["getTextPart","text","key","shouldHighlight","React","arguments","length","undefined","className","cx","styles","highlightText","TextWithHighlight","forwardRef","_ref","ref","id","_ref$text","highlightTerm","limit","_ref$useEllipsis","useEllipsis","_ref$linesToClamp","linesToClamp","_ref$ignoreCase","ignoreCase","_ref$allowTermSplit","allowTermSplit","nonEllipsisTooltip","_ref$wrappingTextTag","wrappingTextTag","wrappingElementClassName","_ref$tooltipProps","tooltipProps","dataTestId","componentRef","useRef","mergedRef","useMergeRef","textWithHighlights","useMemo","finalTerm","replace","split","join","regex","RegExp","concat","tokens","parts","highlightTermsCount","i","isTermPart","push","isOverflowing","useIsOverflowing","useIsomorphicLayoutEffect","current","style","setProperty","Element","createElement","textWithHighlightWrapper","_defineProperty","withEllipsis","getTestId","ComponentDefaultTestId","TEXT_WITH_HIGHLIGHT","Tooltip","Object","assign","content"],"mappings":"wfAUA,IAAMA,EAAc,SAClBC,EACAC,EACAC,GAKA,OAAIA,EAEAC,gBAN2CC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAA,KAM3B,CAACG,UAAWC,EAAGC,EAAOC,cALVN,UAAAC,OAAAD,EAAAA,kBAAAE,GAKoDL,IAAKA,GAClFD,GAIAG,wBAAMF,IAAKA,GAAMD,EAC1B,EAiDMW,EAAsDC,GAC1D,SAAAC,EAiBEC,GACE,IAhBAP,EAASM,EAATN,UACAQ,EAAEF,EAAFE,GAAEC,EAAAH,EACFb,KAAAA,OAAO,IAAHgB,EAAG,GAAEA,EACTC,EAAaJ,EAAbI,cACAC,EAAKL,EAALK,MAAKC,EAAAN,EACLO,YAAAA,OAAc,IAAHD,GAAOA,EAAAE,EAAAR,EAClBS,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAAV,EAChBW,WAAAA,OAAa,IAAHD,GAAOA,EAAAE,EAAAZ,EACjBa,eAAAA,OAAiB,IAAHD,GAAOA,EACrBE,EAAkBd,EAAlBc,mBAAkBC,EAAAf,EAClBgB,gBAAAA,OAAkB,IAAHD,EAAG,KAAIA,EACtBE,EAAwBjB,EAAxBiB,yBAAwBC,EAAAlB,EACxBmB,aAAAA,OAAY,IAAAD,EAAG,CAAE,EAAAA,EACFE,EAAUpB,EAAzB,eAIIqB,EAAeC,EAAO,MACtBC,EAAYC,EAAYvB,EAAKoB,GAE7BI,EAAqBC,GAAQ,WACjC,IAAKvC,IAASiB,GAA2B,IAAVC,EAAa,OAAOlB,EACnD,IAAIwC,EAAyBvB,EA4DnBwB,QAAQ,sBAAuB,QA3DrCf,IACFc,EAAYA,EAAUE,MAAM,KAAKC,KAAK,MAQxC,IANA,IAAMC,EAAYC,WAAMC,OAAKN,EAAS,KAAKhB,EAAa,IAAM,IACxDuB,EAAS/C,EAAK0C,MAAME,GACpBI,EAAQ,GAEVC,EAAsB,EACtBhD,EAAM,EACDiD,EAAI,EAAOH,EAAO1C,OAAX6C,EAAmBA,IAEjC,GAAIH,EAAOG,GAAI,CAEb,IAAMC,EAAaD,EAAI,GAAM,EAE7BF,EAAMI,KAAKrD,EAAYgD,EAAOG,GAAIjD,IADVkD,KAAgBjC,GAAiB,EAARA,GAAmCA,EAAtB+B,GACJpB,EAAiBC,IACvEqB,GAAYF,GAClB,CAGF,OAAOD,CACT,GAAG,CAAChD,EAAMiB,EAAeC,EAAOM,EAAYE,EAAgBG,EAAiBC,IAEvEuB,EAAgBC,EAAiB,CAAExC,IAAKM,GAAec,IAE7DqB,GAA0B,WACpBrB,EAAasB,SACftB,EAAasB,QAAQC,MAAMC,YAAY,wBAAyBpC,KAEnE,GAAE,CAACY,EAAcZ,EAAc+B,IAEhC,IAAMM,EACJxD,EACEyD,cAAA,MAAA,CAAA9C,IAAKsB,EACL7B,UAAWC,EAAGC,EAAOoD,yBAA0BtD,EAASuD,KACrDrD,EAAOsD,aAAe3C,IAEzBL,GAAIA,EACS,cAAAkB,GAAc+B,EAAUC,EAAuBC,oBAAqBnD,IAEhFuB,GAIL,OAAIe,GAAiB1B,EAGjBxB,EAAAyD,cAACO,EAAOC,OAAAC,OAAA,CAACC,QAFYjB,EAAgBrD,EAAO2B,GAENK,GACnC2B,GAIAA,CACT"}
+{"version":3,"file":"TextWithHighlight.js","sources":["../../../../../src/components/TextWithHighlight/TextWithHighlight.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { useIsomorphicLayoutEffect, useMergeRef } from \"@vibe/shared\";\n\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./TextWithHighlight.module.scss\";\n\nconst getTextPart = (\n  text: string,\n  key: number,\n  shouldHighlight: boolean,\n  wrappingTextTag: keyof JSX.IntrinsicElements = \"em\",\n  wrappingElementClassName: string\n) => {\n  const WrappingElement = wrappingTextTag;\n  if (shouldHighlight) {\n    return (\n      <WrappingElement className={cx(styles.highlightText, wrappingElementClassName)} key={key}>\n        {text}\n      </WrappingElement>\n    );\n  }\n  return <span key={key}>{text}</span>;\n};\n\nexport interface TextWithHighlightProps extends VibeComponentProps {\n  /**\n   * The text content to display.\n   */\n  text?: string;\n  /**\n   * The term to highlight within the text.\n   */\n  highlightTerm?: string;\n  /**\n   * The maximum number of highlighted terms allowed.\n   */\n  limit?: number;\n  /**\n   * If true, the highlight search is case-insensitive.\n   */\n  ignoreCase?: boolean;\n  /**\n   * If true, truncates overflowing text with an ellipsis.\n   */\n  useEllipsis?: boolean;\n  /**\n   * If true, allows splitting the highlight term into separate words.\n   */\n  allowTermSplit?: boolean;\n  /**\n   * The number of lines to display before truncating with an ellipsis.\n   */\n  linesToClamp?: number;\n  /**\n   * Tooltip content displayed when there is no overflow.\n   */\n  nonEllipsisTooltip?: string;\n  /**\n   * The HTML tag used to wrap highlighted text.\n   */\n  wrappingTextTag?: keyof JSX.IntrinsicElements;\n  /**\n   * Class name applied to the wrapping element of highlighted text.\n   */\n  wrappingElementClassName?: string;\n  /**\n   * Additional props to customize the tooltip component.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      text = \"\",\n      highlightTerm,\n      limit,\n      useEllipsis = true,\n      linesToClamp = 3,\n      ignoreCase = true,\n      allowTermSplit = true,\n      nonEllipsisTooltip,\n      wrappingTextTag = \"em\",\n      wrappingElementClassName,\n      tooltipProps = {},\n      \"data-testid\": dataTestId\n    }: TextWithHighlightProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const textWithHighlights = useMemo(() => {\n      if (!text || !highlightTerm || limit === 0) return text;\n      let finalTerm = escapeRegExp(highlightTerm);\n      if (allowTermSplit) {\n        finalTerm = finalTerm.split(\" \").join(\"|\");\n      }\n      const regex = new RegExp(`(${finalTerm})`, ignoreCase ? \"i\" : \"\");\n      const tokens = text.split(regex);\n      const parts = [];\n      // Tokens include the term search (in odd indices)\n      let highlightTermsCount = 0;\n      let key = 0;\n      for (let i = 0; i < tokens.length; i++) {\n        // skip empty tokens\n        if (tokens[i]) {\n          // adding highlight part\n          const isTermPart = i % 2 === 1;\n          const shouldHighlight = isTermPart && (!limit || limit < 0 || highlightTermsCount < limit);\n          parts.push(getTextPart(tokens[i], key++, shouldHighlight, wrappingTextTag, wrappingElementClassName));\n          if (isTermPart) highlightTermsCount++;\n        }\n      }\n\n      return parts;\n    }, [text, highlightTerm, limit, ignoreCase, allowTermSplit, wrappingTextTag, wrappingElementClassName]);\n\n    const isOverflowing = useIsOverflowing({ ref: useEllipsis && componentRef });\n\n    useIsomorphicLayoutEffect(() => {\n      if (componentRef.current) {\n        componentRef.current.style.setProperty(\"--heading-clamp-lines\", linesToClamp.toString());\n      }\n    }, [componentRef, linesToClamp, isOverflowing]);\n\n    const Element = (\n      <div\n        ref={mergedRef}\n        className={cx(styles.textWithHighlightWrapper, className, {\n          [styles.withEllipsis]: useEllipsis\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_WITH_HIGHLIGHT, id)}\n      >\n        {textWithHighlights}\n      </div>\n    );\n\n    if (isOverflowing || nonEllipsisTooltip) {\n      const tooltipContent = isOverflowing ? text : nonEllipsisTooltip;\n      return (\n        <Tooltip content={tooltipContent} {...tooltipProps}>\n          {Element}\n        </Tooltip>\n      );\n    }\n    return Element;\n  }\n);\n\nexport default TextWithHighlight;\n\nfunction escapeRegExp(string: string) {\n  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n"],"names":["getTextPart","text","key","shouldHighlight","React","arguments","length","undefined","className","cx","styles","highlightText","TextWithHighlight","forwardRef","_ref","ref","id","_ref$text","highlightTerm","limit","_ref$useEllipsis","useEllipsis","_ref$linesToClamp","linesToClamp","_ref$ignoreCase","ignoreCase","_ref$allowTermSplit","allowTermSplit","nonEllipsisTooltip","_ref$wrappingTextTag","wrappingTextTag","wrappingElementClassName","_ref$tooltipProps","tooltipProps","dataTestId","componentRef","useRef","mergedRef","useMergeRef","textWithHighlights","useMemo","finalTerm","replace","split","join","regex","RegExp","concat","tokens","parts","highlightTermsCount","i","isTermPart","push","isOverflowing","useIsOverflowing","useIsomorphicLayoutEffect","current","style","setProperty","Element","createElement","textWithHighlightWrapper","_defineProperty","withEllipsis","getTestId","ComponentDefaultTestId","TEXT_WITH_HIGHLIGHT","Tooltip","Object","assign","content"],"mappings":"4dAUA,IAAMA,EAAc,SAClBC,EACAC,EACAC,GAKA,OAAIA,EAEAC,gBAN2CC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAA,KAM3B,CAACG,UAAWC,EAAGC,EAAOC,cALVN,UAAAC,OAAAD,EAAAA,kBAAAE,GAKoDL,IAAKA,GAClFD,GAIAG,wBAAMF,IAAKA,GAAMD,EAC1B,EAiDMW,EAAsDC,GAC1D,SAAAC,EAiBEC,GACE,IAhBAP,EAASM,EAATN,UACAQ,EAAEF,EAAFE,GAAEC,EAAAH,EACFb,KAAAA,OAAO,IAAHgB,EAAG,GAAEA,EACTC,EAAaJ,EAAbI,cACAC,EAAKL,EAALK,MAAKC,EAAAN,EACLO,YAAAA,OAAc,IAAHD,GAAOA,EAAAE,EAAAR,EAClBS,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAAV,EAChBW,WAAAA,OAAa,IAAHD,GAAOA,EAAAE,EAAAZ,EACjBa,eAAAA,OAAiB,IAAHD,GAAOA,EACrBE,EAAkBd,EAAlBc,mBAAkBC,EAAAf,EAClBgB,gBAAAA,OAAkB,IAAHD,EAAG,KAAIA,EACtBE,EAAwBjB,EAAxBiB,yBAAwBC,EAAAlB,EACxBmB,aAAAA,OAAY,IAAAD,EAAG,CAAE,EAAAA,EACFE,EAAUpB,EAAzB,eAIIqB,EAAeC,EAAO,MACtBC,EAAYC,EAAYvB,EAAKoB,GAE7BI,EAAqBC,GAAQ,WACjC,IAAKvC,IAASiB,GAA2B,IAAVC,EAAa,OAAOlB,EACnD,IAAIwC,EAAyBvB,EA4DnBwB,QAAQ,sBAAuB,QA3DrCf,IACFc,EAAYA,EAAUE,MAAM,KAAKC,KAAK,MAQxC,IANA,IAAMC,EAAYC,WAAMC,OAAKN,EAAS,KAAKhB,EAAa,IAAM,IACxDuB,EAAS/C,EAAK0C,MAAME,GACpBI,EAAQ,GAEVC,EAAsB,EACtBhD,EAAM,EACDiD,EAAI,EAAOH,EAAO1C,OAAX6C,EAAmBA,IAEjC,GAAIH,EAAOG,GAAI,CAEb,IAAMC,EAAaD,EAAI,GAAM,EAE7BF,EAAMI,KAAKrD,EAAYgD,EAAOG,GAAIjD,IADVkD,KAAgBjC,GAAiB,EAARA,GAAmCA,EAAtB+B,GACJpB,EAAiBC,IACvEqB,GAAYF,GAClB,CAGF,OAAOD,CACT,GAAG,CAAChD,EAAMiB,EAAeC,EAAOM,EAAYE,EAAgBG,EAAiBC,IAEvEuB,EAAgBC,EAAiB,CAAExC,IAAKM,GAAec,IAE7DqB,GAA0B,WACpBrB,EAAasB,SACftB,EAAasB,QAAQC,MAAMC,YAAY,wBAAyBpC,KAEnE,GAAE,CAACY,EAAcZ,EAAc+B,IAEhC,IAAMM,EACJxD,EACEyD,cAAA,MAAA,CAAA9C,IAAKsB,EACL7B,UAAWC,EAAGC,EAAOoD,yBAA0BtD,EAASuD,KACrDrD,EAAOsD,aAAe3C,IAEzBL,GAAIA,EACS,cAAAkB,GAAc+B,EAAUC,EAAuBC,oBAAqBnD,IAEhFuB,GAIL,OAAIe,GAAiB1B,EAGjBxB,EAAAyD,cAACO,EAAOC,OAAAC,OAAA,CAACC,QAFYjB,EAAgBrD,EAAO2B,GAENK,GACnC2B,GAIAA,CACT"}

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r from"classnames";import t,{useState as n,useMemo as o,useEffect as i}from"react";import{generateRandomAlphaString as m,isAnySystemThemeClassNameOnBody as a,addSystemThemeClassNameToBody as s,removeSystemThemeClassNameFromBody as c,shouldGenerateTheme as l,generateThemeCssOverride as d}from"./ThemeProviderUtils.js";import u from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var f=function(f){var h=f.themeConfig,p=f.children,v=f.themeClassSpecifier,y=f.systemTheme,g=f.className,C=n(!1),T=e(C,2),E=T[0],j=T[1],x=o((function(){return v||m()}),[v]);return u((function(){if(y&&!a())return s(y),function(){c(y)}}),[y]),i((function(){if(l(h)){if(!document.getElementById(h.name)){var e=document.createElement("style");e.type="text/css",e.id=h.name;var r=d(h,x);try{e.appendChild(document.createTextNode(r)),document.head.appendChild(e),j(!0)}catch(e){console.error("vibe ThemeProvider: error inserting theme-generated css - ",e)}return function(){document.head.removeChild(e)}}j(!0)}}),[x,h]),!E&&l(h)?null:t.createElement("div",{className:r(null==h?void 0:h.name,x,g)},p)};export{f as default};
+import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r from"classnames";import t,{useState as n,useMemo as i,useEffect as o}from"react";import{generateRandomAlphaString as m,isAnySystemThemeClassNameOnBody as a,addSystemThemeClassNameToBody as c,removeSystemThemeClassNameFromBody as l,shouldGenerateTheme as s,generateThemeCssOverride as d}from"./ThemeProviderUtils.js";import{useIsomorphicLayoutEffect as u}from"@vibe/shared";var f=function(f){var h=f.themeConfig,p=f.children,v=f.themeClassSpecifier,y=f.systemTheme,g=f.className,C=n(!1),T=e(C,2),b=T[0],x=T[1],E=i((function(){return v||m()}),[v]);return u((function(){if(y&&!a())return c(y),function(){l(y)}}),[y]),o((function(){if(s(h)){if(!document.getElementById(h.name)){var e=document.createElement("style");e.type="text/css",e.id=h.name;var r=d(h,E);try{e.appendChild(document.createTextNode(r)),document.head.appendChild(e),x(!0)}catch(e){console.error("vibe ThemeProvider: error inserting theme-generated css - ",e)}return function(){document.head.removeChild(e)}}x(!0)}}),[E,h]),!b&&s(h)?null:t.createElement("div",{className:r(null==h?void 0:h.name,E,g)},p)};export{f as default};
 //# sourceMappingURL=ThemeProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type ReactElement, useEffect, useMemo, useState } from \"react\";\nimport { type Theme } from \"./ThemeProviderConstants\";\nimport { type SystemTheme } from \"./ThemeProvider.types\";\nimport {\n  addSystemThemeClassNameToBody,\n  generateRandomAlphaString,\n  generateThemeCssOverride,\n  isAnySystemThemeClassNameOnBody,\n  removeSystemThemeClassNameFromBody,\n  shouldGenerateTheme\n} from \"./ThemeProviderUtils\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\nexport interface ThemeProviderProps {\n  /**\n   * The theme configuration to apply. It consists of a `name` (a unique CSS class name added to the children)\n   * and an object of color overrides for each system theme.\n   */\n  themeConfig?: Theme;\n  /**\n   * The children to be rendered with the applied theme.\n   */\n  children: ReactElement;\n  /**\n   * A string added to the theme name selector to make it more specific, in case `themeConfig.name`\n   * collides with another class name.\n   */\n  themeClassSpecifier?: string;\n  /**\n   * The system theme to apply to the `body` element on mount,\n   * if there is no system theme class name on the body already.\n   */\n  systemTheme?: SystemTheme;\n  /**\n   * Class name applied to the wrapping `div`.\n   */\n  className?: string;\n}\n\nconst ThemeProvider = ({\n  themeConfig,\n  children,\n  themeClassSpecifier: customThemeClassSpecifier,\n  systemTheme,\n  className\n}: ThemeProviderProps) => {\n  const [stylesLoaded, setStylesLoaded] = useState(false);\n  const themeClassSpecifier = useMemo(\n    () => customThemeClassSpecifier || generateRandomAlphaString(),\n    [customThemeClassSpecifier]\n  );\n\n  // Add the systemTheme class name to the body on mount\n  useIsomorphicLayoutEffect(() => {\n    if (!systemTheme) {\n      return;\n    }\n\n    if (isAnySystemThemeClassNameOnBody()) {\n      // If there is already a systemTheme class name on the body, we don't want to override it\n      return;\n    }\n\n    addSystemThemeClassNameToBody(systemTheme);\n\n    return () => {\n      // Cleanup the systemTheme class name from the body on ThemeProvider unmount\n      removeSystemThemeClassNameFromBody(systemTheme);\n    };\n  }, [systemTheme]);\n\n  useEffect(() => {\n    if (!shouldGenerateTheme(themeConfig)) {\n      return;\n    }\n    if (document.getElementById(themeConfig.name)) {\n      setStylesLoaded(true);\n      return;\n    }\n\n    const styleElement = document.createElement(\"style\");\n    styleElement.type = \"text/css\";\n    styleElement.id = themeConfig.name;\n    const themeCssOverride = generateThemeCssOverride(themeConfig, themeClassSpecifier);\n\n    try {\n      styleElement.appendChild(document.createTextNode(themeCssOverride));\n      document.head.appendChild(styleElement);\n      setStylesLoaded(true);\n    } catch (error) {\n      console.error(\"vibe ThemeProvider: error inserting theme-generated css - \", error);\n    }\n\n    return () => {\n      document.head.removeChild(styleElement);\n    };\n  }, [themeClassSpecifier, themeConfig]);\n\n  if (!stylesLoaded && shouldGenerateTheme(themeConfig)) {\n    // Waiting for styles to load before children render\n    return null;\n  }\n\n  // Pass the theme name as a class to the div wrapping children - to scope the effect of the theme\n  return <div className={cx(themeConfig?.name, themeClassSpecifier, className)}>{children}</div>;\n};\n\nexport default ThemeProvider;\n"],"names":["ThemeProvider","_ref","themeConfig","children","customThemeClassSpecifier","themeClassSpecifier","systemTheme","className","_useState","useState","_useState2","_slicedToArray","stylesLoaded","setStylesLoaded","useMemo","generateRandomAlphaString","useIsomorphicLayoutEffect","isAnySystemThemeClassNameOnBody","addSystemThemeClassNameToBody","removeSystemThemeClassNameFromBody","useEffect","shouldGenerateTheme","document","getElementById","name","styleElement","createElement","type","id","themeCssOverride","generateThemeCssOverride","appendChild","createTextNode","head","error","console","removeChild","React","cx"],"mappings":"gdAuCA,IAAMA,EAAgB,SAAHC,GAMM,IALvBC,EAAWD,EAAXC,YACAC,EAAQF,EAARE,SACqBC,EAAyBH,EAA9CI,oBACAC,EAAWL,EAAXK,YACAC,EAASN,EAATM,UAEAC,EAAwCC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhDI,EAAYF,EAAA,GAAEG,EAAeH,EAAA,GAC9BL,EAAsBS,GAC1B,WAAA,OAAMV,GAA6BW,MACnC,CAACX,IAiDH,OA7CAY,GAA0B,WACxB,GAAKV,IAIDW,IAOJ,OAFAC,EAA8BZ,GAEvB,WAELa,EAAmCb,GAEvC,GAAG,CAACA,IAEJc,GAAU,WACR,GAAKC,EAAoBnB,GAAzB,CAGA,IAAIoB,SAASC,eAAerB,EAAYsB,MAAxC,CAKA,IAAMC,EAAeH,SAASI,cAAc,SAC5CD,EAAaE,KAAO,WACpBF,EAAaG,GAAK1B,EAAYsB,KAC9B,IAAMK,EAAmBC,EAAyB5B,EAAaG,GAE/D,IACEoB,EAAaM,YAAYT,SAASU,eAAeH,IACjDP,SAASW,KAAKF,YAAYN,GAC1BZ,GAAgB,EACjB,CAAC,MAAOqB,GACPC,QAAQD,MAAM,6DAA8DA,EAC9E,CAEA,OAAO,WACLZ,SAASW,KAAKG,YAAYX,GAhB5B,CAFEZ,GAAgB,EAFlB,CAsBF,GAAG,CAACR,EAAqBH,KAEpBU,GAAgBS,EAAoBnB,GAEhC,KAIFmC,EAAAX,cAAA,MAAA,CAAKnB,UAAW+B,EAAGpC,aAAA,EAAAA,EAAasB,KAAMnB,EAAqBE,IAAaJ,EACjF"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type ReactElement, useEffect, useMemo, useState } from \"react\";\nimport { type Theme } from \"./ThemeProviderConstants\";\nimport { type SystemTheme } from \"./ThemeProvider.types\";\nimport {\n  addSystemThemeClassNameToBody,\n  generateRandomAlphaString,\n  generateThemeCssOverride,\n  isAnySystemThemeClassNameOnBody,\n  removeSystemThemeClassNameFromBody,\n  shouldGenerateTheme\n} from \"./ThemeProviderUtils\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\nexport interface ThemeProviderProps {\n  /**\n   * The theme configuration to apply. It consists of a `name` (a unique CSS class name added to the children)\n   * and an object of color overrides for each system theme.\n   */\n  themeConfig?: Theme;\n  /**\n   * The children to be rendered with the applied theme.\n   */\n  children: ReactElement;\n  /**\n   * A string added to the theme name selector to make it more specific, in case `themeConfig.name`\n   * collides with another class name.\n   */\n  themeClassSpecifier?: string;\n  /**\n   * The system theme to apply to the `body` element on mount,\n   * if there is no system theme class name on the body already.\n   */\n  systemTheme?: SystemTheme;\n  /**\n   * Class name applied to the wrapping `div`.\n   */\n  className?: string;\n}\n\nconst ThemeProvider = ({\n  themeConfig,\n  children,\n  themeClassSpecifier: customThemeClassSpecifier,\n  systemTheme,\n  className\n}: ThemeProviderProps) => {\n  const [stylesLoaded, setStylesLoaded] = useState(false);\n  const themeClassSpecifier = useMemo(\n    () => customThemeClassSpecifier || generateRandomAlphaString(),\n    [customThemeClassSpecifier]\n  );\n\n  // Add the systemTheme class name to the body on mount\n  useIsomorphicLayoutEffect(() => {\n    if (!systemTheme) {\n      return;\n    }\n\n    if (isAnySystemThemeClassNameOnBody()) {\n      // If there is already a systemTheme class name on the body, we don't want to override it\n      return;\n    }\n\n    addSystemThemeClassNameToBody(systemTheme);\n\n    return () => {\n      // Cleanup the systemTheme class name from the body on ThemeProvider unmount\n      removeSystemThemeClassNameFromBody(systemTheme);\n    };\n  }, [systemTheme]);\n\n  useEffect(() => {\n    if (!shouldGenerateTheme(themeConfig)) {\n      return;\n    }\n    if (document.getElementById(themeConfig.name)) {\n      setStylesLoaded(true);\n      return;\n    }\n\n    const styleElement = document.createElement(\"style\");\n    styleElement.type = \"text/css\";\n    styleElement.id = themeConfig.name;\n    const themeCssOverride = generateThemeCssOverride(themeConfig, themeClassSpecifier);\n\n    try {\n      styleElement.appendChild(document.createTextNode(themeCssOverride));\n      document.head.appendChild(styleElement);\n      setStylesLoaded(true);\n    } catch (error) {\n      console.error(\"vibe ThemeProvider: error inserting theme-generated css - \", error);\n    }\n\n    return () => {\n      document.head.removeChild(styleElement);\n    };\n  }, [themeClassSpecifier, themeConfig]);\n\n  if (!stylesLoaded && shouldGenerateTheme(themeConfig)) {\n    // Waiting for styles to load before children render\n    return null;\n  }\n\n  // Pass the theme name as a class to the div wrapping children - to scope the effect of the theme\n  return <div className={cx(themeConfig?.name, themeClassSpecifier, className)}>{children}</div>;\n};\n\nexport default ThemeProvider;\n"],"names":["ThemeProvider","_ref","themeConfig","children","customThemeClassSpecifier","themeClassSpecifier","systemTheme","className","_useState","useState","_useState2","_slicedToArray","stylesLoaded","setStylesLoaded","useMemo","generateRandomAlphaString","useIsomorphicLayoutEffect","isAnySystemThemeClassNameOnBody","addSystemThemeClassNameToBody","removeSystemThemeClassNameFromBody","useEffect","shouldGenerateTheme","document","getElementById","name","styleElement","createElement","type","id","themeCssOverride","generateThemeCssOverride","appendChild","createTextNode","head","error","console","removeChild","React","cx"],"mappings":"6cAuCA,IAAMA,EAAgB,SAAHC,GAMM,IALvBC,EAAWD,EAAXC,YACAC,EAAQF,EAARE,SACqBC,EAAyBH,EAA9CI,oBACAC,EAAWL,EAAXK,YACAC,EAASN,EAATM,UAEAC,EAAwCC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhDI,EAAYF,EAAA,GAAEG,EAAeH,EAAA,GAC9BL,EAAsBS,GAC1B,WAAA,OAAMV,GAA6BW,MACnC,CAACX,IAiDH,OA7CAY,GAA0B,WACxB,GAAKV,IAIDW,IAOJ,OAFAC,EAA8BZ,GAEvB,WAELa,EAAmCb,GAEvC,GAAG,CAACA,IAEJc,GAAU,WACR,GAAKC,EAAoBnB,GAAzB,CAGA,IAAIoB,SAASC,eAAerB,EAAYsB,MAAxC,CAKA,IAAMC,EAAeH,SAASI,cAAc,SAC5CD,EAAaE,KAAO,WACpBF,EAAaG,GAAK1B,EAAYsB,KAC9B,IAAMK,EAAmBC,EAAyB5B,EAAaG,GAE/D,IACEoB,EAAaM,YAAYT,SAASU,eAAeH,IACjDP,SAASW,KAAKF,YAAYN,GAC1BZ,GAAgB,EACjB,CAAC,MAAOqB,GACPC,QAAQD,MAAM,6DAA8DA,EAC9E,CAEA,OAAO,WACLZ,SAASW,KAAKG,YAAYX,GAhB5B,CAFEZ,GAAgB,EAFlB,CAsBF,GAAG,CAACR,EAAqBH,KAEpBU,GAAgBS,EAAoBnB,GAEhC,KAIFmC,EAAAX,cAAA,MAAA,CAAKnB,UAAW+B,EAAGpC,aAAA,EAAAA,EAAasB,KAAMnB,EAAqBE,IAAaJ,EACjF"}

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as r,useRef as o,useState as a,useEffect as n,useMemo as s,Fragment as l}from"react";import d from"classnames";import m from"../../hooks/useMergeRef.js";import{Tooltip as c}from"@vibe/tooltip/mockedClassNames";import{IconButton as p}from"@vibe/icon-button/mockedClassNames";import{CloseSmall as v}from"@vibe/icons";import u from"./TipseenTitle.js";import{TIPSEEN_CLOSE_BUTTON_ARIA_LABEL as h}from"./TipseenConstants.js";import{ComponentDefaultTestId as f}from"../../tests/constants.js";import{getTestId as y}from"../../tests/testIds.js";import{Text as g}from"@vibe/typography/mockedClassNames";import C from"./Tipseen.module.scss.js";var T=i.createContext("primary"),N=r((function(r,N){var b=r.className,w=r.id,k=r.position,E=void 0===k?"bottom":k,W=r.animationType,j=void 0===W?"expand":W,x=r.hideDelay,A=void 0===x?0:x,B=r.showDelay,D=void 0===B?100:B,P=r.title,S=r.titleClassName,H=r.hideCloseButton,R=r.closeButtonTheme,I=void 0===R?"light":R,O=r.onClose,M=r.closeAriaLabel,_=r.children,z=void 0===_?null:_,L=r.content,q=r.containerSelector,F=r.hideTrigger,G=void 0===F?[]:F,J=r.showTrigger,K=void 0===J?[]:J,Q=r.width,U=r.moveBy,V=r.hideWhenReferenceHidden,X=void 0!==V&&V,Y=r.middleware,Z=r.referenceWrapperClassName,$=r.tip,ee=void 0===$||$,te=r.tooltipArrowClassName,ie=r.floating,re=void 0!==ie&&ie,oe=r.color,ae=r["data-testid"],ne=null!=oe?oe:"inverted",se=Array.isArray(K)&&Array.isArray(G)&&0===K.length&&D>0,le=o(null),de=m(N,le),me=a(!se),ce=e(me,2),pe=ce[0],ve=ce[1],ue=M||h;n((function(){var e;return D&&(e=setTimeout((function(){ve(!0)}),D)),function(){clearTimeout(e)}}),[D,ve]);var he=s((function(){return"inverted"===ne?"onInverted":"onPrimary"}),[ne]),fe=s((function(){return"light"===I?"inverted"===ne?"on-inverted-background":"on-primary-color":I}),[ne,I]),ye=N||w?"div":l,ge="div"===ye?{ref:de,id:w,"data-testid":ae||y(f.TIPSEEN,w)}:{},Ce=i.createElement("div",null,i.createElement("div",{className:d(C.tipseenHeader)},H?null:i.createElement(p,{hideTooltip:!0,className:d(C.tipseenCloseButton,t({},C.dark,"dark"===I||"fixed-dark"===I)),onClick:O,size:"xs",kind:"tertiary",color:fe,"aria-label":ue,icon:v}),i.createElement(u,{text:P,className:d(C.tipseenTitle,S)})),i.createElement(g,{color:he,type:"text2",element:"div",ellipsis:!1,className:d(C.tipseenContent)},i.createElement(T.Provider,{value:ne},L)));return i.createElement(ye,Object.assign({},ge),i.createElement(c,{className:d(C.tipseenWrapper,b,t(t({},C.tipseenWrapperWithoutCustomWidth,!Q),C.floating,re)),maxWidth:Q,arrowClassName:te,style:Q?{width:Q}:void 0,shouldShowOnMount:!se,position:E,animationType:j,hideDelay:A,showDelay:0,hideTrigger:G,showTrigger:K,showOnDialogEnter:!1,content:Ce,theme:"inverted"===ne?"dark":"primary",containerSelector:q,disableDialogSlide:!1,moveBy:U,hideWhenReferenceHidden:X,middleware:Y,referenceWrapperClassName:Z,tip:ee&&!re,open:se?pe:void 0,forceRenderWithoutChildren:re},z))}));export{T as TipseenContext,N as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as r,useRef as o,useState as a,useEffect as n,useMemo as s,Fragment as l}from"react";import d from"classnames";import{useMergeRef as m}from"@vibe/shared";import{Tooltip as c}from"@vibe/tooltip/mockedClassNames";import{IconButton as p}from"@vibe/icon-button/mockedClassNames";import{CloseSmall as v}from"@vibe/icons";import u from"./TipseenTitle.js";import{TIPSEEN_CLOSE_BUTTON_ARIA_LABEL as h}from"./TipseenConstants.js";import{ComponentDefaultTestId as f}from"../../tests/constants.js";import{getTestId as y}from"../../tests/testIds.js";import{Text as g}from"@vibe/typography/mockedClassNames";import C from"./Tipseen.module.scss.js";var T=i.createContext("primary"),N=r((function(r,N){var b=r.className,w=r.id,E=r.position,k=void 0===E?"bottom":E,W=r.animationType,x=void 0===W?"expand":W,j=r.hideDelay,A=void 0===j?0:j,B=r.showDelay,D=void 0===B?100:B,P=r.title,S=r.titleClassName,H=r.hideCloseButton,I=r.closeButtonTheme,O=void 0===I?"light":I,R=r.onClose,_=r.closeAriaLabel,z=r.children,L=void 0===z?null:z,M=r.content,q=r.containerSelector,F=r.hideTrigger,G=void 0===F?[]:F,J=r.showTrigger,K=void 0===J?[]:J,Q=r.width,U=r.moveBy,V=r.hideWhenReferenceHidden,X=void 0!==V&&V,Y=r.middleware,Z=r.referenceWrapperClassName,$=r.tip,ee=void 0===$||$,te=r.tooltipArrowClassName,ie=r.floating,re=void 0!==ie&&ie,oe=r.color,ae=r["data-testid"],ne=null!=oe?oe:"inverted",se=Array.isArray(K)&&Array.isArray(G)&&0===K.length&&D>0,le=o(null),de=m(N,le),me=a(!se),ce=e(me,2),pe=ce[0],ve=ce[1],ue=_||h;n((function(){var e;return D&&(e=setTimeout((function(){ve(!0)}),D)),function(){clearTimeout(e)}}),[D,ve]);var he=s((function(){return"inverted"===ne?"onInverted":"onPrimary"}),[ne]),fe=s((function(){return"light"===O?"inverted"===ne?"on-inverted-background":"on-primary-color":O}),[ne,O]),ye=N||w?"div":l,ge="div"===ye?{ref:de,id:w,"data-testid":ae||y(f.TIPSEEN,w)}:{},Ce=i.createElement("div",null,i.createElement("div",{className:d(C.tipseenHeader)},H?null:i.createElement(p,{hideTooltip:!0,className:d(C.tipseenCloseButton,t({},C.dark,"dark"===O||"fixed-dark"===O)),onClick:R,size:"xs",kind:"tertiary",color:fe,"aria-label":ue,icon:v}),i.createElement(u,{text:P,className:d(C.tipseenTitle,S)})),i.createElement(g,{color:he,type:"text2",element:"div",ellipsis:!1,className:d(C.tipseenContent)},i.createElement(T.Provider,{value:ne},M)));return i.createElement(ye,Object.assign({},ge),i.createElement(c,{className:d(C.tipseenWrapper,b,t(t({},C.tipseenWrapperWithoutCustomWidth,!Q),C.floating,re)),maxWidth:Q,arrowClassName:te,style:Q?{width:Q}:void 0,shouldShowOnMount:!se,position:k,animationType:x,hideDelay:A,showDelay:0,hideTrigger:G,showTrigger:K,showOnDialogEnter:!1,content:Ce,theme:"inverted"===ne?"dark":"primary",containerSelector:q,disableDialogSlide:!1,moveBy:U,hideWhenReferenceHidden:X,middleware:Y,referenceWrapperClassName:Z,tip:ee&&!re,open:se?pe:void 0,forceRenderWithoutChildren:re},L))}));export{T as TipseenContext,N as default};
 //# sourceMappingURL=Tipseen.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tipseen.js","sources":["../../../../../src/components/Tipseen/Tipseen.tsx"],"sourcesContent":["import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type DialogAnimationType, type DialogMiddleware, type DialogTriggerEvent } from \"@vibe/dialog\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL } from \"./TipseenConstants\";\nimport { type TipseenCloseButtonTheme, type TipseenColor } from \"./Tipseen.types\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Tipseen.module.scss\";\nimport React from \"react\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface TipseenProps extends VibeComponentProps {\n  /**\n   * Class name applied to the Tipseen title.\n   */\n  titleClassName?: string;\n  /**\n   * The position of the Tipseen relative to the target element.\n   */\n  position?: TooltipPositions;\n  /**\n   * The animation type used for showing/hiding the Tipseen.\n   */\n  animationType?: DialogAnimationType;\n  /**\n   * The delay in milliseconds before hiding the Tipseen.\n   */\n  hideDelay?: number;\n  /**\n   * The delay in milliseconds before showing the Tipseen.\n   */\n  showDelay?: number;\n  /**\n   * The title text of the Tipseen.\n   */\n  title?: string;\n  /**\n   * If true, hides the close button.\n   */\n  hideCloseButton?: boolean;\n  /**\n   * The child element that triggers the Tipseen.\n   */\n  children?: ReactElement;\n  /**\n   * The CSS selector of the container where the Tipseen should be rendered.\n   */\n  containerSelector?: string;\n  /**\n   * Events that trigger hiding the Tipseen.\n   */\n  hideTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * Events that trigger showing the Tipseen.\n   */\n  showTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * The width of the Tipseen.\n   */\n  width?: number;\n  /**\n   * Offset values for positioning adjustments.\n   */\n  moveBy?: MoveBy;\n  /**\n   * If true, hides the Tipseen when the reference element is hidden.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * Custom Floating UI middleware for positioning logic.\n   * @see https://floating-ui.com/docs/middleware\n   */\n  middleware?: DialogMiddleware[];\n  /**\n   * Class name applied to the reference wrapper element.\n   */\n  referenceWrapperClassName?: string;\n  /**\n   * If false, hides the arrow of the Tipseen.\n   */\n  tip?: boolean;\n  /**\n   * Class name applied to the Tipseen arrow.\n   */\n  tooltipArrowClassName?: string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeAriaLabel?: string;\n  /**\n   * Callback fired when the Tipseen is closed.\n   */\n  onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * The content displayed inside the Tipseen.\n   */\n  content: ElementContent;\n  /**\n   * The theme of the Tipseen close button.\n   */\n  closeButtonTheme?: TipseenCloseButtonTheme;\n  /**\n   * If true, renders the Tipseen as a floating element without a reference.\n   */\n  floating?: boolean;\n  /**\n   * The color theme of the Tipseen.\n   */\n  color?: TipseenColor;\n}\n\nexport const TipseenContext = React.createContext<TipseenColor>(\"primary\");\n\nconst Tipseen = forwardRef(\n  (\n    {\n      className,\n      id,\n      position = \"bottom\",\n      animationType = \"expand\",\n      hideDelay = 0,\n      showDelay = 100,\n      title,\n      titleClassName,\n      hideCloseButton,\n      closeButtonTheme = \"light\",\n      onClose,\n      closeAriaLabel,\n      children = null,\n      content,\n      containerSelector,\n      hideTrigger = [],\n      showTrigger = [],\n      width,\n      moveBy,\n      hideWhenReferenceHidden = false,\n      middleware,\n      referenceWrapperClassName,\n      tip = true,\n      tooltipArrowClassName,\n      floating = false,\n      color: colorProp,\n      \"data-testid\": dataTestId\n    }: TipseenProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const color = colorProp ?? \"inverted\";\n\n    const defaultDelayOpen =\n      Array.isArray(showTrigger) && Array.isArray(hideTrigger) && showTrigger.length === 0 && showDelay > 0;\n\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const [delayedOpen, setDelayOpen] = useState(!defaultDelayOpen);\n    const overrideCloseAriaLabel = closeAriaLabel || TIPSEEN_CLOSE_BUTTON_ARIA_LABEL;\n\n    useEffect(() => {\n      let timeout: NodeJS.Timeout;\n      if (showDelay) {\n        timeout = setTimeout(() => {\n          setDelayOpen(true);\n        }, showDelay);\n      }\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [showDelay, setDelayOpen]);\n\n    const textColor = useMemo(() => {\n      return color === \"inverted\" ? \"onInverted\" : \"onPrimary\";\n    }, [color]);\n    const closeButtonColor = useMemo(() => {\n      if (closeButtonTheme === \"light\") {\n        return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n      } else {\n        return closeButtonTheme;\n      }\n    }, [color, closeButtonTheme]);\n\n    const TipseenWrapper = ref || id ? \"div\" : Fragment;\n    const wrapperProps =\n      TipseenWrapper === \"div\"\n        ? { ref: mergedRef, id, \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN, id) }\n        : {};\n\n    const tooltipContent = (\n      <div>\n        <div className={cx(styles.tipseenHeader)}>\n          {hideCloseButton ? null : (\n            <IconButton\n              hideTooltip\n              className={cx(styles.tipseenCloseButton, {\n                [styles.dark]: closeButtonTheme === \"dark\" || closeButtonTheme === \"fixed-dark\"\n              })}\n              onClick={onClose}\n              size=\"xs\"\n              kind=\"tertiary\"\n              // @ts-ignore\n              color={closeButtonColor}\n              aria-label={overrideCloseAriaLabel}\n              icon={CloseSmall}\n            />\n          )}\n          <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />\n        </div>\n        <Text color={textColor} type=\"text2\" element=\"div\" ellipsis={false} className={cx(styles.tipseenContent)}>\n          <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>\n        </Text>\n      </div>\n    );\n\n    return (\n      <TipseenWrapper {...wrapperProps}>\n        <Tooltip\n          className={cx(styles.tipseenWrapper, className, {\n            [styles.tipseenWrapperWithoutCustomWidth]: !width,\n            [styles.floating]: floating\n          })}\n          maxWidth={width}\n          arrowClassName={tooltipArrowClassName}\n          style={width ? { width } : undefined}\n          shouldShowOnMount={!defaultDelayOpen}\n          position={position}\n          animationType={animationType}\n          hideDelay={hideDelay}\n          showDelay={0}\n          hideTrigger={hideTrigger}\n          showTrigger={showTrigger}\n          showOnDialogEnter={false}\n          content={tooltipContent}\n          theme={color === \"inverted\" ? \"dark\" : \"primary\"}\n          containerSelector={containerSelector}\n          disableDialogSlide={false}\n          moveBy={moveBy}\n          hideWhenReferenceHidden={hideWhenReferenceHidden}\n          middleware={middleware}\n          referenceWrapperClassName={referenceWrapperClassName}\n          tip={tip && !floating}\n          open={defaultDelayOpen ? delayedOpen : undefined}\n          forceRenderWithoutChildren={floating}\n        >\n          {children}\n        </Tooltip>\n      </TipseenWrapper>\n    );\n  }\n);\n\nexport default Tipseen;\n"],"names":["TipseenContext","React","createContext","Tipseen","forwardRef","_ref","ref","className","id","_ref$position","position","_ref$animationType","animationType","_ref$hideDelay","hideDelay","_ref$showDelay","showDelay","title","titleClassName","hideCloseButton","_ref$closeButtonTheme","closeButtonTheme","onClose","closeAriaLabel","_ref$children","children","content","containerSelector","_ref$hideTrigger","hideTrigger","_ref$showTrigger","showTrigger","width","moveBy","_ref$hideWhenReferenc","hideWhenReferenceHidden","middleware","referenceWrapperClassName","_ref$tip","tip","tooltipArrowClassName","_ref$floating","floating","colorProp","color","dataTestId","defaultDelayOpen","Array","isArray","length","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","delayedOpen","setDelayOpen","overrideCloseAriaLabel","TIPSEEN_CLOSE_BUTTON_ARIA_LABEL","useEffect","timeout","setTimeout","clearTimeout","textColor","useMemo","closeButtonColor","TipseenWrapper","Fragment","wrapperProps","getTestId","ComponentDefaultTestId","TIPSEEN","tooltipContent","createElement","cx","styles","tipseenHeader","IconButton","hideTooltip","tipseenCloseButton","_defineProperty","dark","onClick","size","kind","icon","CloseSmall","TipseenTitle","text","tipseenTitle","Text","type","element","ellipsis","tipseenContent","Provider","value","Object","assign","Tooltip","tipseenWrapper","tipseenWrapperWithoutCustomWidth","maxWidth","arrowClassName","style","undefined","shouldShowOnMount","showOnDialogEnter","theme","disableDialogSlide","open","forceRenderWithoutChildren"],"mappings":"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"}
+{"version":3,"file":"Tipseen.js","sources":["../../../../../src/components/Tipseen/Tipseen.tsx"],"sourcesContent":["import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type DialogAnimationType, type DialogMiddleware, type DialogTriggerEvent } from \"@vibe/dialog\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL } from \"./TipseenConstants\";\nimport { type TipseenCloseButtonTheme, type TipseenColor } from \"./Tipseen.types\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Tipseen.module.scss\";\nimport React from \"react\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface TipseenProps extends VibeComponentProps {\n  /**\n   * Class name applied to the Tipseen title.\n   */\n  titleClassName?: string;\n  /**\n   * The position of the Tipseen relative to the target element.\n   */\n  position?: TooltipPositions;\n  /**\n   * The animation type used for showing/hiding the Tipseen.\n   */\n  animationType?: DialogAnimationType;\n  /**\n   * The delay in milliseconds before hiding the Tipseen.\n   */\n  hideDelay?: number;\n  /**\n   * The delay in milliseconds before showing the Tipseen.\n   */\n  showDelay?: number;\n  /**\n   * The title text of the Tipseen.\n   */\n  title?: string;\n  /**\n   * If true, hides the close button.\n   */\n  hideCloseButton?: boolean;\n  /**\n   * The child element that triggers the Tipseen.\n   */\n  children?: ReactElement;\n  /**\n   * The CSS selector of the container where the Tipseen should be rendered.\n   */\n  containerSelector?: string;\n  /**\n   * Events that trigger hiding the Tipseen.\n   */\n  hideTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * Events that trigger showing the Tipseen.\n   */\n  showTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * The width of the Tipseen.\n   */\n  width?: number;\n  /**\n   * Offset values for positioning adjustments.\n   */\n  moveBy?: MoveBy;\n  /**\n   * If true, hides the Tipseen when the reference element is hidden.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * Custom Floating UI middleware for positioning logic.\n   * @see https://floating-ui.com/docs/middleware\n   */\n  middleware?: DialogMiddleware[];\n  /**\n   * Class name applied to the reference wrapper element.\n   */\n  referenceWrapperClassName?: string;\n  /**\n   * If false, hides the arrow of the Tipseen.\n   */\n  tip?: boolean;\n  /**\n   * Class name applied to the Tipseen arrow.\n   */\n  tooltipArrowClassName?: string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeAriaLabel?: string;\n  /**\n   * Callback fired when the Tipseen is closed.\n   */\n  onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * The content displayed inside the Tipseen.\n   */\n  content: ElementContent;\n  /**\n   * The theme of the Tipseen close button.\n   */\n  closeButtonTheme?: TipseenCloseButtonTheme;\n  /**\n   * If true, renders the Tipseen as a floating element without a reference.\n   */\n  floating?: boolean;\n  /**\n   * The color theme of the Tipseen.\n   */\n  color?: TipseenColor;\n}\n\nexport const TipseenContext = React.createContext<TipseenColor>(\"primary\");\n\nconst Tipseen = forwardRef(\n  (\n    {\n      className,\n      id,\n      position = \"bottom\",\n      animationType = \"expand\",\n      hideDelay = 0,\n      showDelay = 100,\n      title,\n      titleClassName,\n      hideCloseButton,\n      closeButtonTheme = \"light\",\n      onClose,\n      closeAriaLabel,\n      children = null,\n      content,\n      containerSelector,\n      hideTrigger = [],\n      showTrigger = [],\n      width,\n      moveBy,\n      hideWhenReferenceHidden = false,\n      middleware,\n      referenceWrapperClassName,\n      tip = true,\n      tooltipArrowClassName,\n      floating = false,\n      color: colorProp,\n      \"data-testid\": dataTestId\n    }: TipseenProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const color = colorProp ?? \"inverted\";\n\n    const defaultDelayOpen =\n      Array.isArray(showTrigger) && Array.isArray(hideTrigger) && showTrigger.length === 0 && showDelay > 0;\n\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const [delayedOpen, setDelayOpen] = useState(!defaultDelayOpen);\n    const overrideCloseAriaLabel = closeAriaLabel || TIPSEEN_CLOSE_BUTTON_ARIA_LABEL;\n\n    useEffect(() => {\n      let timeout: NodeJS.Timeout;\n      if (showDelay) {\n        timeout = setTimeout(() => {\n          setDelayOpen(true);\n        }, showDelay);\n      }\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [showDelay, setDelayOpen]);\n\n    const textColor = useMemo(() => {\n      return color === \"inverted\" ? \"onInverted\" : \"onPrimary\";\n    }, [color]);\n    const closeButtonColor = useMemo(() => {\n      if (closeButtonTheme === \"light\") {\n        return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n      } else {\n        return closeButtonTheme;\n      }\n    }, [color, closeButtonTheme]);\n\n    const TipseenWrapper = ref || id ? \"div\" : Fragment;\n    const wrapperProps =\n      TipseenWrapper === \"div\"\n        ? { ref: mergedRef, id, \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN, id) }\n        : {};\n\n    const tooltipContent = (\n      <div>\n        <div className={cx(styles.tipseenHeader)}>\n          {hideCloseButton ? null : (\n            <IconButton\n              hideTooltip\n              className={cx(styles.tipseenCloseButton, {\n                [styles.dark]: closeButtonTheme === \"dark\" || closeButtonTheme === \"fixed-dark\"\n              })}\n              onClick={onClose}\n              size=\"xs\"\n              kind=\"tertiary\"\n              // @ts-ignore\n              color={closeButtonColor}\n              aria-label={overrideCloseAriaLabel}\n              icon={CloseSmall}\n            />\n          )}\n          <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />\n        </div>\n        <Text color={textColor} type=\"text2\" element=\"div\" ellipsis={false} className={cx(styles.tipseenContent)}>\n          <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>\n        </Text>\n      </div>\n    );\n\n    return (\n      <TipseenWrapper {...wrapperProps}>\n        <Tooltip\n          className={cx(styles.tipseenWrapper, className, {\n            [styles.tipseenWrapperWithoutCustomWidth]: !width,\n            [styles.floating]: floating\n          })}\n          maxWidth={width}\n          arrowClassName={tooltipArrowClassName}\n          style={width ? { width } : undefined}\n          shouldShowOnMount={!defaultDelayOpen}\n          position={position}\n          animationType={animationType}\n          hideDelay={hideDelay}\n          showDelay={0}\n          hideTrigger={hideTrigger}\n          showTrigger={showTrigger}\n          showOnDialogEnter={false}\n          content={tooltipContent}\n          theme={color === \"inverted\" ? \"dark\" : \"primary\"}\n          containerSelector={containerSelector}\n          disableDialogSlide={false}\n          moveBy={moveBy}\n          hideWhenReferenceHidden={hideWhenReferenceHidden}\n          middleware={middleware}\n          referenceWrapperClassName={referenceWrapperClassName}\n          tip={tip && !floating}\n          open={defaultDelayOpen ? delayedOpen : undefined}\n          forceRenderWithoutChildren={floating}\n        >\n          {children}\n        </Tooltip>\n      </TipseenWrapper>\n    );\n  }\n);\n\nexport default Tipseen;\n"],"names":["TipseenContext","React","createContext","Tipseen","forwardRef","_ref","ref","className","id","_ref$position","position","_ref$animationType","animationType","_ref$hideDelay","hideDelay","_ref$showDelay","showDelay","title","titleClassName","hideCloseButton","_ref$closeButtonTheme","closeButtonTheme","onClose","closeAriaLabel","_ref$children","children","content","containerSelector","_ref$hideTrigger","hideTrigger","_ref$showTrigger","showTrigger","width","moveBy","_ref$hideWhenReferenc","hideWhenReferenceHidden","middleware","referenceWrapperClassName","_ref$tip","tip","tooltipArrowClassName","_ref$floating","floating","colorProp","color","dataTestId","defaultDelayOpen","Array","isArray","length","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","delayedOpen","setDelayOpen","overrideCloseAriaLabel","TIPSEEN_CLOSE_BUTTON_ARIA_LABEL","useEffect","timeout","setTimeout","clearTimeout","textColor","useMemo","closeButtonColor","TipseenWrapper","Fragment","wrapperProps","getTestId","ComponentDefaultTestId","TIPSEEN","tooltipContent","createElement","cx","styles","tipseenHeader","IconButton","hideTooltip","tipseenCloseButton","_defineProperty","dark","onClick","size","kind","icon","CloseSmall","TipseenTitle","text","tipseenTitle","Text","type","element","ellipsis","tipseenContent","Provider","value","Object","assign","Tooltip","tipseenWrapper","tipseenWrapperWithoutCustomWidth","maxWidth","arrowClassName","style","undefined","shouldShowOnMount","showOnDialogEnter","theme","disableDialogSlide","open","forceRenderWithoutChildren"],"mappings":"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"}

package/dist/mocked_classnames/src/components/Tipseen/TipseenMedia/TipseenMedia.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as s,useRef as t,useContext as r,useMemo as o}from"react";import i from"classnames";import m from"../../../hooks/useMergeRef.js";import{getTestId as a}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import n from"./TipseenMedia.module.scss.js";import{TipseenContext as d}from"../Tipseen.js";import{getStyle as f}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as l}from"es-toolkit";var c=s((function(s,c){var u=s.className,j=s.id,M=s["data-testid"],E=s.children,h=t(null),v=m(c,h),I=r(d),N=o((function(){return i(n.tipseenMedia,f(n,l("color-"+I)),u)}),[I,u]);return e.createElement("div",{ref:v,className:N,id:j,"data-testid":M||a(p.TIPSEEN_MEDIA,j)},E)}));export{c as default};
+import t,{forwardRef as e,useRef as s,useContext as r,useMemo as o}from"react";import i from"classnames";import{useMergeRef as m,getStyle as a}from"@vibe/shared";import{getTestId as n}from"../../../tests/testIds.js";import{ComponentDefaultTestId as d}from"../../../tests/constants.js";import f from"./TipseenMedia.module.scss.js";import{TipseenContext as p}from"../Tipseen.js";import{camelCase as c}from"es-toolkit";var l=e((function(e,l){var u=e.className,j=e.id,v=e["data-testid"],E=e.children,I=s(null),M=m(l,I),N=r(p),T=o((function(){return i(f.tipseenMedia,a(f,c("color-"+N)),u)}),[N,u]);return t.createElement("div",{ref:M,className:T,id:j,"data-testid":v||n(d.TIPSEEN_MEDIA,j)},E)}));export{l as default};
 //# sourceMappingURL=TipseenMedia.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenMedia/TipseenMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"TipseenMedia.js","sources":["../../../../../../src/components/Tipseen/TipseenMedia/TipseenMedia.tsx"],"sourcesContent":["import React, { forwardRef, type PropsWithChildren, type ReactNode, useContext, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./TipseenMedia.module.scss\";\nimport { TipseenContext } from \"../Tipseen\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\n\nexport interface TipseenMediaProps extends PropsWithChildren<VibeComponentProps> {\n  /**\n   * The media content displayed inside the Tipseen.\n   */\n  children: ReactNode;\n}\n\nconst TipseenMedia = forwardRef(\n  ({ className, id, \"data-testid\": dataTestId, children }: TipseenMediaProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const color = useContext(TipseenContext);\n\n    const classNames = useMemo(() => {\n      return cx(styles.tipseenMedia, getStyle(styles, camelCase(\"color-\" + color)), className);\n    }, [color, className]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={classNames}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_MEDIA, id)}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default TipseenMedia;\n"],"names":["TipseenMedia","forwardRef","_ref","ref","className","id","dataTestId","children","componentRef","useRef","mergedRef","useMergeRef","color","useContext","TipseenContext","classNames","useMemo","cx","styles","tipseenMedia","getStyle","camelCase","React","createElement","getTestId","ComponentDefaultTestId","TIPSEEN_MEDIA"],"mappings":"6dAkBMA,IAAAA,EAAeC,GACnB,SAAAC,EAA4EC,GAAwC,IAAjHC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAA2BK,EAAQL,EAARK,SACrCC,EAAeC,EAAO,MACtBC,EAAYC,EAAYR,EAAKK,GAC7BI,EAAQC,EAAWC,GAEnBC,EAAaC,GAAQ,WACzB,OAAOC,EAAGC,EAAOC,aAAcC,EAASF,EAAQG,EAAU,SAAWT,IAASR,EAChF,GAAG,CAACQ,EAAOR,IAEX,OACEkB,EAAAC,cAAA,MAAA,CACEpB,IAAKO,EACLN,UAAWW,EACXV,GAAIA,EAAE,cACOC,GAAckB,EAAUC,EAAuBC,cAAerB,IAE1EE,EAGP"}
+{"version":3,"file":"TipseenMedia.js","sources":["../../../../../../src/components/Tipseen/TipseenMedia/TipseenMedia.tsx"],"sourcesContent":["import React, { forwardRef, type PropsWithChildren, type ReactNode, useContext, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./TipseenMedia.module.scss\";\nimport { TipseenContext } from \"../Tipseen\";\n\nimport { camelCase } from \"es-toolkit\";\n\nexport interface TipseenMediaProps extends PropsWithChildren<VibeComponentProps> {\n  /**\n   * The media content displayed inside the Tipseen.\n   */\n  children: ReactNode;\n}\n\nconst TipseenMedia = forwardRef(\n  ({ className, id, \"data-testid\": dataTestId, children }: TipseenMediaProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const color = useContext(TipseenContext);\n\n    const classNames = useMemo(() => {\n      return cx(styles.tipseenMedia, getStyle(styles, camelCase(\"color-\" + color)), className);\n    }, [color, className]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={classNames}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_MEDIA, id)}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default TipseenMedia;\n"],"names":["TipseenMedia","forwardRef","_ref","ref","className","id","dataTestId","children","componentRef","useRef","mergedRef","useMergeRef","color","useContext","TipseenContext","classNames","useMemo","cx","styles","tipseenMedia","getStyle","camelCase","React","createElement","getTestId","ComponentDefaultTestId","TIPSEEN_MEDIA"],"mappings":"gaAkBMA,IAAAA,EAAeC,GACnB,SAAAC,EAA4EC,GAAwC,IAAjHC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAA2BK,EAAQL,EAARK,SACrCC,EAAeC,EAAO,MACtBC,EAAYC,EAAYR,EAAKK,GAC7BI,EAAQC,EAAWC,GAEnBC,EAAaC,GAAQ,WACzB,OAAOC,EAAGC,EAAOC,aAAcC,EAASF,EAAQG,EAAU,SAAWT,IAASR,EAChF,GAAG,CAACQ,EAAOR,IAEX,OACEkB,EAAAC,cAAA,MAAA,CACEpB,IAAKO,EACLN,UAAWW,EACXV,GAAIA,EAAE,cACOC,GAAckB,EAAUC,EAAuBC,cAAerB,IAE1EE,EAGP"}