se-design 0.0.107 → 0.0.108

package/dist/index23.js

@@ -1,33 +1,138 @@
-import r, { useState as u, useEffect as a } from "react";
-const x = ({
-  defaultActiveTab: o,
-  tabs: c,
-  onTabChange: s
+import e from "react";
+import { Popover as c } from "./index16.js";
+const m = ({
+  menuItems: n,
+  onMenuItemClick: o,
+  activeItem: l = "",
+  variant: a = "primary",
+  className: C = "",
+  automationId: i = ""
 }) => {
-  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;
-  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;
-    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"}`
-    }, e.label);
-  })), /* @__PURE__ */ r.createElement("div", {
-    className: "se-design-tabs-content"
-  }, c.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))))));
+  const s = () => {
+    switch (a) {
+      case "primary":
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }));
+      case "secondary":
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }));
+      default:
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }));
+    }
+  };
+  return /* @__PURE__ */ e.createElement(c, {
+    className: C,
+    position: "bottom-left",
+    automationId: i,
+    renderPopoverSrcElement: ({
+      displayPopover: r
+    }) => /* @__PURE__ */ e.createElement("div", {
+      className: `se-design-kebab-menu ${r ? "bg-[var(--color-blue-100)]" : ""} hover:bg-[var(--color-blue-100)] rounded-[4px] transition-all duration-300 w-max`
+    }, s()),
+    renderPopoverContents: ({
+      closePopoverCb: r
+    }) => /* @__PURE__ */ e.createElement("div", {
+      className: "min-w-[212px] px-1 py-2"
+    }, n.map((t, d) => /* @__PURE__ */ e.createElement("div", {
+      key: d,
+      className: "w-full text-left",
+      onClick: () => {
+        o && !t.isDisabled && o(t), !t.isDisabled && r();
+      }
+    }, /* @__PURE__ */ e.createElement("p", {
+      className: `py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${l.toLowerCase() === t.label.toLowerCase() ? "bg-[var(--color-blue-100)]" : ""} ${t.isDisabled ? "text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed" : ""}`
+    }, t.label))))
+  });
 };
 export {
-  x as Tabs
+  m as KebabMenu
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.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":"index23.js","sources":["../src/components/KebabMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { MenuItemProps } from 'src/components/MenuItem';\n// import { Icon } from 'src/components/Icon';\n\nexport interface KebabMenuProps {\n  className?: string;\n  automationId?: string;\n  menuItems: MenuItemProps[];\n  variant?: 'primary' | 'secondary';\n  onMenuItemClick?: (item: MenuItemProps) => void;\n  activeItem?: string;\n}\n\nexport const KebabMenu: FC<KebabMenuProps> = ({ menuItems, onMenuItemClick, activeItem='', variant = 'primary', className = '', automationId = '' }) => {\n    const getIcon = () => {\n      // TODO: Use Icon component once SVG issue is resolved\n        switch(variant) {\n            case 'primary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            case 'secondary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              default:\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n        }\n    }\n  return <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`se-design-kebab-menu ${displayPopover ? 'bg-[var(--color-blue-100)]' : ''} hover:bg-[var(--color-blue-100)] rounded-[4px] transition-all duration-300 w-max`}>\n            {getIcon()}\n        </div>\n      )}\n      renderPopoverContents={({ closePopoverCb }) => (\n        <div className=\"min-w-[212px] px-1 py-2\">\n          {menuItems.map((item, index) => (\n            <div key={index} className='w-full text-left' onClick={() => {\n                if(onMenuItemClick && !item.isDisabled) {\n                    onMenuItemClick(item);\n                  }\n                  !item.isDisabled && closePopoverCb()}}>\n                <p className={`py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${activeItem.toLowerCase() === item.label.toLowerCase() ? 'bg-[var(--color-blue-100)]' : ''} ${item.isDisabled ? 'text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed' : ''}`}>{item.label}</p></div>\n          ))}\n        </div>\n      )}\n    />\n};\n"],"names":["KebabMenu","menuItems","onMenuItemClick","activeItem","variant","className","automationId","getIcon","React","createElement","xmlns","width","height","viewBox","fill","d","stroke","strokeLinecap","strokeLinejoin","Popover","position","renderPopoverSrcElement","displayPopover","renderPopoverContents","closePopoverCb","map","item","index","key","onClick","isDisabled","toLowerCase","label"],"mappings":"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"}

package/dist/index24.js

@@ -1,67 +1,22 @@
 import e from "react";
-import { Icon as h } from "./index4.js";
-import { Button as N } from "./index3.js";
 /* empty css         */
-const n = {
-  bannerCtn: "relative rounded-[12px] flex pr-3.5 cursor-pointer",
-  bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
-  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]",
-  bannerImageCtn: "w-[30%] flex mr-5 justify-end cursor-pointer",
-  bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1",
-  bannerButton: "self-start"
-}, B = (t) => {
+const p = (a) => {
   const {
-    bannerClassName: i,
-    bannerBgColor: m,
-    title: C,
-    description: b,
-    hasImage: a,
-    imagePosition: r = "right",
-    hasCloseIcon: p,
-    closeIconName: u,
-    onClose: d,
-    onBannerClick: o,
-    ctaText: l,
-    hasLinkCta: g,
-    onCtaClick: s,
-    hasButtonCta: x,
-    buttonType: f = "secondary"
-  } = t, c = () => a && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} banner-image-ctn min-h-full`,
-    onClick: o
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: t.bannerImage,
-    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
-  }));
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerCtn} ${i} banner-ctn`,
-    style: {
-      backgroundColor: m
-    }
-  }, r === "left" && c(), /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
-    onClick: o
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "banner-title"
-  }, C), /* @__PURE__ */ e.createElement("span", {
-    className: "banner-description"
-  }, b), g && /* @__PURE__ */ e.createElement("span", {
-    className: n.bannerLinkCta,
-    onClick: s
-  }, l), x && /* @__PURE__ */ e.createElement(N, {
-    type: f,
-    size: "sm",
-    label: l,
-    onClick: s,
-    customClassName: n.bannerButton
-  })), r === "right" && c(), /* @__PURE__ */ e.createElement("span", {
-    className: n.bannerCloseIconCtn,
-    onClick: d
-  }, p && /* @__PURE__ */ e.createElement(h, {
-    name: u
-  })));
+    noOfRows: n = 2,
+    noOfColumns: o = 4,
+    colSpan: r = [2, 0, 0]
+  } = a;
+  return [...Array(n)].map((m, l) => /* @__PURE__ */ e.createElement("tr", {
+    key: `tr-${l}`,
+    className: "se-design-table-content-loader"
+  }, [...Array(o)].map((c, t) => /* @__PURE__ */ e.createElement("td", {
+    colSpan: r[t],
+    key: `td-${t}`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "loading-animation"
+  })))));
 };
 export {
-  B as Banner
+  p as TableContentLoader
 };
 //# sourceMappingURL=index24.js.map

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  onCtaClick: () => void | (() => {});\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]',\n  bannerImageCtn: 'w-[30%] flex mr-5 justify-end cursor-pointer',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start'\n};\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    description,\n    hasImage,\n    imagePosition = 'right',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    ctaText,\n    hasLinkCta,\n    onCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary'\n  } = props;\n\n  const renderImage = () =>\n    hasImage && (\n      <div className={`${classNames.bannerImageCtn} banner-image-ctn min-h-full`} onClick={onBannerClick}>\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{ backgroundColor: bannerBgColor }}>\n      {imagePosition === 'left' && renderImage()}\n      <div\n        className={`${classNames.bannerContentCtn} ${hasImage ? 'w-[70%]' : 'w-[100%]'} banner-content-ctn`}\n        onClick={onBannerClick}\n      >\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        {hasLinkCta && (\n          <span className={classNames.bannerLinkCta} onClick={onCtaClick}>\n            {ctaText}\n          </span>\n        )}\n        {hasButtonCta && (\n          <Button\n            type={buttonType}\n            size=\"sm\"\n            label={ctaText}\n            onClick={onCtaClick}\n            customClassName={classNames.bannerButton}\n          />\n        )}\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName} />}\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","imagePosition","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","hasButtonCta","buttonType","renderImage","React","createElement","className","onClick","src","bannerImage","style","backgroundColor","type","size","label","customClassName","name"],"mappings":"AAyBA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,EAAA,IACXf,GAEEgB,IAAcA,MAClBX,KACEY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWI,cAAc;AAAA,IAAgCwB,SAASV;AAAAA,EAAAA,GACnFQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,KAAKrB,EAAMsB;AAAAA,IAAaH,WAAU;AAAA,EAAA,CAA4D,CAChG;AAIPF,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG3B,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAesB,OAAO;AAAA,MAAEC,iBAAiBtB;AAAAA,IAAAA;AAAAA,EAAc,GAC9GI,MAAkB,UAAUU,EAC7BC,GAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG3B,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAC9Ee,SAASV;AAAAA,EAAAA,GAETQ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBhB,GAAAA,CAAY,GAC5Cc,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,KAAsBf,CAAkB,GACvDQ,KACCK,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWG;AAAAA,IAAeyB,SAASP;AAAAA,KACjDF,CACG,GAEPG,KACCG,gBAAAA,EAAAC,cAAC3B,GAAM;AAAA,IACLkC,MAAMV;AAAAA,IACNW,MAAK;AAAA,IACLC,OAAOhB;AAAAA,IACPS,SAASP;AAAAA,IACTe,iBAAiBpC,EAAWM;AAAAA,EAAAA,CAC7B,CAEA,GACJQ,MAAkB,WAAWU,EAAY,GAC1CE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW3B,EAAWK;AAAAA,IAAoBuB,SAASX;AAAAA,EACtDF,GAAAA,KAAgBW,gBAAAA,EAAAA,cAAC5B,GAAI;AAAA,IAACuC,MAAMrB;AAAAA,EAAgB,CAAA,CACzC,CACH;AAET;"}
+{"version":3,"file":"index24.js","sources":["../src/components/TableContentLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface TableContentLoaderProps {\n  noOfRows?: number;\n  noOfColumns?: number;\n  colSpan?: number[];\n}\n\nexport const TableContentLoader: FC<TableContentLoaderProps> = (props) => {\n  const { noOfRows = 2, noOfColumns = 4, colSpan = [2, 0, 0] } = props;\n\n  return [...Array(noOfRows)].map((_, index) => (\n    <tr key={`tr-${index}`} className=\"se-design-table-content-loader\">\n      {[...Array(noOfColumns)].map((_, idx) => (\n        <td colSpan={colSpan[idx]} key={`td-${idx}`}>\n          <div className=\"loading-animation\"></div>\n        </td>\n      ))}\n    </tr>\n  ));\n};\n"],"names":["React__default","TableContentLoader","props","noOfRows","noOfColumns","colSpan","Array","map","_","index","createElement","key","className","idx","React"],"mappings":"AASO,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAmDC,CAAUA,MAAA;AAClE,QAAA;AAAA,IAAEC,UAAAA,IAAW;AAAA,IAAGC,aAAAA,IAAc;AAAA,IAAGC,SAAAA,IAAU,CAAC,GAAG,GAAG,CAAC;AAAA,EAAA,IAAMH;AAE/D,SAAO,CAAC,GAAGI,MAAMH,CAAQ,CAAC,EAAEI,IAAI,CAACC,GAAGC,MAClCC,gBAAAA,EAAAA,cAAA,MAAA;AAAA,IAAIC,KAAK,MAAMF,CAAK;AAAA,IAAIG,WAAU;AAAA,EAC/B,GAAA,CAAC,GAAGN,MAAMF,CAAW,CAAC,EAAEG,IAAI,CAACC,GAAGK,MAC/BC,gBAAAA,EAAAJ,cAAA,MAAA;AAAA,IAAIL,SAASA,EAAQQ,CAAG;AAAA,IAAGF,KAAK,MAAME,CAAG;AAAA,EAAA,GACvCH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,CAAyB,CACtC,CACL,CACC,CACL;AACH;"}

package/dist/index25.js

@@ -1,46 +1,49 @@
-import r from "react";
-import { Icon as h } from "./index4.js";
-const E = ({
-  currentPage: s,
-  itemsPerPage: l,
-  totalItems: n,
-  onPageChange: i
-}) => {
-  const o = Math.ceil(n / l), m = 1, d = o, f = (s - 1) * l + 1, p = Math.min(s * l, n), u = p < n, x = s > 1, y = () => {
-    const e = [], t = (a) => /* @__PURE__ */ r.createElement("span", {
-      key: a,
-      onClick: () => i(a),
-      className: `w-5 h-5 text-sm flex items-center justify-center rounded border ${s === a ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`
-    }, a), c = () => /* @__PURE__ */ r.createElement("span", {
-      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
-    }, "...");
-    if (s <= 3) {
-      for (let a = 1; a <= Math.min(3, o); a++)
-        e.push(t(a));
-      o > 3 && (e.push(c()), e.push(t(o)));
-    } else s >= o - 2 ? (e.push(t(m)), e.push(c()), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(m)), e.push(c()), e.push(t(s - 1)), e.push(t(s)), e.push(t(s + 1)), e.push(c()), e.push(t(d)));
-    return e;
+import a, { useEffect as o } from "react";
+import { Icon as v } from "./index4.js";
+/* empty css         */
+const N = (i) => {
+  const {
+    content: c,
+    className: n = "",
+    alignment: m,
+    noShadow: u,
+    position: l = "fxd",
+    isOpen: t,
+    displayCloseSidebar: b,
+    onClose: f,
+    onSidebarUnmount: r,
+    onPathChange: s,
+    style: y,
+    automationId: g,
+    currentPath: d = "",
+    closeSidebarIcon: h = "close"
+  } = i;
+  o(() => () => {
+    r && r();
+  }, []), o(() => (document.body.style.overflow = t ? "hidden" : "scroll", () => {
+    document.body.style.overflow = "auto";
+  }), [t]), o(() => {
+    s && s(d);
+  }, [d]);
+  const p = () => {
+    let e = "se-design-sidebar-overlay-container z-[1000]";
+    return e += n.length > 0 ? ` ${n}` : "", e += m === "left" ? " left-aligned" : " right-aligned", e += u ? " no-shadow" : "", e += l.length > 0 ? ` ${l}` : "", e += t ? " open-sidebar" : " closed-sidebar", e;
   };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: "flex items-center gap-1 font-normal"
-  }, /* @__PURE__ */ r.createElement("span", {
-    className: "text-sm text-[var(--color-gray-700)] mr-1"
-  }, "Showing ", f, "-", p, " of ", n), /* @__PURE__ */ r.createElement("span", {
-    onClick: () => x && i(s - 1),
-    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ r.createElement(h, {
-    name: "next",
-    className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
-  })), /* @__PURE__ */ r.createElement("div", {
-    className: "flex items-center gap-1"
-  }, y()), /* @__PURE__ */ r.createElement("span", {
-    onClick: () => u && i(s + 1),
-    className: "w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer"
-  }, /* @__PURE__ */ r.createElement(h, {
-    name: "next"
-  })));
+  return /* @__PURE__ */ a.createElement("div", {
+    className: p(),
+    style: y,
+    "data-automation-id": g
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "overlay-content"
+  }, b && /* @__PURE__ */ a.createElement("span", {
+    className: "overlay-close",
+    onClick: f,
+    "data-automation-id": "sidebar_overlay_close"
+  }, /* @__PURE__ */ a.createElement(v, {
+    name: h
+  })), c));
 };
 export {
-  E as Pagination
+  N as SidebarOverlay
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const renderPageNumbers = () => {\n    const pages = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      return (\n        <span\n          key={pageNum}\n          onClick={() => onPageChange(pageNum)}\n          className={`w-5 h-5 text-sm flex items-center justify-center rounded border ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = () => {\n      return (\n        <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n          ...\n        </span>\n      );\n    };\n\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis());\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis());\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <div className=\"flex items-center gap-1 font-normal\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\">\n        Showing {startItem}-{endItem} of {totalItems}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\n      >\n        <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n      </span>\n      {/* Render page numbers */}\n      <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n      <span\n        onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n        className=\"w-5 h-5 flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\"\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["Pagination","currentPage","itemsPerPage","totalItems","onPageChange","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","i","push","Icon","name"],"mappings":";;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAa,MAAM;AAChH,QAAMC,IAAaC,KAAKC,KAAKJ,IAAaD,CAAY,GAChDM,IAAY,GACZC,IAAWJ,GACXK,KAAaT,IAAc,KAAKC,IAAe,GAC/CS,IAAUL,KAAKM,IAAIX,IAAcC,GAAcC,CAAU,GACzDU,IAAcF,IAAUR,GACxBW,IAAcb,IAAc,GAE5Bc,IAAoBA,MAAM;AAC9B,UAAMC,IAAQ,CAAE,GAEVC,IAAmBA,CAACC,MAEtBC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEC,KAAKH;AAAAA,MACLI,SAASA,MAAMlB,EAAac,CAAO;AAAA,MACnCK,WAAW,mEAAmEtB,MAAgBiB,IAAU,8DAA8D,gEAAgE;AAAA,OAErOA,CACG,GAIJM,IAAiBA,MAEnBL,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMG,WAAU;AAAA,OAA8F,KAExG;AAIV,QAAItB,KAAe,GAAG;AACXwB,eAAAA,IAAI,GAAGA,KAAKnB,KAAKM,IAAI,GAAGP,CAAU,GAAGoB;AACtCC,QAAAA,EAAAA,KAAKT,EAAiBQ,CAAC,CAAC;AAGhC,MAAIpB,IAAa,MACTqB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC;AAAA,IACzC,MACF,CAAWJ,KAAeI,IAAa,KAC/BqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GAC3CW,EAAMU,KAAKT,EAAiBZ,IAAa,CAAC,CAAC,GACrCqB,EAAAA,KAAKT,EAAiBZ,CAAU,CAAC,MAEjCqB,EAAAA,KAAKT,EAAiBT,CAAS,CAAC,GAChCkB,EAAAA,KAAKF,GAAgB,GAC3BR,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKT,EAAiBhB,CAAW,CAAC,GACxCe,EAAMU,KAAKT,EAAiBhB,IAAc,CAAC,CAAC,GACtCyB,EAAAA,KAAKF,GAAgB,GACrBE,EAAAA,KAAKT,EAAiBR,CAAQ,CAAC;AAGhCO,WAAAA;AAAAA,EACT;AAGEG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,EAAA,GACbH,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMG,WAAU;AAAA,EAAA,GAA4C,YACjDb,GAAU,KAAEC,GAAQ,QAAKR,CAC9B,GACNiB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMR,KAAeV,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,IAAOL,WAAU;AAAA,EAAkE,CAAA,CAC1F,GAENJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKG,WAAU;AAAA,KAA2BR,EAAkB,CAAO,GACnEI,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEE,SAASA,MAAMT,KAAeT,EAAaH,IAAc,CAAC;AAAA,IAC1DsB,WAAU;AAAA,EAAA,GAEVH,gBAAAA,EAAAA,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,EAAQ,CAAA,CACf,CACH;AAET;"}
+{"version":3,"file":"index25.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  position?: 'abs' | 'fxd' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const { content, className = '', alignment, noShadow, position = 'fxd', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n  const getSidebarClassName = () => {\n    let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    return defaultClass;\n  };\n\n  return (\n    <div className={getSidebarClassName()} style={style} data-automation-id={automationId}>\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n            <Icon name={closeSidebarIcon} />\n          </span>\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","React","createElement","onClick","name"],"mappings":"AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAAOC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEpNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT;AAGEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,WAAWgB,EAAoB;AAAA,IAAGP,OAAAA;AAAAA,IAAc,sBAAoBC;AAAAA,EAAAA,GACvEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKpB,WAAU;AAAA,EACZK,GAAAA,KACCe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMpB,WAAU;AAAA,IAAgBqB,SAASf;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEc,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC0B,MAAMV;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}

package/dist/index26.js

@@ -1,102 +1,33 @@
-import e from "react";
-import { Button as N } from "./index3.js";
-import { Badge as I } from "./index7.js";
-import { Icon as d } from "./index4.js";
-/* empty css         */
-const t = {
-  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
-  widgetImageCtn: "cursor-pointer",
-  descriptionCtn: "p-4 flex flex-col",
-  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
-  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
-  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
-  widgetButtonCta: "self-start",
-  widgetBadge: "w-fit",
-  webinarInfoCtn: "flex flex-col gap-2",
-  webinarSpeaker: "text-[var(--color-gray-700)]",
-  webinarDate: "text-[var(--color-gray-700)]",
-  webinarDescriptionInfo: "flex gap-2",
-  webinarTimeInfo: "flex gap-2",
-  requestFeatureCtn: "flex gap-[12px]",
-  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
-  requestFeatureDescriptionCtn: "flex flex-col"
-}, B = ({
-  widgetClassName: g = "",
-  widgetType: a,
-  widgetTitle: r,
-  widgetDescription: l,
-  widgetImage: p,
-  hasImage: f = !1,
-  hasButtonCta: n = !1,
-  hasLinkCta: o = !1,
-  ctaText: i = "",
-  hasBadge: x = !1,
-  badgeText: u = "",
-  buttonBgColor: w = "secondary",
-  onCtaClick: b,
-  onWidgetClick: v,
-  webinarDateInfo: s,
-  webinarSpeaker: c
+import r, { useState as u, useEffect as a } from "react";
+const x = ({
+  defaultActiveTab: o,
+  tabs: c,
+  onTabChange: s
 }) => {
-  const C = x && /* @__PURE__ */ e.createElement(I, {
-    label: u,
-    className: t.widgetBadge,
-    bgColor: "var(--color-yellow-50)",
-    textColor: "var(--color-yellow-400)",
-    fontWeight: "normal"
-  }), m = (o || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, o && /* @__PURE__ */ e.createElement("span", {
-    className: t.widgetLinkCta
-  }, i), n && /* @__PURE__ */ e.createElement(N, {
-    type: w,
-    size: "md",
-    label: i,
-    customClassName: `${t.widgetButtonCta} mt-[4px]`,
-    onClick: b
-  })), E = f && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetImageCtn} widget-image-ctn`
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: p,
-    alt: "widget-image"
-  }));
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${g} widget-ctn`,
-    onClick: v
-  }, a !== "general" && E, /* @__PURE__ */ e.createElement("div", {
-    className: t.descriptionCtn
-  }, a !== "general" && C, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
-    className: t.webinarInfoCtn
-  }, c && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(d, {
-    name: "people",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarSpeaker
-  }, c)), s && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(d, {
-    name: "clock",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarDate
-  }, s))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureCtn
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureImageCtn
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureDescriptionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), m)) : m));
+  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;
+  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;
+    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"}`
+    }, e.label);
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs-content"
+  }, c.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))))));
 };
 export {
-  B as Widget,
-  B as default
+  x as Tabs
 };
 //# sourceMappingURL=index26.js.map