se-design 0.0.103 → 0.0.104

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/assets/icons/clock.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.99996%204.50032V8.43782L10.1103%2010.0636M15.0007%208.00069C15.0007%2011.8667%2011.8667%2015.0007%208.00073%2015.0007C4.13474%2015.0007%201.00073%2011.8667%201.00073%208.00069C1.00073%204.1347%204.13474%201.00069%208.00073%201.00069C11.8667%201.00069%2015.0007%204.1347%2015.0007%208.00069Z'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_3"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index30.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder }: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-container\" onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\n                    {tag} \n                    <span\n                    className=\"close-icon-in-inputwithtags\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        const newTags = tags.filter((_, i) => i !== index);\n                        setTags(newTags);\n                        onChange?.(newTags);\n                    }}\n                    >\n                        <Icon name=\"close\" />\n                    </span>\n                </span>\n            ))}\n            <input\n                className=\"input-with-tags-input\"\n                ref={inputRef}\n                type=\"text\"\n                value={inputValue}\n                onChange={(e) => setInputValue(e.target.value)}\n                onKeyDown={handleKeyDown}\n                placeholder={placeholder}\n            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","className","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AASO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAgC,GAAG;AAC1E,QAAA,CAACC,GAAMC,CAAO,IAAIR,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACK,GAAYC,CAAa,IAAIV,EAAS,EAAE,GACzCW,IAAWV,EAAyB,IAAI,GAExCW,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBL,KAAAA,QAAAA,EAAWY;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,SAASA,MAAAA;AArBrD,UAAAC;AAqB2Db,cAAAA,IAAAA,EAASc,YAATd,gBAAAA,EAAkBe;AAAAA;AAAAA,EAAM,GAC7EnB,EAAKoB,IAAI,CAACC,GAAKC,MACZT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKe;AAAAA,IAAOP,WAAU;AAAA,EACvBM,GAAAA,GACDP,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAC,WAAU;AAAA,IACVC,SAAUV,CAAMA,MAAA;AACZA,MAAAA,EAAEiB,gBAAgB;AAClB,YAAMb,IAAUV,EAAKwB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDrB,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDd,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIC,WAAU;AAAA,IACVa,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLhC,OAAOK;AAAAA,IACPJ,UAAWQ,CAAAA,MAAMH,EAAcG,EAAEwB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAW1B;AAAAA,IACXN,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}

package/dist/index31.js

@@ -1,5 +1,41 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3e%3cpath%20d='M14.5455%205.45454L5.45456%2014.5455'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.45456%205.45454L14.5455%2014.5455'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import e from "react";
+/* empty css        */
+function f({
+  value: n,
+  onChange: i,
+  disabled: r,
+  maxLength: t,
+  tag: m,
+  error: a,
+  errorMessage: o,
+  label: c,
+  placeholder: s,
+  style: l,
+  inputStyle: d
+}) {
+  const p = m || "input";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "main-container",
+    style: l
+  }, c && /* @__PURE__ */ e.createElement("div", {
+    className: "label-container"
+  }, c), /* @__PURE__ */ e.createElement(p, {
+    value: n,
+    onChange: (E) => i(E.target.value),
+    disabled: r,
+    className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
+    maxlength: t || void 0,
+    placeholder: s,
+    style: d
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: `${a ? "error-and-max-word" : "max-word-container"}`
+  }, a && /* @__PURE__ */ e.createElement("div", {
+    className: "error-message"
+  }, o), t && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, t && (n == null ? void 0 : n.length) + "/" + t)));
+}
 export {
-  e as default
+  f as Input
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/assets/icons/close.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3e%3cpath%20d='M14.5455%205.45454L5.45456%2014.5455'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.45456%205.45454L14.5455%2014.5455'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_4"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxlength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","maxlength","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBL,OAAAA;AAAAA,EAC7BF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHe,WAAWd,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMhB,CAAe,CACxF,CACF;AAET;"}

package/dist/index32.js

@@ -1,5 +1,35 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='18'%20viewBox='0%200%2016%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.82178%203.70588H14.1747M2.70413%205.91176V14.7353C2.70413%2015.7099%203.49422%2016.5%204.46884%2016.5H11.5277C12.5023%2016.5%2013.2924%2015.7099%2013.2924%2014.7353V5.91176M6.23355%207.23529V12.5294M9.76296%207.23529V12.5294M5.35118%203.26471V2.38235C5.35118%201.89504%205.74622%201.5%206.23353%201.5H9.76294C10.2503%201.5%2010.6453%201.89504%2010.6453%202.38235V3.26471'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'/%3e%3c/svg%3e";
+import e from "react";
+/* empty css        */
+const r = {
+  progressBarCtn: "flex items-center gap-2",
+  progressBar: "flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden",
+  progressBarProgress: "h-full rounded-[12px]",
+  stepsCount: "steps-count"
+}, l = ({
+  totalTasks: s = 0,
+  completedTasks: o = 0,
+  progressBarCtnClassName: a = ""
+}) => {
+  const t = s > 0 ? o / s * 100 : 0;
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${r.progressBarCtn} ${a} progress-bar-ctn`,
+    style: {
+      width: "400px"
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.progressBar
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.progressBarProgress,
+    style: {
+      width: `${t}%`,
+      background: "linear-gradient(to right, var(--color-green-500), var(--color-green-400))",
+      transition: "width 0.4s ease-in-out"
+    }
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: r.stepsCount
+  }, `${Math.round(t)}% completed`));
+};
 export {
-  e as default
+  l as ProgressBar
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/assets/icons/delete.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='18'%20viewBox='0%200%2016%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.82178%203.70588H14.1747M2.70413%205.91176V14.7353C2.70413%2015.7099%203.49422%2016.5%204.46884%2016.5H11.5277C12.5023%2016.5%2013.2924%2015.7099%2013.2924%2014.7353V5.91176M6.23355%207.23529V12.5294M9.76296%207.23529V12.5294M5.35118%203.26471V2.38235C5.35118%201.89504%205.74622%201.5%206.23353%201.5H9.76294C10.2503%201.5%2010.6453%201.89504%2010.6453%202.38235V3.26471'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_5"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index32.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport \"./style.scss\";\n\n\nexport interface ProgressBarProps {\n    totalTasks: number;\n    completedTasks: number;\n    progressBarCtnClassName?: string;\n}\n\nconst className: Map = {\n    progressBarCtn: \"flex items-center gap-2\",\n    progressBar: \"flex-1 w-[70%] bg-[var(--color-gray-200)] h-[6px] rounded-[12px] overflow-hidden\",\n    progressBarProgress: \"h-full rounded-[12px]\",\n    stepsCount: \"steps-count\"\n};\n\n\n\nexport const ProgressBar: FC<ProgressBarProps> = ({ totalTasks = 0, completedTasks = 0, progressBarCtnClassName = \"\" }) => {\n    const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n    return (\n        <div className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`} style={{ width: \"400px\" }}>\n            <div className={className.progressBar}>\n                <div\n                    className={className.progressBarProgress}\n                    style={{\n                        width: `${percentageComplete}%`,\n                        background: \"linear-gradient(to right, var(--color-green-500), var(--color-green-400))\",\n                        transition: \"width 0.4s ease-in-out\"\n                    }}\n                ></div>\n            </div>\n            <div className={className.stepsCount}>\n                {`${Math.round(percentageComplete)}% completed`}\n            </div>\n        </div>\n    );\n};"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAWA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACnBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AAChB,GAIaC,IAAoCA,CAAC;AAAA,EAAEC,YAAAA,IAAa;AAAA,EAAGC,gBAAAA,IAAiB;AAAA,EAAGC,yBAAAA,IAA0B;AAAG,MAAM;AACvH,QAAMC,IAAqBH,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAE9EI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IAAqBI,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAQ,GAC/GF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKX,WAAWA,EAAUE;AAAAA,EAAAA,GACtBS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACIX,WAAWA,EAAUG;AAAAA,IACrBS,OAAO;AAAA,MACHC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY;AAAA,MACZC,YAAY;AAAA,IAAA;AAAA,EAEd,CAAA,CACL,GACLL,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAWA,EAAUI;AAAAA,EAAAA,GACrB,GAAGY,KAAKC,MAAMR,CAAkB,CAAC,aACjC,CACJ;AAEb;"}

package/dist/index33.js

@@ -1,5 +1,55 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3e%3cpath%20d='M6.66669%209.33275L10%2012.6661L13.3334%209.33275'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import e, { useState as g, useRef as p } from "react";
+import { Icon as s } from "./index4.js";
+import { ProgressBar as x } from "./index32.js";
+/* empty css        */
+const r = {
+  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
+  accordionCtn: "flex items-center justify-between",
+  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
+  icon: "transition-transform duration-300 cursor-pointer",
+  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
+}, v = ({
+  widgetClassName: l = "",
+  actionItems: a = []
+}) => {
+  var c;
+  const [n, i] = g(!1), o = p(null), d = () => {
+    i(!n);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.accordionCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "title text-[var(--color-gray-900)]"
+  }, "Get Started"), /* @__PURE__ */ e.createElement(s, {
+    name: "down",
+    className: `${r.icon} ${n ? "rotate-180" : ""}`,
+    onClick: d
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "mt-[12px]"
+  }, /* @__PURE__ */ e.createElement(x, {
+    totalTasks: a.length,
+    completedTasks: a.filter((t) => t.isComplete).length,
+    progressBarCtnClassName: "get-started-progress-bar-ctn"
+  })), /* @__PURE__ */ e.createElement("div", {
+    ref: o,
+    className: r.gettingStartedWidgetContent,
+    style: {
+      maxHeight: n ? `${(c = o.current) == null ? void 0 : c.scrollHeight}px` : "0px"
+    }
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
+    className: r.actionItemCtn
+  }, /* @__PURE__ */ e.createElement(s, {
+    name: t.isComplete ? "checked-circle-green" : "checked-circle-disabled"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
+    onClick: t == null ? void 0 : t.handleActionItemClick
+  }, t.label)))));
+};
 export {
-  e as default
+  v as GetStartedWidget,
+  v as default
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/assets/icons/down.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3e%3cpath%20d='M6.66669%209.33275L10%2012.6661L13.3334%209.33275'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_6"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index33.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"down\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={item.isComplete ? \"checked-circle-green\" : \"checked-circle-disabled\"} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","_a","isExpanded","setIsExpanded","contentRef","toggleAccordion","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","isComplete","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AAXN,MAAAC;AAYE,QAAM,CAACC,GAAYC,CAAa,IAAIf,EAAS,EAAK,GAC5CgB,IAAaf,EAAuB,IAAI,GAExCgB,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGEI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKf,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEc,gBAAAA,EAAAC,cAACjB,GAAI;AAAA,IAACkB,MAAK;AAAA,IAAOhB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIO,SAASJ;AAAAA,EAAkB,CAAA,CAC5G,GACLC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAA,cAAChB,GAAW;AAAA,IAACmB,YAAYV,EAAYW;AAAAA,IACrCC,gBAAgBZ,EAAYa,OAAOC,CAAQA,MAAAA,EAAKC,UAAU,EAAEJ;AAAAA,IAC5DK,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEU,KAAKb;AAAAA,IACLZ,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWjB,IAAa,IAAGE,IAAAA,EAAWgB,YAAXhB,gBAAAA,EAAoBiB,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACR,GAAMS,MACtBjB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKiB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAA,cAACjB,GAAI;AAAA,IAACkB,MAAMM,EAAKC,aAAa,yBAAyB;AAAA,EAAA,CAA4B,GACnFR,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAWsB,EAAKC,aAAa,iCAAiC;AAAA,IAA+CN,SAASK,KAAAA,gBAAAA,EAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index34.js

@@ -1,5 +1,74 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.7%208.00429C5.32458%209.62887%208.00375%2012.1643%208.00375%2012.1643L12.3%208.00429M8%2012L8%201.2M2.70312%2015H13.3031'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import e, { useState as x } from "react";
+import { Icon as l } from "./index4.js";
+import { Button as p } from "./index3.js";
+/* empty css        */
+const r = {
+  messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
+  messageCtn: "flex items-center justify-center gap-2 flex-wrap px-4 pr-12",
+  info: "bg-[var(--color-yellow-50)]",
+  alert: "bg-[var(--color-red-500)]",
+  nudge: "bg-[var(--color-blue-500)]",
+  infoMessage: "text-[var(--color-yellow-700)] text-center",
+  alertMessage: "text-[var(--color-white)] text-center",
+  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1",
+  customInfoClassBtn: "bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]",
+  customAlertClassBtn: "bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]",
+  customNudgeClassBtn: "bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]"
+}, I = ({
+  messageBarCtnClassName: s = "",
+  messageBarType: o = "info",
+  message: a = "",
+  hasCloseIcon: c = !1,
+  hasButton: n = !1,
+  buttonLabel: i = "",
+  buttonOnClick: m = () => {
+  },
+  handleClose: t = () => {
+  }
+}) => {
+  const [u, v] = x(!0), b = e.useCallback(() => {
+    v(!1);
+    const h = setTimeout(() => {
+      t == null || t();
+    }, 300);
+    return () => clearTimeout(h);
+  }, [t]), f = o === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
+    switch (o) {
+      case "info":
+        return r.customInfoClassBtn;
+      case "alert":
+        return r.customAlertClassBtn;
+      case "nudge":
+        return r.customNudgeClassBtn;
+      default:
+        return "";
+    }
+  }, [o]), d = o === "info" ? "info-brown" : "info-white", w = o === "info" ? "close" : "white-close";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-message-bar ${s} ${r.messageBarCtn} ${r[o]} ${u ? "show" : "hide"}`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.messageCtn
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "inline-flex items-center"
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: f
+  }, /* @__PURE__ */ e.createElement(l, {
+    name: d,
+    className: "inline-block h-fit relative top-[3px] mr-1"
+  }), a, n && /* @__PURE__ */ e.createElement(p, {
+    label: i,
+    type: "primary",
+    size: "sm",
+    onClick: m,
+    customClassName: `${g} ml-2 alert-btn`
+  })))), c && /* @__PURE__ */ e.createElement(l, {
+    name: w,
+    className: r.closeIconCtn,
+    onClick: b
+  }));
+};
 export {
-  e as default
+  I as MessageBar,
+  I as default
 };
 //# sourceMappingURL=index34.js.map

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/assets/icons/download.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.7%208.00429C5.32458%209.62887%208.00375%2012.1643%208.00375%2012.1643L12.3%208.00429M8%2012L8%201.2M2.70312%2015H13.3031'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_7"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index34.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: 'info' | 'alert' | 'nudge';\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean,\n  buttonLabel: string | '',\n  buttonOnClick?: () => void,\n  handleClose?: () => void,\n}\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-500)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",  \n  alertMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n  customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n  customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n  customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n  \n  const buttonClassName = React.useMemo(() => {\n    switch(messageBarType) {\n      case 'info': return classNames.customInfoClassBtn;\n      case 'alert': return classNames.customAlertClassBtn;\n      case 'nudge': return classNames.customNudgeClassBtn;\n      default: return '';\n    }\n  }, [messageBarType]);\n\n  const iconName = messageBarType === 'info' ? \"info-brown\" : \"info-white\";\n  const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n  return (\n    <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={iconName} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n            {message}\n            {hasButton && (\n              <Button \n                label={buttonLabel} \n                type='primary' \n                size=\"sm\" \n                onClick={buttonOnClick}\n                customClassName={`${buttonClassName} ml-2 alert-btn`}\n              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={closeIconName} \n          className={classNames.closeIconCtn} \n          onClick={handleClickOnCloseIcon} \n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","iconName","closeIconName","createElement","className","name","label","type","size","onClick","customClassName"],"mappings":"AAiBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAA;AACtB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIzB,EAAS,EAAI,GAErC0B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAP,KAAA,QAAAA;AAAA,OACb,GAAG;AACC,WAAA,MAAMQ,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACN,CAAW,CAAC,GAEVS,IAAef,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EuB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOjB,GAAc;AAAA,MACnB,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAgB,eAAA;AAAA,IAAA;AAAA,EAClB,GACC,CAACG,CAAc,CAAC,GAEbkB,IAAWlB,MAAmB,SAAS,eAAe,cACtDmB,IAAgBnB,MAAmB,SAAS,UAAU;AAG1DU,SAAAA,gBAAAA,EAAAU,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBtB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIO,IAAU,SAAS,MAAM;AAAA,EAAA,GACpJa,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWnC,EAAWE;AAAAA,EAAAA,GACzBgC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWN;AAAAA,EAAAA,GACfK,gBAAAA,EAAAA,cAACpC,GAAI;AAAA,IAACsC,MAAMJ;AAAAA,IAAUG,WAAU;AAAA,EAA6C,CAAA,GAC5EpB,GACAE,KACCO,gBAAAA,EAAAU,cAACnC,GAAM;AAAA,IACLsC,OAAOnB;AAAAA,IACPoB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASrB;AAAAA,IACTsB,iBAAiB,GAAGX,CAAe;AAAA,EAAA,CACpC,CAEC,CACH,CACF,GACJd,KACCQ,gBAAAA,EAAAU,cAACpC,GAAI;AAAA,IACHsC,MAAMH;AAAAA,IACNE,WAAWnC,EAAWQ;AAAAA,IACtBgC,SAASjB;AAAAA,EAAAA,CACV,CAEA;AAET;"}

package/dist/index35.js

@@ -1,5 +1,57 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.27077%204.89039L7.41338%209.14296C7.76806%209.38851%208.23778%209.38851%208.59245%209.14296L14.7351%204.89039M1.27075%2012.6575V3.33605C1.27075%202.76405%201.73446%202.30034%202.30647%202.30034H13.6993C14.2713%202.30034%2014.735%202.76404%2014.735%203.33605V12.6575C14.735%2013.2295%2014.2713%2013.6932%2013.6993%2013.6932H2.30647C1.73446%2013.6932%201.27075%2013.2295%201.27075%2012.6575Z'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import e, { useState as f, useEffect as g } from "react";
+import { Icon as o } from "./index4.js";
+/* empty css        */
+const t = {
+  toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap",
+  success: "linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)",
+  error: "linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)",
+  info: "var(--color-gray-700)",
+  toastMessageCtn: "flex items-center gap-2",
+  toastMessage: "text-[var(--color-white)] text-center word-break",
+  closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1"
+}, x = ({
+  toastBarCtnClassName: c = "",
+  toastType: a,
+  toastMessage: n = "",
+  shouldAutoClose: i = !1,
+  delay: l = 5e3,
+  onClose: r = () => {
+  }
+}) => {
+  const [m, u] = f(!0);
+  g(() => {
+    if (i) {
+      const d = setTimeout(() => {
+        s();
+      }, l);
+      return () => clearTimeout(d);
+    }
+  }, []);
+  const s = () => {
+    setTimeout(() => {
+      u(!1), setTimeout(() => {
+        r == null || r();
+      }, 300);
+    }, 300);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-toast-bar ${c} ${t.toastBarCtn} ${m ? "show" : "hide"}`,
+    style: {
+      background: t[a]
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.toastMessageCtn
+  }, /* @__PURE__ */ e.createElement(o, {
+    name: a === "info" ? "info-white" : "checked-circle-white"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.toastMessage
+  }, n)), /* @__PURE__ */ e.createElement(o, {
+    name: "white-close",
+    className: t.closeIconCtn,
+    onClick: s
+  }));
+};
 export {
-  e as default
+  x as ToastBar
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/assets/icons/email.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.27077%204.89039L7.41338%209.14296C7.76806%209.38851%208.23778%209.38851%208.59245%209.14296L14.7351%204.89039M1.27075%2012.6575V3.33605C1.27075%202.76405%201.73446%202.30034%202.30647%202.30034H13.6993C14.2713%202.30034%2014.735%202.76404%2014.735%203.33605V12.6575C14.735%2013.2295%2014.2713%2013.6932%2013.6993%2013.6932H2.30647C1.73446%2013.6932%201.27075%2013.2295%201.27075%2012.6575Z'%20stroke='%23415575'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_8"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index35.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  toastType: \"success\" | \"error\" | \"info\";\n  toastMessage: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap\",\n  success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n  error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  toastType,\n  toastMessage = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[toastType] }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={toastType === \"info\" ? \"info-white\" : \"checked-circle-white\"} />\n        <span className={classNames.toastMessage}>{toastMessage}</span>\n      </div>\n      <Icon name=\"white-close\" className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","toastType","shouldAutoClose","delay","onClose","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","onClick"],"mappings":"AAcA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,WAAAA;AAAAA,EACAJ,cAAAA,IAAe;AAAA,EACfK,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAA;AAClB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIlB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIa,GAAiB;AACbK,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXN,CAAK;AACD,aAAA,MAAMO,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAJ,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEO,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBb,CAAoB,IAAIT,EAAWC,WAAW,IAAIa,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAYxB,EAAWU,CAAS;AAAA,IAAA;AAAA,EAAE,GAE3CW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWtB,EAAWK;AAAAA,EAAAA,GACzBgB,gBAAAA,EAAAA,cAACtB,GAAI;AAAA,IAAC0B,MAAMf,MAAc,SAAS,eAAe;AAAA,EAAA,CAAyB,GAC3EW,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWtB,EAAWM;AAAAA,KAAeA,CAAmB,CAC3D,GACLc,gBAAAA,EAAAC,cAACtB,GAAI;AAAA,IAAC0B,MAAK;AAAA,IAAcH,WAAWtB,EAAWO;AAAAA,IAAcmB,SAASR;AAAAA,EAAAA,CAAc,CACjF;AAET;"}

package/dist/index36.js

@@ -1,5 +1,68 @@
-const e = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Frame%20628116'%3e%3cg%20id='Group%20627993'%3e%3cpath%20id='Vector'%20d='M19.043%207.50002L15%203.45703V6.79502C15%207.18467%2015.3174%207.50009%2015.7051%207.50009L19.043%207.50002Z'%20fill='%23FF6C66'/%3e%3cpath%20id='Vector_2'%20d='M15.7081%208.49996C14.7676%208.49996%2014.003%207.73532%2014.003%206.79489V3.03515C13.9005%203.01269%2013.793%203%2013.6856%203H6.47265C5.66015%203%205%203.66015%205%204.47265V19.5274C5%2020.3399%205.66015%2021%206.47265%2021H18.0274C18.8399%2021%2019.5%2020.3399%2019.5%2019.5274V8.81438C19.5%208.70696%2019.4873%208.60149%2019.4649%208.49701H15.7051L15.7081%208.49996Z'%20fill='%23FF6C66'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+import e, { useRef as b, useEffect as h } from "react";
+/* empty css        */
+const R = /* @__PURE__ */ e.memo(({
+  value: c,
+  onChange: s,
+  disabled: m = !1,
+  maxLength: l,
+  tag: p = "input",
+  error: i = !1,
+  errorMessage: g,
+  label: u,
+  placeholder: E,
+  suggestions: a = []
+}) => {
+  const [d, f] = e.useState([...a]), [v, o] = e.useState(!1), r = b(null), C = e.useCallback((t) => {
+    const n = t.target.value;
+    if (s(n), n === "")
+      f([...a]);
+    else if (n) {
+      const w = a.filter((S) => S.toLowerCase().includes(n.toLowerCase()));
+      f(w);
+    }
+  }, [s, a]);
+  h(() => {
+    const t = (n) => {
+      r.current && !r.current.contains(n.target) && o(!1);
+    };
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, []);
+  const N = () => {
+    o(!0);
+  }, k = (t) => {
+    s(t), o(!1);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "main-container-autocomplete-se-design",
+    ref: r
+  }, u && /* @__PURE__ */ e.createElement("label", {
+    className: "label-container"
+  }, u), /* @__PURE__ */ e.createElement(p, {
+    value: c,
+    onChange: C,
+    onClick: N,
+    disabled: m,
+    className: `${i ? "input-container-error" : "input-container-default"} ${m ? "input-container-disabled" : ""}`,
+    maxLength: l,
+    placeholder: E
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: `${i ? "error-and-max-word" : "max-word-container"}`
+  }, i && /* @__PURE__ */ e.createElement("div", {
+    id: "error-message",
+    className: "error-message"
+  }, g), l && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, c.length, "/", l)), v && d.length > 0 && /* @__PURE__ */ e.createElement("div", {
+    className: "suggestions-list"
+  }, d.map((t, n) => /* @__PURE__ */ e.createElement("div", {
+    key: n,
+    className: "suggestion-item",
+    onClick: () => k(t)
+  }, t))));
+});
 export {
-  e as default
+  R as AutoCompleteInput
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/assets/icons/file-red.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Frame%20628116'%3e%3cg%20id='Group%20627993'%3e%3cpath%20id='Vector'%20d='M19.043%207.50002L15%203.45703V6.79502C15%207.18467%2015.3174%207.50009%2015.7051%207.50009L19.043%207.50002Z'%20fill='%23FF6C66'/%3e%3cpath%20id='Vector_2'%20d='M15.7081%208.49996C14.7676%208.49996%2014.003%207.73532%2014.003%206.79489V3.03515C13.9005%203.01269%2013.793%203%2013.6856%203H6.47265C5.66015%203%205%203.66015%205%204.47265V19.5274C5%2020.3399%205.66015%2021%206.47265%2021H18.0274C18.8399%2021%2019.5%2020.3399%2019.5%2019.5274V8.81438C19.5%208.70696%2019.4873%208.60149%2019.4649%208.49701H15.7051L15.7081%208.49996Z'%20fill='%23FF6C66'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\""],"names":["__vite_glob_0_9"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index36.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: string[];\n  onButtonClick?: () => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = []\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        onChange(inputValue);\n\n        if (inputValue === '') {\n          setFilteredSuggestions([...suggestions]);\n        } else if (inputValue) {\n          const filtered = suggestions.filter((suggestion) =>\n            suggestion.toLowerCase().includes(inputValue.toLowerCase())\n          );\n          setFilteredSuggestions(filtered);\n        }\n      },\n      [onChange, suggestions]\n    );\n\n    useEffect(() => {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n          setSuggestionBoxVisible(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleSuggestionClick = (suggestion: string) => {\n      onChange(suggestion);\n      setSuggestionBoxVisible(false);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n        {label && <label className=\"label-container\">{label}</label>}\n        {React.createElement(tag, {\n          value: value,\n          onChange: handleInputChange,\n          onClick: handleInputClick,\n          disabled,\n          className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n          maxLength,\n          placeholder\n        })}\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n          {error && (\n            <div id=\"error-message\" className=\"error-message\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div className=\"max-word\">\n              {value.length}/{maxLength}\n            </div>\n          )}\n        </div>\n        {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n          <div className=\"suggestions-list\">\n            {filteredSuggestions.map((suggestion, index) => (\n              <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n                {suggestion}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","onClick","id","length","map","index","key"],"mappings":"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"}

package/dist/index37.js

@@ -1,5 +1,90 @@
-const e = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%208.25H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6%2014H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6%2019.75H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import t, { useState as o, useRef as R, useEffect as C } from "react";
+/* empty css        */
+import c from "./index95.js";
+import { Icon as g } from "./index4.js";
+const O = ({
+  onCountrycodeChange: E,
+  onNumberChange: f,
+  error: m,
+  errorMessage: N,
+  value: s
+}) => {
+  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 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);
+  };
+  C(() => {
+    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));
+  }, [s]);
+  const k = (e) => {
+    const n = e.replace(/\D/g, "");
+    console.log("numericValue", n), h(n), f(n);
+  };
+  return /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-main-container"
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
+    ref: l
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design"
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code",
+    onClick: () => {
+      i(!r);
+    }
+  }, /* @__PURE__ */ t.createElement("img", {
+    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, {
+    name: "down",
+    className: r ? "rotate-180" : ""
+  })), /* @__PURE__ */ t.createElement("span", {
+    className: "divider"
+  }), /* @__PURE__ */ t.createElement("input", {
+    type: "tel",
+    placeholder: "Enter phone number",
+    className: "phone-input-container-se-design-phone-number-input",
+    onChange: (e) => k(e.target.value),
+    value: S,
+    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, {
+    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", {
+    key: e.code,
+    className: "phone-input-container-se-design-country-code-list-item",
+    onClick: () => b(e.dial_code)
+  }, /* @__PURE__ */ t.createElement("img", {
+    src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
+    alt: e.name,
+    width: "16"
+  }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
+    className: "phone-input-container-se-design-country-code-list-item-no-resuts"
+  }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
+    className: "error-message"
+  }, N));
+};
 export {
-  e as default
+  O as PhoneInput
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/assets/icons/hamburger.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%208.25H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6%2014H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6%2019.75H22'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_10"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index37.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=\"down\" 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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"}

package/dist/index38.js

@@ -1,4 +1,4 @@
-const e = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2014C12.5523%2014%2013%2013.5523%2013%2013C13%2012.4477%2012.5523%2012%2012%2012C11.4477%2012%2011%2012.4477%2011%2013C11%2013.5523%2011.4477%2014%2012%2014Z'%20fill='%231088E7'/%3e%3cpath%20d='M19%2014C19.5523%2014%2020%2013.5523%2020%2013C20%2012.4477%2019.5523%2012%2019%2012C18.4477%2012%2018%2012.4477%2018%2013C18%2013.5523%2018.4477%2014%2019%2014Z'%20fill='%231088E7'/%3e%3cpath%20d='M5%2014C5.55228%2014%206%2013.5523%206%2013C6%2012.4477%205.55228%2012%205%2012C4.44772%2012%204%2012.4477%204%2013C4%2013.5523%204.44772%2014%205%2014Z'%20fill='%231088E7'/%3e%3cpath%20d='M12%2014C12.5523%2014%2013%2013.5523%2013%2013C13%2012.4477%2012.5523%2012%2012%2012C11.4477%2012%2011%2012.4477%2011%2013C11%2013.5523%2011.4477%2014%2012%2014Z'%20stroke='%231088E7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M19%2014C19.5523%2014%2020%2013.5523%2020%2013C20%2012.4477%2019.5523%2012%2019%2012C18.4477%2012%2018%2012.4477%2018%2013C18%2013.5523%2018.4477%2014%2019%2014Z'%20stroke='%231088E7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5%2014C5.55228%2014%206%2013.5523%206%2013C6%2012.4477%205.55228%2012%205%2012C4.44772%2012%204%2012.4477%204%2013C4%2013.5523%204.44772%2014%205%2014Z'%20stroke='%231088E7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
 export {
   e as default
 };