se-design 0.0.97 → 0.0.99

package/dist/index10.js

@@ -1,26 +1,34 @@
-import { j as e } from "./index24.js";
-import { Button as s } from "./index4.js";
-const p = (c) => {
-  const {
-    title: t,
-    content: l,
-    successButtonType: n,
-    cancelButtonType: o,
-    successButtonText: i,
-    cancelButtonText: a,
-    cancelAction: r,
-    successAction: x
-  } = c;
-  return /* @__PURE__ */ e.jsx("div", { className: "fixed inset-0 flex items-start justify-center z-50 backdrop-brightness-50", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-14 w-[500px]", children: [
-    t && /* @__PURE__ */ e.jsx("div", { className: "text-lg font-semibold", children: t }),
-    /* @__PURE__ */ e.jsx("p", { className: "leading-normal", children: l }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-4 pt-2", children: [
-      /* @__PURE__ */ e.jsx(s, { type: o, onClick: r, label: a }),
-      /* @__PURE__ */ e.jsx(s, { type: n, onClick: x, label: i })
-    ] })
-  ] }) });
+import r, { useState as b, useRef as d, useEffect as a } from "react";
+const u = ({
+  content: l,
+  tooltipSrc: c,
+  position: t = "bottom-center",
+  displayOn: o = "hover"
+}) => {
+  const [i, f] = b(o === "always-on"), s = d(null);
+  a(() => {
+    const e = s.current;
+    e && (t == "bottom-center" ? (e.setAttribute("style", "left: 50%;transform: translateX(-50%);"), e.classList.add("before:left-[calc(50%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-left" ? (e.classList.add("before:left-[calc(10%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-right" ? (e.setAttribute("style", "right: 0;"), e.classList.add("before:right-[calc(10%+7px)]"), e.classList.add("before:top-[-7px]")) : t == "left" ? (e.setAttribute("style", "right: calc(100% + 10px);top:0;"), e.classList.add("before:right-[-6px]"), e.classList.add("before:top-0px")) : t == "right" && (e.setAttribute("style", "left: calc(100% + 10px);top:0;"), e.classList.add("before:left-[-6px]"), e.classList.add("before:top-0px")), o == "hover" && e.classList.add("group-hover:visible"));
+  }, [l]), a(() => {
+    const e = s.current;
+    e && (i ? e.classList.remove("invisible") : e.classList.add("invisible"));
+  }, [i]);
+  const p = () => {
+    o == "click" && f((e) => !e);
+  };
+  return /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tooltip group relative",
+    onClick: p
+  }, /* @__PURE__ */ r.createElement("div", {
+    className: "cursor-pointer",
+    id: "tooltip-trigger"
+  }, c), /* @__PURE__ */ r.createElement("div", {
+    ref: s,
+    id: "tooltip-content",
+    className: "flex justify-center px-3 py-2 min-w-24 max-w-60 absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px] before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block before:absolute before:rounded-tl-sm before:rotate-45"
+  }, l));
 };
 export {
-  p as Modal
+  u as Tooltip
 };
 //# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -1 +1 @@
-{"version":3,"file":"index10.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Button } from 'src/components/Button';\n\nexport interface ModalProps {\n  title?: string;\n  content: string;\n  successButtonText: string;\n  cancelButtonText: string;\n  successButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';\n  cancelButtonType: 'primary' | 'secondary' | 'negative' | 'negative-secondary';\n  cancelAction?: () => void;\n  successAction?: () => void;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    content,\n    successButtonType,\n    cancelButtonType,\n    successButtonText,\n    cancelButtonText,\n    cancelAction,\n    successAction\n  } = props;\n\n  return (\n    <div className=\"fixed inset-0 flex items-start justify-center z-50 backdrop-brightness-50\">\n      <div className=\"flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-14 w-[500px]\">\n        {title && <div className=\"text-lg font-semibold\">{title}</div>}\n        <p className=\"leading-normal\">{content}</p>\n        <div className=\"flex items-center justify-end gap-4 pt-2\">\n          <Button type={cancelButtonType} onClick={cancelAction} label={cancelButtonText} />\n          <Button type={successButtonType} onClick={successAction} label={successButtonText} />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","Button","Modal","props","title","content","successButtonType","cancelButtonType","successButtonText","cancelButtonText","cancelAction","successAction","jsxs","jsx"],"mappings":"AAca,SAAA,KAAAA,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,MAAAC,IAAwB,CAACC,MAAU;AACxC,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACER;AAEJ,+BACG,OAAI,EAAA,WAAU,6EACb,UAACS,gBAAAA,EAAA,KAAA,OAAA,EAAI,WAAU,qFACZ,UAAA;AAAA,IAAAR,KAAUS,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,yBAAyB,UAAMT,GAAA;AAAA,IACvDS,gBAAAA,EAAA,IAAA,KAAA,EAAE,WAAU,kBAAkB,UAAQR,GAAA;AAAA,IACvCO,gBAAAA,EAAAA,KAAC,OAAI,EAAA,WAAU,4CACb,UAAA;AAAA,MAAAC,gBAAAA,MAACZ,KAAO,MAAMM,GAAkB,SAASG,GAAc,OAAOD,GAAkB;AAAA,4BAC/ER,GAAO,EAAA,MAAMK,GAAmB,SAASK,GAAe,OAAOH,EAAmB,CAAA;AAAA,IAAA,EACrF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"index10.js","sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from \"react\";\n\nexport interface TooltipProps {\n  /**\n   * Tooltip contents\n   */\n  content: string;\n  /**\n   * Tooltip position\n   */\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\";\n  /**\n   * Display tooltip on Hover, Click or Always\n   */\n  displayOn?: 'hover' | 'click' | 'always-on';\n  /**\n   * Tooltip trigger contents\n   */\n  tooltipSrc?: React.ReactNode;\n}\n\nexport const Tooltip = ({ content, tooltipSrc, position = 'bottom-center', displayOn = 'hover' }: TooltipProps) => {\n  const [displayTooltip, setDisplayTooltip] = useState(displayOn === 'always-on');\n  const tooltipContentRef = useRef<HTMLDivElement>(null);;\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return\n    }\n    \n    if(position == 'bottom-center') {\n      tooltipContent.setAttribute(\"style\", `left: 50%;transform: translateX(-50%);`);\n      tooltipContent.classList.add(`before:left-[calc(50%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-left') {\n      tooltipContent.classList.add(`before:left-[calc(10%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-right') {\n      tooltipContent.setAttribute(\"style\", `right: 0;`);\n      tooltipContent.classList.add(`before:right-[calc(10%+7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'left') {\n      tooltipContent.setAttribute(\"style\", `right: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:right-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    } else if(position == 'right') {\n      tooltipContent.setAttribute(\"style\", `left: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:left-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    }\n\n    if(displayOn == 'hover') {\n      tooltipContent.classList.add(`group-hover:visible`);\n    }\n  }, [content]);\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return;\n    }\n    if(displayTooltip) {\n      tooltipContent.classList.remove(`invisible`);\n    } else {\n      tooltipContent.classList.add(`invisible`);\n    }\n  }, [displayTooltip])\n\n  const onTooltipSrcClick = () => {\n    if(displayOn == 'click') {\n      setDisplayTooltip((displayTooltip) => !displayTooltip)\n    }\n  }\n\n  return (\n    <div className=\"se-design-tooltip group relative\" onClick={onTooltipSrcClick}>\n      <div className=\"cursor-pointer\" id=\"tooltip-trigger\">\n        {tooltipSrc}\n      </div>\n      <div\n        ref={tooltipContentRef}\n        id=\"tooltip-content\"\n        className=\"flex justify-center px-3 py-2 min-w-24 max-w-60\n          absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px]\n          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block\n          before:absolute before:rounded-tl-sm before:rotate-45\"\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Tooltip","content","tooltipSrc","position","displayOn","displayTooltip","setDisplayTooltip","useState","tooltipContentRef","useRef","useEffect","tooltipContent","current","setAttribute","classList","add","remove","onTooltipSrcClick","React","createElement","className","onClick","id","ref"],"mappings":";AAqBO,MAAMA,IAAUA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,YAAAA;AAAAA,EAAYC,UAAAA,IAAW;AAAA,EAAiBC,WAAAA,IAAY;AAAsB,MAAM;AACjH,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAASH,MAAc,WAAW,GACxEI,IAAoBC,EAAuB,IAAI;AAErDC,EAAAA,EAAU,MAAM;AACd,UAAMC,IAAiBH,EAAkBI;AAEzC,IAAID,MAIDR,KAAY,mBACEU,EAAAA,aAAa,SAAS,wCAAwC,GAC9DC,EAAAA,UAAUC,IAAI,6BAA6B,GAC3CD,EAAAA,UAAUC,IAAI,mBAAmB,KACxCZ,KAAY,iBACLW,EAAAA,UAAUC,IAAI,6BAA6B,GAC3CD,EAAAA,UAAUC,IAAI,mBAAmB,KACxCZ,KAAY,kBACLU,EAAAA,aAAa,SAAS,WAAW,GACjCC,EAAAA,UAAUC,IAAI,8BAA8B,GAC5CD,EAAAA,UAAUC,IAAI,mBAAmB,KACxCZ,KAAY,UACLU,EAAAA,aAAa,SAAS,iCAAiC,GACvDC,EAAAA,UAAUC,IAAI,qBAAqB,GACnCD,EAAAA,UAAUC,IAAI,gBAAgB,KACrCZ,KAAY,YACLU,EAAAA,aAAa,SAAS,gCAAgC,GACtDC,EAAAA,UAAUC,IAAI,oBAAoB,GAClCD,EAAAA,UAAUC,IAAI,gBAAgB,IAG5CX,KAAa,WACCU,EAAAA,UAAUC,IAAI,qBAAqB;AAAA,EACpD,GACC,CAACd,CAAO,CAAC,GAEZS,EAAU,MAAM;AACd,UAAMC,IAAiBH,EAAkBI;AAEzC,IAAID,MAGDN,IACcS,EAAAA,UAAUE,OAAO,WAAW,IAE5BF,EAAAA,UAAUC,IAAI,WAAW;AAAA,EAC1C,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMY,IAAoBA,MAAM;AAC9B,IAAGb,KAAa,WACKC,EAAAA,CAAAA,MAAmB,CAACA,CAAc;AAAA,EAEzD;AAGEa,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmCC,SAASJ;AAAAA,EAAAA,GACzDE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAiBE,IAAG;AAAA,EAChCpB,GAAAA,CACE,GACLgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEI,KAAKf;AAAAA,IACLc,IAAG;AAAA,IACHF,WAAU;AAAA,EAG8C,GAEvDnB,CACE,CACF;AAET;"}

package/dist/index11.js

@@ -1,34 +1,34 @@
-import { j as r } from "./index24.js";
-import { useState as p, useRef as d, useEffect as a } from "react";
-const u = ({ content: l, tooltipSrc: c, position: t = "bottom-center", displayOn: o = "hover" }) => {
-  const [i, f] = p(o === "always-on"), s = d(null);
-  a(() => {
-    const e = s.current;
-    e && (t == "bottom-center" ? (e.setAttribute("style", "left: 50%;transform: translateX(-50%);"), e.classList.add("before:left-[calc(50%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-left" ? (e.classList.add("before:left-[calc(10%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-right" ? (e.setAttribute("style", "right: 0;"), e.classList.add("before:right-[calc(10%+7px)]"), e.classList.add("before:top-[-7px]")) : t == "left" ? (e.setAttribute("style", "right: calc(100% + 10px);top:0;"), e.classList.add("before:right-[-6px]"), e.classList.add("before:top-0px")) : t == "right" && (e.setAttribute("style", "left: calc(100% + 10px);top:0;"), e.classList.add("before:left-[-6px]"), e.classList.add("before:top-0px")), o == "hover" && e.classList.add("group-hover:visible"));
-  }, [l]), a(() => {
-    const e = s.current;
-    e && (i ? e.classList.remove("invisible") : e.classList.add("invisible"));
-  }, [i]);
-  const n = () => {
-    o == "click" && f((e) => !e);
-  };
-  return /* @__PURE__ */ r.jsxs("div", { className: "group relative", onClick: n, children: [
-    /* @__PURE__ */ r.jsx("div", { className: "cursor-pointer", id: "tooltip-trigger", children: c }),
-    /* @__PURE__ */ r.jsx(
-      "div",
-      {
-        ref: s,
-        id: "tooltip-content",
-        className: `flex justify-center px-3 py-2 min-w-24 max-w-60
-          absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px]
-          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block
-          before:absolute before:rounded-tl-sm before:rotate-45`,
-        children: l
-      }
-    )
-  ] });
+import t from "react";
+import { Badge as s } from "./index7.js";
+import { Icon as g } from "./index4.js";
+const v = (l) => {
+  const {
+    label: a = "",
+    icon: e,
+    tag: r = "",
+    iconPosition: o = "right",
+    onClick: n,
+    isActive: i = !1
+  } = l, c = (m) => /* @__PURE__ */ t.createElement(g, {
+    name: m
+  });
+  return /* @__PURE__ */ t.createElement("div", {
+    className: `se-design-menu-item flex items-center justify-between p-2 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer rounded-[6px] gap-2 ${i ? "bg-[var(--color-blue-100)]" : ""}`,
+    onClick: () => n && n({
+      label: a,
+      tag: r,
+      icon: e,
+      iconPosition: o
+    })
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: "flex items-center gap-1"
+  }, o === "left" && e && c(e), /* @__PURE__ */ t.createElement("span", {
+    className: "text-[var(--color-gray-900)]"
+  }, a), o === "right" && e && c(e)), r && /* @__PURE__ */ t.createElement(s, {
+    label: r
+  }));
 };
 export {
-  u as Tooltip
+  v as MenuItem
 };
 //# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from \"react\";\n\nexport interface TooltipProps {\n  /**\n   * Tooltip contents\n   */\n  content: string;\n  /**\n   * Tooltip position\n   */\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\";\n  /**\n   * Display tooltip on Hover, Click or Always\n   */\n  displayOn?: 'hover' | 'click' | 'always-on';\n  /**\n   * Tooltip trigger contents\n   */\n  tooltipSrc?: React.ReactNode;\n}\n\nexport const Tooltip = ({ content, tooltipSrc, position = 'bottom-center', displayOn = 'hover' }: TooltipProps) => {\n  const [displayTooltip, setDisplayTooltip] = useState(displayOn === 'always-on');\n  const tooltipContentRef = useRef<HTMLDivElement>(null);;\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return\n    }\n    \n    if(position == 'bottom-center') {\n      tooltipContent.setAttribute(\"style\", `left: 50%;transform: translateX(-50%);`);\n      tooltipContent.classList.add(`before:left-[calc(50%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-left') {\n      tooltipContent.classList.add(`before:left-[calc(10%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-right') {\n      tooltipContent.setAttribute(\"style\", `right: 0;`);\n      tooltipContent.classList.add(`before:right-[calc(10%+7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'left') {\n      tooltipContent.setAttribute(\"style\", `right: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:right-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    } else if(position == 'right') {\n      tooltipContent.setAttribute(\"style\", `left: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:left-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    }\n\n    if(displayOn == 'hover') {\n      tooltipContent.classList.add(`group-hover:visible`);\n    }\n  }, [content]);\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return;\n    }\n    if(displayTooltip) {\n      tooltipContent.classList.remove(`invisible`);\n    } else {\n      tooltipContent.classList.add(`invisible`);\n    }\n  }, [displayTooltip])\n\n  const onTooltipSrcClick = () => {\n    if(displayOn == 'click') {\n      setDisplayTooltip((displayTooltip) => !displayTooltip)\n    }\n  }\n\n  return (\n    <div className=\"group relative\" onClick={onTooltipSrcClick}>\n      <div className=\"cursor-pointer\" id=\"tooltip-trigger\">\n        {tooltipSrc}\n      </div>\n      <div\n        ref={tooltipContentRef}\n        id=\"tooltip-content\"\n        className=\"flex justify-center px-3 py-2 min-w-24 max-w-60\n          absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px]\n          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block\n          before:absolute before:rounded-tl-sm before:rotate-45\"\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","useState","useRef","useEffect","Tooltip","content","tooltipSrc","position","displayOn","displayTooltip","setDisplayTooltip","tooltipContentRef","tooltipContent","onTooltipSrcClick","jsxs","jsx"],"mappings":"AAqBa,SAAA,KAAAA,SAAA;AAAA,SAAA,YAAAC,GAAA,UAAAC,GAAA,aAAAC,SAAA;AAAA,MAAAC,IAAU,CAAC,EAAE,SAAAC,GAAS,YAAAC,GAAY,UAAAC,IAAW,iBAAiB,WAAAC,IAAY,cAA4B;AACjH,QAAM,CAACC,GAAgBC,CAAiB,IAAIT,EAASO,MAAc,WAAW,GACxEG,IAAoBT,EAAuB,IAAI;AAErD,EAAAC,EAAU,MAAM;AACd,UAAMS,IAAiBD,EAAkB;AAEzC,IAAIC,MAIDL,KAAY,mBACEK,EAAA,aAAa,SAAS,wCAAwC,GAC9DA,EAAA,UAAU,IAAI,6BAA6B,GAC3CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,iBACLK,EAAA,UAAU,IAAI,6BAA6B,GAC3CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,kBACLK,EAAA,aAAa,SAAS,WAAW,GACjCA,EAAA,UAAU,IAAI,8BAA8B,GAC5CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,UACLK,EAAA,aAAa,SAAS,iCAAiC,GACvDA,EAAA,UAAU,IAAI,qBAAqB,GACnCA,EAAA,UAAU,IAAI,gBAAgB,KACrCL,KAAY,YACLK,EAAA,aAAa,SAAS,gCAAgC,GACtDA,EAAA,UAAU,IAAI,oBAAoB,GAClCA,EAAA,UAAU,IAAI,gBAAgB,IAG5CJ,KAAa,WACCI,EAAA,UAAU,IAAI,qBAAqB;AAAA,EACpD,GACC,CAACP,CAAO,CAAC,GAEZF,EAAU,MAAM;AACd,UAAMS,IAAiBD,EAAkB;AAEzC,IAAIC,MAGDH,IACcG,EAAA,UAAU,OAAO,WAAW,IAE5BA,EAAA,UAAU,IAAI,WAAW;AAAA,EAC1C,GACC,CAACH,CAAc,CAAC;AAEnB,QAAMI,IAAoB,MAAM;AAC9B,IAAGL,KAAa,WACIE,EAAA,CAACD,MAAmB,CAACA,CAAc;AAAA,EAEzD;AAEA,SACGK,gBAAAA,EAAAA,KAAA,OAAA,EAAI,WAAU,kBAAiB,SAASD,GACvC,UAAA;AAAA,IAAAE,gBAAAA,MAAC,OAAI,EAAA,WAAU,kBAAiB,IAAG,mBAChC,UACHT,GAAA;AAAA,IACAS,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKJ;AAAA,QACL,IAAG;AAAA,QACH,WAAU;AAAA;AAAA;AAAA;AAAA,QAKT,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"index11.js","sources":["../src/components/MenuItem/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'components/Icon';\n\nexport type MenuItemProps = {\n  label: string;\n  tag?: string;\n  isDisabled?: boolean;\n  isActive?: boolean;\n  icon?: string;\n  iconPosition?: 'left' | 'right';\n  onClick?: (item: MenuItemProps) => void;\n};\n\nexport const MenuItem: FC<MenuItemProps> = (props) => {\n  const { label = '', icon, tag = '', iconPosition = \"right\", onClick, isActive = false } = props;\n\n  const getIconJsx = (icon: string) => {\n    return <Icon name={icon} />\n  }\n\n  return (\n    <div\n      className={`se-design-menu-item flex items-center justify-between p-2 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer rounded-[6px] gap-2 ${isActive ? 'bg-[var(--color-blue-100)]': ''}`}\n      onClick={() => onClick && onClick({label, tag, icon, iconPosition})}\n    >\n      <div className='flex items-center gap-1'>\n        {iconPosition === 'left' && icon && getIconJsx(icon)}\n        <span className=\"text-[var(--color-gray-900)]\">{label}</span>\n        {iconPosition === 'right' && icon && getIconJsx(icon)}\n      </div>\n      {tag && <Badge label={tag} />}\n    </div>\n  );\n};\n"],"names":["React__default","Badge","Icon","MenuItem","props","label","icon","tag","iconPosition","onClick","isActive","getIconJsx","React","createElement","name","className"],"mappings":"AAcO,OAAAA,OAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAA+BC,CAAUA,MAAA;AAC9C,QAAA;AAAA,IAAEC,OAAAA,IAAQ;AAAA,IAAIC,MAAAA;AAAAA,IAAMC,KAAAA,IAAM;AAAA,IAAIC,cAAAA,IAAe;AAAA,IAASC,SAAAA;AAAAA,IAASC,UAAAA,IAAW;AAAA,EAAA,IAAUN,GAEpFO,IAAaA,CAACL,MACXM,gBAAAA,EAAAC,cAACX,GAAI;AAAA,IAACY,MAAMR;AAAAA,EAAAA,CAAO;AAI1BM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEE,WAAW,8JAA8JL,IAAW,+BAA8B,EAAE;AAAA,IACpND,SAASA,MAAMA,KAAWA,EAAQ;AAAA,MAACJ,OAAAA;AAAAA,MAAOE,KAAAA;AAAAA,MAAKD,MAAAA;AAAAA,MAAME,cAAAA;AAAAA,IAAa,CAAA;AAAA,EAAA,GAElEK,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAU;AAAA,EAAA,GACZP,MAAiB,UAAUF,KAAQK,EAAWL,CAAI,GACnDO,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAME,WAAU;AAAA,EAAgCV,GAAAA,CAAY,GAC3DG,MAAiB,WAAWF,KAAQK,EAAWL,CAAI,CACjD,GACJC,KAAOK,gBAAAA,EAAAC,cAACZ,GAAK;AAAA,IAACI,OAAOE;AAAAA,EAAAA,CAAM,CACzB;AAET;"}

package/dist/index12.js

@@ -1,25 +1,22 @@
-import { j as r } from "./index24.js";
-import { Tag as l } from "./index8.js";
-import { Icon as m } from "./index5.js";
-const j = (i) => {
-  const { label: s = "", icon: e, tag: o = "", iconPosition: t = "right", onClick: n } = i, c = (a) => /* @__PURE__ */ r.jsx(m, { name: a });
-  return /* @__PURE__ */ r.jsxs(
-    "div",
-    {
-      className: "flex items-center justify-between p-2 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer rounded-[6px] gap-2",
-      onClick: () => n && n({ label: s, tag: o, icon: e, iconPosition: t }),
-      children: [
-        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-1", children: [
-          t === "left" && e && c(e),
-          /* @__PURE__ */ r.jsx("span", { className: "text-[var(--color-gray-900)]", children: s }),
-          t === "right" && e && c(e)
-        ] }),
-        o && /* @__PURE__ */ r.jsx(l, { label: o })
-      ]
+import o from "react";
+import { MenuItem as s } from "./index11.js";
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var r = arguments[e];
+      for (var t in r) ({}).hasOwnProperty.call(r, t) && (n[t] = r[t]);
     }
-  );
-};
+    return n;
+  }, a.apply(null, arguments);
+}
+const i = ({
+  items: n
+}) => /* @__PURE__ */ o.createElement("div", {
+  className: "se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2"
+}, n.map((e, r) => /* @__PURE__ */ o.createElement(s, a({}, e, {
+  key: `item-${r}`
+}))));
 export {
-  j as MenuItem
+  i as MenuList
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/MenuItem/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Tag } from 'components/Tag';\nimport { Icon } from 'components/Icon';\n\nexport type MenuItemProps = {\n  label: string;\n  tag?: string;\n  isDisabled?: boolean;\n  activeItem?: string;\n  icon?: string;\n  iconPosition?: 'left' | 'right';\n  onClick?: (item: MenuItemProps) => void;\n};\n\nexport const MenuItem: FC<MenuItemProps> = (props) => {\n  const { label = '', icon, tag = '', iconPosition = \"right\", onClick } = props;\n\n  const getIconJsx = (icon: string) => {\n    return <Icon name={icon} />\n  }\n\n  return (\n    <div\n      className=\"flex items-center justify-between p-2 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer rounded-[6px] gap-2\"\n      onClick={() => onClick && onClick({label, tag, icon, iconPosition})}\n    >\n      <div className='flex items-center gap-1'>\n        {iconPosition === 'left' && icon && getIconJsx(icon)}\n        <span className=\"text-[var(--color-gray-900)]\">{label}</span>\n        {iconPosition === 'right' && icon && getIconJsx(icon)}\n      </div>\n      {tag && <Tag label={tag} />}\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","Tag","Icon","MenuItem","props","label","icon","tag","iconPosition","onClick","getIconJsx","jsx","jsxs"],"mappings":"AAca,SAAA,KAAAA,SAAA;AAAA,SAAA,OAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAAC,IAA8B,CAACC,MAAU;AAC9C,QAAA,EAAE,OAAAC,IAAQ,IAAI,MAAAC,GAAM,KAAAC,IAAM,IAAI,cAAAC,IAAe,SAAS,SAAAC,EAAA,IAAYL,GAElEM,IAAa,CAACJ,MACXK,gBAAAA,EAAA,IAACT,GAAK,EAAA,MAAMI,EAAM,CAAA;AAIzB,SAAAM,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,MAAMH,KAAWA,EAAQ,EAAC,OAAAJ,GAAO,KAAAE,GAAK,MAAAD,GAAM,cAAAE,GAAa;AAAA,MAElE,UAAA;AAAA,QAACI,gBAAAA,EAAAA,KAAA,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAiBJ,MAAA,UAAUF,KAAQI,EAAWJ,CAAI;AAAA,UAClDK,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAU,gCAAgC,UAAMN,GAAA;AAAA,UACrDG,MAAiB,WAAWF,KAAQI,EAAWJ,CAAI;AAAA,QAAA,GACtD;AAAA,QACCC,KAAOI,gBAAAA,EAAAA,IAACV,GAAI,EAAA,OAAOM,EAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3B;AAEJ;"}
+{"version":3,"file":"index12.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n};\n\nexport const MenuList: FC<MenuListProps> = ({ items }) => {\n  return (\n    <div className=\"se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2\">\n      {items.map((item, i) => (\n        <MenuItem {...item} key={`item-${i}`} />\n      ))}\n    </div>\n  );\n};\n"],"names":["MenuList","items","React","createElement","className","map","item","i","MenuItem","_extends","key"],"mappings":";;;;;;;;;;;AAOO,MAAMA,IAA8BA,CAAC;AAAA,EAAEC,OAAAA;AAAM,MAEhDC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKC,WAAU;AACZH,GAAAA,EAAMI,IAAI,CAACC,GAAMC,MAChBJ,gBAAAA,EAAAA,cAACK,GAAQC,MAAKH,GAAI;AAAA,EAAEI,KAAK,QAAQH,CAAC;AAAK,CAAA,CAAA,CACxC,CACE;"}

package/dist/index13.js

@@ -1,8 +1,103 @@
-import { j as m } from "./index24.js";
-import { createElement as t } from "react";
-import { MenuItem as s } from "./index12.js";
-const n = ({ items: r }) => /* @__PURE__ */ m.jsx("div", { className: "border border-[var(--color-gray-200)] rounded shadow-md px-1 py-2", children: r.map((e, o) => /* @__PURE__ */ t(s, { ...e, key: `item-${o}` })) });
+var _ = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var v = (e, o, t) => o in e ? _(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, y = (e, o) => {
+  for (var t in o || (o = {}))
+    g.call(o, t) && v(e, t, o[t]);
+  if (l)
+    for (var t of l(o))
+      b.call(o, t) && v(e, t, o[t]);
+  return e;
+};
+var P = (e, o) => {
+  var t = {};
+  for (var r in e)
+    g.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && l)
+    for (var r of l(e))
+      o.indexOf(r) < 0 && b.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import h, { forwardRef as j, useState as D, useRef as w, useEffect as $, useImperativeHandle as z } from "react";
+function c() {
+  return c = Object.assign ? Object.assign.bind() : function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var t = arguments[o];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
+    }
+    return e;
+  }, c.apply(null, arguments);
+}
+const q = /* @__PURE__ */ j((H, x) => {
+  var u = H, {
+    className: e = "",
+    automationId: o = "",
+    position: t = "bottom-center",
+    popoverContentAutomationId: r = "",
+    contentWidth: C = "max",
+    renderPopoverContents: k,
+    renderPopoverSrcElement: E,
+    onPopoverToggle: i
+  } = u, R = P(u, [
+    "className",
+    "automationId",
+    "position",
+    "popoverContentAutomationId",
+    "contentWidth",
+    "renderPopoverContents",
+    "renderPopoverSrcElement",
+    "onPopoverToggle"
+  ]);
+  const [n, s] = D(!1), f = w(null), S = w(null);
+  $(() => {
+    if (i && i(n), n)
+      return document.body.addEventListener("click", p), () => document.body.removeEventListener("click", p);
+  }, [n]);
+  const p = (a) => {
+    const m = f.current;
+    if (!m) return;
+    const O = a.target;
+    m.contains(O) || s(!1);
+  }, d = () => {
+    s((a) => !a);
+  };
+  z(x, () => ({
+    togglePopover: d
+  }), []);
+  const L = {
+    "bottom-left": {
+      left: "0"
+    },
+    "bottom-right": {
+      right: "0"
+    },
+    "bottom-center": {
+      left: "50%",
+      transform: "translateX(-50%)"
+    }
+  };
+  return /* @__PURE__ */ h.createElement("div", c({
+    className: "se-design-popover-wrapper cursor-pointer relative" + (e.length > 0 ? ` ${e}` : "") + (n ? " open" : ""),
+    ref: f,
+    onClick: d,
+    "data-automation-id": o
+  }, R), E({
+    displayPopover: n
+  }), n && /* @__PURE__ */ h.createElement("div", {
+    className: `popover-content absolute shadow-md top-full border rounded-md z-[1000] ${C == "full" ? "w-full" : "w-max"}`,
+    style: y({
+      borderColor: "var(--color-gray-200)",
+      color: "var(--color-gray-900)",
+      backgroundColor: "var(--color-white)"
+    }, L[t]),
+    onClick: (a) => a.stopPropagation(),
+    ref: S,
+    "data-automation-id": r
+  }, k({
+    closePopoverCb: () => s(!1)
+  })));
+});
 export {
-  n as MenuList
+  q as Popover
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

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

package/dist/index14.js

@@ -1,66 +1,32 @@
-import { j as i } from "./index24.js";
-import { forwardRef as P, useState as k, useRef as p, useEffect as w, useImperativeHandle as R } from "react";
-const L = P(({
-  className: r = "",
-  automationId: f = "",
-  position: u = "bottom-center",
-  popoverContentAutomationId: d = "",
-  contentWidth: m = "max",
-  renderPopoverContents: v,
-  renderPopoverSrcElement: b,
-  onPopoverToggle: n,
-  ...g
-}, y) => {
-  const [o, t] = k(!1), s = p(null), h = p(null);
-  w(() => {
-    if (n && n(o), o)
-      return document.body.addEventListener("click", a), () => document.body.removeEventListener("click", a);
-  }, [o]);
-  const a = (e) => {
-    const c = s.current;
-    if (!c) return;
-    const C = e.target;
-    c.contains(C) || t(!1);
-  }, l = () => {
-    t((e) => !e);
-  };
-  R(y, () => ({ togglePopup: l }), []);
-  const x = {
-    "bottom-left": { left: "0" },
-    "bottom-right": { right: "0" },
-    "bottom-center": { left: "50%", transform: "translateX(-50%)" }
-  };
-  return /* @__PURE__ */ i.jsxs(
-    "div",
-    {
-      className: "popover-wrapper cursor-pointer relative" + (r.length > 0 ? ` ${r}` : "") + (o ? " open" : ""),
-      ref: s,
-      onClick: l,
-      "data-automation-id": f,
-      ...g,
-      children: [
-        b({ displayPopover: o }),
-        o && /* @__PURE__ */ i.jsx(
-          "div",
-          {
-            className: `popover-content absolute shadow-md top-full border rounded-md z-[1000] ${m == "full" ? "w-full" : "w-max"}`,
-            style: {
-              borderColor: "var(--color-gray-200)",
-              color: "var(--color-gray-900)",
-              backgroundColor: "var(--color-white)",
-              ...x[u]
-            },
-            onClick: (e) => e.stopPropagation(),
-            ref: h,
-            "data-automation-id": d,
-            children: v({ closePopoverCb: () => t(!1) })
-          }
-        )
-      ]
-    }
-  );
-});
+var c = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var d = (t, m) => {
+  var a = {};
+  for (var e in t)
+    f.call(t, e) && m.indexOf(e) < 0 && (a[e] = t[e]);
+  if (t != null && c)
+    for (var e of c(t))
+      m.indexOf(e) < 0 && u.call(t, e) && (a[e] = t[e]);
+  return a;
+};
+import l from "react";
+const x = (g) => {
+  var n = g, {
+    leftContainer: t,
+    centerContainer: m,
+    rightContainer: a,
+    className: e
+  } = n, r = d(n, [
+    "leftContainer",
+    "centerContainer",
+    "rightContainer",
+    "className"
+  ]);
+  return /* @__PURE__ */ l.createElement("header", {
+    className: `se-design-header ${e} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(r == null ? void 0 : r.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`
+  }, t && /* @__PURE__ */ l.createElement(l.Fragment, null, t), m && /* @__PURE__ */ l.createElement(l.Fragment, null, m), a && /* @__PURE__ */ l.createElement(l.Fragment, null, a));
+};
 export {
-  L as Popover
+  x as Header
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\n\n\nexport interface PopoverHandle {\n  togglePopup: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean }) => ReactNode;\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\";\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(({ \n  className = '',\n  automationId = '',\n  position = 'bottom-center',\n  popoverContentAutomationId = '',\n  contentWidth = 'max',\n  renderPopoverContents,\n  renderPopoverSrcElement,\n  onPopoverToggle,\n  ...props\n}, ref: ForwardedRef<PopoverHandle>) => {\n  const [displayPopover, setDisplayPopover] = useState(false);\n  const srcElementRef = useRef<HTMLDivElement>(null);\n  const popoverContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if(onPopoverToggle) {\n      onPopoverToggle(displayPopover);\n    }\n    if (displayPopover) {\n      document.body.addEventListener('click', clickListener);\n      return () => document.body.removeEventListener('click', clickListener);\n    }\n  }, [displayPopover]);\n  \n  const clickListener = (event: MouseEvent) => {\n    const currentDropRef = srcElementRef.current;\n    if (!currentDropRef) return;\n\n    const target = event.target as Node;\n    const isSourcePopover = currentDropRef.contains(target);\n    // if clicked source is parent or the popover-content, do not toggle dropdown.\n    if (!isSourcePopover) {\n      setDisplayPopover(false);\n    }\n  };\n\n  const togglePopup = () => {\n    setDisplayPopover((displayPopover) => !displayPopover);\n  };\n\n  useImperativeHandle(ref, () => ({ togglePopup }), []);\n\n  const popoverContentStyle =  {\n    'bottom-left': {left: '0'},\n    'bottom-right': {right: '0'},\n    'bottom-center': {left: '50%', transform: 'translateX(-50%)'}  \n  }\n\n  return (\n    <div\n      className={'popover-wrapper cursor-pointer relative' + (className.length > 0 ? ` ${className}` : '') + (displayPopover ? ' open' : '')}\n      ref={srcElementRef}\n      onClick={togglePopup}\n      data-automation-id={automationId}\n      {...props}\n    >\n      {renderPopoverSrcElement({ displayPopover })}\n      {displayPopover && (\n        <div\n          className={`popover-content absolute shadow-md top-full border rounded-md z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n          style={{\n            borderColor: 'var(--color-gray-200)',\n            color: 'var(--color-gray-900)',\n            backgroundColor: 'var(--color-white)',\n            ...popoverContentStyle[position]\n          }}\n          onClick={(e) => e.stopPropagation()}\n          ref={popoverContentRef}\n          data-automation-id={popoverContentAutomationId}\n        >\n          {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["jsxRuntimeExports","forwardRef","useState","useRef","useEffect","useImperativeHandle","Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","props","ref","displayPopover","setDisplayPopover","srcElementRef","popoverContentRef","clickListener","event","currentDropRef","target","togglePopup","popoverContentStyle","jsxs","jsx"],"mappings":"AAkBa,SAAA,KAAAA,SAAA;AAAA,SAAA,cAAAC,GAAA,YAAAC,GAAA,UAAAC,GAAA,aAAAC,GAAA,uBAAAC,SAAA;AAAA,MAAAC,IAAUL,EAAwC,CAAC;AAAA,EAC9D,WAAAM,IAAY;AAAA,EACZ,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,4BAAAC,IAA6B;AAAA,EAC7B,cAAAC,IAAe;AAAA,EACf,uBAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAAqC;AACtC,QAAM,CAACC,GAAgBC,CAAiB,IAAIhB,EAAS,EAAK,GACpDiB,IAAgBhB,EAAuB,IAAI,GAC3CiB,IAAoBjB,EAAuB,IAAI;AAErD,EAAAC,EAAU,MAAM;AAId,QAHGU,KACDA,EAAgBG,CAAc,GAE5BA;AACO,sBAAA,KAAK,iBAAiB,SAASI,CAAa,GAC9C,MAAM,SAAS,KAAK,oBAAoB,SAASA,CAAa;AAAA,EACvE,GACC,CAACJ,CAAc,CAAC;AAEb,QAAAI,IAAgB,CAACC,MAAsB;AAC3C,UAAMC,IAAiBJ,EAAc;AACrC,QAAI,CAACI,EAAgB;AAErB,UAAMC,IAASF,EAAM;AAGrB,IAFwBC,EAAe,SAASC,CAAM,KAGpDN,EAAkB,EAAK;AAAA,EAE3B,GAEMO,IAAc,MAAM;AACN,IAAAP,EAAA,CAACD,MAAmB,CAACA,CAAc;AAAA,EACvD;AAEA,EAAAZ,EAAoBW,GAAK,OAAO,EAAE,aAAAS,EAAY,IAAI,CAAA,CAAE;AAEpD,QAAMC,IAAuB;AAAA,IAC3B,eAAe,EAAC,MAAM,IAAG;AAAA,IACzB,gBAAgB,EAAC,OAAO,IAAG;AAAA,IAC3B,iBAAiB,EAAC,MAAM,OAAO,WAAW,mBAAkB;AAAA,EAC9D;AAGE,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,6CAA6CpB,EAAU,SAAS,IAAI,IAAIA,CAAS,KAAK,OAAOU,IAAiB,UAAU;AAAA,MACnI,KAAKE;AAAA,MACL,SAASM;AAAA,MACT,sBAAoBjB;AAAA,MACnB,GAAGO;AAAA,MAEH,UAAA;AAAA,QAAwBF,EAAA,EAAE,gBAAAI,GAAgB;AAAA,QAC1CA,KACCW,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,0EAA0EjB,KAAgB,SAAS,WAAW,OAAO;AAAA,YAChI,OAAO;AAAA,cACL,aAAa;AAAA,cACb,OAAO;AAAA,cACP,iBAAiB;AAAA,cACjB,GAAGe,EAAoBjB,CAAQ;AAAA,YACjC;AAAA,YACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,KAAKW;AAAA,YACL,sBAAoBV;AAAA,YAEnB,YAAsB,EAAE,gBAAgB,MAAMQ,EAAkB,EAAK,EAAG,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3E;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"index14.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n  className?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  className,\n  ...props\n}) => {\n  return (\n    <header className={`se-design-header ${className} sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","_a","_b","leftContainer","centerContainer","rightContainer","className","props","React","createElement","type","Fragment"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAA0BA,CAACC,MAMlC;AANkC,MAAAC,IAAAD,GACtCE;AAAAA,mBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,WAAAA;AAAAA,MAJsCJ,GAKnCK,IAAAA,EALmCL,GAKnCK;AAAAA,IAJHJ;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAIEE,SAAAA,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQH,WAAW,oBAAoBA,CAAS,0HAC9CC,KAAAA,gBAAAA,EAAOG,UAAS,UAAU,+BAA+B,EAAE;AAAA,EAC1D,GACAP,KAAiBK,gBAAAA,EAAAC,cAAAD,EAAAG,UAAA,MAAGR,CAAgB,GACpCC,KAAmBK,gBAAAA,EAAAA,cAAAD,EAAAG,UAAGP,MAAAA,CAAkB,GACxCC,KAAkBG,gBAAAA,EAAAC,cAAAD,EAAAG,UAAGN,MAAAA,CAAiB,CACjC;AAEZ;"}

package/dist/index15.js

@@ -1,15 +1,30 @@
-import { j as e } from "./index24.js";
-const i = ({
-  leftContainer: r,
-  centerContainer: x,
-  rightContainer: s,
-  ...t
-}) => /* @__PURE__ */ e.jsxs("header", { className: `sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(t == null ? void 0 : t.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`, children: [
-  r && /* @__PURE__ */ e.jsx(e.Fragment, { children: r }),
-  x && /* @__PURE__ */ e.jsx(e.Fragment, { children: x }),
-  s && /* @__PURE__ */ e.jsx(e.Fragment, { children: s })
-] });
+import e from "react";
+import { Popover as m } from "./index13.js";
+import { Icon as c } from "./index4.js";
+const d = ({
+  className: o = "",
+  automationId: n = "",
+  popoverContentAutomationId: a = "",
+  menuContent: t
+}) => /* @__PURE__ */ e.createElement(m, {
+  className: o,
+  position: "bottom-left",
+  automationId: n,
+  popoverContentAutomationId: a,
+  renderPopoverSrcElement: ({
+    displayPopover: r
+  }) => /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-hamburger-menu ${r ? "bg-[rgba(0,0,0,0.20)]" : ""} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`
+  }, /* @__PURE__ */ e.createElement(c, {
+    name: "hamburger"
+  })),
+  renderPopoverContents: (r) => /* @__PURE__ */ e.createElement("div", {
+    className: "min-w-[212px]"
+  }, t && /* @__PURE__ */ e.createElement("div", {
+    className: "menu-content"
+  }, t(r)))
+});
 export {
-  i as Header
+  d as HamburgerMenu
 };
 //# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.js","sources":["../src/components/Header/index.tsx"],"sourcesContent":["import { FC } from 'react';\n\nexport interface HeaderProps {\n  leftContainer?: React.ReactNode;\n  centerContainer?: React.ReactNode;\n  rightContainer?: React.ReactNode;\n  type?: string;\n}\n\nexport const Header: FC<HeaderProps> = ({\n  leftContainer,\n  centerContainer,\n  rightContainer,\n  ...props\n}) => {\n  return (\n    <header className={`sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${\n      props?.type === 'fixed' ? 'fixed left-0 right-0 top-0' : ''\n    }`}>\n      {leftContainer && <>{leftContainer}</>}\n      {centerContainer && <>{centerContainer}</>}\n      {rightContainer && <>{rightContainer}</>}\n    </header>\n  );\n};\n"],"names":["Header","leftContainer","centerContainer","rightContainer","props","jsxs"],"mappings":";AASO,MAAMA,IAA0B,CAAC;AAAA,EACtC,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,MAEIC,gBAAAA,EAAA,KAAC,YAAO,WAAW,yHACjBD,KAAA,gBAAAA,EAAO,UAAS,UAAU,+BAA+B,EAC3D,IACG,UAAA;AAAA,EAAAH,yCAAoB,UAAcA,EAAA,CAAA;AAAA,EAClCC,yCAAsB,UAAgBA,EAAA,CAAA;AAAA,EACtCC,yCAAqB,UAAeA,EAAA,CAAA;AAAA,GACvC;"}
+{"version":3,"file":"index15.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  menuContent?: (data: any) => React.ReactNode;\n}\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n  className = '',\n  automationId = '',\n  popoverContentAutomationId = '',\n  menuContent\n}) => {\n\n  return (\n    <Popover\n      className={className}\n      position='bottom-left'\n      automationId={automationId}\n      popoverContentAutomationId={popoverContentAutomationId}\n      renderPopoverSrcElement={({ displayPopover }) => (\n        <div className={`se-design-hamburger-menu ${displayPopover ? 'bg-[rgba(0,0,0,0.20)]' : ''} hover:bg-[rgba(0,0,0,0.20)] rounded-[6px] transition-all duration-300`}>\n          <Icon name='hamburger' />\n        </div>\n      )}\n      renderPopoverContents={(data) => (\n        <div className=\"min-w-[212px]\">\n          {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n        </div>\n      )}\n    />\n  );\n};\n"],"names":["HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","React","createElement","Popover","position","renderPopoverSrcElement","displayPopover","Icon","name","renderPopoverContents","data"],"mappings":";;;AAWO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AACF,MAGIC,gBAAAA,EAAAC,cAACC,GAAO;AAAA,EACNN,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BJ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAW,4BAA4BS,IAAiB,0BAA0B,EAAE;AAAA,EAAA,GACvFJ,gBAAAA,EAAAA,cAACK,GAAI;AAAA,IAACC,MAAK;AAAA,EAAA,CAAa,CACrB;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EACZG,GAAAA,KAAeE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}