se-design 1.0.3 → 1.0.8-5.dev.1

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.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","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;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrES,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBc,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IACpE;AAAA,EAAA,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCW,gBAAAA,EAAAA,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n  id: string | number;\n  [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n  automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null,\n    automationId = ''\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index41.js

@@ -1,77 +1,37 @@
-import e, { useState as p } from "react";
-import { Icon as a } from "./index5.js";
-import { Button as w } from "./index3.js";
+import e from "react";
 /* 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)]"
-}, B = ({
-  messageBarCtnClassName: l = "",
-  messageBarType: o = "info",
-  message: s = "",
-  hasCloseIcon: c = !1,
-  hasButton: n = !1,
-  buttonLabel: i = "",
-  buttonOnClick: m = () => {
-  },
-  handleClose: t = () => {
-  },
-  automationId: u = ""
+  progressBarCtn: "flex items-center gap-2",
+  progressBar: "flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden",
+  progressBarProgress: "h-full rounded-[12px]",
+  stepsCount: "steps-count"
+}, p = ({
+  totalTasks: s = 0,
+  completedTasks: o = 0,
+  progressBarCtnClassName: n = "",
+  needPercentageCompleted: c = !0,
+  progressBarColor: t
 }) => {
-  const [v, b] = p(!0), d = e.useCallback(() => {
-    b(!1);
-    const h = setTimeout(() => {
-      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]);
+  const a = s > 0 ? o / s * 100 : 0;
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
-    "data-automation-id": u
+    className: `${r.progressBarCtn} ${n} progress-bar-ctn`,
+    style: {
+      width: "100%"
+    }
   }, /* @__PURE__ */ e.createElement("div", {
-    className: r.messageCtn
+    className: r.progressBar
   }, /* @__PURE__ */ e.createElement("div", {
-    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",
-    className: r.closeIconCtn,
-    onClick: d
-  }));
+    className: r.progressBarProgress,
+    style: {
+      width: `${a}%`,
+      background: `${t || "linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)"}`,
+      transition: "width 0.4s ease-in-out"
+    }
+  })), c && /* @__PURE__ */ e.createElement("div", {
+    className: r.stepsCount
+  }, `${Math.round(a)}% completed`));
 };
 export {
-  B as MessageBar,
-  B as default
+  p as ProgressBar
 };
 //# sourceMappingURL=index41.js.map

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.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;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAR;OACb,GAAG;AACC,WAAA,MAAMS,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,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,IAClB;AAAA,EAAA,GACC,CAACG,CAAc,CAAC;AAMjBW,SAAAA,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,GAC5KY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzB+B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,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,EACV,CAAA,CAEA;AAET;"}
+{"version":3,"file":"index41.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%] 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(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\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;AAClF,SACEM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IAAA;AAAA,EACd,CACI,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index42.js

@@ -1,61 +1,55 @@
-import e, { useState as g, useEffect as v } from "react";
-import { Icon as s } from "./index5.js";
+import e, { useState as g, useRef as p } from "react";
+import { Icon as c } from "./index6.js";
+import { ProgressBar as f } from "./index41.js";
 /* empty css         */
-const t = {
-  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]",
-  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"
-}, C = ({
-  toastBarCtnClassName: a = "",
-  type: r,
-  message: c = "",
-  shouldAutoClose: n = !1,
-  delay: l = 5e3,
-  onClose: i = () => {
-  },
-  containerStyle: m = {}
+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]"
+}, E = ({
+  widgetClassName: s = "",
+  actionItems: a = []
 }) => {
-  const [u, d] = g(!0);
-  v(() => {
-    if (n) {
-      const f = setTimeout(() => {
-        o();
-      }, l);
-      return () => clearTimeout(f);
-    }
-  }, []);
-  const o = () => {
-    setTimeout(() => {
-      d(!1), setTimeout(() => {
-        i?.();
-      }, 300);
-    }, 300);
-  };
+  const [n, l] = g(!1), o = p(null), i = () => {
+    l(!n);
+  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
+    className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: r.accordionCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "title text-[var(--color-gray-900)]"
+  }, "Get Started"), /* @__PURE__ */ e.createElement(c, {
+    name: "chevron",
+    className: `${r.icon} ${n ? "rotate-180" : ""}`,
+    onClick: i
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "mt-[12px]"
+  }, /* @__PURE__ */ e.createElement(f, {
+    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: {
-      background: t[r],
-      ...m
+      maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.toastMessageCtn
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: r === "info" ? "info" : r === "error" ? "stop" : "checked-circle",
-    stroke: "var(--color-white)"
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
+    className: r.actionItemCtn
+  }, /* @__PURE__ */ e.createElement(c, {
+    name: "checked-circle",
+    stroke: d(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
-    className: t.toastMessage
-  }, c)), /* @__PURE__ */ e.createElement(s, {
-    name: "close",
-    stroke: "var(--color-white)",
-    className: t.closeIconCtn,
-    onClick: o
-  }));
+    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
+    onClick: t?.handleActionItemClick
+  }, t.label)))));
 };
 export {
-  C as ToastBar
+  E as GetStartedWidget,
+  E 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: \"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\" : 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,CAAC;AACpB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC;SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL;SACT,GAAG;AAAA,OACL,GAAG;AAAA,EAAA;AAINQ,SAAAA,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,IAAe;AAAA,EAAA,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHL,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAc,CAAA,CACzG;AAET;"}
+{"version":3,"file":"index42.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","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;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAGT,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAA,GAAqC,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAAA,CAAkB,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAC,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAAA,MAAQA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAAA,CAA+B,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,EAAAA,GAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index43.js

@@ -1,101 +1,116 @@
-import e, { useRef as _, useEffect as h } from "react";
+import t, { useState as $, useRef as T } from "react";
+import "./index72.js";
+import { useDismissOnEscape as j } from "./index215.js";
+import { Icon as g } from "./index6.js";
+import { Button as A } from "./index4.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 [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]);
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(s) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var n in r) ({}).hasOwnProperty.call(r, n) && (s[n] = r[n]);
     }
-  }, [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);
+    return s;
+  }, a.apply(null, arguments);
+}
+const f = {
+  info: {
+    stroke: "var(--color-yellow-700)",
+    rotation: "180"
+  },
+  alert: {
+    stroke: "var(--color-gray-900)",
+    rotation: "0"
+  },
+  nudge: {
+    stroke: "var(--color-white)",
+    rotation: "180"
+  }
+}, e = {
+  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-50)]",
+  nudge: "bg-[var(--color-blue-500)]",
+  infoMessage: "text-[var(--color-yellow-700)] text-center",
+  alertMessage: "text-[var(--color-gray-900)] text-center",
+  nudgeMessage: "text-[var(--color-white)] text-center",
+  closeIconCtn: "absolute right-[12px] cursor-pointer rounded-full p-1",
+  closeIconCtnInfo: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnAlert: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnNudge: "hover:bg-[var(--color-blue-700)]"
+}, d = {
+  info: "blue",
+  alert: "red",
+  nudge: "white"
+}, U = ({
+  messageBarCtnClassName: s = "",
+  messageBarType: o = "info",
+  message: r = "",
+  hasCloseIcon: n = !1,
+  hasButton: v = !1,
+  buttonLabel: b = "",
+  buttonOnClick: p = () => {
+  },
+  handleClose: l = () => {
+  },
+  automationId: C = "",
+  iconProps: c,
+  buttonProps: I,
+  closeButtonAriaLabel: w = "Close message"
+}) => {
+  const [i, h] = $(!0), x = T(null), m = t.useCallback(() => {
+    h(!1);
+    const O = setTimeout(() => {
+      l?.();
+    }, 300);
+    return () => clearTimeout(O);
+  }, [l]), {
+    onKeyDown: E
+  } = j({
+    onDismiss: m,
+    enabled: n && i
+  }), k = {
+    info: e.infoMessage,
+    alert: e.alertMessage,
+    nudge: e.nudgeMessage
+  }[o] ?? e.infoMessage, y = {
+    info: e.closeIconCtnInfo,
+    alert: e.closeIconCtnAlert,
+    nudge: e.closeIconCtnNudge
+  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", _ = d[o] ?? d.info, u = f[o] ?? f.info, M = c !== null, D = {
+    name: "info",
+    stroke: u.stroke,
+    rotation: u.rotation,
+    className: "shrink-0",
+    ...c
   };
-  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",
-    style: {
-      pointerEvents: n ? "none" : "auto"
-    }
-  }, /* @__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, {
+  return /* @__PURE__ */ t.createElement("div", {
+    ref: x,
+    className: `se-design-message-bar ${s} ${e.messageBarCtn} ${e[o]} ${i ? "show" : "hide"}`,
+    "data-automation-id": C,
+    onKeyDown: E
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: e.messageCtn
+  }, M && /* @__PURE__ */ t.createElement(g, D), /* @__PURE__ */ t.createElement("span", {
+    className: `${k} break-words min-w-0`
+  }, r), v && /* @__PURE__ */ t.createElement(A, a({
+    label: b,
+    type: "primary",
+    size: "sm",
+    theme: _,
+    onClick: p,
+    className: "alert-btn"
+  }, I))), n && /* @__PURE__ */ t.createElement(g, {
     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)));
-});
+    className: `${e.closeIconCtn} ${y}`,
+    stroke: N,
+    onClick: m,
+    ariaLabel: w
+  }));
+};
 export {
-  A as AutoCompleteInput
+  U as MessageBar,
+  U as default
 };
 //# sourceMappingURL=index43.js.map