se-design 0.0.98 → 0.0.101

package/dist/index12.js

@@ -1,22 +1,22 @@
 import o from "react";
-import { MenuItem as m } from "./index11.js";
+import { MenuItem as s } from "./index11.js";
 function a() {
-  return a = Object.assign ? Object.assign.bind() : function(t) {
+  return a = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
       var r = arguments[e];
-      for (var n in r) ({}).hasOwnProperty.call(r, n) && (t[n] = r[n]);
+      for (var t in r) ({}).hasOwnProperty.call(r, t) && (n[t] = r[t]);
     }
-    return t;
+    return n;
   }, a.apply(null, arguments);
 }
-const c = ({
-  items: t
+const i = ({
+  items: n
 }) => /* @__PURE__ */ o.createElement("div", {
-  className: "border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2"
-}, t.map((e, r) => /* @__PURE__ */ o.createElement(m, a({}, e, {
+  className: "se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2"
+}, n.map((e, r) => /* @__PURE__ */ o.createElement(s, a({}, e, {
   key: `item-${r}`
 }))));
 export {
-  c as MenuList
+  i as MenuList
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n};\n\nexport const MenuList: FC<MenuListProps> = ({ items }) => {\n  return (\n    <div className=\"border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2\">\n      {items.map((item, i) => (\n        <MenuItem {...item} key={`item-${i}`} />\n      ))}\n    </div>\n  );\n};\n"],"names":["MenuList","items","React","createElement","className","map","item","i","MenuItem","_extends","key"],"mappings":";;;;;;;;;;;AAOO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,OAAAA;AAAM,MAEhDC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKC,WAAU;AACZH,GAAAA,EAAMI,IAAI,CAACC,GAAMC,MAChBJ,gBAAAA,EAAAA,cAACK,GAAQC,MAAKH,GAAI;AAAA,EAAEI,KAAK,QAAQH,CAAC;AAAK,CAAA,CAAA,CACxC,CACE;"}
+{"version":3,"file":"index12.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n};\n\nexport const MenuList: FC<MenuListProps> = ({ items }) => {\n  return (\n    <div className=\"se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2\">\n      {items.map((item, i) => (\n        <MenuItem {...item} key={`item-${i}`} />\n      ))}\n    </div>\n  );\n};\n"],"names":["MenuList","items","React","createElement","className","map","item","i","MenuItem","_extends","key"],"mappings":";;;;;;;;;;;AAOO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,OAAAA;AAAM,MAEhDC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKC,WAAU;AACZH,GAAAA,EAAMI,IAAI,CAACC,GAAMC,MAChBJ,gBAAAA,EAAAA,cAACK,GAAQC,MAAKH,GAAI;AAAA,EAAEI,KAAK,QAAQH,CAAC;AAAK,CAAA,CAAA,CACxC,CACE;"}

package/dist/index13.js

@@ -19,14 +19,14 @@ var P = (e, o) => {
   return t;
 };
 import h, { forwardRef as j, useState as D, useRef as w, useEffect as $, useImperativeHandle as z } from "react";
-function s() {
-  return s = Object.assign ? Object.assign.bind() : function(e) {
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var t = arguments[o];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
     }
     return e;
-  }, s.apply(null, arguments);
+  }, c.apply(null, arguments);
 }
 const q = /* @__PURE__ */ j((H, x) => {
   var u = H, {
@@ -48,21 +48,21 @@ const q = /* @__PURE__ */ j((H, x) => {
     "renderPopoverSrcElement",
     "onPopoverToggle"
   ]);
-  const [n, c] = D(!1), p = w(null), S = w(null);
+  const [n, s] = D(!1), f = w(null), S = w(null);
   $(() => {
     if (i && i(n), n)
-      return document.body.addEventListener("click", f), () => document.body.removeEventListener("click", f);
+      return document.body.addEventListener("click", p), () => document.body.removeEventListener("click", p);
   }, [n]);
-  const f = (a) => {
-    const m = p.current;
+  const p = (a) => {
+    const m = f.current;
     if (!m) return;
     const O = a.target;
-    m.contains(O) || c(!1);
+    m.contains(O) || s(!1);
   }, d = () => {
-    c((a) => !a);
+    s((a) => !a);
   };
   z(x, () => ({
-    togglePopup: d
+    togglePopover: d
   }), []);
   const L = {
     "bottom-left": {
@@ -76,9 +76,9 @@ const q = /* @__PURE__ */ j((H, x) => {
       transform: "translateX(-50%)"
     }
   };
-  return /* @__PURE__ */ h.createElement("div", s({
-    className: "popover-wrapper cursor-pointer relative" + (e.length > 0 ? ` ${e}` : "") + (n ? " open" : ""),
-    ref: p,
+  return /* @__PURE__ */ h.createElement("div", c({
+    className: "se-design-popover-wrapper cursor-pointer relative" + (e.length > 0 ? ` ${e}` : "") + (n ? " open" : ""),
+    ref: f,
     onClick: d,
     "data-automation-id": o
   }, R), E({
@@ -94,7 +94,7 @@ const q = /* @__PURE__ */ j((H, x) => {
     ref: S,
     "data-automation-id": r
   }, k({
-    closePopoverCb: () => c(!1)
+    closePopoverCb: () => s(!1)
   })));
 });
 export {

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\n\n\nexport interface PopoverHandle {\n  togglePopup: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean }) => ReactNode;\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\";\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(({ \n  className = '',\n  automationId = '',\n  position = 'bottom-center',\n  popoverContentAutomationId = '',\n  contentWidth = 'max',\n  renderPopoverContents,\n  renderPopoverSrcElement,\n  onPopoverToggle,\n  ...props\n}, ref: ForwardedRef<PopoverHandle>) => {\n  const [displayPopover, setDisplayPopover] = useState(false);\n  const srcElementRef = useRef<HTMLDivElement>(null);\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if(onPopoverToggle) {\n      onPopoverToggle(displayPopover);\n    }\n    if (displayPopover) {\n      document.body.addEventListener('click', clickListener);\n      return () => document.body.removeEventListener('click', clickListener);\n    }\n  }, [displayPopover]);\n  \n  const clickListener = (event: MouseEvent) => {\n    const currentDropRef = srcElementRef.current;\n    if (!currentDropRef) return;\n\n    const target = event.target as Node;\n    const isSourcePopover = currentDropRef.contains(target);\n    // if clicked source is parent or the popover-content, do not toggle dropdown.\n    if (!isSourcePopover) {\n      setDisplayPopover(false);\n    }\n  };\n\n  const togglePopup = () => {\n    setDisplayPopover((displayPopover) => !displayPopover);\n  };\n\n  useImperativeHandle(ref, () => ({ togglePopup }), []);\n\n  const popoverContentStyle =  {\n    'bottom-left': {left: '0'},\n    'bottom-right': {right: '0'},\n    'bottom-center': {left: '50%', transform: 'translateX(-50%)'}  \n  }\n\n  return (\n    <div\n      className={'popover-wrapper cursor-pointer relative' + (className.length > 0 ? ` ${className}` : '') + (displayPopover ? ' open' : '')}\n      ref={srcElementRef}\n      onClick={togglePopup}\n      data-automation-id={automationId}\n      {...props}\n    >\n      {renderPopoverSrcElement({ displayPopover })}\n      {displayPopover && (\n        <div\n          className={`popover-content absolute shadow-md top-full border rounded-md z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n          style={{\n            borderColor: 'var(--color-gray-200)',\n            color: 'var(--color-gray-900)',\n            backgroundColor: 'var(--color-white)',\n            ...popoverContentStyle[position]\n          }}\n          onClick={(e) => e.stopPropagation()}\n          ref={popoverContentRef}\n          data-automation-id={popoverContentAutomationId}\n        >\n          {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["Popover","_a","ref","_b","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","props","displayPopover","setDisplayPopover","useState","srcElementRef","useRef","popoverContentRef","useEffect","body","addEventListener","clickListener","document","removeEventListener","event","currentDropRef","current","target","contains","togglePopup","useImperativeHandle","popoverContentStyle","left","right","transform","React","createElement","_extends","length","onClick","style","__spreadValues","borderColor","color","backgroundColor","e","stopPropagation","closePopoverCb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBaA,MAAAA,sBAAkD,CAACC,GAU7DC,MAAqC;AAVwB,MAAAC,IAAAF,GAC9DG;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,4BAAAA,IAA6B;AAAA,IAC7BC,cAAAA,IAAe;AAAA,IACfC,uBAAAA;AAAAA,IACAC,yBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,MAR8DR,GAS3DS,IAAAA,EAT2DT,GAS3DS;AAAAA,IARHR;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAM,CAACE,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpDC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAoBD,EAAuB,IAAI;AAErDE,EAAAA,EAAU,MAAM;AAId,QAHGR,KACDA,EAAgBE,CAAc,GAE5BA;AACOO,sBAAAA,KAAKC,iBAAiB,SAASC,CAAa,GAC9C,MAAMC,SAASH,KAAKI,oBAAoB,SAASF,CAAa;AAAA,EACvE,GACC,CAACT,CAAc,CAAC;AAEbS,QAAAA,IAAgBA,CAACG,MAAsB;AAC3C,UAAMC,IAAiBV,EAAcW;AACrC,QAAI,CAACD,EAAgB;AAErB,UAAME,IAASH,EAAMG;AAGrB,IAFwBF,EAAeG,SAASD,CAAM,KAGpDd,EAAkB,EAAK;AAAA,EAE3B,GAEMgB,IAAcA,MAAM;AACLjB,IAAAA,EAAAA,CAAAA,MAAmB,CAACA,CAAc;AAAA,EACvD;AAEAkB,EAAAA,EAAoB7B,GAAK,OAAO;AAAA,IAAE4B,aAAAA;AAAAA,EAAY,IAAI,CAAA,CAAE;AAEpD,QAAME,IAAuB;AAAA,IAC3B,eAAe;AAAA,MAACC,MAAM;AAAA,IAAG;AAAA,IACzB,gBAAgB;AAAA,MAACC,OAAO;AAAA,IAAG;AAAA,IAC3B,iBAAiB;AAAA,MAACD,MAAM;AAAA,MAAOE,WAAW;AAAA,IAAA;AAAA,EAC5C;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACElC,WAAW,6CAA6CA,EAAUmC,SAAS,IAAI,IAAInC,CAAS,KAAK,OAAOS,IAAiB,UAAU;AAAA,IACnIX,KAAKc;AAAAA,IACLwB,SAASV;AAAAA,IACT,sBAAoBzB;AAAAA,EAAAA,GAChBO,CAAK,GAERF,EAAwB;AAAA,IAAEG,gBAAAA;AAAAA,EAAgB,CAAA,GAC1CA,KACCuB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjC,WAAW,0EAA0EI,KAAgB,SAAS,WAAW,OAAO;AAAA,IAChIiC,OAAOC,EAAA;AAAA,MACLC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,OACdb,EAAoB1B,CAAQ;AAAA,IAEjCkC,SAAUM,CAAMA,MAAAA,EAAEC,gBAAgB;AAAA,IAClC7C,KAAKgB;AAAAA,IACL,sBAAoBX;AAAAA,KAEnBE,EAAsB;AAAA,IAAEuC,gBAAgBA,MAAMlC,EAAkB,EAAK;AAAA,EAAG,CAAA,CACtE,CAEJ;AAET,CAAC;"}
+{"version":3,"file":"index13.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\n\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean }) => ReactNode;\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\";\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(({ \n  className = '',\n  automationId = '',\n  position = 'bottom-center',\n  popoverContentAutomationId = '',\n  contentWidth = 'max',\n  renderPopoverContents,\n  renderPopoverSrcElement,\n  onPopoverToggle,\n  ...props\n}, ref: ForwardedRef<PopoverHandle>) => {\n  const [displayPopover, setDisplayPopover] = useState(false);\n  const srcElementRef = useRef<HTMLDivElement>(null);\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if(onPopoverToggle) {\n      onPopoverToggle(displayPopover);\n    }\n    if (displayPopover) {\n      document.body.addEventListener('click', clickListener);\n      return () => document.body.removeEventListener('click', clickListener);\n    }\n  }, [displayPopover]);\n  \n  const clickListener = (event: MouseEvent) => {\n    const currentDropRef = srcElementRef.current;\n    if (!currentDropRef) return;\n\n    const target = event.target as Node;\n    const isSourcePopover = currentDropRef.contains(target);\n    // if clicked source is parent or the popover-content, do not toggle dropdown.\n    if (!isSourcePopover) {\n      setDisplayPopover(false);\n    }\n  };\n\n  const togglePopover = () => {\n    setDisplayPopover((displayPopover) => !displayPopover);\n  };\n\n  useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n  const popoverContentStyle =  {\n    'bottom-left': {left: '0'},\n    'bottom-right': {right: '0'},\n    'bottom-center': {left: '50%', transform: 'translateX(-50%)'}  \n  }\n\n  return (\n    <div\n      className={'se-design-popover-wrapper cursor-pointer relative' + (className.length > 0 ? ` ${className}` : '') + (displayPopover ? ' open' : '')}\n      ref={srcElementRef}\n      onClick={togglePopover}\n      data-automation-id={automationId}\n      {...props}\n    >\n      {renderPopoverSrcElement({ displayPopover })}\n      {displayPopover && (\n        <div\n          className={`popover-content absolute shadow-md top-full border rounded-md z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n          style={{\n            borderColor: 'var(--color-gray-200)',\n            color: 'var(--color-gray-900)',\n            backgroundColor: 'var(--color-white)',\n            ...popoverContentStyle[position]\n          }}\n          onClick={(e) => e.stopPropagation()}\n          ref={popoverContentRef}\n          data-automation-id={popoverContentAutomationId}\n        >\n          {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["Popover","_a","ref","_b","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","props","displayPopover","setDisplayPopover","useState","srcElementRef","useRef","popoverContentRef","useEffect","body","addEventListener","clickListener","document","removeEventListener","event","currentDropRef","current","target","contains","togglePopover","useImperativeHandle","popoverContentStyle","left","right","transform","React","createElement","_extends","length","onClick","style","__spreadValues","borderColor","color","backgroundColor","e","stopPropagation","closePopoverCb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBaA,MAAAA,sBAAkD,CAACC,GAU7DC,MAAqC;AAVwB,MAAAC,IAAAF,GAC9DG;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,4BAAAA,IAA6B;AAAA,IAC7BC,cAAAA,IAAe;AAAA,IACfC,uBAAAA;AAAAA,IACAC,yBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,MAR8DR,GAS3DS,IAAAA,EAT2DT,GAS3DS;AAAAA,IARHR;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAM,CAACE,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpDC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAoBD,EAAuB,IAAI;AAErDE,EAAAA,EAAU,MAAM;AAId,QAHGR,KACDA,EAAgBE,CAAc,GAE5BA;AACOO,sBAAAA,KAAKC,iBAAiB,SAASC,CAAa,GAC9C,MAAMC,SAASH,KAAKI,oBAAoB,SAASF,CAAa;AAAA,EACvE,GACC,CAACT,CAAc,CAAC;AAEbS,QAAAA,IAAgBA,CAACG,MAAsB;AAC3C,UAAMC,IAAiBV,EAAcW;AACrC,QAAI,CAACD,EAAgB;AAErB,UAAME,IAASH,EAAMG;AAGrB,IAFwBF,EAAeG,SAASD,CAAM,KAGpDd,EAAkB,EAAK;AAAA,EAE3B,GAEMgB,IAAgBA,MAAM;AACPjB,IAAAA,EAAAA,CAAAA,MAAmB,CAACA,CAAc;AAAA,EACvD;AAEAkB,EAAAA,EAAoB7B,GAAK,OAAO;AAAA,IAAE4B,eAAAA;AAAAA,EAAc,IAAI,CAAA,CAAE;AAEtD,QAAME,IAAuB;AAAA,IAC3B,eAAe;AAAA,MAACC,MAAM;AAAA,IAAG;AAAA,IACzB,gBAAgB;AAAA,MAACC,OAAO;AAAA,IAAG;AAAA,IAC3B,iBAAiB;AAAA,MAACD,MAAM;AAAA,MAAOE,WAAW;AAAA,IAAA;AAAA,EAC5C;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACElC,WAAW,uDAAuDA,EAAUmC,SAAS,IAAI,IAAInC,CAAS,KAAK,OAAOS,IAAiB,UAAU;AAAA,IAC7IX,KAAKc;AAAAA,IACLwB,SAASV;AAAAA,IACT,sBAAoBzB;AAAAA,EAAAA,GAChBO,CAAK,GAERF,EAAwB;AAAA,IAAEG,gBAAAA;AAAAA,EAAgB,CAAA,GAC1CA,KACCuB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjC,WAAW,0EAA0EI,KAAgB,SAAS,WAAW,OAAO;AAAA,IAChIiC,OAAOC,EAAA;AAAA,MACLC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,OACdb,EAAoB1B,CAAQ;AAAA,IAEjCkC,SAAUM,CAAMA,MAAAA,EAAEC,gBAAgB;AAAA,IAClC7C,KAAKgB;AAAAA,IACL,sBAAoBX;AAAAA,KAEnBE,EAAsB;AAAA,IAAEuC,gBAAgBA,MAAMlC,EAAkB,EAAK;AAAA,EAAG,CAAA,CACtE,CAEJ;AAET,CAAC;"}

package/dist/index14.js

@@ -1,28 +1,30 @@
 var c = Object.getOwnPropertySymbols;
-var n = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
-var f = (t, a) => {
-  var m = {};
+var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var d = (t, m) => {
+  var a = {};
   for (var e in t)
-    n.call(t, e) && a.indexOf(e) < 0 && (m[e] = t[e]);
+    f.call(t, e) && m.indexOf(e) < 0 && (a[e] = t[e]);
   if (t != null && c)
     for (var e of c(t))
-      a.indexOf(e) < 0 && u.call(t, e) && (m[e] = t[e]);
-  return m;
+      m.indexOf(e) < 0 && u.call(t, e) && (a[e] = t[e]);
+  return a;
 };
 import l from "react";
-const x = (d) => {
-  var r = d, {
+const x = (g) => {
+  var n = g, {
     leftContainer: t,
-    centerContainer: a,
-    rightContainer: m
-  } = r, e = f(r, [
+    centerContainer: m,
+    rightContainer: a,
+    className: e
+  } = n, r = d(n, [
     "leftContainer",
     "centerContainer",
-    "rightContainer"
+    "rightContainer",
+    "className"
   ]);
   return /* @__PURE__ */ l.createElement("header", {
-    className: `sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(e == null ? void 0 : e.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
-  }, t && /* @__PURE__ */ l.createElement(l.Fragment, null, t), a && /* @__PURE__ */ l.createElement(l.Fragment, null, a), m && /* @__PURE__ */ l.createElement(l.Fragment, null, m));
+    className: `se-design-header ${e} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(r == null ? void 0 : r.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
+  }, t && /* @__PURE__ */ l.createElement(l.Fragment, null, t), m && /* @__PURE__ */ l.createElement(l.Fragment, null, m), a && /* @__PURE__ */ l.createElement(l.Fragment, null, a));
 };
 export {
   x as Header

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  ...props\n}) => {\n  return (\n    <header className={`sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","_a","_b","leftContainer","centerContainer","rightContainer","props","React","createElement","className","type","Fragment"],"mappings":";;;;;;;;;;;;AASO,MAAMA,IAA0BA,CAACC,MAKlC;AALkC,MAAAC,IAAAD,GACtCE;AAAAA,mBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,MAHsCH,GAInCI,IAAAA,EAJmCJ,GAInCI;AAAAA,IAHHH;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAIEE,SAAAA,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQC,WAAW,yHACjBH,KAAAA,gBAAAA,EAAOI,UAAS,UAAU,+BAA+B,EAAE;AAAA,EAC1D,GACAP,KAAiBI,gBAAAA,EAAAC,cAAAD,EAAAI,UAAA,MAAGR,CAAgB,GACpCC,KAAmBI,gBAAAA,EAAAA,cAAAD,EAAAI,UAAGP,MAAAA,CAAkB,GACxCC,KAAkBE,gBAAAA,EAAAC,cAAAD,EAAAI,UAAGN,MAAAA,CAAiB,CACjC;AAEZ;"}
+{"version":3,"file":"index14.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n  className?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  className,\n  ...props\n}) => {\n  return (\n    <header className={`se-design-header ${className} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","_a","_b","leftContainer","centerContainer","rightContainer","className","props","React","createElement","type","Fragment"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAA0BA,CAACC,MAMlC;AANkC,MAAAC,IAAAD,GACtCE;AAAAA,mBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,WAAAA;AAAAA,MAJsCJ,GAKnCK,IAAAA,EALmCL,GAKnCK;AAAAA,IAJHJ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAIEE,SAAAA,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQH,WAAW,oBAAoBA,CAAS,0HAC9CC,KAAAA,gBAAAA,EAAOG,UAAS,UAAU,+BAA+B,EAAE;AAAA,EAC1D,GACAP,KAAiBK,gBAAAA,EAAAC,cAAAD,EAAAG,UAAA,MAAGR,CAAgB,GACpCC,KAAmBK,gBAAAA,EAAAA,cAAAD,EAAAG,UAAGP,MAAAA,CAAkB,GACxCC,KAAkBG,gBAAAA,EAAAC,cAAAD,EAAAG,UAAGN,MAAAA,CAAiB,CACjC;AAEZ;"}

package/dist/index15.js

@@ -1,70 +1,30 @@
 import e from "react";
-import { Popover as c } from "./index13.js";
-import { MenuItem as p } from "./index11.js";
-function s() {
-  return s = Object.assign ? Object.assign.bind() : function(a) {
-    for (var t = 1; t < arguments.length; t++) {
-      var r = arguments[t];
-      for (var n in r) ({}).hasOwnProperty.call(r, n) && (a[n] = r[n]);
-    }
-    return a;
-  }, s.apply(null, arguments);
-}
-const k = ({
-  menuItems: a,
-  className: t = "",
-  automationId: r = "",
-  popoverContentAutomationId: n = "",
-  onMenuItemClick: l
-}) => {
-  const m = (o, i) => {
-    l && l(o), i();
-  };
-  return /* @__PURE__ */ e.createElement(c, {
-    className: t,
-    position: "bottom-left",
-    automationId: r,
-    popoverContentAutomationId: n,
-    renderPopoverSrcElement: ({
-      displayPopover: o
-    }) => /* @__PURE__ */ e.createElement("div", {
-      className: `${o ? "bg-[rgba(0,0,0,0.20)]" : ""} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`
-    }, /* @__PURE__ */ e.createElement("svg", {
-      width: "28",
-      height: "28",
-      viewBox: "0 0 28 28",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /* @__PURE__ */ e.createElement("path", {
-      d: "M6 8.25H22",
-      stroke: "white",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /* @__PURE__ */ e.createElement("path", {
-      d: "M6 14H22",
-      stroke: "white",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /* @__PURE__ */ e.createElement("path", {
-      d: "M6 19.75H22",
-      stroke: "white",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }))),
-    renderPopoverContents: ({
-      closePopoverCb: o
-    }) => /* @__PURE__ */ e.createElement("div", {
-      className: "min-w-[212px]"
-    }, a.map((i, d) => /* @__PURE__ */ e.createElement(p, s({}, i, {
-      key: `item-${d}`,
-      onClick: () => m(i, o)
-    }))))
-  });
-};
+import { Popover as m } from "./index13.js";
+import { Icon as c } from "./index4.js";
+const d = ({
+  className: o = "",
+  automationId: n = "",
+  popoverContentAutomationId: a = "",
+  menuContent: t
+}) => /* @__PURE__ */ e.createElement(m, {
+  className: o,
+  position: "bottom-left",
+  automationId: n,
+  popoverContentAutomationId: a,
+  renderPopoverSrcElement: ({
+    displayPopover: r
+  }) => /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-hamburger-menu ${r ? "bg-[rgba(0,0,0,0.20)]" : ""} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`
+  }, /* @__PURE__ */ e.createElement(c, {
+    name: "hamburger"
+  })),
+  renderPopoverContents: (r) => /* @__PURE__ */ e.createElement("div", {
+    className: "min-w-[212px]"
+  }, t && /* @__PURE__ */ e.createElement("div", {
+    className: "menu-content"
+  }, t(r)))
+});
 export {
-  k as HamburgerMenu
+  d as HamburgerMenu
 };
 //# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport interface HamburgerMenuProps {\n  menuItems: MenuItemProps[];\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  onMenuItemClick?: (item: MenuItemProps) => void;\n}\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  menuItems,\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  onMenuItemClick\n}) => {\n  const handleMenuItemClick = (item: MenuItemProps, closePopoverCb: () => void) => {\n    if(onMenuItemClick) {\n      onMenuItemClick(item);\n    }\n    closePopoverCb();\n  }\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${displayPopover ? 'bg-[rgba(0,0,0,0.20)]' : ''} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`}>\n            <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M6 8.25H22\" stroke=\"white\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M6 14H22\" stroke=\"white\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M6 19.75H22\" stroke=\"white\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n            </svg>\n        </div>\n      )}\n      renderPopoverContents={({ closePopoverCb }) => (\n        <div className=\"min-w-[212px]\">\n          {menuItems.map((item, index) => (\n            <MenuItem {...item} key={`item-${index}`}\n              onClick={() => handleMenuItemClick(item, closePopoverCb)}\n            />\n          ))}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["HamburgerMenu","menuItems","className","automationId","popoverContentAutomationId","onMenuItemClick","handleMenuItemClick","item","closePopoverCb","React","createElement","Popover","position","renderPopoverSrcElement","displayPopover","width","height","viewBox","fill","xmlns","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","renderPopoverContents","map","index","MenuItem","_extends","key","onClick"],"mappings":";;;;;;;;;;;;AAaO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,WAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,iBAAAA;AACF,MAAM;AACEC,QAAAA,IAAsBA,CAACC,GAAqBC,MAA+B;AAC/E,IAAGH,KACDA,EAAgBE,CAAI,GAEPC,EAAA;AAAA,EACjB;AAEEC,SAAAA,gBAAAA,EAAAC,cAACC,GAAO;AAAA,IACNT,WAAAA;AAAAA,IACAU,UAAS;AAAA,IACTT,cAAAA;AAAAA,IACAC,4BAAAA;AAAAA,IACAS,yBAAyBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MAC1BJ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKR,WAAW,GAAGY,IAAiB,0BAA0B,EAAE;AAAA,IAAA,GAC5DJ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKK,OAAM;AAAA,MAAKC,QAAO;AAAA,MAAKC,SAAQ;AAAA,MAAYC,MAAK;AAAA,MAAOC,OAAM;AAAA,IAAA,GAC9DT,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMU,GAAE;AAAA,MAAaC,QAAO;AAAA,MAAQC,aAAY;AAAA,MAAMC,eAAc;AAAA,MAAQC,gBAAe;AAAA,IAAA,CAAQ,GACnGd,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMU,GAAE;AAAA,MAAWC,QAAO;AAAA,MAAQC,aAAY;AAAA,MAAMC,eAAc;AAAA,MAAQC,gBAAe;AAAA,IAAA,CAAQ,GACjGd,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMU,GAAE;AAAA,MAAcC,QAAO;AAAA,MAAQC,aAAY;AAAA,MAAMC,eAAc;AAAA,MAAQC,gBAAe;AAAA,IAAQ,CAAA,CACnG,CACJ;AAAA,IAEPC,uBAAuBA,CAAC;AAAA,MAAEjB,gBAAAA;AAAAA,IAAAA,MACxBE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKR,WAAU;AAAA,IACZD,GAAAA,EAAUyB,IAAI,CAACnB,GAAMoB,MACpBjB,gBAAAA,EAAAA,cAACkB,GAAQC,MAAKtB,GAAI;AAAA,MAAEuB,KAAK,QAAQH,CAAK;AAAA,MACpCI,SAASA,MAAMzB,EAAoBC,GAAMC,CAAc;AAAA,IAAE,CAAA,CAC1D,CACF,CACE;AAAA,EAAA,CAER;AAEL;"}
+{"version":3,"file":"index15.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n}\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`se-design-hamburger-menu ${displayPopover ? 'bg-[rgba(0,0,0,0.20)]' : ''} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`}>\n          <Icon name='hamburger' />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className=\"min-w-[212px]\">\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","React","createElement","Popover","position","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","data"],"mappings":";;;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AACF,MAGIC,gBAAAA,EAAAC,cAACC,GAAO;AAAA,EACNN,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BJ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAW,4BAA4BS,IAAiB,0BAA0B,EAAE;AAAA,EAAA,GACvFJ,gBAAAA,EAAAA,cAACK,GAAI;AAAA,IAACC,MAAK;AAAA,EAAA,CAAa,CACrB;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EACZG,GAAAA,KAAeE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}

package/dist/index16.js

@@ -1,39 +1,39 @@
-var f = Object.getOwnPropertySymbols;
+var c = Object.getOwnPropertySymbols;
 var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
-var i = (e, l) => {
+var i = (t, l) => {
   var n = {};
-  for (var t in e)
-    E.call(e, t) && l.indexOf(t) < 0 && (n[t] = e[t]);
-  if (e != null && f)
-    for (var t of f(e))
-      l.indexOf(t) < 0 && v.call(e, t) && (n[t] = e[t]);
+  for (var e in t)
+    E.call(t, e) && l.indexOf(e) < 0 && (n[e] = t[e]);
+  if (t != null && c)
+    for (var e of c(t))
+      l.indexOf(e) < 0 && v.call(t, e) && (n[e] = t[e]);
   return n;
 };
 import r, { useRef as y, useEffect as w } from "react";
 import { TableContentLoader as O } from "./index21.js";
 function a() {
-  return a = Object.assign ? Object.assign.bind() : function(e) {
+  return a = Object.assign ? Object.assign.bind() : function(t) {
     for (var l = 1; l < arguments.length; l++) {
       var n = arguments[l];
-      for (var t in n) ({}).hasOwnProperty.call(n, t) && (e[t] = n[t]);
+      for (var e in n) ({}).hasOwnProperty.call(n, e) && (t[e] = n[e]);
     }
-    return e;
+    return t;
   }, a.apply(null, arguments);
 }
 const _ = (x) => {
-  var u = x, {
-    className: e = "",
+  var s = x, {
+    className: t = "",
     automationId: l = "",
     loading: n,
-    headerColSpan: t = [],
+    headerColSpan: e = [],
     headerData: o,
-    tableData: s,
+    tableData: f,
     renderTableContentLoader: T,
-    getTableHeaders: b,
-    getTableBody: m,
-    onSortUiUpdate: p,
-    onRowClick: g
-  } = u, d = i(u, [
+    getTableHeaders: m,
+    getTableBody: b,
+    onSortUiUpdate: g,
+    onRowClick: p
+  } = s, d = i(s, [
     "className",
     "automationId",
     "loading",
@@ -46,26 +46,26 @@ const _ = (x) => {
     "onSortUiUpdate",
     "onRowClick"
   ]);
-  const c = y(null);
+  const u = y(null);
   return w(() => {
-    c.current && console.log("Table initialized!");
+    u.current && console.log("Table initialized!");
   }, []), /* @__PURE__ */ r.createElement("div", a({
-    className: "table-layout-wrapper" + (e.length > 0 ? ` ${e}` : "")
+    className: "se-design-table-layout-wrapper" + (t.length > 0 ? ` ${t}` : "")
   }, d), /* @__PURE__ */ r.createElement("table", {
-    className: "se-table w-full bg-[var(--color-white)] border-collapse table-fixed" + (e ? ` ${e}` : ""),
-    ref: c,
+    className: "se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed",
+    ref: u,
     "data-automation-id": l
-  }, /* @__PURE__ */ r.createElement("thead", null, /* @__PURE__ */ r.createElement("tr", null, b({
+  }, /* @__PURE__ */ r.createElement("thead", null, /* @__PURE__ */ r.createElement("tr", null, m({
     headerData: o,
     sortData: {},
-    onSortUiUpdate: p,
+    onSortUiUpdate: g,
     loading: n
   }))), /* @__PURE__ */ r.createElement("tbody", null, n ? /* @__PURE__ */ r.createElement(O, {
     noOfColumns: o == null ? void 0 : o.length,
-    colSpan: t
-  }) : m({
-    tableData: s,
-    onRowClick: g,
+    colSpan: e
+  }) : b({
+    tableData: f,
+    onRowClick: p,
     loading: n
   }))));
 };

package/dist/index16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index16.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[], sortData: any, onSortUiUpdate: any, loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[], onRowClick: any, loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  onSortUiUpdate,\n  onRowClick,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    if (tableRef.current) {\n      console.log('Table initialized!');\n    }\n  }, []);\n\n  return (\n    <div className={'table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '')} {...props}>\n      <table\n        className={'se-table w-full bg-[var(--color-white)] border-collapse table-fixed' + (className ? ` ${className}` : '')}\n        ref={tableRef}\n        data-automation-id={automationId}\n      >\n        <thead>\n          <tr>\n            {getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}\n          </tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["TableLayout","_a","_b","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","onSortUiUpdate","onRowClick","props","tableRef","useRef","useEffect","current","console","log","React","createElement","_extends","length","ref","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,IAAoCA,CAACC,MAa5C;AAb4C,MAAAC,IAAAD,GAChDE;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,SAAAA;AAAAA,IACAC,eAAAA,IAAgB,CAAE;AAAA,IAClBC,YAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,0BAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,YAAAA;AAAAA,MAXgDX,GAY7CY,IAAAA,EAZ6CZ,GAY7CY;AAAAA,IAXHX;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGME,QAAAA,IAAWC,EAAyB,IAAI;AAE9CC,SAAAA,EAAU,MAAM;AACd,IAAIF,EAASG,WACXC,QAAQC,IAAI,oBAAoB;AAAA,EAEpC,GAAG,EAAE,GAGHC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,0BAA0BA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK;AAAA,EAASW,GAAAA,CAAK,GAC/FO,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW,yEAAyEA,IAAY,IAAIA,CAAS,KAAK;AAAA,IAClHsB,KAAKV;AAAAA,IACL,sBAAoBX;AAAAA,EAAAA,qBAEpBkB,cAAA,SAAA,MACEA,gBAAAA,EAAAA,cACGZ,MAAAA,MAAAA,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYmB,UAAU,CAAC;AAAA,IAAGd,gBAAAA;AAAAA,IAAgBP,SAAAA;AAAAA,EAAAA,CAAS,CACpE,CACC,GACPgB,gBAAAA,EAAAC,cACGjB,SAAAA,MAAAA,IACCiB,gBAAAA,EAAAA,cAACK,GAAkB;AAAA,IAACC,aAAarB,KAAAA,gBAAAA,EAAYiB;AAAAA,IAAQK,SAASvB;AAAAA,EAAgB,CAAA,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWK,YAAAA;AAAAA,IAAYR,SAAAA;AAAAA,EAAS,CAAA,CAE5C,CACF,CACJ;AAET;"}
+{"version":3,"file":"index16.js","sources":["../src/components/TableLayout/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useRef } from 'react';\nimport { TableContentLoader } from 'components/TableContentLoader';\n\nexport interface TableLayoutProps {\n  className?: string;\n  automationId?: string;\n  loading: boolean;\n  headerData: any[];\n  tableData: any[];\n  headerColSpan?: number[];\n  renderTableContentLoader?: (noOfColumns: number) => ReactNode;\n  getTableHeaders: (props: { headerData: any[], sortData: any, onSortUiUpdate: any, loading: boolean }) => ReactNode;\n  getTableBody: (props: { tableData: any[], onRowClick: any, loading: boolean }) => ReactNode;\n  onSortUiUpdate: (newSortData: any) => void;\n  onRowClick: (rowData: any) => void;\n}\n\nexport const TableLayout: FC<TableLayoutProps> = ({\n  className = '',\n  automationId = '',\n  loading,\n  headerColSpan = [],\n  headerData,\n  tableData,\n  renderTableContentLoader,\n  getTableHeaders,\n  getTableBody,\n  onSortUiUpdate,\n  onRowClick,\n  ...props\n}) => {\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    if (tableRef.current) {\n      console.log('Table initialized!');\n    }\n  }, []);\n\n  return (\n    <div className={'se-design-table-layout-wrapper' + (className.length > 0 ? ` ${className}` : '')} {...props}>\n      <table\n        className={'se-design-table w-full bg-[var(--color-white)] border-collapse table-fixed'}\n        ref={tableRef}\n        data-automation-id={automationId}\n      >\n        <thead>\n          <tr>\n            {getTableHeaders({ headerData, sortData: {}, onSortUiUpdate, loading })}\n          </tr>\n        </thead>\n        <tbody>\n          {loading ? (\n            <TableContentLoader noOfColumns={headerData?.length} colSpan={headerColSpan} />\n          ) : (\n            getTableBody({ tableData, onRowClick, loading })\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["TableLayout","_a","_b","className","automationId","loading","headerColSpan","headerData","tableData","renderTableContentLoader","getTableHeaders","getTableBody","onSortUiUpdate","onRowClick","props","tableRef","useRef","useEffect","current","console","log","React","createElement","_extends","length","ref","sortData","TableContentLoader","noOfColumns","colSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,IAAoCA,CAACC,MAa5C;AAb4C,MAAAC,IAAAD,GAChDE;AAAAA,eAAAA,IAAY;AAAA,IACZC,cAAAA,IAAe;AAAA,IACfC,SAAAA;AAAAA,IACAC,eAAAA,IAAgB,CAAE;AAAA,IAClBC,YAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,0BAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,YAAAA;AAAAA,MAXgDX,GAY7CY,IAAAA,EAZ6CZ,GAY7CY;AAAAA,IAXHX;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGME,QAAAA,IAAWC,EAAyB,IAAI;AAE9CC,SAAAA,EAAU,MAAM;AACd,IAAIF,EAASG,WACXC,QAAQC,IAAI,oBAAoB;AAAA,EAEpC,GAAG,EAAE,GAGHC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IAAKpB,WAAW,oCAAoCA,EAAUqB,SAAS,IAAI,IAAIrB,CAAS,KAAK;AAAA,EAASW,GAAAA,CAAK,GACzGO,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEnB,WAAW;AAAA,IACXsB,KAAKV;AAAAA,IACL,sBAAoBX;AAAAA,EAAAA,qBAEpBkB,cAAA,SAAA,MACEA,gBAAAA,EAAAA,cACGZ,MAAAA,MAAAA,EAAgB;AAAA,IAAEH,YAAAA;AAAAA,IAAYmB,UAAU,CAAC;AAAA,IAAGd,gBAAAA;AAAAA,IAAgBP,SAAAA;AAAAA,EAAAA,CAAS,CACpE,CACC,GACPgB,gBAAAA,EAAAC,cACGjB,SAAAA,MAAAA,IACCiB,gBAAAA,EAAAA,cAACK,GAAkB;AAAA,IAACC,aAAarB,KAAAA,gBAAAA,EAAYiB;AAAAA,IAAQK,SAASvB;AAAAA,EAAgB,CAAA,IAE9EK,EAAa;AAAA,IAAEH,WAAAA;AAAAA,IAAWK,YAAAA;AAAAA,IAAYR,SAAAA;AAAAA,EAAS,CAAA,CAE5C,CACF,CACJ;AAET;"}

package/dist/index17.js

@@ -1,25 +1,29 @@
-import u, { useState as h } from "react";
-const g = ({
-  className: a = "",
-  automationId: c = "",
-  defaultChecked: l = !1,
+import g, { useState as h, useEffect as i } from "react";
+const x = ({
+  className: n = "",
+  automationId: s = "",
+  defaultChecked: r = !1,
   disabled: o = !1,
-  onChange: r
+  onChange: t
 }) => {
-  const [e, n] = h(l), s = () => {
-    const t = !e;
-    n(t), r && r(t);
-  }, d = o ? "bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed" : e ? "text-[var(--color-blue-500)]" : "text-[var(--color-white)]";
-  return /* @__PURE__ */ u.createElement("input", {
+  const [e, c] = h(r);
+  i(() => {
+    o || c(r);
+  }, [r]);
+  const l = () => {
+    const a = !e;
+    c(a), t && t(a);
+  }, u = o ? "bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed" : e ? "text-[var(--color-blue-500)]" : "text-[var(--color-white)]";
+  return /* @__PURE__ */ g.createElement("input", {
     type: "checkbox",
-    className: `${a} block w-4 h-4 ${d} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`,
-    "data-automation-id": c,
+    className: `se-design-checkbox ${n} block w-4 h-4 ${u} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`,
+    "data-automation-id": s,
     checked: e,
-    onChange: s,
+    onChange: l,
     disabled: o
   });
 };
 export {
-  g as Checkbox
+  x as Checkbox
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({ className = '', automationId = '', defaultChecked = false, disabled = false, onChange }) => {\n    const [isChecked, setIsChecked] = useState(defaultChecked);\n\n    const handleClick = () => {\n        const newCheckedState = !isChecked;\n        setIsChecked(newCheckedState);\n        if(onChange) {\n            onChange(newCheckedState);\n        }\n    }\n    const backgroundColor = disabled ? 'bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed' : isChecked ? 'text-[var(--color-blue-500)]' : 'text-[var(--color-white)]';\n    \n  return <input type=\"checkbox\" className={`${className} block w-4 h-4 ${backgroundColor} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`} data-automation-id={automationId} checked={isChecked} onChange={handleClick} disabled={disabled} />;\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","isChecked","setIsChecked","useState","handleClick","newCheckedState","backgroundColor","React","createElement","type","checked"],"mappings":";AAUO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,WAAAA,IAAY;AAAA,EAAIC,cAAAA,IAAe;AAAA,EAAIC,gBAAAA,IAAiB;AAAA,EAAOC,UAAAA,IAAW;AAAA,EAAOC,UAAAA;AAAS,MAAM;AACtI,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASL,CAAc,GAEnDM,IAAcA,MAAM;AACtB,UAAMC,IAAkB,CAACJ;AACzBC,IAAAA,EAAaG,CAAe,GACzBL,KACCA,EAASK,CAAe;AAAA,EAEhC,GACMC,IAAkBP,IAAW,6IAA6IE,IAAY,iCAAiC;AAExNM,SAAAA,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOC,MAAK;AAAA,IAAWb,WAAW,GAAGA,CAAS,kBAAkBU,CAAe;AAAA,IAAuH,sBAAoBT;AAAAA,IAAca,SAAST;AAAAA,IAAWD,UAAUI;AAAAA,IAAaL,UAAAA;AAAAA,EAAAA,CAAqB;AACjT;"}
+{"version":3,"file":"index17.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({ className = '', automationId = '', defaultChecked = false, disabled = false, onChange }) => {\n    const [isChecked, setIsChecked] = useState(defaultChecked);\n\n    useEffect(() => {\n        if(disabled) return;\n        setIsChecked(defaultChecked);\n    }, [defaultChecked]);\n\n    const handleClick = () => {\n        const newCheckedState = !isChecked;\n        setIsChecked(newCheckedState);\n        if(onChange) {\n            onChange(newCheckedState);\n        }\n    }\n    const backgroundColor = disabled ? 'bg-[var(--color-gray-600)] text-[var(--color-gray-600)] hover:text-[var(--color-gray-600)] bg-[var(--color-gray-600)] cursor-not-allowed' : isChecked ? 'text-[var(--color-blue-500)]' : 'text-[var(--color-white)]';\n    \n  return <input type=\"checkbox\" className={`se-design-checkbox ${className} block w-4 h-4 ${backgroundColor} hover:text-[var(--color-blue-600)] border-[var(--color-gray-500)] rounded-md focus:ring-transparent cursor-pointer`} data-automation-id={automationId} checked={isChecked} onChange={handleClick} disabled={disabled} />;\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","isChecked","setIsChecked","useState","useEffect","handleClick","newCheckedState","backgroundColor","React","createElement","type","checked"],"mappings":";AAUO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,WAAAA,IAAY;AAAA,EAAIC,cAAAA,IAAe;AAAA,EAAIC,gBAAAA,IAAiB;AAAA,EAAOC,UAAAA,IAAW;AAAA,EAAOC,UAAAA;AAAS,MAAM;AACtI,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASL,CAAc;AAEzDM,EAAAA,EAAU,MAAM;AACZ,IAAGL,KACHG,EAAaJ,CAAc;AAAA,EAAA,GAC5B,CAACA,CAAc,CAAC;AAEnB,QAAMO,IAAcA,MAAM;AACtB,UAAMC,IAAkB,CAACL;AACzBC,IAAAA,EAAaI,CAAe,GACzBN,KACCA,EAASM,CAAe;AAAA,EAEhC,GACMC,IAAkBR,IAAW,6IAA6IE,IAAY,iCAAiC;AAExNO,SAAAA,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOC,MAAK;AAAA,IAAWd,WAAW,sBAAsBA,CAAS,kBAAkBW,CAAe;AAAA,IAAuH,sBAAoBV;AAAAA,IAAcc,SAASV;AAAAA,IAAWD,UAAUK;AAAAA,IAAaN,UAAAA;AAAAA,EAAAA,CAAqB;AACpU;"}

package/dist/index18.js

@@ -1,26 +1,26 @@
 import e from "react";
-import { Tag as n } from "./index7.js";
-const s = (a) => {
+import { Badge as c } from "./index7.js";
+const m = (t) => {
   const {
-    label: o,
+    label: a,
     color: l,
     onClick: r = () => {
     },
-    tag: t
-  } = a;
+    tag: o
+  } = t;
   return /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center gap-2",
+    className: "se-design-color-coded-label flex items-center gap-2",
     onClick: r
   }, l && /* @__PURE__ */ e.createElement("span", {
     className: "w-[15px] h-[15px] rounded-[3px] inline-block",
     style: {
       backgroundColor: l
     }
-  }), /* @__PURE__ */ e.createElement("div", null, o), t && /* @__PURE__ */ e.createElement(n, {
-    label: t
+  }), /* @__PURE__ */ e.createElement("div", null, a), o && /* @__PURE__ */ e.createElement(c, {
+    label: o
   }));
 };
 export {
-  s as ColorCodedLabel
+  m as ColorCodedLabel
 };
 //# sourceMappingURL=index18.js.map

package/dist/index18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index18.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Tag } from 'src/components/Tag';\n\nexport type ColorCodedLabelProps = {\n  label: string;\n  tag?: string;\n  color?: string;\n  onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n  const { label, color, onClick = () => {}, tag } = props;\n  return (\n    <div\n      className=\"flex items-center gap-2\"\n      onClick={onClick}\n    >\n      {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n      <div>{label}</div>\n      {tag && <Tag label={tag} />}\n    </div>\n  );\n};\n"],"names":["React__default","Tag","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,OAAAC,SAAA;AAAA,MAAMC,IAA6CC,CAAUA,MAAA;AAC5D,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAAA,IAAQJ;AAEhDK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAECD,GAAAA,KAASI,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAAA;AAAAA,EAAe,CAAA,GAClHG,gBAAAA,EAAAC,cAAML,OAAAA,MAAAA,CAAW,GAChBG,KAAOE,gBAAAA,EAAAA,cAACR,GAAG;AAAA,IAACG,OAAOG;AAAAA,EAAAA,CAAM,CACvB;AAET;"}
+{"version":3,"file":"index18.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\n\nexport type ColorCodedLabelProps = {\n  label: string;\n  tag?: string;\n  color?: string;\n  onClick?: () => void;\n};\n\nexport const ColorCodedLabel: FC<ColorCodedLabelProps> = (props) => {\n  const { label, color, onClick = () => {}, tag } = props;\n  return (\n    <div\n      className=\"se-design-color-coded-label flex items-center gap-2\"\n      onClick={onClick}\n    >\n      {color && <span className=\"w-[15px] h-[15px] rounded-[3px] inline-block\" style={{ backgroundColor: color }}></span>}\n      <div>{label}</div>\n      {tag && <Badge label={tag} />}\n    </div>\n  );\n};\n"],"names":["React__default","Badge","ColorCodedLabel","props","label","color","onClick","tag","React","createElement","className","style","backgroundColor"],"mappings":"AAUO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,MAAMC,IAA6CC,CAAUA,MAAA;AAC5D,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,OAAAA;AAAAA,IAAOC,SAAAA,IAAUA,MAAM;AAAA,IAAC;AAAA,IAAGC,KAAAA;AAAAA,EAAAA,IAAQJ;AAEhDK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVJ,SAAAA;AAAAA,EAECD,GAAAA,KAASI,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,IAA+CC,OAAO;AAAA,MAAEC,iBAAiBP;AAAAA,IAAAA;AAAAA,EAAe,CAAA,GAClHG,gBAAAA,EAAAC,cAAML,OAAAA,MAAAA,CAAW,GAChBG,KAAOE,gBAAAA,EAAAA,cAACR,GAAK;AAAA,IAACG,OAAOG;AAAAA,EAAAA,CAAM,CACzB;AAET;"}

package/dist/index19.js

@@ -10,11 +10,11 @@ var y = (e, t, o) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writab
       O.call(t, o) && y(e, o, t[o]);
   return e;
 }, D = (e, t) => k(e, V(t));
-import r, { useState as S, useRef as R } from "react";
+import r, { useState as g, useRef as R } from "react";
 import { Popover as T } from "./index13.js";
 import { Icon as _ } from "./index4.js";
 const q = (e) => {
-  const [t, o] = S(!1), [d, g] = S(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), u = R(null), {
+  const [t, o] = g(!1), [d, S] = g(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), u = R(null), {
     selectBy: i = "",
     optionsUniqueBy: c = "",
     displaySelected: E = !1,
@@ -22,7 +22,7 @@ const q = (e) => {
     defaultText: f = "Select"
   } = e, h = (n) => {
     var l, a;
-    g(n), (l = u.current) == null || l.togglePopup(), (a = e == null ? void 0 : e.onOptionClick) == null || a.call(e, n);
+    S(n), (l = u.current) == null || l.togglePopover(), (a = e == null ? void 0 : e.onOptionClick) == null || a.call(e, n);
   }, v = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ r.createElement("span", {
     className: "option-chip"
   }, n[i] || f), x = (n) => {
@@ -46,7 +46,7 @@ const q = (e) => {
     }));
   };
   return /* @__PURE__ */ r.createElement("div", {
-    className: "dropdown-container",
+    className: "se-design-dropdown-container",
     style: e == null ? void 0 : e.style
   }, /* @__PURE__ */ r.createElement(T, {
     ref: u,

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\n\nimport { Popover, PopoverHandle  } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(() => props?.defaultSelectedValue || {});\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const { selectBy = '', optionsUniqueBy = '', displaySelected = false, dropDownOptions, defaultText = 'Select' } = props;\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopup();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if(props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>\n  }\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return <div\n      key={`$drop-option-${optionTxt}`}\n      className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n      onClick={() => handleDropDownOptionClick(dropDownOption)}\n    >\n      {optionChip({...dropDownOption, isOptionSelected})}\n      {isOptionSelected && <div>&#10003;</div>}\n    </div>;\n  }\n\n  const renderDropdownContents = () => {\n    return <div className=\"dropdown-content dropdown-options\">{dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}</div>;\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const drowDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor}`;\n\n    return <div className={drowDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon name=\"down\" className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`} />\n      </div>;\n  };\n\n  return (\n    <div className=\"dropdown-container\" style={props?.style}>\n      <Popover ref={popoverRef} renderPopoverContents={renderDropdownContents} contentWidth={'full'} renderPopoverSrcElement={renderDropdownSelect} onPopoverToggle={(value) => setIsDropDownOpen(value)} />\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopup","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","renderDropdownContents","map","renderDropdownSelect","drowDownSelectClass","name","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":";;;;;;;;;;;;AAuBO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAA+BC,CAAUA,MAAA;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIP,EAAS,EAAK,GACpD,CAACQ,GAAuBC,CAAwB,IAAIT,EAAwB,OAAMK,KAAAA,gBAAAA,EAAOK,yBAAwB,EAAE,GACnHC,IAAaV,EAAuC,IAAI,GAExD;AAAA,IAAEW,UAAAA,IAAW;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAOC,iBAAAA;AAAAA,IAAiBC,aAAAA,IAAc;AAAA,EAAA,IAAaX,GAE5GY,IAA4BA,CAACC,MAAwB;AAPtD,QAAAC,GAAAC;AAQHX,IAAAA,EAAyBS,CAAc,IACvCP,IAAAA,EAAWU,YAAXV,QAAAA,EAAoBW,gBACpBjB,IAAAA,KAAAA,gBAAAA,EAAOkB,kBAAPlB,QAAAA,EAAAA,KAAAA,GAAuBa;AAAAA,EACzB,GAEMM,IAAaA,CAACC,MACfpB,KAAAA,QAAAA,EAAOqB,mBACDrB,KAAAA,gBAAAA,EAAOqB,iBAAiBD,KAE1BE,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW;AAAA,EAAA,GAAgBJ,EAAOb,CAAQ,KAAKI,CAAkB,GAG1Ec,IAAoBA,CAACZ,MAAkC;AACrDa,UAAAA,IAAYb,EAAeN,CAAQ,GACnCoB,IAAwBxB,EAAsBI,CAAQ,KAAKI,GAC3DiB,IAAmBpB,KAAAA,QAAAA,EAAiBqB,SACtChB,EAAeL,CAAe,KAAKL,EAAsBK,CAAe,IACxE,IACEsB,IAAmBrB,KAAmBiB,MAAcC,KAAyBC;AAC5EN,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACLQ,KAAK,gBAAgBL,CAAS;AAAA,MAC9BF,WAAW,uFAAuFM,IAAmB,aAAa,EAAE;AAAA,MACpIE,SAASA,MAAMpB,EAA0BC,CAAc;AAAA,OAEtDM,EAAWc,EAAAC,EAAA,IAAIrB,IAAJ;AAAA,MAAoBiB,kBAAAA;AAAAA,IAAAA,EAAiB,GAChDA,KAAoBR,gBAAAA,EAAAC,cAAA,OAAA,MAAK,GAAa,CACpC;AAAA,EACP,GAEMY,IAAyBA,MACtBb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAqCd,KAAAA,gBAAAA,EAAiB0B,IAAKvB,OAAmBY,EAAkBZ,CAAc,EAAQ,GAGxIwB,IAAuBA,MAAM;AAE3BC,UAAAA,IAAsB,yDADRrC,IAAiB,mCAAmC,gCACwB;AAEzFqB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAWc;AAAAA,OAClBnB,EAAWhB,CAAqB,GACjCmB,gBAAAA,EAAAC,cAACzB,GAAI;AAAA,MAACyC,MAAK;AAAA,MAAOf,WAAW,WAAWvB,IAAiB,eAAe,EAAE;AAAA,IAAA,CAA0B,CACjG;AAAA,EACT;AAGEqB,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAqBgB,OAAOxC,KAAAA,gBAAAA,EAAOwC;AAAAA,EAAAA,GAChDjB,gBAAAA,EAAAA,cAAC1B,GAAO;AAAA,IAAC4C,KAAKnC;AAAAA,IAAYoC,uBAAuBP;AAAAA,IAAwBQ,cAAc;AAAA,IAAQC,yBAAyBP;AAAAA,IAAsBQ,iBAAkBC,CAAU5C,MAAAA,EAAkB4C,CAAK;AAAA,EAAA,CAAI,CAClM;AAET;"}
+{"version":3,"file":"index19.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\n\nimport { Popover, PopoverHandle  } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(() => props?.defaultSelectedValue || {});\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const { selectBy = '', optionsUniqueBy = '', displaySelected = false, dropDownOptions, defaultText = 'Select' } = props;\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if(props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>\n  }\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return <div\n      key={`$drop-option-${optionTxt}`}\n      className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n      onClick={() => handleDropDownOptionClick(dropDownOption)}\n    >\n      {optionChip({...dropDownOption, isOptionSelected})}\n      {isOptionSelected && <div>&#10003;</div>}\n    </div>;\n  }\n\n  const renderDropdownContents = () => {\n    return <div className=\"dropdown-content dropdown-options\">{dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}</div>;\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const drowDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor}`;\n\n    return <div className={drowDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon name=\"down\" className={`ml-auto ${isDropDownOpen ? 'rotate-180' : ''} transition-transform`} />\n      </div>;\n  };\n\n  return (\n    <div className=\"se-design-dropdown-container\" style={props?.style}>\n      <Popover ref={popoverRef} renderPopoverContents={renderDropdownContents} contentWidth={'full'} renderPopoverSrcElement={renderDropdownSelect} onPopoverToggle={(value) => setIsDropDownOpen(value)} />\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","renderDropdownContents","map","renderDropdownSelect","drowDownSelectClass","name","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":";;;;;;;;;;;;AAuBO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAA+BC,CAAUA,MAAA;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIP,EAAS,EAAK,GACpD,CAACQ,GAAuBC,CAAwB,IAAIT,EAAwB,OAAMK,KAAAA,gBAAAA,EAAOK,yBAAwB,EAAE,GACnHC,IAAaV,EAAuC,IAAI,GAExD;AAAA,IAAEW,UAAAA,IAAW;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAIC,iBAAAA,IAAkB;AAAA,IAAOC,iBAAAA;AAAAA,IAAiBC,aAAAA,IAAc;AAAA,EAAA,IAAaX,GAE5GY,IAA4BA,CAACC,MAAwB;AAPtD,QAAAC,GAAAC;AAQHX,IAAAA,EAAyBS,CAAc,IACvCP,IAAAA,EAAWU,YAAXV,QAAAA,EAAoBW,kBACpBjB,IAAAA,KAAAA,gBAAAA,EAAOkB,kBAAPlB,QAAAA,EAAAA,KAAAA,GAAuBa;AAAAA,EACzB,GAEMM,IAAaA,CAACC,MACfpB,KAAAA,QAAAA,EAAOqB,mBACDrB,KAAAA,gBAAAA,EAAOqB,iBAAiBD,KAE1BE,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAW;AAAA,EAAA,GAAgBJ,EAAOb,CAAQ,KAAKI,CAAkB,GAG1Ec,IAAoBA,CAACZ,MAAkC;AACrDa,UAAAA,IAAYb,EAAeN,CAAQ,GACnCoB,IAAwBxB,EAAsBI,CAAQ,KAAKI,GAC3DiB,IAAmBpB,KAAAA,QAAAA,EAAiBqB,SACtChB,EAAeL,CAAe,KAAKL,EAAsBK,CAAe,IACxE,IACEsB,IAAmBrB,KAAmBiB,MAAcC,KAAyBC;AAC5EN,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACLQ,KAAK,gBAAgBL,CAAS;AAAA,MAC9BF,WAAW,uFAAuFM,IAAmB,aAAa,EAAE;AAAA,MACpIE,SAASA,MAAMpB,EAA0BC,CAAc;AAAA,OAEtDM,EAAWc,EAAAC,EAAA,IAAIrB,IAAJ;AAAA,MAAoBiB,kBAAAA;AAAAA,IAAAA,EAAiB,GAChDA,KAAoBR,gBAAAA,EAAAC,cAAA,OAAA,MAAK,GAAa,CACpC;AAAA,EACP,GAEMY,IAAyBA,MACtBb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAqCd,KAAAA,gBAAAA,EAAiB0B,IAAKvB,OAAmBY,EAAkBZ,CAAc,EAAQ,GAGxIwB,IAAuBA,MAAM;AAE3BC,UAAAA,IAAsB,yDADRrC,IAAiB,mCAAmC,gCACwB;AAEzFqB,WAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKC,WAAWc;AAAAA,OAClBnB,EAAWhB,CAAqB,GACjCmB,gBAAAA,EAAAC,cAACzB,GAAI;AAAA,MAACyC,MAAK;AAAA,MAAOf,WAAW,WAAWvB,IAAiB,eAAe,EAAE;AAAA,IAAA,CAA0B,CACjG;AAAA,EACT;AAGEqB,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA+BgB,OAAOxC,KAAAA,gBAAAA,EAAOwC;AAAAA,EAAAA,GAC1DjB,gBAAAA,EAAAA,cAAC1B,GAAO;AAAA,IAAC4C,KAAKnC;AAAAA,IAAYoC,uBAAuBP;AAAAA,IAAwBQ,cAAc;AAAA,IAAQC,yBAAyBP;AAAAA,IAAsBQ,iBAAkBC,CAAU5C,MAAAA,EAAkB4C,CAAK;AAAA,EAAA,CAAI,CAClM;AAET;"}