se-design 0.0.127 → 0.0.128

package/dist/index172.js

@@ -1,5 +1,55 @@
-var e = {};
+import { __require as E } from "./index170.js";
+import { __require as _ } from "./index171.js";
+var f, v;
+function P() {
+  if (v) return f;
+  v = 1;
+  var o = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var y = E(), t = {}, d = _();
+    o = function(n) {
+      var a = "Warning: " + n;
+      typeof console != "undefined" && console.error(a);
+      try {
+        throw new Error(a);
+      } catch (i) {
+      }
+    };
+  }
+  function u(n, a, i, s, c) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var e in n)
+        if (d(n, e)) {
+          var r;
+          try {
+            if (typeof n[e] != "function") {
+              var h = Error(
+                (s || "React class") + ": " + i + " type `" + e + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[e] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw h.name = "Invariant Violation", h;
+            }
+            r = n[e](a, e, s, i, null, y);
+          } catch (l) {
+            r = l;
+          }
+          if (r && !(r instanceof Error) && o(
+            (s || "React class") + ": type specification of " + i + " `" + e + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof r + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), r instanceof Error && !(r.message in t)) {
+            t[r.message] = !0;
+            var p = c ? c() : "";
+            o(
+              "Failed " + i + " type: " + r.message + (p != null ? p : "")
+            );
+          }
+        }
+    }
+  }
+  return u.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (t = {});
+  }, f = u, f;
+}
 export {
-  e as __exports
+  P as __require
 };
 //# sourceMappingURL=index172.js.map

package/dist/index172.js.map

@@ -1 +1 @@
-{"version":3,"file":"index172.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index172.js","sources":["../node_modules/prop-types/checkPropTypes.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar printWarning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n  var loggedTypeFailures = {};\n  var has = require('./lib/has');\n\n  printWarning = function(text) {\n    var message = 'Warning: ' + text;\n    if (typeof console !== 'undefined') {\n      console.error(message);\n    }\n    try {\n      // --- Welcome to debugging React ---\n      // This error was thrown as a convenience so that you can use this stack\n      // to find the callsite that caused this warning to fire.\n      throw new Error(message);\n    } catch (x) { /**/ }\n  };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n  if (process.env.NODE_ENV !== 'production') {\n    for (var typeSpecName in typeSpecs) {\n      if (has(typeSpecs, typeSpecName)) {\n        var error;\n        // Prop type validation may throw. In case they do, we don't want to\n        // fail the render phase where it didn't fail before. So we log it.\n        // After these have been cleaned up, we'll let them throw.\n        try {\n          // This is intentionally an invariant that gets caught. It's the same\n          // behavior as without this statement except with a better message.\n          if (typeof typeSpecs[typeSpecName] !== 'function') {\n            var err = Error(\n              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n            );\n            err.name = 'Invariant Violation';\n            throw err;\n          }\n          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n        } catch (ex) {\n          error = ex;\n        }\n        if (error && !(error instanceof Error)) {\n          printWarning(\n            (componentName || 'React class') + ': type specification of ' +\n            location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n            'You may have forgotten to pass an argument to the type checker ' +\n            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n            'shape all require an argument).'\n          );\n        }\n        if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n          // Only monitor this failure once because there tends to be a lot of the\n          // same error.\n          loggedTypeFailures[error.message] = true;\n\n          var stack = getStack ? getStack() : '';\n\n          printWarning(\n            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n          );\n        }\n      }\n    }\n  }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n  if (process.env.NODE_ENV !== 'production') {\n    loggedTypeFailures = {};\n  }\n}\n\nmodule.exports = checkPropTypes;\n"],"names":["printWarning","ReactPropTypesSecret","require$$0","loggedTypeFailures","has","require$$1","text","message","x","checkPropTypes","typeSpecs","values","location","componentName","getStack","typeSpecName","error","err","ex","stack","checkPropTypes_1"],"mappings":";;;;;;AASA,MAAIA,IAAe,WAAW;AAAA,EAAE;AAEhC,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAIC,IAAuBC,EAAqC,GAC5DC,IAAqB,CAAE,GACvBC,IAAMC,EAAoB;AAE9B,IAAAL,IAAe,SAASM,GAAM;AAC5B,UAAIC,IAAU,cAAcD;AAC5B,MAAI,OAAO,WAAY,eACrB,QAAQ,MAAMC,CAAO;AAEvB,UAAI;AAIF,cAAM,IAAI,MAAMA,CAAO;AAAA,MACxB,SAAQC,GAAG;AAAA,MAAA;AAAA,IACb;AAAA;AAcH,WAASC,EAAeC,GAAWC,GAAQC,GAAUC,GAAeC,GAAU;AAC5E,QAAI,QAAQ,IAAI,aAAa;AAC3B,eAASC,KAAgBL;AACvB,YAAIN,EAAIM,GAAWK,CAAY,GAAG;AAChC,cAAIC;AAIJ,cAAI;AAGF,gBAAI,OAAON,EAAUK,CAAY,KAAM,YAAY;AACjD,kBAAIE,IAAM;AAAA,iBACPJ,KAAiB,iBAAiB,OAAOD,IAAW,YAAYG,IAAe,+FACC,OAAOL,EAAUK,CAAY,IAAI;AAAA,cAEnH;AACD,oBAAAE,EAAI,OAAO,uBACLA;AAAA;AAER,YAAAD,IAAQN,EAAUK,CAAY,EAAEJ,GAAQI,GAAcF,GAAeD,GAAU,MAAMX,CAAoB;AAAA,UAC1G,SAAQiB,GAAI;AACX,YAAAF,IAAQE;AAAA;AAYV,cAVIF,KAAS,EAAEA,aAAiB,UAC9BhB;AAAA,aACGa,KAAiB,iBAAiB,6BACnCD,IAAW,OAAOG,IAAe,6FAC6B,OAAOC,IAAQ;AAAA,UAI9E,GAECA,aAAiB,SAAS,EAAEA,EAAM,WAAWb,IAAqB;AAGpE,YAAAA,EAAmBa,EAAM,OAAO,IAAI;AAEpC,gBAAIG,IAAQL,IAAWA,EAAQ,IAAK;AAEpC,YAAAd;AAAA,cACE,YAAYY,IAAW,YAAYI,EAAM,WAAWG,KAAS,OAAOA,IAAQ;AAAA,YAC7E;AAAA;;;;AAYX,SAAAV,EAAe,oBAAoB,WAAW;AAC5C,IAAI,QAAQ,IAAI,aAAa,iBAC3BN,IAAqB,CAAE;AAAA,KAI3BiB,IAAiBX;;","x_google_ignoreList":[0]}

package/dist/index173.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=index173.js.map

package/dist/index173.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index173.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index174.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=index174.js.map

package/dist/index174.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index174.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index23.js

@@ -1,13 +1,13 @@
 var F = Object.defineProperty, G = Object.defineProperties;
 var H = Object.getOwnPropertyDescriptors;
-var N = Object.getOwnPropertySymbols;
+var k = Object.getOwnPropertySymbols;
 var K = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
-var s = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
+var N = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
   for (var d in c || (c = {}))
-    K.call(c, d) && s(e, d, c[d]);
-  if (N)
-    for (var d of N(c))
-      L.call(c, d) && s(e, d, c[d]);
+    K.call(c, d) && N(e, d, c[d]);
+  if (k)
+    for (var d of k(c))
+      L.call(c, d) && N(e, d, c[d]);
   return e;
 }, V = (e, c) => G(e, H(c));
 import l, { useState as $, useRef as Q, useEffect as U } from "react";
@@ -40,9 +40,9 @@ const ce = (e) => {
     className: "option-chip flex flex-1 items-center justify-between"
   }, R(t), " ", b && (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ l.createElement("span", {
     className: "w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center"
-  }, n == null ? void 0 : n.length)), J = (t) => {
-    var E, k;
-    const a = t[o], r = ((E = n[0]) == null ? void 0 : E[o]) || y, g = m != null && m.length ? t[m] == ((k = n[0]) == null ? void 0 : k[m]) : !0, S = j && a === r && g;
+  }, n == null ? void 0 : n.length)), z = (t) => {
+    var E, s;
+    const a = t[o], r = ((E = n[0]) == null ? void 0 : E[o]) || y, g = m != null && m.length ? t[m] == ((s = n[0]) == null ? void 0 : s[m]) : !0, S = j && a === r && g;
     return /* @__PURE__ */ l.createElement("div", {
       key: `$drop-option-${a}`,
       className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${S ? "selected" : ""}`,
@@ -53,15 +53,15 @@ const ce = (e) => {
       name: "checkmark",
       stroke: x
     }));
-  }, _ = () => /* @__PURE__ */ l.createElement("div", {
+  }, J = () => /* @__PURE__ */ l.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, i == null ? void 0 : i.map((t) => J(t))), W = (t, a) => {
+  }, i == null ? void 0 : i.map((t) => z(t))), _ = (t, a) => {
     let r = [];
     t ? r = [...n, a] : r = n == null ? void 0 : n.filter((g) => g[m] !== a[m]), u(r);
-  }, X = () => {
+  }, W = () => {
     var t, a;
     (t = f.current) == null || t.togglePopover(), (a = e == null ? void 0 : e.onApply) == null || a.call(e, n);
-  }, q = (t) => {
+  }, X = (t) => {
     const a = n.some((r) => r[m] === t[m]);
     return /* @__PURE__ */ l.createElement("div", {
       key: `$drop-option-${t[o]}`,
@@ -70,21 +70,23 @@ const ce = (e) => {
       automationId: "checkbox",
       className: "checkbox",
       defaultChecked: a,
-      onChange: (r) => W(r, t),
+      onChange: (r) => _(r, t),
       label: t == null ? void 0 : t.label
     }));
-  }, z = () => /* @__PURE__ */ l.createElement("div", {
+  }, q = () => /* @__PURE__ */ l.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, i == null ? void 0 : i.map((t) => q(t)), /* @__PURE__ */ l.createElement("div", {
+  }, i == null ? void 0 : i.map((t) => X(t)), /* @__PURE__ */ l.createElement("div", {
     className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
   }, /* @__PURE__ */ l.createElement(P, {
     label: "Clear",
     type: "link",
+    size: "sm",
     onClick: T
   }), /* @__PURE__ */ l.createElement(P, {
     label: "Apply",
     type: "primary",
-    onClick: X
+    size: "sm",
+    onClick: W
   }))), D = () => {
     const t = c ? "border-[var(--color-blue-500)]" : v ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", a = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${a || t} flex items-center ${I}`;
     return /* @__PURE__ */ l.createElement("div", {
@@ -106,7 +108,7 @@ const ce = (e) => {
     className: `${v ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
   }, /* @__PURE__ */ l.createElement(Y, {
     ref: f,
-    renderPopoverContents: b ? z : _,
+    renderPopoverContents: b ? q : J,
     contentWidth: "full",
     renderPopoverSrcElement: D,
     onPopoverToggle: (t) => d(t),

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = ''\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValues(\n      props?.defaultSelectedValue\n        ? Array.isArray(props?.defaultSelectedValue)\n          ? props?.defaultSelectedValue\n          : [props.defaultSelectedValue]\n        : []\n    );\n  }, [props?.defaultSelectedValue]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return (\n      <p className={`option-chip flex flex-1 items-center justify-between`}>\n        {getSelectedDropDownValue(option)}{' '}\n        {isMultiSelect && selectedDropDownValues?.length > 0 && (\n          <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n            {selectedDropDownValues?.length}\n          </span>\n        )}\n      </p>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValue: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValue = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValue);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${dropDownOption[selectBy]}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n        ? 'border-[var(--color-gray-300)]'\n        : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValues[0])}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = ''\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValues(\n      props?.defaultSelectedValue\n        ? Array.isArray(props?.defaultSelectedValue)\n          ? props?.defaultSelectedValue\n          : [props.defaultSelectedValue]\n        : []\n    );\n  }, [props?.defaultSelectedValue]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return (\n      <p className={`option-chip flex flex-1 items-center justify-between`}>\n        {getSelectedDropDownValue(option)}{' '}\n        {isMultiSelect && selectedDropDownValues?.length > 0 && (\n          <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n            {selectedDropDownValues?.length}\n          </span>\n        )}\n      </p>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValue: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValue = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValue);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${dropDownOption[selectBy]}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n        ? 'border-[var(--color-gray-300)]'\n        : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValues[0])}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":";;;;;;;;;;;;AAgCO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAMC,KAA+BC,CAAUA,MAAA;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIV,EAAS,EAAK,GACpD,CAACW,GAAwBC,CAAyB,IAAIZ,EAA0B,MACpFQ,KAAAA,QAAAA,EAAOK,uBACHC,MAAMC,QAAQP,KAAAA,gBAAAA,EAAOK,oBAAoB,IACvCL,KAAAA,gBAAAA,EAAOK,uBACP,CAACL,EAAMK,oBAAoB,IAC7B,EACN,GACMG,IAAaf,EAAuC,IAAI,GAExD;AAAA,IACJgB,UAAAA,IAAW;AAAA,IACXC,iBAAAA,IAAkB;AAAA,IAClBC,iBAAAA,IAAkB;AAAA,IAClBC,iBAAAA;AAAAA,IACAC,aAAAA,IAAc;AAAA,IACdC,WAAAA,IAAY;AAAA,IACZC,UAAAA,IAAW;AAAA,IACXC,mBAAAA,IAAoB;AAAA,IACpBC,UAAAA,IAAW;AAAA,IACXC,cAAAA,IAAe;AAAA,EAAA,IACblB;AAEJN,EAAAA,EAAU,MAAM;AACdU,IAAAA,EACEJ,KAAAA,QAAAA,EAAOK,uBACHC,MAAMC,QAAQP,KAAAA,gBAAAA,EAAOK,oBAAoB,IACvCL,KAAAA,gBAAAA,EAAOK,uBACP,CAACL,EAAMK,oBAAoB,IAC7B,CAAA,CACN;AAAA,EAAA,GACC,CAACL,KAAAA,gBAAAA,EAAOK,oBAAoB,CAAC;AAE1Bc,QAAAA,KAAgBnB,KAAAA,gBAAAA,EAAOoB,UAAS,gBAEhCC,IAA4BA,CAACC,MAAwB;AApCtD,QAAAC,GAAAC;AAqCuB,IAAApB,EAAA,CAACkB,CAAc,CAAC,IAC1Cd,IAAAA,EAAWiB,YAAXjB,QAAAA,EAAoBkB,kBACpB1B,IAAAA,KAAAA,gBAAAA,EAAO2B,kBAAP3B,QAAAA,EAAAA,KAAAA,GAAuBsB;AAAAA,EACzB,GAEMM,IAA2BA,CAACC,MAC5BV,IACKN,KAEFgB,KAAAA,gBAAAA,EAASpB,OAAaI,GAGzBiB,IAA8BA,MAAM;AACxC1B,IAAAA,EAA0B,CAAA,CAAE;AAAA,EAC9B,GAEM2B,IAAaA,CAACF,MACd7B,KAAAA,QAAAA,EAAOgC,mBACFhC,KAAAA,gBAAAA,EAAOgC,iBAAiBH,KAG/BI,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAW;AAAA,EAAuD,GAClEP,EAAyBC,CAAM,GAAG,KAClCV,MAAiBhB,KAAAA,gBAAAA,EAAwBiC,UAAS,KACjDF,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAA,GACbhC,KAAAA,gBAAAA,EAAwBiC,MACrB,CAEP,GAIDC,IAAoBA,CAACf,MAAkC;AArExD,QAAAC,GAAAC;AAsEGc,UAAAA,IAAYhB,EAAeb,CAAQ,GACnC8B,MAAwBpC,IAAAA,EAAuB,CAAC,MAAxBA,gBAAAA,EAA4BM,OAAaI,GACjE2B,IAAmB9B,KAAAA,QAAAA,EAAiB0B,SACtCd,EAAeZ,CAAe,OAAKP,IAAAA,EAAuB,CAAC,MAAxBA,gBAAAA,EAA4BO,MAC/D,IACE+B,IAAmB9B,KAAmB2B,MAAcC,KAAyBC;AAEjFP,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEQ,KAAK,gBAAgBJ,CAAS;AAAA,MAC9BH,WAAW,uFAAuFM,IAAmB,aAAa,EAAE;AAAA,MACpIE,SAASA,MAAMtB,EAA0BC,CAAc;AAAA,OAEtDS,EAAWa,EAAAC,EAAA,IAAKvB,IAAL;AAAA,MAAqBmB,kBAAAA;AAAAA,IAAkB,EAAA,GAClDA,KAAoBR,gBAAAA,EAAAC,cAACtC,GAAI;AAAA,MAACkD,MAAK;AAAA,MAAYC,QAAQjC;AAAAA,IAAAA,CAAY,CAC7D;AAAA,EAET,GAEMkC,IAAyBA,MAE3Bf,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZvB,KAAAA,gBAAAA,EAAiBqC,IAAK3B,OAAmBe,EAAkBf,CAAc,EACvE,GAIH4B,IAAuCA,CAACC,GAAqB7B,MAAkC;AACnG,QAAI8B,IAA4C,CAAE;AAClD,IAAID,IACyBC,IAAA,CAAC,GAAGjD,GAAwBmB,CAAc,IAE1CnB,IAAAA,KAAAA,gBAAAA,EAAwBkD,OAChDxB,CAAWA,MAAAA,EAAOnB,CAAe,MAAMY,EAAeZ,CAAe,IAG1EN,EAA0BgD,CAAwB;AAAA,EACpD,GAEME,IAAoCA,MAAM;AA5G3C,QAAA/B,GAAAC;AA6GHhB,KAAAA,IAAAA,EAAWiB,YAAXjB,QAAAA,EAAoBkB,kBACpB1B,IAAAA,KAAAA,gBAAAA,EAAOuD,YAAPvD,QAAAA,EAAAA,KAAAA,GAAiBG;AAAAA,EACnB,GAEMqD,IAA+BA,CAAClC,MAAkC;AAChEmB,UAAAA,IAAmBtC,EAAuBsD,KAC7C5B,CAAAA,MAAWA,EAAOnB,CAAe,MAAMY,EAAeZ,CAAe,CACxE;AAEEuB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEQ,KAAK,gBAAgBpB,EAAeb,CAAQ,CAAC;AAAA,MAC7C0B,WAAU;AAAA,IAAA,GAEVD,gBAAAA,EAAAA,cAACrC,GAAQ;AAAA,MACP6D,cAAa;AAAA,MACbvB,WAAU;AAAA,MACVwB,gBAAgBlB;AAAAA,MAChBmB,UAAWC,CAAAA,MAAUX,EAAqCW,GAAOvC,CAAc;AAAA,MAC/EwC,OAAOxC,KAAAA,gBAAAA,EAAgBwC;AAAAA,IAAAA,CACxB,CACE;AAAA,EAET,GAEMC,IAAoCA,MAEtC9B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZvB,KAAAA,gBAAAA,EAAiBqC,IAAK3B,CAAmBkC,MAAAA,EAA6BlC,CAAc,IACrFY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAACpC,GAAM;AAAA,IAACgE,OAAM;AAAA,IAAQ1C,MAAK;AAAA,IAAO4C,MAAK;AAAA,IAAKrB,SAASb;AAAAA,EAAAA,CAA8B,GACnFI,gBAAAA,EAAAA,cAACpC,GAAM;AAAA,IAACgE,OAAM;AAAA,IAAQ1C,MAAK;AAAA,IAAU4C,MAAK;AAAA,IAAKrB,SAASW;AAAAA,EAAoC,CAAA,CACzF,CACF,GAIHW,IAAuBA,MAAM;AACjC,UAAMC,IAAcjE,IAChB,mCACAc,IACE,mCACA,kCACAoD,IAAmBlD,IAAW,kCAAkC,IAChEmD,IAAsB,iFAAiFD,KAAsCD,CAAW,sBAAsBlD,CAAiB;AAGnMiB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAWiC;AAAAA,IAAAA,GACbrC,EAAW5B,EAAuB,CAAC,CAAC,GACrC8B,gBAAAA,EAAAC,cAACtC,GAAI;AAAA,MACHkD,MAAM;AAAA,MACNuB,UAAUpE,IAAiB,QAAQ;AAAA,MACnCkC,WAAW;AAAA,MACXY,QAAQjC;AAAAA,IAAAA,CACT,CACE;AAAA,EAET;AAGEmB,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,+BAA+BnC,KAAAA,QAAAA,EAAOmC,YAAY,IAAInC,KAAAA,gBAAAA,EAAOmC,SAAS,KAAK,EAAE;AAAA,IACxFmC,OAAOtE,KAAAA,gBAAAA,EAAOsE;AAAAA,EAEbtE,IAAAA,KAAAA,gBAAAA,EAAO8D,UACN7B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAA0EnC,KAAAA,gBAAAA,EAAO8D,KAAW,GAE7G7B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEoC,OAAOtE,KAAAA,gBAAAA,EAAOsE;AAAAA,IACdnC,WAAW,GAAGpB,IAAW,4DAA4D,EAAE;AAAA,EAAA,GAEvFmB,gBAAAA,EAAAA,cAACvC,GAAO;AAAA,IACN4E,KAAK/D;AAAAA,IACLgE,uBAAuBrD,IAAgB4C,IAAoCf;AAAAA,IAC3EyB,cAAc;AAAA,IACdC,yBAAyBT;AAAAA,IACzBU,iBAAkBd,CAAU3D,MAAAA,EAAkB2D,CAAK;AAAA,IACnD9C,UAAAA;AAAAA,EACD,CAAA,CACE,GACJE,KAAYgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAqC,GAAEjB,CAAkB,CAClF;AAET;"}

package/dist/index31.js

@@ -1,61 +1,89 @@
-var f = Object.defineProperty, $ = Object.defineProperties;
-var E = Object.getOwnPropertyDescriptors;
-var s = Object.getOwnPropertySymbols;
-var v = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
-var d = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, m = (e, a) => {
-  for (var t in a || (a = {}))
-    v.call(a, t) && d(e, t, a[t]);
-  if (s)
-    for (var t of s(a))
-      C.call(a, t) && d(e, t, a[t]);
+var g = Object.defineProperty, b = Object.defineProperties;
+var w = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var s = (e, t, a) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, m = (e, t) => {
+  for (var a in t || (t = {}))
+    y.call(t, a) && s(e, a, t[a]);
+  if (d)
+    for (var a of d(t))
+      E.call(t, a) && s(e, a, t[a]);
   return e;
-}, u = (e, a) => $(e, E(a));
-import r, { useRef as N } from "react";
-function y(e) {
+}, x = (e, t) => b(e, w(t));
+import l, { useRef as v } from "react";
+function N(e) {
   const {
-    label: a,
-    value: t,
+    label: t,
+    value: a,
     checked: o,
-    disabled: l,
-    name: h,
-    onChange: c,
-    width: b,
-    radioLabelClassName: x = "",
-    radioContainerClassName: w = ""
-  } = e, n = N(null);
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `flex items-start gap-2 ${l ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${l ? "opacity-50" : ""} ${w}`,
+    disabled: r,
+    name: p,
+    onChange: i,
+    width: h,
+    radioLabelClassName: u = "",
+    radioContainerClassName: f = ""
+  } = e, n = v(null);
+  return /* @__PURE__ */ l.createElement("div", {
+    className: `flex items-start gap-2 ${r ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] transition-colors duration-300 ${r ? "opacity-50" : ""} ${f}`,
     onClick: () => {
-      var i;
-      return (i = n.current) == null ? void 0 : i.click();
+      var c;
+      return (c = n.current) == null ? void 0 : c.click();
     },
     style: {
-      width: b || "20vw"
+      width: h || "20vw"
     }
-  }, /* @__PURE__ */ r.createElement("input", {
+  }, /* @__PURE__ */ l.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      padding: "16px",
+      gap: "6px"
+    }
+  }, /* @__PURE__ */ l.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px"
+    }
+  }, /* @__PURE__ */ l.createElement("input", {
     ref: n,
     type: "radio",
-    id: t,
-    name: h,
-    value: t,
+    id: a,
+    name: p,
+    value: a,
     checked: o,
-    disabled: l,
-    className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
+    disabled: r,
+    className: "cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
+    style: {
+      color: "#1088E7",
+      width: "14px",
+      height: "14px",
+      padding: "3px"
+    },
     onChange: () => {
-      c && c(u(m({}, e), {
+      i && i(x(m({}, e), {
         checked: !0
       }));
     }
-  }), /* @__PURE__ */ r.createElement("label", {
-    htmlFor: t,
-    className: `${e.helperLabel && "flex flex-col"} ${l ? "cursor-not-allowed" : "cursor-pointer"}`
-  }, /* @__PURE__ */ r.createElement("span", {
-    className: `text-sm text-[var(--color-gray-800)] ${x}`
-  }, a), e.helperLabel && /* @__PURE__ */ r.createElement("span", {
-    className: `text-xs text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-[20vw]"} break-words whitespace-normal`
+  }), /* @__PURE__ */ l.createElement("label", {
+    htmlFor: a,
+    className: `${e.helperLabel ? "flex flex-col gap-[6px]" : ""} ${r ? "cursor-not-allowed" : "cursor-pointer"}`
+  }, /* @__PURE__ */ l.createElement("span", {
+    className: `text-sm text-[var(--color-gray-800)] ${u} `,
+    style: {
+      fontSize: "16px",
+      fontWeight: "400"
+    }
+  }, t))), e.helperLabel && /* @__PURE__ */ l.createElement("span", {
+    className: `text-xs text-[var(--color-gray-600)] ${e.maxWidth ? `max-w-[${e.maxWidth}]` : "max-w-[20vw]"} break-words whitespace-normal`,
+    style: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
   }, e.helperLabel)));
 }
 export {
-  y as Radio
+  N as Radio
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <input\n        ref={radioRef}\n        type=\"radio\"\n        id={value}\n        name={name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n        onChange={() => {\n          onChange && onChange({ ...props, checked: true });\n        }}\n      />\n      <label\n        htmlFor={value}\n        className={`${props.helperLabel && 'flex flex-col'} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n      >\n        <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </label>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,qDAAqDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACvRM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,SAAStB;AAAAA,IACTY,WAAW,GAAGd,EAAMyB,eAAe,eAAe,IAAIrB,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAExGS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', padding: '16px', gap: '6px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>\n          <input\n            ref={radioRef}\n            type=\"radio\"\n            id={value}\n            name={name}\n            value={value}\n            checked={checked}\n            disabled={disabled}\n            className=\"cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n            style={{\n              color: '#1088E7',\n              width: '14px',\n              height: '14px',\n              padding: '3px'\n            }}\n            onChange={() => {\n              onChange && onChange({ ...props, checked: true });\n            }}\n          />\n          <label\n            htmlFor={value}\n            className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n          >\n            <span\n              className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n              style={{ fontSize: '16px', fontWeight: '400' }}\n            >\n              {label}\n            </span>\n          </label>\n        </div>\n\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n            style={{ fontSize: '14px', fontWeight: '400' }}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","display","flexDirection","padding","gap","alignItems","ref","type","id","color","height","__spreadProps","__spreadValues","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,iDAAiDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACnRM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEX,OAAO;AAAA,MAAQY,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,SAAS;AAAA,MAAQC,KAAK;AAAA,IAAA;AAAA,EAAM,GACjGT,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEC,SAAS;AAAA,MAAQI,YAAY;AAAA,MAAUD,KAAK;AAAA,IAAA;AAAA,EAAO,GAC/DT,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,KAAKd;AAAAA,IACLe,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVI,OAAO;AAAA,MACLS,OAAO;AAAA,MACPpB,OAAO;AAAA,MACPqB,QAAQ;AAAA,MACRP,SAAS;AAAA,IACX;AAAA,IACAf,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASuB,EAAAC,EAAA,IAAK9B,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEkB,SAAS7B;AAAAA,IACTY,WAAW,GAAGd,EAAMgC,cAAc,4BAA4B,EAAE,IAAI5B,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAEtHS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCN,CAAmB;AAAA,IACtEU,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5CjC,CACG,CACD,CACJ,GAEJD,EAAMgC,eACLnB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAMmC,WAAW,UAAUnC,EAAMmC,QAAQ,MAAM,cAAc;AAAA,IAChHjB,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5ClC,EAAMgC,WACH,CAEL,CACF;AAET;"}

package/dist/index38.js

@@ -1,7 +1,7 @@
 import n, { useState as b, useRef as $, useEffect as s, useMemo as z } from "react";
 import { Icon as N } from "./index5.js";
 import { LabelChip as D } from "./index9.js";
-import { debounce as F } from "./index141.js";
+import { debounce as F } from "./index143.js";
 /* empty css         */
 function q(o) {
   const {

package/dist/index44.js

@@ -1,37 +1,40 @@
-import t, { useState as o, useRef as R, useEffect as C } from "react";
+import t, { useState as o, useRef as $, useEffect as g } from "react";
 /* empty css         */
-import c from "./index149.js";
-import { Icon as g } from "./index5.js";
-const O = ({
-  onCountrycodeChange: E,
-  onNumberChange: f,
+import c from "./index151.js";
+import { Icon as E } from "./index5.js";
+const P = ({
+  onCountrycodeChange: f,
+  onNumberChange: N,
   error: m,
-  errorMessage: N,
-  value: s
+  errorMessage: v,
+  value: s,
+  label: u
 }) => {
-  const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
-    e && (u(e), E(e)), i(!1);
-  }, V = (e) => {
+  const [w, p] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [h, L] = o(c), [_, S] = o(""), [b, C] = o(""), l = $(null), a = c.find((e) => e.dial_code === w), V = (e) => {
+    e && (p(e), f(e)), i(!1);
+  }, k = (e) => {
     const n = e.target.value;
-    _(n);
-    const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
-    v(y);
+    S(n);
+    const R = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
+    L(R);
   };
-  C(() => {
+  g(() => {
     const e = (n) => {
       l.current && !l.current.contains(n.target) && i(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), C(() => {
-    s && (u(s.countryCode), h(s.number));
+  }, []), g(() => {
+    s && (p(s.countryCode), C(s.number));
   }, [s]);
-  const k = (e) => {
+  const y = (e) => {
     const n = e.replace(/\D/g, "");
-    console.log("numericValue", n), h(n), f(n);
+    console.log("numericValue", n), C(n), N(n);
   };
   return /* @__PURE__ */ t.createElement("div", {
     className: "phone-input-container-se-design-main-container"
-  }, /* @__PURE__ */ t.createElement("div", {
+  }, u && /* @__PURE__ */ t.createElement("div", {
+    className: "label-container"
+  }, u), /* @__PURE__ */ t.createElement("div", {
     className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
     ref: l
   }, /* @__PURE__ */ t.createElement("div", {
@@ -45,7 +48,7 @@ const O = ({
     src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
     alt: a == null ? void 0 : a.name,
     width: "16"
-  }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
+  }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(E, {
     name: "chevron",
     className: r ? "rotate-180" : ""
   })), /* @__PURE__ */ t.createElement("span", {
@@ -54,26 +57,26 @@ const O = ({
     type: "tel",
     placeholder: "Enter phone number",
     className: "phone-input-container-se-design-phone-number-input",
-    onChange: (e) => k(e.target.value),
-    value: S,
+    onChange: (e) => y(e.target.value),
+    value: b,
     pattern: "[0-9]*"
   })), r && /* @__PURE__ */ t.createElement("div", {
     className: "phone-input-container-se-design-country-code-list"
   }, /* @__PURE__ */ t.createElement("div", {
     className: "search-input-wrapper"
-  }, /* @__PURE__ */ t.createElement(g, {
+  }, /* @__PURE__ */ t.createElement(E, {
     name: "search",
     className: "search-icon"
   }), /* @__PURE__ */ t.createElement("input", {
     type: "text",
     placeholder: "Search",
     className: "phone-input-container-se-design-country-code-list-item-input",
-    onChange: V,
-    value: L
-  })), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
+    onChange: k,
+    value: _
+  })), h.length > 0 ? h.map((e) => /* @__PURE__ */ t.createElement("div", {
     key: e.code,
     className: "phone-input-container-se-design-country-code-list-item",
-    onClick: () => b(e.dial_code)
+    onClick: () => V(e.dial_code)
   }, /* @__PURE__ */ t.createElement("img", {
     src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
     alt: e.name,
@@ -82,9 +85,9 @@ const O = ({
     className: "phone-input-container-se-design-country-code-list-item-no-resuts"
   }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
     className: "error-message"
-  }, N));
+  }, v));
 };
 export {
-  O as PhoneInput
+  P as PhoneInput
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n  label?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      {label && <div className=\"label-container\">{label}</div>}\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}