se-design 0.0.111 → 0.0.112

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select'\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon name=\"down\" className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`} />\n      </div>\n    );\n  };\n\n  return (\n    <div className={`se-design-dropdown-container ${props?.className}`} style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div style={props?.style}>\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}
+{"version":3,"file":"index22.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor} `;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon\n          name=\"chevron-down\"\n          className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div className={`se-design-dropdown-container ${props?.className}`} style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div style={props?.style} className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}>\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}

package/dist/index26.js

@@ -1,33 +1,65 @@
-import r, { useState as u, useEffect as a } from "react";
-const x = ({
-  defaultActiveTab: o,
-  tabs: c,
-  onTabChange: s
+import r, { useState as g, useEffect as E } from "react";
+import { Icon as k } from "./index4.js";
+import { Dropdown as N } from "./index22.js";
+/* empty css         */
+const b = ({
+  defaultActiveTab: c,
+  tabs: o,
+  onTabChange: n,
+  primaryTabCount: a = 0
 }) => {
-  const m = o || (c[0] ? c[0].id : ""), [n, t] = u(m);
-  a(() => {
-    t(o || "");
-  }, [o]);
-  const v = (e) => {
-    t(e == null ? void 0 : e.id), s == null || s(e == null ? void 0 : e.id);
-  }, i = (e, l) => e.id === l;
+  const x = c || (o[0] ? o[0].id : ""), [l, m] = g(x), [v, p] = g(!1), u = a || (o == null ? void 0 : o.length), w = o.slice(0, u), t = o.slice(u), s = t.find((e) => e.id === l);
+  E(() => {
+    m(c || "");
+  }, [c]);
+  const i = (e) => {
+    m(e == null ? void 0 : e.id), n == null || n(e == null ? void 0 : e.id);
+  }, f = (e, d) => e.id === d;
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-tabs flex items-center gap-4"
-  }, c.map((e) => {
-    const l = n === e.id, d = e.disabled;
+    className: "se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-200)] w-fit"
+  }, w.map((e) => {
+    const d = l === e.id, y = e.disabled;
     return /* @__PURE__ */ r.createElement("div", {
       key: e.label,
-      onClick: () => !d && v(e),
-      className: `text-base ${d ? "text-[var(--color-gray-400)] cursor-not-allowed" : l ? "text-[var(--color-gray-900)] font-bold hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
+      onClick: () => !y && i(e),
+      className: `text-base px-3 py-0.5 border-l first:border-l-0 border-[var(--color-gray-200)] ${y ? "text-[var(--color-gray-400)] cursor-not-allowed" : d ? "text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer"}`
     }, e.label);
-  })), /* @__PURE__ */ r.createElement("div", {
+  }), t.length > 0 && /* @__PURE__ */ r.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ r.createElement("div", {
+    className: `cursor-pointer text-base text-[var(--color-gray-700)] border-l border-[var(--color-gray-200)] py-0.5 px-1.5 ${s ? "bg-[var(--color-blue-100)]" : ""}`
+  }, s ? /* @__PURE__ */ r.createElement(N, {
+    defaultSelectedValue: s,
+    defaultText: "Select",
+    displaySelected: !0,
+    dropDownOptions: t,
+    optionsUniqueBy: "id",
+    selectBy: "label",
+    className: "se-design-tabs-dropdown",
+    type: "select",
+    onOptionClick: (e) => {
+      i(e);
+    },
+    iconColor: "var(--color-blue-500)"
+  }) : /* @__PURE__ */ r.createElement(k, {
+    name: "kebab-menu",
+    onClick: () => p(!v)
+  })), v && /* @__PURE__ */ r.createElement("div", {
+    className: "absolute top-full left-0 mt-1 bg-white border border-[var(--color-gray-200)] min-w-[165px] w-max shadow-lg rounded-md z-10"
+  }, t.map((e) => /* @__PURE__ */ r.createElement("div", {
+    key: e.label,
+    onClick: () => {
+      i(e), p(!1);
+    },
+    className: `px-4 py-2 cursor-pointer hover:bg-gray-100 ${l === e.id ? "text-[var(--color-gray-900)] font-bold" : "text-[var(--color-gray-700)]"}`
+  }, e.label))))), /* @__PURE__ */ r.createElement("div", {
     className: "se-design-tabs-content"
-  }, c.map((e) => /* @__PURE__ */ r.createElement("div", {
+  }, o.map((e) => /* @__PURE__ */ r.createElement("div", {
     key: e.id,
-    className: `tab-content ${i(e, n) ? "block" : "hidden"}`
-  }, i(e, n) && (e == null ? void 0 : e.renderTabContent) && (e == null ? void 0 : e.renderTabContent(e))))));
+    className: `tab-content ${f(e, l) ? "block" : "hidden"}`
+  }, f(e, l) && (e == null ? void 0 : e.renderTabContent) && (e == null ? void 0 : e.renderTabContent(e))))));
 };
 export {
-  x as Tabs
+  b as Tabs
 };
 //# sourceMappingURL=index26.js.map

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n}\n\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n}\n\nexport const Tabs: FC<TabsProps> = ({ defaultActiveTab, tabs, onTabChange }) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  }\n\n  return (\n    <>\n      <div className=\"se-design-tabs flex items-center gap-4\">\n        {tabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`text-base ${\n                isDisabled \n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-gray-900)] font-bold hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div\n            key={tab.id}\n            className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n          >\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","defaultTabId","id","activeTab","setActiveTab","useState","useEffect","handleTabClick","tab","isTabActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","renderTabContent"],"mappings":";AAeO,MAAMA,IAAsBA,CAAC;AAAA,EAAEC,kBAAAA;AAAAA,EAAkBC,MAAAA;AAAAA,EAAMC,aAAAA;AAAY,MAAM;AACxEC,QAAAA,IAAeH,MAAqBC,EAAK,CAAC,IAAIA,EAAK,CAAC,EAAEG,KAAK,KAC3D,CAACC,GAAWC,CAAY,IAAIC,EAASJ,CAAY;AAEvDK,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaN,KAAoB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAgB,CAAC;AAEfS,QAAAA,IAAiBA,CAACC,MAAkB;AACxCJ,IAAAA,EAAaI,KAAAA,gBAAAA,EAAKN,EAAE,GACpBF,KAAAA,QAAAA,EAAcQ,KAAAA,gBAAAA,EAAKN;AAAAA,EACrB,GAEMO,IAAcA,CAACD,GAAeL,MAC3BK,EAAIN,OAAOC;AAGpB,2BACEO,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAKe,IAAKN,CAAQA,MAAA;AACXO,UAAAA,IAAWZ,MAAcK,EAAIN,IAC7Bc,IAAaR,EAAIS;AAErBN,WAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEQ,KAAKV,EAAIW;AAAAA,MACTC,SAASA,MAAM,CAACJ,KAAcT,EAAeC,CAAG;AAAA,MAChDK,WAAW,aACTG,IACI,oDACAD,IACE,gEACA,4FAA4F;AAAA,IAAA,GAGnGP,EAAIW,KACF;AAAA,EAER,CAAA,CACE,GAELR,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACZd,EAAKe,IAAKN,CACTG,MAAAA,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEQ,KAAKV,EAAIN;AAAAA,IACTW,WAAW,eAAeJ,EAAYD,GAAKL,CAAS,IAAI,UAAU,QAAQ;AAAA,EAEzEM,GAAAA,EAAYD,GAAKL,CAAS,MAAKK,KAAAA,gBAAAA,EAAKa,sBAAoBb,KAAAA,gBAAAA,EAAKa,iBAAiBb,GAC5E,CACN,CACE,CACL;AAEN;"}
+{"version":3,"file":"index26.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Dropdown } from '../Dropdown';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n}\n\nexport const Tabs: FC<TabsProps> = ({ defaultActiveTab, tabs, onTabChange, primaryTabCount = 0 }) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [showDropdown, setShowDropdown] = useState(false);\n\n  const visibleTabCount = primaryTabCount ? primaryTabCount : tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  return (\n    <>\n      <div className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-200)] w-fit\">\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`text-base px-3 py-0.5 border-l first:border-l-0 border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                    ? 'text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                    : 'text-[var(--color-gray-700)] font-normal hover:text-[var(--color-gray-900)] cursor-pointer'\n              }`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <div className=\"relative\">\n            <div\n              className={`cursor-pointer text-base text-[var(--color-gray-700)] border-l border-[var(--color-gray-200)] py-0.5 px-1.5 ${activeOverflowTab ? 'bg-[var(--color-blue-100)]' : ''}`}\n            >\n              {activeOverflowTab ? (\n                <Dropdown\n                  defaultSelectedValue={activeOverflowTab}\n                  defaultText=\"Select\"\n                  displaySelected\n                  dropDownOptions={overflowTabs}\n                  optionsUniqueBy=\"id\"\n                  selectBy=\"label\"\n                  className=\"se-design-tabs-dropdown\"\n                  type=\"select\"\n                  onOptionClick={(option: any) => {\n                    handleTabClick(option);\n                  }}\n                  iconColor=\"var(--color-blue-500)\"\n                />\n              ) : (\n                <Icon name=\"kebab-menu\" onClick={() => setShowDropdown(!showDropdown)} />\n              )}\n            </div>\n\n            {showDropdown && (\n              <div className=\"absolute top-full left-0 mt-1 bg-white border border-[var(--color-gray-200)] min-w-[165px] w-max shadow-lg rounded-md z-10\">\n                {overflowTabs.map((tab) => (\n                  <div\n                    key={tab.label}\n                    onClick={() => {\n                      handleTabClick(tab);\n                      setShowDropdown(false);\n                    }}\n                    className={`px-4 py-2 cursor-pointer hover:bg-gray-100 ${\n                      activeTab === tab.id ? 'text-[var(--color-gray-900)] font-bold' : 'text-[var(--color-gray-700)]'\n                    }`}\n                  >\n                    {tab.label}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","defaultTabId","id","activeTab","setActiveTab","useState","showDropdown","setShowDropdown","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","useEffect","handleTabClick","isTabActive","createElement","React","Fragment","className","map","isActive","isDisabled","disabled","key","label","onClick","Dropdown","defaultSelectedValue","defaultText","displaySelected","dropDownOptions","optionsUniqueBy","selectBy","type","onOptionClick","option","iconColor","Icon","name","renderTabContent"],"mappings":"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"}

package/dist/index29.js

@@ -22,9 +22,9 @@ const t = {
   requestFeatureDescriptionCtn: "flex flex-col"
 }, B = ({
   widgetClassName: g = "",
-  widgetType: a,
-  widgetTitle: r,
-  widgetDescription: l,
+  widgetType: a = "general",
+  widgetTitle: r = "",
+  widgetDescription: l = "",
   widgetImage: p,
   hasImage: f = !1,
   hasButtonCta: n = !1,

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType,\n  widgetTitle,\n  widgetDescription,\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {[\"promotion\", \"general\"].includes(widgetType!) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
+{"version":3,"file":"index29.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"AA0BA,OAAAA,OAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,WAAW;AAAA,EACXC,gBAAgB;AAAA,EAChBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,mBAAmB;AAAA,EACnBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,aAAa;AAAA,EACbC,gBAAgB;AAAA,EAChBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,wBAAwB;AAAA,EACxBC,iBAAiB;AAAA,EACjBC,mBAAmB;AAAA,EACnBC,wBAAwB;AAAA,EACxBC,8BAA8B;AAChC,GAEaC,IAA0BA,CAAC;AAAA,EACtCC,iBAAAA,IAAkB;AAAA,EAClBC,YAAAA,IAAa;AAAA,EACbf,aAAAA,IAAc;AAAA,EACdC,mBAAAA,IAAoB;AAAA,EACpBe,aAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACfC,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACVC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,YAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACApB,gBAAAA;AACF,MAAM;AAEJ,QAAMqB,IAAcN,KAClBO,gBAAAA,EAAAA,cAAClC,GAAK;AAAA,IACJmC,OAAOP;AAAAA,IACP1B,WAAWA,EAAUQ;AAAAA,IACrB0B,SAAQ;AAAA,IACRC,WAAU;AAAA,IACVC,YAAW;AAAA,EAAA,CACZ,GAGGC,KAAad,KAAcD,MAC/BU,gBAAAA,EAAAA,cAACM,EAAMC,UAAQ,MACZhB,KAAcS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUM;AAAAA,KAAgBkB,CAAc,GACvEF,KAAgBgB,gBAAAA,EAAAN,cAACnC,GAAM;AAAA,IAAC2C,MAAMb;AAAAA,IAAec,MAAK;AAAA,IAAKR,OAAOT;AAAAA,IAASxB,WAAW,GAAGA,EAAUO,eAAe;AAAA,IAAamC,SAASd;AAAAA,EAAAA,CAAa,CACpI,GAGZe,IAActB,KAClBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUE,cAAc;AAAA,EAAA,GACzC8B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKY,KAAKxB;AAAAA,IAAayB,KAAI;AAAA,EAAA,CAAe,CACvC;AAILP,SAAAA,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUC,SAAS,IAAIiB,CAAe;AAAA,IAAewB,SAASb;AAAAA,EAAAA,GAC9EV,MAAe,aAAawB,GAC7BL,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUG;AAAAA,EAAAA,GACvBgB,MAAe,aAAaY,GAC5BZ,MAAe,qBAAqBmB,gBAAAA,EAAAN,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUI,WAAW;AAAA,EAAkBA,GAAAA,CAAkB,GAEhH,CAAC,aAAa,SAAS,EAAE0C,SAAS3B,CAAU,KAC5Ca,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUK,iBAAiB;AAAA,EAAA,GAAwBA,CAAwB,GAGhGc,MAAe,aACdmB,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUS;AAAAA,EACvBC,GAAAA,KACDsB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUY,sBAAsB;AAAA,EAAA,GACjDoB,gBAAAA,EAAAA,cAACjC,GAAI;AAAA,IAACgD,MAAK;AAAA,IAAS/C,WAAU;AAAA,EAAA,CAAsB,GACpDgC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUU;AAAAA,EAAAA,GAAiBA,CAAqB,CAC9D,GAEJoB,KACEQ,gBAAAA,EAAAN,cAAA,OAAA;AAAA,IAAKhC,WAAW,GAAGA,EAAUa,eAAe;AAAA,EAAA,GAC3CmB,gBAAAA,EAAAA,cAACjC,GAAI;AAAA,IAACgD,MAAK;AAAA,IAAQ/C,WAAU;AAAA,EAAA,CAAsB,GACnDgC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAWA,EAAUW;AAAAA,EAAAA,GAAcmB,CAAsB,CAC5D,CAEJ,GAGNX,MAAe,oBACda,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUc;AAAAA,EAAAA,GACxBkB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUe;AAAAA,EAAAA,CAAyB,GACnDiB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhC,WAAWA,EAAUgB;AAAAA,EAAAA,GACxBgB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUI,WAAW;AAAA,EAAkBA,GAAAA,CAAkB,GAC7EkC,gBAAAA,EAAAN,cAAA,QAAA;AAAA,IAAMhC,WAAW,GAAGA,EAAUK,iBAAiB;AAAA,KAAwBA,CAAwB,GAC9FgC,CACE,CACF,IAELA,CAEC,CACF;AAET;"}

package/dist/index3.js

@@ -1,15 +1,15 @@
 var s = Object.getOwnPropertySymbols;
-var y = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var h = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
 var b = (e, a) => {
   var o = {};
   for (var r in e)
-    y.call(e, r) && a.indexOf(r) < 0 && (o[r] = e[r]);
+    h.call(e, r) && a.indexOf(r) < 0 && (o[r] = e[r]);
   if (e != null && s)
     for (var r of s(e))
-      a.indexOf(r) < 0 && h.call(e, r) && (o[r] = e[r]);
+      a.indexOf(r) < 0 && y.call(e, r) && (o[r] = e[r]);
   return o;
 };
-import l from "react";
+import t from "react";
 import { Icon as d } from "./index4.js";
 function n() {
   return n = Object.assign ? Object.assign.bind() : function(e) {
@@ -20,18 +20,19 @@ function n() {
     return e;
   }, n.apply(null, arguments);
 }
-const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2", x = {
+const l = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2", x = {
   primary: "bg-[var(--color-gray-200)] text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed",
   secondary: "text-[var(--color-gray-600)] border border-[var(--color-gray-300)] pointer-events-none cursor-not-allowed",
   link: "text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed"
 }, g = {
-  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${t}`,
-  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${t}`,
-  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${t}`,
-  "purchase-secondary": `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${t}`,
-  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${t}`,
-  "negative-secondary": `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${t}`,
-  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${t}`,
+  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${l}`,
+  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${l}`,
+  "secondary-blue": `bg-[var(--color-white)] border border-[var(--color-blue-500)] text-[var(--color-blue-500)] hover:bg-[var(--color-blue-100)] ${l}`,
+  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${l}`,
+  "purchase-secondary": `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${l}`,
+  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${l}`,
+  "negative-secondary": `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${l}`,
+  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${l}`,
   sm: "px-3 py-1",
   md: "px-4 py-2",
   smRow: "px-3 py-0.5"
@@ -54,13 +55,13 @@ const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outli
     "className"
   ]);
   const p = e !== "link" ? g[a] : "";
-  return /* @__PURE__ */ l.createElement("button", n({
+  return /* @__PURE__ */ t.createElement("button", n({
     type: "button",
     className: `rounded-[6px] text-base font-normal flex gap-1 items-center min-w-fit ${p} ${u ? x[e] : g[e]} ${i}`
-  }, m), r && c === "left" && /* @__PURE__ */ l.createElement(d, {
+  }, m), r && c === "left" && /* @__PURE__ */ t.createElement(d, {
     name: r,
     className: ""
-  }), o, r && c === "right" && /* @__PURE__ */ l.createElement(d, {
+  }), o, r && c === "right" && /* @__PURE__ */ t.createElement(d, {
     name: r,
     className: ""
   }));

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from '../Icon';\n\nexport interface ButtonProps {\n  /**\n   * Type of the button\n   */\n  type?: 'primary' | 'secondary' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'link';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'smRow';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon name\n   */\n  icon?: string;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n}\n\nconst focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2';\nconst disabledClassNames: Map = {\n  primary: 'bg-[var(--color-gray-200)] text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed',\n  secondary:\n    'text-[var(--color-gray-600)] border border-[var(--color-gray-300)] pointer-events-none cursor-not-allowed',\n  link: 'text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed'\n};\nconst classNames: Map = {\n  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${focusClass}`,\n  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${focusClass}`,\n  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${focusClass}`,\n  'purchase-secondary': `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${focusClass}`,\n  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  'negative-secondary': `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${focusClass}`,\n  sm: 'px-3 py-1',\n  md: 'px-4 py-2',\n  smRow: 'px-3 py-0.5'\n};\n\nexport const Button: FC<ButtonProps> = ({\n  type = 'primary',\n  size = 'md',\n  label = '',\n  icon = '',\n  iconPosition = 'left',\n  disabled = false,\n  className = '',\n  ...props\n}) => {\n  const sizeClassName = type !== 'link' ? classNames[size] : '';\n\n  return (\n    <button\n      type=\"button\"\n      className={`rounded-[6px] text-base font-normal flex gap-1 items-center min-w-fit ${sizeClassName} ${disabled ? disabledClassNames[type] : classNames[type]} ${className}`}\n      {...props}\n    >\n      {icon && iconPosition === 'left' && <Icon name={icon} className=\"\" />}\n      {label}\n      {icon && iconPosition === 'right' && <Icon name={icon} className=\"\" />}\n    </button>\n  );\n};\n"],"names":["focusClass","disabledClassNames","primary","secondary","link","classNames","purchase","negative","sm","md","smRow","Button","_a","_b","type","size","label","icon","iconPosition","disabled","className","props","sizeClassName","React","createElement","_extends","Icon","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,IAAa,oFACbC,IAA0B;AAAA,EAC9BC,SAAS;AAAA,EACTC,WACE;AAAA,EACFC,MAAM;AACR,GACMC,IAAkB;AAAA,EACtBH,SAAS,yFAAyFF,CAAU;AAAA,EAC5GG,WAAW,mKAAmKH,CAAU;AAAA,EACxLM,UAAU,kIAAkIN,CAAU;AAAA,EACtJ,sBAAsB,2KAA2KA,CAAU;AAAA,EAC3MO,UAAU,gKAAgKP,CAAU;AAAA,EACpL,sBAAsB,gKAAgKA,CAAU;AAAA,EAChMI,MAAM,8EAA8EJ,CAAU;AAAA,EAC9FQ,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,OAAO;AACT,GAEaC,IAA0BA,CAACC,MASlC;AATkC,MAAAC,IAAAD,GACtCE;AAAAA,UAAAA,IAAO;AAAA,IACPC,MAAAA,IAAO;AAAA,IACPC,OAAAA,IAAQ;AAAA,IACRC,MAAAA,IAAO;AAAA,IACPC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,WAAAA,IAAY;AAAA,MAP0BP,GAQnCQ,IAAAA,EARmCR,GAQnCQ;AAAAA,IAPHP;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAME,IAAgBR,MAAS,SAAST,EAAWU,CAAI,IAAI;AAGzDQ,SAAAA,gBAAAA,EAAAC,cAAA,UAAAC,EAAA;AAAA,IACEX,MAAK;AAAA,IACLM,WAAW,yEAAyEE,CAAa,IAAIH,IAAWlB,EAAmBa,CAAI,IAAIT,EAAWS,CAAI,CAAC,IAAIM,CAAS;AAAA,EAAA,GACpKC,CAAK,GAERJ,KAAQC,MAAiB,UAAUK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,GACnEJ,GACAC,KAAQC,MAAiB,WAAWK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,CAC/D;AAEZ;"}
+{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from '../Icon';\n\nexport interface ButtonProps {\n  /**\n   * Type of the button\n   */\n  type?: 'primary' | 'secondary' | 'secondary-blue' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'link';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'smRow';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon name\n   */\n  icon?: string;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n}\n\nconst focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2';\nconst disabledClassNames: Map = {\n  primary: 'bg-[var(--color-gray-200)] text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed',\n  secondary:\n    'text-[var(--color-gray-600)] border border-[var(--color-gray-300)] pointer-events-none cursor-not-allowed',\n  link: 'text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed'\n};\nconst classNames: Map = {\n  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${focusClass}`,\n  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${focusClass}`,\n  'secondary-blue': `bg-[var(--color-white)] border border-[var(--color-blue-500)] text-[var(--color-blue-500)] hover:bg-[var(--color-blue-100)] ${focusClass}`,\n  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${focusClass}`,\n  'purchase-secondary': `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${focusClass}`,\n  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  'negative-secondary': `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${focusClass}`,\n  sm: 'px-3 py-1',\n  md: 'px-4 py-2',\n  smRow: 'px-3 py-0.5'\n};\n\nexport const Button: FC<ButtonProps> = ({\n  type = 'primary',\n  size = 'md',\n  label = '',\n  icon = '',\n  iconPosition = 'left',\n  disabled = false,\n  className = '',\n  ...props\n}) => {\n  const sizeClassName = type !== 'link' ? classNames[size] : '';\n\n  return (\n    <button\n      type=\"button\"\n      className={`rounded-[6px] text-base font-normal flex gap-1 items-center min-w-fit ${sizeClassName} ${disabled ? disabledClassNames[type] : classNames[type]} ${className}`}\n      {...props}\n    >\n      {icon && iconPosition === 'left' && <Icon name={icon} className=\"\" />}\n      {label}\n      {icon && iconPosition === 'right' && <Icon name={icon} className=\"\" />}\n    </button>\n  );\n};\n"],"names":["focusClass","disabledClassNames","primary","secondary","link","classNames","purchase","negative","sm","md","smRow","Button","_a","_b","type","size","label","icon","iconPosition","disabled","className","props","sizeClassName","React","createElement","_extends","Icon","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,IAAa,oFACbC,IAA0B;AAAA,EAC9BC,SAAS;AAAA,EACTC,WACE;AAAA,EACFC,MAAM;AACR,GACMC,IAAkB;AAAA,EACtBH,SAAS,yFAAyFF,CAAU;AAAA,EAC5GG,WAAW,mKAAmKH,CAAU;AAAA,EACxL,kBAAkB,+HAA+HA,CAAU;AAAA,EAC3JM,UAAU,kIAAkIN,CAAU;AAAA,EACtJ,sBAAsB,2KAA2KA,CAAU;AAAA,EAC3MO,UAAU,gKAAgKP,CAAU;AAAA,EACpL,sBAAsB,gKAAgKA,CAAU;AAAA,EAChMI,MAAM,8EAA8EJ,CAAU;AAAA,EAC9FQ,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,OAAO;AACT,GAEaC,IAA0BA,CAACC,MASlC;AATkC,MAAAC,IAAAD,GACtCE;AAAAA,UAAAA,IAAO;AAAA,IACPC,MAAAA,IAAO;AAAA,IACPC,OAAAA,IAAQ;AAAA,IACRC,MAAAA,IAAO;AAAA,IACPC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,WAAAA,IAAY;AAAA,MAP0BP,GAQnCQ,IAAAA,EARmCR,GAQnCQ;AAAAA,IAPHP;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAME,IAAgBR,MAAS,SAAST,EAAWU,CAAI,IAAI;AAGzDQ,SAAAA,gBAAAA,EAAAC,cAAA,UAAAC,EAAA;AAAA,IACEX,MAAK;AAAA,IACLM,WAAW,yEAAyEE,CAAa,IAAIH,IAAWlB,EAAmBa,CAAI,IAAIT,EAAWS,CAAI,CAAC,IAAIM,CAAS;AAAA,EAAA,GACpKC,CAAK,GAERJ,KAAQC,MAAiB,UAAUK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,GACnEJ,GACAC,KAAQC,MAAiB,WAAWK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,CAC/D;AAEZ;"}

package/dist/index33.js

@@ -1,36 +1,46 @@
-import e, { useState as o, useEffect as i } from "react";
-import { Icon as m } from "./index4.js";
-const f = ({
-  renderAccordionContents: a,
-  renderAccordionSrcElement: c,
-  defaultOpen: n,
-  className: r = ""
+import e, { useState as d, useEffect as f } from "react";
+import { Icon as c } from "./index4.js";
+const g = ({
+  renderAccordionContents: o,
+  renderAccordionSrcElement: i,
+  defaultOpen: a,
+  className: l = "",
+  arrowPosition: n = "left",
+  contentClassName: m = ""
 }) => {
-  const [t, s] = o(!1);
-  return i(() => {
-    s(n || !1);
-  }, [n]), /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion ${r}`
+  const [t, r] = d(!1);
+  f(() => {
+    r(a || !1);
+  }, [a]);
+  const s = () => n === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "";
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion ${l}`
   }, /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center cursor-pointer",
-    onClick: () => s(!t)
+    className: "flex flex-col"
   }, /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${t ? "rotate-90" : ""}`
-  }, /* @__PURE__ */ e.createElement(m, {
+    className: "flex items-center cursor-pointer",
+    onClick: () => r(!t)
+  }, n === "left" && /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${s()}`
+  }, /* @__PURE__ */ e.createElement(c, {
     name: "rightSide"
   })), /* @__PURE__ */ e.createElement("div", {
     className: "se-design-accordion-elements flex-1"
   }, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-src-element"
-  }, c({
+    className: "se-design-accordion-src-element title"
+  }, i({
     isOpen: t
-  })), t && /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-content transition-all duration-300 mt-1"
-  }, a({
+  }))), n === "right" && /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${s()}`
+  }, /* @__PURE__ */ e.createElement(c, {
+    name: "chevron-down"
+  }))), t && /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-content transition-all duration-300 mt-1 ${m}`
+  }, o({
     isOpen: t
-  })))));
+  }))));
 };
 export {
-  f as CustomAccordion
+  g as CustomAccordion
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ renderAccordionContents, renderAccordionSrcElement, defaultOpen, className = '' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  return (\n    <div className={`se-design-accordion ${className}`}>\n      <div className='flex items-center cursor-pointer' onClick={() => setIsOpen(!isOpen)}>\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}>\n          <Icon name=\"rightSide\" />\n        </div>\n        <div className='se-design-accordion-elements flex-1'>\n          <div className='se-design-accordion-src-element'>{renderAccordionSrcElement({isOpen})}</div>\n          {isOpen &&\n            (<div className='se-design-accordion-content transition-all duration-300 mt-1'>\n              {renderAccordionContents({isOpen})}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","isOpen","setIsOpen","useState","useEffect","React","createElement","onClick","Icon","name"],"mappings":";;AAUO,MAAMA,IAA4CA,CAAC;AAAA,EAAEC,yBAAAA;AAAAA,EAAyBC,2BAAAA;AAAAA,EAA2BC,aAAAA;AAAAA,EAAaC,WAAAA,IAAY;AAAG,MAAM;AAChJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,SAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUH,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC,GAGbM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAW,uBAAuBA,CAAS;AAAA,EAAA,GAC9CM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,IAAmCO,SAASA,MAAML,EAAU,CAACD,CAAM;AAAA,EAAA,GAChFK,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,wEAAwEC,IAAS,cAAc,EAAE;AAAA,EAAA,GAC/GK,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GACbM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,KAAmCF,EAA0B;AAAA,IAACG,QAAAA;AAAAA,EAAO,CAAA,CAAO,GAC1FA,KACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,KACbH,EAAwB;AAAA,IAACI,QAAAA;AAAAA,EAAAA,CAAO,CAC9B,CAEJ,CACF,CACF;AAET;"}
+{"version":3,"file":"index33.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ \n  renderAccordionContents, \n  renderAccordionSrcElement, \n  defaultOpen, \n  className = '',\n  arrowPosition = 'left',\n  contentClassName = ''\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  const getArrowRotation = () => {\n    if (arrowPosition === 'left') {\n      return isOpen ? 'rotate-90' : '';\n    }\n    return isOpen ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`}>\n      <div className=\"flex flex-col\">\n        <div className=\"flex items-center cursor-pointer\" onClick={() => setIsOpen(!isOpen)}>\n          {arrowPosition === 'left' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"rightSide\" />\n            </div>\n          )}\n          <div className=\"se-design-accordion-elements flex-1\">\n            <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({isOpen})}</div>\n          </div>\n          {arrowPosition === 'right' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"chevron-down\" />\n            </div>\n          )}\n        </div>\n        {isOpen && (\n          <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({isOpen})}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AACrB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC;AAEf,QAAMQ,IAAmBA,MACnBN,MAAkB,SACbE,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAI/BK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,uBAAuBA,CAAS;AAAA,EAAA,GAC9CS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,IAAmCU,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAC/EF,GAAAA,MAAkB,UACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GAEPJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,KAAyCF,EAA0B;AAAA,IAACK,QAAAA;AAAAA,EAAAA,CAAO,CAAO,CAC9F,GACJF,MAAkB,WACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAgB,CAAA,CACxB,CAEJ,GACJT,KACCK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,gEAAgEE,CAAgB;AAAA,KAC7FL,EAAwB;AAAA,IAACM,QAAAA;AAAAA,EAAO,CAAA,CAC9B,CAEJ,CACF;AAET;"}

package/dist/index37.js

@@ -23,7 +23,7 @@ const r = {
   }, /* @__PURE__ */ e.createElement("span", {
     className: "title text-[var(--color-gray-900)]"
   }, "Get Started"), /* @__PURE__ */ e.createElement(s, {
-    name: "down",
+    name: "chevron-down",
     className: `${r.icon} ${n ? "rotate-180" : ""}`,
     onClick: d
   })), /* @__PURE__ */ e.createElement("div", {

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/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,69 @@
-import e, { useState as f, useEffect as g } from "react";
-import { Icon as o } from "./index4.js";
+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";
 /* empty css         */
-const t = {
-  toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap",
+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"
-}, x = ({
-  toastBarCtnClassName: c = "",
-  toastType: a,
-  toastMessage: n = "",
-  shouldAutoClose: i = !1,
-  delay: l = 5e3,
-  onClose: r = () => {
-  }
+}, M = ({
+  toastBarCtnClassName: r = "",
+  type: e,
+  message: t = "",
+  shouldAutoClose: u = !1,
+  delay: d = 5e3,
+  onClose: o = () => {
+  },
+  containerStyle: f = {}
 }) => {
-  const [m, u] = f(!0);
-  g(() => {
-    if (i) {
-      const d = setTimeout(() => {
-        s();
-      }, l);
-      return () => clearTimeout(d);
+  const [g, p] = b(!0);
+  E(() => {
+    if (u) {
+      const h = setTimeout(() => {
+        c();
+      }, d);
+      return () => clearTimeout(h);
     }
   }, []);
-  const s = () => {
+  const c = () => {
     setTimeout(() => {
-      u(!1), setTimeout(() => {
-        r == null || r();
+      p(!1), setTimeout(() => {
+        o == null || o();
       }, 300);
     }, 300);
   };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${c} ${t.toastBarCtn} ${m ? "show" : "hide"}`,
-    style: {
-      background: t[a]
-    }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.toastMessageCtn
-  }, /* @__PURE__ */ e.createElement(o, {
-    name: a === "info" ? "info-white" : "checked-circle-white"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.toastMessage
-  }, n)), /* @__PURE__ */ e.createElement(o, {
+  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: t.closeIconCtn,
-    onClick: s
+    className: s.closeIconCtn,
+    onClick: c
   }));
 };
 export {
-  x as ToastBar
+  M as ToastBar
 };
 //# 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/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;"}