@situaction/traq-ui-ste 1.2.13 → 1.2.15

package/dist/components/icon-button/IconButton.js

@@ -1,50 +1,50 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as w } from "react";
-import '../../styles/IconButton.css';const z = "_button_wxoc4_30", m = "_flexHorizontalCenter_wxoc4_185", t = {
+import '../../styles/IconButton.css';const z = "_button_olxwb_30", m = "_flexHorizontalCenter_olxwb_187", t = {
   button: z,
-  "button-round": "_button-round_wxoc4_58",
-  "button-primary": "_button-primary_wxoc4_61",
-  "button-secondary": "_button-secondary_wxoc4_75",
-  "button-tertiary": "_button-tertiary_wxoc4_91",
-  "button-ghost": "_button-ghost_wxoc4_107",
-  "button-icon": "_button-icon_wxoc4_124",
-  "button-icon-selected": "_button-icon-selected_wxoc4_136",
-  "button-error": "_button-error_wxoc4_145",
-  "button-size-xl": "_button-size-xl_wxoc4_158",
-  "button-size-l": "_button-size-l_wxoc4_163",
-  "button-size-m": "_button-size-m_wxoc4_168",
-  "button-size-s": "_button-size-s_wxoc4_173",
-  "button-size-menu": "_button-size-menu_wxoc4_178",
+  "button-round": "_button-round_olxwb_57",
+  "button-primary": "_button-primary_olxwb_60",
+  "button-secondary": "_button-secondary_olxwb_74",
+  "button-tertiary": "_button-tertiary_olxwb_90",
+  "button-ghost": "_button-ghost_olxwb_106",
+  "button-icon": "_button-icon_olxwb_123",
+  "button-icon-selected": "_button-icon-selected_olxwb_135",
+  "button-error": "_button-error_olxwb_144",
+  "button-size-xl": "_button-size-xl_olxwb_160",
+  "button-size-l": "_button-size-l_olxwb_165",
+  "button-size-m": "_button-size-m_olxwb_170",
+  "button-size-s": "_button-size-s_olxwb_175",
+  "button-size-menu": "_button-size-menu_olxwb_180",
   flexHorizontalCenter: m
 }, d = w(
   ({
     mode: o = "primary",
     size: n = "m",
-    error: e,
-    selected: _,
-    round: u,
-    disabled: r,
-    children: b,
-    onClick: c,
+    error: b,
+    selected: e,
+    round: _,
+    disabled: u,
+    children: r,
+    onClick: l,
     ...s
   }, i) => {
-    const x = () => e ? "error" : o, l = [
+    const x = () => b ? "error" : o, c = [
       t.button,
       t[`button-${x()}`],
-      u && t["button-round"],
+      _ && t["button-round"],
       t[`button-size-${n}`],
-      _ && o === "icon" && t["button-icon-selected"],
+      e && o === "icon" && t["button-icon-selected"],
       t.flexHorizontalCenter
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ a(
       "button",
       {
         ref: i,
-        className: l,
-        onClick: c,
-        disabled: r,
+        className: c,
+        onClick: l,
+        disabled: u,
         ...s,
-        children: b
+        children: r
       }
     );
   }

package/dist/components/input/Input.js

@@ -1,85 +1,85 @@
-import { jsxs as p, jsx as e, Fragment as a } from "react/jsx-runtime";
-import { useState as c, useRef as _ } from "react";
-import '../../styles/Input.css';const j = "_fullWidth_1pmuq_141", N = "_flexHorizontalBetween_1pmuq_145", W = "_flexHorizontal_1pmuq_145", t = {
-  "input-style": "_input-style_1pmuq_30",
-  "input-style-disabled": "_input-style-disabled_1pmuq_60",
-  "input-style-focused": "_input-style-focused_1pmuq_71",
-  "input-style-secondary": "_input-style-secondary_1pmuq_78",
-  "input-style-ghost": "_input-style-ghost_1pmuq_92",
-  "input-style-error": "_input-style-error_1pmuq_95",
-  "input-container": "_input-container_1pmuq_105",
-  "input-style-size-xl": "_input-style-size-xl_1pmuq_109",
-  "input-style-size-l": "_input-style-size-l_1pmuq_116",
-  "input-style-size-m": "_input-style-size-m_1pmuq_123",
-  "input-style-size-s": "_input-style-size-s_1pmuq_130",
-  "input-style-radius": "_input-style-radius_1pmuq_137",
-  fullWidth: j,
-  flexHorizontalBetween: N,
-  flexHorizontal: W
-}, R = ({
+import { jsxs as r, jsx as e, Fragment as a } from "react/jsx-runtime";
+import { useState as _, useRef as p } from "react";
+import '../../styles/Input.css';const N = "_fullWidth_1ch0x_143", W = "_flexHorizontalBetween_1ch0x_147", I = "_flexHorizontal_1ch0x_147", t = {
+  "input-style": "_input-style_1ch0x_30",
+  "input-style-disabled": "_input-style-disabled_1ch0x_59",
+  "input-style-focused": "_input-style-focused_1ch0x_70",
+  "input-style-secondary": "_input-style-secondary_1ch0x_77",
+  "input-style-ghost": "_input-style-ghost_1ch0x_91",
+  "input-style-error": "_input-style-error_1ch0x_94",
+  "input-container": "_input-container_1ch0x_104",
+  "input-style-size-xl": "_input-style-size-xl_1ch0x_111",
+  "input-style-size-l": "_input-style-size-l_1ch0x_118",
+  "input-style-size-m": "_input-style-size-m_1ch0x_125",
+  "input-style-size-s": "_input-style-size-s_1ch0x_132",
+  "input-style-radius": "_input-style-radius_1ch0x_139",
+  fullWidth: N,
+  flexHorizontalBetween: W,
+  flexHorizontal: I
+}, V = ({
   sizeStyle: y = "m",
   labelUnit: l,
   status: n = "default",
-  childrenLeft: u,
-  childrenRight: i,
-  round: d,
-  disabled: o,
-  defaultValue: f,
-  fullWidth: m = !1,
-  ...h
+  childrenLeft: i,
+  childrenRight: o,
+  round: h,
+  disabled: u,
+  defaultValue: d,
+  fullWidth: f = !1,
+  ...x
 }) => {
-  const [z, r] = c(!1), [q, x] = c(f || ""), g = _(null), s = _(null), B = () => r(!0), C = () => r(!1), H = (F) => {
-    x(F.target.value);
-  }, S = () => {
+  const [z, c] = _(!1), [m, g] = _(d || ""), B = p(null), s = p(null), C = () => c(!0), H = () => c(!1), S = (j) => {
+    g(j.target.value);
+  }, v = () => {
     s.current && s.current.focus();
-  }, v = [
+  }, w = [
     t["input-style"],
     t[`input-style-size-${y}`],
-    d && t["input-style-radius"],
+    h && t["input-style-radius"],
     t.flexHorizontalBetween,
-    m && t.fullWidth
-  ].filter(Boolean).join(" "), w = [
+    f && t.fullWidth
+  ].filter(Boolean).join(" "), F = [
     z && t["input-style-focused"],
-    o && t["input-style-disabled"],
+    u && t["input-style-disabled"],
     n === "secondary" && t["input-style-secondary"],
     n === "ghost" && t["input-style-ghost"]
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: g,
-      className: `${v} ${(() => {
+      ref: B,
+      className: `${w} ${(() => {
         switch (n) {
           case "error":
             return t["input-style-error"];
           default:
-            return w;
+            return F;
         }
       })()}`,
-      onFocus: B,
-      onBlur: C,
-      onClick: S,
+      onFocus: C,
+      onBlur: H,
+      onClick: v,
       children: [
-        u && /* @__PURE__ */ e(a, { children: u }),
+        i && /* @__PURE__ */ e(a, { children: i }),
         /* @__PURE__ */ e("div", { className: t["input-container"], children: /* @__PURE__ */ e(
           "input",
           {
             autoCorrect: "off",
-            disabled: o,
-            value: q,
-            onChange: H,
+            disabled: u,
+            value: m,
+            onChange: S,
             ref: s,
-            ...h
+            ...x
           }
         ) }),
-        /* @__PURE__ */ p(a, { children: [
+        /* @__PURE__ */ r(a, { children: [
           l && /* @__PURE__ */ e("div", { children: l }),
-          i && /* @__PURE__ */ e("span", { className: t.flexHorizontal, children: i })
+          o && /* @__PURE__ */ e("span", { className: t.flexHorizontal, children: o })
         ] })
       ]
     }
   );
 };
 export {
-  R as Input
+  V as Input
 };

package/dist/components/loading/Loading.d.ts

@@ -0,0 +1,38 @@
+export type LoadingSize = "s" | "m" | "l" | "xl";
+export type LoadingStatus = "idle" | "loading" | "complete";
+export interface LoadingHoverMeta {
+    status: LoadingStatus;
+    isHovering: boolean;
+}
+export interface LoadingClickMeta {
+    /** "clear" when complete is clearable */
+    intent: "clear";
+    /** true when the clear UI (X) is visible via hover/focus */
+    isHovering: boolean;
+}
+export interface LoadingProps {
+    /** Visual state */
+    status: LoadingStatus;
+    /** Size variant */
+    size?: LoadingSize;
+    /** Disable hover visuals + events */
+    disableHover?: boolean;
+    /**
+     * If provided, the "complete" state becomes clearable:
+     * - on hover/focus: shows an "X"
+     * - on click: calls onClear
+     */
+    onClear?: () => void;
+    /** Optional click event when status === "complete" AND clearable */
+    onClick?: (meta: LoadingClickMeta) => void;
+    /** Hover change event for ALL statuses (idle/loading/complete) */
+    onHoverChange?: (meta: LoadingHoverMeta) => void;
+    /** Optional className for layout integration */
+    className?: string;
+    /** Accessibility labels */
+    ariaLabelIdle?: string;
+    ariaLabelLoading?: string;
+    ariaLabelComplete?: string;
+    ariaLabelClear?: string;
+}
+export declare const Loading: ({ status, size, disableHover, onClear, onClick, onHoverChange, className, ariaLabelIdle, ariaLabelLoading, ariaLabelComplete, ariaLabelClear }: LoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/loading/Loading.js

@@ -0,0 +1,87 @@
+import { jsxs as X, jsx as n } from "react/jsx-runtime";
+import { useState as C, useMemo as y } from "react";
+import { Icon as r } from "../icon/Icon.js";
+import '../../styles/Loading.css';const B = "_size_s_ljbi5_30", F = "_size_m_ljbi5_35", P = "_size_l_ljbi5_40", v = "_size_xl_ljbi5_45", S = "_root_ljbi5_50", E = "_idle_ljbi5_72", M = "_spinner_ljbi5_76", q = "_spin_ljbi5_76", A = "_complete_ljbi5_82", D = "_iconCheck_ljbi5_86", G = "_iconX_ljbi5_87", J = "_hovered_ljbi5_108", K = "_clearable_ljbi5_129", O = "_flexHorizontalCenter_ljbi5_146", i = {
+  size_s: B,
+  size_m: F,
+  size_l: P,
+  size_xl: v,
+  root: S,
+  idle: E,
+  spinner: M,
+  spin: q,
+  complete: A,
+  iconCheck: D,
+  iconX: G,
+  hovered: J,
+  clearable: K,
+  flexHorizontalCenter: O
+}, k = (...e) => e.filter(Boolean).join(" "), Q = {
+  s: 10,
+  m: 14,
+  l: 18,
+  xl: 24
+}, V = ({
+  status: e,
+  size: d = "m",
+  disableHover: o = !1,
+  onClear: l,
+  onClick: _,
+  onHoverChange: a,
+  className: H,
+  ariaLabelIdle: z = "Idle",
+  ariaLabelLoading: p = "Loading",
+  ariaLabelComplete: f = "Complete",
+  ariaLabelClear: h = "Clear"
+}) => {
+  const m = e === "complete" && typeof l == "function", c = Q[d], [I, $] = C(!1), [u, s] = C(!1), t = o ? u : I || u, b = y(() => e === "idle" ? z : e === "loading" ? p : m && t ? h : f, [h, f, z, p, m, t, e]), j = k(
+    i.root,
+    i[`size_${d}`],
+    e === "idle" && i.idle,
+    e === "loading" && i.spinner,
+    e === "complete" && i.complete,
+    !o && t && i.hovered,
+    H
+  ), x = (N) => {
+    o || ($(N), a == null || a({ status: e, isHovering: N }));
+  }, g = o ? {} : {
+    onPointerEnter: () => x(!0),
+    onPointerLeave: () => x(!1)
+  }, w = () => {
+    _ == null || _({ intent: "clear", isHovering: t }), l == null || l();
+  };
+  return m ? /* @__PURE__ */ X(
+    "button",
+    {
+      type: "button",
+      className: k(j, i.clearable),
+      onClick: w,
+      onFocus: () => s(!0),
+      onBlur: () => s(!1),
+      "aria-label": b,
+      ...g,
+      children: [
+        /* @__PURE__ */ n("span", { className: `flexHorizontalCenter ${i.iconCheck}`, "aria-hidden": "true", children: /* @__PURE__ */ n(r, { icon: "Check", weight: "regular", size: c }) }),
+        /* @__PURE__ */ n("span", { className: `flexHorizontalCenter ${i.iconX}`, "aria-hidden": "true", children: /* @__PURE__ */ n(r, { icon: "X", weight: "regular", size: c }) })
+      ]
+    }
+  ) : /* @__PURE__ */ X(
+    "div",
+    {
+      className: j,
+      role: "img",
+      "aria-label": b,
+      ...g,
+      onFocus: () => s(!0),
+      onBlur: () => s(!1),
+      tabIndex: o ? -1 : 0,
+      children: [
+        e === "complete" ? /* @__PURE__ */ n("span", { className: `flexHorizontalCenter ${i.iconCheck}`, "aria-hidden": "true", children: /* @__PURE__ */ n(r, { icon: "Check", weight: "regular", size: c }) }) : null,
+        /* @__PURE__ */ n("span", { className: `flexHorizontalCenter ${i.iconX}`, "aria-hidden": "true", children: /* @__PURE__ */ n(r, { icon: "X", weight: "regular", size: c }) })
+      ]
+    }
+  );
+};
+export {
+  V as Loading
+};

package/dist/components/menu/Menu.js

@@ -1,122 +1,119 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { useState as c, useRef as v, useEffect as M } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useState as c, useRef as M, useEffect as B } from "react";
 import { Button as $ } from "../button/Button.js";
 import { IconButton as f } from "../icon-button/IconButton.js";
 import { Icon as N } from "../icon/Icon.js";
 import { Modal as W } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
-const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_label_11eub_43", G = "_textEllipsis_11eub_47", J = "_pointer_11eub_52", K = "_fullImg_11eub_55", Q = "_menuParams_11eub_61", T = "_line_11eub_67", U = "_borderRadiusM_11eub_74", X = "_menuItem_11eub_78", Y = "_longLogo_11eub_87", Z = "_flexVerticalBetweenStart_11eub_92", ee = "_flexHorizontalBetween_11eub_99", le = "_flexHorizontalCenter_11eub_106", oe = "_flexVertical_11eub_92", ne = "_flexVerticalBetweenCenter_11eub_121", e = {
+const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_textEllipsis_11eub_47", G = "_pointer_11eub_52", J = "_fullImg_11eub_55", K = "_menuParams_11eub_61", Q = "_line_11eub_67", T = "_borderRadiusM_11eub_74", U = "_menuItem_11eub_78", X = "_longLogo_11eub_87", Y = "_flexVerticalBetweenStart_11eub_92", Z = "_flexHorizontalCenter_11eub_106", ee = "_flexVerticalBetweenCenter_11eub_121", e = {
   fullHeight: y,
   fullWidth: O,
   open: j,
   close: D,
   menuButton: q,
   closeIcon: A,
-  label: F,
-  textEllipsis: G,
-  pointer: J,
-  fullImg: K,
-  menuParams: Q,
-  line: T,
-  borderRadiusM: U,
-  menuItem: X,
-  longLogo: Y,
-  flexVerticalBetweenStart: Z,
-  flexHorizontalBetween: ee,
-  flexHorizontalCenter: le,
-  flexVertical: oe,
-  flexVerticalBetweenCenter: ne
-}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: m, logo: h, isOpen: p, defaultOpen: w = !1, selectedId: u }) => {
-  const [t, b] = c(w ?? !1), [x, g] = c(u ?? (s.length > 0 ? s[0].id : null)), H = v(null), [z, _] = c(!1), [I, C] = c(!1), [V, L] = c(null), [k, E] = c({}), R = v(null);
-  M(() => {
-    u != null && g(u);
+  textEllipsis: F,
+  pointer: G,
+  fullImg: J,
+  menuParams: K,
+  line: Q,
+  borderRadiusM: T,
+  menuItem: U,
+  longLogo: X,
+  flexVerticalBetweenStart: Y,
+  flexHorizontalCenter: Z,
+  flexVerticalBetweenCenter: ee
+}, ae = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: h, isOpen: p, defaultOpen: I = !1, selectedId: u }) => {
+  const [t, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
+  B(() => {
+    u != null && x(u);
   }, [u]);
-  const B = (l, i) => {
-    if (l.stopPropagation(), g(i), s) {
-      const n = s.find((a) => a.id === i);
-      n == null || n.onClick();
+  const v = (o, i) => {
+    if (o.stopPropagation(), x(i), s) {
+      const l = s.find((r) => r.id === i);
+      l == null || l.onClick();
     }
   }, S = () => {
-    b(!t), _(!1);
-  }, P = (l) => {
+    g(!t), _(!1);
+  }, P = (o) => {
     var i;
-    if (r) {
-      const n = r.find((a) => a.id === l);
-      if (!n) return;
-      if (n.content) {
-        const a = t ? "200px" : "40px";
-        L(n.content), E({ ...n.position, left: a }), C(!0);
+    if (a) {
+      const l = a.find((r) => r.id === o);
+      if (!l) return;
+      if (l.content) {
+        const r = t ? "200px" : "40px";
+        E(l.content), R({ ...l.position, left: r }), C(!0);
       } else
-        (i = n.onClick) == null || i.call(n);
+        (i = l.onClick) == null || i.call(l);
     }
   };
-  return M(() => {
+  return B(() => {
     p && p(t);
-  }, [t]), /* @__PURE__ */ o("nav", { ref: H, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
+  }, [t]), /* @__PURE__ */ n("nav", { ref: w, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
     /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ n(
         "div",
         {
           className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => S(),
           children: t ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
-            h && /* @__PURE__ */ o("img", { className: e.longLogo, src: h, alt: "Logo situaction" }),
-            /* @__PURE__ */ o(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ o(
+            h && /* @__PURE__ */ n("img", { className: e.longLogo, src: h, alt: "Logo situaction" }),
+            /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ n(
             "div",
             {
               className: e.closeIcon,
               onMouseEnter: () => _(!0),
               onMouseLeave: () => _(!1),
-              onClick: () => b(!t),
-              children: z || !m ? /* @__PURE__ */ o(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ o(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ o("img", { src: m, alt: "Logo situaction" })
+              onClick: () => g(!t),
+              children: H || !m ? /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ n("img", { src: m, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ o("div", { className: e.menuItem, children: s && s.map((l) => t ? /* @__PURE__ */ o("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ o(
+      /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => t ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
         $,
         {
-          mode: x === l.id ? "secondary" : "ghost",
-          label: l.label,
-          onClick: (i) => B(i, l.id),
-          childrenLeft: l.icon
+          mode: b === o.id ? "secondary" : "ghost",
+          label: o.label,
+          onClick: (i) => v(i, o.id),
+          childrenLeft: o.icon
         }
-      ) }, `button-${l.id}`) : /* @__PURE__ */ o("div", { className: e.textEllipsis, children: /* @__PURE__ */ o(
+      ) }, `button-${o.id}`) : /* @__PURE__ */ n("div", { className: e.textEllipsis, children: /* @__PURE__ */ n(
         f,
         {
-          mode: x === l.id ? "secondary" : "ghost",
-          children: l.icon,
-          onClick: (i) => B(i, l.id)
+          mode: b === o.id ? "secondary" : "ghost",
+          children: o.icon,
+          onClick: (i) => v(i, o.id)
         }
-      ) }, `icon-${l.id}`)) }),
-      /* @__PURE__ */ o("div", { className: e.line })
+      ) }, `icon-${o.id}`)) }),
+      /* @__PURE__ */ n("div", { className: e.line })
     ] }),
     /* @__PURE__ */ d("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
-      r && r.map((l) => /* @__PURE__ */ o(
+      a && a.map((o) => /* @__PURE__ */ n(
         "div",
         {
           className: `${e.fullWidth} ${e.textEllipsis}`,
-          onClick: () => P(l.id),
-          children: t ? /* @__PURE__ */ o("div", { className: e.menuButton, children: /* @__PURE__ */ o($, { mode: "ghost", label: l.label, childrenLeft: l.icon }, l.id) }) : /* @__PURE__ */ o(f, { mode: "ghost", children: l.icon })
+          onClick: () => P(o.id),
+          children: t ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n($, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(f, { mode: "ghost", children: o.icon })
         },
-        `param-icon-${l.id}`
+        `param-icon-${o.id}`
       )),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ n(
         W,
         {
-          ref: R,
+          ref: V,
           className: e.borderRadiusM,
-          open: I,
+          open: L,
           onClose: () => C(!1),
-          position: k,
-          children: V
+          position: z,
+          children: k
         }
       )
     ] })
   ] }) });
 };
 export {
-  fe as Menu
+  ae as Menu
 };

package/dist/components/panel/side-panel/SidePanel.js

@@ -1,46 +1,45 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as _, useRef as R, useEffect as y } from "react";
-import '../../../styles/SidePanel.css';const L = "_panel_lk5yy_1", x = "_openPanelBtn_lk5yy_9", v = "_box_lk5yy_18", b = "_panelLeft_lk5yy_29", B = "_panelRight_lk5yy_36", C = "_panelOpenedLeft_lk5yy_43", H = "_panelOpenedRight_lk5yy_47", S = "_panelHidden_lk5yy_51", E = "_displayPanel_lk5yy_55", N = "_hidePanel_lk5yy_59", e = {
-  panel: L,
-  openPanelBtn: x,
-  box: v,
-  panelLeft: b,
-  panelRight: B,
+import { useState as _, useRef as L, useEffect as f } from "react";
+import '../../../styles/SidePanel.css';const P = "_panel_lk5yy_1", x = "_box_lk5yy_18", v = "_panelLeft_lk5yy_29", b = "_panelRight_lk5yy_36", C = "_panelOpenedLeft_lk5yy_43", H = "_panelOpenedRight_lk5yy_47", S = "_panelHidden_lk5yy_51", E = "_displayPanel_lk5yy_55", N = "_hidePanel_lk5yy_59", e = {
+  panel: P,
+  box: x,
+  panelLeft: v,
+  panelRight: b,
   panelOpenedLeft: C,
   panelOpenedRight: H,
   panelHidden: S,
   displayPanel: E,
   hidePanel: N
 }, $ = ({
-  children: f,
+  children: y,
   width: a,
-  left: o = !0,
+  left: d = !0,
   opened: n = !1,
   onToggle: t
 }) => {
-  const [l, s] = _(n), [u, i] = _(n), p = R(null), m = {
+  const [l, s] = _(n), [u, i] = _(n), p = L(null), m = {
     "--dynamic-left": `-${a}`,
     "--dynamic-right": `-${a}`,
     width: a
-  }, h = o ? e.panelLeft : e.panelRight, P = o ? e.panelOpenedLeft : e.panelOpenedRight, k = [
+  }, h = d ? e.panelLeft : e.panelRight, O = d ? e.panelOpenedLeft : e.panelOpenedRight, R = [
     e.panel,
     h,
     !l && e.panelHidden,
-    l && P,
+    l && O,
     u ? e.displayPanel : e.hidePanel
   ].filter(Boolean).join(" ");
-  return y(() => {
+  return f(() => {
     n ? (i(!0), setTimeout(() => s(!0), 10)) : (s(!1), setTimeout(() => i(!1), 300));
-  }, [n]), y(() => {
-    const d = (O) => {
-      const c = O.target;
+  }, [n]), f(() => {
+    const o = (k) => {
+      const c = k.target;
       c.closest("[data-ignore-outside-click]") || p.current && !p.current.contains(c) && (s(!1), t == null || t(!1), setTimeout(() => i(!1), 300));
     };
     if (l)
-      return document.addEventListener("mousedown", d), () => {
-        document.removeEventListener("mousedown", d);
+      return document.addEventListener("mousedown", o), () => {
+        document.removeEventListener("mousedown", o);
       };
-  }, [l, t]), /* @__PURE__ */ r("div", { style: m, className: k, children: /* @__PURE__ */ r("div", { ref: p, className: e.box, children: f }) });
+  }, [l, t]), /* @__PURE__ */ r("div", { style: m, className: R, children: /* @__PURE__ */ r("div", { ref: p, className: e.box, children: y }) });
 };
 export {
   $ as SidePanel