@activecollab/components 2.0.210 → 2.0.212

package/dist/esm/components/EditableContent/Styles.js

@@ -13,17 +13,22 @@ export const StyledDiv = styled.div.withConfig({
 export const StyledSpan = styled(Typography).withConfig({
   displayName: "Styles__StyledSpan",
   componentId: "sc-1wapx2a-1"
-})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " &:empty:before{content:\" \";}"], _ref => {
+})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], _ref => {
   let {
     $disabled
   } = _ref;
   return $disabled && css(["visibility:visible;"]);
+}, _ref2 => {
+  let {
+    invalid
+  } = _ref2;
+  return invalid && css(["border:1px solid var(--red-alert);"]);
 });
 StyledSpan.displayName = "StyledSpan";
 export const StyledInput = styled(Typography).withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-1wapx2a-2"
-})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}"], {
+})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}", ""], {
   "position": "absolute",
   "inset": "0px",
   "boxSizing": "border-box",
@@ -41,6 +46,11 @@ export const StyledInput = styled(Typography).withConfig({
   ":hover": {
     "borderColor": "var(--color-theme-700)"
   }
+}, _ref3 => {
+  let {
+    invalid
+  } = _ref3;
+  return invalid && css(["border-color:var(--red-alert) !important;"]);
 });
 StyledInput.displayName = "StyledInput";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/EditableContent/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","withConfig","displayName","componentId","StyledSpan","_ref","$disabled","StyledInput"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n  visibility: hidden;\n  display: block;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  position: relative;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: pre;\n  font-variant-numeric: tabular-nums;\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      visibility: visible;\n    `}\n\n  &:empty:before {\n    content: \" \";\n  }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n  ${tw`\n    tw-absolute\n    tw-inset-0\n    tw-border\n    tw-border-transparent\n    tw-border-solid\n    hover:tw-border-theme-700\n    focus-within:tw-border-theme-700\n    tw-rounded-md\n    tw-box-border\n    tw-overflow-hidden\n    tw-whitespace-nowrap\n    focus-within:tw-overflow-scroll\n    tw-w-full`}\n\n  background-color: inherit;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  text-overflow: ellipsis;\n  font-variant-numeric: tabular-nums;\n  &:focus-whitin {\n    text-overflow: clip;\n  }\n  outline-width: 0px;\n  outline: none;\n  &:disabled {\n    opacity: 0;\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBAC/BN,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;AAA0C,CAAC,CAChD;AAED,OAAO,MAAMQ,UAAU,GAAGV,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2TAgBxCE,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OACdC,SAAS,IACTX,GAAG,yBAEF;AAAA,EAKJ;AAEDS,UAAU,CAACF,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMK,WAAW,GAAGb,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8PACvC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAaO,CAAC,CAiBb;AAEDI,WAAW,CAACL,WAAW,GAAG,aAAa"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","withConfig","displayName","componentId","StyledSpan","_ref","$disabled","_ref2","invalid","StyledInput","_ref3"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n  visibility: hidden;\n  display: block;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  position: relative;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: pre;\n  font-variant-numeric: tabular-nums;\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      visibility: visible;\n    `}\n\n  ${({ invalid }) =>\n    invalid &&\n    css`\n      border: 1px solid var(--red-alert);\n    `}\n\n  &:empty:before {\n    content: \" \";\n  }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n  ${tw`\n    tw-absolute\n    tw-inset-0\n    tw-border\n    tw-border-transparent\n    tw-border-solid\n    hover:tw-border-theme-700\n    focus-within:tw-border-theme-700\n    tw-rounded-md\n    tw-box-border\n    tw-overflow-hidden\n    tw-whitespace-nowrap\n    focus-within:tw-overflow-scroll\n    tw-w-full`}\n\n  background-color: inherit;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  text-overflow: ellipsis;\n  font-variant-numeric: tabular-nums;\n  &:focus-whitin {\n    text-overflow: clip;\n  }\n  outline-width: 0px;\n  outline: none;\n  &:disabled {\n    opacity: 0;\n  }\n\n  ${({ invalid }) =>\n    invalid &&\n    css`\n      border-color: var(--red-alert) !important;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uBAC/BN,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;AAA0C,CAAC,CAChD;AAED,OAAO,MAAMQ,UAAU,GAAGV,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gUAgBxCE,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OACdC,SAAS,IACTX,GAAG,yBAEF;AAAA,GAEDY,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACZC,OAAO,IACPb,GAAG,wCAEF;AAAA,EAKJ;AAEDS,UAAU,CAACF,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMO,WAAW,GAAGf,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kQACvC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAaO,CAAC,EAkBVO,KAAA;EAAA,IAAC;IAAEF;EAAQ,CAAC,GAAAE,KAAA;EAAA,OACZF,OAAO,IACPb,GAAG,+CAEF;AAAA,EACJ;AAEDc,WAAW,CAACP,WAAW,GAAG,aAAa"}

package/dist/esm/components/EditableCurrency/EditableCurrency.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCurrency.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableCurrency/EditableCurrency.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAkB,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAmB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAG/E,MAAM,WAAW,qBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAmG5B,CAAC"}
+{"version":3,"file":"EditableCurrency.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableCurrency/EditableCurrency.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAkB,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAmB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAG/E,MAAM,WAAW,qBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAqG5B,CAAC"}

package/dist/esm/components/EditableCurrency/EditableCurrency.js

@@ -23,6 +23,7 @@ export const EditableCurrency = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     trimDecimals = true,
     min,
     max,
+    invalid,
     ...rest
   } = _ref;
   const inputRef = useRef(null);
@@ -66,6 +67,7 @@ export const EditableCurrency = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled: disabled,
     ref: handleRef,
     className: className,
+    invalid: invalid,
     inputProps: {
       value: formattedValue,
       onBlur: onBlur,

package/dist/esm/components/EditableCurrency/EditableCurrency.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCurrency.js","names":["React","useMemo","useRef","useInputNumber","numberWithSeparator","useForkRef","EditableContent","Tooltip","EditableCurrency","forwardRef","_ref","ref","decimalLength","decimalSeparator","disableAbbreviation","disabled","disableMacros","step","thousandSeparator","value","defaultValue","onSave","onCancel","className","allowEmptyValue","onEnterKeyPress","externalEnterKeyPress","onClick","externalOnClick","onChange","externalOnChange","trimDecimals","min","max","rest","inputRef","handleRef","onBlur","onKeyDown","onDoubleClick","onFocus","focused","unformattedValue","shortenThreshold","formattedValue","createElement","title","disable","inputProps","displayName"],"sources":["../../../../src/components/EditableCurrency/EditableCurrency.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\n\nimport { IInputNumber, useInputNumber } from \"../../hooks\";\nimport { numberWithSeparator, useForkRef } from \"../../utils\";\nimport { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport { Tooltip } from \"../Tooltip\";\n\nexport interface EditableCurrencyProps\n  extends EditableContentInterface,\n    Omit<IInputNumber, \"limit\" | \"onBlur\"> {\n  className?: string;\n}\n\nexport const EditableCurrency = React.forwardRef<\n  HTMLDivElement,\n  EditableCurrencyProps\n>(\n  (\n    {\n      decimalLength = 2,\n      decimalSeparator = \".\",\n      disableAbbreviation = false,\n      disabled,\n      disableMacros = false,\n      step = 1,\n      thousandSeparator = \",\",\n      value: defaultValue,\n      onSave,\n      onCancel,\n      className,\n      allowEmptyValue,\n      onEnterKeyPress: externalEnterKeyPress,\n      onClick: externalOnClick,\n      onChange: externalOnChange,\n      trimDecimals = true,\n      min,\n      max,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    const {\n      value,\n      onBlur,\n      onKeyDown,\n      onChange,\n      onClick,\n      onDoubleClick,\n      onFocus,\n      focused,\n      unformattedValue,\n    } = useInputNumber(\n      {\n        decimalLength,\n        decimalSeparator,\n        disableAbbreviation,\n        disableMacros,\n        step,\n        thousandSeparator,\n        value: defaultValue,\n        onSave,\n        allowEmptyValue,\n        onCancel,\n        onChange: externalOnChange,\n        onEnterKeyPress: externalEnterKeyPress,\n        onClick: externalOnClick,\n        trimDecimals,\n        min,\n        max,\n        shortenThreshold: 10000,\n      },\n      inputRef\n    );\n\n    const formattedValue = useMemo(() => {\n      return focused\n        ? value\n        : numberWithSeparator(value ?? \"\", \"\", decimalSeparator);\n    }, [focused, value, decimalSeparator]);\n\n    return (\n      <Tooltip\n        title={\n          numberWithSeparator(\n            unformattedValue ?? \"\",\n            thousandSeparator,\n            decimalSeparator\n          ) as string\n        }\n        disable={focused}\n      >\n        <EditableContent\n          disabled={disabled}\n          ref={handleRef}\n          className={className}\n          inputProps={{\n            value: formattedValue,\n            onBlur: onBlur,\n            onChange: onChange,\n            onKeyDown: onKeyDown,\n            onClick: onClick,\n            onFocus: onFocus,\n            onDoubleClick: onDoubleClick,\n            ...rest,\n          }}\n        />\n      </Tooltip>\n    );\n  }\n);\n\nEditableCurrency.displayName = \"EditableCurrency\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE9C,SAAuBC,cAAc,QAAQ,aAAa;AAC1D,SAASC,mBAAmB,EAAEC,UAAU,QAAQ,aAAa;AAC7D,SAASC,eAAe,QAAkC,oBAAoB;AAC9E,SAASC,OAAO,QAAQ,YAAY;AAQpC,OAAO,MAAMC,gBAAgB,gBAAGR,KAAK,CAACS,UAAU,CAI9C,CAAAC,IAAA,EAsBEC,GAAG,KACA;EAAA,IAtBH;IACEC,aAAa,GAAG,CAAC;IACjBC,gBAAgB,GAAG,GAAG;IACtBC,mBAAmB,GAAG,KAAK;IAC3BC,QAAQ;IACRC,aAAa,GAAG,KAAK;IACrBC,IAAI,GAAG,CAAC;IACRC,iBAAiB,GAAG,GAAG;IACvBC,KAAK,EAAEC,YAAY;IACnBC,MAAM;IACNC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,eAAe,EAAEC,qBAAqB;IACtCC,OAAO,EAAEC,eAAe;IACxBC,QAAQ,EAAEC,gBAAgB;IAC1BC,YAAY,GAAG,IAAI;IACnBC,GAAG;IACHC,GAAG;IACH,GAAGC;EACL,CAAC,GAAAxB,IAAA;EAGD,MAAMyB,QAAQ,GAAGjC,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMkC,SAAS,GAAG/B,UAAU,CAACM,GAAG,EAAEwB,QAAQ,CAAC;EAE3C,MAAM;IACJhB,KAAK;IACLkB,MAAM;IACNC,SAAS;IACTT,QAAQ;IACRF,OAAO;IACPY,aAAa;IACbC,OAAO;IACPC,OAAO;IACPC;EACF,CAAC,GAAGvC,cAAc,CAChB;IACES,aAAa;IACbC,gBAAgB;IAChBC,mBAAmB;IACnBE,aAAa;IACbC,IAAI;IACJC,iBAAiB;IACjBC,KAAK,EAAEC,YAAY;IACnBC,MAAM;IACNG,eAAe;IACfF,QAAQ;IACRO,QAAQ,EAAEC,gBAAgB;IAC1BL,eAAe,EAAEC,qBAAqB;IACtCC,OAAO,EAAEC,eAAe;IACxBG,YAAY;IACZC,GAAG;IACHC,GAAG;IACHU,gBAAgB,EAAE;EACpB,CAAC,EACDR,QACF,CAAC;EAED,MAAMS,cAAc,GAAG3C,OAAO,CAAC,MAAM;IACnC,OAAOwC,OAAO,GACVtB,KAAK,GACLf,mBAAmB,CAACe,KAAK,WAALA,KAAK,GAAI,EAAE,EAAE,EAAE,EAAEN,gBAAgB,CAAC;EAC5D,CAAC,EAAE,CAAC4B,OAAO,EAAEtB,KAAK,EAAEN,gBAAgB,CAAC,CAAC;EAEtC,oBACEb,KAAA,CAAA6C,aAAA,CAACtC,OAAO;IACNuC,KAAK,EACH1C,mBAAmB,CACjBsC,gBAAgB,WAAhBA,gBAAgB,GAAI,EAAE,EACtBxB,iBAAiB,EACjBL,gBACF,CACD;IACDkC,OAAO,EAAEN;EAAQ,gBAEjBzC,KAAA,CAAA6C,aAAA,CAACvC,eAAe;IACdS,QAAQ,EAAEA,QAAS;IACnBJ,GAAG,EAAEyB,SAAU;IACfb,SAAS,EAAEA,SAAU;IACrByB,UAAU,EAAE;MACV7B,KAAK,EAAEyB,cAAc;MACrBP,MAAM,EAAEA,MAAM;MACdR,QAAQ,EAAEA,QAAQ;MAClBS,SAAS,EAAEA,SAAS;MACpBX,OAAO,EAAEA,OAAO;MAChBa,OAAO,EAAEA,OAAO;MAChBD,aAAa,EAAEA,aAAa;MAC5B,GAAGL;IACL;EAAE,CACH,CACM,CAAC;AAEd,CACF,CAAC;AAED1B,gBAAgB,CAACyC,WAAW,GAAG,kBAAkB"}
+{"version":3,"file":"EditableCurrency.js","names":["React","useMemo","useRef","useInputNumber","numberWithSeparator","useForkRef","EditableContent","Tooltip","EditableCurrency","forwardRef","_ref","ref","decimalLength","decimalSeparator","disableAbbreviation","disabled","disableMacros","step","thousandSeparator","value","defaultValue","onSave","onCancel","className","allowEmptyValue","onEnterKeyPress","externalEnterKeyPress","onClick","externalOnClick","onChange","externalOnChange","trimDecimals","min","max","invalid","rest","inputRef","handleRef","onBlur","onKeyDown","onDoubleClick","onFocus","focused","unformattedValue","shortenThreshold","formattedValue","createElement","title","disable","inputProps","displayName"],"sources":["../../../../src/components/EditableCurrency/EditableCurrency.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\n\nimport { IInputNumber, useInputNumber } from \"../../hooks\";\nimport { numberWithSeparator, useForkRef } from \"../../utils\";\nimport { EditableContent, EditableContentInterface } from \"../EditableContent\";\nimport { Tooltip } from \"../Tooltip\";\n\nexport interface EditableCurrencyProps\n  extends EditableContentInterface,\n    Omit<IInputNumber, \"limit\" | \"onBlur\"> {\n  className?: string;\n}\n\nexport const EditableCurrency = React.forwardRef<\n  HTMLDivElement,\n  EditableCurrencyProps\n>(\n  (\n    {\n      decimalLength = 2,\n      decimalSeparator = \".\",\n      disableAbbreviation = false,\n      disabled,\n      disableMacros = false,\n      step = 1,\n      thousandSeparator = \",\",\n      value: defaultValue,\n      onSave,\n      onCancel,\n      className,\n      allowEmptyValue,\n      onEnterKeyPress: externalEnterKeyPress,\n      onClick: externalOnClick,\n      onChange: externalOnChange,\n      trimDecimals = true,\n      min,\n      max,\n      invalid,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    const {\n      value,\n      onBlur,\n      onKeyDown,\n      onChange,\n      onClick,\n      onDoubleClick,\n      onFocus,\n      focused,\n      unformattedValue,\n    } = useInputNumber(\n      {\n        decimalLength,\n        decimalSeparator,\n        disableAbbreviation,\n        disableMacros,\n        step,\n        thousandSeparator,\n        value: defaultValue,\n        onSave,\n        allowEmptyValue,\n        onCancel,\n        onChange: externalOnChange,\n        onEnterKeyPress: externalEnterKeyPress,\n        onClick: externalOnClick,\n        trimDecimals,\n        min,\n        max,\n        shortenThreshold: 10000,\n      },\n      inputRef\n    );\n\n    const formattedValue = useMemo(() => {\n      return focused\n        ? value\n        : numberWithSeparator(value ?? \"\", \"\", decimalSeparator);\n    }, [focused, value, decimalSeparator]);\n\n    return (\n      <Tooltip\n        title={\n          numberWithSeparator(\n            unformattedValue ?? \"\",\n            thousandSeparator,\n            decimalSeparator\n          ) as string\n        }\n        disable={focused}\n      >\n        <EditableContent\n          disabled={disabled}\n          ref={handleRef}\n          className={className}\n          invalid={invalid}\n          inputProps={{\n            value: formattedValue,\n            onBlur: onBlur,\n            onChange: onChange,\n            onKeyDown: onKeyDown,\n            onClick: onClick,\n            onFocus: onFocus,\n            onDoubleClick: onDoubleClick,\n            ...rest,\n          }}\n        />\n      </Tooltip>\n    );\n  }\n);\n\nEditableCurrency.displayName = \"EditableCurrency\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE9C,SAAuBC,cAAc,QAAQ,aAAa;AAC1D,SAASC,mBAAmB,EAAEC,UAAU,QAAQ,aAAa;AAC7D,SAASC,eAAe,QAAkC,oBAAoB;AAC9E,SAASC,OAAO,QAAQ,YAAY;AAQpC,OAAO,MAAMC,gBAAgB,gBAAGR,KAAK,CAACS,UAAU,CAI9C,CAAAC,IAAA,EAuBEC,GAAG,KACA;EAAA,IAvBH;IACEC,aAAa,GAAG,CAAC;IACjBC,gBAAgB,GAAG,GAAG;IACtBC,mBAAmB,GAAG,KAAK;IAC3BC,QAAQ;IACRC,aAAa,GAAG,KAAK;IACrBC,IAAI,GAAG,CAAC;IACRC,iBAAiB,GAAG,GAAG;IACvBC,KAAK,EAAEC,YAAY;IACnBC,MAAM;IACNC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,eAAe,EAAEC,qBAAqB;IACtCC,OAAO,EAAEC,eAAe;IACxBC,QAAQ,EAAEC,gBAAgB;IAC1BC,YAAY,GAAG,IAAI;IACnBC,GAAG;IACHC,GAAG;IACHC,OAAO;IACP,GAAGC;EACL,CAAC,GAAAzB,IAAA;EAGD,MAAM0B,QAAQ,GAAGlC,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMmC,SAAS,GAAGhC,UAAU,CAACM,GAAG,EAAEyB,QAAQ,CAAC;EAE3C,MAAM;IACJjB,KAAK;IACLmB,MAAM;IACNC,SAAS;IACTV,QAAQ;IACRF,OAAO;IACPa,aAAa;IACbC,OAAO;IACPC,OAAO;IACPC;EACF,CAAC,GAAGxC,cAAc,CAChB;IACES,aAAa;IACbC,gBAAgB;IAChBC,mBAAmB;IACnBE,aAAa;IACbC,IAAI;IACJC,iBAAiB;IACjBC,KAAK,EAAEC,YAAY;IACnBC,MAAM;IACNG,eAAe;IACfF,QAAQ;IACRO,QAAQ,EAAEC,gBAAgB;IAC1BL,eAAe,EAAEC,qBAAqB;IACtCC,OAAO,EAAEC,eAAe;IACxBG,YAAY;IACZC,GAAG;IACHC,GAAG;IACHW,gBAAgB,EAAE;EACpB,CAAC,EACDR,QACF,CAAC;EAED,MAAMS,cAAc,GAAG5C,OAAO,CAAC,MAAM;IACnC,OAAOyC,OAAO,GACVvB,KAAK,GACLf,mBAAmB,CAACe,KAAK,WAALA,KAAK,GAAI,EAAE,EAAE,EAAE,EAAEN,gBAAgB,CAAC;EAC5D,CAAC,EAAE,CAAC6B,OAAO,EAAEvB,KAAK,EAAEN,gBAAgB,CAAC,CAAC;EAEtC,oBACEb,KAAA,CAAA8C,aAAA,CAACvC,OAAO;IACNwC,KAAK,EACH3C,mBAAmB,CACjBuC,gBAAgB,WAAhBA,gBAAgB,GAAI,EAAE,EACtBzB,iBAAiB,EACjBL,gBACF,CACD;IACDmC,OAAO,EAAEN;EAAQ,gBAEjB1C,KAAA,CAAA8C,aAAA,CAACxC,eAAe;IACdS,QAAQ,EAAEA,QAAS;IACnBJ,GAAG,EAAE0B,SAAU;IACfd,SAAS,EAAEA,SAAU;IACrBW,OAAO,EAAEA,OAAQ;IACjBe,UAAU,EAAE;MACV9B,KAAK,EAAE0B,cAAc;MACrBP,MAAM,EAAEA,MAAM;MACdT,QAAQ,EAAEA,QAAQ;MAClBU,SAAS,EAAEA,SAAS;MACpBZ,OAAO,EAAEA,OAAO;MAChBc,OAAO,EAAEA,OAAO;MAChBD,aAAa,EAAEA,aAAa;MAC5B,GAAGL;IACL;EAAE,CACH,CACM,CAAC;AAEd,CACF,CAAC;AAED3B,gBAAgB,CAAC0C,WAAW,GAAG,kBAAkB"}

package/dist/esm/components/Input/InputPhone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhone.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputPhone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAW5C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,gBAAgB,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAC1D;IACD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,iBAAiB;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;CACpC;AAkBD,eAAO,MAAM,UAAU,0FAgJtB,CAAC"}
+{"version":3,"file":"InputPhone.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputPhone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAa5C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,gBAAgB,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAC1D;IACD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,iBAAiB;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;CACpC;AAqBD,eAAO,MAAM,UAAU,0FAiJtB,CAAC"}

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

@@ -3,13 +3,13 @@ import React, { forwardRef, useCallback, useEffect, useRef, useState } from "rea
 import { callingCodeToCountryCodeMap, countriesArraySortedByName, getCountryCallingCode, getCountryFlag } from "country-explorer";
 import { Input } from "./Input";
 import { InputSelect } from "./InputSelect";
-import { StyledFlagTriggerLabel, StyledOptionFlag, StyledOptionName, StyledOptionWrapper } from "./Styles";
+import { StyledFlagTriggerLabel, StyledOptionCode, StyledOptionFlag, StyledOptionName, StyledOptionRowEnd, StyledOptionWrapper } from "./Styles";
 import { useForkRef } from "../../utils";
 import { RadioButton } from "../RadioButton";
-const renderOption = (option, data) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOptionWrapper, null, /*#__PURE__*/React.createElement(StyledOptionFlag, null, getCountryFlag(option.id)), /*#__PURE__*/React.createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React.createElement(RadioButton, {
+const renderOption = (option, data) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOptionWrapper, null, /*#__PURE__*/React.createElement(StyledOptionFlag, null, getCountryFlag(option.id)), /*#__PURE__*/React.createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React.createElement(StyledOptionRowEnd, null, /*#__PURE__*/React.createElement(StyledOptionCode, null, option.additionalInfo), /*#__PURE__*/React.createElement(RadioButton, {
   checked: data.checked,
   onChange: data.onChange
-}));
+})));
 export const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = "regular",
@@ -25,7 +25,8 @@ export const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [value, setValue] = useState("");
   const options = countriesArraySortedByName.map(country => ({
     id: country.countryCode,
-    name: "+" + country.callingCode + " " + country.name
+    name: country.name,
+    additionalInfo: "+" + country.callingCode
   }));
   const separatePrefixFromValue = fullValue => {
     let newPrefix = prefix;
@@ -37,12 +38,11 @@ export const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
         const code = digits.slice(0, i);
         if (callingCodeToCountryCodeMap[code]) {
           newPrefix = callingCodeToCountryCodeMap[code];
-          newValue = fullValue.slice(prefixLength + getCountryCallingCode(newPrefix).length);
+          const dialCode = getCountryCallingCode(newPrefix);
+          newValue = fullValue.slice(prefixLength + dialCode.length);
           break;
         }
       }
-    } else if (fullValue.startsWith(prefix)) {
-      newValue = fullValue.slice(prefix.length);
     }
     return {
       newPrefix,
@@ -118,6 +118,10 @@ export const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange: handleSelectChange,
       options: options,
       selected: prefix,
+      filterCriteria: (option, filter) => {
+        var _option$additionalInf;
+        return !!(option != null && (_option$additionalInf = option.additionalInfo) != null && _option$additionalInf.toLowerCase().includes(filter));
+      },
       selectedLabel: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFlagTriggerLabel, {
         $size: size
       }, getCountryFlag(prefix)), "+", getCountryCallingCode(prefix)),

package/dist/esm/components/Input/InputPhone.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhone.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","callingCodeToCountryCodeMap","countriesArraySortedByName","getCountryCallingCode","getCountryFlag","Input","InputSelect","StyledFlagTriggerLabel","StyledOptionFlag","StyledOptionName","StyledOptionWrapper","useForkRef","RadioButton","renderOption","option","data","createElement","Fragment","id","name","checked","onChange","InputPhone","_ref","ref","size","disabled","value","defaultValue","defaultCountry","rest","inputRef","handleRef","prefix","setPrefix","setValue","options","map","country","countryCode","callingCode","separatePrefixFromValue","fullValue","newPrefix","newValue","startsWith","prefixLength","digits","slice","i","length","code","handleChange","e","inputValue","target","test","handleSelectChange","val","setTimeout","_inputRef$current","current","focus","handlePaste","preventDefault","paste","clipboardData","getData","filteredPaste","replace","inputElement","currentTarget","selectionStart","selectionEnd","currentValue","beforeSelection","afterSelection","newValueAfterPaste","_extends","type","onPaste","startAdornment","selected","selectedLabel","$size","keepSameOptionsOrder","search","displayName"],"sources":["../../../../src/components/Input/InputPhone.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  callingCodeToCountryCodeMap,\n  countriesArraySortedByName,\n  getCountryCallingCode,\n  getCountryFlag,\n  Country,\n} from \"country-explorer\";\n\nimport { Input, InputProps } from \"./Input\";\nimport { InputSelect } from \"./InputSelect\";\nimport {\n  StyledFlagTriggerLabel,\n  StyledOptionFlag,\n  StyledOptionName,\n  StyledOptionWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { RadioButton } from \"../RadioButton\";\n\nexport interface InputPhoneProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"startAdornment\" | \"onChange\" | \"value\" | \"size\"\n  > {\n  /** Input value */\n  value?: string;\n  /** Default country code to be selected */\n  defaultCountry?: string;\n  /** onChange function */\n  onChange?: (val: string) => void;\n  /** Input size */\n  size?: \"small\" | \"regular\" | \"big\";\n}\n\nconst renderOption = (\n  option: Record<string, React.ReactNode>,\n  data: Record<string, unknown>\n): React.ReactElement => (\n  <>\n    <StyledOptionWrapper>\n      <StyledOptionFlag>{getCountryFlag(option.id)}</StyledOptionFlag>\n      <StyledOptionName>{option.name}</StyledOptionName>\n    </StyledOptionWrapper>\n    <RadioButton\n      checked={data.checked as boolean}\n      onChange={data.onChange as ChangeEventHandler<HTMLInputElement>}\n    />\n  </>\n);\n\nexport const InputPhone = forwardRef<HTMLInputElement, InputPhoneProps>(\n  (\n    {\n      size = \"regular\",\n      disabled,\n      value: defaultValue = \"\",\n      onChange,\n      defaultCountry = \"US\",\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const handleRef = useForkRef(ref, inputRef);\n    const [prefix, setPrefix] = useState(defaultCountry);\n    const [value, setValue] = useState<string>(\"\");\n\n    const options = countriesArraySortedByName.map((country: Country) => ({\n      id: country.countryCode,\n      name: `+${country.callingCode} ${country.name}`,\n    }));\n\n    const separatePrefixFromValue = (\n      fullValue: string\n    ): { newPrefix: string; newValue: string } => {\n      let newPrefix = prefix;\n      let newValue = fullValue;\n\n      if (fullValue.startsWith(\"+\") || fullValue.startsWith(\"00\")) {\n        const prefixLength = fullValue.startsWith(\"+\") ? 1 : 2;\n        const digits = fullValue.slice(prefixLength);\n\n        for (let i = digits.length; i >= 1; i--) {\n          const code = digits.slice(0, i);\n          if (callingCodeToCountryCodeMap[code]) {\n            newPrefix = callingCodeToCountryCodeMap[code];\n            newValue = fullValue.slice(\n              prefixLength + getCountryCallingCode(newPrefix).length\n            );\n            break;\n          }\n        }\n      } else if (fullValue.startsWith(prefix)) {\n        newValue = fullValue.slice(prefix.length);\n      }\n\n      return { newPrefix, newValue };\n    };\n\n    useEffect(() => {\n      const { newPrefix, newValue } = separatePrefixFromValue(defaultValue);\n      setPrefix(newPrefix);\n      setValue(newValue);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [defaultValue]);\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        if (/[^0-9+]/.test(inputValue)) {\n          return;\n        }\n\n        const { newPrefix, newValue } = separatePrefixFromValue(inputValue);\n        setPrefix(newPrefix);\n        setValue(newValue);\n\n        typeof onChange === \"function\" &&\n          onChange(`+${getCountryCallingCode(newPrefix)}${newValue}`);\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [onChange, prefix]\n    );\n\n    const handleSelectChange = (val: string | number | (string | number)[]) => {\n      setPrefix(val as string);\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 200);\n      typeof onChange === \"function\" &&\n        onChange(`+${getCountryCallingCode(val)}${value}`);\n    };\n\n    const handlePaste = (e: React.ClipboardEvent) => {\n      e.preventDefault();\n\n      const paste = e.clipboardData.getData(\"text\");\n      const filteredPaste = paste.replace(/[^0-9+]/g, \"\");\n\n      const inputElement = e.currentTarget as HTMLInputElement;\n      const { selectionStart, selectionEnd } = inputElement;\n\n      if (selectionStart !== null && selectionEnd !== null) {\n        const currentValue = inputElement.value;\n        const beforeSelection = currentValue.slice(0, selectionStart);\n        const afterSelection = currentValue.slice(selectionEnd);\n\n        const newValueAfterPaste =\n          beforeSelection + filteredPaste + afterSelection;\n        const { newPrefix, newValue } =\n          separatePrefixFromValue(newValueAfterPaste);\n\n        setPrefix(newPrefix);\n        setValue(newValue);\n\n        typeof onChange === \"function\" &&\n          onChange(`+${getCountryCallingCode(newPrefix)}${newValue}`);\n      }\n    };\n\n    return (\n      <Input\n        {...rest}\n        ref={handleRef}\n        size={size}\n        value={value}\n        disabled={disabled}\n        type=\"text\"\n        onPaste={handlePaste}\n        onChange={handleChange}\n        data-testid=\"InputPhone\"\n        startAdornment={\n          <InputSelect\n            size={size}\n            onChange={handleSelectChange}\n            options={options}\n            selected={prefix}\n            selectedLabel={\n              <>\n                <StyledFlagTriggerLabel $size={size}>\n                  {getCountryFlag(prefix)}\n                </StyledFlagTriggerLabel>\n                +{getCountryCallingCode(prefix)}\n              </>\n            }\n            disabled={disabled}\n            keepSameOptionsOrder={false}\n            search\n            renderOption={renderOption}\n          />\n        }\n      />\n    );\n  }\n);\n\nInputPhone.displayName = \"InputPhone\";\n"],"mappings":"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"}
+{"version":3,"file":"InputPhone.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","callingCodeToCountryCodeMap","countriesArraySortedByName","getCountryCallingCode","getCountryFlag","Input","InputSelect","StyledFlagTriggerLabel","StyledOptionCode","StyledOptionFlag","StyledOptionName","StyledOptionRowEnd","StyledOptionWrapper","useForkRef","RadioButton","renderOption","option","data","createElement","Fragment","id","name","additionalInfo","checked","onChange","InputPhone","_ref","ref","size","disabled","value","defaultValue","defaultCountry","rest","inputRef","handleRef","prefix","setPrefix","setValue","options","map","country","countryCode","callingCode","separatePrefixFromValue","fullValue","newPrefix","newValue","startsWith","prefixLength","digits","slice","i","length","code","dialCode","handleChange","e","inputValue","target","test","handleSelectChange","val","setTimeout","_inputRef$current","current","focus","handlePaste","preventDefault","paste","clipboardData","getData","filteredPaste","replace","inputElement","currentTarget","selectionStart","selectionEnd","currentValue","beforeSelection","afterSelection","newValueAfterPaste","_extends","type","onPaste","startAdornment","selected","filterCriteria","filter","_option$additionalInf","toLowerCase","includes","selectedLabel","$size","keepSameOptionsOrder","search","displayName"],"sources":["../../../../src/components/Input/InputPhone.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  callingCodeToCountryCodeMap,\n  countriesArraySortedByName,\n  getCountryCallingCode,\n  getCountryFlag,\n  Country,\n} from \"country-explorer\";\n\nimport { Input, InputProps } from \"./Input\";\nimport { InputSelect } from \"./InputSelect\";\nimport {\n  StyledFlagTriggerLabel,\n  StyledOptionCode,\n  StyledOptionFlag,\n  StyledOptionName,\n  StyledOptionRowEnd,\n  StyledOptionWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { RadioButton } from \"../RadioButton\";\n\nexport interface InputPhoneProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"startAdornment\" | \"onChange\" | \"value\" | \"size\"\n  > {\n  /** Input value */\n  value?: string;\n  /** Default country code to be selected */\n  defaultCountry?: string;\n  /** onChange function */\n  onChange?: (val: string) => void;\n  /** Input size */\n  size?: \"small\" | \"regular\" | \"big\";\n}\n\nconst renderOption = (\n  option: Record<string, React.ReactNode>,\n  data: Record<string, unknown>\n): React.ReactElement => (\n  <>\n    <StyledOptionWrapper>\n      <StyledOptionFlag>{getCountryFlag(option.id)}</StyledOptionFlag>\n      <StyledOptionName>{option.name}</StyledOptionName>\n    </StyledOptionWrapper>\n    <StyledOptionRowEnd>\n      <StyledOptionCode>{option.additionalInfo}</StyledOptionCode>\n      <RadioButton\n        checked={data.checked as boolean}\n        onChange={data.onChange as ChangeEventHandler<HTMLInputElement>}\n      />\n    </StyledOptionRowEnd>\n  </>\n);\n\nexport const InputPhone = forwardRef<HTMLInputElement, InputPhoneProps>(\n  (\n    {\n      size = \"regular\",\n      disabled,\n      value: defaultValue = \"\",\n      onChange,\n      defaultCountry = \"US\",\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const handleRef = useForkRef(ref, inputRef);\n    const [prefix, setPrefix] = useState(defaultCountry);\n    const [value, setValue] = useState<string>(\"\");\n\n    const options = countriesArraySortedByName.map((country: Country) => ({\n      id: country.countryCode,\n      name: country.name,\n      additionalInfo: `+${country.callingCode}`,\n    }));\n\n    const separatePrefixFromValue = (\n      fullValue: string\n    ): { newPrefix: string; newValue: string } => {\n      let newPrefix = prefix;\n      let newValue = fullValue;\n\n      if (fullValue.startsWith(\"+\") || fullValue.startsWith(\"00\")) {\n        const prefixLength = fullValue.startsWith(\"+\") ? 1 : 2;\n        const digits = fullValue.slice(prefixLength);\n\n        for (let i = digits.length; i >= 1; i--) {\n          const code = digits.slice(0, i);\n          if (callingCodeToCountryCodeMap[code]) {\n            newPrefix = callingCodeToCountryCodeMap[code];\n            const dialCode = getCountryCallingCode(newPrefix);\n            newValue = fullValue.slice(prefixLength + dialCode.length);\n            break;\n          }\n        }\n      }\n\n      return { newPrefix, newValue };\n    };\n\n    useEffect(() => {\n      const { newPrefix, newValue } = separatePrefixFromValue(defaultValue);\n      setPrefix(newPrefix);\n      setValue(newValue);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [defaultValue]);\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        if (/[^0-9+]/.test(inputValue)) {\n          return;\n        }\n\n        const { newPrefix, newValue } = separatePrefixFromValue(inputValue);\n        setPrefix(newPrefix);\n        setValue(newValue);\n\n        typeof onChange === \"function\" &&\n          onChange(`+${getCountryCallingCode(newPrefix)}${newValue}`);\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [onChange, prefix]\n    );\n\n    const handleSelectChange = (val: string | number | (string | number)[]) => {\n      setPrefix(val as string);\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 200);\n      typeof onChange === \"function\" &&\n        onChange(`+${getCountryCallingCode(val)}${value}`);\n    };\n\n    const handlePaste = (e: React.ClipboardEvent) => {\n      e.preventDefault();\n\n      const paste = e.clipboardData.getData(\"text\");\n      const filteredPaste = paste.replace(/[^0-9+]/g, \"\");\n\n      const inputElement = e.currentTarget as HTMLInputElement;\n      const { selectionStart, selectionEnd } = inputElement;\n\n      if (selectionStart !== null && selectionEnd !== null) {\n        const currentValue = inputElement.value;\n        const beforeSelection = currentValue.slice(0, selectionStart);\n        const afterSelection = currentValue.slice(selectionEnd);\n\n        const newValueAfterPaste =\n          beforeSelection + filteredPaste + afterSelection;\n        const { newPrefix, newValue } =\n          separatePrefixFromValue(newValueAfterPaste);\n\n        setPrefix(newPrefix);\n        setValue(newValue);\n\n        typeof onChange === \"function\" &&\n          onChange(`+${getCountryCallingCode(newPrefix)}${newValue}`);\n      }\n    };\n\n    return (\n      <Input\n        {...rest}\n        ref={handleRef}\n        size={size}\n        value={value}\n        disabled={disabled}\n        type=\"text\"\n        onPaste={handlePaste}\n        onChange={handleChange}\n        data-testid=\"InputPhone\"\n        startAdornment={\n          <InputSelect\n            size={size}\n            onChange={handleSelectChange}\n            options={options}\n            selected={prefix}\n            filterCriteria={(option, filter) => {\n              return !!option?.additionalInfo?.toLowerCase().includes(filter);\n            }}\n            selectedLabel={\n              <>\n                <StyledFlagTriggerLabel $size={size}>\n                  {getCountryFlag(prefix)}\n                </StyledFlagTriggerLabel>\n                +{getCountryCallingCode(prefix)}\n              </>\n            }\n            disabled={disabled}\n            keepSameOptionsOrder={false}\n            search\n            renderOption={renderOption}\n          />\n        }\n      />\n    );\n  }\n);\n\nInputPhone.displayName = \"InputPhone\";\n"],"mappings":"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"}

package/dist/esm/components/Input/InputSelect.d.ts

@@ -14,6 +14,8 @@ export interface InputSelectProps {
     target?: ElementWithRef<Element>;
     /** Render option */
     renderOption?: (option: Record<string, ReactNode>, data: Record<string, unknown>) => string | ReactElement;
+    /** Custom filter function for additional filtering criteria */
+    filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;
 }
 export declare const InputSelect: React.FC<InputSelectProps>;
 //# sourceMappingURL=InputSelect.d.ts.map

package/dist/esm/components/Input/InputSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAGrE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,oBAAoB;IACpB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC1B,MAAM,GAAG,YAAY,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoClD,CAAC"}
+{"version":3,"file":"InputSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAGrE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,oBAAoB;IACpB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC1B,MAAM,GAAG,YAAY,CAAC;IAC3B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;CACxE;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAC"}

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

@@ -15,7 +15,8 @@ export const InputSelect = _ref => {
     disabledInternalSort = true,
     keepSameOptionsOrder = true,
     selectedLabel,
-    renderOption
+    renderOption,
+    filterCriteria
   } = _ref;
   return /*#__PURE__*/React.createElement(Select, {
     onChange: onChange,
@@ -33,7 +34,8 @@ export const InputSelect = _ref => {
     disabledInternalSort: disabledInternalSort,
     keepSameOptionsOrder: keepSameOptionsOrder,
     selected: selected,
-    renderOption: renderOption
+    renderOption: renderOption,
+    filterCriteria: filterCriteria
   });
 };
 var _StyledStyledButton = _styled(StyledButton).withConfig({

package/dist/esm/components/Input/InputSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","names":["React","StyledInputSelectTrigger","ArrowDownIcon","ArrowDownSmallIcon","Select","StyledButton","InputSelect","_ref","onChange","size","selected","options","search","disabled","disabledInternalSort","keepSameOptionsOrder","selectedLabel","renderOption","createElement","forceCloseMenu","disableSearch","target","_StyledStyledButton","$disabled","$size","fill","_styled","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n  onChange: (val: string | number | (string | number)[]) => void;\n  size: string;\n  selected: string;\n  options: IOptionItemProps[];\n  disabled?: boolean;\n  search?: boolean;\n  // @ToDo: Fix this\n  disabledInternalSort?: boolean;\n  keepSameOptionsOrder?: boolean;\n  selectedLabel?: ReactNode;\n  /** Set select target element */\n  target?: ElementWithRef<Element>;\n  /** Render option */\n  renderOption?: (\n    option: Record<string, ReactNode>,\n    data: Record<string, unknown>\n  ) => string | ReactElement;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n  onChange,\n  size,\n  selected,\n  options,\n  search = false,\n  disabled = false,\n  disabledInternalSort = true,\n  keepSameOptionsOrder = true,\n  selectedLabel,\n  renderOption,\n}) => {\n  return (\n    <Select\n      onChange={onChange}\n      forceCloseMenu\n      disableSearch={!search}\n      target={\n        <StyledButton css=\"flex-shrink:0\">\n          <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n            {selectedLabel ? selectedLabel : selected}\n            {size === \"big\" ? (\n              <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n            ) : (\n              <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n            )}\n          </StyledInputSelectTrigger>\n        </StyledButton>\n      }\n      options={options}\n      disabledInternalSort={disabledInternalSort}\n      keepSameOptionsOrder={keepSameOptionsOrder}\n      selected={selected}\n      renderOption={renderOption}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAmC,OAAO;AAEtD,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,UAAU;AAC5D,SAA2CC,MAAM,QAAQ,WAAW;AACpE,SAASC,YAAY,QAAQ,mBAAmB;AAsBhD,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAWjD;EAAA,IAXkD;IACtDC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,MAAM,GAAG,KAAK;IACdC,QAAQ,GAAG,KAAK;IAChBC,oBAAoB,GAAG,IAAI;IAC3BC,oBAAoB,GAAG,IAAI;IAC3BC,aAAa;IACbC;EACF,CAAC,GAAAV,IAAA;EACC,oBACEP,KAAA,CAAAkB,aAAA,CAACd,MAAM;IACLI,QAAQ,EAAEA,QAAS;IACnBW,cAAc;IACdC,aAAa,EAAE,CAACR,MAAO;IACvBS,MAAM,eACJrB,KAAA,CAAAkB,aAAA,CAAAI,mBAAA,qBACEtB,KAAA,CAAAkB,aAAA,CAACjB,wBAAwB;MAACsB,SAAS,EAAEV,QAAS;MAACW,KAAK,EAAEf;IAAK,GACxDO,aAAa,GAAGA,aAAa,GAAGN,QAAQ,EACxCD,IAAI,KAAK,KAAK,gBACbT,KAAA,CAAAkB,aAAA,CAAChB,aAAa;MAACuB,IAAI,EAAC;IAAwB,CAAE,CAAC,gBAE/CzB,KAAA,CAAAkB,aAAA,CAACf,kBAAkB;MAACsB,IAAI,EAAC;IAAwB,CAAE,CAE7B,CACd,CACf;IACDd,OAAO,EAAEA,OAAQ;IACjBG,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CL,QAAQ,EAAEA,QAAS;IACnBO,YAAY,EAAEA;EAAa,CAC5B,CAAC;AAEN,CAAC;AAAC,IAAAK,mBAAA,GAAAI,OAAA,CAAArB,YAAA,EAAAsB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA"}
+{"version":3,"file":"InputSelect.js","names":["React","StyledInputSelectTrigger","ArrowDownIcon","ArrowDownSmallIcon","Select","StyledButton","InputSelect","_ref","onChange","size","selected","options","search","disabled","disabledInternalSort","keepSameOptionsOrder","selectedLabel","renderOption","filterCriteria","createElement","forceCloseMenu","disableSearch","target","_StyledStyledButton","$disabled","$size","fill","_styled","withConfig","displayName","componentId"],"sources":["../../../../src/components/Input/InputSelect.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { ArrowDownIcon, ArrowDownSmallIcon } from \"../Icons\";\nimport { ElementWithRef, IOptionItemProps, Select } from \"../Select\";\nimport { StyledButton } from \"../Trigger/Styles\";\n\nexport interface InputSelectProps {\n  onChange: (val: string | number | (string | number)[]) => void;\n  size: string;\n  selected: string;\n  options: IOptionItemProps[];\n  disabled?: boolean;\n  search?: boolean;\n  // @ToDo: Fix this\n  disabledInternalSort?: boolean;\n  keepSameOptionsOrder?: boolean;\n  selectedLabel?: ReactNode;\n  /** Set select target element */\n  target?: ElementWithRef<Element>;\n  /** Render option */\n  renderOption?: (\n    option: Record<string, ReactNode>,\n    data: Record<string, unknown>\n  ) => string | ReactElement;\n  /** Custom filter function for additional filtering criteria */\n  filterCriteria?: (option: IOptionItemProps, filter: string) => boolean;\n}\n\nexport const InputSelect: React.FC<InputSelectProps> = ({\n  onChange,\n  size,\n  selected,\n  options,\n  search = false,\n  disabled = false,\n  disabledInternalSort = true,\n  keepSameOptionsOrder = true,\n  selectedLabel,\n  renderOption,\n  filterCriteria,\n}) => {\n  return (\n    <Select\n      onChange={onChange}\n      forceCloseMenu\n      disableSearch={!search}\n      target={\n        <StyledButton css=\"flex-shrink:0\">\n          <StyledInputSelectTrigger $disabled={disabled} $size={size}>\n            {selectedLabel ? selectedLabel : selected}\n            {size === \"big\" ? (\n              <ArrowDownIcon fill=\"var(--color-theme-700)\" />\n            ) : (\n              <ArrowDownSmallIcon fill=\"var(--color-theme-700)\" />\n            )}\n          </StyledInputSelectTrigger>\n        </StyledButton>\n      }\n      options={options}\n      disabledInternalSort={disabledInternalSort}\n      keepSameOptionsOrder={keepSameOptionsOrder}\n      selected={selected}\n      renderOption={renderOption}\n      filterCriteria={filterCriteria}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAmC,OAAO;AAEtD,SAASC,wBAAwB,QAAQ,UAAU;AACnD,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,UAAU;AAC5D,SAA2CC,MAAM,QAAQ,WAAW;AACpE,SAASC,YAAY,QAAQ,mBAAmB;AAwBhD,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAYjD;EAAA,IAZkD;IACtDC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,MAAM,GAAG,KAAK;IACdC,QAAQ,GAAG,KAAK;IAChBC,oBAAoB,GAAG,IAAI;IAC3BC,oBAAoB,GAAG,IAAI;IAC3BC,aAAa;IACbC,YAAY;IACZC;EACF,CAAC,GAAAX,IAAA;EACC,oBACEP,KAAA,CAAAmB,aAAA,CAACf,MAAM;IACLI,QAAQ,EAAEA,QAAS;IACnBY,cAAc;IACdC,aAAa,EAAE,CAACT,MAAO;IACvBU,MAAM,eACJtB,KAAA,CAAAmB,aAAA,CAAAI,mBAAA,qBACEvB,KAAA,CAAAmB,aAAA,CAAClB,wBAAwB;MAACuB,SAAS,EAAEX,QAAS;MAACY,KAAK,EAAEhB;IAAK,GACxDO,aAAa,GAAGA,aAAa,GAAGN,QAAQ,EACxCD,IAAI,KAAK,KAAK,gBACbT,KAAA,CAAAmB,aAAA,CAACjB,aAAa;MAACwB,IAAI,EAAC;IAAwB,CAAE,CAAC,gBAE/C1B,KAAA,CAAAmB,aAAA,CAAChB,kBAAkB;MAACuB,IAAI,EAAC;IAAwB,CAAE,CAE7B,CACd,CACf;IACDf,OAAO,EAAEA,OAAQ;IACjBG,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CL,QAAQ,EAAEA,QAAS;IACnBO,YAAY,EAAEA,YAAa;IAC3BC,cAAc,EAAEA;EAAe,CAChC,CAAC;AAEN,CAAC;AAAC,IAAAK,mBAAA,GAAAI,OAAA,CAAAtB,YAAA,EAAAuB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA"}

package/dist/esm/components/Input/Styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps } from "./Input";
 import { InputMode, InputSize } from "./types";
 interface StyledInputWrapperProps {
@@ -27,7 +28,9 @@ export declare const StyledFlagTriggerLabel: import("styled-components").StyledC
     $size: "small" | "regular" | "big";
 }, never>;
 export declare const StyledOptionFlag: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledOptionName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledOptionName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledOptionCode: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledOptionRowEnd: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledOptionWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Input/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA+DvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;;SAgCd,CAAC;AAIF,eAAO,MAAM,sBAAsB;WAC1B,OAAO,GAAG,SAAS,GAAG,KAAK;SAGnC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAG5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAI5B,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAQ/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAM/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA+DvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;;SAgCd,CAAC;AAIF,eAAO,MAAM,sBAAsB;WAC1B,OAAO,GAAG,SAAS,GAAG,KAAK;SAGnC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAG5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,8QAI5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,8QAO5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,qEAI9B,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAQ/B,CAAC"}

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

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
 import { InputResetStyle } from "../InputResetStyle";
+import { Body2 } from "../Typography";
 export const StyledInputWrapper = styled.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
@@ -68,14 +69,24 @@ export const StyledOptionFlag = styled.span.withConfig({
   componentId: "sc-ce8kcp-6"
 })(["font-size:24px;margin-right:4px;"]);
 StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
-export const StyledOptionName = styled.span.withConfig({
+export const StyledOptionName = styled(Body2).withConfig({
   displayName: "Styles__StyledOptionName",
   componentId: "sc-ce8kcp-7"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 StyledOptionName.displayName = "StyledOptionName";
+export const StyledOptionCode = styled(Body2).withConfig({
+  displayName: "Styles__StyledOptionCode",
+  componentId: "sc-ce8kcp-8"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
+StyledOptionCode.displayName = "StyledOptionCode";
+export const StyledOptionRowEnd = styled.span.withConfig({
+  displayName: "Styles__StyledOptionRowEnd",
+  componentId: "sc-ce8kcp-9"
+})(["display:flex;align-items:center;gap:8px;"]);
+StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
 export const StyledOptionWrapper = styled.span.withConfig({
   displayName: "Styles__StyledOptionWrapper",
-  componentId: "sc-ce8kcp-8"
+  componentId: "sc-ce8kcp-10"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
 StyledOptionWrapper.displayName = "StyledOptionWrapper";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","InputResetStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputResetStyle } from \"../InputResetStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${BoxSizingStyle}\n  ${InputResetStyle}\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled?: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","InputResetStyle","Body2","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionCode","StyledOptionRowEnd","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputResetStyle } from \"../InputResetStyle\";\nimport { Body2 } from \"../Typography\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${BoxSizingStyle}\n  ${InputResetStyle}\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled?: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled(Body2)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionCode = styled(Body2)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-left: auto;\n  color: var(--color-theme-600);\n  flex-shrink: 0;\n`;\n\nStyledOptionCode.displayName = \"StyledOptionCode\";\n\nexport const StyledOptionRowEnd = styled.span`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`;\n\nStyledOptionRowEnd.displayName = \"StyledOptionRowEnd\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}

package/dist/index.js

@@ -14274,14 +14274,24 @@
     componentId: "sc-ce8kcp-6"
   })(["font-size:24px;margin-right:4px;"]);
   StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
-  var StyledOptionName = styled__default["default"].span.withConfig({
+  var StyledOptionName = styled__default["default"](Body2).withConfig({
     displayName: "Styles__StyledOptionName",
     componentId: "sc-ce8kcp-7"
   })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
   StyledOptionName.displayName = "StyledOptionName";
+  var StyledOptionCode = styled__default["default"](Body2).withConfig({
+    displayName: "Styles__StyledOptionCode",
+    componentId: "sc-ce8kcp-8"
+  })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
+  StyledOptionCode.displayName = "StyledOptionCode";
+  var StyledOptionRowEnd = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledOptionRowEnd",
+    componentId: "sc-ce8kcp-9"
+  })(["display:flex;align-items:center;gap:8px;"]);
+  StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
   var StyledOptionWrapper = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledOptionWrapper",
-    componentId: "sc-ce8kcp-8"
+    componentId: "sc-ce8kcp-10"
   })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
   StyledOptionWrapper.displayName = "StyledOptionWrapper";
 
@@ -16659,7 +16669,8 @@
       _ref$keepSameOptionsO = _ref.keepSameOptionsOrder,
       keepSameOptionsOrder = _ref$keepSameOptionsO === void 0 ? true : _ref$keepSameOptionsO,
       selectedLabel = _ref.selectedLabel,
-      renderOption = _ref.renderOption;
+      renderOption = _ref.renderOption,
+      filterCriteria = _ref.filterCriteria;
     return /*#__PURE__*/React__default["default"].createElement(Select, {
       onChange: onChange,
       forceCloseMenu: true,
@@ -16676,7 +16687,8 @@
       disabledInternalSort: disabledInternalSort,
       keepSameOptionsOrder: keepSameOptionsOrder,
       selected: selected,
-      renderOption: renderOption
+      renderOption: renderOption,
+      filterCriteria: filterCriteria
     });
   };
   var _StyledStyledButton = styled__default["default"](StyledButton).withConfig({
@@ -16830,10 +16842,10 @@
 
   var _excluded$F = ["size", "disabled", "value", "onChange", "defaultCountry"];
   var renderOption$2 = function renderOption(option, data) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionFlag, null, countryExplorer.getCountryFlag(option.id)), /*#__PURE__*/React__default["default"].createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React__default["default"].createElement(RadioButton, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionFlag, null, countryExplorer.getCountryFlag(option.id)), /*#__PURE__*/React__default["default"].createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React__default["default"].createElement(StyledOptionRowEnd, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionCode, null, option.additionalInfo), /*#__PURE__*/React__default["default"].createElement(RadioButton, {
       checked: data.checked,
       onChange: data.onChange
-    }));
+    })));
   };
   var InputPhone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$size = _ref.size,
@@ -16858,7 +16870,8 @@
     var options = countryExplorer.countriesArraySortedByName.map(function (country) {
       return {
         id: country.countryCode,
-        name: "+".concat(country.callingCode, " ").concat(country.name)
+        name: country.name,
+        additionalInfo: "+".concat(country.callingCode)
       };
     });
     var separatePrefixFromValue = function separatePrefixFromValue(fullValue) {
@@ -16871,12 +16884,11 @@
           var code = digits.slice(0, i);
           if (countryExplorer.callingCodeToCountryCodeMap[code]) {
             newPrefix = countryExplorer.callingCodeToCountryCodeMap[code];
-            newValue = fullValue.slice(prefixLength + countryExplorer.getCountryCallingCode(newPrefix).length);
+            var dialCode = countryExplorer.getCountryCallingCode(newPrefix);
+            newValue = fullValue.slice(prefixLength + dialCode.length);
             break;
           }
         }
-      } else if (fullValue.startsWith(prefix)) {
-        newValue = fullValue.slice(prefix.length);
       }
       return {
         newPrefix,
@@ -16947,6 +16959,10 @@
         onChange: handleSelectChange,
         options: options,
         selected: prefix,
+        filterCriteria: function filterCriteria(option, filter) {
+          var _option$additionalInf;
+          return !!(option !== null && option !== void 0 && (_option$additionalInf = option.additionalInfo) !== null && _option$additionalInf !== void 0 && _option$additionalInf.toLowerCase().includes(filter));
+        },
         selectedLabel: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFlagTriggerLabel, {
           $size: size
         }, countryExplorer.getCountryFlag(prefix)), "+", countryExplorer.getCountryCallingCode(prefix)),
@@ -20548,15 +20564,18 @@
   var StyledSpan = styled__default["default"](Typography).withConfig({
     displayName: "Styles__StyledSpan",
     componentId: "sc-1wapx2a-1"
-  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " &:empty:before{content:\" \";}"], function (_ref) {
+  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (_ref) {
     var $disabled = _ref.$disabled;
     return $disabled && styled.css(["visibility:visible;"]);
+  }, function (_ref2) {
+    var invalid = _ref2.invalid;
+    return invalid && styled.css(["border:1px solid var(--red-alert);"]);
   });
   StyledSpan.displayName = "StyledSpan";
   var StyledInput$1 = styled__default["default"](Typography).withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-1wapx2a-2"
-  })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}"], {
+  })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{opacity:0;}", ""], {
     "position": "absolute",
     "inset": "0px",
     "boxSizing": "border-box",
@@ -20574,10 +20593,13 @@
     ":hover": {
       "borderColor": "var(--color-theme-700)"
     }
+  }, function (_ref3) {
+    var invalid = _ref3.invalid;
+    return invalid && styled.css(["border-color:var(--red-alert) !important;"]);
   });
   StyledInput$1.displayName = "StyledInput";
 
-  var _excluded$g = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children"];
+  var _excluded$g = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children", "invalid"];
   var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$variant = _ref.variant,
@@ -20588,6 +20610,7 @@
       inputProps = _ref.inputProps,
       wrapRef = _ref.wrapRef,
       children = _ref.children,
+      invalid = _ref.invalid,
       props = _objectWithoutProperties(_ref, _excluded$g);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
@@ -20614,7 +20637,8 @@
       value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
       onBlur: handleBlur,
       disabled: disabled,
-      "data-form-type": "other"
+      "data-form-type": "other",
+      invalid: invalid
     })));
   });
   EditableContent.displayName = "EditableContent";
@@ -20785,7 +20809,7 @@
   });
   EditableHours.displayName = "EditableHours";
 
-  var _excluded$d = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals", "min", "max"];
+  var _excluded$d = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals", "min", "max", "invalid"];
   var EditableCurrency = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$decimalLength = _ref.decimalLength,
       decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
@@ -20812,6 +20836,7 @@
       trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
       min = _ref.min,
       max = _ref.max,
+      invalid = _ref.invalid,
       rest = _objectWithoutProperties(_ref, _excluded$d);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
@@ -20853,6 +20878,7 @@
       disabled: disabled,
       ref: handleRef,
       className: className,
+      invalid: invalid,
       inputProps: _objectSpread2({
         value: formattedValue,
         onBlur: onBlur,