npm - @vibe/core - Versions diffs - 3.87.0 → 4.0.0-alpha.1 - Mend

@vibe/core 3.87.0 → 4.0.0-alpha.1

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 (2022) hide show

package/dist/src/components/Tabs/TabPanels/TabPanels.js.map CHANGED Viewed

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

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

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

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

@@ -1,2 +1,2 @@
-var e={textAreaWrapper:"textAreaWrapper_4e1e8bcfda",label:"label_fca03fe98c",required:"required_0ca4595246",subTextContainer:"subTextContainer_bb4deaeb00",helpText:"helpText_56c388f2ea",limitText:"limitText_220c2f776d",textArea:"textArea_918941293c",small:"small_fdd61d9bc2",large:"large_d08dccd8c6",resize:"resize_93e9240c4e",success:"success_3d9f1916fc",error:"error_b2c0137bf8",disabled:"disabled_0ca4595246",readOnly:"readOnly_0ca4595246"};!function(e){const r="s_id-c3fc7910bb37_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_4e1e8bcfda {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--spacing-xs);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_4e1e8bcfda .label_fca03fe98c {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .label_fca03fe98c.required_0ca4595246::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 .helpText_56c388f2ea {\n  display: flex;\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 .limitText_220c2f776d {\n  margin-left: auto;\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--spacing-small) var(--spacing-medium);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:active, .textAreaWrapper_4e1e8bcfda .textArea_918941293c:focus, .textAreaWrapper_4e1e8bcfda .textArea_918941293c:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c.small_fdd61d9bc2 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c.large_d08dccd8c6 {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:not(.resize_93e9240c4e) {\n  resize: none;\n}\n.textAreaWrapper_4e1e8bcfda.success_3d9f1916fc .textArea_918941293c {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_4e1e8bcfda.success_3d9f1916fc .helpText_56c388f2ea {\n  color: var(--color-success);\n}\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .textArea_918941293c {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .helpText_56c388f2ea,\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .limitText_220c2f776d {\n  color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .textArea_918941293c,\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .textArea_918941293c:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .helpText_56c388f2ea {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_4e1e8bcfda.readOnly_0ca4595246 .textArea_918941293c,\n.textAreaWrapper_4e1e8bcfda.readOnly_0ca4595246 .textArea_918941293c:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
+var e={textAreaWrapper:"textAreaWrapper_911914bb4b",label:"label_3c39f983c2",required:"required_be03671890",subTextContainer:"subTextContainer_bc720eda4f",helpText:"helpText_bf1b42cbe2",limitText:"limitText_f94d49ab3c",textArea:"textArea_ac3c3850e2",small:"small_aabc6bf00c",large:"large_65b687902f",resize:"resize_7b9b2a2423",success:"success_389915cc00",error:"error_d3f9255b6f",disabled:"disabled_be03671890",readOnly:"readOnly_be03671890"};!function(e){const r="s_id-48d7f417273f_4_0_0-alpha_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_911914bb4b {\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_911914bb4b .label_3c39f983c2 {\n  display: inline-flex;\n  gap: var(--space-4);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_911914bb4b .label_3c39f983c2.required_be03671890::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_911914bb4b .subTextContainer_bc720eda4f {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_911914bb4b .subTextContainer_bc720eda4f .helpText_bf1b42cbe2 {\n  display: flex;\n}\n.textAreaWrapper_911914bb4b .subTextContainer_bc720eda4f .limitText_f94d49ab3c {\n  margin-inline-start: auto;\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2 {\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_911914bb4b .textArea_ac3c3850e2::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2:active, .textAreaWrapper_911914bb4b .textArea_ac3c3850e2:focus, .textAreaWrapper_911914bb4b .textArea_ac3c3850e2:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2.small_aabc6bf00c {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2.large_65b687902f {\n  padding: var(--space-12);\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_911914bb4b .textArea_ac3c3850e2:not(.resize_7b9b2a2423) {\n  resize: none;\n}\n.textAreaWrapper_911914bb4b.success_389915cc00 .textArea_ac3c3850e2 {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_911914bb4b.success_389915cc00 .helpText_bf1b42cbe2 {\n  color: var(--color-success);\n}\n.textAreaWrapper_911914bb4b.error_d3f9255b6f .textArea_ac3c3850e2 {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_911914bb4b.error_d3f9255b6f .helpText_bf1b42cbe2,\n.textAreaWrapper_911914bb4b.error_d3f9255b6f .limitText_f94d49ab3c {\n  color: var(--color-error);\n}\n.textAreaWrapper_911914bb4b.disabled_be03671890 .textArea_ac3c3850e2,\n.textAreaWrapper_911914bb4b.disabled_be03671890 .textArea_ac3c3850e2:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_911914bb4b.disabled_be03671890 .textArea_ac3c3850e2::placeholder,\n.textAreaWrapper_911914bb4b.disabled_be03671890 .textArea_ac3c3850e2:hover::placeholder {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_911914bb4b.disabled_be03671890 .helpText_bf1b42cbe2 {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_911914bb4b.readOnly_be03671890 .textArea_ac3c3850e2,\n.textAreaWrapper_911914bb4b.readOnly_be03671890 .textArea_ac3c3850e2: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/src/components/TextField/TextField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as s,useEffect as c}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../FieldLabel/FieldLabel.js";import{TextFieldFeedbackState as u,TextFieldTextType as p,FEEDBACK_CLASSES as v,SIZE_MAPPER as f,TextFieldAriaLabel as b}from"./TextFieldConstants.js";import{BASE_SIZES as C}from"../../constants/sizes.js";import x from"../../hooks/useMergeRef.js";import{getTestId as y}from"../../tests/testIds.js";import{NOOP as E}from"../../utils/function-utils.js";import{ComponentDefaultTestId as T,ComponentVibeId as h}from"../../tests/constants.js";import{withStaticProps as N}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import g from"./TextField.module.scss.js";import I from"../HiddenText/HiddenText.js";import j from"../../../components/loader/dist/Loader/Loader.js";import F from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import L from"../../../components/clickable/dist/Clickable/Clickable.js";import k from"../../../components/icon/dist/Icon/Icon.js";import D from"../../../components/typography/dist/Text/Text.js";var w={primary:"",secondary:""},H=N(n((function(n,u){var p=n.className,C=void 0===p?"":p,N=n.placeholder,H=void 0===N?"":N,A=n.autoComplete,S=void 0===A?"off":A,_=n.value,q=n.onChange,R=void 0===q?E:q,W=n.onBlur,z=void 0===W?E:W,B=n.onFocus,O=void 0===B?E:B,K=n.onKeyDown,M=void 0===K?E:K,P=n.onWheel,V=void 0===P?E:P,X=n.debounceRate,U=void 0===X?0:X,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,oe=void 0===ee?E:ee,te=n.iconName,ae=n.secondaryIconName,ne=n.id,re=void 0===ne?"input":ne,ie=n.title,le=void 0===ie?"":ie,se=n.size,ce=void 0===se?"small":se,de=n.validation,me=void 0===de?null:de,ue=n.wrapperClassName,pe=void 0===ue?"":ue,ve=n.onIconClick,fe=void 0===ve?E:ve,be=n.clearOnIconClick,Ce=void 0!==be&&be,xe=n.labelIconName,ye=n.showCharCount,Ee=void 0!==ye&&ye,Te=n.inputAriaLabel,he=n.searchResultsContainerId,Ne=void 0===he?"":he,ge=n.activeDescendant,Ie=void 0===ge?"":ge,je=n.iconsNames,Fe=void 0===je?w:je,Le=n.type,ke=void 0===Le?"text":Le,De=n.maxLength,we=void 0===De?null:De,He=n.allowExceedingMaxLength,Ae=void 0!==He&&He,Se=n.trim,_e=void 0!==Se&&Se,qe=n.role,Re=void 0===qe?"":qe,We=n.required,ze=void 0!==We&&We,Be=n.requiredErrorText,Oe=void 0===Be?"":Be,Ke=n.loading,Me=void 0!==Ke&&Ke,Pe=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Ue=n.underline,Ye=void 0!==Ue&&Ue,Ge=n.name,Je=n.controlled,Qe=void 0!==Je&&Je,Ze=n.iconTooltipContent,$e=n.secondaryTooltipContent,eo=n.dir,oo=r(!1),to=e(oo,2),ao=to[0],no=to[1],ro=i(null),io=x(u,ro,oe),lo=l((function(e){ze&&!e.target.value&&no(!0),z(e)}),[z,ze]),so=l((function(e,o){ao&&e&&no(!1),R(e,o||{target:ro.current})}),[R,ao]),co=d({delay:U,onChange:so,initialStateValue:_,trim:_e}),mo=co.inputValue,uo=co.onEventChanged,po=co.clearValue,vo=s((function(){return Qe?_:mo}),[Qe,_,mo]),fo=l((function(e){Qe?so(e.target.value,e):uo(e)}),[Qe,so,uo]),bo=s((function(){return ae&&vo?ae:te}),[te,ae,vo]),Co=l((function(){Q||(Ce&&(ro.current&&ro.current.focus(),ro.current.value="",Qe?so(""):po()),fe(bo))}),[Q,Ce,fe,bo,Qe,so,po]),xo=s((function(){return"number"==typeof we&&vo&&vo.length>we?v.error:me&&me.status||ao?v[ao?"error":me.status]:""}),[we,me,ao,vo]),yo=te||ae,Eo=Ee||me&&me.text||ao&&Oe,To=ae===bo,ho=te===bo,No=(fe!==E||Fe.primary||Ze)&&vo&&te.length&&ho,go=(ae||$e)&&To&&!!vo,Io=Ae?"".concat(re,"-allow-exceeding-max-length-text"):void 0;c((function(){if((null==ro?void 0:ro.current)&&G){var e=requestAnimationFrame((function(){return ro.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[ro,G]);var jo=fe!==E||Ce,Fo=Fe.primary||Ze,Lo=Fe.secondary||$e;return a.createElement("div",{className:t(g.textField,pe,o(o({},g.disabled,Q),g.onlyUnderline,Ye)),role:Re,"aria-busy":Me},a.createElement("div",{className:t(g.labelWrapper)},a.createElement(m,{labelText:le,icon:xe,labelFor:re,required:ze}),a.createElement("div",{className:t(g.inputWrapper,f[ce],xo)},a.createElement("input",{className:t(C,g.input,o(o({},g.inputHasIcon,!!yo),g.readOnly,$)),placeholder:H,autoComplete:S,value:vo,onChange:fo,disabled:Q,readOnly:$,ref:io,type:ke,id:re,"data-testid":Pe||y(T.TEXT_FIELD,re),"data-vibe":h.TEXT_FIELD,name:Ge,onBlur:lo,onFocus:O,onKeyDown:M,onWheel:V,maxLength:"number"!=typeof we||Ae?void 0:we,role:Ne&&"combobox","aria-label":Te||H,"aria-invalid":me&&"error"===me.status||ao,"aria-owns":Ne,"aria-activedescendant":Ie,"aria-required":ze,"aria-describedby":Io,required:ze,tabIndex:Xe,dir:eo}),Me&&a.createElement("div",{className:t(g.loaderContainer,o({},g.loaderContainerHasIcon,yo))},a.createElement("div",{className:t(g.loader)},a.createElement(j,{className:t(g.loaderSvg)}))),te&&a.createElement(F,{content:ho?Ze:void 0,referenceWrapperClassName:g.tooltipContainer},a.createElement(L,{className:t(g.iconContainer,o(o(o({},g.iconContainerHasIcon,yo),g.iconContainerActive,ho),g.iconContainerClickable,jo)),onClick:Co,tabIndex:No?"0":"-1",ariaLabel:Fo},a.createElement(k,{icon:te,className:t(g.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"}))),ae&&a.createElement(F,{content:To?$e:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:g.tooltipContainer},a.createElement(L,{className:t(g.iconContainer,o(o(o({},g.iconContainerHasIcon,yo),g.iconContainerActive,To),g.iconContainerClickable,jo)),onClick:Co,tabIndex:go?"0":"-1","data-testid":Ve||y(T.TEXT_FIELD_SECONDARY_BUTTON,re),ariaLabel:Lo},a.createElement(k,{icon:ae,className:t(g.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"})))),Eo&&a.createElement(D,{type:"text2",color:"secondary",className:t(g.subTextContainer)},(me&&me.text||ao&&Oe)&&a.createElement("span",{className:t(g.subTextContainerStatus)},ao?Oe:me.text),Ee&&a.createElement("span",{className:t(g.counter),"aria-label":b.CHAR},vo&&vo.length||0,"number"==typeof we&&"/".concat(we),a.createElement(I,{id:Io,text:"Maximum of ".concat(we," characters")})))))})),{sizes:C,feedbacks:u,types:p});export{H as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import a,{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 m from"../FieldLabel/FieldLabel.js";import{FEEDBACK_CLASSES as u,SIZE_MAPPER as p,TextFieldAriaLabel as v}from"./TextFieldConstants.js";import f from"../../hooks/useMergeRef.js";import{getTestId as b}from"../../tests/testIds.js";import{NOOP as C}from"../../utils/function-utils.js";import{ComponentDefaultTestId as x,ComponentVibeId as E}from"../../tests/constants.js";import y from"./TextField.module.scss.js";import T from"../HiddenText/HiddenText.js";import g from"../../../components/loader/dist/Loader/Loader.js";import h from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import N from"../../../components/clickable/dist/Clickable/Clickable.js";import I from"../../../components/icon/dist/Icon/Icon.js";import j from"../../../components/typography/dist/Text/Text.js";var F=n((function(n,F){var L=n.className,k=void 0===L?"":L,D=n.placeholder,H=void 0===D?"":D,w=n.autoComplete,A=void 0===w?"off":w,_=n.value,q=n.onChange,R=void 0===q?C:q,W=n.onBlur,B=void 0===W?C:W,O=n.onFocus,S=void 0===O?C:O,z=n.onKeyDown,K=void 0===z?C:z,M=n.onWheel,V=void 0===M?C:M,X=n.debounceRate,P=void 0===X?0:X,U=n.autoFocus,Y=void 0!==U&&U,G=n.disabled,J=void 0!==G&&G,Q=n.readonly,Z=void 0!==Q&&Q,$=n.setRef,ee=void 0===$?C:$,te=n.icon,oe=n.secondaryIconName,ae=n.id,ne=void 0===ae?"input":ae,re=n.title,ie=void 0===re?"":re,le=n.size,ce=void 0===le?"small":le,se=n.validation,de=void 0===se?null:se,me=n.wrapperClassName,ue=void 0===me?"":me,pe=n.onIconClick,ve=void 0===pe?C:pe,fe=n.clearOnIconClick,be=void 0!==fe&&fe,Ce=n.labelIconName,xe=n.showCharCount,Ee=void 0!==xe&&xe,ye=n.inputAriaLabel,Te=n.searchResultsContainerId,ge=void 0===Te?"":Te,he=n.activeDescendant,Ne=void 0===he?"":he,Ie=n.iconLabel,je=n.secondaryIconLabel,Fe=n.type,Le=void 0===Fe?"text":Fe,ke=n.maxLength,De=void 0===ke?null:ke,He=n.allowExceedingMaxLength,we=void 0!==He&&He,Ae=n.trim,_e=void 0!==Ae&&Ae,qe=n.role,Re=void 0===qe?"":qe,We=n.required,Be=void 0!==We&&We,Oe=n.requiredErrorText,Se=void 0===Oe?"":Oe,ze=n.loading,Ke=void 0!==ze&&ze,Me=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Pe=n.underline,Ue=void 0!==Pe&&Pe,Ye=n.name,Ge=n.controlled,Je=void 0!==Ge&&Ge,Qe=n.iconTooltipContent,Ze=n.secondaryTooltipContent,$e=n.dir,et=r(!1),tt=e(et,2),ot=tt[0],at=tt[1],nt=i(null),rt=f(F,nt,ee),it=l((function(e){Be&&!e.target.value&&at(!0),B(e)}),[B,Be]),lt=l((function(e,t){ot&&e&&at(!1),R(e,t||{target:nt.current})}),[R,ot]),ct=d({delay:P,onChange:lt,initialStateValue:_,trim:_e}),st=ct.inputValue,dt=ct.onEventChanged,mt=ct.clearValue,ut=c((function(){return Je?_:st}),[Je,_,st]),pt=l((function(e){Je?lt(e.target.value,e):dt(e)}),[Je,lt,dt]),vt=c((function(){return oe&&ut?oe:te}),[te,oe,ut]),ft=l((function(){J||(be&&(nt.current&&nt.current.focus(),nt.current.value="",Je?lt(""):mt()),ve(vt))}),[J,be,ve,vt,Je,lt,mt]),bt=c((function(){return"number"==typeof De&&ut&&ut.length>De?u.error:de&&de.status||ot?u[ot?"error":de.status]:""}),[De,de,ot,ut]),Ct=te||oe,xt=Ee||de&&de.text||ot&&Se,Et=oe===vt,yt=te===vt,Tt=(ve!==C||Ie||Qe)&&ut&&te.length&&yt,gt=(oe||Ze)&&Et&&!!ut,ht=we?"".concat(ne,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==nt?void 0:nt.current)&&Y){var e=requestAnimationFrame((function(){return nt.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[nt,Y]);var Nt=ve!==C||be,It=Ie||Qe,jt=je||Ze;return a.createElement("div",{className:o(y.textField,ue,t(t({},y.disabled,J),y.onlyUnderline,Ue)),role:Re,"aria-busy":Ke},a.createElement("div",{className:o(y.labelWrapper)},a.createElement(m,{labelText:ie,icon:Ce,labelFor:ne,required:Be}),a.createElement("div",{className:o(y.inputWrapper,p[ce],bt)},a.createElement("input",{className:o(k,y.input,t(t({},y.inputHasIcon,!!Ct),y.readOnly,Z)),placeholder:H,autoComplete:A,value:ut,onChange:pt,disabled:J,readOnly:Z,ref:rt,type:Le,id:ne,"data-testid":Me||b(x.TEXT_FIELD,ne),"data-vibe":E.TEXT_FIELD,name:Ye,onBlur:it,onFocus:S,onKeyDown:K,onWheel:V,maxLength:"number"!=typeof De||we?void 0:De,role:ge&&"combobox","aria-label":ye||H,"aria-invalid":de&&"error"===de.status||ot,"aria-owns":ge,"aria-activedescendant":Ne,"aria-required":Be,"aria-describedby":ht,required:Be,tabIndex:Xe,dir:$e}),Ke&&a.createElement("div",{className:o(y.loaderContainer,t({},y.loaderContainerHasIcon,Ct))},a.createElement("div",{className:o(y.loader)},a.createElement(g,{className:o(y.loaderSvg)}))),te&&a.createElement(h,{content:yt?Qe:void 0,referenceWrapperClassName:y.tooltipContainer},a.createElement(N,{className:o(y.iconContainer,t(t(t({},y.iconContainerHasIcon,Ct),y.iconContainerActive,yt),y.iconContainerClickable,Nt)),onClick:ft,tabIndex:Tt?0:-1,"aria-label":It},a.createElement(I,{icon:te,className:o(y.icon),type:"font",size:"small"===ce?"16px":"18px"}))),oe&&a.createElement(h,{content:Et?Ze:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:y.tooltipContainer},a.createElement(N,{className:o(y.iconContainer,t(t(t({},y.iconContainerHasIcon,Ct),y.iconContainerActive,Et),y.iconContainerClickable,Nt)),onClick:ft,tabIndex:gt?0:-1,"data-testid":Ve||b(x.TEXT_FIELD_SECONDARY_BUTTON,ne),"aria-label":jt},a.createElement(I,{icon:oe,className:o(y.icon),type:"font",size:"small"===ce?"16px":"18px"})))),xt&&a.createElement(j,{type:"text2",color:"secondary",className:o(y.subTextContainer)},(de&&de.text||ot&&Se)&&a.createElement("span",{className:o(y.subTextContainerStatus)},ot?Se:de.text),Ee&&a.createElement("span",{className:o(y.counter),"aria-label":v.CHAR},ut&&ut.length||0,"number"==typeof De&&"/".concat(De),a.createElement(T,{id:ht,text:"Maximum of ".concat(De," characters")})))))}));export{F as default};
 //# sourceMappingURL=TextField.js.map

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

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

@@ -1,2 +1,2 @@
-var e={textField:"textField_4f62bbeb26",labelWrapper:"labelWrapper_52e696d131",subTextContainer:"subTextContainer_ff7e7939a2",counter:"counter_220c2f776d",disabled:"disabled_85ab5a3286",icon:"icon_d38ffa37a2",inputWrapper:"inputWrapper_d38ffa37a2",input:"input_50a42041c1",iconContainer:"iconContainer_532169b854",iconContainerHasIcon:"iconContainerHasIcon_61e37e9fa4",readOnly:"readOnly_1185aab6dd",inputHover:"inputHover_1f28cce40a",inputActive:"inputActive_ffbc64a61c",inputHasIcon:"inputHasIcon_7cac8f06f4",round:"round_178cb70965",square:"square_ee04c0b90f",onlyUnderline:"onlyUnderline_471a970628",tooltipContainer:"tooltipContainer_e9911ff628",wrapperSizeMedium:"wrapperSizeMedium_490ab6a6d1",wrapperSizeLarge:"wrapperSizeLarge_ebce8c69cb",iconContainerActive:"iconContainerActive_a984066d7f",iconContainerClickable:"iconContainerClickable_21feb48bf0",inputErrorValidation:"inputErrorValidation_61e37e9fa4",subTextContainerStatus:"subTextContainerStatus_6e5c7daf55",inputSuccessValidation:"inputSuccessValidation_2ade96737b",wrapperSizeSmall:"wrapperSizeSmall_a6d70071e2",inputWrapperSizeSmall:"inputWrapperSizeSmall_40e4a79ac2",loaderContainer:"loaderContainer_17a6ce22a2",loaderContainerHasIcon:"loaderContainerHasIcon_d75bbca069",loader:"loader_36b18da324",loaderSvg:"loaderSvg_bb4deaeb00"};!function(e){const n="s_id-695413f4db8e_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField_4f62bbeb26 {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_4f62bbeb26 * {\n  box-sizing: border-box;\n}\n.textField_4f62bbeb26 .labelWrapper_52e696d131 {\n  width: 100%;\n}\n.textField_4f62bbeb26 .subTextContainer_ff7e7939a2 {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField_4f62bbeb26 .subTextContainer_ff7e7939a2 .counter_220c2f776d {\n  margin-left: auto;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .icon_d38ffa37a2 {\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 {\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .input_50a42041c1 {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .input_50a42041c1::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4:hover {\n  background-color: transparent;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 {\n  width: 100%;\n  position: relative;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1 {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.readOnly_1185aab6dd {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputHover_1f28cce40a {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1:active,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputActive_ffbc64a61c {\n  border-color: var(--primary-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.round_178cb70965 {\n  border-radius: 50px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.square_ee04c0b90f {\n  border-radius: 0;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.onlyUnderline_471a970628 {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .tooltipContainer_e9911ff628 {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .tooltipContainer_e9911ff628 {\n  width: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .tooltipContainer_e9911ff628 {\n  width: 46px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0 {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f.iconContainerHasIcon_61e37e9fa4:not(.iconContainerClickable_21feb48bf0) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f {\n  opacity: 1;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f .icon_d38ffa37a2 {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4:hover .input_50a42041c1 {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1 {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1:active {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .iconContainer_532169b854 .icon_d38ffa37a2:hover {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 + .subTextContainer_ff7e7939a2 .subTextContainerStatus_6e5c7daf55,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 + .subTextContainer_ff7e7939a2 .counter_220c2f776d {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b:hover .input_50a42041c1 {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1 {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1:active {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .iconContainer_532169b854 .icon_d38ffa37a2 {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .iconContainer_532169b854 .icon_d38ffa37a2:hover {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b + .subTextContainer_ff7e7939a2 .subTextContainerStatus_6e5c7daf55 {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeSmall_a6d70071e2 {\n  height: 32px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeSmall_a6d70071e2 .input_50a42041c1 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputWrapperSizeSmall_40e4a79ac2 .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: var(--spacing-xs);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 {\n  height: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: 4px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854 {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854:hover + .iconContainer_532169b854 + .input_50a42041c1 {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb {\n  height: 48px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: var(--spacing-xs);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .iconContainer_532169b854 {\n  height: 40px;\n  width: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2:hover .input_50a42041c1 {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2.loaderContainerHasIcon_d75bbca069 {\n  right: 32px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 .loader_36b18da324 {\n  width: 16px;\n  height: 16px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 .loader_36b18da324 .loaderSvg_bb4deaeb00 {\n  color: var(--secondary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .iconContainer_532169b854 .icon_d38ffa37a2 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{e as default};
+var n={textField:"textField_60bd2f02cb",labelWrapper:"labelWrapper_daa57fe039",subTextContainer:"subTextContainer_859f48bab2",counter:"counter_f94d49ab3c",disabled:"disabled_62d2888009",icon:"icon_7488c3d043",inputWrapper:"inputWrapper_7488c3d043",input:"input_8bf4a333fc",iconContainer:"iconContainer_ab2246aff2",iconContainerHasIcon:"iconContainerHasIcon_8454601789",readOnly:"readOnly_2617cd252e",inputHover:"inputHover_d8ee19e599",inputActive:"inputActive_95f14e00c2",inputHasIcon:"inputHasIcon_f4667eede6",round:"round_e18b1257e4",square:"square_f7f631e22e",onlyUnderline:"onlyUnderline_0333cd6099",tooltipContainer:"tooltipContainer_a70fd25edd",wrapperSizeMedium:"wrapperSizeMedium_9c1663d113",wrapperSizeLarge:"wrapperSizeLarge_72a680d12a",iconContainerActive:"iconContainerActive_9f9a371e7c",iconContainerClickable:"iconContainerClickable_21f1caa5f6",inputErrorValidation:"inputErrorValidation_8454601789",subTextContainerStatus:"subTextContainerStatus_be7d39d570",inputSuccessValidation:"inputSuccessValidation_45bc927daa",wrapperSizeSmall:"wrapperSizeSmall_c92c01e5c1",inputWrapperSizeSmall:"inputWrapperSizeSmall_9fd33687d0",loaderContainer:"loaderContainer_a02ecff80b",loaderContainerHasIcon:"loaderContainerHasIcon_cdc0551ea4",loader:"loader_3b69fb47b4",loaderSvg:"loaderSvg_bc720eda4f"};!function(n){const e="s_id-c26ff539ba97_4_0_0-alpha_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField_60bd2f02cb {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_60bd2f02cb * {\n  box-sizing: border-box;\n}\n.textField_60bd2f02cb .labelWrapper_daa57fe039 {\n  width: 100%;\n}\n.textField_60bd2f02cb .subTextContainer_859f48bab2 {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField_60bd2f02cb .subTextContainer_859f48bab2 .counter_f94d49ab3c {\n  margin-inline-start: auto;\n}\n.textField_60bd2f02cb.disabled_62d2888009 .icon_7488c3d043 {\n  cursor: not-allowed;\n}\n.textField_60bd2f02cb.disabled_62d2888009 .inputWrapper_7488c3d043 {\n  cursor: not-allowed;\n}\n.textField_60bd2f02cb.disabled_62d2888009 .inputWrapper_7488c3d043 .input_8bf4a333fc {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField_60bd2f02cb.disabled_62d2888009 .inputWrapper_7488c3d043 .input_8bf4a333fc::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_60bd2f02cb.disabled_62d2888009 .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerHasIcon_8454601789:hover {\n  background-color: transparent;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 {\n  width: 100%;\n  position: relative;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.readOnly_2617cd252e {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.inputHover_d8ee19e599 {\n  border-color: var(--primary-text-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc:focus,\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc:active,\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.inputActive_95f14e00c2 {\n  border-color: var(--primary-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.inputHasIcon_f4667eede6 {\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.round_e18b1257e4 {\n  border-radius: 50px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.square_f7f631e22e {\n  border-radius: 0;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .input_8bf4a333fc.onlyUnderline_0333cd6099 {\n  border-inline: none;\n  border-top: none;\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);\n  border-radius: 0 !important;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .tooltipContainer_a70fd25edd {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .tooltipContainer_a70fd25edd {\n  width: 40px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .tooltipContainer_a70fd25edd {\n  width: 46px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2 {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerActive_9f9a371e7c.iconContainerHasIcon_8454601789.iconContainerClickable_21f1caa5f6 {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerActive_9f9a371e7c.iconContainerHasIcon_8454601789:not(.iconContainerClickable_21f1caa5f6) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerActive_9f9a371e7c {\n  opacity: 1;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerActive_9f9a371e7c .icon_7488c3d043 {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerHasIcon_8454601789.iconContainerClickable_21f1caa5f6:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2.iconContainerHasIcon_8454601789.iconContainerClickable_21f1caa5f6:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .iconContainer_ab2246aff2 .icon_7488c3d043 {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789:hover .input_8bf4a333fc {\n  border-color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 .input_8bf4a333fc {\n  border-color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 .input_8bf4a333fc:focus,\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 .input_8bf4a333fc:active {\n  border-color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 .iconContainer_ab2246aff2 .icon_7488c3d043 {\n  color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 .iconContainer_ab2246aff2 .icon_7488c3d043:hover {\n  color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 + .subTextContainer_859f48bab2 .subTextContainerStatus_be7d39d570,\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputErrorValidation_8454601789 + .subTextContainer_859f48bab2 .counter_f94d49ab3c {\n  color: var(--negative-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa:hover .input_8bf4a333fc {\n  border-color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa .input_8bf4a333fc {\n  border-color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa .input_8bf4a333fc:focus,\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa .input_8bf4a333fc:active {\n  border-color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa .iconContainer_ab2246aff2 .icon_7488c3d043 {\n  color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa .iconContainer_ab2246aff2 .icon_7488c3d043:hover {\n  color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputSuccessValidation_45bc927daa + .subTextContainer_859f48bab2 .subTextContainerStatus_be7d39d570 {\n  color: var(--positive-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeSmall_c92c01e5c1 {\n  height: 32px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeSmall_c92c01e5c1 .input_8bf4a333fc {\n  padding-inline-start: var(--space-8);\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.inputWrapperSizeSmall_9fd33687d0 .input_8bf4a333fc.inputHasIcon_f4667eede6.onlyUnderline_0333cd6099 {\n  padding-inline-start: var(--space-4);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 {\n  height: 40px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .input_8bf4a333fc {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .input_8bf4a333fc.inputHasIcon_f4667eede6 {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .input_8bf4a333fc.inputHasIcon_f4667eede6.onlyUnderline_0333cd6099 {\n  padding-inline-start: 4px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .iconContainer_ab2246aff2 {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .iconContainer_ab2246aff2:hover + .iconContainer_ab2246aff2 + .input_8bf4a333fc {\n  border-color: var(--primary-text-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a {\n  height: 48px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .input_8bf4a333fc {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .input_8bf4a333fc.inputHasIcon_f4667eede6 {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .input_8bf4a333fc.inputHasIcon_f4667eede6.onlyUnderline_0333cd6099 {\n  padding-inline-start: var(--space-4);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .iconContainer_ab2246aff2 {\n  height: 40px;\n  width: 40px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043:hover .input_8bf4a333fc {\n  border-color: var(--primary-text-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .loaderContainer_a02ecff80b {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .loaderContainer_a02ecff80b.loaderContainerHasIcon_cdc0551ea4 {\n  inset-inline-end: 32px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .loaderContainer_a02ecff80b .loader_3b69fb47b4 {\n  width: 16px;\n  height: 16px;\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043 .loaderContainer_a02ecff80b .loader_3b69fb47b4 .loaderSvg_bc720eda4f {\n  color: var(--secondary-text-color);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeMedium_9c1663d113 .iconContainer_ab2246aff2 .icon_7488c3d043 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_60bd2f02cb .inputWrapper_7488c3d043.wrapperSizeLarge_72a680d12a .iconContainer_ab2246aff2 .icon_7488c3d043 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{n as default};
 //# sourceMappingURL=TextField.module.scss.js.map

package/dist/src/components/TextField/TextFieldConstants.js CHANGED Viewed

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

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

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

package/dist/src/components/TextWithHighlight/TextWithHighlight.js CHANGED Viewed

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

package/dist/src/components/TextWithHighlight/TextWithHighlight.js.map CHANGED Viewed

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

package/dist/src/components/TextWithHighlight/TextWithHighlight.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={textWithHighlightWrapper:"textWithHighlightWrapper_9c5356c5d4",highlightText:"highlightText_70a7c02175",withEllipsis:"withEllipsis_c31022697c"};!function(e){const t="s_id-42c1fd2afe36_3_86_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.textWithHighlightWrapper_9c5356c5d4 {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.textWithHighlightWrapper_9c5356c5d4 em.highlightText_70a7c02175 {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n.textWithHighlightWrapper_9c5356c5d4.withEllipsis_c31022697c {\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_ebc3ee0cbb",highlightText:"highlightText_56887da768",withEllipsis:"withEllipsis_baa231bd60"};!function(e){const t="s_id-42c1fd2afe36_4_0_0-alpha_0";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.textWithHighlightWrapper_ebc3ee0cbb {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.textWithHighlightWrapper_ebc3ee0cbb em.highlightText_56887da768 {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n.textWithHighlightWrapper_ebc3ee0cbb.withEllipsis_baa231bd60 {\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/src/components/ThemeProvider/ThemeProvider.js CHANGED Viewed

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

package/dist/src/components/ThemeProvider/ThemeProvider.js.map CHANGED Viewed

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

package/dist/src/components/ThemeProvider/ThemeProviderConstants.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";var o,e;!function(r){r.LIGHT="light",r.DARK="dark",r.BLACK="black"}(o||(o={})),function(r){r.primaryColor="primary-color",r.primaryHoverColor="primary-hover-color",r.primarySelectedColor="primary-selected-color",r.primarySelectedHoverColor="primary-selected-hover-color",r.primarySelectedOnSecondaryColor="primary-selected-on-secondary-color",r.textColorOnPrimary="text-color-on-primary",r.brandColor="brand-color",r.brandHoverColor="brand-hover-color",r.brandSelectedColor="brand-selected-color",r.brandSelectedHoverColor="brand-selected-hover-color",r.textColorOnBrand="text-color-on-brand"}(e||(e={}));var l=r(r(r({},o.LIGHT,"light-app-theme"),o.DARK,"dark-app-theme"),o.BLACK,"black-app-theme");export{o as SystemTheme,l as SystemThemeClassMap,e as ThemeColor};
+var a={light:"light-app-theme",dark:"dark-app-theme",black:"black-app-theme"};export{a as SystemThemeClassMap};
 //# sourceMappingURL=ThemeProviderConstants.js.map

package/dist/src/components/ThemeProvider/ThemeProviderConstants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProviderConstants.js","sources":["../../../../src/components/ThemeProvider/ThemeProviderConstants.ts"],"sourcesContent":["~~/*\n~~ ~~System~~ ~~themes: dark~~, ~~light,~~ ~~black\n~~ /\n/\n @deprecated\n /\nexport enum SystemTheme {\n LIGHT = \"light\",\n DARK = \"dark\",\n BLACK = \"black\"\n}~~\n\n/\n~~ ~~Colors which are eligible for theming~~\~~n /\n/\n @deprecated\n /\nexport enum ThemeColor {\n primaryColor = \~~"~~primary-color~~\",\n ~~primaryHoverColor =~~ \"primary-hover-color\",\n primarySelectedColor = \"primary-selected-color\",\n primarySelectedHoverColor = \"primary-selected-hover-color\",\n primarySelectedOnSecondaryColor = \"primary-selected-on-secondary-color\",\n textColorOnPrimary = \"text-color-on-primary\",\n brandColor = \"brand-color\",\n brandHoverColor = \"brand-hover-color\",\n brandSelectedColor = \"brand-selected-color\",\n brandSelectedHoverColor = \"brand-selected-hover-color\",\n textColorOnBrand = \"text-color-on-brand\"\n}\n\nexport type Theme = {\n /\n The name of the theme - name of css class that will be added to the children - should be unique\n */\n name: string;\n colors: SystemThemeColorMap;\n};\n\ntype SystemThemeColorMap = {\n [key in SystemTheme]?: ThemeColorTokenValueMap;\n};\n\nexport type ThemeColorTokenValueMap = ThemeColorTokenValue \| ThemeCustomClassValue;\n\nexport type ThemeColorTokenValue = {\n [key in ThemeColor]?: string;\n};\n\ntype ThemeCustomClassValue = {\n [key: string]: ThemeColorTokenValue \| ThemeCustomClassValue;\n};\n\nexport const SystemThemeClassMap: SystemThemeClassMapType = {\n ~~[SystemTheme.LIGHT]~~: \"light-app-theme\",\n ~~[SystemTheme.DARK]~~: \"dark-app-theme\",\n ~~[SystemTheme.BLACK]~~: \"black-app-theme\"\n};\n\ntype SystemThemeClassMapType = {\n [key in SystemTheme]: string;\n};\n"],"names":["~~SystemTheme","ThemeColor","~~SystemThemeClassMap","~~_defineProperty~~","~~LIGHT~~","~~DARK~~"~~,"BLACK"~~],"mappings":"~~oFAMYA~~,~~EAYAC~~,~~GAZZ~~,~~SAAYD~~,~~GACVA~~,~~EAAA~~,~~MAAA~~,~~QACAA~~,EAAA,KAAA,OACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAQD,SAAYC,GACVA,EAAA,aAAA,gBACAA,EAAA,kBAAA,sBACAA,EAAA,qBAAA,yBACAA,EAAA,0BAAA,+BACAA,EAAA,gCAAA,sCACAA,EAAA,mBAAA,wBACAA,EAAA,WAAA,cACAA,EAAA,gBAAA,oBACAA,EAAA,mBAAA,uBACAA,EAAA,wBAAA,6BACAA,EAAA,iBAAA,qBACD,CAZD,CAAYA,IAAAA,EAYX,CAAA,IAwBM,IAAMC,EAAmBC,EAAAA,EAAAA,EAAA,CAAA,EAC7BH,EAAYI,MAAQ,mBACpBJ,EAAYK,KAAO,kBACnBL,EAAYM,MAAQ"}
1	+ {"version":3,"file":"ThemeProviderConstants.js","sources":["../../../../src/components/ThemeProvider/ThemeProviderConstants.ts"],"sourcesContent":["import { type SystemTheme, type ThemeColor } from \"./ThemeProvider.types\";\n\nexport type Theme = {\n /*\n The name of the theme - name of css class that will be added to the children - should be unique\n */\n name: string;\n colors: SystemThemeColorMap;\n};\n\ntype SystemThemeColorMap = {\n [key in SystemTheme]?: ThemeColorTokenValueMap;\n};\n\nexport type ThemeColorTokenValueMap = ThemeColorTokenValue \| ThemeCustomClassValue;\n\nexport type ThemeColorTokenValue = {\n [key in ThemeColor]?: string;\n};\n\ntype ThemeCustomClassValue = {\n [key: string]: ThemeColorTokenValue \| ThemeCustomClassValue;\n};\n\nexport const SystemThemeClassMap: SystemThemeClassMapType = {\n light: \"light-app-theme\",\n dark: \"dark-app-theme\",\n black: \"black-app-theme\"\n};\n\ntype SystemThemeClassMapType = {\n [key in SystemTheme]: string;\n};\n"],"names":["SystemThemeClassMap","light","dark","black"],"mappings":"AAwBO,IAAMA,EAA+C,CAC1DC,MAAO,kBACPC,KAAM,iBACNC,MAAO"}

package/dist/src/components/Tipseen/Tipseen.js CHANGED Viewed

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