@bikdotai/bik-component-library 0.0.833 → 0.0.834

package/dist/cjs/components/icon-button/IconButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered && props.iconButtonType !== 'ai'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.isSelected\n\t\t\t? `\n\t\t\tbackground: ${generateBackgroundColor(props.iconButtonType)};\n\t\t\t\t`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled &&\n\t\t`\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t`\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"kPAKaA,EAAaC,EAAAA,QAAO;AAAA,GAK7BC,GAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOZA,EAAM,UAAYA,EAAM,iBAAmB,KACxC,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,WACH;AAAA,iBACYE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC;AAAA,MAEzD;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,UACN;AAAA;AAAA;AAAA,GAID;AAAA;AAAA,EAEC;AAAA"}
+{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"kPAKaA,EAAaC,EAAAA,QAAO;AAAA,GAO7BC,GAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,cAAgB,OACnBA,EAAM,YACNA,EAAM,OAAS,KACf,EACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,UACNA,EAAM,iBAAmB,MACzBA,EAAM,iBAAmB,UACtB,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,iBAAmB,UACtB;AAAA,kBACaE,EAAAA,wBAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,WAEJ,GADA,8BAA8BC,EAAAA,OAAO,WAAW,OAAO,KAE3D;AAAA;AAAA,KAGCD,EAAM,WACN,eAAeE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC,IAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,SACHA,EAAM,iBAAmB,UACxB;AAAA;AAAA,yBAEmBC,EAAAA,OAAO,WAAW,QAAQ;AAAA,kCACjBA,EAAAA,OAAO,WAAW,QAAQ;AAAA,MAEtD;AAAA;AAAA;AAAA,MAID,EACJ;AAAA;AAAA,EAEC;AAAA"}

package/dist/cjs/components/icon-button/theme.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../constants/Theme.js"),i=(t,r,e)=>{if(r)return n.COLORS.content.inactive;switch(t){case"default":return e?n.COLORS.content.brand:n.COLORS.content.primary;case"negative":return n.COLORS.content.negative;case"positive":return n.COLORS.content.positive;case"warning":return e?n.COLORS.content.warning:n.COLORS.content.primary;default:return n.COLORS.content.primary}},o=t=>t==="default"?n.COLORS.background.brandLight:t==="negative"?n.COLORS.background.negative.light:t==="positive"?n.COLORS.background.positive.light:t==="ai"?n.COLORS.surface.aiLight:n.COLORS.background.warning.light;exports.generateBackgroundColor=o;exports.getIconColor=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/Theme.js"),i=(n,t,e)=>{if(t)return r.COLORS.content.inactive;switch(n){case"default":return e?r.COLORS.content.brand:r.COLORS.content.primary;case"negative":return r.COLORS.content.negative;case"positive":return r.COLORS.content.positive;case"warning":return e?r.COLORS.content.warning:r.COLORS.content.primary;case"primary":return r.COLORS.content.primaryInverse;default:return r.COLORS.content.primary}},a=n=>n==="default"?r.COLORS.background.brandLight:n==="negative"?r.COLORS.background.negative.light:n==="positive"?r.COLORS.background.positive.light:n==="ai"?r.COLORS.surface.aiLight:n==="primary"?r.COLORS.background.inverseLight:r.COLORS.background.warning.light;exports.generateBackgroundColor=a;exports.getIconColor=i;
 //# sourceMappingURL=theme.js.map

package/dist/cjs/components/icon-button/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../../src/components/icon-button/theme.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\n\nexport const getIconColor = (\n\ttype: IconButtonType,\n\tdisabled?: boolean,\n\tisSelected?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn COLORS.content.inactive;\n\t}\n\tswitch (type) {\n\t\tcase 'default':\n\t\t\treturn isSelected ? COLORS.content.brand : COLORS.content.primary;\n\t\tcase 'negative':\n\t\t\treturn COLORS.content.negative;\n\t\tcase 'positive':\n\t\t\treturn COLORS.content.positive;\n\t\tcase 'warning':\n\t\t\treturn isSelected ? COLORS.content.warning : COLORS.content.primary;\n\t\tdefault:\n\t\t\treturn COLORS.content.primary;\n\t}\n};\n\nexport const generateBackgroundColor = (type: IconButtonType) => {\n\tif (type === 'default') {\n\t\treturn COLORS.background.brandLight;\n\t}\n\tif (type === 'negative') {\n\t\treturn COLORS.background.negative.light;\n\t}\n\tif (type === 'positive') {\n\t\treturn COLORS.background.positive.light;\n\t}\n\n\tif (type === 'ai') {\n\t\treturn COLORS.surface.aiLight;\n\t}\n\n\treturn COLORS.background.warning.light;\n};\n"],"names":["getIconColor","type","disabled","isSelected","COLORS","generateBackgroundColor"],"mappings":"4HAGaA,EAAe,CAC3BC,EACAC,EACAC,IACI,CACJ,GAAID,EACH,OAAOE,EAAAA,OAAO,QAAQ,SAEvB,OAAQH,EAAA,CACP,IAAK,UACJ,OAAOE,EAAaC,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,QAC3D,IAAK,WACJ,OAAOA,EAAAA,OAAO,QAAQ,SACvB,IAAK,WACJ,OAAOA,EAAAA,OAAO,QAAQ,SACvB,IAAK,UACJ,OAAOD,EAAaC,EAAAA,OAAO,QAAQ,QAAUA,EAAAA,OAAO,QAAQ,QAC7D,QACC,OAAOA,EAAAA,OAAO,QAAQ,OAAA,CAEzB,EAEaC,EAA2BJ,GACnCA,IAAS,UACLG,EAAAA,OAAO,WAAW,WAEtBH,IAAS,WACLG,EAAAA,OAAO,WAAW,SAAS,MAE/BH,IAAS,WACLG,EAAAA,OAAO,WAAW,SAAS,MAG/BH,IAAS,KACLG,EAAAA,OAAO,QAAQ,QAGhBA,EAAAA,OAAO,WAAW,QAAQ"}
+{"version":3,"file":"theme.js","sources":["../../../../src/components/icon-button/theme.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\n\nexport const getIconColor = (\n\ttype: IconButtonType,\n\tdisabled?: boolean,\n\tisSelected?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn COLORS.content.inactive;\n\t}\n\tswitch (type) {\n\t\tcase 'default':\n\t\t\treturn isSelected ? COLORS.content.brand : COLORS.content.primary;\n\t\tcase 'negative':\n\t\t\treturn COLORS.content.negative;\n\t\tcase 'positive':\n\t\t\treturn COLORS.content.positive;\n\t\tcase 'warning':\n\t\t\treturn isSelected ? COLORS.content.warning : COLORS.content.primary;\n\t\tcase 'primary':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tdefault:\n\t\t\treturn COLORS.content.primary;\n\t}\n};\n\nexport const generateBackgroundColor = (type: IconButtonType) => {\n\tif (type === 'default') {\n\t\treturn COLORS.background.brandLight;\n\t}\n\tif (type === 'negative') {\n\t\treturn COLORS.background.negative.light;\n\t}\n\tif (type === 'positive') {\n\t\treturn COLORS.background.positive.light;\n\t}\n\tif (type === 'ai') {\n\t\treturn COLORS.surface.aiLight;\n\t}\n\tif (type === 'primary') {\n\t\treturn COLORS.background.inverseLight;\n\t}\n\n\treturn COLORS.background.warning.light;\n};\n"],"names":["getIconColor","type","disabled","isSelected","COLORS","generateBackgroundColor"],"mappings":"4HAGaA,EAAe,CAC3BC,EACAC,EACAC,IACI,CACJ,GAAID,EACH,OAAOE,EAAAA,OAAO,QAAQ,SAEvB,OAAQH,EAAA,CACP,IAAK,UACJ,OAAOE,EAAaC,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,QAC3D,IAAK,WACJ,OAAOA,EAAAA,OAAO,QAAQ,SACvB,IAAK,WACJ,OAAOA,EAAAA,OAAO,QAAQ,SACvB,IAAK,UACJ,OAAOD,EAAaC,EAAAA,OAAO,QAAQ,QAAUA,EAAAA,OAAO,QAAQ,QAC7D,IAAK,UACJ,OAAOA,EAAAA,OAAO,QAAQ,eACvB,QACC,OAAOA,EAAAA,OAAO,QAAQ,OAAA,CAEzB,EAEaC,EAA2BJ,GACnCA,IAAS,UACLG,EAAAA,OAAO,WAAW,WAEtBH,IAAS,WACLG,EAAAA,OAAO,WAAW,SAAS,MAE/BH,IAAS,WACLG,EAAAA,OAAO,WAAW,SAAS,MAE/BH,IAAS,KACLG,EAAAA,OAAO,QAAQ,QAEnBH,IAAS,UACLG,EAAAA,OAAO,WAAW,aAGnBA,EAAAA,OAAO,WAAW,QAAQ"}

package/dist/cjs/components/input/Input.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Se=require("../../assets/icons/info.svg.js"),r=require("react"),I=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),Me=require("../../assets/icons/errorInfo.svg.js"),Ee=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),Le=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,se)=>{const{placeholder:L,leftIcon:w,rightIcon:H,labelText:v,maxCharLimit:a,isRequired:R,hintText:_,type:o,state:T,validate:le,variant:c,button:h,suffixText:p,prefixText:k,onChangeText:A,value:x,noErrorHint:ae,reset:O,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:B,labelElement:F,autoGrow:j,minHeight:b,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:q,maxCharStyle:D,hightlightInputColor:xe,onKeyDownEvent:P,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:Ie,minCharsToTrigger:z,maxCharAlignment:ye,isDisabled:K=!1,allowUnsafeInput:Ce}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},N=w?.icon,V=H?.icon,[S,y]=r.useState(!1),[ve,M]=r.useState(!1),[d,W]=r.useState(),U=c==="x-small"?"12px":c==="small"?"18px":"22px",C=r.useContext(Ee.InputStyleContext),[X,E]=r.useState(""),Te=r.useRef(null),s=se??Te;r.useEffect(()=>{E(x||""),!x&&j&&(s.current.style.height=b||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(o))return t.addEventListener("wheel",$,{passive:!1}),()=>{t.removeEventListener("wheel",$)}},[]),r.useEffect(()=>{O&&E("")},[O]),r.useEffect(()=>{M(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{W(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{y(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&y(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{y(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{I.isFunction(t)&&t(...i)},G=()=>o==="zip"?6:2e3,Y=t=>{const i=a!==0?a:G(),g=[8],m=z,u=t.target.value;P&&(!u.length||u.length>=m)&&P(t),!ce&&(!u.length||u.length>=m)&&A(x||"",t),!B&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},$=t=>{t.preventDefault()},J=t=>{let i=t.target.value;const g=a!==0?a+1:G(),m=z;if(!Ce&&I.shouldSanitizeForType(o)&&(i=I.sanitizeUnsafeInput(i)),!B&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||E(i||""),m&&i&&i.length<m)return;A(i,t),j&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=b||"48px"));const u=le||I.validateInput;if(!u||!I.isFunction(u))return;const[je,be]=u(i,o,oe);y(!je),W(e.errorMessage?e.errorMessage:be)},Q=t=>{e.skipFocus||M(!0),f(e.onFocus?.(t))},Z=t=>{e.skipFocus||M(!1),f(e.onBlur?.(t))},ee=()=>n.jsxs(n.Fragment,{children:[o!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:K,type:["phonenumber","zip","number"].includes(o)?"number":o,value:X,onFocus:t=>Q(t),onBlur:t=>Z(t),placeholder:L||"Enter here",onChange:J,onClick:t=>f(e.onClick),onKeyDown:t=>Y(t)}),o==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:X,ref:s,onFocus:t=>Q(t),onBlur:t=>Z(t),onClick:t=>f(e.onClick),disabled:K,placeholder:L||"Enter here",onChange:J,onKeyDown:t=>Y(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:T,type:o,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!_||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Me.default,{width:16,height:16}),d||_]}),a>0&&q==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:D,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:c,state:T,width:e.width,isActive:T==="active"||ve,isInvalid:S,style:C?.InputWrapper??Ie??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!N&&n.jsx(l.IconHolder,{variant:c,iconSize:U,onClick:()=>f(w?.callback),isLeft:!0,style:C?.IconHolder??{},children:n.jsx(N,{})}),!!k&&n.jsx(l.PrefixHolder,{variant:c,children:k}),c==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:b,maxHeight:he,autoGrow:j,children:ee()}),["x-small","small"].includes(c)&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:ee()}),!!V&&n.jsx(l.IconHolder,{variant:c,iconSize:U,onClick:()=>f(H?.callback),isLeft:!1,children:n.jsx(V,{})}),!!p&&n.jsx(l.SuffixHolder,{variant:c,children:p}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!v||!!a)&&n.jsxs(l.InputHeader,{invalid:S,maxCharAlignment:ye,children:[F&&F,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[v,R?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[v,R?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(Le.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Se.default,{style:{marginTop:-3},width:18,height:18,color:S?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&q==="TOP"&&n.jsxs(l.MaxCharStyle,{style:D,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Me=require("../../assets/icons/info.svg.js"),r=require("react"),y=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),Ee=require("../../assets/icons/errorInfo.svg.js"),Le=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),we=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,le)=>{const{placeholder:w,leftIcon:H,rightIcon:R,labelText:v,maxCharLimit:a,isRequired:_,hintText:k,type:c,state:T,validate:se,variant:o,button:h,suffixText:p,prefixText:A,onChangeText:O,value:x,noErrorHint:ae,reset:B,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:F,labelElement:q,autoGrow:j,minHeight:b,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:xe,onKeyDownEvent:z,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:ye,minCharsToTrigger:K,maxCharAlignment:Ie,isDisabled:N=!1,allowUnsafeInput:Ce,leftIconStyle:ve}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},V=H?.icon,W=R?.icon,[S,I]=r.useState(!1),[Te,M]=r.useState(!1),[d,X]=r.useState(),U=o==="x-small"?"12px":o==="small"?"18px":"22px",C=r.useContext(Le.InputStyleContext),[G,E]=r.useState(""),je=r.useRef(null),s=le??je;r.useEffect(()=>{E(x||""),!x&&j&&(s.current.style.height=b||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{B&&E("")},[B]),r.useEffect(()=>{M(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{I(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&I(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{I(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{y.isFunction(t)&&t(...i)},Y=()=>c==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ce&&(!u.length||u.length>=m)&&O(x||"",t),!F&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const g=a!==0?a+1:Y(),m=K;if(!Ce&&y.shouldSanitizeForType(c)&&(i=y.sanitizeUnsafeInput(i)),!F&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||E(i||""),m&&i&&i.length<m)return;O(i,t),j&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=b||"48px"));const u=se||y.validateInput;if(!u||!y.isFunction(u))return;const[be,Se]=u(i,c,oe);I(!be),X(e.errorMessage?e.errorMessage:Se)},Z=t=>{e.skipFocus||M(!0),f(e.onFocus?.(t))},ee=t=>{e.skipFocus||M(!1),f(e.onBlur?.(t))},L=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:w||"Enter here",onChange:Q,onClick:t=>f(e.onClick),onKeyDown:t=>$(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:G,ref:s,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>f(e.onClick),disabled:N,placeholder:w||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:T,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!k||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Ee.default,{width:16,height:16}),d||k]}),a>0&&D==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:o,state:T,width:e.width,isActive:T==="active"||Te,isInvalid:S,style:C?.InputWrapper??ye??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!V&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(H?.callback),isLeft:!0,style:{...C?.IconHolder??{},...ve},children:n.jsx(V,{})}),!!A&&n.jsx(l.PrefixHolder,{variant:o,children:A}),o==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:b,maxHeight:he,autoGrow:j,children:L()}),o==="small"&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:L()}),o==="x-small"&&n.jsx(l.InputContainerXSmall,{height:e.height,type:e.type,children:L()}),!!W&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(R?.callback),isLeft:!1,children:n.jsx(W,{})}),!!p&&n.jsx(l.SuffixHolder,{variant:o,children:p}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!v||!!a)&&n.jsxs(l.InputHeader,{invalid:S,maxCharAlignment:Ie,children:[q&&q,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[v,_?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[v,_?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(we.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Me.default,{style:{marginTop:-3},width:18,height:18,color:S?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(l.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
 //# sourceMappingURL=Input.js.map

package/dist/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger  exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.IconHolder ?? {}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{['x-small', 'small'].includes(variant) && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger  exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}

package/dist/cjs/components/input/Input.styled.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:l})=>t?l||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),h=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,s=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
 	border-radius: ${t=>t.version==="2.0"?8:4}px;
 	background: ${t=>["disabled","read-only","disabled-invalid"].includes(t.state)?e.COLORS.background.base:"#fff"};
-	border: ${t=>h(t)}px solid
-		${t=>s({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
+	border: ${t=>s(t)}px solid
+		${t=>h({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
 	${t=>t.isActive?`box-shadow: inset 0px 0px 0px 1px ${t.hightlightInputColor?t.hightlightInputColor:e.COLORS.stroke.brand};`:""};
 	padding: ${t=>t.variant==="small"?"6px":"8px"};
 	height: ${t=>t.height||"100%"};
@@ -15,7 +15,7 @@
 
 	${t=>t.state==="read-only"?"opacity: 0.7":""};
 	${t=>t.state==="read-only"?"pointer-events: none":""};
-`,c=i.default.div`
+`,g=i.default.div`
 	min-height: ${t=>t.iconSize};
 	min-width: ${t=>t.iconSize};
 	display: flex;
@@ -23,7 +23,7 @@
 	justify-content: center;
 	overflow: hidden;
 	${t=>t.isLeft?`margin-left:${t.variant&&["small","x-small"].includes(t.variant)?"0px":"8px"}`:`margin-right: ${t.variant&&["small","x-small"].includes(t.variant)?"0px":"8px"}`};
-`,o=a.css`
+`,l=a.css`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -60,8 +60,8 @@
 		min-height: 100px;
 		resize: none;
 	}
-`,g=i.default(n.BodyPrimary)`
-	${o};
+`,c=i.default(n.BodyPrimary)`
+	${l};
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
 
 	${t=>t.autoGrow&&t.minHeight&&`
@@ -71,8 +71,8 @@
 		max-height: ${t.maxHeight||"100px"};
 	}
 	`}
-`,m=i.default(n.BodySecondary)`
-	${o};
+`,u=i.default(n.BodySecondary)`
+	${l};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -82,7 +82,18 @@
 		}
 	}
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
-`,p=i.default.div`
+`,p=i.default(n.BodyCaption)`
+	${l};
+	input {
+		min-height: 16px;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
+`,m=i.default.div`
 	display: flex;
 	justify-content: space-between;
 	${t=>t.maxCharAlignment?"align-items: flex-end;":""}
@@ -100,10 +111,10 @@
 		color: ${e.COLORS.content.negative};
 		padding-left: 4px;
 	}
-`,u=i.default(n.BodySecondary)`
+`,f=i.default(n.BodySecondary)`
 	color: ${e.COLORS.content.secondary} !important;
 	margin-top: ${t=>t.position==="BOTTOM"?"8px":"0px"};
-`,f=i.default(n.BodyCaption)`
+`,v=i.default(n.BodyCaption)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${t=>t.invalid?e.COLORS.content.negative:e.COLORS.content.secondary} !important;
@@ -117,7 +128,7 @@
 		width: 16px;
 		height: 16px;
 	}
-`,v=i.default.div`
+`,y=i.default.div`
 	${t=>t.width?`width: ${t.width}`:""};
 	${t=>t.height&&t.type=="multiline"?`height: ${t.height}`:""};
 	${t=>t.state==="disabled"||t.state==="disabled-invalid"?a.css`
@@ -138,15 +149,15 @@
 		align-items: center;
 		justify-content: space-between;
 	}
-`,y=i.default(n.BodyPrimary)`
+`,$=i.default(n.BodyPrimary)`
 	overflow: unset;
 	margin-left: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
 	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
 	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
-`,$=i.default(n.BodyPrimary)`
+`,b=i.default(n.BodyPrimary)`
 	overflow: unset;
 	margin-right: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
 	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
 	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
-`;exports.IconHolder=c;exports.InputContainer=g;exports.InputContainerSmall=m;exports.InputFooter=f;exports.InputHeader=p;exports.InputWrapper=x;exports.MaxCharStyle=u;exports.PrefixHolder=y;exports.RootContainer=v;exports.SuffixHolder=$;
+`;exports.IconHolder=g;exports.InputContainer=c;exports.InputContainerSmall=u;exports.InputContainerXSmall=p;exports.InputFooter=v;exports.InputHeader=m;exports.InputWrapper=x;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=y;exports.SuffixHolder=b;
 //# sourceMappingURL=Input.styled.js.map

package/dist/cjs/components/input/Input.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputHeader","MaxCharStyle","InputFooter","BodyCaption","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
+{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/dist/cjs/components/list-item/ListItem.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),m=require("./themes.js"),y=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),g=require("./ListItem.styled.js"),x=u.forwardRef(({id:h,onSelect:i,variant:t="default",trailingIcon:l,leadingIcon:s,subText:d,listItem:r,borderBottom:p,customComponent:n,customListItemLabel:o,version:c,...f},j)=>e.jsx(g.ListItem,{ref:j,id:h,variant:t,onClick:()=>i&&i(r),borderBottom:p,version:c,...f,children:n?e.jsx(e.Fragment,{children:n}):e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[!!s&&s,e.jsxs("div",{style:{display:"flex",rowGap:"4px",flexDirection:"column",overflow:"hidden"},children:[o?e.jsx(e.Fragment,{children:o}):e.jsx(e.Fragment,{children:!!r&&e.jsx(y.BodySecondary,{style:{fontSize:`${c==="2.0"?12:14}px`,color:m.getColor(t),textOverflow:"ellipsis",display:"block"},children:r.label})}),!!d&&e.jsx(y.BodyCaption,{style:{color:t==="inactive"?a.COLORS.content.inactive:a.COLORS.text.secondary},children:d})]}),!!l&&e.jsx("div",{style:{display:"flex",marginLeft:"auto"},children:l})]})}));x.displayName="ListItem";exports.ListItem=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),g=require("./themes.js"),a=require("../TypographyStyle.js"),x=require("../../constants/Theme.js"),q=require("./ListItem.styled.js"),h=m.forwardRef(({id:p,onSelect:l,variant:r="default",trailingIcon:s,leadingIcon:d,subText:c,listItem:i,borderBottom:f,customComponent:n,customListItemLabel:o,version:t,brandSelectedRow:y,...j},u)=>e.jsx(q.ListItem,{ref:u,id:p,variant:r,onClick:()=>l&&l(i),borderBottom:f,version:t,brandSelectedRow:y,...j,children:n?e.jsx(e.Fragment,{children:n}):e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[!!d&&d,e.jsxs("div",{style:{display:"flex",rowGap:"4px",flexDirection:"column",overflow:"hidden"},children:[o?e.jsx(e.Fragment,{children:o}):e.jsx(e.Fragment,{children:!!i&&e.jsx(a.BodySecondary,{style:{fontSize:`${t==="2.0"||t==="3.0"?12:14}px`,color:g.getColor(r,t,y),textOverflow:"ellipsis",display:"block"},children:i.label})}),!!c&&e.jsx(a.BodyCaption,{style:{color:r==="inactive"?x.COLORS.content.inactive:x.COLORS.text.secondary},children:c})]}),!!s&&e.jsx("div",{style:{display:"flex",marginLeft:"auto"},children:s})]})}));h.displayName="ListItem";exports.ListItem=h;
 //# sourceMappingURL=ListItem.js.map

package/dist/cjs/components/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${version === '2.0' ? 12 : 14}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":"4QAOaA,EAAWC,EAAAA,WACvB,CACC,CACC,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,UACV,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EAEJC,IAGCC,EAAAA,IAACC,EAAAA,SAAA,CACA,IAAAF,EACA,GAAAZ,EACA,QAAAE,EACA,QAAS,IAAMD,GAAYA,EAASK,CAAQ,EAC5C,aAAAC,EACA,QAAAG,EACC,GAAGC,EAEH,SAAAH,EACAK,MAAAE,EAAAA,SAAA,CAAG,SAAAP,CAAA,CAAgB,EAEnBQ,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,IAAK,EACL,MAAO,MAAA,EAGP,SAAA,CAAA,CAAC,CAACZ,GAAeA,EAClBY,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,MACR,cAAe,SACf,SAAU,QAAA,EAGV,SAAA,CAAAP,oBACG,SAAAA,CAAA,CAAoB,EAEvBI,EAAAA,IAAAE,EAAAA,SAAA,CACE,SAAA,CAAC,CAACT,GACFO,EAAAA,IAACI,EAAAA,cAAA,CACA,MAAO,CACN,SAAU,GAAGP,IAAY,MAAQ,GAAK,EAAE,KACxC,MAAOQ,EAAAA,SAAShB,CAAO,EACvB,aAAc,WACd,QAAS,OAAA,EAGT,SAAAI,EAAS,KAAA,CAAA,EAGb,EAGA,CAAC,CAACD,GACFQ,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MACCjB,IAAY,WACTkB,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,KAAK,SAAA,EAGhB,SAAAf,CAAA,CAAA,CACF,CAAA,CAAA,EAGD,CAAC,CAACF,GACFU,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QACzC,SAAAV,CAAA,CACF,CAAA,CAAA,CAAA,CAEF,CAAA,CAKL,EAEAL,EAAS,YAAc"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\tbrandSelectedRow,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${\n\t\t\t\t\t\t\t\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 12 : 14\n\t\t\t\t\t\t\t\t\t\t\t\t}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant, version, brandSelectedRow),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","brandSelectedRow","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":"4QAOaA,EAAWC,EAAAA,WACvB,CACC,CACC,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,UACV,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,GAAGC,CAAA,EAEJC,IAGCC,EAAAA,IAACC,EAAAA,SAAA,CACA,IAAAF,EACA,GAAAb,EACA,QAAAE,EACA,QAAS,IAAMD,GAAYA,EAASK,CAAQ,EAC5C,aAAAC,EACA,QAAAG,EACA,iBAAAC,EACC,GAAGC,EAEH,SAAAJ,EACAM,MAAAE,EAAAA,SAAA,CAAG,SAAAR,CAAA,CAAgB,EAEnBS,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,IAAK,EACL,MAAO,MAAA,EAGP,SAAA,CAAA,CAAC,CAACb,GAAeA,EAClBa,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,MACR,cAAe,SACf,SAAU,QAAA,EAGV,SAAA,CAAAR,oBACG,SAAAA,CAAA,CAAoB,EAEvBK,EAAAA,IAAAE,EAAAA,SAAA,CACE,SAAA,CAAC,CAACV,GACFQ,EAAAA,IAACI,EAAAA,cAAA,CACA,MAAO,CACN,SAAU,GACTR,IAAY,OAASA,IAAY,MAAQ,GAAK,EAC/C,KACA,MAAOS,EAAAA,SAASjB,EAASQ,EAASC,CAAgB,EAClD,aAAc,WACd,QAAS,OAAA,EAGT,SAAAL,EAAS,KAAA,CAAA,EAGb,EAGA,CAAC,CAACD,GACFS,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MACClB,IAAY,WACTmB,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,KAAK,SAAA,EAGhB,SAAAhB,CAAA,CAAA,CACF,CAAA,CAAA,EAGD,CAAC,CAACF,GACFW,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QACzC,SAAAX,CAAA,CACF,CAAA,CAAA,CAAA,CAEF,CAAA,CAKL,EAEAL,EAAS,YAAc"}

package/dist/cjs/components/list-item/ListItem.styled.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./themes.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=i(e),n=s.default.div`
-	border-bottom: ${t=>t.borderBottom||`${t.version==="2.0"?0:1}px solid ${o.COLORS.stroke.primary}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./themes.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(t),d=n.default.div`
+	border-bottom: ${e=>e.borderBottom||`${e.version==="2.0"||e.version==="3.0"?0:1}px solid ${o.COLORS.stroke.primary}`};
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 12px;
-	padding: ${t=>t.version==="2.0"?"8px 12px":"12px 16px"};
-	${t=>r.getTheme(t.variant,t.version)};
-	border-radius: ${t=>t.version==="2.0"?8:0}px;
-`;exports.ListItem=n;
+	padding: ${e=>e.version==="2.0"?"8px 12px":"12px 16px"};
+	${e=>r.getTheme(e.variant,e.version,e.brandSelectedRow)};
+	border-radius: ${e=>e.brandSelectedRow?0:e.version==="2.0"?8:0}px;
+`;exports.ListItem=d;
 //# sourceMappingURL=ListItem.styled.js.map

package/dist/cjs/components/list-item/ListItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"mPAKaA,EAAWC,EAAAA,QAAO;AAAA,kBAKZC,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,MAAQ,EAAI,CAAC,YAAYC,EAAAA,OAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1DD,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,WAASF,EAAM,QAASA,EAAM,OAAO,CAAC;AAAA,kBACjCA,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA"}
+{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' || props.version === '3.0' ? 0 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version, props.brandSelectedRow)};\n\tborder-radius: ${(props) =>\n\t\tprops.brandSelectedRow ? 0 : props.version === '2.0' ? 8 : 0}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"mPAKaA,EAAWC,EAAAA,QAAO;AAAA,kBAMZC,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,OAASA,EAAM,UAAY,MAAQ,EAAI,CAAC,YAC5DC,EAAAA,OAAO,OAAO,OACf,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKSD,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,EAAAA,SAASF,EAAM,QAASA,EAAM,QAASA,EAAM,gBAAgB,CAAC;AAAA,kBACzDA,GACjBA,EAAM,iBAAmB,EAAIA,EAAM,UAAY,MAAQ,EAAI,CAAC;AAAA"}

package/dist/cjs/components/list-item/themes.js

@@ -1,30 +1,49 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("../../constants/Theme.js");function c(t){switch(t){case"default":case"readonly":return`${e.COLORS.text.primary}`;case"selected":return`${e.COLORS.content.positive}`;case"inactive":return`${e.COLORS.content.inactive}`;case"error":return`${e.COLORS.content.negative}`;case"placeholder":return`${e.COLORS.content.placeholder}`;default:return`${e.COLORS.text.primary}`}}function a(t,o){switch(t){case"default":return r.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js");function a(o,c,t){switch(o){case"default":case"readonly":return`${r.COLORS.text.primary}`;case"selected":return c==="3.0"||t?`${r.COLORS.text.primary}`:`${r.COLORS.content.positive}`;case"inactive":return`${r.COLORS.content.inactive}`;case"error":return`${r.COLORS.content.negative}`;case"placeholder":return`${r.COLORS.content.placeholder}`;default:return`${r.COLORS.text.primary}`}}function n(o,c,t){if(t&&o==="selected")return e.css`
+			color: ${r.COLORS.text.primary};
+			background: ${r.COLORS.background.brandLight};
+			&:hover {
+				background: ${r.COLORS.background.brandLight};
+			}
+		`;switch(o){case"default":return e.css`
 				cursor: pointer;
-				color: ${e.COLORS.text.primary};
-				background-color: ${e.COLORS.surface.standard};
+				color: ${r.COLORS.text.primary};
+				background-color: ${r.COLORS.surface.standard};
 				&:hover {
-					background-color: ${e.COLORS.surface.hovered};
+					background-color: ${r.COLORS.surface.hovered};
 				}
-			`;case"selected":return r.css`
-				color: ${e.COLORS.content.positive};
-				background: ${e.COLORS.background.positive.light};
-				box-shadow: ${o==="2.0"?"0":"0 2px 8px rgba(0, 0, 0, 0.12)"};
-			`;case"inactive":return r.css`
-				color: ${e.COLORS.content.inactive};
-				background-color: ${e.COLORS.surface.standard};
+			`;case"focused":return e.css`
+				cursor: pointer;
+				color: ${r.COLORS.text.primary};
+				background-color: ${r.COLORS.surface.hovered};
+				&:hover {
+					background-color: ${r.COLORS.surface.hovered};
+				}
+			`;case"selected":return c==="3.0"?e.css`
+					color: ${r.COLORS.text.primary};
+					background: ${r.COLORS.background.brandLight};
+					&:hover {
+						background: ${r.COLORS.background.brandLight};
+					}
+				`:e.css`
+				color: ${r.COLORS.content.positive};
+				background: ${r.COLORS.background.positive.light};
+				box-shadow: ${c==="2.0"?"0":"0 2px 8px rgba(0, 0, 0, 0.12)"};
+			`;case"inactive":return e.css`
+				color: ${r.COLORS.content.inactive};
+				background-color: ${r.COLORS.surface.standard};
 				cursor: not-allowed;
-			`;case"readonly":return r.css`
-				color: ${e.COLORS.text.primary};
-			`;case"separator":return r.css`
-				color: ${e.COLORS.content.inactive};
-				background-color: ${e.COLORS.background.base};
+			`;case"readonly":return e.css`
+				color: ${r.COLORS.text.primary};
+			`;case"separator":return e.css`
+				color: ${r.COLORS.content.inactive};
+				background-color: ${r.COLORS.background.base};
 				cursor: none;
 				padding: 8px 16px;
-			`;default:return r.css`
-				color: ${e.COLORS.text.primary};
-				background-color: ${e.COLORS.surface.standard};
+			`;default:return e.css`
+				color: ${r.COLORS.text.primary};
+				background-color: ${r.COLORS.surface.standard};
 				&:hover {
-					background-color: ${e.COLORS.surface.hovered};
+					background-color: ${r.COLORS.surface.hovered};
 				}
-			`}}exports.getColor=c;exports.getTheme=a;
+			`}}exports.getColor=a;exports.getTheme=n;
 //# sourceMappingURL=themes.js.map

package/dist/cjs/components/list-item/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(variant: Variant) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(variant: Variant, version?: '1.0' | '2.0') {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","COLORS","getTheme","version","css"],"mappings":"2JAIO,SAASA,EAASC,EAAkB,CAC1C,OAAQA,EAAA,CACP,IAAK,UACL,IAAK,WACJ,MAAO,GAAGC,EAAAA,OAAO,KAAK,OAAO,GAC9B,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,QACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,cACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,WAAW,GACrC,QACC,MAAO,GAAGA,EAAAA,OAAO,KAAK,OAAO,EAAA,CAEhC,CAEO,SAASC,EAASF,EAAkBG,EAAyB,CACnE,OAAQH,EAAA,CACP,IAAK,UACJ,OAAOI,EAAAA;AAAAA;AAAAA,aAEGH,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,kBAClBA,SAAO,WAAW,SAAS,KAAK;AAAA,kBAChCE,IAAY,MACvB,IACA,+BAA+B;AAAA,KAEpC,IAAK,WACJ,OAAOC,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,KAAK,OAAO;AAAA,KAE9B,IAAK,YACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,KAI5C,QACC,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAAA,CAI/C"}
+{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0' || brandSelectedRow)\n\t\t\t\treturn `${COLORS.text.primary}`;\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tif (brandSelectedRow && variant === 'selected') {\n\t\treturn css`\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t&:hover {\n\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t}\n\t\t`;\n\t}\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'focused':\n\t\t\t// Keyboard-navigation highlight: use the hover background, not brand.\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0') {\n\t\t\t\treturn css`\n\t\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t`;\n\t\t\t}\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","version","brandSelectedRow","COLORS","getTheme","css"],"mappings":"2JAIO,SAASA,EACfC,EACAC,EACAC,EACC,CACD,OAAQF,EAAA,CACP,IAAK,UACL,IAAK,WACJ,MAAO,GAAGG,EAAAA,OAAO,KAAK,OAAO,GAC9B,IAAK,WACJ,OAAIF,IAAY,OAASC,EACjB,GAAGC,EAAAA,OAAO,KAAK,OAAO,GACvB,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,QACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,cACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,WAAW,GACrC,QACC,MAAO,GAAGA,EAAAA,OAAO,KAAK,OAAO,EAAA,CAEhC,CAEO,SAASC,EACfJ,EACAC,EACAC,EACC,CACD,GAAIA,GAAoBF,IAAY,WACnC,OAAOK,EAAAA;AAAAA,YACGF,EAAAA,OAAO,KAAK,OAAO;AAAA,iBACdA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,kBAE3BA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,IAI7C,OAAQH,EAAA,CACP,IAAK,UACJ,OAAOK,EAAAA;AAAAA;AAAAA,aAEGF,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,KAG7C,IAAK,UAEJ,OAAOE,EAAAA;AAAAA;AAAAA,aAEGF,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,yBAErBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAIF,IAAY,MACRI,EAAAA;AAAAA,cACGF,EAAAA,OAAO,KAAK,OAAO;AAAA,mBACdA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,oBAE3BA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,MAItCE,EAAAA;AAAAA,aACGF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,kBAClBA,SAAO,WAAW,SAAS,KAAK;AAAA,kBAChCF,IAAY,MACvB,IACA,+BAA+B;AAAA,KAEpC,IAAK,WACJ,OAAOI,EAAAA;AAAAA,aACGF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAOE,EAAAA;AAAAA,aACGF,EAAAA,OAAO,KAAK,OAAO;AAAA,KAE9B,IAAK,YACJ,OAAOE,EAAAA;AAAAA,aACGF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,KAI5C,QACC,OAAOE,EAAAA;AAAAA,aACGF,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAAA,CAI/C"}

package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../constants/Theme.js"),y=require("../TypographyStyle.js"),x=require("./MenuItem.js"),M=require("./MultiLevelDropdown.styled.js"),m=({width:t,onDropdownItemClick:n,option:r,parents:o,allowParentSelection:u,maxLevels:s,hideGroupLabel:i,currentLevel:l,renderNestedMenu:p})=>e.jsxs(M.GroupedMenuListContainer,{children:[!i&&e.jsx(y.BodyTiny,{style:{padding:"4px 8px 4px 12px",cursor:"default"},color:a.COLORS.content.placeholder,children:r.label}),r.options.map((c,d)=>e.jsx(x.MenuItem,{width:t,onDropdownItemClick:n,option:c,parents:o,allowParentSelection:u,maxLevels:s,currentLevel:l,renderNestedMenu:p},d))]});exports.GroupedMenuList=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../constants/Theme.js"),x=require("../TypographyStyle.js"),M=require("./MenuItem.js"),m=require("./MultiLevelDropdown.styled.js"),h=({width:n,onDropdownItemClick:o,option:t,parents:u,allowParentSelection:s,maxLevels:i,hideGroupLabel:l,currentLevel:p,renderNestedMenu:c,version:r})=>e.jsxs(m.GroupedMenuListContainer,{version:r,children:[!l&&e.jsx(x.BodyTiny,{style:{padding:"4px 8px 4px 12px",cursor:"default"},color:y.COLORS.content.placeholder,children:t.label}),t.options.map((d,a)=>e.jsx(M.MenuItem,{width:n,onDropdownItemClick:o,option:d,parents:u,allowParentSelection:s,maxLevels:i,currentLevel:p,renderNestedMenu:c,version:r},a))]});exports.GroupedMenuList=h;
 //# sourceMappingURL=GroupedMenuList.js.map

package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":"qQAWaA,EAaR,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,CACD,WAEGC,2BAAA,CACC,SAAA,CAAA,CAACH,GACDI,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,QAAS,mBACT,OAAQ,SAAA,EAET,MAAOC,EAAAA,OAAO,QAAQ,YAErB,SAAAV,EAAO,KAAA,CAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,EAAQW,IAC5BH,EAAAA,IAACI,EAAAA,SAAA,CAEA,MAAAd,EACA,oBAAAC,EACA,OAAQC,EACR,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,iBAAAC,CAAA,EARKK,CAAA,CAUN,CAAA,EACF"}
+{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer version={version}>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","version","jsxs","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":"qQAWaA,EAcR,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,QAAAC,CACD,IAEEC,OAACC,EAAAA,0BAAyB,QAAAF,EACxB,SAAA,CAAA,CAACH,GACDM,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,QAAS,mBACT,OAAQ,SAAA,EAET,MAAOC,EAAAA,OAAO,QAAQ,YAErB,SAAAZ,EAAO,KAAA,CAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,EAAQa,IAC5BH,EAAAA,IAACI,EAAAA,SAAA,CAEA,MAAAhB,EACA,oBAAAC,EACA,OAAQC,EACR,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,iBAAAC,EACA,QAAAC,CAAA,EATKM,CAAA,CAWN,CAAA,EACF"}

package/dist/cjs/components/multi-level-dropdown/MenuItem.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),L=require("../../assets/icons/chevronRight2.svg.js"),m=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),p=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},u=p(m),T=({width:r,onDropdownItemClick:o,option:e,parents:f,allowParentSelection:j,maxLevels:h,currentLevel:b,renderNestedMenu:x})=>{const[S,C]=u.default.useState(!1),[a,O]=u.default.useState(!1),[g,y]=u.default.useState({top:0,left:0}),R=m.useRef({top:0,left:0}),i=!!e.children&&e.children.length>0,d=i&&(h===void 0||b<h),v=()=>{!o||(e.disabled??!1)||(!i||j)&&o(e,f)},I=l=>{const c=l.currentTarget.getBoundingClientRect();y({top:c.top,left:c.right}),R.current={top:c.top,left:c.right}};return t.jsxs(s.MenuItemWrapper,{onMouseEnter:l=>{d&&(C(!0),I(l))},onMouseLeave:()=>{C(!1)},onClick:l=>{l.stopPropagation(),v()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:S,isHovered:a,isDisabled:e.disabled??!1,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),i?t.jsx(s.TrailingIconContainer,{children:t.jsx(L.default,{width:16,height:16,color:!d||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&d&&S&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:g.top,left:g.left,children:t.jsx(s.SubMenuListContainer,{children:x(e.children,[...f,e],b+1)})})})]})};exports.MenuItem=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../../assets/icons/chevronRight2.svg.js"),x=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),v=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=v(x),q=({width:r,onDropdownItemClick:f,option:e,parents:O,allowParentSelection:y,maxLevels:S,currentLevel:h,renderNestedMenu:R,version:l})=>{const[C,b]=o.default.useState(!1),[c,g]=o.default.useState(!1),[m,j]=o.default.useState({top:0,left:0}),L=x.useRef({top:0,left:0}),d=!!e.children&&e.children.length>0,u=d&&(S===void 0||h<S),p=()=>{!f||(e.disabled??!1)||(!d||y)&&f(e,O)},I=a=>{const i=a.currentTarget.getBoundingClientRect();j({top:i.top,left:i.right}),L.current={top:i.top,left:i.right}};return t.jsxs(s.MenuItemWrapper,{version:l,onMouseEnter:a=>{u&&(b(!0),I(a))},onMouseLeave:()=>{b(!1)},onClick:a=>{a.stopPropagation(),p()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:C,isHovered:c,isDisabled:e.disabled??!1,version:l,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),d?t.jsx(s.TrailingIconContainer,{children:t.jsx(T.default,{width:16,height:16,color:!u||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&u&&C&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:m.top,left:m.left,children:t.jsx(s.SubMenuListContainer,{version:l,children:R(e.children,[...O,e],h+1)})})})]})};exports.MenuItem=q;
 //# sourceMappingURL=MenuItem.js.map