npm - @vibe/core - Versions diffs - 3.82.3 → 3.83.1 - Mend

@vibe/core 3.82.3 → 3.83.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 (960) hide show

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

@@ -1,2 +1,2 @@
-var a={tabPanelsWrapper:"tabPanelsWrapper_d6c30682e2",tabPanel:"tabPanel_d3a4c783ca",animationDirectionRtl:"animationDirectionRtl_7f03c7244b",animationDirectionLtr:"animationDirectionLtr_140bb7c02e",active:"active_7b42f9f051",panelSlideIn:"panelSlideIn_1a9aa71d11"};!function(a){const e="s_id-078bacbdb1e4_3_82_2";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_d6c30682e2 .tabPanel_d3a4c783ca {\n  display: none;\n}\n.tabPanelsWrapper_d6c30682e2 .tabPanel_d3a4c783ca.animationDirectionRtl_7f03c7244b {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_d6c30682e2 .tabPanel_d3a4c783ca.animationDirectionLtr_140bb7c02e {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_d6c30682e2 .tabPanel_d3a4c783ca.active_7b42f9f051 {\n  display: block;\n  animation: panelSlideIn_1a9aa71d11 var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_1a9aa71d11 {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{a as default};
+var e={tabPanelsWrapper:"tabPanelsWrapper_ae7b111976",tabPanel:"tabPanel_156fc82335",animationDirectionRtl:"animationDirectionRtl_2346db5818",animationDirectionLtr:"animationDirectionLtr_083bccc8bf",active:"active_6ec904334f",panelSlideIn:"panelSlideIn_31aba8a56d"};!function(e){const a="s_id-078bacbdb1e4_3_83_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper_ae7b111976 .tabPanel_156fc82335 {\n  display: none;\n}\n.tabPanelsWrapper_ae7b111976 .tabPanel_156fc82335.animationDirectionRtl_2346db5818 {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_ae7b111976 .tabPanel_156fc82335.animationDirectionLtr_083bccc8bf {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_ae7b111976 .tabPanel_156fc82335.active_6ec904334f {\n  display: block;\n  animation: panelSlideIn_31aba8a56d var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_31aba8a56d {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{e as default};
 //# sourceMappingURL=TabPanels.module.scss.js.map

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

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as a}from"../../../_virtual/_tslib.js";import r,{forwardRef as s,useMemo as l,useState as n,useCallback as o}from"react";import i from"classnames";import{getTestId as d}from"../../tests/testIds.js";import{ComponentDefaultTestId as m,ComponentVibeId as c}from"../../tests/constants.js";import u from"./TextArea.module.scss.js";import x from"../Text/Text.js";import p from"../HiddenText/HiddenText.js";import f from"../../../components/layout/dist/Flex/Flex.js";var h={small:3,large:4},g=s((function(s,g){var b=s.size,v=void 0===b?"small":b,T=s.rows,E=s.label,y=s.helpText,j=s.success,w=s.error,A=s.className,C=s["data-testid"],N=s.id,_=s.disabled,z=s.readOnly,L=s.required,O=s.maxLength,q=s.allowExceedingMaxLength,F=s.onChange,H=s.value,M=s.resize,P=void 0===M||M,R=s.showCharCount,X=void 0!==R&&R,B=a(s,["size","rows","label","helpText","success","error","className","data-testid","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","resize","showCharCount"]),I=T||h[v],W=y&&"".concat(N,"-help-text"),k=q&&"".concat(N,"-allow-exceeding-max-length"),D=l((function(){return[W,k].filter((function(e){return!!e})).join(" ")||void 0}),[W,k]),G=n((null==H?void 0:H.length)||0),J=e(G,2),K=J[0],Q=J[1],S=w||"number"==typeof O&&K>O,U=o((function(e){Q(e.target.value.length),null==F||F(e)}),[F]);return r.createElement("div",{className:i(u.textAreaWrapper,t(t(t(t({},u.error,S),u.success,j),u.disabled,_),u.readOnly,z),A),"data-testid":C||d(m.TEXT_AREA,N),"data-vibe":c.TEXT_AREA},E&&r.createElement("label",{className:i(u.label,t({},u.required,L)),htmlFor:N},E),r.createElement("textarea",Object.assign({},B,{id:N,maxLength:"number"!=typeof O||q?void 0:O,ref:g,value:H,disabled:_,readOnly:z,required:L,rows:I,className:i(u.textArea,[u[v]],t({},u.resize,P)),"aria-invalid":S,"aria-describedby":D,onChange:U})),(X||y)&&r.createElement(f,{gap:"xs",justify:"space-between",className:i(u.subTextContainer)},y&&r.createElement(x,{className:i(u.helpText),color:"inherit",id:W},y),X&&r.createElement(r.Fragment,null,r.createElement(x,{className:u.limitText},K,"number"==typeof O&&"/".concat(O)),r.createElement(p,{id:k,text:"".concat(K," out of ").concat(O)}))))}));export{g as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as a}from"../../../_virtual/_tslib.js";import r,{forwardRef as s,useMemo as l,useState as o,useCallback as n}from"react";import i from"classnames";import{getTestId as d}from"../../tests/testIds.js";import{ComponentDefaultTestId as m,ComponentVibeId as c}from"../../tests/constants.js";import u from"./TextArea.module.scss.js";import p from"../HiddenText/HiddenText.js";import x from"../../../components/layout/dist/Flex/Flex.js";import f from"../../../components/typography/dist/Text/Text.js";var h={small:3,large:4},g=s((function(s,g){var b=s.size,v=void 0===b?"small":b,T=s.rows,y=s.label,E=s.helpText,j=s.success,w=s.error,A=s.className,C=s["data-testid"],N=s.id,_=s.disabled,z=s.readOnly,L=s.required,O=s.maxLength,q=s.allowExceedingMaxLength,F=s.onChange,H=s.value,M=s.resize,P=void 0===M||M,R=s.showCharCount,X=void 0!==R&&R,B=a(s,["size","rows","label","helpText","success","error","className","data-testid","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","resize","showCharCount"]),I=T||h[v],W=E&&"".concat(N,"-help-text"),k=q&&"".concat(N,"-allow-exceeding-max-length"),D=l((function(){return[W,k].filter((function(e){return!!e})).join(" ")||void 0}),[W,k]),G=o((null==H?void 0:H.length)||0),J=e(G,2),K=J[0],Q=J[1],S=w||"number"==typeof O&&K>O,U=n((function(e){Q(e.target.value.length),null==F||F(e)}),[F]);return r.createElement("div",{className:i(u.textAreaWrapper,t(t(t(t({},u.error,S),u.success,j),u.disabled,_),u.readOnly,z),A),"data-testid":C||d(m.TEXT_AREA,N),"data-vibe":c.TEXT_AREA},y&&r.createElement("label",{className:i(u.label,t({},u.required,L)),htmlFor:N},y),r.createElement("textarea",Object.assign({},B,{id:N,maxLength:"number"!=typeof O||q?void 0:O,ref:g,value:H,disabled:_,readOnly:z,required:L,rows:I,className:i(u.textArea,[u[v]],t({},u.resize,P)),"aria-invalid":S,"aria-describedby":D,onChange:U})),(X||E)&&r.createElement(x,{gap:"xs",justify:"space-between",className:i(u.subTextContainer)},E&&r.createElement(f,{className:i(u.helpText),color:"inherit",id:W},E),X&&r.createElement(r.Fragment,null,r.createElement(f,{className:u.limitText},K,"number"==typeof O&&"/".concat(O)),r.createElement(p,{id:k,text:"".concat(K," out of ").concat(O)}))))}));export{g as default};
 //# sourceMappingURL=TextArea.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./TextArea.module.scss\";\nimport { type TextAreaProps, type TextAreaSize } from \"./TextArea.types\";\nimport Text from \"~~../Text~~/~~Text~~\";\nimport { Flex } from \"@vibe/layout\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst DEFAULT_ROWS: Record<TextAreaSize, number> = {\n small: 3,\n large: 4\n};\n\nconst TextArea = forwardRef(\n (\n {\n size = \"small\",\n rows,\n label,\n helpText,\n success,\n error,\n className,\n \"data-testid\": dataTestId,\n id,\n disabled,\n readOnly,\n required,\n maxLength,\n allowExceedingMaxLength,\n onChange,\n value,\n resize = true,\n showCharCount = false,\n ...rest\n }: TextAreaProps,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n ) => {\n const numRows = rows \|\| DEFAULT_ROWS[size];\n const helpTextId = helpText && `${id}-help-text`;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;\n\n const ariaDescribedby = useMemo(\n () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(\" \") \|\| undefined,\n [helpTextId, allowExceedingMaxLengthTextId]\n );\n\n const [characterCount, setCharacterCount] = useState(value?.length \|\| 0);\n const isErrorState = error \|\| (typeof maxLength === \"number\" && characterCount > maxLength);\n\n const handleOnChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCharacterCount(event.target.value.length);\n onChange?.(event);\n },\n [onChange]\n );\n\n return (\n <div\n className={cx(\n styles.textAreaWrapper,\n {\n [styles.error]: isErrorState,\n [styles.success]: success,\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly\n },\n className\n )}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_AREA, id)}\n data-vibe={ComponentVibeId.TEXT_AREA}\n >\n {label && (\n <label className={cx(styles.label, { [styles.required]: required })} htmlFor={id}>\n {label}\n </label>\n )}\n <textarea\n {...rest}\n id={id}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n ref={ref}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={numRows}\n className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}\n aria-invalid={isErrorState}\n aria-describedby={ariaDescribedby}\n onChange={handleOnChange}\n />\n {(showCharCount \|\| helpText) && (\n <Flex gap=\"xs\" justify=\"space-between\" className={cx(styles.subTextContainer)}>\n {helpText && (\n <Text className={cx(styles.helpText)} color=\"inherit\" id={helpTextId}>\n {helpText}\n </Text>\n )}\n {showCharCount && (\n <>\n <Text className={styles.limitText}>\n {characterCount}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n </Text>\n <HiddenText id={allowExceedingMaxLengthTextId} text={`${characterCount} out of ${maxLength}`} />\n </>\n )}\n </Flex>\n )}\n </div>\n );\n }\n);\n\nexport default TextArea;\n"],"names":["DEFAULT_ROWS","small","large","TextArea","forwardRef","_a","ref","size","_a$size","rows","label","helpText","success","error","className","dataTestId","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","_a$resize","resize","_a$showCharCount","showCharCount","rest","__rest","numRows","helpTextId","concat","allowExceedingMaxLengthTextId","ariaDescribedby","useMemo","filter","join","undefined","_useState","useState","length","_useState2","_slicedToArray","characterCount","setCharacterCount","isErrorState","handleOnChange","useCallback","event","target","React","cx","styles","textAreaWrapper","_defineProperty","getTestId","ComponentDefaultTestId","TEXT_AREA","ComponentVibeId","createElement","htmlFor","Object","assign","textArea","Flex","gap","justify","subTextContainer","Text","color","Fragment","limitText","HiddenText","text"],"mappings":"~~6jBAUA~~,IAAMA,EAA6C,CACjDC,MAAO,EACPC,MAAO,GAGHC,EAAWC,GACf,SACEC,EAqBAC,WApBEC,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EACdC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,MACAC,IAAAA,UACeC,IAAf,eACAC,IAAAA,GACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,wBACAC,IAAAA,SACAC,IAAAA,MAAKC,IACLC,OAAAA,OAAS,IAAHD,GAAOA,EAAAE,IACbC,cAAAA,OAAgB,IAAHD,GAAQA,EAClBE,EAnBLC,EAAAxB,EAAA,CAAA,OAAA,OAAA,QAAA,WAAA,UAAA,QAAA,YAAA,cAAA,KAAA,WAAA,WAAA,WAAA,YAAA,0BAAA,WAAA,QAAA,SAAA,kBAuBMyB,EAAUrB,GAAQT,EAAaO,GAC/BwB,EAAapB,MAAQqB,OAAOhB,EAAc,cAC1CiB,EAAgCZ,MAAuBW,OAAOhB,EAA+B,+BAE7FkB,EAAkBC,GACtB,WAAA,MAAM,CAACJ,EAAYE,GAA+BG,QAAO,SAAApB,GAAE,QAAMA,CAAE,IAAEqB,KAAK,WAAQC,CAAS,GAC3F,CAACP,EAAYE,IAGfM,EAA4CC,GAASjB,eAAAA,EAAOkB,SAAU,GAAEC,EAAAC,EAAAJ,EAAA,GAAjEK,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAejC,GAA+B,iBAAdO,GAA0BwB,EAAiBxB,EAE3E2B,EAAiBC,GACrB,SAACC,GACCJ,EAAkBI,EAAMC,OAAO3B,MAAMkB,QACrCnB,SAAAA,EAAW2B,EACb,GACA,CAAC3B,IAGH,OACE6B,uBACErC,UAAWsC,EACTC,EAAOC,gBAAeC,EAAAA,EAAAA,EAAAA,KAEnBF,EAAOxC,MAAQiC,GACfO,EAAOzC,QAAUA,GACjByC,EAAOpC,SAAWA,GAClBoC,EAAOnC,SAAWA,GAErBJ,GACD,cACYC,GAAcyC,EAAUC,EAAuBC,UAAW1C,GAC5D,YAAA2C,EAAgBD,WAE1BhD,GACCyC,EAAOS,cAAA,QAAA,CAAA9C,UAAWsC,EAAGC,EAAO3C,MAAK6C,EAAA,CAAA,EAAKF,EAAOlC,SAAWA,IAAa0C,QAAS7C,GAC3EN,GAGLyC,EAAAS,cAAA,WAAAE,OAAAC,OAAA,CAAA,EACMnC,EACJ,CAAAZ,GAAIA,EACJI,UAAgC,iBAAdA,GAA2BC,OAAsCiB,EAAZlB,EACvEd,IAAKA,EACLiB,MAAOA,EACPN,SAAUA,EACVC,SAAUA,EACVC,SAAUA,EACVV,KAAMqB,EACNhB,UAAWsC,EAAGC,EAAOW,SAAU,CAACX,EAAO9C,IAAMgD,EAAKF,CAAAA,EAAAA,EAAO5B,OAASA,IAAS,eAC7DqB,EACI,mBAAAZ,EAClBZ,SAAUyB,MAEVpB,GAAiBhB,IACjBwC,EAACS,cAAAK,EAAK,CAAAC,IAAI,KAAKC,QAAQ,gBAAgBrD,UAAWsC,EAAGC,EAAOe,mBACzDzD,GACCwC,EAAAS,cAACS,EAAI,CAACvD,UAAWsC,EAAGC,EAAO1C,UAAW2D,MAAM,UAAUtD,GAAIe,GACvDpB,GAGJgB,GACCwB,EAAAS,cAAAT,EAAAoB,SAAA,KACEpB,EAAAS,cAACS,EAAK,CAAAvD,UAAWuC,EAAOmB,WACrB5B,EACqB,iBAAdxB,GAAsBY,IAAAA,OAAQZ,IAExC+B,EAACS,cAAAa,GAAWzD,GAAIiB,EAA+ByC,QAAI1C,OAAKY,EAAcZ,YAAAA,OAAWZ,OAO/F"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./TextArea.module.scss\";\nimport { type TextAreaProps, type TextAreaSize } from \"./TextArea.types\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst DEFAULT_ROWS: Record<TextAreaSize, number> = {\n small: 3,\n large: 4\n};\n\nconst TextArea = forwardRef(\n (\n {\n size = \"small\",\n rows,\n label,\n helpText,\n success,\n error,\n className,\n \"data-testid\": dataTestId,\n id,\n disabled,\n readOnly,\n required,\n maxLength,\n allowExceedingMaxLength,\n onChange,\n value,\n resize = true,\n showCharCount = false,\n ...rest\n }: TextAreaProps,\n ref: React.ForwardedRef<HTMLTextAreaElement>\n ) => {\n const numRows = rows \|\| DEFAULT_ROWS[size];\n const helpTextId = helpText && `${id}-help-text`;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;\n\n const ariaDescribedby = useMemo(\n () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(\" \") \|\| undefined,\n [helpTextId, allowExceedingMaxLengthTextId]\n );\n\n const [characterCount, setCharacterCount] = useState(value?.length \|\| 0);\n const isErrorState = error \|\| (typeof maxLength === \"number\" && characterCount > maxLength);\n\n const handleOnChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCharacterCount(event.target.value.length);\n onChange?.(event);\n },\n [onChange]\n );\n\n return (\n <div\n className={cx(\n styles.textAreaWrapper,\n {\n [styles.error]: isErrorState,\n [styles.success]: success,\n [styles.disabled]: disabled,\n [styles.readOnly]: readOnly\n },\n className\n )}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_AREA, id)}\n data-vibe={ComponentVibeId.TEXT_AREA}\n >\n {label && (\n <label className={cx(styles.label, { [styles.required]: required })} htmlFor={id}>\n {label}\n </label>\n )}\n <textarea\n {...rest}\n id={id}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n ref={ref}\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={numRows}\n className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}\n aria-invalid={isErrorState}\n aria-describedby={ariaDescribedby}\n onChange={handleOnChange}\n />\n {(showCharCount \|\| helpText) && (\n <Flex gap=\"xs\" justify=\"space-between\" className={cx(styles.subTextContainer)}>\n {helpText && (\n <Text className={cx(styles.helpText)} color=\"inherit\" id={helpTextId}>\n {helpText}\n </Text>\n )}\n {showCharCount && (\n <>\n <Text className={styles.limitText}>\n {characterCount}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n </Text>\n <HiddenText id={allowExceedingMaxLengthTextId} text={`${characterCount} out of ${maxLength}`} />\n </>\n )}\n </Flex>\n )}\n </div>\n );\n }\n);\n\nexport default TextArea;\n"],"names":["DEFAULT_ROWS","small","large","TextArea","forwardRef","_a","ref","size","_a$size","rows","label","helpText","success","error","className","dataTestId","id","disabled","readOnly","required","maxLength","allowExceedingMaxLength","onChange","value","_a$resize","resize","_a$showCharCount","showCharCount","rest","__rest","numRows","helpTextId","concat","allowExceedingMaxLengthTextId","ariaDescribedby","useMemo","filter","join","undefined","_useState","useState","length","_useState2","_slicedToArray","characterCount","setCharacterCount","isErrorState","handleOnChange","useCallback","event","target","React","cx","styles","textAreaWrapper","_defineProperty","getTestId","ComponentDefaultTestId","TEXT_AREA","ComponentVibeId","createElement","htmlFor","Object","assign","textArea","Flex","gap","justify","subTextContainer","Text","color","Fragment","limitText","HiddenText","text"],"mappings":"8lBAUA,IAAMA,EAA6C,CACjDC,MAAO,EACPC,MAAO,GAGHC,EAAWC,GACf,SACEC,EAqBAC,WApBEC,KAAAA,OAAO,IAAHC,EAAG,QAAOA,EACdC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,QACAC,IAAAA,MACAC,IAAAA,UACeC,IAAf,eACAC,IAAAA,GACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,wBACAC,IAAAA,SACAC,IAAAA,MAAKC,IACLC,OAAAA,OAAS,IAAHD,GAAOA,EAAAE,IACbC,cAAAA,OAAgB,IAAHD,GAAQA,EAClBE,EAnBLC,EAAAxB,EAAA,CAAA,OAAA,OAAA,QAAA,WAAA,UAAA,QAAA,YAAA,cAAA,KAAA,WAAA,WAAA,WAAA,YAAA,0BAAA,WAAA,QAAA,SAAA,kBAuBMyB,EAAUrB,GAAQT,EAAaO,GAC/BwB,EAAapB,MAAQqB,OAAOhB,EAAc,cAC1CiB,EAAgCZ,MAAuBW,OAAOhB,EAA+B,+BAE7FkB,EAAkBC,GACtB,WAAA,MAAM,CAACJ,EAAYE,GAA+BG,QAAO,SAAApB,GAAE,QAAMA,CAAE,IAAEqB,KAAK,WAAQC,CAAS,GAC3F,CAACP,EAAYE,IAGfM,EAA4CC,GAASjB,eAAAA,EAAOkB,SAAU,GAAEC,EAAAC,EAAAJ,EAAA,GAAjEK,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAejC,GAA+B,iBAAdO,GAA0BwB,EAAiBxB,EAE3E2B,EAAiBC,GACrB,SAACC,GACCJ,EAAkBI,EAAMC,OAAO3B,MAAMkB,QACrCnB,SAAAA,EAAW2B,EACb,GACA,CAAC3B,IAGH,OACE6B,uBACErC,UAAWsC,EACTC,EAAOC,gBAAeC,EAAAA,EAAAA,EAAAA,KAEnBF,EAAOxC,MAAQiC,GACfO,EAAOzC,QAAUA,GACjByC,EAAOpC,SAAWA,GAClBoC,EAAOnC,SAAWA,GAErBJ,GACD,cACYC,GAAcyC,EAAUC,EAAuBC,UAAW1C,GAC5D,YAAA2C,EAAgBD,WAE1BhD,GACCyC,EAAOS,cAAA,QAAA,CAAA9C,UAAWsC,EAAGC,EAAO3C,MAAK6C,EAAA,CAAA,EAAKF,EAAOlC,SAAWA,IAAa0C,QAAS7C,GAC3EN,GAGLyC,EAAAS,cAAA,WAAAE,OAAAC,OAAA,CAAA,EACMnC,EACJ,CAAAZ,GAAIA,EACJI,UAAgC,iBAAdA,GAA2BC,OAAsCiB,EAAZlB,EACvEd,IAAKA,EACLiB,MAAOA,EACPN,SAAUA,EACVC,SAAUA,EACVC,SAAUA,EACVV,KAAMqB,EACNhB,UAAWsC,EAAGC,EAAOW,SAAU,CAACX,EAAO9C,IAAMgD,EAAKF,CAAAA,EAAAA,EAAO5B,OAASA,IAAS,eAC7DqB,EACI,mBAAAZ,EAClBZ,SAAUyB,MAEVpB,GAAiBhB,IACjBwC,EAACS,cAAAK,EAAK,CAAAC,IAAI,KAAKC,QAAQ,gBAAgBrD,UAAWsC,EAAGC,EAAOe,mBACzDzD,GACCwC,EAAAS,cAACS,EAAI,CAACvD,UAAWsC,EAAGC,EAAO1C,UAAW2D,MAAM,UAAUtD,GAAIe,GACvDpB,GAGJgB,GACCwB,EAAAS,cAAAT,EAAAoB,SAAA,KACEpB,EAAAS,cAACS,EAAK,CAAAvD,UAAWuC,EAAOmB,WACrB5B,EACqB,iBAAdxB,GAAsBY,IAAAA,OAAQZ,IAExC+B,EAACS,cAAAa,GAAWzD,GAAIiB,EAA+ByC,QAAI1C,OAAKY,EAAcZ,YAAAA,OAAWZ,OAO/F"}

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

@@ -1,2 +1,2 @@
-var e={textAreaWrapper:"textAreaWrapper_e2bac2af67",label:"label_b3fa8f609d",required:"required_a4fd432e1d",subTextContainer:"subTextContainer_b6e09e7233",helpText:"helpText_bd0851d343",limitText:"limitText_4fdd8e1027",textArea:"textArea_8271b8db25",small:"small_eb8ab65262",large:"large_2b08fbc54d",resize:"resize_2aa307cea1",success:"success_508a869fc4",error:"error_cfca514059",disabled:"disabled_a4fd432e1d",readOnly:"readOnly_a4fd432e1d"};!function(e){const r="s_id-c3fc7910bb37_3_82_2";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_e2bac2af67 {\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_e2bac2af67 .label_b3fa8f609d {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_e2bac2af67 .label_b3fa8f609d.required_a4fd432e1d::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_e2bac2af67 .subTextContainer_b6e09e7233 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_e2bac2af67 .subTextContainer_b6e09e7233 .helpText_bd0851d343 {\n  display: flex;\n}\n.textAreaWrapper_e2bac2af67 .subTextContainer_b6e09e7233 .limitText_4fdd8e1027 {\n  margin-left: auto;\n}\n.textAreaWrapper_e2bac2af67 .textArea_8271b8db25 {\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_e2bac2af67 .textArea_8271b8db25:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_e2bac2af67 .textArea_8271b8db25:active, .textAreaWrapper_e2bac2af67 .textArea_8271b8db25:focus, .textAreaWrapper_e2bac2af67 .textArea_8271b8db25:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_e2bac2af67 .textArea_8271b8db25.small_eb8ab65262 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_e2bac2af67 .textArea_8271b8db25.large_2b08fbc54d {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_e2bac2af67 .textArea_8271b8db25:not(.resize_2aa307cea1) {\n  resize: none;\n}\n.textAreaWrapper_e2bac2af67.success_508a869fc4 .textArea_8271b8db25 {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_e2bac2af67.success_508a869fc4 .helpText_bd0851d343 {\n  color: var(--color-success);\n}\n.textAreaWrapper_e2bac2af67.error_cfca514059 .textArea_8271b8db25 {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_e2bac2af67.error_cfca514059 .helpText_bd0851d343,\n.textAreaWrapper_e2bac2af67.error_cfca514059 .limitText_4fdd8e1027 {\n  color: var(--color-error);\n}\n.textAreaWrapper_e2bac2af67.disabled_a4fd432e1d .textArea_8271b8db25,\n.textAreaWrapper_e2bac2af67.disabled_a4fd432e1d .textArea_8271b8db25:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_e2bac2af67.disabled_a4fd432e1d .helpText_bd0851d343 {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_e2bac2af67.readOnly_a4fd432e1d .textArea_8271b8db25,\n.textAreaWrapper_e2bac2af67.readOnly_a4fd432e1d .textArea_8271b8db25:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
+var e={textAreaWrapper:"textAreaWrapper_f05d3dc0ae",label:"label_22f103bf25",required:"required_753f6732f8",subTextContainer:"subTextContainer_960a875048",helpText:"helpText_d4ff0511e1",limitText:"limitText_cdb3999d44",textArea:"textArea_aa4025fabb",small:"small_9ed079f90a",large:"large_101611b4a6",resize:"resize_a1bddb5e55",success:"success_685e5d365f",error:"error_b796283187",disabled:"disabled_753f6732f8",readOnly:"readOnly_753f6732f8"};!function(e){const r="s_id-c3fc7910bb37_3_83_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_f05d3dc0ae {\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_f05d3dc0ae .label_22f103bf25 {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_f05d3dc0ae .label_22f103bf25.required_753f6732f8::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_f05d3dc0ae .subTextContainer_960a875048 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_f05d3dc0ae .subTextContainer_960a875048 .helpText_d4ff0511e1 {\n  display: flex;\n}\n.textAreaWrapper_f05d3dc0ae .subTextContainer_960a875048 .limitText_cdb3999d44 {\n  margin-left: auto;\n}\n.textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb {\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_f05d3dc0ae .textArea_aa4025fabb:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb:active, .textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb:focus, .textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb.small_9ed079f90a {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb.large_101611b4a6 {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_f05d3dc0ae .textArea_aa4025fabb:not(.resize_a1bddb5e55) {\n  resize: none;\n}\n.textAreaWrapper_f05d3dc0ae.success_685e5d365f .textArea_aa4025fabb {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_f05d3dc0ae.success_685e5d365f .helpText_d4ff0511e1 {\n  color: var(--color-success);\n}\n.textAreaWrapper_f05d3dc0ae.error_b796283187 .textArea_aa4025fabb {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_f05d3dc0ae.error_b796283187 .helpText_d4ff0511e1,\n.textAreaWrapper_f05d3dc0ae.error_b796283187 .limitText_cdb3999d44 {\n  color: var(--color-error);\n}\n.textAreaWrapper_f05d3dc0ae.disabled_753f6732f8 .textArea_aa4025fabb,\n.textAreaWrapper_f05d3dc0ae.disabled_753f6732f8 .textArea_aa4025fabb:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_f05d3dc0ae.disabled_753f6732f8 .helpText_d4ff0511e1 {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_f05d3dc0ae.readOnly_753f6732f8 .textArea_aa4025fabb,\n.textAreaWrapper_f05d3dc0ae.readOnly_753f6732f8 .textArea_aa4025fabb: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"../Text/Text.js";import u from"../FieldLabel/FieldLabel.js";import{TextFieldFeedbackState as p,TextFieldTextType as v,FEEDBACK_CLASSES as f,SIZE_MAPPER as b,TextFieldAriaLabel as C}from"./TextFieldConstants.js";import{BASE_SIZES as x}from"../../constants/sizes.js";import y from"../../hooks/useMergeRef.js";import{getTestId as E}from"../../tests/testIds.js";import{NOOP as T}from"../../utils/function-utils.js";import{ComponentDefaultTestId as N,ComponentVibeId as h}from"../../tests/constants.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import I from"./TextField.module.scss.js";import j from"../Tooltip/Tooltip.js";import F from"../HiddenText/HiddenText.js";import L from"../../../components/loader/dist/Loader/Loader.js";import k from"../../../components/clickable/dist/Clickable/Clickable.js";import D from"../../../components/icon/dist/Icon/Icon.js";var w={primary:"",secondary:""},H=g(n((function(n,p){var v=n.className,x=void 0===v?"":v,g=n.placeholder,H=void 0===g?"":g,A=n.autoComplete,S=void 0===A?"off":A,_=n.value,q=n.onChange,R=void 0===q?T:q,W=n.onBlur,z=void 0===W?T:W,B=n.onFocus,O=void 0===B?T:B,K=n.onKeyDown,M=void 0===K?T:K,P=n.onWheel,V=void 0===P?T:P,X=n.debounceRate,U=void 0===X?0:X,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,oe=void 0===ee?T: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?T:ve,be=n.clearOnIconClick,Ce=void 0!==be&&be,xe=n.labelIconName,ye=n.showCharCount,Ee=void 0!==ye&&ye,Te=n.inputAriaLabel,Ne=n.searchResultsContainerId,he=void 0===Ne?"":Ne,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=y(p,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?f.error:me&&me.status||ao?f[ao?"error":me.status]:""}),[we,me,ao,vo]),yo=te||ae,Eo=Ee||me&&me.text||ao&&Oe,To=ae===bo,No=te===bo,ho=(fe!==T||Fe.primary||Ze)&&vo&&te.length&&No,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!==T||Ce,Fo=Fe.primary||Ze,Lo=Fe.secondary||$e;return a.createElement("div",{className:t(I.textField,pe,o(o({},I.disabled,Q),I.onlyUnderline,Ye)),role:Re,"aria-busy":Me},a.createElement("div",{className:t(I.labelWrapper)},a.createElement(u,{labelText:le,icon:xe,labelFor:re,required:ze}),a.createElement("div",{className:t(I.inputWrapper,b[ce],xo)},a.createElement("input",{className:t(x,I.input,o(o({},I.inputHasIcon,!!yo),I.readOnly,$)),placeholder:H,autoComplete:S,value:vo,onChange:fo,disabled:Q,readOnly:$,ref:io,type:ke,id:re,"data-testid":Pe||E(N.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:he&&"combobox","aria-label":Te||H,"aria-invalid":me&&"error"===me.status||ao,"aria-owns":he,"aria-activedescendant":Ie,"aria-required":ze,"aria-describedby":Io,required:ze,tabIndex:Xe,dir:eo}),Me&&a.createElement("div",{className:t(I.loaderContainer,o({},I.loaderContainerHasIcon,yo))},a.createElement("div",{className:t(I.loader)},a.createElement(L,{className:t(I.loaderSvg)}))),te&&a.createElement(j,{content:No?Ze:void 0,referenceWrapperClassName:I.tooltipContainer},a.createElement(k,{className:t(I.iconContainer,o(o(o({},I.iconContainerHasIcon,yo),I.iconContainerActive,No),I.iconContainerClickable,jo)),onClick:Co,tabIndex:ho?"0":"-1",ariaLabel:Fo},a.createElement(D,{icon:te,className:t(I.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"}))),ae&&a.createElement(j,{content:To?$e:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:I.tooltipContainer},a.createElement(k,{className:t(I.iconContainer,o(o(o({},I.iconContainerHasIcon,yo),I.iconContainerActive,To),I.iconContainerClickable,jo)),onClick:Co,tabIndex:go?"0":"-1","data-testid":Ve||E(N.TEXT_FIELD_SECONDARY_BUTTON,re),ariaLabel:Lo},a.createElement(D,{icon:ae,className:t(I.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"})))),Eo&&a.createElement(m,{type:"text2",color:"secondary",className:t(I.subTextContainer)},(me&&me.text||ao&&Oe)&&a.createElement("span",{className:t(I.subTextContainerStatus)},ao?Oe:me.text),Ee&&a.createElement("span",{className:t(I.counter),"aria-label":C.CHAR},vo&&vo.length||0,"number"==typeof we&&"/".concat(we),a.createElement(F,{id:Io,text:"Maximum of ".concat(we," characters")})))))})),{sizes:x,feedbacks:p,types:v});export{H as default};
+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};
 //# 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 \"../Text/Text\";\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 \"../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, {\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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"}

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

@@ -1,2 +1,2 @@
-var e={textField:"textField_a7fa0593f0",labelWrapper:"labelWrapper_e8581996c2",subTextContainer:"subTextContainer_8b20b27f0f",counter:"counter_4fdd8e1027",disabled:"disabled_2e48b56ee3",icon:"icon_2c946ae8e4",inputWrapper:"inputWrapper_2c946ae8e4",input:"input_751221b4e8",iconContainer:"iconContainer_c8580dc87f",iconContainerHasIcon:"iconContainerHasIcon_a98a9dd67a",readOnly:"readOnly_a4d32ad351",inputHover:"inputHover_764f75ed7f",inputActive:"inputActive_3b7736de57",inputHasIcon:"inputHasIcon_cb7c4b5c77",round:"round_621c48165e",square:"square_3082aab300",onlyUnderline:"onlyUnderline_a9a31426c8",tooltipContainer:"tooltipContainer_2a3a4d9b40",wrapperSizeMedium:"wrapperSizeMedium_c01f13c84f",wrapperSizeLarge:"wrapperSizeLarge_57a4eb3fa9",iconContainerActive:"iconContainerActive_7853758aeb",iconContainerClickable:"iconContainerClickable_cf96c13523",inputErrorValidation:"inputErrorValidation_a98a9dd67a",subTextContainerStatus:"subTextContainerStatus_0f5b683bf7",inputSuccessValidation:"inputSuccessValidation_3f5e0b4eec",wrapperSizeSmall:"wrapperSizeSmall_02ad66dccb",inputWrapperSizeSmall:"inputWrapperSizeSmall_2f89ad1dfc",loaderContainer:"loaderContainer_c1d806207c",loaderContainerHasIcon:"loaderContainerHasIcon_1233803b0a",loader:"loader_c5f13ef9c3",loaderSvg:"loaderSvg_b6e09e7233"};!function(e){const n="s_id-695413f4db8e_3_82_2";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_a7fa0593f0 {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_a7fa0593f0 * {\n  box-sizing: border-box;\n}\n.textField_a7fa0593f0 .labelWrapper_e8581996c2 {\n  width: 100%;\n}\n.textField_a7fa0593f0 .subTextContainer_8b20b27f0f {\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_a7fa0593f0 .subTextContainer_8b20b27f0f .counter_4fdd8e1027 {\n  margin-left: auto;\n}\n.textField_a7fa0593f0.disabled_2e48b56ee3 .icon_2c946ae8e4 {\n  cursor: not-allowed;\n}\n.textField_a7fa0593f0.disabled_2e48b56ee3 .inputWrapper_2c946ae8e4 {\n  cursor: not-allowed;\n}\n.textField_a7fa0593f0.disabled_2e48b56ee3 .inputWrapper_2c946ae8e4 .input_751221b4e8 {\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_a7fa0593f0.disabled_2e48b56ee3 .inputWrapper_2c946ae8e4 .input_751221b4e8::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_a7fa0593f0.disabled_2e48b56ee3 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerHasIcon_a98a9dd67a:hover {\n  background-color: transparent;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 {\n  width: 100%;\n  position: relative;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.readOnly_a4d32ad351 {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.inputHover_764f75ed7f {\n  border-color: var(--primary-text-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8:focus,\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8:active,\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.inputActive_3b7736de57 {\n  border-color: var(--primary-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.inputHasIcon_cb7c4b5c77 {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.round_621c48165e {\n  border-radius: 50px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.square_3082aab300 {\n  border-radius: 0;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .input_751221b4e8.onlyUnderline_a9a31426c8 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4 .tooltipContainer_2a3a4d9b40 {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .tooltipContainer_2a3a4d9b40 {\n  width: 40px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .tooltipContainer_2a3a4d9b40 {\n  width: 46px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f {\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_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerActive_7853758aeb.iconContainerHasIcon_a98a9dd67a.iconContainerClickable_cf96c13523 {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerActive_7853758aeb.iconContainerHasIcon_a98a9dd67a:not(.iconContainerClickable_cf96c13523) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerActive_7853758aeb {\n  opacity: 1;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerActive_7853758aeb .icon_2c946ae8e4 {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerHasIcon_a98a9dd67a.iconContainerClickable_cf96c13523:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f.iconContainerHasIcon_a98a9dd67a.iconContainerClickable_cf96c13523:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .iconContainer_c8580dc87f .icon_2c946ae8e4 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a:hover .input_751221b4e8 {\n  border-color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a .input_751221b4e8 {\n  border-color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a .input_751221b4e8:focus,\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a .input_751221b4e8:active {\n  border-color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a .iconContainer_c8580dc87f .icon_2c946ae8e4 {\n  color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a .iconContainer_c8580dc87f .icon_2c946ae8e4:hover {\n  color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a + .subTextContainer_8b20b27f0f .subTextContainerStatus_0f5b683bf7,\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputErrorValidation_a98a9dd67a + .subTextContainer_8b20b27f0f .counter_4fdd8e1027 {\n  color: var(--negative-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec:hover .input_751221b4e8 {\n  border-color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec .input_751221b4e8 {\n  border-color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec .input_751221b4e8:focus,\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec .input_751221b4e8:active {\n  border-color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec .iconContainer_c8580dc87f .icon_2c946ae8e4 {\n  color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec .iconContainer_c8580dc87f .icon_2c946ae8e4:hover {\n  color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.inputSuccessValidation_3f5e0b4eec + .subTextContainer_8b20b27f0f .subTextContainerStatus_0f5b683bf7 {\n  color: var(--positive-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeSmall_02ad66dccb {\n  height: 32px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeSmall_02ad66dccb .input_751221b4e8 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4.inputWrapperSizeSmall_2f89ad1dfc .input_751221b4e8.inputHasIcon_cb7c4b5c77.onlyUnderline_a9a31426c8 {\n  padding-left: var(--spacing-xs);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f {\n  height: 40px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .input_751221b4e8 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .input_751221b4e8.inputHasIcon_cb7c4b5c77 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .input_751221b4e8.inputHasIcon_cb7c4b5c77.onlyUnderline_a9a31426c8 {\n  padding-left: 4px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .iconContainer_c8580dc87f {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .iconContainer_c8580dc87f:hover + .iconContainer_c8580dc87f + .input_751221b4e8 {\n  border-color: var(--primary-text-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 {\n  height: 48px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .input_751221b4e8 {\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_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .input_751221b4e8.inputHasIcon_cb7c4b5c77 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .input_751221b4e8.inputHasIcon_cb7c4b5c77.onlyUnderline_a9a31426c8 {\n  padding-left: var(--spacing-xs);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .iconContainer_c8580dc87f {\n  height: 40px;\n  width: 40px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4:hover .input_751221b4e8 {\n  border-color: var(--primary-text-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .loaderContainer_c1d806207c {\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_a7fa0593f0 .inputWrapper_2c946ae8e4 .loaderContainer_c1d806207c.loaderContainerHasIcon_1233803b0a {\n  right: 32px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .loaderContainer_c1d806207c .loader_c5f13ef9c3 {\n  width: 16px;\n  height: 16px;\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4 .loaderContainer_c1d806207c .loader_c5f13ef9c3 .loaderSvg_b6e09e7233 {\n  color: var(--secondary-text-color);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeMedium_c01f13c84f .iconContainer_c8580dc87f .icon_2c946ae8e4 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_a7fa0593f0 .inputWrapper_2c946ae8e4.wrapperSizeLarge_57a4eb3fa9 .iconContainer_c8580dc87f .icon_2c946ae8e4 {\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_b4a405176f",labelWrapper:"labelWrapper_929280b715",subTextContainer:"subTextContainer_55820add27",counter:"counter_cdb3999d44",disabled:"disabled_44d0247f11",icon:"icon_b92446487a",inputWrapper:"inputWrapper_b92446487a",input:"input_f63bac81b5",iconContainer:"iconContainer_4d4ca15fd6",iconContainerHasIcon:"iconContainerHasIcon_07a637d365",readOnly:"readOnly_456c0edaf5",inputHover:"inputHover_cc030ccc9d",inputActive:"inputActive_7f53905a6c",inputHasIcon:"inputHasIcon_f04959aced",round:"round_ff51c88ef7",square:"square_b078e1ddf5",onlyUnderline:"onlyUnderline_a5001e07ca",tooltipContainer:"tooltipContainer_1fa89b80ed",wrapperSizeMedium:"wrapperSizeMedium_7146b46f13",wrapperSizeLarge:"wrapperSizeLarge_dd23184bab",iconContainerActive:"iconContainerActive_52bb10b270",iconContainerClickable:"iconContainerClickable_487e8f81e9",inputErrorValidation:"inputErrorValidation_07a637d365",subTextContainerStatus:"subTextContainerStatus_7d723add00",inputSuccessValidation:"inputSuccessValidation_cd4a425684",wrapperSizeSmall:"wrapperSizeSmall_c372ff1258",inputWrapperSizeSmall:"inputWrapperSizeSmall_e4387d1d2c",loaderContainer:"loaderContainer_1700f146eb",loaderContainerHasIcon:"loaderContainerHasIcon_1b7db13286",loader:"loader_288b8b0fc6",loaderSvg:"loaderSvg_960a875048"};!function(n){const a="s_id-695413f4db8e_3_83_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField_b4a405176f {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_b4a405176f * {\n  box-sizing: border-box;\n}\n.textField_b4a405176f .labelWrapper_929280b715 {\n  width: 100%;\n}\n.textField_b4a405176f .subTextContainer_55820add27 {\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_b4a405176f .subTextContainer_55820add27 .counter_cdb3999d44 {\n  margin-left: auto;\n}\n.textField_b4a405176f.disabled_44d0247f11 .icon_b92446487a {\n  cursor: not-allowed;\n}\n.textField_b4a405176f.disabled_44d0247f11 .inputWrapper_b92446487a {\n  cursor: not-allowed;\n}\n.textField_b4a405176f.disabled_44d0247f11 .inputWrapper_b92446487a .input_f63bac81b5 {\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_b4a405176f.disabled_44d0247f11 .inputWrapper_b92446487a .input_f63bac81b5::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_b4a405176f.disabled_44d0247f11 .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerHasIcon_07a637d365:hover {\n  background-color: transparent;\n}\n.textField_b4a405176f .inputWrapper_b92446487a {\n  width: 100%;\n  position: relative;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5 {\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_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.readOnly_456c0edaf5 {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.inputHover_cc030ccc9d {\n  border-color: var(--primary-text-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5:focus,\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5:active,\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.inputActive_7f53905a6c {\n  border-color: var(--primary-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.inputHasIcon_f04959aced {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.round_ff51c88ef7 {\n  border-radius: 50px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.square_b078e1ddf5 {\n  border-radius: 0;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .input_f63bac81b5.onlyUnderline_a5001e07ca {\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_b4a405176f .inputWrapper_b92446487a .tooltipContainer_1fa89b80ed {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .tooltipContainer_1fa89b80ed {\n  width: 40px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .tooltipContainer_1fa89b80ed {\n  width: 46px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6 {\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_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerActive_52bb10b270.iconContainerHasIcon_07a637d365.iconContainerClickable_487e8f81e9 {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerActive_52bb10b270.iconContainerHasIcon_07a637d365:not(.iconContainerClickable_487e8f81e9) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerActive_52bb10b270 {\n  opacity: 1;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerActive_52bb10b270 .icon_b92446487a {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerHasIcon_07a637d365.iconContainerClickable_487e8f81e9:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6.iconContainerHasIcon_07a637d365.iconContainerClickable_487e8f81e9:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .iconContainer_4d4ca15fd6 .icon_b92446487a {\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_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365:hover .input_f63bac81b5 {\n  border-color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 .input_f63bac81b5 {\n  border-color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 .input_f63bac81b5:focus,\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 .input_f63bac81b5:active {\n  border-color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 .iconContainer_4d4ca15fd6 .icon_b92446487a {\n  color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 .iconContainer_4d4ca15fd6 .icon_b92446487a:hover {\n  color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 + .subTextContainer_55820add27 .subTextContainerStatus_7d723add00,\n.textField_b4a405176f .inputWrapper_b92446487a.inputErrorValidation_07a637d365 + .subTextContainer_55820add27 .counter_cdb3999d44 {\n  color: var(--negative-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684:hover .input_f63bac81b5 {\n  border-color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 .input_f63bac81b5 {\n  border-color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 .input_f63bac81b5:focus,\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 .input_f63bac81b5:active {\n  border-color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 .iconContainer_4d4ca15fd6 .icon_b92446487a {\n  color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 .iconContainer_4d4ca15fd6 .icon_b92446487a:hover {\n  color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.inputSuccessValidation_cd4a425684 + .subTextContainer_55820add27 .subTextContainerStatus_7d723add00 {\n  color: var(--positive-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeSmall_c372ff1258 {\n  height: 32px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeSmall_c372ff1258 .input_f63bac81b5 {\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_b4a405176f .inputWrapper_b92446487a.inputWrapperSizeSmall_e4387d1d2c .input_f63bac81b5.inputHasIcon_f04959aced.onlyUnderline_a5001e07ca {\n  padding-left: var(--spacing-xs);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 {\n  height: 40px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .input_f63bac81b5 {\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_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .input_f63bac81b5.inputHasIcon_f04959aced {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .input_f63bac81b5.inputHasIcon_f04959aced.onlyUnderline_a5001e07ca {\n  padding-left: 4px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .iconContainer_4d4ca15fd6 {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .iconContainer_4d4ca15fd6:hover + .iconContainer_4d4ca15fd6 + .input_f63bac81b5 {\n  border-color: var(--primary-text-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab {\n  height: 48px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .input_f63bac81b5 {\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_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .input_f63bac81b5.inputHasIcon_f04959aced {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .input_f63bac81b5.inputHasIcon_f04959aced.onlyUnderline_a5001e07ca {\n  padding-left: var(--spacing-xs);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .iconContainer_4d4ca15fd6 {\n  height: 40px;\n  width: 40px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a:hover .input_f63bac81b5 {\n  border-color: var(--primary-text-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a .loaderContainer_1700f146eb {\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_b4a405176f .inputWrapper_b92446487a .loaderContainer_1700f146eb.loaderContainerHasIcon_1b7db13286 {\n  right: 32px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .loaderContainer_1700f146eb .loader_288b8b0fc6 {\n  width: 16px;\n  height: 16px;\n}\n.textField_b4a405176f .inputWrapper_b92446487a .loaderContainer_1700f146eb .loader_288b8b0fc6 .loaderSvg_960a875048 {\n  color: var(--secondary-text-color);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeMedium_7146b46f13 .iconContainer_4d4ca15fd6 .icon_b92446487a {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_b4a405176f .inputWrapper_b92446487a.wrapperSizeLarge_dd23184bab .iconContainer_4d4ca15fd6 .icon_b92446487a {\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/TextWithHighlight/TextWithHighlight.js CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-var e={textWithHighlightWrapper:"textWithHighlightWrapper_877be3bcac",highlightText:"highlightText_ae932eaa59",withEllipsis:"withEllipsis_3339eb4a71"};!function(e){const t="s_id-42c1fd2afe36_3_82_2";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_877be3bcac {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.textWithHighlightWrapper_877be3bcac em.highlightText_ae932eaa59 {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n.textWithHighlightWrapper_877be3bcac.withEllipsis_3339eb4a71 {\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_07876bd73a",highlightText:"highlightText_b4371be25f",withEllipsis:"withEllipsis_9b4ccf9191"};!function(e){const t="s_id-42c1fd2afe36_3_83_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_07876bd73a {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n.textWithHighlightWrapper_07876bd73a em.highlightText_b4371be25f {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n.textWithHighlightWrapper_07876bd73a.withEllipsis_9b4ccf9191 {\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/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"../Tooltip/Tooltip.js";import c from"../IconButton/IconButton.js";import u from"./TipseenTitle.js";import{TipseenCloseButtonTheme as f,TipseenColor as h,TIPSEEN_CLOSE_BUTTON_ARIA_LABEL as v}from"./TipseenConstants.js";import{withStaticProps as T}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{ComponentDefaultTestId as g}from"../../tests/constants.js";import{getTestId as y}from"../../tests/testIds.js";import C from"../Text/Text.js";import j from"./Tipseen.module.scss.js";import{TooltipPositions as w}from"../Tooltip/TooltipConstants.js";import{AnimationType as E,HideShowEvent as N}from"../../../components/dialog/dist/Dialog/DialogConstants.js";import x from"../../../icons/dist/react/CloseSmall.js";var W=o.createContext("primary"),B=T(i((function(i,f){var h=i.className,T=i.id,w=i.position,E=void 0===w?"bottom":w,N=i.animationType,B=void 0===N?"expand":N,S=i.hideDelay,k=void 0===S?0:S,A=i.showDelay,D=void 0===A?100:A,b=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&&D>0,me=r(null),de=d(f,me),pe=s(!le),ce=e(pe,2),ue=ce[0],fe=ce[1],he=L||v;n((function(){var e;return D&&(e=setTimeout((function(){fe(!0)}),D)),function(){clearTimeout(e)}}),[D,fe]);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]),ge=f||T?"div":l,ye="div"===ge?{ref:de,id:T,"data-testid":ne||y(g.TIPSEEN,T)}:{},Ce=o.createElement("div",null,o.createElement("div",{className:m(j.tipseenHeader)},H?null:o.createElement(c,{hideTooltip:!0,className:m(j.tipseenCloseButton,t({},j.dark,"dark"===R||"fixed-dark"===R)),onClick:O,size:"xs",kind:"tertiary",color:Te,ariaLabel:he,icon:x}),o.createElement(u,{text:b,className:m(j.tipseenTitle,P)})),o.createElement(C,{color:ve,type:"text2",element:"div",ellipsis:!1,className:m(j.tipseenContent)},o.createElement(W.Provider,{value:ae},z)));return o.createElement(ge,Object.assign({},ye),o.createElement(p,{className:m(j.tipseenWrapper,h,t(t({},j.tipseenWrapperWithoutCustomWidth,!Q),j.floating,re)),maxWidth:Q,arrowClassName:ee,style:Q?{width:Q}:void 0,shouldShowOnMount:!le,position:E,animationType:B,hideDelay:k,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:f,animationTypes:E,hideShowTriggers:N,colors:h,positions:w});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 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};
 //# sourceMappingURL=Tipseen.js.map

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

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

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

@@ -1,2 +1,2 @@
-var e={tipseenWrapper:"tipseenWrapper_95e090e693",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth_6fc215b9a4",floating:"floating_a81a7ac158",tipseenHeader:"tipseenHeader_48c3fe8bb4",tipseenTitle:"tipseenTitle_d67209dc41",tipseenContent:"tipseenContent_747012638a",tipseenCloseButton:"tipseenCloseButton_14c5472a65",dark:"dark_eadaafa29a"};!function(e){const t="s_id-33da00d2ba25_3_82_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tipseenWrapper_95e090e693 {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper_95e090e693.tipseenWrapperWithoutCustomWidth_6fc215b9a4 {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper_95e090e693.floating_a81a7ac158 {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  margin-bottom: var(--spacing-medium);\n  margin-right: var(--spacing-medium);\n}\n.tipseenWrapper_95e090e693 .tipseenHeader_48c3fe8bb4 {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper_95e090e693 .tipseenTitle_d67209dc41 {\n  padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);\n}\n.tipseenWrapper_95e090e693 .tipseenContent_747012638a {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper_95e090e693 .tipseenCloseButton_14c5472a65 {\n  position: absolute;\n  top: var(--spacing-small);\n  right: var(--spacing-small);\n  z-index: 2;\n}\n.tipseenWrapper_95e090e693 .tipseenCloseButton_14c5472a65.dark_eadaafa29a {\n  color: var(--color-asphalt);\n}");export{e as default};
+var e={tipseenWrapper:"tipseenWrapper_d69349027a",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth_6659374f98",floating:"floating_e0bd4d5f1b",tipseenHeader:"tipseenHeader_5c6cc1480d",tipseenTitle:"tipseenTitle_0a8f22c3b2",tipseenContent:"tipseenContent_18c705d1ba",tipseenCloseButton:"tipseenCloseButton_84e85aeb24",dark:"dark_f3f2a23626"};!function(e){const t="s_id-33da00d2ba25_3_83_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tipseenWrapper_d69349027a {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper_d69349027a.tipseenWrapperWithoutCustomWidth_6659374f98 {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper_d69349027a.floating_e0bd4d5f1b {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  margin-bottom: var(--spacing-medium);\n  margin-right: var(--spacing-medium);\n}\n.tipseenWrapper_d69349027a .tipseenHeader_5c6cc1480d {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper_d69349027a .tipseenTitle_0a8f22c3b2 {\n  padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);\n}\n.tipseenWrapper_d69349027a .tipseenContent_18c705d1ba {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper_d69349027a .tipseenCloseButton_84e85aeb24 {\n  position: absolute;\n  top: var(--spacing-small);\n  right: var(--spacing-small);\n  z-index: 2;\n}\n.tipseenWrapper_d69349027a .tipseenCloseButton_84e85aeb24.dark_f3f2a23626 {\n  color: var(--color-asphalt);\n}");export{e as default};
 //# sourceMappingURL=Tipseen.module.scss.js.map

package/dist/src/components/Tipseen/TipseenBasicContent.module.scss.js CHANGED Viewed

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

package/dist/src/components/Tipseen/TipseenContent.module.scss.js CHANGED Viewed

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

package/dist/src/components/Tipseen/TipseenImage.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenImage:"tipseenImage_9e04c238e3"};!function(e){const t="s_id-5a749fe7aaee_3_82_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenImage_9e04c238e3 {\n  object-fit: cover;\n  width: 100%;\n}");export{e as default};
+var e={tipseenImage:"tipseenImage_6b4c557152"};!function(e){const t="s_id-5a749fe7aaee_3_83_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenImage_6b4c557152 {\n  object-fit: cover;\n  width: 100%;\n}");export{e as default};
 //# sourceMappingURL=TipseenImage.module.scss.js.map