se-design 1.0.59 → 1.0.61-dev

package/dist/index42.js

@@ -1,61 +1,77 @@
-import e, { useState as g, useEffect as p } from "react";
-import { Icon as s } from "./index5.js";
+import e, { useState as p } from "react";
+import { Icon as a } from "./index5.js";
+import { Button as w } from "./index3.js";
 /* empty css         */
-const t = {
-  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]",
-  success: "var(--color-green-500)",
-  error: "var(--color-red-500)",
-  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"
-}, C = ({
-  toastBarCtnClassName: a = "",
-  type: r,
-  message: c = "",
-  shouldAutoClose: n = !1,
-  delay: l = 5e3,
-  onClose: i = () => {
+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)]"
+}, B = ({
+  messageBarCtnClassName: l = "",
+  messageBarType: o = "info",
+  message: s = "",
+  hasCloseIcon: c = !1,
+  hasButton: n = !1,
+  buttonLabel: i = "",
+  buttonOnClick: m = () => {
   },
-  containerStyle: m = {}
+  handleClose: t = () => {
+  },
+  automationId: u = ""
 }) => {
-  const [u, f] = g(!0);
-  p(() => {
-    if (n) {
-      const d = setTimeout(() => {
-        o();
-      }, l);
-      return () => clearTimeout(d);
-    }
-  }, []);
-  const o = () => {
-    setTimeout(() => {
-      f(!1), setTimeout(() => {
-        i?.();
-      }, 300);
+  const [v, b] = p(!0), d = e.useCallback(() => {
+    b(!1);
+    const h = setTimeout(() => {
+      t?.();
     }, 300);
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
-    style: {
-      background: t[r],
-      ...m
+    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]);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
+    "data-automation-id": u
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.messageCtn
   }, /* @__PURE__ */ e.createElement("div", {
-    className: t.toastMessageCtn
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: r === "info" ? "info" : r === "error" ? "stop" : "checked-circle",
-    stroke: "var(--color-white)"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.toastMessage
-  }, c)), /* @__PURE__ */ e.createElement(s, {
+    className: "inline-flex items-center"
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: f
+  }, /* @__PURE__ */ e.createElement(a, {
+    name: "info",
+    className: "inline-block h-fit relative top-[3px] mr-1"
+  }), s, n && /* @__PURE__ */ e.createElement(w, {
+    label: i,
+    type: "primary",
+    size: "sm",
+    onClick: m,
+    className: `${g} ml-2 alert-btn`,
+    automationId: "message-bar-cta"
+  })))), c && /* @__PURE__ */ e.createElement(a, {
     name: "close",
-    stroke: "var(--color-white)",
-    className: t.closeIconCtn,
-    onClick: o
+    className: r.closeIconCtn,
+    onClick: d
   }));
 };
 export {
-  C as ToastBar
+  B as MessageBar,
+  B as default
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.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  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\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  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\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[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} 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","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,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,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}
+{"version":3,"file":"index42.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  automationId?: string;\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  automationId = ''\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\" : \"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\"}`} data-automation-id={automationId}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={\"info\"} 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                automationId=\"message-bar-cta\"\n              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={\"close\"} \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","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,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,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AAChB,UAAMI,IAAQC,WAAW,MAAM;AAC7BR,MAAAA,IAAAA;AAAAA,IACF,GAAG,GAAG;AACN,WAAO,MAAMS,aAAaF,CAAK;AAAA,EACjC,GAAG,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAAA;AAAAA,MACL,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB,GAAG,CAACG,CAAc,CAAC;AAKnB,SACEW,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,GAC5KI,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzBuB,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbT,gBAAAA,EAAAQ,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfL,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAAA,CAA6C,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,EAAAA,CACV,CAEA;AAET;"}

package/dist/index43.js

@@ -1,101 +1,61 @@
-import e, { useRef as _, useEffect as h } from "react";
+import e, { useState as g, useEffect as p } from "react";
+import { Icon as s } from "./index5.js";
 /* empty css         */
-import { Icon as k } from "./index5.js";
-const A = /* @__PURE__ */ e.memo(({
-  value: c,
-  onChange: r,
-  disabled: n = !1,
-  maxLength: i,
-  tag: C = "input",
-  error: s = !1,
-  errorMessage: $,
-  label: f,
-  placeholder: y,
-  suggestions: l = [],
-  customRenderSuggestions: m,
-  onSuggestionClick: E,
-  automationId: I = "",
-  ...b
+const t = {
+  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]",
+  success: "var(--color-green-500)",
+  error: "var(--color-red-500)",
+  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"
+}, C = ({
+  toastBarCtnClassName: a = "",
+  type: r,
+  message: c = "",
+  shouldAutoClose: n = !1,
+  delay: l = 5e3,
+  onClose: i = () => {
+  },
+  containerStyle: m = {}
 }) => {
-  const [o, u] = e.useState([...l]), [v, p] = e.useState(!1), d = _(null), S = e.useCallback((t) => {
-    const a = t.target.value;
-    if (m)
-      r(a, !1);
-    else if (r(a), a === "")
-      u([...l]);
-    else if (a) {
-      const B = l?.filter((w) => typeof w == "object" && w?.label?.toLowerCase().includes(a?.toLowerCase() ?? ""));
-      u([...B]);
+  const [u, f] = g(!0);
+  p(() => {
+    if (n) {
+      const d = setTimeout(() => {
+        o();
+      }, l);
+      return () => clearTimeout(d);
     }
-  }, [r, l, m]);
-  h(() => {
-    u([...l]);
-  }, [l]), h(() => {
-    const t = (a) => {
-      d.current && !d.current.contains(a.target) && p(!1);
-    };
-    return document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
-    };
   }, []);
-  const V = () => {
-    p(!0);
-  }, N = (t) => {
-    r(t, !0), p(!1), E && E(t);
-  }, x = () => {
-    r("", !1);
+  const o = () => {
+    setTimeout(() => {
+      f(!1), setTimeout(() => {
+        i?.();
+      }, 300);
+    }, 300);
   };
   return /* @__PURE__ */ e.createElement("div", {
-    className: "main-container-autocomplete-se-design",
-    ref: d,
-    "data-automation-id": I
-  }, f && /* @__PURE__ */ e.createElement("span", {
-    className: `label-container ${n ? "label-container-disabled" : ""}`
-  }, f), /* @__PURE__ */ e.createElement("div", {
-    className: "input-container-wrapper"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "input-wrapper",
+    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
     style: {
-      pointerEvents: n ? "none" : "auto"
+      background: t[r],
+      ...m
     }
-  }, /* @__PURE__ */ e.createElement(C, {
-    value: c,
-    onChange: S,
-    onClick: V,
-    disabled: n,
-    className: `${s ? "input-container-error" : "input-container-default"} ${n ? "input-container-disabled" : ""} ${o.length > 0 || c ? "with-icon" : ""} ${o.length > 0 && c ? "with-icons" : ""}`,
-    maxLength: i,
-    placeholder: y,
-    ...b
-  }), c && /* @__PURE__ */ e.createElement(k, {
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.toastMessageCtn
+  }, /* @__PURE__ */ e.createElement(s, {
+    name: r === "info" ? "info" : r === "error" ? "stop" : "checked-circle",
+    stroke: "var(--color-white)"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.toastMessage
+  }, c)), /* @__PURE__ */ e.createElement(s, {
     name: "close",
-    className: "input-icon-close",
-    size: 15,
-    onClick: x,
-    stroke: n ? "var(--color-gray-600)" : ""
-  }), o.length > 0 && /* @__PURE__ */ e.createElement(k, {
-    name: "chevron",
-    rotation: v ? "180" : "0",
-    className: "input-icon-chevron",
-    stroke: n ? "var(--color-gray-600)" : ""
-  })), v && o.length > 0 && /* @__PURE__ */ e.createElement("div", {
-    className: "suggestions-list",
-    "data-automation-id": "autocomplete-suggestions-list"
-  }, m ? m(o, N) : o.map((t, a) => /* @__PURE__ */ e.createElement("div", {
-    key: a,
-    className: "suggestion-item",
-    onClick: () => N(t.value),
-    "data-automation-id": `autocomplete-suggestion-item-${a}`
-  }, t.label)))), (s || i) && /* @__PURE__ */ e.createElement("div", {
-    className: `${s ? "error-and-max-word" : "max-word-container"} ${n ? "disabled" : ""}`
-  }, s && /* @__PURE__ */ e.createElement("div", {
-    id: "error-message",
-    className: "error-message"
-  }, $), i && /* @__PURE__ */ e.createElement("div", {
-    className: "max-word"
-  }, c.length, "/", i)));
-});
+    stroke: "var(--color-white)",
+    className: t.closeIconCtn,
+    onClick: o
+  }));
+};
 export {
-  A as AutoCompleteInput
+  C as ToastBar
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string, fromSuggestion?: boolean) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  suggestions?: { label: string; value: string }[];\n  customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n  onSuggestionClick?: (suggestion: string) => void;\n  automationId?: string;\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    customRenderSuggestions,\n    onSuggestionClick,\n    automationId = '',\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<{ label: string; value: string }[]>([\n      ...suggestions\n    ]);\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\n        if (customRenderSuggestions) {\n          onChange(inputValue, false);\n        } else {\n          onChange(inputValue);\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else if (inputValue) {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, customRenderSuggestions]\n    );\n\n    useEffect(() => {\n      // if (customRenderSuggestions) {\n      setFilteredSuggestions([...suggestions]);\n      // }\n    }, [suggestions]);\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, true);\n      setSuggestionBoxVisible(false);\n      onSuggestionClick && onSuggestionClick(suggestion);\n    };\n\n    const handleClearInput = () => {\n      onChange('', false);\n    };\n\n    return (\n      <div className=\"main-container-autocomplete-se-design\" ref={containerRef} data-automation-id={automationId}>\n        {label && <span className={`label-container ${disabled ? 'label-container-disabled' : ''}`}>{label}</span>}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\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' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              ...props\n            })}\n            {value && <Icon name=\"close\" className=\"input-icon-close\" size={15} onClick={handleClearInput} stroke={disabled ? 'var(--color-gray-600)' : ''} />}\n            {filteredSuggestions.length > 0 && (\n              <Icon name=\"chevron\" rotation={isSuggestionBoxVisible ? '180' : '0'} className=\"input-icon-chevron\" stroke={disabled ? 'var(--color-gray-600)' : ''} />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div className=\"suggestions-list\" data-automation-id=\"autocomplete-suggestions-list\">\n              {customRenderSuggestions\n                ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n                : filteredSuggestions.map((suggestion, index) => (\n                    <div\n                      key={index}\n                      className=\"suggestion-item\"\n                      onClick={() => handleSuggestionClick(suggestion.value)}\n                      data-automation-id={`autocomplete-suggestion-item-${index}`}\n                    >\n                      {suggestion.label}\n                    </div>\n                  ))}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) &&\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\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        }\n      </div>\n    );\n  }\n);\n"],"names":["React__default","useRef","useEffect","Icon","AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","automationId","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","handleClickOutside","event","current","contains","document","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","handleClearInput","createElement","className","ref","style","pointerEvents","onClick","length","name","size","stroke","rotation","map","index","key","id"],"mappings":"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"}
+{"version":3,"file":"index43.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  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\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  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\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[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} 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","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,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,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}

package/dist/index44.js

@@ -1,99 +1,147 @@
-import t, { useState as o, useRef as $, useEffect as f } from "react";
+import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
-import s from "./index205.js";
-import { Icon as g } from "./index5.js";
-const P = ({
-  onCountrycodeChange: E,
-  onNumberChange: N,
-  error: m,
-  errorMessage: v,
-  value: a,
-  label: u,
-  automationId: w = ""
+import { Icon as x } from "./index5.js";
+import { useStableId as Z } from "./index184.js";
+import { getA11yNameAttributes as L } from "./index69.js";
+import { useCombobox as ee } from "./index191.js";
+function u() {
+  return u = Object.assign ? Object.assign.bind() : function(o) {
+    for (var s = 1; s < arguments.length; s++) {
+      var t = arguments[s];
+      for (var a in t) ({}).hasOwnProperty.call(t, a) && (o[a] = t[a]);
+    }
+    return o;
+  }, u.apply(null, arguments);
+}
+const le = /* @__PURE__ */ e.memo(({
+  value: o,
+  onChange: s,
+  disabled: t = !1,
+  maxLength: a,
+  tag: B = "input",
+  error: r = !1,
+  errorMessage: R,
+  label: p,
+  placeholder: j,
+  suggestions: c = [],
+  onSelect: N,
+  renderOption: d,
+  optionClassName: A,
+  automationId: F = "",
+  ariaLabel: b,
+  ariaLabelledBy: O,
+  ariaDescribedBy: V,
+  ..._
 }) => {
-  const [y, p] = o(a?.countryCode || s[0].dial_code), [c, r] = o(!1), [h, L] = o(s), [_, b] = o(""), [S, C] = o(""), i = $(null), l = s.find((e) => e.dial_code === y), I = (e) => {
-    e && (p(e), E(e)), r(!1);
-  }, V = (e) => {
-    const n = e.target.value;
-    b(n);
-    const R = s.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
-    L(R);
-  };
-  f(() => {
-    const e = (n) => {
-      i.current && !i.current.contains(n.target) && r(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []), f(() => {
-    a && (p(a.countryCode), C(a.number));
-  }, [a]);
-  const k = (e) => {
-    const n = e.replace(/\D/g, "");
-    console.log("numericValue", n), C(n), N(n);
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-main-container",
-    "data-automation-id": w
-  }, u && /* @__PURE__ */ t.createElement("div", {
-    className: "label-container"
-  }, u), /* @__PURE__ */ t.createElement("div", {
-    className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
-    ref: i
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code",
-    onClick: () => {
-      r(!c);
-    },
-    "data-automation-id": "country-code-selector"
-  }, /* @__PURE__ */ t.createElement("img", {
-    src: `https://flagcdn.com/${l?.code.toLowerCase()}.svg`,
-    alt: l?.name,
-    width: "16"
-  }), l?.dial_code, /* @__PURE__ */ t.createElement(g, {
+  const [i, v] = S([...c]), [E, f] = S(!1), H = k(null), $ = k(null), g = Z(void 0, "autocomplete"), z = `${g}-input`, D = `${g}-listbox`, C = `${g}-label`, y = `${g}-error`, w = P((l) => {
+    f(!1), N?.(l);
+  }, [N]), {
+    containerProps: M,
+    inputProps: q,
+    listboxProps: G,
+    getOptionProps: J,
+    highlightedIndex: K,
+    setHighlightedIndex: h
+  } = ee({
+    items: i,
+    isOpen: E,
+    onOpenChange: f,
+    onSelect: w,
+    listboxId: D
+  }), Q = P((l) => {
+    const n = l.target.value;
+    if (h(-1), s(n), !d)
+      if (n === "")
+        v([...c]);
+      else {
+        const I = c?.filter((m) => typeof m == "object" && m?.label?.toLowerCase().includes(n?.toLowerCase() ?? ""));
+        v([...I]);
+      }
+  }, [s, c, d, h]);
+  Y(() => {
+    v([...c]);
+  }, [c]);
+  const T = () => {
+    f(!0);
+  }, U = () => {
+    i.length > 0 && f(!0);
+  }, W = () => {
+    s(""), h(-1), $.current?.focus();
+  }, X = L({
+    ariaLabelledBy: p && !b ? C : O,
+    ariaLabel: b,
+    ariaDescribedBy: r ? y : V
+  });
+  return /* @__PURE__ */ e.createElement("div", u({
+    className: "main-container-autocomplete-se-design",
+    ref: H,
+    "data-automation-id": F
+  }, M), p && /* @__PURE__ */ e.createElement("span", {
+    id: C,
+    className: `label-container ${t ? "label-container-disabled" : ""}`
+  }, p), /* @__PURE__ */ e.createElement("div", {
+    className: "input-container-wrapper"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "input-wrapper",
+    style: {
+      pointerEvents: t ? "none" : "auto"
+    }
+  }, /* @__PURE__ */ e.createElement(B, {
+    ref: $,
+    id: z,
+    value: o,
+    onChange: Q,
+    onClick: T,
+    onFocus: U,
+    ...q,
+    disabled: t,
+    className: `${r ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${i.length > 0 || o ? "with-icon" : ""} ${i.length > 0 && o ? "with-icons" : ""}`,
+    maxLength: a,
+    placeholder: j,
+    "aria-invalid": r || void 0,
+    ...X,
+    ..._
+  }), o && /* @__PURE__ */ e.createElement(x, {
+    name: "close",
+    className: "input-icon-close",
+    size: 15,
+    onClick: W,
+    stroke: t ? "var(--color-gray-600)" : "",
+    ariaLabel: "Clear input"
+  }), i.length > 0 && /* @__PURE__ */ e.createElement(x, {
     name: "chevron",
-    className: c ? "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]*",
-    "data-automation-id": "phone-number-input-field"
-  })), c && /* @__PURE__ */ t.createElement("div", {
-    className: "phone-input-container-se-design-country-code-list",
-    "data-automation-id": "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: _,
-    "data-automation-id": "country-code-search-input"
-  })), h.length > 0 ? h.map((e) => /* @__PURE__ */ t.createElement("div", {
-    key: e.code,
-    className: "phone-input-container-se-design-country-code-list-item",
-    onClick: () => I(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"
-  }, v));
-};
+    rotation: E ? "180" : "0",
+    className: "input-icon-chevron",
+    stroke: t ? "var(--color-gray-600)" : "",
+    "aria-hidden": "true"
+  })), E && i.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, G, {
+    "aria-label": p || b || "Suggestions",
+    className: "suggestions-list",
+    "data-automation-id": "autocomplete-suggestions-list"
+  }), i.map((l, n) => {
+    const I = J(n, !1), m = K === n;
+    return /* @__PURE__ */ e.createElement("div", u({
+      key: n
+    }, I, {
+      className: `${A || "suggestion-item"} ${m ? "suggestion-item-highlighted" : ""}`,
+      onClick: () => w(l),
+      onMouseEnter: () => h(n),
+      "data-automation-id": `autocomplete-suggestion-item-${n}`
+    }), d ? d(l, {
+      isHighlighted: m,
+      index: n
+    }) : l.label);
+  }))), (r || a) && /* @__PURE__ */ e.createElement("div", {
+    className: `${r ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
+  }, r && /* @__PURE__ */ e.createElement("div", {
+    id: y,
+    className: "error-message",
+    role: "alert"
+  }, R), a && /* @__PURE__ */ e.createElement("div", {
+    className: "max-word"
+  }, o.length, "/", a)));
+});
 export {
-  P as PhoneInput
+  le as AutoCompleteInput
 };
 //# sourceMappingURL=index44.js.map