se-design 0.0.113 → 0.0.115

package/dist/index39.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index39.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  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\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\" 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={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\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","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","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,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKjB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMjB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEgB,gBAAAA,EAAAC,cAACnB,GAAI;AAAA,IAACoB,MAAK;AAAA,IAAUlB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjB,WAAU;AAAA,EAAA,GACbiB,gBAAAA,EAAAA,cAAClB,GAAW;AAAA,IAACqB,YAAYZ,EAAYa;AAAAA,IACrCC,gBAAgBd,EAAYe,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLZ,WAAWA,EAAUG;AAAAA,IACrBwB,OAAO;AAAA,MACLC,WAAWlB,IAAa,IAAGE,IAAAA,EAAWiB,YAAXjB,gBAAAA,EAAoBkB,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECtB,EAAYuB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAOhC,WAAWA,EAAUK;AAAAA,EAAAA,GACpCY,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACoB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMjB,WAAWwB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,KAAAA,gBAAAA,EAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index4.js

@@ -1,170 +1,45 @@
-import l from "./index46.js";
-import n from "./index47.js";
-import f from "./index48.js";
-import b 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 C from "./index59.js";
-import E from "./index60.js";
-import F from "./index61.js";
-import N from "./index62.js";
-import $ from "./index63.js";
-import O from "./index64.js";
-import R from "./index65.js";
-import j from "./index66.js";
-import y from "./index67.js";
-import M from "./index68.js";
-import P 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 ts from "./index91.js";
-import is 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 as from "./index99.js";
-import ls from "./index100.js";
-import ns from "./index101.js";
-import fs from "./index102.js";
-import bs from "./index103.js";
-import ps from "./index104.js";
-import ds from "./index105.js";
-import hs from "./index106.js";
-import ks from "./index107.js";
-import us from "./index108.js";
-import xs from "./index109.js";
-import ws from "./index110.js";
-import As from "./index111.js";
-import Is from "./index112.js";
-import r from "react";
-import { ReactSVG as Cs } from "./index113.js";
-const Es = /* @__PURE__ */ Object.assign({
-  "/src/assets/icons/attachment.svg": l,
-  "/src/assets/icons/back.svg": n,
-  "/src/assets/icons/banner-demo-img.svg": f,
-  "/src/assets/icons/checkbox-disabled-minus.svg": b,
-  "/src/assets/icons/checkbox-disabled-tick.svg": p,
-  "/src/assets/icons/checkbox-disabled.svg": d,
-  "/src/assets/icons/checkbox-field.svg": h,
-  "/src/assets/icons/checkbox-fill.svg": k,
-  "/src/assets/icons/checkbox-hover-fill.svg": u,
-  "/src/assets/icons/checkbox-hover-minus.svg": x,
-  "/src/assets/icons/checkbox-hover-tick.svg": w,
-  "/src/assets/icons/checkbox-minus.svg": A,
-  "/src/assets/icons/checkbox-tick.svg": I,
-  "/src/assets/icons/checked-circle-disabled.svg": C,
-  "/src/assets/icons/checked-circle-green.svg": E,
-  "/src/assets/icons/checked-circle-white.svg": F,
-  "/src/assets/icons/checkmark.svg": N,
-  "/src/assets/icons/chevron-down.svg": $,
-  "/src/assets/icons/clock.svg": O,
-  "/src/assets/icons/close.svg": R,
-  "/src/assets/icons/date-field.svg": j,
-  "/src/assets/icons/delete.svg": y,
-  "/src/assets/icons/docFile.svg": M,
-  "/src/assets/icons/download.svg": P,
-  "/src/assets/icons/edit-text.svg": S,
-  "/src/assets/icons/email-field.svg": G,
-  "/src/assets/icons/email.svg": T,
-  "/src/assets/icons/fields-create.svg": V,
-  "/src/assets/icons/fields-panel.svg": q,
-  "/src/assets/icons/file-red.svg": z,
-  "/src/assets/icons/fill-and-sign.svg": B,
-  "/src/assets/icons/folder.svg": D,
-  "/src/assets/icons/hamburger.svg": H,
-  "/src/assets/icons/home.svg": J,
-  "/src/assets/icons/image-field.svg": K,
-  "/src/assets/icons/info-brown.svg": L,
-  "/src/assets/icons/info-white.svg": Q,
-  "/src/assets/icons/initials-field.svg": U,
-  "/src/assets/icons/kebab-menu-blue.svg": W,
-  "/src/assets/icons/kebab-menu.svg": X,
-  "/src/assets/icons/name-field.svg": Y,
-  "/src/assets/icons/next.svg": Z,
-  "/src/assets/icons/padlock.svg": ss,
-  "/src/assets/icons/pages.svg": os,
-  "/src/assets/icons/pdfFile.svg": _s,
-  "/src/assets/icons/people.svg": ts,
-  "/src/assets/icons/photo.svg": is,
-  "/src/assets/icons/radio-field.svg": rs,
-  "/src/assets/icons/reset.svg": es,
-  "/src/assets/icons/rightSide.svg": cs,
-  "/src/assets/icons/rotate-left.svg": ms,
-  "/src/assets/icons/rotate-right.svg": gs,
-  "/src/assets/icons/rounded-plus.svg": vs,
-  "/src/assets/icons/search.svg": as,
-  "/src/assets/icons/signature-field.svg": ls,
-  "/src/assets/icons/slideout.svg": ns,
-  "/src/assets/icons/sms.svg": fs,
-  "/src/assets/icons/sort.svg": bs,
-  "/src/assets/icons/space.svg": ps,
-  "/src/assets/icons/stamp-field.svg": ds,
-  "/src/assets/icons/success-check.svg": hs,
-  "/src/assets/icons/text-field.svg": ks,
-  "/src/assets/icons/tick.svg": us,
-  "/src/assets/icons/title-field.svg": xs,
-  "/src/assets/icons/webinar-widget.svg": ws,
-  "/src/assets/icons/white-close.svg": As,
-  "/src/assets/icons/widget-demo-image.svg": Is
-}), 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((t) => {
-    e(t, o, _);
-  });
-}, Do = (s) => {
-  const {
-    name: o = "",
-    className: _ = "",
-    onClick: t,
-    fill: c,
-    stroke: m,
-    rotation: g = "0"
-  } = s, v = {
-    0: "",
-    90: "rotate-90",
-    180: "rotate-180",
-    270: "-rotate-90"
-  }, i = Es[`/src/assets/icons/${o}.svg`];
-  return i ? /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-svg-wrapper transition-transform duration-250 ease-linear ${_} ${v[g]}`,
-    onClick: t
-  }, /* @__PURE__ */ r.createElement(Cs, {
-    src: i,
-    wrapper: "span",
-    beforeInjection: (a) => {
-      e(a, c, m);
+import t, { useRef as k } from "react";
+import { Button as y } from "./index3.js";
+const E = ({
+  onFileSelect: r,
+  accept: o,
+  multiple: f = !1,
+  buttonLabel: s,
+  buttonType: u = "primary",
+  buttonSize: m = "md",
+  disabled: n = !1,
+  className: p = "",
+  triggerElement: l
+}) => {
+  const i = k(null), a = () => {
+    var e;
+    (e = i.current) == null || e.click();
+  }, d = (e) => {
+    const c = e.target.files;
+    c && (r(c), e.target.value = "");
+  };
+  return /* @__PURE__ */ t.createElement("div", {
+    className: p
+  }, /* @__PURE__ */ t.createElement("input", {
+    type: "file",
+    ref: i,
+    onChange: d,
+    accept: o,
+    multiple: f,
+    style: {
+      display: "none"
     }
-  })) : (console.error(`Icon "${o}" not found in ICON_MAP.`), null);
+  }), l ? /* @__PURE__ */ t.createElement("div", {
+    onClick: n ? void 0 : a
+  }, l) : /* @__PURE__ */ t.createElement(y, {
+    type: u,
+    size: m,
+    label: s,
+    onClick: a,
+    disabled: n
+  }));
 };
 export {
-  Do as Icon
+  E as FilePicker
 };
 //# 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  rotation?: '0' | '90' | '180' | '270';\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, rotation = '0' } = props;\n  const iconRotationClasses = {\n    '0': '',\n    '90': 'rotate-90',\n    '180': 'rotate-180',\n    '270': '-rotate-90'\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} ${iconRotationClasses[rotation]}`} 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":["__vite_glob_0_0","__vite_glob_0_1","__vite_glob_0_2","__vite_glob_0_3","__vite_glob_0_4","__vite_glob_0_5","__vite_glob_0_6","__vite_glob_0_7","__vite_glob_0_8","__vite_glob_0_9","__vite_glob_0_10","__vite_glob_0_11","__vite_glob_0_12","__vite_glob_0_13","__vite_glob_0_14","__vite_glob_0_15","__vite_glob_0_16","__vite_glob_0_17","__vite_glob_0_18","__vite_glob_0_19","__vite_glob_0_20","__vite_glob_0_21","__vite_glob_0_22","__vite_glob_0_23","__vite_glob_0_24","__vite_glob_0_25","__vite_glob_0_26","__vite_glob_0_27","__vite_glob_0_28","__vite_glob_0_29","__vite_glob_0_30","__vite_glob_0_31","__vite_glob_0_32","__vite_glob_0_33","__vite_glob_0_34","__vite_glob_0_35","__vite_glob_0_36","__vite_glob_0_37","__vite_glob_0_38","__vite_glob_0_39","__vite_glob_0_40","__vite_glob_0_41","__vite_glob_0_42","__vite_glob_0_43","__vite_glob_0_44","__vite_glob_0_45","__vite_glob_0_46","__vite_glob_0_47","__vite_glob_0_48","__vite_glob_0_49","__vite_glob_0_50","__vite_glob_0_51","__vite_glob_0_52","__vite_glob_0_53","__vite_glob_0_54","__vite_glob_0_55","__vite_glob_0_56","__vite_glob_0_57","__vite_glob_0_58","__vite_glob_0_59","__vite_glob_0_60","__vite_glob_0_61","__vite_glob_0_62","__vite_glob_0_63","__vite_glob_0_64","__vite_glob_0_65","__vite_glob_0_66","React__default","ReactSVG","ICON_MAP","import","applyAttributesToElement","element","fill","stroke","hasAttribute","getAttribute","setAttribute","Array","from","children","forEach","child","Icon","props","name","className","onClick","rotation","iconRotationClasses","src","React","createElement","wrapper","beforeInjection","svg","error"],"mappings":"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"}
+{"version":3,"file":"index4.js","sources":["../src/components/FilePicker/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface FilePickerProps {\n  /**\n   * Callback function when files are selected\n   */\n  onFileSelect: (files: FileList) => void;\n  /**\n   * Accepted file types (e.g., \".pdf,.doc,.docx\")\n   */\n  accept?: string;\n  /**\n   * Allow multiple file selection\n   */\n  multiple?: boolean;\n  /**\n   * Label for the button\n   */\n  buttonLabel: string;\n  /**\n   * Type of the button\n   */\n  buttonType?: 'primary' | 'secondary' | 'secondary-blue' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'link';\n  /**\n   * Size of the button\n   */\n  buttonSize?: 'sm' | 'md' | 'smRow';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Custom trigger element (button, menu item, icon, etc.)\n   * If provided, buttonLabel, buttonType, and buttonSize will be ignored\n   */\n  triggerElement?: React.ReactNode;\n}\n\nexport const FilePicker: React.FC<FilePickerProps> = ({\n  onFileSelect,\n  accept,\n  multiple = false,\n  buttonLabel,\n  buttonType = 'primary',\n  buttonSize = 'md',\n  disabled = false,\n  className = '',\n  triggerElement,\n}) => {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleButtonClick = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files;\n    if (files) {\n      onFileSelect(files);\n      // Reset the input value to allow selecting the same file again\n      event.target.value = '';\n    }\n  };\n\n  return (\n    <div className={className}>\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        onChange={handleFileChange}\n        accept={accept}\n        multiple={multiple}\n        style={{ display: 'none' }}\n      />\n      {triggerElement ? (\n        <div onClick={disabled ? undefined : handleButtonClick}>\n          {triggerElement}\n        </div>\n      ) : (\n        <Button\n          type={buttonType}\n          size={buttonSize}\n          label={buttonLabel}\n          onClick={handleButtonClick}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n}; "],"names":["FilePicker","onFileSelect","accept","multiple","buttonLabel","buttonType","buttonSize","disabled","className","triggerElement","fileInputRef","useRef","handleButtonClick","current","click","handleFileChange","event","files","target","value","React","createElement","type","ref","onChange","style","display","onClick","undefined","Button","size","label"],"mappings":";;AA2CO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,cAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,aAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,YAAAA,IAAa;AAAA,EACbC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AACF,MAAM;AACEC,QAAAA,IAAeC,EAAyB,IAAI,GAE5CC,IAAoBA,MAAM;;AAC9BF,KAAAA,IAAAA,EAAaG,YAAbH,QAAAA,EAAsBI;AAAAA,EACxB,GAEMC,IAAmBA,CAACC,MAA+C;AACjEC,UAAAA,IAAQD,EAAME,OAAOD;AAC3B,IAAIA,MACFhB,EAAagB,CAAK,GAElBD,EAAME,OAAOC,QAAQ;AAAA,EAEzB;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAAA;AAAAA,EAAAA,GACHa,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,MAAK;AAAA,IACLC,KAAKb;AAAAA,IACLc,UAAUT;AAAAA,IACVb,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAsB,OAAO;AAAA,MAAEC,SAAS;AAAA,IAAA;AAAA,EACnB,CAAA,GACAjB,IACCW,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,SAASpB,IAAWqB,SAAYhB;AAAAA,EAClCH,GAAAA,CACE,IAELW,gBAAAA,EAAAC,cAACQ,GAAM;AAAA,IACLP,MAAMjB;AAAAA,IACNyB,MAAMxB;AAAAA,IACNyB,OAAO3B;AAAAA,IACPuB,SAASf;AAAAA,IACTL,UAAAA;AAAAA,EAAAA,CACD,CAEA;AAET;"}

package/dist/index40.js

@@ -1,69 +1,74 @@
-var v = Object.defineProperty;
-var n = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var i = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, l = (r, e) => {
-  for (var t in e || (e = {}))
-    x.call(e, t) && i(r, t, e[t]);
-  if (n)
-    for (var t of n(e))
-      w.call(e, t) && i(r, t, e[t]);
-  return r;
-};
-import a, { useState as b, useEffect as E } from "react";
-import { Icon as m } from "./index4.js";
+import e, { useState as p } from "react";
+import { Icon as l } from "./index5.js";
+import { Button as w } from "./index3.js";
 /* empty css         */
-const s = {
-  toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]",
-  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"
-}, M = ({
-  toastBarCtnClassName: r = "",
-  type: e,
-  message: t = "",
-  shouldAutoClose: u = !1,
-  delay: d = 5e3,
-  onClose: o = () => {
+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)]"
+}, y = ({
+  messageBarCtnClassName: s = "",
+  messageBarType: t = "info",
+  message: a = "",
+  hasCloseIcon: c = !1,
+  hasButton: n = !1,
+  buttonLabel: i = "",
+  buttonOnClick: m = () => {
   },
-  containerStyle: f = {}
+  handleClose: o = () => {
+  }
 }) => {
-  const [g, p] = b(!0);
-  E(() => {
-    if (u) {
-      const h = setTimeout(() => {
-        c();
-      }, d);
-      return () => clearTimeout(h);
-    }
-  }, []);
-  const c = () => {
-    setTimeout(() => {
-      p(!1), setTimeout(() => {
-        o == null || o();
-      }, 300);
+  const [u, v] = p(!0), b = e.useCallback(() => {
+    v(!1);
+    const d = setTimeout(() => {
+      o == null || o();
     }, 300);
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `se-design-toast-bar ${r} ${s.toastBarCtn} ${g ? "show" : "hide"}`,
-    style: l({
-      background: s[e]
-    }, f)
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: s.toastMessageCtn
-  }, /* @__PURE__ */ a.createElement(m, {
-    name: e === "info" ? "info-white" : "checked-circle-white"
-  }), /* @__PURE__ */ a.createElement("span", {
-    className: s.toastMessage
-  }, t)), /* @__PURE__ */ a.createElement(m, {
-    name: "white-close",
-    className: s.closeIconCtn,
-    onClick: c
+    return () => clearTimeout(d);
+  }, [o]), f = t === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
+    switch (t) {
+      case "info":
+        return r.customInfoClassBtn;
+      case "alert":
+        return r.customAlertClassBtn;
+      case "nudge":
+        return r.customNudgeClassBtn;
+      default:
+        return "";
+    }
+  }, [t]);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-message-bar ${s} ${r.messageBarCtn} ${r[t]} ${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: "info",
+    className: "inline-block h-fit relative top-[3px] mr-1"
+  }), a, n && /* @__PURE__ */ e.createElement(w, {
+    label: i,
+    type: "primary",
+    size: "sm",
+    onClick: m,
+    className: `${g} ml-2 alert-btn`
+  })))), c && /* @__PURE__ */ e.createElement(l, {
+    name: "close",
+    className: r.closeIconCtn,
+    onClick: b
   }));
 };
 export {
-  M as ToastBar
+  y as MessageBar,
+  y as default
 };
 //# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.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-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\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  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-white\" : \"checked-circle-white\"} />\n        <span className={classNames.toastMessage}>{message}</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","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","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;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,eAAe;AAAA,EAAA,CAAyB,GACtEa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAcJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACjF;AAET;"}
+{"version":3,"file":"index40.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\" : \"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={\"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              />\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","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","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;AAMjBU,SAAAA,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBpB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIO,IAAU,SAAS,MAAM;AAAA,EAAA,GACpJW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWjC,EAAWE;AAAAA,EAAAA,GACzB8B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAAClC,GAAI;AAAA,IAACoC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,GAC1ElB,GACAE,KACCO,gBAAAA,EAAAQ,cAACjC,GAAM;AAAA,IACLoC,OAAOjB;AAAAA,IACPkB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASnB;AAAAA,IACTc,WAAW,GAAGH,CAAe;AAAA,EAAA,CAC9B,CAEC,CACH,CACF,GACJd,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAI;AAAA,IACHoC,MAAM;AAAA,IACND,WAAWjC,EAAWQ;AAAAA,IACtB8B,SAASf;AAAAA,EAAAA,CACV,CAEA;AAET;"}