npm - @vibe/core - Versions diffs - 4.6.0-alpha-8cfcb.0 → 4.6.0-alpha-3c271.0 - Mend

@vibe/core 4.6.0-alpha-8cfcb.0 → 4.6.0-alpha-3c271.0

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

Files changed (865) hide show

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

@@ -1,2 +1,2 @@
-var n={tabWrapper:"tabWrapper",stretchedUnderline:"stretchedUnderline",tabInner:"tabInner",tabIcon:"tabIcon",right:"right",tabFocusVisibleInset:"tabFocusVisibleInset",active:"active",disabled:"disabled"};!function(n){const e="s_id-7d880f6274c5_4_5_3";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper {\n  position: relative;\n  display: inline-block;\n  padding-left: 0;\n  padding-right: 0;\n  border: none;\n  color: var(--secondary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n}\n.tabWrapper.stretchedUnderline {\n  border-bottom: 0;\n}\n\n/* Selected stroke is rendered once on TabList (slide-transition) */\n.tabWrapper:after {\n  display: none;\n}\n\n.tabWrapper .tabInner {\n  /* Leaves 2px gap + 2px underline within the list height */\n  height: calc(100% - 4px);\n  width: fit-content;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 8px;\n  border-radius: 8px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 0;\n  cursor: pointer;\n  color: var(--secondary-text-color);\n}\n\n.tabWrapper .tabInner:focus {\n  outline: none;\n}\n\n.tabWrapper .tabInner .tabIcon {\n  color: var(--secondary-text-color);\n  margin-right: var(--spacing-small);\n}\n\n.tabWrapper .tabInner .tabIcon.right {\n  margin-right: 0;\n  margin-left: var(--spacing-small);\n}\n\n.tabWrapper.tabFocusVisibleInset {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n\n.tabWrapper.active {\n  color: var(--primary-text-color);\n}\n.tabWrapper.active .tabInner {\n  color: var(--primary-text-color);\n}\n.tabWrapper.active .tabInner .tabIcon {\n  color: var(--primary-text-color);\n}\n\n.tabWrapper.disabled .tabInner {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.tabWrapper.disabled .tabInner .tabIcon {\n  color: var(--disabled-text-color);\n}\n\n.tabWrapper:not(.disabled):not(.active) .tabInner:hover {\n  border-radius: 8px;\n  background-color: var(--primary-background-hover-color);\n  color: var(--primary-text-color);\n}\n.tabWrapper:not(.disabled):not(.active) .tabInner:hover .tabIcon {\n  color: var(--primary-text-color);\n}\n\n.tabWrapper.active:not(.disabled) .tabInner:hover {\n  border-radius: 8px;\n  background-color: var(--primary-background-hover-color);\n  color: var(--primary-text-color);\n}");export{n as default};
+var n={tabWrapper:"tabWrapper",stretchedUnderline:"stretchedUnderline",tabInner:"tabInner",tabIcon:"tabIcon",right:"right",tabFocusVisibleInset:"tabFocusVisibleInset",active:"active",disabled:"disabled"};!function(n){const e="s_id-7d880f6274c5_4_5_10";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper {\n  position: relative;\n  display: inline-block;\n  padding-left: 0;\n  padding-right: 0;\n  border: none;\n  color: var(--secondary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n}\n.tabWrapper.stretchedUnderline {\n  border-bottom: 0;\n}\n\n/* Selected stroke is rendered once on TabList (slide-transition) */\n.tabWrapper:after {\n  display: none;\n}\n\n.tabWrapper .tabInner {\n  /* Leaves 2px gap + 2px underline within the list height */\n  height: calc(100% - 4px);\n  width: fit-content;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 8px;\n  border-radius: 8px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 0;\n  cursor: pointer;\n  color: var(--secondary-text-color);\n}\n\n.tabWrapper .tabInner:focus {\n  outline: none;\n}\n\n.tabWrapper .tabInner .tabIcon {\n  color: var(--secondary-text-color);\n  margin-right: var(--spacing-small);\n}\n\n.tabWrapper .tabInner .tabIcon.right {\n  margin-right: 0;\n  margin-left: var(--spacing-small);\n}\n\n.tabWrapper.tabFocusVisibleInset {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n\n.tabWrapper.active {\n  color: var(--primary-text-color);\n}\n.tabWrapper.active .tabInner {\n  color: var(--primary-text-color);\n}\n.tabWrapper.active .tabInner .tabIcon {\n  color: var(--primary-text-color);\n}\n\n.tabWrapper.disabled .tabInner {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.tabWrapper.disabled .tabInner .tabIcon {\n  color: var(--disabled-text-color);\n}\n\n.tabWrapper:not(.disabled):not(.active) .tabInner:hover {\n  border-radius: 8px;\n  background-color: var(--primary-background-hover-color);\n  color: var(--primary-text-color);\n}\n.tabWrapper:not(.disabled):not(.active) .tabInner:hover .tabIcon {\n  color: var(--primary-text-color);\n}\n\n.tabWrapper.active:not(.disabled) .tabInner:hover {\n  border-radius: 8px;\n  background-color: var(--primary-background-hover-color);\n  color: var(--primary-text-color);\n}");export{n as default};
 //# sourceMappingURL=Tab.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import n from"classnames";import{camelCase as r}from"es-toolkit";import i,{forwardRef as a,useRef as o,useState as s,useEffect as c,useMemo as l,useCallback as d,useLayoutEffect as u}from"react";import f from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import{useMergeRef as v,getStyle as m,NOOP as p}from"@vibe/shared";import b from"../../../hooks/usePrevious/index.js";import{getTestId as h,ComponentDefaultTestId as y}from"../../../tests/testIds.js";import I from"./TabList.module.scss.js";var g=a((function(a,g){var C=a.className,x=a.id,N=a.onTabChange,T=void 0===N?p:N,w=a.activeTabId,L=void 0===w?0:w,j=a.tabType,k=void 0===j?"Compact":j,E=a.size,B=a.stretchedUnderline,O=void 0!==B&&B,A=a.tabPanelIds,P=void 0===A?[]:A,R=a.children,z=a["data-testid"],S=o(null),U=v(g,S),_=o({}),G=o(null),K=o(null),M=o(!1),W=s(L),H=e(W,2),q=H[0],D=H[1],F=s(!1),J=e(F,2),Q=J[0],V=J[1],X=b(L),Y=b(q);c((function(){L!==X&&L!==q&&D(L)}),[L,X,q,D]),c((function(){var e;void 0!==Y&&Y!==q&&_.current[q]&&(null===(e=_.current[q])||void 0===e||e.focus())}),[q,Y]);var Z=l((function(){var e=new Set;return i.Children.forEach(R,(function(t,n){t.props.disabled&&e.add(n)})),e}),[R]),$=d((function(e){Z.has(e)||(D(e),T&&T(e))}),[T,Z]),ee=d((function(e,t){var n,r=null===(n=R[t].props)||void 0===n?void 0:n.onClick;Z.has(t)||(r&&r(t),$(t))}),[R,Z,$]),te=d((function(e){return R[e]}),[R]),ne=l((function(){return Array.from(Z)}),[Z]),re=f({ref:G,numberOfItemsInLine:null==R?void 0:R.length,itemsCount:null==R?void 0:R.length,getItemByIndex:te,onItemClicked:ee,disabledIndexes:ne,circularNavigation:!0}),ie=re.activeIndex,ae=re.onSelectionAction,oe=b(ie);c((function(){var e;void 0!==ie&&ie>=0&&oe!==ie&&_.current[ie]&&(null===(e=_.current[ie])||void 0===e||e.focus())}),[ie,oe]);var se=d((function(e){var t=S.current,n=K.current,r=_.current[q];if(t&&n&&r){var i=t.getBoundingClientRect(),a=r.getBoundingClientRect(),o=a.left-i.left+t.scrollLeft+4,s=Math.max(0,a.width-8),c="undefined"!=typeof window&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(e&&M.current&&!c)n.style.left="".concat(o,"px"),n.style.width="".concat(s,"px");else{var l=n.style.transition;n.style.transition="none",n.style.left="".concat(o,"px"),n.style.width="".concat(s,"px"),n.style.transition=l}M.current=!0,V(!0)}}),[q]);u((function(){se(!0)}),[q,R,E,k,se]),c((function(){var e=S.current;if(e&&"undefined"!=typeof ResizeObserver){var t=new ResizeObserver((function(){se(!1)}));return t.observe(e),Object.values(_.current).forEach((function(e){e&&t.observe(e)})),function(){return t.disconnect()}}}),[R,se]);var ce=l((function(){return i.Children.map(R,(function(e,t){var r=q===t,a=void 0===ie||0>ie?r:ie===t;return i.cloneElement(e,{value:t,active:r,focus:ie===t,onClick:ae,stretchedUnderline:O,className:n(I.tabListTabWrapper,e.props.className),tabInnerClassName:n(I.tabListTabInner,e.props.tabInnerClassName),tabIndex:a?0:-1,"aria-controls":P[t],ref:function(e){_.current[t]=e}})}))}),[R,q,ie,ae,O,P,x]);return i.createElement("div",{ref:U,className:n(I.tabsWrapper,C,[m(I,r(k))],t({},I.stretchedUnderline,O)),id:x,"data-testid":z||h(y.TAB_LIST,x)},i.createElement("ul",{ref:G,className:n(I.tabsList,[m(I,E)]),role:"tablist"},ce),i.createElement("span",{ref:K,className:n(I.selectedIndicator,t({},I.visible,Q)),"aria-hidden":!0}))}));Object.assign(g,{isTabList:!0});export{g as default};
+import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"classnames";import{camelCase as n}from"es-toolkit";import i,{forwardRef as a,useRef as o,useState as s,useEffect as c,useMemo as l,useCallback as d,useLayoutEffect as u}from"react";import f from"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.js";import{useMergeRef as v,getStyle as m,NOOP as p}from"@vibe/shared";import{usePrevious as b}from"@vibe/hooks";import{getTestId as h,ComponentDefaultTestId as y}from"../../../tests/testIds.js";import I from"./TabList.module.scss.js";var g=a((function(a,g){var C=a.className,w=a.id,N=a.onTabChange,x=void 0===N?p:N,T=a.activeTabId,L=void 0===T?0:T,j=a.tabType,k=void 0===j?"Compact":j,E=a.size,B=a.stretchedUnderline,O=void 0!==B&&B,A=a.tabPanelIds,R=void 0===A?[]:A,z=a.children,P=a["data-testid"],S=o(null),U=v(g,S),_=o({}),G=o(null),K=o(null),M=o(!1),W=o(null),H=s(L),q=e(H,2),D=q[0],F=q[1],J=s(!1),Q=e(J,2),V=Q[0],X=Q[1],Y=b(L),Z=b(D);c((function(){L!==Y&&L!==D&&F(L)}),[L,Y,D,F]),c((function(){var e;void 0!==Z&&Z!==D&&_.current[D]&&(null===(e=_.current[D])||void 0===e||e.focus())}),[D,Z]);var $=l((function(){var e=new Set;return i.Children.forEach(z,(function(t,r){t.props.disabled&&e.add(r)})),e}),[z]),ee=d((function(e){$.has(e)||(F(e),x&&x(e))}),[x,$]),te=d((function(e,t){var r,n=null===(r=z[t].props)||void 0===r?void 0:r.onClick;$.has(t)||(n&&n(t),ee(t))}),[z,$,ee]),re=d((function(e){return z[e]}),[z]),ne=l((function(){return Array.from($)}),[$]),ie=f({ref:G,numberOfItemsInLine:null==z?void 0:z.length,itemsCount:null==z?void 0:z.length,getItemByIndex:re,onItemClicked:te,disabledIndexes:ne,circularNavigation:!0}),ae=ie.activeIndex,oe=ie.onSelectionAction,se=b(ae);c((function(){var e;void 0!==ae&&ae>=0&&se!==ae&&_.current[ae]&&(null===(e=_.current[ae])||void 0===e||e.focus())}),[ae,se]);var ce=d((function(e){var t=S.current,r=K.current,n=_.current[D];if(t&&r&&n){var i=t.getBoundingClientRect(),a=n.getBoundingClientRect(),o=a.left-i.left+t.scrollLeft+4,s=Math.max(0,a.width-8),c=W.current;if(e||!c||c.left!==o||c.width!==s){W.current={left:o,width:s};var l="undefined"!=typeof window&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(e&&M.current&&!l)r.style.left="".concat(o,"px"),r.style.width="".concat(s,"px");else{var d=r.style.transition;r.style.transition="none",r.style.left="".concat(o,"px"),r.style.width="".concat(s,"px"),r.style.transition=d}M.current=!0,X(!0)}else X(!0)}}),[D]),le=o(ce);le.current=ce,u((function(){ce(!0)}),[D,z,E,k,ce]),c((function(){var e=S.current;if(e&&"undefined"!=typeof ResizeObserver){var t=new ResizeObserver((function(){le.current(!1)}));return t.observe(e),Object.values(_.current).forEach((function(e){e&&t.observe(e)})),function(){return t.disconnect()}}}),[z]);var de=l((function(){return i.Children.map(z,(function(e,t){var n=D===t,a=void 0===ae||0>ae?n:ae===t;return i.cloneElement(e,{value:t,active:n,focus:ae===t,onClick:oe,stretchedUnderline:O,className:r(I.tabListTabWrapper,e.props.className),tabInnerClassName:r(I.tabListTabInner,e.props.tabInnerClassName),tabIndex:a?0:-1,"aria-controls":R[t],ref:function(e){_.current[t]=e}})}))}),[z,D,ae,oe,O,R,w]);return i.createElement("div",{ref:U,className:r(I.tabsWrapper,C,[m(I,n(k))],t({},I.stretchedUnderline,O)),id:w,"data-testid":P||h(y.TAB_LIST,w)},i.createElement("ul",{ref:G,className:r(I.tabsList,[m(I,E)]),role:"tablist"},de),i.createElement("span",{ref:K,className:r(I.selectedIndicator,t({},I.visible,V)),"aria-hidden":!0}))}));Object.assign(g,{isTabList:!0});export{g as default};
 //# sourceMappingURL=TabList.js.map

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

	@@ -1 +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 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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"}
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 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 \"@vibe/hooks\";\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 const lastGeometryRef = useRef<{ left: number; width: number } \| null>(null);\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 // A non-animated update that lands on the geometry we already applied would only\n // cancel an in-flight glide. ResizeObserver.observe() always fires one such callback,\n // so bail out unless the target actually moved.\n const lastGeometry = lastGeometryRef.current;\n if (!animate && lastGeometry && lastGeometry.left === toLeft && lastGeometry.width === toWidth) {\n setIndicatorVisible(true);\n return;\n }\n lastGeometryRef.current = { left: toLeft, width: toWidth };\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 // Lets the ResizeObserver stay subscribed across tab changes.\n const updateSelectedIndicatorRef = useRef(updateSelectedIndicator);\n updateSelectedIndicatorRef.current = updateSelectedIndicator;\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 updateSelectedIndicatorRef.current(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]);\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","lastGeometryRef","_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","lastGeometry","prefersReducedMotion","window","matchMedia","matches","style","concat","previousTransition","transition","updateSelectedIndicatorRef","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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+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-1f1ea82925d8_4_5_10";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-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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={tabPanelWrapper:"tabPanelWrapper"};!function(e){const t="s_id-82244d4a2f7b_4_5_10";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 CHANGED Viewed

@@ -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_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};
+var n={tabPanelsWrapper:"tabPanelsWrapper",tabPanel:"tabPanel",animationDirectionRtl:"animationDirectionRtl",animationDirectionLtr:"animationDirectionLtr",active:"active",panelSlideIn:"panelSlideIn"};!function(n){const e="s_id-078bacbdb1e4_4_5_10";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/Tabs/TabsContext/TabsContext.js CHANGED Viewed

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

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

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

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

@@ -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_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};
+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_10";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 CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n ChangeEvent,\n type ChangeEventHandler,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport { 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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"}
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 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 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 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 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\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 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","_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","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","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","Icon","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText"],"mappings":"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"}

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

@@ -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",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-136cfc3f09f2_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: 8px; /* facelift: 8px input radius */\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-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};
+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-136cfc3f09f2_4_5_10";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: 8px; /* facelift: 8px input radius */\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-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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={textWithHighlightWrapper:"textWithHighlightWrapper",highlightText:"highlightText",withEllipsis:"withEllipsis"};!function(e){const t="s_id-42c1fd2afe36_4_5_10";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 CHANGED Viewed

@@ -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_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};
+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_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={tipseenBasicContent:"tipseenBasicContent"};!function(e){const n="s_id-6606edb50944_4_5_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={buttons:"buttons",dismiss:"dismiss"};!function(e){const n="s_id-585bd2f4c510_4_5_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={tipseenMedia:"tipseenMedia",colorInverted:"colorInverted"};!function(e){const n="s_id-71e151b2b729_4_5_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={title:"title"};!function(e){const t="s_id-c12c5d8f6c34_4_5_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+var e={tipseenWizard:"tipseenWizard",tipseenWizardWizard:"tipseenWizardWizard"};!function(e){const i="s_id-98eba0c83d1f_4_5_10";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 CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+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 C from"./Toast.module.scss.js";import{IconButton as x}from"@vibe/icon-button/mockedClassNames";import{Tooltip as j}from"@vibe/tooltip/mockedClassNames";import{usePrevious as A}from"@vibe/hooks";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,z=O.type,I=void 0===z?"normal":z,P=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:C.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(C.actionButton,e({},C.withTransition,mt)),color:"dark"===I?"fixed-light":"primary"},n),r)})):null}),[U,mt,I]),ut=c((function(){return a(C.toast,g(C,i("type-"+I)),e({},C.inline,Z),M)}),[I,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(I,P),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"===I?"fixedLight":"primary",className:ut,role:"alert","aria-live":"polite"},vt&&l.createElement("div",{className:a(C.icon)},vt),l.createElement(T,{align:"center",gap:"medium",className:C.content},l.createElement(T,{gap:"medium","data-testid":r(n.TOAST_CONTENT),className:C.textContent},l.createElement("span",{ref:ot,className:C.message},q),st),(ct||R)&&(ct||R),L&&l.createElement(y,{size:"xs"})),G&&l.createElement(x,{className:a(C.closeButton),onClick:dt,size:"xs",kind:"tertiary",color:"dark"===I?"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:C.enterActive,exitActive:C.exitActive},timeout:400,unmountOnExit:!0},Tt),document.body)};export{O as default};
 //# sourceMappingURL=Toast.js.map