@vibe/core 4.5.6 → 4.6.0-alpha-5a4a2.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, 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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"}
+{"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  useLayoutEffect,\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\nconst SELECTED_INDICATOR_INSET_PX = 4;\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    const ulRef = useRef<HTMLUListElement>(null);\n    const indicatorRef = useRef<HTMLSpanElement>(null);\n    const indicatorReadyRef = useRef(false);\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n    const [indicatorVisible, setIndicatorVisible] = useState(false);\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 { 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 updateSelectedIndicator = useCallback(\n      (animate: boolean) => {\n        const wrapper = componentRef.current as HTMLElement | null;\n        const indicator = indicatorRef.current;\n        const tab = tabRefs.current[activeTabState];\n        if (!wrapper || !indicator || !tab) return;\n\n        const wrapperRect = wrapper.getBoundingClientRect();\n        const tabRect = tab.getBoundingClientRect();\n        const toLeft = tabRect.left - wrapperRect.left + wrapper.scrollLeft + SELECTED_INDICATOR_INSET_PX;\n        const toWidth = Math.max(0, tabRect.width - SELECTED_INDICATOR_INSET_PX * 2);\n\n        const prefersReducedMotion =\n          typeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n        const shouldAnimate = animate && indicatorReadyRef.current && !prefersReducedMotion;\n\n        if (!shouldAnimate) {\n          const previousTransition = indicator.style.transition;\n          indicator.style.transition = \"none\";\n          indicator.style.left = `${toLeft}px`;\n          indicator.style.width = `${toWidth}px`;\n          void indicator.offsetWidth;\n          indicator.style.transition = previousTransition;\n        } else {\n          indicator.style.left = `${toLeft}px`;\n          indicator.style.width = `${toWidth}px`;\n        }\n\n        indicatorReadyRef.current = true;\n        setIndicatorVisible(true);\n      },\n      [activeTabState]\n    );\n\n    useLayoutEffect(() => {\n      updateSelectedIndicator(true);\n    }, [activeTabState, children, size, tabType, updateSelectedIndicator]);\n\n    useEffect(() => {\n      const wrapper = componentRef.current as HTMLElement | null;\n      if (!wrapper || typeof ResizeObserver === \"undefined\") return;\n\n      const resizeObserver = new ResizeObserver(() => {\n        updateSelectedIndicator(false);\n      });\n      resizeObserver.observe(wrapper);\n      Object.values(tabRefs.current).forEach(tab => {\n        if (tab) resizeObserver.observe(tab);\n      });\n\n      return () => resizeObserver.disconnect();\n    }, [children, updateSelectedIndicator]);\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        <span\n          ref={indicatorRef}\n          className={cx(styles.selectedIndicator, { [styles.visible]: indicatorVisible })}\n          aria-hidden\n        />\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","ulRef","indicatorRef","indicatorReadyRef","_useState","useState","_useState2","_slicedToArray","activeTabState","setActiveTabState","_useState3","_useState4","indicatorVisible","setIndicatorVisible","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","_useGridKeyboardNavig","useGridKeyboardNavigation","numberOfItemsInLine","length","itemsCount","onItemClicked","circularNavigation","focusIndex","activeIndex","onSelectionAction","prevFocusIndex","updateSelectedIndicator","animate","wrapper","indicator","tab","wrapperRect","getBoundingClientRect","tabRect","toLeft","left","scrollLeft","toWidth","Math","max","width","SELECTED_INDICATOR_INSET_PX","prefersReducedMotion","window","matchMedia","matches","style","concat","previousTransition","transition","useLayoutEffect","ResizeObserver","resizeObserver","observe","Object","values","disconnect","tabsToRender","map","isActive","shouldBeFocusable","cloneElement","active","cx","styles","tabListTabWrapper","tabInnerClassName","tabListTabInner","tabIndex","element","createElement","tabsWrapper","getStyle","camelCase","_defineProperty","getTestId","ComponentDefaultTestId","TAB_LIST","tabsList","role","selectedIndicator","visible","assign","isTabList"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={tabsWrapper:"tabsWrapper",tabsList:"tabsList",sm:"sm",lg:"lg",stretched:"stretched",tabListTabWrapper:"tabListTabWrapper",tabListTabInner:"tabListTabInner",disabled:"disabled",stretchedUnderline:"stretchedUnderline"};!function(e){const t="s_id-1dd2e005bc2f_4_5_5";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const s=document.createElement("style");s.id=t,n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper .tabsList {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper .tabsList.sm {\n  height: 32px;\n}\n.tabsWrapper .tabsList.lg {\n  height: 48px;\n}\n.tabsWrapper.stretched .tabsList {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper {\n  width: 100%;\n}\n.tabsWrapper.stretched .tabsList .tabListTabWrapper .tabListTabInner {\n  width: 100%;\n}\n.tabsWrapper.disabled {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper.stretchedUnderline {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
+var e={tabsWrapper:"tabsWrapper",tabsList:"tabsList",selectedIndicator:"selectedIndicator",visible:"visible",sm:"sm",lg:"lg",stretched:"stretched",tabListTabWrapper:"tabListTabWrapper",tabListTabInner:"tabListTabInner",disabled:"disabled",stretchedUnderline:"stretchedUnderline"};!function(e){const n="s_id-c612bfbecd19_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('@charset "UTF-8";\n/* stylelint-disable */\n/* stylelint-enable */\n/* Tokens — remove once design system Sense motion tokens are live */\n/* Pattern: slide-transition · Tokens: position · ease-transition · duration-long-250 */\n.tabsWrapper {\n  position: relative;\n  --duration-long-250: 250ms;\n  --duration-short-70: 70ms;\n  --ease-transition: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-linear: linear;\n}\n\n.tabsWrapper .tabsList {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  /* Medium: 32px button + 2px gap + 2px selected underline */\n  height: 36px;\n  outline: none;\n  padding: 0;\n}\n\n.tabsWrapper .selectedIndicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background-color: var(--primary-text-color);\n  border-radius: 1px;\n  opacity: 0;\n  z-index: 2;\n  pointer-events: none;\n  transition: left var(--duration-long-250) var(--ease-transition), width var(--duration-long-250) var(--ease-transition), opacity var(--duration-short-70) var(--ease-linear);\n}\n\n.tabsWrapper .selectedIndicator.visible {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tabsWrapper .selectedIndicator {\n    transition: opacity var(--duration-short-70) var(--ease-linear);\n  }\n}\n.tabsWrapper .tabsList.sm {\n  /* Small: 28px button + 2px gap + 2px underline */\n  height: 32px;\n}\n\n.tabsWrapper .tabsList.lg {\n  /* Large: 36px button + 2px gap + 2px underline */\n  height: 40px;\n}\n\n.tabsWrapper.stretched .tabsList {\n  width: 100%;\n}\n\n.tabsWrapper.stretched .tabsList .tabListTabWrapper {\n  width: 100%;\n}\n\n.tabsWrapper.stretched .tabsList .tabListTabWrapper .tabListTabInner {\n  width: 100%;\n}\n\n.tabsWrapper.disabled {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n\n.tabsWrapper.stretchedUnderline {\n  border-bottom: none;\n}');export{e as default};
 //# sourceMappingURL=TabList.module.scss.js.map

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as a}from"../../../_virtual/_rollupPluginBabelHelpers.js";import 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};
+import{slicedToArray as e,defineProperty as a}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import t,{forwardRef as n,useState as i,useRef as r,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 C,TextFieldAriaLabel as b}from"./TextFieldConstants.js";import{useMergeRef as x,NOOP as y}from"@vibe/shared";import{Clickable as E}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={primary:"",secondary:""},L=n((function(n,L){var D=n.className,H=void 0===D?"":D,j=n.placeholder,w=void 0===j?"":j,A=n.autoComplete,S=void 0===A?"off":A,W=n.value,_=n.onChange,q=void 0===_?y:_,B=n.onBlur,O=void 0===B?y:B,R=n.onFocus,z=void 0===R?y:R,K=n.onKeyDown,P=void 0===K?y:K,V=n.onWheel,X=void 0===V?y:V,M=n.debounceRate,U=void 0===M?0:M,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,ae=void 0===ee?y:ee,oe=n.iconName,te=n.iconPosition,ne=void 0===te?"right":te,ie=n.secondaryIconName,re=n.id,le=void 0===re?"input":re,ce=n.title,se=void 0===ce?"":ce,de=n.size,me=void 0===de?"small":de,ue=n.validation,ve=void 0===ue?null:ue,pe=n.wrapperClassName,fe=void 0===pe?"":pe,Ce=n.onIconClick,be=void 0===Ce?y:Ce,xe=n.clearOnIconClick,ye=void 0!==xe&&xe,Ee=n.labelIconName,Ne=n.showCharCount,he=void 0!==Ne&&Ne,ge=n.inputAriaLabel,Te=n.searchResultsContainerId,Ie=void 0===Te?"":Te,Fe=n.activeDescendant,ke=void 0===Fe?"":Fe,Le=n.iconsNames,De=void 0===Le?k:Le,He=n.type,je=void 0===He?"text":He,we=n.maxLength,Ae=void 0===we?null:we,Se=n.allowExceedingMaxLength,We=void 0!==Se&&Se,_e=n.trim,qe=void 0!==_e&&_e,Be=n.role,Oe=void 0===Be?"":Be,Re=n.required,ze=void 0!==Re&&Re,Ke=n.requiredErrorText,Pe=void 0===Ke?"":Ke,Ve=n.loading,Xe=void 0!==Ve&&Ve,Me=n["data-testid"],Ue=n.secondaryDataTestId,Ye=n.tabIndex,Ge=n.underline,Je=void 0!==Ge&&Ge,Qe=n.name,Ze=n.controlled,$e=void 0!==Ze&&Ze,ea=n.iconTooltipContent,aa=n.secondaryTooltipContent,oa=n.dir,ta=i(!1),na=e(ta,2),ia=na[0],ra=na[1],la=r(null),ca=x(L,la,ae),sa=l((function(e){ze&&!e.target.value&&ra(!0),O(e)}),[O,ze]),da=l((function(e,a){ia&&e&&ra(!1),q(e,a||{target:la.current})}),[q,ia]),ma=d({delay:U,onChange:da,initialStateValue:W,trim:qe}),ua=ma.inputValue,va=ma.onEventChanged,pa=ma.clearValue,fa=c((function(){return $e?W:ua}),[$e,W,ua]),Ca=l((function(e){$e?da(e.target.value,e):va(e)}),[$e,da,va]),ba=c((function(){return ie&&fa?ie:oe}),[oe,ie,fa]),xa=l((function(){Q||(ye&&(la.current&&la.current.focus(),la.current.value="",$e?da(""):pa()),be(ba))}),[Q,ye,be,ba,$e,da,pa]),ya=c((function(){return"number"==typeof Ae&&fa&&fa.length>Ae?f.error:ve&&ve.status||ia?f[ia?"error":ve.status]:""}),[Ae,ve,ia,fa]),Ea=oe||ie,Na=he||ve&&ve.text||ia&&Pe,ha=ie===ba,ga=oe===ba,Ta=(be!==y||De.primary||ea)&&fa&&oe.length&&ga,Ia=(ie||aa)&&ha&&!!fa,Fa=We?"".concat(le,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==la?void 0:la.current)&&G){var e=requestAnimationFrame((function(){return la.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[la,G]);var ka=be!==y||ye,La=De.primary||ea,Da=De.secondary||aa;return t.createElement("div",{className:o(T.textField,fe,a(a({},T.disabled,Q),T.onlyUnderline,Je)),role:Oe,"aria-busy":Xe},t.createElement("div",{className:o(T.labelWrapper)},t.createElement(p,{labelText:se,icon:Ee,labelFor:le,required:ze}),t.createElement("div",{className:o(T.inputWrapper,C[me],ya,a({},T.inputWrapperIconLeft,"left"===ne&&!!oe))},t.createElement("input",{className:o(H,T.input,a(a({},T.inputHasIcon,!!Ea),T.readOnly,$)),placeholder:w,autoComplete:S,value:fa,onChange:Ca,disabled:Q,readOnly:$,ref:ca,type:je,id:le,"data-testid":Me||N(h.TEXT_FIELD,le),"data-vibe":g.TEXT_FIELD,name:Qe,onBlur:sa,onFocus:z,onKeyDown:P,onWheel:X,maxLength:"number"!=typeof Ae||We?void 0:Ae,role:Ie&&"combobox","aria-label":ge||w,"aria-invalid":ve&&"error"===ve.status||ia,"aria-owns":Ie,"aria-activedescendant":ke,"aria-required":ze,"aria-describedby":Fa,required:ze,tabIndex:Ye,dir:oa}),Xe&&t.createElement("div",{className:o(T.loaderContainer,a({},T.loaderContainerHasIcon,Ea))},t.createElement("div",{className:o(T.loader)},t.createElement(u,{className:o(T.loaderSvg)}))),oe&&t.createElement(I,{content:ga?ea:void 0,referenceWrapperClassName:T.tooltipContainer},t.createElement(E,{className:o(T.iconContainer,a(a(a(a({},T.iconContainerHasIcon,Ea),T.iconContainerActive,ga),T.iconContainerClickable,ka),T.iconContainerLeft,"left"===ne)),onClick:xa,tabIndex:Ta?"0":"-1",ariaLabel:La},t.createElement(m,{icon:oe,className:o(T.icon),iconType:"font",iconSize:"small"===me?"16px":"18px"}))),ie&&t.createElement(I,{content:ha?aa:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:T.tooltipContainer},t.createElement(E,{className:o(T.iconContainer,a(a(a({},T.iconContainerHasIcon,Ea),T.iconContainerActive,ha),T.iconContainerClickable,ka)),onClick:xa,tabIndex:Ia?"0":"-1","data-testid":Ue||N(h.TEXT_FIELD_SECONDARY_BUTTON,le),ariaLabel:Da},t.createElement(m,{icon:ie,className:o(T.icon),iconType:"font",iconSize:"small"===me?"16px":"18px"})))),Na&&t.createElement(v,{type:"text2",color:"secondary",className:o(T.subTextContainer)},(ve&&ve.text||ia&&Pe)&&t.createElement("span",{className:o(T.subTextContainerStatus)},ia?Pe:ve.text),he&&t.createElement("span",{className:o(T.counter),"aria-label":b.CHAR},fa&&fa.length||0,"number"==typeof Ae&&"/".concat(Ae),t.createElement(F,{id:Fa,text:"Maximum of ".concat(Ae," characters")})))))}));export{L 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, 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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"}
+{"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  ChangeEvent,\n  type ChangeEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport { 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\";\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\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  iconName?: string | React.FunctionComponent | null;\n  /**\n   * Position of the primary icon inside the text field.\n   */\n  iconPosition?: \"left\" | \"right\";\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Icon labels for accessibility.\n   */\n  iconsNames?: {\n    primary: string;\n    secondary: string;\n  };\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      iconName,\n      iconPosition = \"right\",\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconsNames = EMPTY_OBJECT,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconsNames.primary || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconLabel = iconsNames.primary || iconTooltipContent;\n    const secondaryIconLabel = iconsNames.secondary || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div\n            className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass, {\n              [styles.inputWrapperIconLeft]: iconPosition === \"left\" && !!iconName\n            })}\n          >\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                    [styles.iconContainerLeft]: iconPosition === \"left\"\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n                  ariaLabel={primaryIconLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  ariaLabel={secondaryIconLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default TextField;\n"],"names":["EMPTY_OBJECT","primary","secondary","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","_ref$iconPosition","iconPosition","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","inputWrapperIconLeft","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","iconContainerLeft","onClick","ariaLabel","Icon","iconType","iconSize","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText"],"mappings":"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"}

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

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

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

@@ -1,2 +1,2 @@
-var e={textWithHighlightWrapper:"textWithHighlightWrapper",highlightText:"highlightText",withEllipsis:"withEllipsis"};!function(e){const t="s_id-42c1fd2afe36_4_5_5";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.textWithHighlightWrapper {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.textWithHighlightWrapper em.highlightText {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n.textWithHighlightWrapper.withEllipsis {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--heading-clamp-lines);\n  -webkit-box-orient: vertical;\n  white-space: initial;\n  word-break: break-word;\n}");export{e as default};
+var e={textWithHighlightWrapper:"textWithHighlightWrapper",highlightText:"highlightText",withEllipsis:"withEllipsis"};!function(e){const t="s_id-42c1fd2afe36_4_5_3";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.textWithHighlightWrapper {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.textWithHighlightWrapper em.highlightText {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n\n.textWithHighlightWrapper.withEllipsis {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--heading-clamp-lines);\n  -webkit-box-orient: vertical;\n  white-space: initial;\n  word-break: break-word;\n}");export{e as default};
 //# sourceMappingURL=TextWithHighlight.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={tipseenWrapper:"tipseenWrapper",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth",floating:"floating",tipseenHeader:"tipseenHeader",tipseenTitle:"tipseenTitle",tipseenContent:"tipseenContent",tipseenCloseButton:"tipseenCloseButton",dark:"dark"};!function(e){const n="s_id-077bfe37a52b_4_5_5";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tipseenWrapper {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper.tipseenWrapperWithoutCustomWidth {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper.floating {\n  position: fixed;\n  bottom: 0;\n  inset-inline-end: 0;\n  margin-bottom: var(--space-16);\n  margin-inline-end: var(--space-16);\n}\n.tipseenWrapper .tipseenHeader {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper .tipseenTitle {\n  padding: var(--space-16) var(--space-32) 0 var(--space-16);\n}\n.tipseenWrapper .tipseenContent {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper .tipseenCloseButton {\n  position: absolute;\n  top: var(--space-8);\n  inset-inline-end: var(--space-8);\n  z-index: 2;\n}\n.tipseenWrapper .tipseenCloseButton.dark {\n  color: var(--color-asphalt);\n}");export{e as default};
+var e={tipseenWrapper:"tipseenWrapper",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth",floating:"floating",tipseenHeader:"tipseenHeader",tipseenTitle:"tipseenTitle",tipseenContent:"tipseenContent",tipseenCloseButton:"tipseenCloseButton",dark:"dark"};!function(e){const n="s_id-077bfe37a52b_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tipseenWrapper {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper.tipseenWrapperWithoutCustomWidth {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper.floating {\n  position: fixed;\n  bottom: 0;\n  inset-inline-end: 0;\n  margin-bottom: var(--space-16);\n  margin-inline-end: var(--space-16);\n}\n.tipseenWrapper .tipseenHeader {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper .tipseenTitle {\n  padding: var(--space-16) var(--space-32) 0 var(--space-16);\n}\n.tipseenWrapper .tipseenContent {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper .tipseenCloseButton {\n  position: absolute;\n  top: var(--space-8);\n  inset-inline-end: var(--space-8);\n  z-index: 2;\n}\n.tipseenWrapper .tipseenCloseButton.dark {\n  color: var(--color-asphalt);\n}");export{e as default};
 //# sourceMappingURL=Tipseen.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenBasicContent.module.scss.js

@@ -1,2 +1,2 @@
-var e={tipseenBasicContent:"tipseenBasicContent"};!function(e){const n="s_id-6606edb50944_4_5_5";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenBasicContent {\n  padding: var(--space-16) 20px var(--space-24) 20px;\n  display: flex;\n  flex-direction: column;\n}\n.tipseenBasicContent:not(:first-child) {\n  padding-top: 12px;\n}");export{e as default};
+var e={tipseenBasicContent:"tipseenBasicContent"};!function(e){const n="s_id-6606edb50944_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenBasicContent {\n  padding: var(--space-16) 20px var(--space-24) 20px;\n  display: flex;\n  flex-direction: column;\n}\n.tipseenBasicContent:not(:first-child) {\n  padding-top: 12px;\n}");export{e as default};
 //# sourceMappingURL=TipseenBasicContent.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.module.scss.js

@@ -1,2 +1,2 @@
-var e={buttons:"buttons",dismiss:"dismiss"};!function(e){const n="s_id-585bd2f4c510_4_5_5";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const s=document.createElement("style");s.id=n,t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".buttons {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.dismiss {\n  margin-inline-end: var(--space-8);\n}");export{e as default};
+var e={buttons:"buttons",dismiss:"dismiss"};!function(e){const n="s_id-585bd2f4c510_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const s=document.createElement("style");s.id=n,t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".buttons {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.dismiss {\n  margin-inline-end: var(--space-8);\n}");export{e as default};
 //# sourceMappingURL=TipseenContent.module.scss.js.map

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

@@ -1,2 +1,2 @@
-var e={tipseenMedia:"tipseenMedia",colorInverted:"colorInverted"};!function(e){const n="s_id-71e151b2b729_4_5_5";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenMedia {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  border: 2px solid var(--primary-color);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  z-index: 1;\n}\n\n.colorInverted {\n  border-color: var(--inverted-color-background);\n}");export{e as default};
+var e={tipseenMedia:"tipseenMedia",colorInverted:"colorInverted"};!function(e){const n="s_id-71e151b2b729_4_5_3";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenMedia {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  border: 2px solid var(--primary-color);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  z-index: 1;\n}\n\n.colorInverted {\n  border-color: var(--inverted-color-background);\n}");export{e as default};
 //# sourceMappingURL=TipseenMedia.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenTitle.module.scss.js

@@ -1,2 +1,2 @@
-var e={title:"title"};!function(e){const t="s_id-c12c5d8f6c34_4_5_5";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title {\n  padding-inline-end: var(--space-16);\n  padding-bottom: var(--space-4);\n}");export{e as default};
+var e={title:"title"};!function(e){const t="s_id-c12c5d8f6c34_4_5_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title {\n  padding-inline-end: var(--space-16);\n  padding-bottom: var(--space-4);\n}");export{e as default};
 //# sourceMappingURL=TipseenTitle.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenWizard.module.scss.js

@@ -1,2 +1,2 @@
-var e={tipseenWizard:"tipseenWizard",tipseenWizardWizard:"tipseenWizardWizard"};!function(e){const i="s_id-98eba0c83d1f_4_5_5";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".tipseenWizard {\n  display: flex;\n  flex-direction: column;\n}\n.tipseenWizardWizard {\n  width: 100%;\n}");export{e as default};
+var e={tipseenWizard:"tipseenWizard",tipseenWizardWizard:"tipseenWizardWizard"};!function(e){const i="s_id-98eba0c83d1f_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".tipseenWizard {\n  display: flex;\n  flex-direction: column;\n}\n.tipseenWizardWizard {\n  width: 100%;\n}");export{e as default};
 //# sourceMappingURL=TipseenWizard.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as o}from"es-toolkit";import{getTestId as i,ComponentDefaultTestId as n}from"../../tests/testIds.js";import r from"classnames";import a,{useRef as l,useMemo as s,useCallback as c,useEffect as m}from"react";import{CSSTransition as u}from"react-transition-group";import{Text as d}from"@vibe/typography/mockedClassNames";import{Loader as f}from"@vibe/loader/mockedClassNames";import{Flex as p}from"@vibe/layout/mockedClassNames";import{CloseSmall as v}from"@vibe/icons";import T from"./ToastLink/ToastLink.js";import y from"./ToastButton/ToastButton.js";import{getIcon as h}from"./ToastHelpers.js";import{getStyle as b,NOOP as N}from"@vibe/shared";import g from"./Toast.module.scss.js";import{IconButton as k}from"@vibe/icon-button/mockedClassNames";import E from"../../hooks/usePrevious/index.js";var C=function(C){var j=C.open,x=void 0!==j&&j,O=C.loading,A=void 0!==O&&O,B=C.autoHideDuration,_=void 0===B?null:B,w=C.type,L=void 0===w?"normal":w,S=C.icon,H=C.hideIcon,P=void 0!==H&&H,z=C.action,I=C.actions,D=C.children,R=C.closeable,U=void 0===R||R,q=C.onClose,F=void 0===q?N:q,G=C.className,J=C.id,K=C.closeButtonAriaLabel,M=void 0===K?"Close":K,Q=C["data-testid"],V=l(null),W=l(null),X=E(null==I?void 0:I.length),Y=s((function(){return I?I.filter((function(t){return"link"===t.type})).map((function(t){var o=e(t,["type"]);return a.createElement(T,Object.assign({key:o.href,className:g.actionLink},o))})):null}),[I]),Z=s((function(){return void 0!==X&&(null==I?void 0:I.length)!==X}),[I,X]),$=s((function(){return I?I.filter((function(t){return"button"===t.type})).map((function(o,i){var n=o.content,l=e(o,["type","content"]);return a.createElement(y,Object.assign({key:"alert-button-".concat(i),className:r(g.actionButton,t({},g.withTransition,Z))},l),n)})):null}),[I,Z]),tt=s((function(){return r(g.toast,b(g,o("type-"+L)),G)}),[L,G]),et=c((function(){F&&F()}),[F]),ot=l(),it=c((function(t){F&&null!=t&&(clearTimeout(ot.current),ot.current=setTimeout((function(){et()}),t))}),[et,F]);m((function(){return x&&_>0&&it(_),function(){clearTimeout(ot.current)}}),[x,_,it]);var nt=!P&&h(L,S),rt=c((function(t){var e=t.style.width;t.style.width="auto";var o=getComputedStyle(t).width;t.style.width=e,t.style.width=o}),[]);return m((function(){V.current&&rt(V.current)}),[D,rt]),a.createElement(u,{in:x,nodeRef:W,classNames:{enterActive:g.enterActive,exitActive:g.exitActive},timeout:400,unmountOnExit:!0},a.createElement(d,{ref:W,id:J,"data-testid":Q||i(n.TOAST,J),type:"text2",element:"div",color:"fixedLight",className:tt,role:"alert","aria-live":"polite"},nt&&a.createElement("div",{className:r(g.icon)},nt),a.createElement(p,{align:"center",gap:"large",className:g.content},a.createElement(p,{gap:"medium","data-testid":i(n.TOAST_CONTENT),className:g.textContent},a.createElement("span",null,D),Y),($||z)&&($||z),A&&a.createElement(f,{size:"xs"})),U&&a.createElement(k,{className:r(g.closeButton),onClick:et,size:"small",kind:"tertiary",color:"fixed-light","aria-label":M,"data-testid":i(n.TOAST_CLOSE_BUTTON),icon:v,hideTooltip:!0})))};export{C as default};
+import{slicedToArray as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as o}from"../../../_virtual/_tslib.js";import{camelCase as i}from"es-toolkit";import{getTestId as r,ComponentDefaultTestId as n}from"../../tests/testIds.js";import a from"classnames";import l,{useRef as s,useState as m,useMemo as c,useCallback as u,useEffect as d}from"react";import{createPortal as p}from"react-dom";import{CSSTransition as f}from"react-transition-group";import{Text as v}from"@vibe/typography/mockedClassNames";import{Loader as y}from"@vibe/loader/mockedClassNames";import{Flex as T}from"@vibe/layout/mockedClassNames";import{CloseSmall as h}from"@vibe/icons";import b from"./ToastLink/ToastLink.js";import k from"./ToastButton/ToastButton.js";import{getIcon as N}from"./ToastHelpers.js";import{getStyle as g,NOOP as E}from"@vibe/shared";import x from"./Toast.module.scss.js";import{IconButton as C}from"@vibe/icon-button/mockedClassNames";import{Tooltip as j}from"@vibe/tooltip/mockedClassNames";import A from"../../hooks/usePrevious/index.js";var O=function(O){var B=O.open,_=void 0!==B&&B,w=O.loading,L=void 0!==w&&w,S=O.autoHideDuration,H=void 0===S?null:S,P=O.type,z=void 0===P?"normal":P,I=O.icon,W=O.hideIcon,D=void 0!==W&&W,R=O.action,U=O.actions,q=O.children,F=O.closeable,G=void 0===F||F,J=O.onClose,K=void 0===J?E:J,M=O.className,Q=O.id,V=O.closeButtonAriaLabel,X=void 0===V?"Close":V,Y=O.inline,Z=void 0!==Y&&Y,$=O["data-testid"],tt=s(null),et=s(null),ot=s(null),it=m(!1),rt=t(it,2),nt=rt[0],at=rt[1],lt=A(null==U?void 0:U.length),st=c((function(){return U?U.filter((function(t){return"link"===t.type})).map((function(t){var e=o(t,["type"]);return l.createElement(b,Object.assign({key:e.href,className:x.actionLink},e))})):null}),[U]),mt=c((function(){return void 0!==lt&&(null==U?void 0:U.length)!==lt}),[U,lt]),ct=c((function(){return U?U.filter((function(t){return"button"===t.type})).map((function(t,i){var r=t.content,n=o(t,["type","content"]);return l.createElement(k,Object.assign({key:"alert-button-".concat(i),className:a(x.actionButton,e({},x.withTransition,mt)),color:"dark"===z?"fixed-light":"primary"},n),r)})):null}),[U,mt,z]),ut=c((function(){return a(x.toast,g(x,i("type-"+z)),e({},x.inline,Z),M)}),[z,Z,M]),dt=u((function(){K&&K()}),[K]),pt=s(),ft=u((function(t){K&&null!=t&&(clearTimeout(pt.current),pt.current=setTimeout((function(){dt()}),t))}),[dt,K]);d((function(){return _&&H>0&&ft(H),function(){clearTimeout(pt.current)}}),[_,H,ft]),d((function(){var t=ot.current;t&&at(t.scrollWidth>t.clientWidth)}),[q,_]);var vt=!D&&N(z,I),yt=u((function(t){var e=t.style.width;t.style.width="auto";var o=getComputedStyle(t).width;t.style.width=e,t.style.width=o}),[]);d((function(){tt.current&&yt(tt.current)}),[q,yt]);var Tt=l.createElement(j,{content:nt&&"string"==typeof q?q:void 0,position:"top"},l.createElement(v,{ref:et,id:Q,"data-testid":$||r(n.TOAST,Q),type:"text2",element:"div",color:"dark"===z?"fixedLight":"primary",className:ut,role:"alert","aria-live":"polite"},vt&&l.createElement("div",{className:a(x.icon)},vt),l.createElement(T,{align:"center",gap:"medium",className:x.content},l.createElement(T,{gap:"medium","data-testid":r(n.TOAST_CONTENT),className:x.textContent},l.createElement("span",{ref:ot,className:x.message},q),st),(ct||R)&&(ct||R),L&&l.createElement(y,{size:"xs"})),G&&l.createElement(C,{className:a(x.closeButton),onClick:dt,size:"xs",kind:"tertiary",color:"dark"===z?"fixed-light":"primary","aria-label":X,"data-testid":r(n.TOAST_CLOSE_BUTTON),icon:h,hideTooltip:!0})));return Z?_?Tt:null:p(l.createElement(f,{in:_,nodeRef:et,classNames:{enterActive:x.enterActive,exitActive:x.exitActive},timeout:400,unmountOnExit:!0},Tt),document.body)};export{O as default};
 //# sourceMappingURL=Toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { Loader } from \"@vibe/loader\";\nimport { Flex } from \"@vibe/layout\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n  /**\n   * The actions available in the toast.\n   */\n  actions?: ToastAction[];\n  /**\n   * If true, the toast is open (visible).\n   */\n  open?: boolean;\n  /**\n   * If true, displays a loading indicator inside the toast.\n   */\n  loading?: boolean;\n  /**\n   * The type of toast.\n   */\n  type?: ToastType;\n  /**\n   * The icon displayed in the toast.\n   */\n  icon?: string | React.FC<IconSubComponentProps> | null;\n  /**\n   * If true, hides the toast icon.\n   */\n  hideIcon?: boolean;\n  /**\n   * The action element displayed in the toast.\n   */\n  action?: JSX.Element;\n  /**\n   * If false, hides the close button.\n   */\n  closeable?: boolean;\n  /**\n   * Callback fired when the toast is closed.\n   */\n  onClose?: () => void;\n  /**\n   * The number of milliseconds before the toast automatically closes.\n   * (0 or null disables auto-close behavior).\n   */\n  autoHideDuration?: number;\n  /**\n   * The content displayed inside the toast.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n  open = false,\n  loading = false,\n  autoHideDuration = null,\n  type = \"normal\",\n  icon,\n  hideIcon = false,\n  action: deprecatedAction,\n  actions,\n  children,\n  closeable = true,\n  onClose = NOOP,\n  className,\n  id,\n  closeButtonAriaLabel = \"Close\",\n  \"data-testid\": dataTestId\n}: ToastProps) => {\n  const ref = useRef(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const prevActions = usePrevious(actions?.length);\n  const toastLinks = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"link\")\n          .map(({ type: _type, ...otherProps }) => (\n            <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n          ))\n      : null;\n  }, [actions]);\n\n  const shouldShowButtonTransition = useMemo(() => {\n    return prevActions !== undefined && actions?.length !== prevActions;\n  }, [actions, prevActions]);\n\n  const toastButtons: JSX.Element[] | null = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"button\")\n          .map(({ type: _type, content, ...otherProps }, index) => (\n            <ToastButton\n              key={`alert-button-${index}`}\n              className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n              {...otherProps}\n            >\n              {content}\n            </ToastButton>\n          ))\n      : null;\n  }, [actions, shouldShowButtonTransition]);\n\n  const classNames = useMemo(\n    () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n    [type, className]\n  );\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose();\n    }\n  }, [onClose]);\n\n  /* Timer */\n  const timerAutoHide = useRef<NodeJS.Timeout>();\n  const setAutoHideTimer = useCallback(\n    (duration: number) => {\n      if (!onClose || duration == null) {\n        return;\n      }\n\n      clearTimeout(timerAutoHide.current);\n      timerAutoHide.current = setTimeout(() => {\n        handleClose();\n      }, duration);\n    },\n    [handleClose, onClose]\n  );\n\n  useEffect(() => {\n    if (open && autoHideDuration > 0) {\n      setAutoHideTimer(autoHideDuration);\n    }\n\n    return () => {\n      clearTimeout(timerAutoHide.current);\n    };\n  }, [open, autoHideDuration, setAutoHideTimer]);\n\n  const iconElement = !hideIcon && getIcon(type, icon);\n\n  // https://n12v.com/css-transition-to-from-auto/\n  const recalculateElementWidth = useCallback((element: HTMLElement) => {\n    const prevWidth = element.style.width;\n    element.style.width = \"auto\";\n    const endWidth = getComputedStyle(element).width;\n    element.style.width = prevWidth;\n    element.offsetWidth; // force repaint\n    element.style.width = endWidth;\n  }, []);\n\n  useEffect(() => {\n    if (ref.current) {\n      recalculateElementWidth(ref.current);\n    }\n  }, [children, recalculateElementWidth]);\n\n  return (\n    <CSSTransition\n      in={open}\n      nodeRef={nodeRef}\n      classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n      timeout={400}\n      unmountOnExit\n    >\n      <Text\n        ref={nodeRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}\n        type=\"text2\"\n        element=\"div\"\n        color=\"fixedLight\"\n        className={classNames}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n        <Flex align=\"center\" gap=\"large\" className={styles.content}>\n          <Flex\n            gap=\"medium\"\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n            className={styles.textContent}\n          >\n            <span>{children}</span>\n            {toastLinks}\n          </Flex>\n          {(toastButtons || deprecatedAction) && (toastButtons || deprecatedAction)}\n          {loading && <Loader size=\"xs\" />}\n        </Flex>\n        {closeable && (\n          <IconButton\n            className={cx(styles.closeButton)}\n            onClick={handleClose}\n            size=\"small\"\n            kind=\"tertiary\"\n            color=\"fixed-light\"\n            aria-label={closeButtonAriaLabel}\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n            icon={CloseSmall}\n            hideTooltip\n          />\n        )}\n      </Text>\n    </CSSTransition>\n  );\n};\n\nexport default Toast;\n"],"names":["Toast","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","dataTestId","ref","useRef","nodeRef","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","Text","getTestId","ComponentDefaultTestId","TOAST","color","role","Flex","align","gap","TOAST_CONTENT","textContent","Loader","size","IconButton","closeButton","onClick","kind","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { Loader } from \"@vibe/loader\";\nimport { Flex } from \"@vibe/layout\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n  /**\n   * The actions available in the toast.\n   */\n  actions?: ToastAction[];\n  /**\n   * If true, the toast is open (visible).\n   */\n  open?: boolean;\n  /**\n   * If true, displays a loading indicator inside the toast.\n   */\n  loading?: boolean;\n  /**\n   * The type of toast.\n   */\n  type?: ToastType;\n  /**\n   * The icon displayed in the toast.\n   */\n  icon?: string | React.FC<IconSubComponentProps> | null;\n  /**\n   * If true, hides the toast icon.\n   */\n  hideIcon?: boolean;\n  /**\n   * The action element displayed in the toast.\n   */\n  action?: JSX.Element;\n  /**\n   * If false, hides the close button.\n   */\n  closeable?: boolean;\n  /**\n   * Callback fired when the toast is closed.\n   */\n  onClose?: () => void;\n  /**\n   * The number of milliseconds before the toast automatically closes.\n   * (0 or null disables auto-close behavior).\n   */\n  autoHideDuration?: number;\n  /**\n   * The content displayed inside the toast.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * If true, renders the toast in place (for gallery previews) instead of fixed at the top.\n   */\n  inline?: boolean;\n}\n\nconst Toast = ({\n  open = false,\n  loading = false,\n  autoHideDuration = null,\n  type = \"normal\",\n  icon,\n  hideIcon = false,\n  action: deprecatedAction,\n  actions,\n  children,\n  closeable = true,\n  onClose = NOOP,\n  className,\n  id,\n  closeButtonAriaLabel = \"Close\",\n  inline = false,\n  \"data-testid\": dataTestId\n}: ToastProps) => {\n  const ref = useRef(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const messageRef = useRef<HTMLSpanElement>(null);\n  const [isMessageTruncated, setIsMessageTruncated] = useState(false);\n  const prevActions = usePrevious(actions?.length);\n  const toastLinks = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"link\")\n          .map(({ type: _type, ...otherProps }) => (\n            <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n          ))\n      : null;\n  }, [actions]);\n\n  const shouldShowButtonTransition = useMemo(() => {\n    return prevActions !== undefined && actions?.length !== prevActions;\n  }, [actions, prevActions]);\n\n  const toastButtons: JSX.Element[] | null = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"button\")\n          .map(({ type: _type, content, ...otherProps }, index) => (\n            <ToastButton\n              key={`alert-button-${index}`}\n              className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n              color={type === \"dark\" ? \"fixed-light\" : \"primary\"}\n              {...otherProps}\n            >\n              {content}\n            </ToastButton>\n          ))\n      : null;\n  }, [actions, shouldShowButtonTransition, type]);\n\n  const classNames = useMemo(\n    () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), { [styles.inline]: inline }, className),\n    [type, inline, className]\n  );\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose();\n    }\n  }, [onClose]);\n\n  /* Timer */\n  const timerAutoHide = useRef<NodeJS.Timeout>();\n  const setAutoHideTimer = useCallback(\n    (duration: number) => {\n      if (!onClose || duration == null) {\n        return;\n      }\n\n      clearTimeout(timerAutoHide.current);\n      timerAutoHide.current = setTimeout(() => {\n        handleClose();\n      }, duration);\n    },\n    [handleClose, onClose]\n  );\n\n  useEffect(() => {\n    if (open && autoHideDuration > 0) {\n      setAutoHideTimer(autoHideDuration);\n    }\n\n    return () => {\n      clearTimeout(timerAutoHide.current);\n    };\n  }, [open, autoHideDuration, setAutoHideTimer]);\n\n  useEffect(() => {\n    const el = messageRef.current;\n    if (el) {\n      setIsMessageTruncated(el.scrollWidth > el.clientWidth);\n    }\n  }, [children, open]);\n\n  const iconElement = !hideIcon && getIcon(type, icon);\n\n  // https://n12v.com/css-transition-to-from-auto/\n  const recalculateElementWidth = useCallback((element: HTMLElement) => {\n    const prevWidth = element.style.width;\n    element.style.width = \"auto\";\n    const endWidth = getComputedStyle(element).width;\n    element.style.width = prevWidth;\n    element.offsetWidth; // force repaint\n    element.style.width = endWidth;\n  }, []);\n\n  useEffect(() => {\n    if (ref.current) {\n      recalculateElementWidth(ref.current);\n    }\n  }, [children, recalculateElementWidth]);\n\n  const tooltipContent = isMessageTruncated && typeof children === \"string\" ? children : undefined;\n\n  const toastElement = (\n    <Tooltip content={tooltipContent} position=\"top\">\n      <Text\n        ref={nodeRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}\n        type=\"text2\"\n        element=\"div\"\n        color={type === \"dark\" ? \"fixedLight\" : \"primary\"}\n        className={classNames}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n        <Flex align=\"center\" gap=\"medium\" className={styles.content}>\n          <Flex\n            gap=\"medium\"\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n            className={styles.textContent}\n          >\n            <span ref={messageRef} className={styles.message}>\n              {children}\n            </span>\n            {toastLinks}\n          </Flex>\n          {(toastButtons || deprecatedAction) && (toastButtons || deprecatedAction)}\n          {loading && <Loader size=\"xs\" />}\n        </Flex>\n        {closeable && (\n          <IconButton\n            className={cx(styles.closeButton)}\n            onClick={handleClose}\n            size=\"xs\"\n            kind=\"tertiary\"\n            color={type === \"dark\" ? \"fixed-light\" : \"primary\"}\n            aria-label={closeButtonAriaLabel}\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n            icon={CloseSmall}\n            hideTooltip\n          />\n        )}\n      </Text>\n    </Tooltip>\n  );\n\n  // Gallery / static previews: render in place, skip enter/exit animation.\n  if (inline) {\n    return open ? toastElement : null;\n  }\n\n  // Portal to body so Toast always stacks above app chrome (search, sticky headers).\n  return createPortal(\n    <CSSTransition\n      in={open}\n      nodeRef={nodeRef}\n      classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n      timeout={400}\n      unmountOnExit\n    >\n      {toastElement}\n    </CSSTransition>,\n    document.body\n  );\n};\n\nexport default Toast;\n"],"names":["Toast","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$inline","inline","dataTestId","ref","useRef","nodeRef","messageRef","_useState","useState","_useState2","_slicedToArray","isMessageTruncated","setIsMessageTruncated","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","color","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","el","scrollWidth","clientWidth","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","toastElement","Tooltip","position","Text","getTestId","ComponentDefaultTestId","TOAST","role","Flex","align","gap","TOAST_CONTENT","textContent","message","Loader","size","IconButton","closeButton","onClick","kind","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip","createPortal","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","document","body"],"mappings":"ojCA+EA,IAAMA,EAAQ,SAAHC,GAiBM,IAAAC,EAAAD,EAhBfE,KAAAA,OAAO,IAAHD,GAAQA,EAAAE,EAAAH,EACZI,QAAAA,OAAU,IAAHD,GAAQA,EAAAE,EAAAL,EACfM,iBAAAA,OAAmB,IAAHD,EAAG,KAAIA,EAAAE,EAAAP,EACvBQ,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAIT,EAAJS,KAAIC,EAAAV,EACJW,SAAAA,OAAW,IAAHD,GAAQA,EACRE,EAAgBZ,EAAxBa,OACAC,EAAOd,EAAPc,QACAC,EAAQf,EAARe,SAAQC,EAAAhB,EACRiB,UAAAA,OAAY,IAAHD,GAAOA,EAAAE,EAAAlB,EAChBmB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EACdG,EAASrB,EAATqB,UACAC,EAAEtB,EAAFsB,GAAEC,EAAAvB,EACFwB,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAAAE,EAAAzB,EAC9B0B,OAAAA,OAAS,IAAHD,GAAQA,EACCE,EAAU3B,EAAzB,eAEM4B,GAAMC,EAAO,MACbC,GAAUD,EAAuB,MACjCE,GAAaF,EAAwB,MAC3CG,GAAoDC,GAAS,GAAMC,GAAAC,EAAAH,GAAA,GAA5DI,GAAkBF,GAAA,GAAEG,GAAqBH,GAAA,GAC1CI,GAAcC,EAAYzB,aAAO,EAAPA,EAAS0B,QACnCC,GAAaC,GAAQ,WACzB,OAAO5B,EACHA,EACG6B,QAAO,SAAA9B,GAAM,MAAoB,SAAhBA,EAAOL,IAAe,IACvCoC,KAAI,SAACC,GAAkBC,IAAAA,EAAUC,EAAAF,EAA5B,UAAmC,OACvCG,EAACC,cAAAC,iBAAUC,IAAKL,EAAWM,KAAM/B,UAAWgC,EAAOC,YAAgBR,GACpE,IACH,IACN,GAAG,CAAChC,IAEEyC,GAA6Bb,GAAQ,WACzC,YAAuBc,IAAhBlB,KAA6BxB,aAAO,EAAPA,EAAS0B,UAAWF,EAC1D,GAAG,CAACxB,EAASwB,KAEPmB,GAAqCf,GAAQ,WACjD,OAAO5B,EACHA,EACG6B,QAAO,SAAA9B,GAAM,MAAoB,WAAhBA,EAAOL,IAAiB,IACzCoC,KAAI,SAACC,EAAyCa,OAA1BC,IAAAA,QAAYb,EAA3BC,EAAAF,EAAA,CAAA,OAAA,YAAmD,OACvDG,gBAACY,EAAWC,OAAAC,OAAA,CACVX,IAAGY,gBAAAA,OAAkBL,GACrBrC,UAAW2C,EAAGX,EAAOY,aAAYC,EAAA,CAAA,EAAKb,EAAOc,eAAiBZ,KAC9Da,MAAgB,SAAT5D,EAAkB,cAAgB,WACrCsC,GAEHa,EAEJ,IACH,IACL,GAAE,CAAC7C,EAASyC,GAA4B/C,IAEnC6D,GAAa3B,GACjB,WAAA,OAAMsB,EAAGX,EAAOiB,MAAOC,EAASlB,EAAQmB,EAAU,QAAUhE,IAAM0D,EAAKb,CAAAA,EAAAA,EAAO3B,OAASA,GAAUL,EAAU,GAC3G,CAACb,EAAMkB,EAAQL,IAGXoD,GAAcC,GAAY,WAC1BvD,GACFA,GAEJ,GAAG,CAACA,IAGEwD,GAAgB9C,IAChB+C,GAAmBF,GACvB,SAACG,GACM1D,GAAuB,MAAZ0D,IAIhBC,aAAaH,GAAcI,SAC3BJ,GAAcI,QAAUC,YAAW,WACjCP,IACD,GAAEI,GACL,GACA,CAACJ,GAAatD,IAGhB8D,GAAU,WAKR,OAJI/E,GAAQI,EAAmB,GAC7BsE,GAAiBtE,GAGZ,WACLwE,aAAaH,GAAcI,SAE9B,GAAE,CAAC7E,EAAMI,EAAkBsE,KAE5BK,GAAU,WACR,IAAMC,EAAKnD,GAAWgD,QAClBG,GACF7C,GAAsB6C,EAAGC,YAAcD,EAAGE,YAE9C,GAAG,CAACrE,EAAUb,IAEd,IAAMmF,IAAe1E,GAAY2E,EAAQ9E,EAAMC,GAGzC8E,GAA0Bb,GAAY,SAACc,GAC3C,IAAMC,EAAYD,EAAQE,MAAMC,MAChCH,EAAQE,MAAMC,MAAQ,OACtB,IAAMC,EAAWC,iBAAiBL,GAASG,MAC3CH,EAAQE,MAAMC,MAAQF,EAEtBD,EAAQE,MAAMC,MAAQC,CACvB,GAAE,IAEHX,GAAU,WACJrD,GAAImD,SACNQ,GAAwB3D,GAAImD,QAEhC,GAAG,CAAChE,EAAUwE,KAEd,IAEMO,GACJ9C,EAAAC,cAAC8C,EAAO,CAACpC,QAHYvB,IAA0C,iBAAbrB,EAAwBA,OAAWyC,EAGnDwC,SAAS,OACzChD,EAACC,cAAAgD,GACCrE,IAAKE,GACLR,GAAIA,EACS,cAAAK,GAAcuE,EAAUC,EAAuBC,MAAO9E,GACnEd,KAAK,QACLgF,QAAQ,MACRpB,MAAgB,SAAT5D,EAAkB,aAAe,UACxCa,UAAWgD,GACXgC,KAAK,QAAO,YACF,UAEThB,IAAerC,EAAAC,cAAA,MAAA,CAAK5B,UAAW2C,EAAGX,EAAO5C,OAAQ4E,IAClDrC,EAAAC,cAACqD,EAAI,CAACC,MAAM,SAASC,IAAI,SAASnF,UAAWgC,EAAOM,SAClDX,EAAAC,cAACqD,EACC,CAAAE,IAAI,uBACSN,EAAUC,EAAuBM,eAC9CpF,UAAWgC,EAAOqD,aAElB1D,EAAMC,cAAA,OAAA,CAAArB,IAAKG,GAAYV,UAAWgC,EAAOsD,SACtC5F,GAEF0B,KAEDgB,IAAgB7C,KAAsB6C,IAAgB7C,GACvDR,GAAW4C,gBAAC4D,EAAM,CAACC,KAAK,QAE1B5F,GACC+B,EAAAC,cAAC6D,EAAU,CACTzF,UAAW2C,EAAGX,EAAO0D,aACrBC,QAASvC,GACToC,KAAK,KACLI,KAAK,WACL7C,MAAgB,SAAT5D,EAAkB,cAAgB,UAC7B,aAAAgB,EACC,cAAA0E,EAAUC,EAAuBe,oBAC9CzG,KAAM0G,EACNC,aAAW,MAQrB,OAAI1F,EACKxB,EAAO4F,GAAe,KAIxBuB,EACLrE,EAAAC,cAACqE,EACC,CAAAC,GAAIrH,EACJ4B,QAASA,GACTuC,WAAY,CAAEmD,YAAanE,EAAOmE,YAAaC,WAAYpE,EAAOoE,YAClEC,QAAS,IACTC,eAAa,GAEZ7B,IAEH8B,SAASC,KAEb"}

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

@@ -1,2 +1,2 @@
-var n={toast:"toast",typeNormal:"typeNormal",typePositive:"typePositive",typeNegative:"typeNegative",typeWarning:"typeWarning",closeButton:"closeButton",actionButton:"actionButton",actionLink:"actionLink",typeDark:"typeDark",icon:"icon",withTransition:"withTransition",bounceIn:"bounceIn",content:"content",textContent:"textContent",enterActive:"enterActive",slideIn:"slideIn",exitActive:"exitActive",slideOut:"slideOut"};!function(n){const t="s_id-da2ee7919891_4_5_5";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const e=document.createElement("style");e.id=t,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".toast {\n  box-shadow: var(--box-shadow-medium);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  margin: var(--space-16);\n  position: fixed;\n  left: 50%;\n  top: 0;\n  margin-inline: auto;\n  padding: var(--space-8);\n  align-items: center;\n  display: flex;\n  min-width: 200px;\n  width: auto;\n  border-radius: var(--border-radius-small);\n  color: var(--fixed-light-color);\n  transform: translateX(-50%);\n  transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n}\n.toast.typeNormal {\n  background-color: var(--primary-color);\n}\n.toast.typePositive {\n  background-color: var(--positive-color);\n}\n.toast.typeNegative {\n  background-color: var(--negative-color);\n}\n.toast.typeWarning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .closeButton {\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .actionButton,\n.toast.typeWarning .actionLink {\n  color: var(--fixed-dark-color);\n  border-color: var(--fixed-dark-color);\n}\n.toast.typeDark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .closeButton {\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .actionButton,\n.toast.typeDark .actionLink {\n  color: var(--text-color-on-inverted);\n  border-color: var(--text-color-on-inverted);\n}\n.icon {\n  display: flex;\n  margin-inline-start: var(--space-8);\n}\n.actionButton.withTransition {\n  opacity: 0;\n  animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n  animation-delay: 300ms;\n  animation-fill-mode: forwards;\n}\n.content {\n  margin: 0 var(--space-8);\n  flex: 1;\n}\n.textContent {\n  display: inline-flex;\n  flex-grow: 1;\n}\n.enterActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideIn;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.exitActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideOut;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.closeButton {\n  margin-inline-start: var(--space-8);\n}\n@keyframes slideIn {\n  0% {\n    transform: translate(-50%, -100px);\n  }\n  40% {\n    transform: translate(-50%, 16px);\n  }\n  100% {\n    transform: translate(-50%, 0px);\n  }\n}\n@keyframes slideOut {\n  0% {\n    transform: translate(-50%, 0);\n  }\n  100% {\n    transform: translate(-50%, -100px);\n    opacity: 0;\n  }\n}\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}");export{n as default};
+var n={toast:"toast",typeNormal:"typeNormal",typePositive:"typePositive",typeNegative:"typeNegative",typeWarning:"typeWarning",typeDark:"typeDark",closeButton:"closeButton",actionButton:"actionButton",actionLink:"actionLink",inline:"inline",icon:"icon",withTransition:"withTransition",bounceIn:"bounceIn",content:"content",textContent:"textContent",message:"message",enterActive:"enterActive",slideIn:"slideIn",exitActive:"exitActive",slideOut:"slideOut"};!function(n){const t="s_id-ab40fcaec88b_4_5_3";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const e=document.createElement("style");e.id=t,o.firstChild?o.insertBefore(e,o.firstChild):o.appendChild(e),e.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".toast {\n  box-shadow: var(--box-shadow-medium);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  margin: var(--space-16);\n  position: fixed;\n  left: 50%;\n  top: 0;\n  margin-inline: auto;\n  padding: var(--space-12);\n  align-items: center;\n  display: flex;\n  gap: var(--space-12);\n  min-width: 200px;\n  max-width: 700px;\n  width: auto;\n  border-radius: var(--border-radius-medium);\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-color);\n  z-index: 100000;\n  transform: translateX(-50%);\n  transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n}\n.toast.typeNormal, .toast.typePositive, .toast.typeNegative, .toast.typeWarning {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n.toast.typeDark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .closeButton {\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .actionButton,\n.toast.typeDark .actionLink {\n  color: var(--text-color-on-inverted);\n  border-color: var(--text-color-on-inverted);\n}\n.toast.inline {\n  position: relative;\n  left: auto;\n  top: auto;\n  transform: none;\n  margin: 0;\n  max-width: 100%;\n  width: 100%;\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--space-24);\n  height: var(--space-24);\n  min-width: var(--space-24);\n  min-height: var(--space-24);\n  border-radius: 50%;\n  overflow: hidden;\n  background-color: var(--allgrey-background-color);\n  color: var(--primary-text-color);\n}\n.icon svg {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  fill: currentColor;\n}\n\n.typePositive .icon {\n  background-color: var(--positive-color);\n  color: var(--text-color-on-primary);\n}\n\n.typeNegative .icon {\n  background-color: var(--negative-color);\n  color: var(--text-color-on-primary);\n}\n\n.typeWarning .icon {\n  background-color: var(--warning-color);\n  color: var(--text-color-on-primary);\n}\n\n.typeDark .icon {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.actionButton {\n  flex-shrink: 0;\n}\n\n.actionButton.withTransition {\n  opacity: 0;\n  animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n  animation-delay: 300ms;\n  animation-fill-mode: forwards;\n}\n\n.actionLink {\n  flex-shrink: 0;\n}\n\n.content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.textContent {\n  display: flex;\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  align-items: center;\n}\n\n.message {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.enterActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideIn;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n\n.exitActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideOut;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n\n.closeButton {\n  flex-shrink: 0;\n  margin: 0;\n}\n\n@keyframes slideIn {\n  0% {\n    transform: translate(-50%, -100px);\n  }\n  40% {\n    transform: translate(-50%, 16px);\n  }\n  100% {\n    transform: translate(-50%, 0px);\n  }\n}\n@keyframes slideOut {\n  0% {\n    transform: translate(-50%, 0);\n  }\n  100% {\n    transform: translate(-50%, -100px);\n    opacity: 0;\n  }\n}\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}");export{n as default};
 //# sourceMappingURL=Toast.module.scss.js.map

package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../../_virtual/_tslib.js";import{Button as s}from"@vibe/button/mockedClassNames";import a from"react";import{ComponentDefaultTestId as e}from"../../../tests/constants.js";import{getTestId as i}from"../../../tests/testIds.js";var r=function(r){var m=r.className,o=r.id,d=r["data-testid"],l=t(r,["className","id","data-testid"]);return a.createElement(s,Object.assign({},l,{id:o,kind:"secondary",marginLeft:!1,"data-testid":d||i(e.TOAST_BUTTON,o),className:m,size:"small",color:"fixed-light"}))};export{r as default};
+import{__rest as t}from"../../../../_virtual/_tslib.js";import{Button as s}from"@vibe/button/mockedClassNames";import a from"react";import{ComponentDefaultTestId as r}from"../../../tests/constants.js";import{getTestId as e}from"../../../tests/testIds.js";var o=function(o){var i=o.className,m=o.id,d=o["data-testid"],c=o.color,l=void 0===c?"primary":c,n=t(o,["className","id","data-testid","color"]);return a.createElement(s,Object.assign({},n,{id:m,kind:"secondary",marginLeft:!1,"data-testid":d||e(r.TOAST_BUTTON,m),className:i,size:"xs",color:l}))};export{o as default};
 //# sourceMappingURL=ToastButton.js.map