se-design 0.0.107 → 0.0.109

package/dist/index38.js

@@ -1,90 +1,74 @@
-import t, { useState as o, useRef as R, useEffect as C } from "react";
+import e, { useState as x } from "react";
+import { Icon as l } from "./index4.js";
+import { Button as p } from "./index3.js";
 /* empty css         */
-import c from "./index111.js";
-import { Icon as g } from "./index4.js";
-const O = ({
-  onCountrycodeChange: E,
-  onNumberChange: f,
-  error: m,
-  errorMessage: N,
-  value: s
+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 [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);
+  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 "";
     }
-  }, /* @__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));
+  }, [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,
+    className: `${g} ml-2 alert-btn`
+  })))), c && /* @__PURE__ */ e.createElement(l, {
+    name: w,
+    className: r.closeIconCtn,
+    onClick: b
+  }));
 };
 export {
-  O as PhoneInput
+  I as MessageBar,
+  I as default
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.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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"}
+{"version":3,"file":"index38.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                className={`${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"],"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,IACTgB,WAAW,GAAGL,CAAe;AAAA,EAAA,CAC9B,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/index39.js

@@ -1,41 +1,57 @@
-import o from "react";
-const m = ({
-  progress: a,
-  backgroundColor: n = "#E8E8E8",
-  progressColor: s = "#0066FF",
-  size: e = 40,
-  strokeWidth: r = 4
+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 t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
-  return /* @__PURE__ */ o.createElement("svg", {
-    width: e,
-    height: e,
-    style: {
-      transform: "rotate(-90deg)"
+  const [m, u] = f(!0);
+  g(() => {
+    if (i) {
+      const d = setTimeout(() => {
+        s();
+      }, l);
+      return () => clearTimeout(d);
     }
-  }, /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: n,
-    strokeWidth: r,
-    fill: "none"
-  }), /* @__PURE__ */ o.createElement("circle", {
-    cx: e / 2,
-    cy: e / 2,
-    r: t,
-    stroke: s,
-    strokeWidth: r,
-    strokeDasharray: c,
-    strokeDashoffset: l,
-    fill: "none",
-    strokeLinecap: "round",
+  }, []);
+  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: {
-      transition: "stroke-dashoffset 0.3s ease"
+      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 {
-  m as CircularProgressBar
+  x as ToastBar
 };
 //# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}
+{"version":3,"file":"index39.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/index4.js

@@ -1,63 +1,64 @@
-import v from "./index40.js";
-import l from "./index41.js";
-import a from "./index42.js";
-import n from "./index43.js";
-import b from "./index44.js";
-import f from "./index45.js";
-import p from "./index46.js";
-import d from "./index47.js";
-import h from "./index48.js";
-import k from "./index49.js";
-import u from "./index50.js";
-import x from "./index51.js";
-import w from "./index52.js";
-import A from "./index53.js";
-import I from "./index54.js";
-import E from "./index55.js";
-import F from "./index56.js";
-import N from "./index57.js";
-import C from "./index58.js";
-import O from "./index59.js";
-import $ from "./index60.js";
-import j from "./index61.js";
-import y from "./index62.js";
-import M from "./index63.js";
-import P from "./index64.js";
-import R from "./index65.js";
-import S from "./index66.js";
-import G from "./index67.js";
-import T from "./index68.js";
-import V from "./index69.js";
-import q from "./index70.js";
-import z from "./index71.js";
-import B from "./index72.js";
-import D from "./index73.js";
-import H from "./index74.js";
-import J from "./index75.js";
-import K from "./index76.js";
-import L from "./index77.js";
-import Q from "./index78.js";
-import U from "./index79.js";
-import W from "./index80.js";
-import X from "./index81.js";
-import Y from "./index82.js";
-import Z from "./index83.js";
-import ss from "./index84.js";
-import os from "./index85.js";
-import _s from "./index86.js";
-import is from "./index87.js";
-import ts from "./index88.js";
-import rs from "./index89.js";
-import es from "./index90.js";
-import cs from "./index91.js";
-import ms from "./index92.js";
-import gs from "./index93.js";
-import vs from "./index94.js";
-import ls from "./index95.js";
-import as from "./index96.js";
+import v from "./index44.js";
+import l from "./index45.js";
+import a from "./index46.js";
+import n from "./index47.js";
+import b from "./index48.js";
+import f from "./index49.js";
+import p from "./index50.js";
+import d from "./index51.js";
+import h from "./index52.js";
+import k from "./index53.js";
+import u from "./index54.js";
+import x from "./index55.js";
+import w from "./index56.js";
+import A from "./index57.js";
+import I from "./index58.js";
+import E from "./index59.js";
+import F from "./index60.js";
+import N from "./index61.js";
+import C from "./index62.js";
+import O from "./index63.js";
+import $ from "./index64.js";
+import j from "./index65.js";
+import y from "./index66.js";
+import M from "./index67.js";
+import P from "./index68.js";
+import R from "./index69.js";
+import S from "./index70.js";
+import G from "./index71.js";
+import T from "./index72.js";
+import V from "./index73.js";
+import q from "./index74.js";
+import z from "./index75.js";
+import B from "./index76.js";
+import D from "./index77.js";
+import H from "./index78.js";
+import J from "./index79.js";
+import K from "./index80.js";
+import L from "./index81.js";
+import Q from "./index82.js";
+import U from "./index83.js";
+import W from "./index84.js";
+import X from "./index85.js";
+import Y from "./index86.js";
+import Z from "./index87.js";
+import ss from "./index88.js";
+import os from "./index89.js";
+import _s from "./index90.js";
+import is from "./index91.js";
+import ts from "./index92.js";
+import rs from "./index93.js";
+import es from "./index94.js";
+import cs from "./index95.js";
+import ms from "./index96.js";
+import gs from "./index97.js";
+import vs from "./index98.js";
+import ls from "./index99.js";
+import as from "./index100.js";
+import ns from "./index101.js";
 import r from "react";
-import { ReactSVG as ns } from "./index97.js";
-const bs = /* @__PURE__ */ Object.assign({
+import { ReactSVG as bs } from "./index102.js";
+const fs = /* @__PURE__ */ Object.assign({
   "/src/assets/icons/attachment.svg": v,
   "/src/assets/icons/back.svg": l,
   "/src/assets/icons/banner-demo-img.svg": a,
@@ -102,35 +103,36 @@ const bs = /* @__PURE__ */ Object.assign({
   "/src/assets/icons/photo.svg": X,
   "/src/assets/icons/radio-field.svg": Y,
   "/src/assets/icons/rightSide.svg": Z,
-  "/src/assets/icons/search.svg": ss,
-  "/src/assets/icons/signature-field.svg": os,
-  "/src/assets/icons/slideout.svg": _s,
-  "/src/assets/icons/sms.svg": is,
-  "/src/assets/icons/sort.svg": ts,
-  "/src/assets/icons/space.svg": rs,
-  "/src/assets/icons/stamp-field.svg": es,
-  "/src/assets/icons/text-field.svg": cs,
-  "/src/assets/icons/tick.svg": ms,
-  "/src/assets/icons/title-field.svg": gs,
-  "/src/assets/icons/webinar-widget.svg": vs,
-  "/src/assets/icons/white-close.svg": ls,
-  "/src/assets/icons/widget-demo-image.svg": as
+  "/src/assets/icons/rounded-plus.svg": ss,
+  "/src/assets/icons/search.svg": os,
+  "/src/assets/icons/signature-field.svg": _s,
+  "/src/assets/icons/slideout.svg": is,
+  "/src/assets/icons/sms.svg": ts,
+  "/src/assets/icons/sort.svg": rs,
+  "/src/assets/icons/space.svg": es,
+  "/src/assets/icons/stamp-field.svg": cs,
+  "/src/assets/icons/text-field.svg": ms,
+  "/src/assets/icons/tick.svg": gs,
+  "/src/assets/icons/title-field.svg": vs,
+  "/src/assets/icons/webinar-widget.svg": ls,
+  "/src/assets/icons/white-close.svg": as,
+  "/src/assets/icons/widget-demo-image.svg": ns
 }), e = (s, o, _) => {
   o && s.hasAttribute("fill") && s.getAttribute("fill") !== "none" && s.setAttribute("fill", o), _ && s.hasAttribute("stroke") && s.setAttribute("stroke", _), Array.from(s.children).forEach((i) => {
     e(i, o, _);
   });
-}, xo = (s) => {
+}, Ao = (s) => {
   const {
     name: o = "",
     className: _ = "",
     onClick: i,
     fill: c,
     stroke: m
-  } = s, t = bs[`/src/assets/icons/${o}.svg`];
+  } = s, t = fs[`/src/assets/icons/${o}.svg`];
   return t ? /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-svg-wrapper ${_}`,
+    className: `se-design-svg-wrapper transition-transform duration-250 ease-linear ${_}`,
     onClick: i
-  }, /* @__PURE__ */ r.createElement(ns, {
+  }, /* @__PURE__ */ r.createElement(bs, {
     src: t,
     wrapper: "span",
     beforeInjection: (g) => {
@@ -139,6 +141,6 @@ const bs = /* @__PURE__ */ Object.assign({
   })) : (console.error(`Icon "${o}" not found in ICON_MAP.`), null);
 };
 export {
-  xo as Icon
+  Ao as Icon
 };
 //# sourceMappingURL=index4.js.map

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ReactSVG } from 'react-svg';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', { eager: true, query: '?url', import: 'default' });\n\nexport type IconProps = {\n  name: string;\n  className?: string;\n  onClick?: () => void;\n  fill?: string;\n  stroke?: string;\n}\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n  \n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n  \n  // Recursively apply to all child elements\n  Array.from(element.children).forEach(child => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon: FC<IconProps> = (props) => {\n  const { name = '', className = '', onClick, fill, stroke } = props;\n\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  return (\n    <div className={`se-design-svg-wrapper ${className}`} onClick={onClick}>\n      <ReactSVG \n        src={src} \n        wrapper=\"span\" \n        beforeInjection={(svg) => {\n          applyAttributesToElement(svg, fill, stroke);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","hasAttribute","getAttribute","setAttribute","Array","from","children","forEach","child","Icon","props","name","className","onClick","src","React","createElement","ReactSVG","wrapper","beforeInjection","svg","error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAMA,KAAoCC,uBAAAA,OAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,iDAAAA;AAAAA,EAAAA,gDAAAA;AAAAA,EAAAA,2CAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,uCAAAA;AAAAA,EAAAA,6CAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,6CAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,uCAAAA;AAAAA,EAAAA,iDAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,6BAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,2CAAAA;AAAAA,CAAAA,GAUpCC,IAA2BA,CAACC,GAAkBC,GAAeC,MAAoB;AAErF,EAAID,KAAQD,EAAQG,aAAa,MAAM,KACjBH,EAAQI,aAAa,MAAM,MAE3B,UACVC,EAAAA,aAAa,QAAQJ,CAAI,GAIjCC,KAAUF,EAAQG,aAAa,QAAQ,KACjCE,EAAAA,aAAa,UAAUH,CAAM,GAIvCI,MAAMC,KAAKP,EAAQQ,QAAQ,EAAEC,QAAQC,CAASA,MAAA;AACnBA,IAAAA,EAAAA,GAAOT,GAAMC,CAAM;AAAA,EAAA,CAC7C;AACH,GAEaS,KAAuBC,CAAUA,MAAA;AACtC,QAAA;AAAA,IAAEC,MAAAA,IAAO;AAAA,IAAIC,WAAAA,IAAY;AAAA,IAAIC,SAAAA;AAAAA,IAASd,MAAAA;AAAAA,IAAMC,QAAAA;AAAAA,EAAAA,IAAWU,GAEvDI,IAAMnB,GAAS,qBAAqBgB,CAAI,MAAM;AAEpD,SAAKG,IAMHC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKJ,WAAW,yBAAyBA,CAAS;AAAA,IAAIC,SAAAA;AAAAA,EAAAA,GACpDG,gBAAAA,EAAAA,cAACC,IAAQ;AAAA,IACPH,KAAAA;AAAAA,IACAI,SAAQ;AAAA,IACRC,iBAAkBC,CAAQA,MAAA;AACCA,MAAAA,EAAAA,GAAKrB,GAAMC,CAAM;AAAA,IAAA;AAAA,EAC5C,CACD,CACE,KAbGqB,QAAAA,MAAM,SAASV,CAAI,0BAA0B,GAC9C;AAcX;"}
+{"version":3,"file":"index4.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ReactSVG } from 'react-svg';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', { eager: true, query: '?url', import: 'default' });\n\nexport type IconProps = {\n  name: string;\n  className?: string;\n  onClick?: () => void;\n  fill?: string;\n  stroke?: string;\n}\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n  \n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n  \n  // Recursively apply to all child elements\n  Array.from(element.children).forEach(child => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon: FC<IconProps> = (props) => {\n  const { name = '', className = '', onClick, fill, stroke } = props;\n\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  return (\n    <div className={`se-design-svg-wrapper transition-transform duration-250 ease-linear ${className}`} onClick={onClick}>\n      <ReactSVG \n        src={src} \n        wrapper=\"span\" \n        beforeInjection={(svg) => {\n          applyAttributesToElement(svg, fill, stroke);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","hasAttribute","getAttribute","setAttribute","Array","from","children","forEach","child","Icon","props","name","className","onClick","src","React","createElement","ReactSVG","wrapper","beforeInjection","svg","error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAMA,KAAoCC,uBAAAA,OAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,iDAAAA;AAAAA,EAAAA,gDAAAA;AAAAA,EAAAA,2CAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,uCAAAA;AAAAA,EAAAA,6CAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,6CAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,uCAAAA;AAAAA,EAAAA,iDAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,8CAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,iCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,mCAAAA;AAAAA,EAAAA,sCAAAA;AAAAA,EAAAA,gCAAAA;AAAAA,EAAAA,yCAAAA;AAAAA,EAAAA,kCAAAA;AAAAA,EAAAA,6BAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,+BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,oCAAAA;AAAAA,EAAAA,8BAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,wCAAAA;AAAAA,EAAAA,qCAAAA;AAAAA,EAAAA,2CAAAA;AAAAA,CAAAA,GAUpCC,IAA2BA,CAACC,GAAkBC,GAAeC,MAAoB;AAErF,EAAID,KAAQD,EAAQG,aAAa,MAAM,KACjBH,EAAQI,aAAa,MAAM,MAE3B,UACVC,EAAAA,aAAa,QAAQJ,CAAI,GAIjCC,KAAUF,EAAQG,aAAa,QAAQ,KACjCE,EAAAA,aAAa,UAAUH,CAAM,GAIvCI,MAAMC,KAAKP,EAAQQ,QAAQ,EAAEC,QAAQC,CAASA,MAAA;AACnBA,IAAAA,EAAAA,GAAOT,GAAMC,CAAM;AAAA,EAAA,CAC7C;AACH,GAEaS,KAAuBC,CAAUA,MAAA;AACtC,QAAA;AAAA,IAAEC,MAAAA,IAAO;AAAA,IAAIC,WAAAA,IAAY;AAAA,IAAIC,SAAAA;AAAAA,IAASd,MAAAA;AAAAA,IAAMC,QAAAA;AAAAA,EAAAA,IAAWU,GAEvDI,IAAMnB,GAAS,qBAAqBgB,CAAI,MAAM;AAEpD,SAAKG,IAMHC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKJ,WAAW,uEAAuEA,CAAS;AAAA,IAAIC,SAAAA;AAAAA,EAAAA,GAClGG,gBAAAA,EAAAA,cAACC,IAAQ;AAAA,IACPH,KAAAA;AAAAA,IACAI,SAAQ;AAAA,IACRC,iBAAkBC,CAAQA,MAAA;AACCA,MAAAA,EAAAA,GAAKrB,GAAMC,CAAM;AAAA,IAAA;AAAA,EAC5C,CACD,CACE,KAbGqB,QAAAA,MAAM,SAASV,CAAI,0BAA0B,GAC9C;AAcX;"}