se-design 0.0.97 → 0.0.98

package/dist/index18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index18.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import { 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"],"mappings":";;AAUO,MAAMA,IAA8B,CAAC,EAAE,WAAAC,IAAY,IAAI,cAAAC,IAAe,IAAI,gBAAAC,IAAiB,IAAO,UAAAC,IAAW,IAAO,UAAAC,EAAA,MAAe;AACtI,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASL,CAAc,GAEnDM,IAAc,MAAM;AACtB,UAAMC,IAAkB,CAACJ;AACzB,IAAAC,EAAaG,CAAe,GACzBL,KACCA,EAASK,CAAe;AAAA,EAEhC,GACMC,IAAkBP,IAAW,6IAA6IE,IAAY,iCAAiC;AAE/N,+BAAQ,SAAM,EAAA,MAAK,YAAW,WAAW,GAAGL,CAAS,kBAAkBU,CAAe,uHAAuH,sBAAoBT,GAAc,SAASI,GAAW,UAAUG,GAAa,UAAAL,GAAoB;AAChT;"}
+{"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;"}

package/dist/index19.js

@@ -1,22 +1,62 @@
-import { j as o } from "./index24.js";
-import { Tag as n } from "./index8.js";
-const i = (s) => {
-  const { label: r, color: e, onClick: a = () => {
-  }, tag: l } = s;
-  return /* @__PURE__ */ o.jsxs(
-    "div",
-    {
-      className: "flex items-center gap-2",
-      onClick: a,
-      children: [
-        e && /* @__PURE__ */ o.jsx("span", { className: "w-[15px] h-[15px] rounded-[3px] inline-block", style: { backgroundColor: e } }),
-        /* @__PURE__ */ o.jsx("div", { children: r }),
-        l && /* @__PURE__ */ o.jsx(n, { label: l })
-      ]
-    }
-  );
+var $ = Object.defineProperty, k = Object.defineProperties;
+var V = Object.getOwnPropertyDescriptors;
+var w = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, O = Object.prototype.propertyIsEnumerable;
+var y = (e, t, o) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, C = (e, t) => {
+  for (var o in t || (t = {}))
+    I.call(t, o) && y(e, o, t[o]);
+  if (w)
+    for (var o of w(t))
+      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 { 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), {
+    selectBy: i = "",
+    optionsUniqueBy: c = "",
+    displaySelected: E = !1,
+    dropDownOptions: m,
+    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);
+  }, 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) => {
+    const l = n[i], a = d[i] || f, P = c != null && c.length ? n[c] == d[c] : !0, s = E && l === a && P;
+    return /* @__PURE__ */ r.createElement("div", {
+      key: `$drop-option-${l}`,
+      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${s ? "selected" : ""}`,
+      onClick: () => h(n)
+    }, v(D(C({}, n), {
+      isOptionSelected: s
+    })), s && /* @__PURE__ */ r.createElement("div", null, "✓"));
+  }, b = () => /* @__PURE__ */ r.createElement("div", {
+    className: "dropdown-content dropdown-options"
+  }, m == null ? void 0 : m.map((n) => x(n))), N = () => {
+    const l = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"}`;
+    return /* @__PURE__ */ r.createElement("div", {
+      className: l
+    }, v(d), /* @__PURE__ */ r.createElement(_, {
+      name: "down",
+      className: `ml-auto ${t ? "rotate-180" : ""} transition-transform`
+    }));
+  };
+  return /* @__PURE__ */ r.createElement("div", {
+    className: "dropdown-container",
+    style: e == null ? void 0 : e.style
+  }, /* @__PURE__ */ r.createElement(T, {
+    ref: u,
+    renderPopoverContents: b,
+    contentWidth: "full",
+    renderPopoverSrcElement: N,
+    onPopoverToggle: (n) => o(n)
+  }));
 };
 export {
-  i as ColorCodedLabel
+  q as Dropdown
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/ColorCodedLabel/index.tsx"],"sourcesContent":["import { 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":["jsxRuntimeExports","Tag","ColorCodedLabel","props","label","color","onClick","tag","jsxs","jsx"],"mappings":"AAUa,SAAA,KAAAA,SAAA;AAAA,SAAA,OAAAC,SAAA;AAAA,MAAAC,IAA4C,CAACC,MAAU;AAClE,QAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,IAAU,MAAM;AAAA,EAAA,GAAI,KAAAC,EAAQ,IAAAJ;AAEhD,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAAF;AAAA,MAEC,UAAA;AAAA,QAASD,KAAAI,gBAAAA,EAAAA,IAAC,UAAK,WAAU,gDAA+C,OAAO,EAAE,iBAAiBJ,KAAS;AAAA,QAC5GI,gBAAAA,EAAAA,IAAC,SAAK,UAAML,EAAA,CAAA;AAAA,QACXG,KAAOE,gBAAAA,EAAAA,IAACR,GAAI,EAAA,OAAOM,EAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3B;AAEJ;"}
+{"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;"}

package/dist/index20.js

@@ -1,35 +1,138 @@
-import { j as n } from "./index24.js";
-import { useState as f, useRef as g } from "react";
-import { Popover as b } from "./index14.js";
-import { Icon as N } from "./index5.js";
-const I = (e) => {
-  const [a, h] = f(!1), [c, v] = f(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), u = g(null), { selectBy: d = "", optionsUniqueBy: r = "", displaySelected: w = !1, dropDownOptions: i, defaultText: m = "Select" } = e, j = (t) => {
-    var o, l;
-    v(t), (o = u.current) == null || o.togglePopup(), (l = e == null ? void 0 : e.onOptionClick) == null || l.call(e, t);
-  }, x = (t) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(t) : /* @__PURE__ */ n.jsx("span", { className: "option-chip", children: t[d] || m }), C = (t) => {
-    const o = t[d], l = c[d] || m, S = r != null && r.length ? t[r] == c[r] : !0, s = w && o === l && S;
-    return /* @__PURE__ */ n.jsxs(
-      "div",
-      {
-        className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${s ? "selected" : ""}`,
-        onClick: () => j(t),
-        children: [
-          x({ ...t, isOptionSelected: s }),
-          s && /* @__PURE__ */ n.jsx("div", { children: "✓" })
-        ]
-      },
-      `$drop-option-${o}`
-    );
-  }, D = () => /* @__PURE__ */ n.jsx("div", { className: "dropdown-content dropdown-options", children: i == null ? void 0 : i.map((t) => C(t)) }), y = () => {
-    const o = `dropdown-src-element flex px-3 py-2 border rounded-md ${a ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"}`;
-    return /* @__PURE__ */ n.jsxs("div", { className: o, children: [
-      x(c),
-      /* @__PURE__ */ n.jsx(N, { name: "down", className: `ml-auto ${a ? "rotate-180" : ""} transition-transform` })
-    ] });
+import e from "react";
+import { Popover as c } from "./index13.js";
+const m = ({
+  menuItems: n,
+  onMenuItemClick: o,
+  activeItem: l = "",
+  variant: a = "primary",
+  className: C = "",
+  automationId: i = ""
+}) => {
+  const s = () => {
+    switch (a) {
+      case "primary":
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }));
+      case "secondary":
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z",
+          fill: "#1088E7"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z",
+          stroke: "#1088E7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }));
+      default:
+        return /* @__PURE__ */ e.createElement("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none"
+        }, /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          fill: "#5E6673"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }), /* @__PURE__ */ e.createElement("path", {
+          d: "M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+          stroke: "#5E6673",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }));
+    }
   };
-  return /* @__PURE__ */ n.jsx("div", { className: "dropdown-container", style: e == null ? void 0 : e.style, children: /* @__PURE__ */ n.jsx(b, { ref: u, renderPopoverContents: D, contentWidth: "full", renderPopoverSrcElement: y, onPopoverToggle: (t) => h(t) }) });
+  return /* @__PURE__ */ e.createElement(c, {
+    className: C,
+    position: "bottom-left",
+    automationId: i,
+    renderPopoverSrcElement: ({
+      displayPopover: r
+    }) => /* @__PURE__ */ e.createElement("div", {
+      className: `${r ? "bg-[var(--color-blue-100)]" : ""} hover:bg-[var(--color-blue-100)] rounded-[6px] transition-all duration-300 w-max`
+    }, s()),
+    renderPopoverContents: ({
+      closePopoverCb: r
+    }) => /* @__PURE__ */ e.createElement("div", {
+      className: "min-w-[212px]"
+    }, n.map((t, d) => /* @__PURE__ */ e.createElement("div", {
+      key: d,
+      className: "w-full text-left p-2",
+      onClick: () => {
+        o && !t.isDisabled && o(t.label), !t.isDisabled && r();
+      }
+    }, /* @__PURE__ */ e.createElement("p", {
+      className: `py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${l.toLowerCase() === t.label.toLowerCase() ? "bg-[var(--color-blue-100)]" : ""} ${t.isDisabled ? "text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed" : ""}`
+    }, t.label))))
+  });
 };
 export {
-  I as Dropdown
+  m as KebabMenu
 };
 //# sourceMappingURL=index20.js.map

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import { 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":["jsxRuntimeExports","useState","useRef","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","handleDropDownOptionClick","dropDownOption","_a","_b","optionChip","option","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","jsxs","jsx","renderDropdownContents","renderDropdownSelect","drowDownSelectClass","value"],"mappings":"AAuBa,SAAA,KAAAA,SAAA;AAAA,SAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAAC,IAA8B,CAACC,MAAU;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIP,EAAS,EAAK,GACpD,CAACQ,GAAuBC,CAAwB,IAAIT,EAAwB,OAAMK,KAAA,gBAAAA,EAAO,yBAAwB,EAAE,GACnHK,IAAaT,EAAuC,IAAI,GAExD,EAAE,UAAAU,IAAW,IAAI,iBAAAC,IAAkB,IAAI,iBAAAC,IAAkB,IAAO,iBAAAC,GAAiB,aAAAC,IAAc,SAAa,IAAAV,GAE5GW,IAA4B,CAACC,MAAwB;AAPhD,QAAAC,GAAAC;AAQT,IAAAV,EAAyBQ,CAAc,IACvCC,IAAAR,EAAW,YAAX,QAAAQ,EAAoB,gBACpBC,IAAAd,KAAA,gBAAAA,EAAO,kBAAP,QAAAc,EAAA,KAAAd,GAAuBY;AAAA,EACzB,GAEMG,IAAa,CAACC,MACfhB,KAAA,QAAAA,EAAO,mBACDA,KAAA,gBAAAA,EAAO,iBAAiBgB,2BAEzB,QAAK,EAAA,WAAW,eAAgB,UAAOA,EAAAV,CAAQ,KAAKI,EAAY,CAAA,GAGpEO,IAAoB,CAACL,MAAkC;AACrD,UAAAM,IAAYN,EAAeN,CAAQ,GACnCa,IAAwBhB,EAAsBG,CAAQ,KAAKI,GAC3DU,IAAmBb,KAAA,QAAAA,EAAiB,SACtCK,EAAeL,CAAe,KAAKJ,EAAsBI,CAAe,IACxE,IACEc,IAAmBb,KAAmBU,MAAcC,KAAyBC;AAC5E,WAAAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEN,WAAW,uFAAuFD,IAAmB,aAAa,EAAE;AAAA,QACpI,SAAS,MAAMV,EAA0BC,CAAc;AAAA,QAEtD,UAAA;AAAA,UAAAG,EAAW,EAAC,GAAGH,GAAgB,kBAAAS,GAAiB;AAAA,UAChDA,KAAqBE,gBAAAA,EAAAA,IAAA,OAAA,EAAI,UAAQ,IAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAL7B,gBAAgBL,CAAS;AAAA,IAMhC;AAAA,EACF,GAEMM,IAAyB,MACtBD,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,qCAAqC,UAAAd,KAAA,gBAAAA,EAAiB,IAAI,CAACG,MAAmBK,EAAkBL,CAAc,GAAG,CAAA,GAGnIa,IAAuB,MAAM;AAE3B,UAAAC,IAAsB,yDADRzB,IAAiB,mCAAmC,gCACwB;AAEzF,WAAAqB,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAWI,GAClB,UAAA;AAAA,MAAAX,EAAWZ,CAAqB;AAAA,MACjCoB,gBAAAA,EAAAA,IAACzB,KAAK,MAAK,QAAO,WAAW,WAAWG,IAAiB,eAAe,EAAE,wBAAyB,CAAA;AAAA,IAAA,GACrG;AAAA,EACJ;AAGE,SAAAsB,gBAAAA,MAAC,SAAI,WAAU,sBAAqB,OAAOvB,KAAA,gBAAAA,EAAO,OAChD,UAACuB,gBAAAA,MAAA1B,GAAA,EAAQ,KAAKQ,GAAY,uBAAuBmB,GAAwB,cAAc,QAAQ,yBAAyBC,GAAsB,iBAAiB,CAACE,MAAUzB,EAAkByB,CAAK,EAAA,CAAG,EACtM,CAAA;AAEJ;"}
+{"version":3,"file":"index20.js","sources":["../src/components/KebabMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { MenuItemProps } from 'src/components/MenuItem';\n// import { Icon } from 'src/components/Icon';\n\nexport interface KebabMenuProps {\n  className?: string;\n  automationId?: string;\n  menuItems: MenuItemProps[];\n  variant?: 'primary' | 'secondary';\n  onMenuItemClick?: (label: string) => void;\n  activeItem?: string;\n}\n\nexport const KebabMenu: FC<KebabMenuProps> = ({ menuItems, onMenuItemClick, activeItem='', variant = 'primary', className = '', automationId = '' }) => {\n    const getIcon = () => {\n      // TODO: Use Icon component once SVG issue is resolved\n        switch(variant) {\n            case 'primary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            case 'secondary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              default:\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n        }\n    }\n  return <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`${displayPopover ? 'bg-[var(--color-blue-100)]' : ''} hover:bg-[var(--color-blue-100)] rounded-[6px] transition-all duration-300 w-max`}>\n            {getIcon()}\n        </div>\n      )}\n      renderPopoverContents={({ closePopoverCb }) => (\n        <div className=\"min-w-[212px]\">\n          {menuItems.map((item, index) => (\n            <div key={index} className='w-full text-left p-2' onClick={() => {\n                if(onMenuItemClick && !item.isDisabled) {\n                    onMenuItemClick(item.label);\n                  }\n                  !item.isDisabled && closePopoverCb()}}>\n                <p className={`py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${activeItem.toLowerCase() === item.label.toLowerCase() ? 'bg-[var(--color-blue-100)]' : ''} ${item.isDisabled ? 'text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed' : ''}`}>{item.label}</p></div>\n          ))}\n        </div>\n      )}\n    />\n};\n"],"names":["KebabMenu","menuItems","onMenuItemClick","activeItem","variant","className","automationId","getIcon","React","createElement","xmlns","width","height","viewBox","fill","d","stroke","strokeLinecap","strokeLinejoin","Popover","position","renderPopoverSrcElement","displayPopover","renderPopoverContents","closePopoverCb","map","item","index","key","onClick","isDisabled","label","toLowerCase"],"mappings":"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"}

package/dist/index21.js

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

package/dist/index21.js.map

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

@@ -1,10 +1,48 @@
-import { j as o } from "./index24.js";
+import t, { useEffect as o } from "react";
+import { Icon as v } from "./index4.js";
 /* empty css        */
-const p = (r) => {
-  const { noOfRows: n = 2, noOfColumns: t = 4, colSpan: s = [2, 0, 0] } = r;
-  return [...Array(n)].map((l, e) => /* @__PURE__ */ o.jsx("tr", { className: "loader", children: [...Array(t)].map((m, a) => /* @__PURE__ */ o.jsx("td", { colSpan: s[a], children: /* @__PURE__ */ o.jsx("div", { className: "loading-animation" }) }, `td-${a}`)) }, `tr-${e}`));
+const N = (i) => {
+  const {
+    content: c,
+    className: n = "",
+    alignment: m,
+    noShadow: u,
+    position: l = "fxd",
+    isOpen: a,
+    displayCloseSidebar: f,
+    onClose: y,
+    onSidebarUnmount: r,
+    onPathChange: s,
+    style: b,
+    automationId: h,
+    currentPath: d = ""
+  } = i;
+  o(() => () => {
+    r && r();
+  }, []), o(() => (document.body.style.overflow = a ? "hidden" : "scroll", () => {
+    document.body.style.overflow = "auto";
+  }), [a]), o(() => {
+    s && s(d);
+  }, [d]);
+  const p = () => {
+    let e = "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 += a ? " open-sidebar" : " closed-sidebar", e;
+  };
+  return /* @__PURE__ */ t.createElement("div", {
+    className: p(),
+    style: b,
+    "data-automation-id": h
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "overlay-content"
+  }, f && /* @__PURE__ */ t.createElement("span", {
+    className: "overlay-close",
+    onClick: y,
+    "data-automation-id": "sidebar_overlay_close"
+  }, /* @__PURE__ */ t.createElement(v, {
+    name: "close"
+  })), c));
 };
 export {
-  p as TableContentLoader
+  N as SidebarOverlay
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/TableContentLoader/index.tsx"],"sourcesContent":["import { 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=\"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":["jsxRuntimeExports","TableContentLoader","props","noOfRows","noOfColumns","colSpan","_","index","jsx","idx"],"mappings":"AASa,SAAA,KAAAA,SAAA;AAAA,OAAA;AAAA,MAAAC,IAAkD,CAACC,MAAU;AAClE,QAAA,EAAE,UAAAC,IAAW,GAAG,aAAAC,IAAc,GAAG,SAAAC,IAAU,CAAC,GAAG,GAAG,CAAC,EAAM,IAAAH;AAE/D,SAAO,CAAC,GAAG,MAAMC,CAAQ,CAAC,EAAE,IAAI,CAACG,GAAGC,MACjCC,gBAAAA,EAAAA,IAAA,MAAA,EAAuB,WAAU,UAC/B,UAAA,CAAC,GAAG,MAAMJ,CAAW,CAAC,EAAE,IAAI,CAACE,GAAGG,4BAC9B,MAAG,EAAA,SAASJ,EAAQI,CAAG,GACtB,gCAAC,OAAI,EAAA,WAAU,oBAAoB,CAAA,KADL,MAAMA,CAAG,EAEzC,CACD,KALM,MAAMF,CAAK,EAMpB,CACD;AACH;"}
+{"version":3,"file":"index22.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  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 = '' } = 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 = '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=\"close\" />\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","document","body","overflow","getSidebarClassName","defaultClass","length","React","createElement","onClick","name"],"mappings":"AAqBO,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,EAAA,IAAOb;AAExLH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRiB,SAASC,KAAKJ,MAAMK,WAAWV,IAAS,WAAW,UAE5C,MAAM;AACFS,aAAAA,KAAKJ,MAAMK,WAAW;AAAA,EACjC,IACC,CAACV,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMI,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBhB,EAAUiB,SAAS,IAAI,IAAIjB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDe,KAAgBd,IAAW,eAAe,IAC1Cc,KAAgBb,EAASc,SAAS,IAAI,IAAId,CAAQ,KAAK,IACvDa,KAAgBZ,IAAS,kBAAkB,mBACpCY;AAAAA,EACT;AAGEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAWe,EAAoB;AAAA,IAAGN,OAAAA;AAAAA,IAAc,sBAAoBC;AAAAA,EAAAA,GACvES,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EACZK,GAAAA,KACCc,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMnB,WAAU;AAAA,IAAgBoB,SAASd;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEa,gBAAAA,EAAAA,cAACvB,GAAI;AAAA,IAACyB,MAAK;AAAA,EAAA,CAAS,CAChB,GAEPtB,CACE,CACF;AAET;"}