se-design 0.0.111 → 0.0.113

package/dist/index37.js

@@ -1,55 +1,37 @@
-import e, { useState as g, useRef as p } from "react";
-import { Icon as s } from "./index4.js";
-import { ProgressBar as x } from "./index36.js";
+import e from "react";
 /* 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 = []
+  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"
+}, d = ({
+  totalTasks: t = 0,
+  completedTasks: o = 0,
+  progressBarCtnClassName: n = "",
+  needPercentageCompleted: c = !0,
+  progressBarColor: s
 }) => {
-  var c;
-  const [n, i] = g(!1), o = p(null), d = () => {
-    i(!n);
-  };
+  const a = t > 0 ? o / t * 100 : 0;
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
+    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+    style: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.progressBar
   }, /* @__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,
+    className: r.progressBarProgress,
     style: {
-      maxHeight: n ? `${(c = o.current) == null ? void 0 : c.scrollHeight}px` : "0px"
+      width: `${a}%`,
+      background: `${s || "linear-gradient(to right, var(--color-green-500), var(--color-green-400))"}`,
+      transition: "width 0.4s ease-in-out"
     }
-  }, 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)))));
+  })), c && /* @__PURE__ */ e.createElement("div", {
+    className: r.stepsCount
+  }, `${Math.round(a)}% completed`));
 };
 export {
-  v as GetStartedWidget,
-  v as default
+  d as ProgressBar
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.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;"}
+{"version":3,"file":"index37.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: 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\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : '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      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,2EAA2E;AAAA,MAChIO,YAAY;AAAA,IAAA;AAAA,EAEV,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index38.js

@@ -1,74 +1,55 @@
-import e, { useState as x } from "react";
-import { Icon as l } from "./index4.js";
-import { Button as p } from "./index3.js";
+import e, { useState as g, useRef as p } from "react";
+import { Icon as s } from "./index4.js";
+import { ProgressBar as x } from "./index37.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 = () => {
-  }
+  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 = []
 }) => {
-  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";
+  var c;
+  const [n, i] = g(!1), o = p(null), d = () => {
+    i(!n);
+  };
   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
+    className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
-    className: "inline-flex items-center"
+    className: r.accordionCtn
   }, /* @__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
-  }));
+    className: "title text-[var(--color-gray-900)]"
+  }, "Get Started"), /* @__PURE__ */ e.createElement(s, {
+    name: "chevron-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 {
-  I as MessageBar,
-  I as default
+  v as GetStartedWidget,
+  v as default
 };
 //# sourceMappingURL=index38.js.map

package/dist/index38.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index38.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=\"chevron-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,IAAehB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIO,SAASJ;AAAAA,EAAkB,CAAA,CACpH,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/index39.js

@@ -1,57 +1,74 @@
-import e, { useState as f, useEffect as g } from "react";
-import { Icon as o } from "./index4.js";
+import e, { useState as x } from "react";
+import { Icon as l } from "./index4.js";
+import { Button as p } from "./index3.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 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 [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);
+  const [u, v] = x(!0), b = e.useCallback(() => {
+    v(!1);
+    const h = setTimeout(() => {
+      t == null || t();
     }, 300);
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${c} ${t.toastBarCtn} ${m ? "show" : "hide"}`,
-    style: {
-      background: t[a]
+    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: 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
+    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 {
-  x as ToastBar
+  I as MessageBar,
+  I as default
 };
 //# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index39.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;"}