@bikdotai/bik-component-library 0.0.838-beta.0 → 0.0.838-beta.2

package/dist/esm/components/input/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\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\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","BodyCaption"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { stripHtmlTags } from '../../helpers/sanitize';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\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\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(stripHtmlTags(e.target.value))}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","stripHtmlTags","BodyCaption"],"mappings":";;;;;;AAkCA,MAAMA,IAAsC,CAAC;AAAA,EAC5C,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GACtCG,IAAWC,EAAyB,IAAI,GAIxCC,IAAWV,KADG,CAAC,KAAK,KAAK,SAAS,EAAE,GAGpCW,IAAgB,CAAC,MAAuC;AAM7D,QAJCD,EAAS,SAAS,EAAE,GAAG,KACvBA,EAAS,SAAS,EAAE,OAAO,KAC3BA,EAAS,SAAS,EAAE,KAAK,GAEJ;AACrB,QAAE,eAAA;AACF,YAAME,IAAeT,EAAW,KAAA;AAChC,MAAIS,KAAgB,CAACnB,EAAM,SAASmB,CAAY,MAC/CrB,EAAc,CAAC,GAAGE,GAAOmB,CAAY,CAAC,GACtCR,EAAc,EAAE;AAAA,IAElB,MAAA,CAAW,EAAE,QAAQ,eAAeD,MAAe,MAAMV,EAAM,SAAS,KAEvEF,EAAcE,EAAM,MAAM,GAAG,EAAE,CAAC;AAAA,EAElC,GAEMoB,IAAmB,CAACC,MAA0B;AACnD,IAAAvB,EAAcE,EAAM,OAAO,CAACsB,GAAGC,MAAUA,MAAUF,CAAa,CAAC;AAAA,EAClE,GAEMG,IAAc,MAAM;AACzB,IAAAV,EAAW,EAAI;AAAA,EAChB,GAEMW,IAAa,MAAM;AACxB,IAAAX,EAAW,EAAK;AAEhB,UAAMK,IAAeT,EAAW,KAAA;AAChC,IAAIS,KAAgB,CAACnB,EAAM,SAASmB,CAAY,MAC/CrB,EAAc,CAAC,GAAGE,GAAOmB,CAAY,CAAC,GACtCR,EAAc,EAAE;AAAA,EAElB,GAEMe,IAAuB,MAAM;AAClC,IAAAX,EAAS,SAAS,MAAA;AAAA,EACnB,GAEMY,IAAiBC;AAAA,IACtB,CAAC,CAACvB;AAAA,IACFC;AAAA,IACAE;AAAA,IACAK;AAAA,EAAA,GAEKgB,IAAsBhB,IAAU,CAAA,IAAKiB,EAAA,GACrCC,IAAYC,EAAA,GACZC,IAAkBC,EAAA,GAClBC,IAAaC,EAAc9B,CAAW;AAE5C,SACC,gBAAA+B;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAA;AAAA,MACxD,IAAI5B;AAAA,MAEH,UAAA;AAAA,QAAAR,KACA,gBAAAqC;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO1B,IACJ2B,EAAO,QAAQ,QACfnC,IACAmC,EAAO,QAAQ,WACftC,KAAcsC,EAAO,QAAQ;AAAA,YAAA;AAAA,YAGhC,UAAAvC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,gBAAAoC;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAOV;AAAA,YACP,SAASD;AAAA,YACT,cAAc,CAAC,MAAM;AACpB,cAAKb,KACJ,OAAO,OAAO,EAAE,cAAc,OAAOgB,CAAmB;AAAA,YAE1D;AAAA,YACA,cAAc,CAAC,MAAM;AACpB,cAAKhB,MACJ,EAAE,cAAc,MAAM,SAAS,aAC9BR,IAAQmC,EAAO,OAAO,SAAS,UAAUA,EAAO,OAAO,OACxD;AAAA,YAEF;AAAA,YAEC,UAAA;AAAA,cAAAxC,EAAM,IAAI,CAACyC,GAAMlB,MACjB,gBAAAc,EAAC,OAAA,EAAgB,OAAON,GACvB,UAAA;AAAA,gBAAA,gBAAAO,EAAC,UAAM,UAAAG,EAAA,CAAK;AAAA,gBACZ,gBAAAH;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAOL;AAAA,oBACP,SAAS,CAACS,MAAM;AACf,sBAAAA,EAAE,gBAAA,GACFtB,EAAiBG,CAAK;AAAA,oBACvB;AAAA,oBACA,cAAc,CAACmB,MAAM;AACpB,sBAAAA,EAAE,cAAc,MAAM,QAAQF,EAAO,QAAQ;AAAA,oBAC9C;AAAA,oBACA,cAAc,CAACE,MAAM;AACpB,sBAAAA,EAAE,cAAc,MAAM,QAAQF,EAAO,QAAQ;AAAA,oBAC9C;AAAA,oBACA,cAAY,UAAUC,CAAI;AAAA,oBAC1B,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAED,EAAA,GAjBSlB,CAkBV,CACA;AAAA,cACD,gBAAAe;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,KAAKvB;AAAA,kBACL,MAAK;AAAA,kBACL,OAAOL;AAAA,kBACP,UAAU,CAAC,MAAMC,EAAcgC,EAAc,EAAE,OAAO,KAAK,CAAC;AAAA,kBAC5D,WAAWzB;AAAA,kBACX,SAASM;AAAA,kBACT,QAAQC;AAAA,kBACR,aACCzB,EAAM,WAAW,KAAOD,KAAe,CAACc,IACrCd,IACA;AAAA,kBAEJ,OAAOoC;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,SAEC,CAAC,CAAChC,KAAY,CAAC,CAACE,MACjB,gBAAAiC;AAAA,UAACM;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAOvC,IACJmC,EAAO,QAAQ,WACfpC,KAAiBoC,EAAO,QAAQ;AAAA,YAAA;AAAA,YAGnC,eAAgBrC;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAIJ;"}

package/dist/esm/components/input/Input-helper.d.ts

@@ -1,5 +1,12 @@
 import { InputTypeI } from './Input.model';
 export declare const isFunction: (fn: any) => boolean;
+/**
+ * Strip any HTML markup from a plain-text input value. Backed by DOMPurify
+ * (parser-based, immune to the malformed-tag bypasses a regex misses); on the
+ * server DOMPurify is unavailable so a regex tag-strip is used as a fallback.
+ * Text characters like `<` / `>` in ordinary content are preserved because
+ * DOMPurify keeps text content and only removes recognised tags.
+ */
 export declare const sanitizeUnsafeInput: (input: string) => string;
 export declare const shouldSanitizeForType: (type: InputTypeI) => boolean;
 export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {

package/dist/esm/components/input/Input-helper.js

@@ -1,48 +1,39 @@
-import { phone as a } from "phone";
-const E = (t) => t && typeof t == "function", u = /<(script|style|iframe|object|noscript|template)\b[^<]*(?:(?!<\/\1>)<[^<]*)*<\/\1\s*>/gi, m = /<\/?(script|style|iframe|object|embed|link|meta|base|form|svg|math|noscript|template)\b[^>]*>/gi, c = /(<[a-zA-Z][^>]*?)\s+on[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/g, p = (t) => {
-  if (!t)
-    return t;
-  let e = t.replace(u, "");
-  e = e.replace(m, "");
-  let n;
-  do
-    n = e, e = e.replace(c, "$1");
-  while (e !== n);
-  return e;
-}, o = [
+import { phone as s } from "phone";
+import { stripHtmlTags as a } from "../../helpers/sanitize.js";
+const c = (e) => e && typeof e == "function", d = (e) => e && a(e), m = [
   "text",
   "multiline",
   "email",
   "url",
   "password"
-], b = (t) => o.includes(t), d = (t, e, n = {}) => {
+], h = (e) => m.includes(e), E = (e, t, n = {}) => {
   let l;
-  const s = ["phonenumber", "zip", "number"].includes(e), r = s ? t ? Number(t) : null : t;
+  const u = ["phonenumber", "zip", "number"].includes(t), r = u ? e ? Number(e) : null : e;
   if (r == null || r === "")
     return [!0, ""];
-  if (s && String(r).length && (n.min && r < n.min || n.max && r > n.max))
+  if (u && String(r).length && (n.min && r < n.min || n.max && r > n.max))
     return [
       !1,
       `Enter valid number between ${n.min} and ${n.max}`
     ];
-  if (e === "email")
+  if (t === "email")
     return l = /(.+)@(.+){2,}\.(.+){2,}/, r.match(l) ? [!0, ""] : [!1, "Enter a valid email id"];
-  if (e === "url")
+  if (t === "url")
     return l = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/, r.match(l) ? [!0, ""] : [!1, "Enter a valid url"];
-  if (e === "number")
+  if (t === "number")
     return r >= 0 ? [!0, ""] : [!1, "Enter a valid number"];
-  if (e === "zip")
+  if (t === "zip")
     return String(r).trim().length === 6 ? [!0, ""] : [!1, "Enter a valid zip code"];
-  if (e === "phonenumber") {
-    const { isValid: i } = a("+" + String(r));
+  if (t === "phonenumber") {
+    const { isValid: i } = s("+" + String(r));
     return i ? [!0, ""] : [!1, "Enter a valid phonenumber"];
   } else
     return r?.trim().length > 0 ? [!0, ""] : [!1, "Enter a valid data"];
 };
 export {
-  E as isFunction,
-  p as sanitizeUnsafeInput,
-  b as shouldSanitizeForType,
-  d as validateInput
+  c as isFunction,
+  d as sanitizeUnsafeInput,
+  h as shouldSanitizeForType,
+  E as validateInput
 };
 //# sourceMappingURL=Input-helper.js.map

package/dist/esm/components/input/Input-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input-helper.js","sources":["../../../../src/components/input/Input-helper.ts"],"sourcesContent":["import { phone } from 'phone';\nimport { InputTypeI } from './Input.model';\n\nexport const isFunction = (fn): boolean => {\n\treturn fn && typeof fn === 'function';\n};\n\nconst PAIRED_DANGEROUS_TAGS =\n\t/<(script|style|iframe|object|noscript|template)\\b[^<]*(?:(?!<\\/\\1>)<[^<]*)*<\\/\\1\\s*>/gi;\nconst UNPAIRED_DANGEROUS_TAGS =\n\t/<\\/?(script|style|iframe|object|embed|link|meta|base|form|svg|math|noscript|template)\\b[^>]*>/gi;\nconst INLINE_EVENT_HANDLERS =\n\t/(<[a-zA-Z][^>]*?)\\s+on[a-zA-Z]+\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]+)/g;\n\nexport const sanitizeUnsafeInput = (input: string): string => {\n\tif (!input) {\n\t\treturn input;\n\t}\n\tlet cleaned = input.replace(PAIRED_DANGEROUS_TAGS, '');\n\tcleaned = cleaned.replace(UNPAIRED_DANGEROUS_TAGS, '');\n\tlet prev: string;\n\tdo {\n\t\tprev = cleaned;\n\t\tcleaned = cleaned.replace(INLINE_EVENT_HANDLERS, '$1');\n\t} while (cleaned !== prev);\n\treturn cleaned;\n};\n\nconst SANITIZED_INPUT_TYPES: InputTypeI[] = [\n\t'text',\n\t'multiline',\n\t'email',\n\t'url',\n\t'password',\n];\n\nexport const shouldSanitizeForType = (type: InputTypeI): boolean =>\n\tSANITIZED_INPUT_TYPES.includes(type);\n\nexport const validateInput = (\n\tinputText: string | number,\n\ttype: InputTypeI,\n\trangeValidation: { min?: number; max?: number } = {},\n): [boolean, string] => {\n\tlet regex;\n\n\tconst NUMBER_TYPE = ['phonenumber', 'zip', 'number'].includes(type);\n\n\tconst input = NUMBER_TYPE\n\t\t? inputText\n\t\t\t? Number(inputText)\n\t\t\t: null\n\t\t: inputText;\n\n\tif (input === null || input === undefined || input === '') {\n\t\treturn [true, ''];\n\t}\n\n\tif (\n\t\tNUMBER_TYPE &&\n\t\t!!String(input).length &&\n\t\t((!!rangeValidation.min &&\n\t\t\t(input as unknown as number) < rangeValidation.min) ||\n\t\t\t(!!rangeValidation.max &&\n\t\t\t\t(input as unknown as number) > rangeValidation.max))\n\t) {\n\t\treturn [\n\t\t\tfalse,\n\t\t\t`Enter valid number between ${rangeValidation.min} and ${rangeValidation.max}`,\n\t\t];\n\t}\n\n\tif (type === 'email') {\n\t\tregex = /(.+)@(.+){2,}\\.(.+){2,}/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid email id'];\n\t} else if (type === 'url') {\n\t\tregex =\n\t\t\t/^https?:\\/\\/(?:www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&\\/=]*)$/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid url'];\n\t} else if (type === 'number') {\n\t\treturn input >= 0 ? [true, ''] : [false, 'Enter a valid number'];\n\t} else if (type === 'zip') {\n\t\treturn String(input).trim().length === 6\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid zip code'];\n\t} else if (type === 'phonenumber') {\n\t\tconst { isValid } = phone('+' + String(input));\n\t\treturn isValid ? [true, ''] : [false, 'Enter a valid phonenumber'];\n\t} else {\n\t\treturn (input as string)?.trim().length > 0\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid data'];\n\t}\n\treturn [false, 'Enter a valid data'];\n};\n"],"names":["isFunction","fn","PAIRED_DANGEROUS_TAGS","UNPAIRED_DANGEROUS_TAGS","INLINE_EVENT_HANDLERS","sanitizeUnsafeInput","input","cleaned","prev","SANITIZED_INPUT_TYPES","shouldSanitizeForType","type","validateInput","inputText","rangeValidation","regex","NUMBER_TYPE","isValid","phone"],"mappings":";AAGO,MAAMA,IAAa,CAACC,MACnBA,KAAM,OAAOA,KAAO,YAGtBC,IACL,0FACKC,IACL,mGACKC,IACL,sEAEYC,IAAsB,CAACC,MAA0B;AAC7D,MAAI,CAACA;AACJ,WAAOA;AAER,MAAIC,IAAUD,EAAM,QAAQJ,GAAuB,EAAE;AACrD,EAAAK,IAAUA,EAAQ,QAAQJ,GAAyB,EAAE;AACrD,MAAIK;AACJ;AACC,IAAAA,IAAOD,GACPA,IAAUA,EAAQ,QAAQH,GAAuB,IAAI;AAAA,SAC7CG,MAAYC;AACrB,SAAOD;AACR,GAEME,IAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEaC,IAAwB,CAACC,MACrCF,EAAsB,SAASE,CAAI,GAEvBC,IAAgB,CAC5BC,GACAF,GACAG,IAAkD,CAAA,MAC3B;AACvB,MAAIC;AAEJ,QAAMC,IAAc,CAAC,eAAe,OAAO,QAAQ,EAAE,SAASL,CAAI,GAE5DL,IAAQU,IACXH,IACC,OAAOA,CAAS,IAChB,OACDA;AAEH,MAAIP,KAAU,QAA+BA,MAAU;AACtD,WAAO,CAAC,IAAM,EAAE;AAGjB,MACCU,KACE,OAAOV,CAAK,EAAE,WACZQ,EAAgB,OAClBR,IAA8BQ,EAAgB,OAC5CA,EAAgB,OACjBR,IAA8BQ,EAAgB;AAEjD,WAAO;AAAA,MACN;AAAA,MACA,8BAA8BA,EAAgB,GAAG,QAAQA,EAAgB,GAAG;AAAA,IAAA;AAI9E,MAAIH,MAAS;AACZ,WAAAI,IAAQ,2BACAT,EAAiB,MAAMS,CAAK,IACjC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,wBAAwB;AACpC,MAAWJ,MAAS;AACnB,WAAAI,IACC,+GACOT,EAAiB,MAAMS,CAAK,IACjC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,mBAAmB;AAC/B,MAAWJ,MAAS;AACnB,WAAOL,KAAS,IAAI,CAAC,IAAM,EAAE,IAAI,CAAC,IAAO,sBAAsB;AAChE,MAAWK,MAAS;AACnB,WAAO,OAAOL,CAAK,EAAE,KAAA,EAAO,WAAW,IACpC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,wBAAwB;AACpC,MAAWK,MAAS,eAAe;AAClC,UAAM,EAAE,SAAAM,EAAA,IAAYC,EAAM,MAAM,OAAOZ,CAAK,CAAC;AAC7C,WAAOW,IAAU,CAAC,IAAM,EAAE,IAAI,CAAC,IAAO,2BAA2B;AAAA,EAClE;AACC,WAAQX,GAAkB,OAAO,SAAS,IACvC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,oBAAoB;AAGjC;"}
+{"version":3,"file":"Input-helper.js","sources":["../../../../src/components/input/Input-helper.ts"],"sourcesContent":["import { phone } from 'phone';\nimport { stripHtmlTags } from '../../helpers/sanitize';\nimport { InputTypeI } from './Input.model';\n\nexport const isFunction = (fn): boolean => {\n\treturn fn && typeof fn === 'function';\n};\n\n/**\n * Strip any HTML markup from a plain-text input value. Backed by DOMPurify\n * (parser-based, immune to the malformed-tag bypasses a regex misses); on the\n * server DOMPurify is unavailable so a regex tag-strip is used as a fallback.\n * Text characters like `<` / `>` in ordinary content are preserved because\n * DOMPurify keeps text content and only removes recognised tags.\n */\nexport const sanitizeUnsafeInput = (input: string): string => {\n\tif (!input) {\n\t\treturn input;\n\t}\n\treturn stripHtmlTags(input);\n};\n\nconst SANITIZED_INPUT_TYPES: InputTypeI[] = [\n\t'text',\n\t'multiline',\n\t'email',\n\t'url',\n\t'password',\n];\n\nexport const shouldSanitizeForType = (type: InputTypeI): boolean =>\n\tSANITIZED_INPUT_TYPES.includes(type);\n\nexport const validateInput = (\n\tinputText: string | number,\n\ttype: InputTypeI,\n\trangeValidation: { min?: number; max?: number } = {},\n): [boolean, string] => {\n\tlet regex;\n\n\tconst NUMBER_TYPE = ['phonenumber', 'zip', 'number'].includes(type);\n\n\tconst input = NUMBER_TYPE\n\t\t? inputText\n\t\t\t? Number(inputText)\n\t\t\t: null\n\t\t: inputText;\n\n\tif (input === null || input === undefined || input === '') {\n\t\treturn [true, ''];\n\t}\n\n\tif (\n\t\tNUMBER_TYPE &&\n\t\t!!String(input).length &&\n\t\t((!!rangeValidation.min &&\n\t\t\t(input as unknown as number) < rangeValidation.min) ||\n\t\t\t(!!rangeValidation.max &&\n\t\t\t\t(input as unknown as number) > rangeValidation.max))\n\t) {\n\t\treturn [\n\t\t\tfalse,\n\t\t\t`Enter valid number between ${rangeValidation.min} and ${rangeValidation.max}`,\n\t\t];\n\t}\n\n\tif (type === 'email') {\n\t\tregex = /(.+)@(.+){2,}\\.(.+){2,}/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid email id'];\n\t} else if (type === 'url') {\n\t\tregex =\n\t\t\t/^https?:\\/\\/(?:www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&\\/=]*)$/;\n\t\treturn (input as string).match(regex)\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid url'];\n\t} else if (type === 'number') {\n\t\treturn input >= 0 ? [true, ''] : [false, 'Enter a valid number'];\n\t} else if (type === 'zip') {\n\t\treturn String(input).trim().length === 6\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid zip code'];\n\t} else if (type === 'phonenumber') {\n\t\tconst { isValid } = phone('+' + String(input));\n\t\treturn isValid ? [true, ''] : [false, 'Enter a valid phonenumber'];\n\t} else {\n\t\treturn (input as string)?.trim().length > 0\n\t\t\t? [true, '']\n\t\t\t: [false, 'Enter a valid data'];\n\t}\n\treturn [false, 'Enter a valid data'];\n};\n"],"names":["isFunction","fn","sanitizeUnsafeInput","input","stripHtmlTags","SANITIZED_INPUT_TYPES","shouldSanitizeForType","type","validateInput","inputText","rangeValidation","regex","NUMBER_TYPE","isValid","phone"],"mappings":";;AAIO,MAAMA,IAAa,CAACC,MACnBA,KAAM,OAAOA,KAAO,YAUfC,IAAsB,CAACC,MAC9BA,KAGEC,EAAcD,CAAK,GAGrBE,IAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAEaC,IAAwB,CAACC,MACrCF,EAAsB,SAASE,CAAI,GAEvBC,IAAgB,CAC5BC,GACAF,GACAG,IAAkD,CAAA,MAC3B;AACvB,MAAIC;AAEJ,QAAMC,IAAc,CAAC,eAAe,OAAO,QAAQ,EAAE,SAASL,CAAI,GAE5DJ,IAAQS,IACXH,IACC,OAAOA,CAAS,IAChB,OACDA;AAEH,MAAIN,KAAU,QAA+BA,MAAU;AACtD,WAAO,CAAC,IAAM,EAAE;AAGjB,MACCS,KACE,OAAOT,CAAK,EAAE,WACZO,EAAgB,OAClBP,IAA8BO,EAAgB,OAC5CA,EAAgB,OACjBP,IAA8BO,EAAgB;AAEjD,WAAO;AAAA,MACN;AAAA,MACA,8BAA8BA,EAAgB,GAAG,QAAQA,EAAgB,GAAG;AAAA,IAAA;AAI9E,MAAIH,MAAS;AACZ,WAAAI,IAAQ,2BACAR,EAAiB,MAAMQ,CAAK,IACjC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,wBAAwB;AACpC,MAAWJ,MAAS;AACnB,WAAAI,IACC,+GACOR,EAAiB,MAAMQ,CAAK,IACjC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,mBAAmB;AAC/B,MAAWJ,MAAS;AACnB,WAAOJ,KAAS,IAAI,CAAC,IAAM,EAAE,IAAI,CAAC,IAAO,sBAAsB;AAChE,MAAWI,MAAS;AACnB,WAAO,OAAOJ,CAAK,EAAE,KAAA,EAAO,WAAW,IACpC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,wBAAwB;AACpC,MAAWI,MAAS,eAAe;AAClC,UAAM,EAAE,SAAAM,EAAA,IAAYC,EAAM,MAAM,OAAOX,CAAK,CAAC;AAC7C,WAAOU,IAAU,CAAC,IAAM,EAAE,IAAI,CAAC,IAAO,2BAA2B;AAAA,EAClE;AACC,WAAQV,GAAkB,OAAO,SAAS,IACvC,CAAC,IAAM,EAAE,IACT,CAAC,IAAO,oBAAoB;AAGjC;"}

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

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