se-design 0.0.113 → 0.0.115

package/dist/index21.js

@@ -1,26 +1,42 @@
-import e from "react";
-import { Badge as c } from "./index7.js";
-const m = (t) => {
-  const {
-    label: a,
-    color: l,
-    onClick: r = () => {
-    },
-    tag: o
-  } = t;
-  return /* @__PURE__ */ e.createElement("div", {
-    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, a), o && /* @__PURE__ */ e.createElement(c, {
-    label: o
-  }));
+import s, { useState as x, useEffect as f } from "react";
+/* empty css         */
+const d = ({
+  className: u = "",
+  automationId: a = "",
+  defaultChecked: o = !1,
+  disabled: e = !1,
+  onChange: i,
+  checkMarkType: c = "",
+  label: r = ""
+}) => {
+  const [n, l] = x(o);
+  f(() => {
+    l(o);
+  }, [o]);
+  const m = () => {
+    e || (l((t) => !t), i == null || i(!n));
+  }, b = () => {
+    const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
+    return e && !c ? "disabled" : e && c === "tick" ? "disabled-tick" : e && c === "minus-checkbox" ? "disabled-minus-checkbox" : c === "minus-checkbox" && n ? `minus-checkbox ${t}` : n ? `checked ${t}` : `unchecked ${t}`;
+  };
+  return /* @__PURE__ */ s.createElement("div", {
+    className: "se-design-checkbox-ctn"
+  }, /* @__PURE__ */ s.createElement("label", {
+    className: `se-design-checkbox ${u} ${b()}`,
+    "data-automation-id": a,
+    tabIndex: e ? -1 : 0
+  }, /* @__PURE__ */ s.createElement("input", {
+    type: "checkbox",
+    checked: n,
+    onChange: m,
+    disabled: e
+  }), /* @__PURE__ */ s.createElement("span", {
+    className: "checkbox-item"
+  })), /* @__PURE__ */ s.createElement("label", {
+    className: "checkbox-label"
+  }, r));
 };
 export {
-  m as ColorCodedLabel
+  d as Checkbox
 };
 //# sourceMappingURL=index21.js.map

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.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;"}
+{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport \"./style.scss\";\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  checkMarkType?: \"tick\" | \"minus-checkbox\" | \"\";\n  label?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n}) => {\n  \n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = () => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === \"minus-checkbox\" ? !prev : !prev));\n    onChange?.(!isChecked);\n  };\n\n  const getCheckBoxClassName = () => { \n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n    if (disabled && !checkMarkType) return 'disabled';\n    if (disabled && checkMarkType === \"tick\") return 'disabled-tick';\n    if (disabled && checkMarkType === \"minus-checkbox\") return 'disabled-minus-checkbox';\n    if (checkMarkType === \"minus-checkbox\" && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`} data-automation-id={automationId} tabIndex={disabled ? -1 : 0}>\n        <input \n          type=\"checkbox\" \n          checked={isChecked} \n          onChange={handleClick} \n          disabled={disabled}\n        />\n        <span className=\"checkbox-item\"></span>\n      </label>\n      <label className=\"checkbox-label\">{label}</label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","isChecked","setIsChecked","useState","useEffect","handleClick","prev","getCheckBoxClassName","focusClass","React","createElement","tabIndex","type","checked"],"mappings":";;AAaO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AACV,MAAM;AAEJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASP,CAAc;AAEzDQ,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaN,CAAc;AAAA,EAAA,GAC1B,CAACA,CAAc,CAAC;AAEnB,QAAMS,IAAcA,MAAM;AACxB,IAAIR,MACJK,EAAcI,OAA+C,CAACA,CAAa,GAC3ER,KAAAA,QAAAA,EAAW,CAACG;AAAAA,EACd,GAEMM,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AACfX,WAAAA,KAAY,CAACE,IAAsB,aACnCF,KAAYE,MAAkB,SAAe,kBAC7CF,KAAYE,MAAkB,mBAAyB,4BACvDA,MAAkB,oBAAoBE,IAAkB,kBAAkBO,CAAU,KACjFP,IAAY,WAAWO,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE;AAGEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOhB,WAAW,sBAAsBA,CAAS,IAAIa,EAAsB,CAAA;AAAA,IAAI,sBAAoBZ;AAAAA,IAAcgB,UAAUd,IAAW,KAAK;AAAA,EAAA,GACzIa,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEE,MAAK;AAAA,IACLC,SAASZ;AAAAA,IACTH,UAAUO;AAAAA,IACVR,UAAAA;AAAAA,EAAAA,CACD,GACDa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAsB,CAAA,CACjC,GACPe,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOhB,WAAU;AAAA,EAAgB,GAAEM,CAAa,CAC7C;AAET;"}

package/dist/index22.js

@@ -1,78 +1,26 @@
-var I = Object.defineProperty, O = Object.defineProperties;
-var R = Object.getOwnPropertyDescriptors;
-var b = Object.getOwnPropertySymbols;
-var T = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
-var C = (e, t, l) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, E = (e, t) => {
-  for (var l in t || (t = {}))
-    T.call(t, l) && C(e, l, t[l]);
-  if (b)
-    for (var l of b(t))
-      _.call(t, l) && C(e, l, t[l]);
-  return e;
-}, S = (e, t) => O(e, R(t));
-import c, { useState as x, useRef as j, useEffect as B } from "react";
-import { Popover as J } from "./index16.js";
-import { Icon as D } from "./index4.js";
-const F = (e) => {
-  const [t, l] = x(!1), [r, f] = x(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), v = j(null), {
-    selectBy: m = "",
-    optionsUniqueBy: d = "",
-    displaySelected: h = !1,
-    dropDownOptions: i,
-    defaultText: y = "Select",
-    iconColor: g = "var(--color-gray-700)",
-    disabled: s = !1
-  } = e;
-  B(() => {
-    f((e == null ? void 0 : e.defaultSelectedValue) || {});
-  }, [e == null ? void 0 : e.defaultSelectedValue]);
-  const N = (n) => {
-    var a, o;
-    f(n), (a = v.current) == null || a.togglePopover(), (o = e == null ? void 0 : e.onOptionClick) == null || o.call(e, n);
-  }, w = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ c.createElement("span", {
-    className: "option-chip"
-  }, n[m] || y), k = (n) => {
-    const a = n[m], o = r[m] || y, P = d != null && d.length ? n[d] == r[d] : !0, u = h && a === o && P;
-    return /* @__PURE__ */ c.createElement("div", {
-      key: `$drop-option-${a}`,
-      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
-      onClick: () => N(n)
-    }, w(S(E({}, n), {
-      isOptionSelected: u
-    })), u && /* @__PURE__ */ c.createElement(D, {
-      name: "checkmark",
-      stroke: g
-    }));
-  }, $ = () => /* @__PURE__ */ c.createElement("div", {
-    className: "dropdown-content dropdown-options"
-  }, i == null ? void 0 : i.map((n) => k(n))), V = () => {
-    const a = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"} `;
-    return /* @__PURE__ */ c.createElement("div", {
-      className: a
-    }, w(r), /* @__PURE__ */ c.createElement(D, {
-      name: "chevron-down",
-      className: `ml-auto ${t ? "rotate-180" : ""} transition-transform`,
-      stroke: g
-    }));
-  };
-  return /* @__PURE__ */ c.createElement("div", {
-    className: `se-design-dropdown-container ${e == null ? void 0 : e.className}`,
-    style: e == null ? void 0 : e.style
-  }, (e == null ? void 0 : e.label) && /* @__PURE__ */ c.createElement("div", {
-    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
-  }, e == null ? void 0 : e.label), /* @__PURE__ */ c.createElement("div", {
-    style: e == null ? void 0 : e.style,
-    className: `${s ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
-  }, /* @__PURE__ */ c.createElement(J, {
-    ref: v,
-    renderPopoverContents: $,
-    contentWidth: "full",
-    renderPopoverSrcElement: V,
-    onPopoverToggle: (n) => l(n),
-    disabled: s
-  })));
+import e from "react";
+import { Badge as c } from "./index8.js";
+const m = (t) => {
+  const {
+    label: a,
+    color: l,
+    onClick: r = () => {
+    },
+    tag: o
+  } = t;
+  return /* @__PURE__ */ e.createElement("div", {
+    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, a), o && /* @__PURE__ */ e.createElement(c, {
+    label: o
+  }));
 };
 export {
-  F as Dropdown
+  m as ColorCodedLabel
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

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

@@ -1,138 +1,79 @@
-import e from "react";
-import { Popover as c } from "./index16.js";
-const m = ({
-  menuItems: n,
-  onMenuItemClick: o,
-  activeItem: l = "",
-  variant: a = "primary",
-  className: C = "",
-  automationId: i = ""
-}) => {
-  const 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"
-        }));
-    }
+var I = Object.defineProperty, O = Object.defineProperties;
+var R = Object.getOwnPropertyDescriptors;
+var w = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var C = (e, t, l) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, E = (e, t) => {
+  for (var l in t || (t = {}))
+    T.call(t, l) && C(e, l, t[l]);
+  if (w)
+    for (var l of w(t))
+      _.call(t, l) && C(e, l, t[l]);
+  return e;
+}, S = (e, t) => O(e, R(t));
+import c, { useState as x, useRef as j, useEffect as B } from "react";
+import { Popover as J } from "./index17.js";
+import { Icon as D } from "./index5.js";
+const F = (e) => {
+  const [t, l] = x(!1), [r, f] = x(() => (e == null ? void 0 : e.defaultSelectedValue) || {}), v = j(null), {
+    selectBy: m = "",
+    optionsUniqueBy: d = "",
+    displaySelected: h = !1,
+    dropDownOptions: i,
+    defaultText: y = "Select",
+    iconColor: g = "var(--color-gray-700)",
+    disabled: s = !1
+  } = e;
+  B(() => {
+    f((e == null ? void 0 : e.defaultSelectedValue) || {});
+  }, [e == null ? void 0 : e.defaultSelectedValue]);
+  const N = (n) => {
+    var a, o;
+    f(n), (a = v.current) == null || a.togglePopover(), (o = e == null ? void 0 : e.onOptionClick) == null || o.call(e, n);
+  }, b = (n) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(n) : /* @__PURE__ */ c.createElement("span", {
+    className: "option-chip"
+  }, n[m] || y), k = (n) => {
+    const a = n[m], o = r[m] || y, P = d != null && d.length ? n[d] == r[d] : !0, u = h && a === o && P;
+    return /* @__PURE__ */ c.createElement("div", {
+      key: `$drop-option-${a}`,
+      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
+      onClick: () => N(n)
+    }, b(S(E({}, n), {
+      isOptionSelected: u
+    })), u && /* @__PURE__ */ c.createElement(D, {
+      name: "checkmark",
+      stroke: g
+    }));
+  }, V = () => /* @__PURE__ */ c.createElement("div", {
+    className: "dropdown-content dropdown-options"
+  }, i == null ? void 0 : i.map((n) => k(n))), $ = () => {
+    const a = `dropdown-src-element flex px-3 py-2 border rounded-md ${t ? "border-[var(--color-gray-900)]" : "border-[var(--color-gray-200)]"} `;
+    return /* @__PURE__ */ c.createElement("div", {
+      className: a
+    }, b(r), /* @__PURE__ */ c.createElement(D, {
+      name: "chevron",
+      rotation: t ? "180" : "0",
+      className: "ml-auto transition-transform",
+      stroke: g
+    }));
   };
-  return /* @__PURE__ */ e.createElement(c, {
-    className: C,
-    position: "bottom-left",
-    automationId: i,
-    renderPopoverSrcElement: ({
-      displayPopover: r
-    }) => /* @__PURE__ */ e.createElement("div", {
-      className: `se-design-kebab-menu ${r ? "bg-[var(--color-blue-100)]" : ""} hover:bg-[var(--color-blue-100)] rounded-[4px] transition-all duration-300 w-max`
-    }, s()),
-    renderPopoverContents: ({
-      closePopoverCb: r
-    }) => /* @__PURE__ */ e.createElement("div", {
-      className: "min-w-[212px] px-1 py-2"
-    }, n.map((t, d) => /* @__PURE__ */ e.createElement("div", {
-      key: d,
-      className: "w-full text-left",
-      onClick: () => {
-        o && !t.isDisabled && o(t), !t.isDisabled && r();
-      }
-    }, /* @__PURE__ */ e.createElement("p", {
-      className: `py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${l.toLowerCase() === t.label.toLowerCase() ? "bg-[var(--color-blue-100)]" : ""} ${t.isDisabled ? "text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed" : ""}`
-    }, t.label))))
-  });
+  return /* @__PURE__ */ c.createElement("div", {
+    className: `se-design-dropdown-container ${e == null ? void 0 : e.className}`,
+    style: e == null ? void 0 : e.style
+  }, (e == null ? void 0 : e.label) && /* @__PURE__ */ c.createElement("div", {
+    className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
+  }, e == null ? void 0 : e.label), /* @__PURE__ */ c.createElement("div", {
+    style: e == null ? void 0 : e.style,
+    className: `${s ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
+  }, /* @__PURE__ */ c.createElement(J, {
+    ref: v,
+    renderPopoverContents: V,
+    contentWidth: "full",
+    renderPopoverSrcElement: $,
+    onPopoverToggle: (n) => l(n),
+    disabled: s
+  })));
 };
 export {
-  m as KebabMenu
+  F as Dropdown
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/KebabMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { MenuItemProps } from 'src/components/MenuItem';\n// import { Icon } from 'src/components/Icon';\n\nexport interface KebabMenuProps {\n  className?: string;\n  automationId?: string;\n  menuItems: MenuItemProps[];\n  variant?: 'primary' | 'secondary';\n  onMenuItemClick?: (item: MenuItemProps) => void;\n  activeItem?: string;\n}\n\nexport const KebabMenu: FC<KebabMenuProps> = ({ menuItems, onMenuItemClick, activeItem='', variant = 'primary', className = '', automationId = '' }) => {\n    const getIcon = () => {\n      // TODO: Use Icon component once SVG issue is resolved\n        switch(variant) {\n            case 'primary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            case 'secondary':\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" fill=\"#1088E7\"/>\n                <path d=\"M12 14C12.5523 14 13 13.5523 13 13C13 12.4477 12.5523 12 12 12C11.4477 12 11 12.4477 11 13C11 13.5523 11.4477 14 12 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13C18 13.5523 18.4477 14 19 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14Z\" stroke=\"#1088E7\"strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              default:\n                return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" fill=\"#5E6673\"/>\n                <path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"#5E6673\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n        }\n    }\n  return <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`se-design-kebab-menu ${displayPopover ? 'bg-[var(--color-blue-100)]' : ''} hover:bg-[var(--color-blue-100)] rounded-[4px] transition-all duration-300 w-max`}>\n            {getIcon()}\n        </div>\n      )}\n      renderPopoverContents={({ closePopoverCb }) => (\n        <div className=\"min-w-[212px] px-1 py-2\">\n          {menuItems.map((item, index) => (\n            <div key={index} className='w-full text-left' onClick={() => {\n                if(onMenuItemClick && !item.isDisabled) {\n                    onMenuItemClick(item);\n                  }\n                  !item.isDisabled && closePopoverCb()}}>\n                <p className={`py-2 px-1 hover:bg-[var(--color-blue-100)] rounded-[6px] ${activeItem.toLowerCase() === item.label.toLowerCase() ? 'bg-[var(--color-blue-100)]' : ''} ${item.isDisabled ? 'text-[var(--color-gray-600)] hover:bg-transparent cursor-not-allowed' : ''}`}>{item.label}</p></div>\n          ))}\n        </div>\n      )}\n    />\n};\n"],"names":["KebabMenu","menuItems","onMenuItemClick","activeItem","variant","className","automationId","getIcon","React","createElement","xmlns","width","height","viewBox","fill","d","stroke","strokeLinecap","strokeLinejoin","Popover","position","renderPopoverSrcElement","displayPopover","renderPopoverContents","closePopoverCb","map","item","index","key","onClick","isDisabled","toLowerCase","label"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => props?.defaultSelectedValue || {}\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor} `;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div className={`se-design-dropdown-container ${props?.className}`} style={props?.style}>\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","rotation","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"mappings":"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"}

package/dist/index24.js

@@ -1,22 +1,61 @@
-import e from "react";
-/* empty css         */
-const p = (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: "se-design-table-content-loader"
-  }, [...Array(o)].map((c, t) => /* @__PURE__ */ e.createElement("td", {
-    colSpan: r[t],
-    key: `td-${t}`
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "loading-animation"
-  })))));
+var d = Object.defineProperty, f = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var u = (n, e, r) => e in n ? d(n, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[e] = r, i = (n, e) => {
+  for (var r in e || (e = {}))
+    g.call(e, r) && u(n, r, e[r]);
+  if (s)
+    for (var r of s(e))
+      k.call(e, r) && u(n, r, e[r]);
+  return n;
+}, m = (n, e) => f(n, v(e));
+import l from "react";
+import { Popover as E } from "./index17.js";
+import { MenuList as x } from "./index16.js";
+import { Icon as y } from "./index5.js";
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var r = arguments[e];
+      for (var o in r) ({}).hasOwnProperty.call(r, o) && (n[o] = r[o]);
+    }
+    return n;
+  }, c.apply(null, arguments);
+}
+const O = ({
+  menuItems: n,
+  variant: e = "primary",
+  className: r = "",
+  automationId: o = ""
+}) => {
+  const b = (t) => n.map((a) => m(i({}, a), {
+    onClick: () => {
+      a.onClick && a.onClick(a), t();
+    }
+  })), p = () => e === "secondary" ? {
+    fill: "var(--color-blue-500)",
+    stroke: "var(--color-blue-500)"
+  } : {};
+  return /* @__PURE__ */ l.createElement(E, {
+    className: r,
+    position: "bottom-left",
+    automationId: o,
+    renderPopoverSrcElement: ({
+      displayPopover: t
+    }) => /* @__PURE__ */ l.createElement("div", {
+      className: `se-design-kebab-menu ${t ? "bg-[var(--color-blue-100)]" : ""} hover:bg-[var(--color-blue-100)] rounded-[4px] transition-all duration-300 w-max`
+    }, /* @__PURE__ */ l.createElement(y, c({
+      name: "kebab-menu"
+    }, p()))),
+    renderPopoverContents: ({
+      closePopoverCb: t
+    }) => /* @__PURE__ */ l.createElement(x, {
+      items: b(t)
+    })
+  });
 };
 export {
-  p as TableContentLoader
+  O as KebabMenu
 };
 //# sourceMappingURL=index24.js.map