se-design 0.0.113 → 0.0.115

package/dist/index24.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index24.js","sources":["../src/components/KebabMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'components/Popover';\nimport { MenuItemProps } from 'components/MenuItem';\nimport { MenuList } from 'components/MenuList';\nimport { Icon } from 'components/Icon';\n\nexport interface KebabMenuProps {\n  className?: string;\n  automationId?: string;\n  menuItems: MenuItemProps[];\n  variant?: 'primary' | 'secondary' | '';\n}\n\nexport const KebabMenu: FC<KebabMenuProps> = ({ menuItems, variant = 'primary', className = '', automationId = '' }) => {\n  const getUpdatedMenuItems = (closePopoverCb: () => void) => {\n    return menuItems.map((item) => ({\n      ...item,\n      onClick: () => {\n        item.onClick && item.onClick(item);\n        closePopoverCb();\n      }\n    }))\n  }\n\n  const getKebabIconVariant = () => {\n    if(variant === 'secondary') {\n      return {fill: 'var(--color-blue-500)', stroke: 'var(--color-blue-500)'}\n    }\n    return {}\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            <Icon name=\"kebab-menu\" {...getKebabIconVariant()} />\n        </div>\n      )}\n      renderPopoverContents={({ closePopoverCb }) => (\n        <MenuList items={getUpdatedMenuItems(closePopoverCb)} />\n      )}\n    />\n  };\n"],"names":["KebabMenu","menuItems","variant","className","automationId","getUpdatedMenuItems","closePopoverCb","map","item","__spreadProps","__spreadValues","onClick","getKebabIconVariant","fill","stroke","React","createElement","Popover","position","renderPopoverSrcElement","displayPopover","Icon","_extends","name","renderPopoverContents","MenuList","items"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,IAAgCA,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAWC,SAAAA,IAAU;AAAA,EAAWC,WAAAA,IAAY;AAAA,EAAIC,cAAAA,IAAe;AAAG,MAAM;AAChHC,QAAAA,IAAsBA,CAACC,MACpBL,EAAUM,IAAKC,CAAUA,MAAAC,EAAAC,EAAA,IAC3BF,IAD2B;AAAA,IAE9BG,SAASA,MAAM;AACRA,MAAAA,EAAAA,WAAWH,EAAKG,QAAQH,CAAI,GAClBF,EAAA;AAAA,IAAA;AAAA,EACjB,EACA,GAGEM,IAAsBA,MACvBV,MAAY,cACN;AAAA,IAACW,MAAM;AAAA,IAAyBC,QAAQ;AAAA,EAAuB,IAEjE,CAAC;AAGHC,SAAAA,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACXd,WAAAA;AAAAA,IACAe,UAAS;AAAA,IACTd,cAAAA;AAAAA,IACAe,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAC1BJ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKb,WAAW,wBAAwBiB,IAAiB,+BAA+B,EAAE;AAAA,IACtFL,GAAAA,gBAAAA,EAAAC,cAACK,GAAIC,EAAA;AAAA,MAACC,MAAK;AAAA,IAAA,GAAiBX,EAAqB,CAAA,CAAG,CACnD;AAAA,IAEPY,uBAAuBA,CAAC;AAAA,MAAElB,gBAAAA;AAAAA,IAAAA,MACxBU,gBAAAA,EAAAA,cAACS,GAAQ;AAAA,MAACC,OAAOrB,EAAoBC,CAAc;AAAA,IAAI,CAAA;AAAA,EAAA,CAE1D;AACH;"}

package/dist/index25.js

@@ -1,49 +1,22 @@
-import a, { useEffect as o } from "react";
-import { Icon as v } from "./index4.js";
+import e from "react";
 /* empty css         */
-const N = (i) => {
+const p = (a) => {
   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__ */ 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));
+    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 {
-  N as SidebarOverlay
+  p as TableContentLoader
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

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

@@ -1,65 +1,49 @@
-import r, { useState as g, useEffect as E } from "react";
-import { Icon as k } from "./index4.js";
-import { Dropdown as N } from "./index22.js";
+import a, { useEffect as o } from "react";
+import { Icon as v } from "./index5.js";
 /* empty css         */
-const b = ({
-  defaultActiveTab: c,
-  tabs: o,
-  onTabChange: n,
-  primaryTabCount: a = 0
-}) => {
-  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 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: () => !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);
-  }), 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"
-  }, o.map((e) => /* @__PURE__ */ r.createElement("div", {
-    key: e.id,
-    className: `tab-content ${f(e, l) ? "block" : "hidden"}`
-  }, f(e, l) && (e == null ? void 0 : e.renderTabContent) && (e == null ? void 0 : e.renderTabContent(e))))));
+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__ */ 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 {
-  b as Tabs
+  N as SidebarOverlay
 };
 //# 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';\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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"}
+{"version":3,"file":"index26.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/index27.js

@@ -1,79 +1,65 @@
-import e from "react";
-import { Icon as I } from "./index4.js";
-import { Button as i } from "./index3.js";
+import r, { useState as g, useEffect as E } from "react";
+import { Icon as k } from "./index5.js";
+import { Dropdown as N } from "./index23.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"
-}, T = (t) => {
-  const {
-    bannerClassName: m,
-    bannerBgColor: C,
-    title: p,
-    description: b,
-    hasImage: a,
-    imagePosition: r = "right",
-    hasCloseIcon: d,
-    closeIconName: u,
-    onClose: g,
-    onBannerClick: o,
-    ctaText: l,
-    hasLinkCta: x,
-    onCtaClick: c,
-    onSecondaryCtaClick: f,
-    hasButtonCta: y,
-    buttonType: h = "secondary",
-    hasSecondaryButtonCta: k = !1,
-    secondaryButtonType: E = "secondary",
-    secondaryCtaText: B
-  } = t, s = () => 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} ${m} banner-ctn`,
-    style: {
-      backgroundColor: C
-    }
-  }, r === "left" && s(), /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
-    onClick: o
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: "banner-title"
-  }, p), /* @__PURE__ */ e.createElement("span", {
-    className: "banner-description"
-  }, b), /* @__PURE__ */ e.createElement("div", {
-    className: "flex gap-3"
-  }, x && /* @__PURE__ */ e.createElement("span", {
-    className: n.bannerLinkCta,
-    onClick: c
-  }, l), y && /* @__PURE__ */ e.createElement(i, {
-    type: h,
-    size: "sm",
-    label: l,
-    onClick: c,
-    className: n == null ? void 0 : n.bannerButton
-  }), k && /* @__PURE__ */ e.createElement(i, {
-    type: E,
-    size: "sm",
-    label: B,
-    onClick: f,
-    className: n == null ? void 0 : n.secondaryBannerButton
-  }))), r === "right" && s(), /* @__PURE__ */ e.createElement("span", {
-    className: n.bannerCloseIconCtn,
-    onClick: g
-  }, d && /* @__PURE__ */ e.createElement(I, {
-    name: u
-  })));
+const b = ({
+  defaultActiveTab: c,
+  tabs: o,
+  onTabChange: n,
+  primaryTabCount: a = 0
+}) => {
+  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 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: () => !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);
+  }), 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"
+  }, o.map((e) => /* @__PURE__ */ r.createElement("div", {
+    key: e.id,
+    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 {
-  T as Banner
+  b as Tabs
 };
 //# sourceMappingURL=index27.js.map

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.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  hasSecondaryButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  secondaryButtonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  secondaryCtaText: string | '';\n  onCtaClick: () => void | (() => {});\n  onSecondaryCtaClick: () => 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    onSecondaryCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary',\n    hasSecondaryButtonCta = false,\n    secondaryButtonType = 'secondary',\n    secondaryCtaText\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        <div className=\"flex gap-3\">\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              className={classNames?.bannerButton}\n            />\n          )}\n          {hasSecondaryButtonCta && (\n            <Button\n              type={secondaryButtonType}\n              size=\"sm\"\n              label={secondaryCtaText}\n              onClick={onSecondaryCtaClick}\n              className={classNames?.secondaryBannerButton}\n            />\n          )}\n        </div>\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","onSecondaryCtaClick","hasButtonCta","buttonType","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","renderImage","React","createElement","className","onClick","src","bannerImage","style","backgroundColor","type","size","label","secondaryBannerButton","name"],"mappings":"AA6BA,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,qBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,IACbC,uBAAAA,IAAwB;AAAA,IACxBC,qBAAAA,IAAsB;AAAA,IACtBC,kBAAAA;AAAAA,EAAAA,IACEnB,GAEEoB,IAAcA,MAClBf,KACEgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG/B,EAAWI,cAAc;AAAA,IAAgC4B,SAASd;AAAAA,EAAAA,GACnFY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,KAAKzB,EAAM0B;AAAAA,IAAaH,WAAU;AAAA,EAAA,CAA4D,CAChG;AAIPF,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG/B,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAe0B,OAAO;AAAA,MAAEC,iBAAiB1B;AAAAA,IAAAA;AAAAA,EAAc,GAC9GI,MAAkB,UAAUc,EAC7BC,GAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG/B,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAC9EmB,SAASd;AAAAA,EAAAA,GAETY,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBpB,GAAAA,CAAY,GAC5CkB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAsBnB,GAAAA,CAAkB,GACxDiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZX,GAAAA,KACCU,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW/B,EAAWG;AAAAA,IAAe6B,SAASX;AAAAA,KACjDF,CACG,GAEPI,KACCM,gBAAAA,EAAAC,cAAC/B,GAAM;AAAA,IACLsC,MAAMb;AAAAA,IACNc,MAAK;AAAA,IACLC,OAAOpB;AAAAA,IACPa,SAASX;AAAAA,IACTU,WAAW/B,KAAAA,gBAAAA,EAAYM;AAAAA,EACxB,CAAA,GAEFmB,KACCI,gBAAAA,EAAAC,cAAC/B,GAAM;AAAA,IACLsC,MAAMX;AAAAA,IACNY,MAAK;AAAA,IACLC,OAAOZ;AAAAA,IACPK,SAASV;AAAAA,IACTS,WAAW/B,KAAAA,gBAAAA,EAAYwC;AAAAA,EAAAA,CACxB,CAEA,CACF,GACJ1B,MAAkB,WAAWc,EAAY,GAC1CE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW/B,EAAWK;AAAAA,IAAoB2B,SAASf;AAAAA,EACtDF,GAAAA,KAAgBe,gBAAAA,EAAAA,cAAChC,GAAI;AAAA,IAAC2C,MAAMzB;AAAAA,EAAgB,CAAA,CACzC,CACH;AAET;"}
+{"version":3,"file":"index27.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/index28.js

@@ -1,46 +1,79 @@
-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;
-  };
-  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"
+import e from "react";
+import { Icon as I } from "./index5.js";
+import { Button as i } 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"
+}, T = (t) => {
+  const {
+    bannerClassName: m,
+    bannerBgColor: C,
+    title: p,
+    description: b,
+    hasImage: a,
+    imagePosition: r = "right",
+    hasCloseIcon: d,
+    closeIconName: u,
+    onClose: g,
+    onBannerClick: o,
+    ctaText: l,
+    hasLinkCta: x,
+    onCtaClick: c,
+    onSecondaryCtaClick: f,
+    hasButtonCta: y,
+    buttonType: h = "secondary",
+    hasSecondaryButtonCta: k = !1,
+    secondaryButtonType: E = "secondary",
+    secondaryCtaText: B
+  } = t, s = () => 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} ${m} banner-ctn`,
+    style: {
+      backgroundColor: C
+    }
+  }, r === "left" && s(), /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
+    onClick: o
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "banner-title"
+  }, p), /* @__PURE__ */ e.createElement("span", {
+    className: "banner-description"
+  }, b), /* @__PURE__ */ e.createElement("div", {
+    className: "flex gap-3"
+  }, x && /* @__PURE__ */ e.createElement("span", {
+    className: n.bannerLinkCta,
+    onClick: c
+  }, l), y && /* @__PURE__ */ e.createElement(i, {
+    type: h,
+    size: "sm",
+    label: l,
+    onClick: c,
+    className: n == null ? void 0 : n.bannerButton
+  }), k && /* @__PURE__ */ e.createElement(i, {
+    type: E,
+    size: "sm",
+    label: B,
+    onClick: f,
+    className: n == null ? void 0 : n.secondaryBannerButton
+  }))), r === "right" && s(), /* @__PURE__ */ e.createElement("span", {
+    className: n.bannerCloseIconCtn,
+    onClick: g
+  }, d && /* @__PURE__ */ e.createElement(I, {
+    name: u
   })));
 };
 export {
-  E as Pagination
+  T as Banner
 };
 //# sourceMappingURL=index28.js.map