@caspeco/casper-ui-library 4.0.0 → 4.0.1

package/dist/components/image-upload/image-cropper.js

@@ -1,63 +1,63 @@
-import { jsx as J } from "react/jsx-runtime";
-import { useRef as I, useState as K, useEffect as _ } from "react";
-import { adjustCrop as W, ScalingDirection as H, getAspectRatioValue as B, calculateHandlePositions as z, getCursorStyle as N, isPointInsideRect as P, getOppositeCorner as Q } from "./image-cropper.helper.js";
-function ee({
-  src: Y,
-  crop: F,
-  onCropCallback: V,
-  setPreviewImage: k,
-  aspectRatio: A
+import { jsx as O } from "react/jsx-runtime";
+import { useRef as R, useState as q, useEffect as j } from "react";
+import { adjustCrop as X, ScalingDirection as b, getAspectRatioValue as y, calculateHandlePositions as E, getCursorStyle as J, isPointInsideRect as _, getOppositeCorner as K } from "./image-cropper.helper.js";
+function $({
+  src: W,
+  crop: z,
+  onCropCallback: B,
+  setPreviewImage: Y,
+  aspectRatio: F
 }) {
-  const R = I(null), g = I(null), v = I(null), T = I(null), h = I({ left: 0, top: 0, width: 0, height: 0 }), u = I({
+  const S = R(null), m = R(null), v = R(null), C = R(null), s = R({ left: 0, top: 0, width: 0, height: 0 }), a = R({
     left: 0,
     top: 0
-  }), [G, U] = K("crosshair"), b = 10, D = (e) => {
-    if (g.current && v.current) {
+  }), [P, V] = q("crosshair"), T = 10, k = (e) => {
+    if (m.current && v.current) {
       const t = {
         width: v.current.width,
         height: v.current.height
-      }, o = W(h.current, g.current, t, e);
-      V(o);
+      }, o = X(s.current, m.current, t, e);
+      B(o);
     }
-  }, L = (e, t, o, w) => {
-    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.fillRect(0, 0, t.width, t.height), e.save(), e.beginPath(), e.rect(o.left, o.top, o.width, o.height), e.clip(), g.current && e.drawImage(g.current, 0, 0, t.width, t.height), e.restore(), e.strokeStyle = "rgba(255, 255, 255, 0.88)", e.lineWidth = 1, e.strokeRect(o.left, o.top, o.width, o.height), w !== "new-selection" && z(o, b).forEach(({ x: d, y: s, corner: S }) => {
-      const i = b / 2, p = 3, M = (C, c = 0) => {
-        e.strokeStyle = C, e.lineWidth = p + c, e.beginPath();
-        const n = Math.min(o.width / 2, 16), r = Math.min(o.height / 2, 16);
-        switch (S) {
+  }, A = (e, t, o, w) => {
+    e.fillStyle = "rgba(0, 0, 0, 0.5)", e.fillRect(0, 0, t.width, t.height), e.save(), e.beginPath(), e.rect(o.left, o.top, o.width, o.height), e.clip(), m.current && e.drawImage(m.current, 0, 0, t.width, t.height), e.restore(), e.strokeStyle = "rgba(255, 255, 255, 0.88)", e.lineWidth = 1, e.strokeRect(o.left, o.top, o.width, o.height), w !== "new-selection" && E(o, T).forEach(({ x: g, y: d, corner: M }) => {
+      const i = T / 2, p = 3, c = (n, r = 0) => {
+        e.strokeStyle = n, e.lineWidth = p + r, e.beginPath();
+        const l = Math.min(o.width / 2, 16), h = Math.min(o.height / 2, 16);
+        switch (M) {
           case "bottom-left":
-            e.moveTo(d + i, s - r + i), e.lineTo(d + i, s + i), e.lineTo(d + n + i, s + i);
+            e.moveTo(g + i, d - h + i), e.lineTo(g + i, d + i), e.lineTo(g + l + i, d + i);
             break;
           case "bottom-right":
-            e.moveTo(d + i, s - r + i), e.lineTo(d + i, s + i), e.lineTo(d - n + i, s + i);
+            e.moveTo(g + i, d - h + i), e.lineTo(g + i, d + i), e.lineTo(g - l + i, d + i);
             break;
           case "top-left":
-            e.moveTo(d + i, s + r + i), e.lineTo(d + i, s + i), e.lineTo(d + n + i, s + i);
+            e.moveTo(g + i, d + h + i), e.lineTo(g + i, d + i), e.lineTo(g + l + i, d + i);
             break;
           case "top-right":
-            e.moveTo(d + i, s + r + i), e.lineTo(d + i, s + i), e.lineTo(d - n + i, s + i);
+            e.moveTo(g + i, d + h + i), e.lineTo(g + i, d + i), e.lineTo(g - l + i, d + i);
             break;
         }
         e.stroke();
       };
-      M("#000", 1), M("#FFF");
+      c("#000", 1), c("#FFF");
     });
-  }, j = () => {
-    if (R.current && g.current && v.current) {
+  }, D = () => {
+    if (S.current && m.current && v.current) {
       const e = document.createElement("canvas");
-      e.width = g.current.width, e.height = g.current.height;
+      e.width = m.current.width, e.height = m.current.height;
       const t = e.getContext("2d"), o = {
         width: v.current.width,
         height: v.current.height
-      }, w = W(
-        h.current,
-        g.current,
+      }, w = X(
+        s.current,
+        m.current,
         o,
-        H.ToFullSize
+        b.ToFullSize
       );
       if (t)
         return t.drawImage(
-          g.current,
+          m.current,
           // Reference to the original image
           w.left,
           w.top,
@@ -71,126 +71,125 @@ function ee({
     }
     return null;
   };
-  _(() => {
-    const e = R.current, t = e == null ? void 0 : e.getContext("2d");
+  j(() => {
+    const e = S.current, t = e?.getContext("2d");
     if (!e || !t) return;
     const o = new Image();
-    o.src = Y, o.onload = () => {
-      const { width: s } = o, { height: S } = o, i = Math.min(528 / s, 418 / S), p = s * i, M = S * i;
-      e.width = p, e.height = M, t.drawImage(o, 0, 0, e.width, e.height), g.current = o, g.current && t.drawImage(g.current, 0, 0, e.width, e.height), v.current = {
+    o.src = W, o.onload = () => {
+      const { width: d } = o, { height: M } = o, i = Math.min(528 / d, 418 / M), p = d * i, c = M * i;
+      e.width = p, e.height = c, t.drawImage(o, 0, 0, e.width, e.height), m.current = o, m.current && t.drawImage(m.current, 0, 0, e.width, e.height), v.current = {
         width: p,
-        height: M
+        height: c
       };
-      let C, c, n;
-      if (F)
-        n = W(
-          F,
-          g.current,
+      let n, r, l;
+      if (z)
+        l = X(
+          z,
+          m.current,
           v.current,
-          H.ToDisplayedSize
+          b.ToDisplayedSize
         );
       else {
-        const r = B(A);
-        r ? p / M < r ? (C = p, c = C / r) : (c = M, C = c * r) : (C = p, c = M), n = {
-          width: C,
-          height: c,
-          left: (p - C) / 2,
-          top: (M - c) / 2
+        const h = y(F);
+        h ? p / c < h ? (n = p, r = n / h) : (r = c, n = r * h) : (n = p, r = c), l = {
+          width: n,
+          height: r,
+          left: (p - n) / 2,
+          top: (c - r) / 2
         };
       }
-      h.current = n, L(t, e, n, T.current), D(H.ToFullSize), k(j() || "");
+      s.current = l, A(t, e, l, C.current), k(b.ToFullSize), Y(D() || "");
     };
-  }, [Y]);
-  const y = () => {
-    const e = R.current, t = e == null ? void 0 : e.getContext("2d");
-    !t || !e || (t.clearRect(0, 0, e.width, e.height), g.current && t.drawImage(g.current, 0, 0, e.width, e.height), L(t, e, h.current, null));
-  }, O = (e) => {
-    const t = N(
+  }, [W]);
+  const L = () => {
+    const e = S.current, t = e?.getContext("2d");
+    !t || !e || (t.clearRect(0, 0, e.width, e.height), m.current && t.drawImage(m.current, 0, 0, e.width, e.height), A(t, e, s.current, null));
+  }, G = (e) => {
+    const t = J(
       e,
-      R,
-      h.current,
-      b,
-      z(h.current, b)
+      S,
+      s.current,
+      T,
+      E(s.current, T)
     );
-    U(t);
-  }, X = (e) => {
-    var M, C;
-    const t = R.current, o = t == null ? void 0 : t.getContext("2d");
+    V(t);
+  }, I = (e) => {
+    const t = S.current, o = t?.getContext("2d");
     if (!t || !o) return;
-    const w = t.getBoundingClientRect(), d = e.clientX - w.left, s = e.clientY - w.top;
-    let S = 0, i = 0;
-    u.current && (S = d - u.current.left, i = s - u.current.top);
-    let p = { ...h.current };
-    if (T.current === "new-selection" || T.current === "resize") {
-      if (!u.current) return;
-      const c = B(A);
-      let n = 0, r = 0, m = S, f = i, l = u.current.left, a = u.current.top;
-      m >= 0 && f >= 0 ? (n = Math.min(t.width - l, m), r = n / c, r > f && (r = Math.min(t.height - a, f), n = r * c), l + n >= t.width && (n = t.width - l, r = n / c), a + r >= t.height && (r = t.height - a, n = r * c)) : m >= 0 && f < 0 ? (f = -f, n = Math.min(t.width - l, m), r = n / c, r > f && (r = f, n = r * c), a = u.current.top - r, a <= 0 && (r += a, a = 0, n = r * c)) : m < 0 && f >= 0 ? (l = Math.max(0, l + m), m = -m, n = m, r = n / c, r > f && (r = Math.min(t.height - a, f), n = r * c), l = u.current.left - n, l <= 0 && (n += l, l = 0, r = n / c), a + r >= t.height && (r = t.height - a, n = r * c, l = u.current.left - n)) : m < 0 && f < 0 && (l = Math.max(0, l + m), a = Math.max(0, a + f), m = -m, f = -f, n = m, r = n / c, r > f && (r = f, n = r * c), l = u.current.left - n, a = u.current.top - r, l <= 0 && (n += l, l = 0, r = n / c), a <= 0 && (r += a, a = 0, n = r * c), l + n > t.width && (n = t.width - l, r = n / c), a + r > t.height && (r = t.height - a, n = r * c), l = u.current.left - n, a = u.current.top - r), p = {
-        left: l,
-        top: a,
+    const w = t.getBoundingClientRect(), g = e.clientX - w.left, d = e.clientY - w.top;
+    let M = 0, i = 0;
+    a.current && (M = g - a.current.left, i = d - a.current.top);
+    let p = { ...s.current };
+    if (C.current === "new-selection" || C.current === "resize") {
+      if (!a.current) return;
+      const c = y(F);
+      let n = 0, r = 0, l = M, h = i, u = a.current.left, f = a.current.top;
+      l >= 0 && h >= 0 ? (n = Math.min(t.width - u, l), r = n / c, r > h && (r = Math.min(t.height - f, h), n = r * c), u + n >= t.width && (n = t.width - u, r = n / c), f + r >= t.height && (r = t.height - f, n = r * c)) : l >= 0 && h < 0 ? (h = -h, n = Math.min(t.width - u, l), r = n / c, r > h && (r = h, n = r * c), f = a.current.top - r, f <= 0 && (r += f, f = 0, n = r * c)) : l < 0 && h >= 0 ? (u = Math.max(0, u + l), l = -l, n = l, r = n / c, r > h && (r = Math.min(t.height - f, h), n = r * c), u = a.current.left - n, u <= 0 && (n += u, u = 0, r = n / c), f + r >= t.height && (r = t.height - f, n = r * c, u = a.current.left - n)) : l < 0 && h < 0 && (u = Math.max(0, u + l), f = Math.max(0, f + h), l = -l, h = -h, n = l, r = n / c, r > h && (r = h, n = r * c), u = a.current.left - n, f = a.current.top - r, u <= 0 && (n += u, u = 0, r = n / c), f <= 0 && (r += f, f = 0, n = r * c), u + n > t.width && (n = t.width - u, r = n / c), f + r > t.height && (r = t.height - f, n = r * c), u = a.current.left - n, f = a.current.top - r), p = {
+        left: u,
+        top: f,
         width: n,
         height: r
       };
-    } else if (T.current === "move") {
-      if (!u.current) return;
-      let c = Math.min(Math.max(h.current.left + S, 0), t.width - h.current.width), n = Math.min(Math.max(h.current.top + i, 0), t.height - h.current.height);
-      c = Math.max(0, Math.min(c, t.width - h.current.width)), n = Math.max(0, Math.min(n, t.height - h.current.height)), u.current = {
-        left: (((M = u.current) == null ? void 0 : M.left) || 0) + c - h.current.left,
-        top: (((C = u.current) == null ? void 0 : C.top) || 0) + n - h.current.top
-      }, p = { ...h.current, left: c, top: n };
+    } else if (C.current === "move") {
+      if (!a.current) return;
+      let c = Math.min(Math.max(s.current.left + M, 0), t.width - s.current.width), n = Math.min(Math.max(s.current.top + i, 0), t.height - s.current.height);
+      c = Math.max(0, Math.min(c, t.width - s.current.width)), n = Math.max(0, Math.min(n, t.height - s.current.height)), a.current = {
+        left: (a.current?.left || 0) + c - s.current.left,
+        top: (a.current?.top || 0) + n - s.current.top
+      }, p = { ...s.current, left: c, top: n };
     }
-    h.current = p, y();
-  }, E = () => {
-    window.removeEventListener("mouseup", E), window.removeEventListener("mousemove", X), document.body.style.userSelect = "", T.current = null, y(), D(H.ToFullSize), k(j() || "");
+    s.current = p, L();
+  }, H = () => {
+    window.removeEventListener("mouseup", H), window.removeEventListener("mousemove", I), document.body.style.userSelect = "", C.current = null, L(), k(b.ToFullSize), Y(D() || "");
   };
-  function q(e) {
-    const t = R.current;
+  function U(e) {
+    const t = S.current;
     if (!t) return;
     document.body.style.userSelect = "none";
-    const o = t.getBoundingClientRect(), w = z(h.current, b).find(
-      (i) => P(
+    const o = t.getBoundingClientRect(), w = E(s.current, T).find(
+      (i) => _(
         e.clientX - o.left,
         e.clientY - o.top,
         i.x,
         i.y,
-        b,
-        b
+        T,
+        T
       )
-    ), d = e.clientX - o.left, s = e.clientY - o.top, S = P(
+    ), g = e.clientX - o.left, d = e.clientY - o.top, M = _(
       e.clientX - o.left,
       e.clientY - o.top,
-      h.current.left,
-      h.current.top,
-      h.current.width,
-      h.current.height
+      s.current.left,
+      s.current.top,
+      s.current.width,
+      s.current.height
     );
     if (w) {
-      const i = Q(h.current, w.corner);
-      T.current = "resize", u.current = { left: i.x, top: i.y };
-    } else S ? (u.current = {
+      const i = K(s.current, w.corner);
+      C.current = "resize", a.current = { left: i.x, top: i.y };
+    } else M ? (a.current = {
       left: e.clientX - o.left,
       top: e.clientY - o.top
-    }, T.current = "move") : (u.current = { left: d, top: s }, T.current = "new-selection", h.current = {
-      left: d,
-      top: s,
+    }, C.current = "move") : (a.current = { left: g, top: d }, C.current = "new-selection", s.current = {
+      left: g,
+      top: d,
       width: 0,
       height: 0
     });
-    window.addEventListener("mouseup", E), window.addEventListener("mousemove", X);
+    window.addEventListener("mouseup", H), window.addEventListener("mousemove", I);
   }
-  return _(() => () => {
-    window.removeEventListener("mouseup", E), window.removeEventListener("mousemove", X);
-  }, []), /* @__PURE__ */ J(
+  return j(() => () => {
+    window.removeEventListener("mouseup", H), window.removeEventListener("mousemove", I);
+  }, []), /* @__PURE__ */ O(
     "canvas",
     {
-      ref: R,
-      onMouseDown: q,
-      onMouseMove: O,
+      ref: S,
+      onMouseDown: U,
+      onMouseMove: G,
       draggable: !1,
-      style: { cursor: G, margin: "0 auto" }
+      style: { cursor: P, margin: "0 auto" }
     }
   );
 }
 export {
-  ee as ImageCropper
+  $ as ImageCropper
 };

package/dist/components/image-upload/image-upload-dropzone.js

@@ -1,37 +1,36 @@
-import { jsxs as l, Fragment as U, jsx as n } from "react/jsx-runtime";
-import { Box as g, Text as h, Input as k } from "@chakra-ui/react";
-import B, { useState as f } from "react";
-import { sanitizeFilename as L } from "./image-upload-helper.js";
-import { ImageIconLarge as V } from "./image-upload-icons.js";
+import { jsxs as l, Fragment as E, jsx as n } from "react/jsx-runtime";
+import { Box as u, Text as g, Input as U } from "@chakra-ui/react";
+import k, { useState as f } from "react";
+import { sanitizeFilename as B } from "./image-upload-helper.js";
+import { ImageIconLarge as L } from "./image-upload-icons.js";
 import { translations as o } from "./translations.js";
-import { Alert as x } from "../alert/alert.js";
-import { ThemeRadiusVariable as O, ThemeColorVariable as d, ThemeSpaceVariable as D } from "../../theme/theme-types.js";
-function X({ locale: i, setFileItem: b, setHasImageChanged: F }) {
-  const [T, s] = f(!1), [y, c] = f(!1), [R, m] = f(!1), a = B.createRef();
-  function z(e, t) {
+import { Alert as h } from "../alert/alert.js";
+import { ThemeRadiusVariable as V, ThemeColorVariable as d, ThemeSpaceVariable as x } from "../../theme/theme-types.js";
+function Q({ locale: i, setFileItem: D, setHasImageChanged: b }) {
+  const [F, s] = f(!1), [T, c] = f(!1), [y, m] = f(!1), a = k.createRef();
+  function R(e, t) {
     const r = new FileReader();
     r.onload = t, r.readAsDataURL(e);
   }
-  const C = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"], p = (e) => {
+  const z = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"], p = (e) => {
     const t = e.target;
     if (!t || !t.files) return;
     const r = t.files[0];
-    if (!C.includes(r.type)) {
+    if (!z.includes(r.type)) {
       m(!0);
       return;
     }
-    m(!1), r.size > 3145728 ? c(!0) : (c(!1), z(r, (S) => {
-      var u;
-      const j = (u = S.target) == null ? void 0 : u.result, E = { fileName: L(r.name), data: j };
-      b(E), F(!0);
+    m(!1), r.size > 3145728 ? c(!0) : (c(!1), R(r, (M) => {
+      const S = M.target?.result, j = { fileName: B(r.name), data: S };
+      D(j), b(!0);
     }));
-  }, I = () => {
+  }, C = () => {
     a.current && a.current.click();
-  }, w = (e) => {
+  }, I = (e) => {
     e.preventDefault(), e.dataTransfer.items && e.dataTransfer.items.length > 0 && s(!0);
-  }, A = () => {
+  }, w = () => {
     s(!1);
-  }, M = (e) => {
+  }, A = (e) => {
     if (e.preventDefault(), !!a.current && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       const t = new DataTransfer();
       Array.from(e.dataTransfer.files).forEach((r) => {
@@ -41,42 +40,42 @@ function X({ locale: i, setFileItem: b, setHasImageChanged: F }) {
       }), e.dataTransfer.clearData(), s(!1);
     }
   };
-  return /* @__PURE__ */ l(U, { children: [
+  return /* @__PURE__ */ l(E, { children: [
     /* @__PURE__ */ l(
-      g,
+      u,
       {
         p: "108px",
         bg: d.BackgroundDisabled,
         borderWidth: "1px",
-        borderColor: T ? d.OnSurfaceBorder : "transparent",
+        borderColor: F ? d.OnSurfaceBorder : "transparent",
         transition: "150ms ease",
-        borderRadius: O.Medium,
+        borderRadius: V.Medium,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         flexDir: "column",
-        onDragOver: w,
-        onDragLeave: A,
-        onDrop: M,
-        onClick: I,
+        onDragOver: I,
+        onDragLeave: w,
+        onDrop: A,
+        onClick: C,
         cursor: "pointer",
         children: [
-          /* @__PURE__ */ n(V, {}),
-          /* @__PURE__ */ n(h, { children: o[i].pullAndDrop }),
-          /* @__PURE__ */ l(h, { children: [
+          /* @__PURE__ */ n(L, {}),
+          /* @__PURE__ */ n(g, { children: o[i].pullAndDrop }),
+          /* @__PURE__ */ l(g, { children: [
             "eller",
             " ",
-            /* @__PURE__ */ n(g, { as: "span", color: d.Accent, textDecoration: "underline", children: o[i].upload }),
+            /* @__PURE__ */ n(u, { as: "span", color: d.Accent, textDecoration: "underline", children: o[i].upload }),
             "."
           ] }),
-          /* @__PURE__ */ n(k, { type: "file", ref: a, display: "none", onChange: p })
+          /* @__PURE__ */ n(U, { type: "file", ref: a, display: "none", onChange: p })
         ]
       }
     ),
-    R && /* @__PURE__ */ n(x, { mt: D.Medium, type: "error", children: o[i].unsupportedFormat }),
-    y && /* @__PURE__ */ n(x, { mt: D.Medium, type: "error", children: o[i].sizeExceeded })
+    y && /* @__PURE__ */ n(h, { mt: x.Medium, type: "error", children: o[i].unsupportedFormat }),
+    T && /* @__PURE__ */ n(h, { mt: x.Medium, type: "error", children: o[i].sizeExceeded })
   ] });
 }
 export {
-  X as default
+  Q as default
 };

package/dist/components/menu/menu-group.js

@@ -1,27 +1,27 @@
-import { jsxs as p, Fragment as H, jsx as e } from "react/jsx-runtime";
-import { HStack as N, MenuItem as K, Box as $ } from "@chakra-ui/react";
-import O, { useRef as C } from "react";
-import { setMenuItemElementType as W } from "./helper.js";
-import { IconButton as X } from "../icon-button/icon-button.js";
-import { Icons as v } from "../icon/types.js";
-import { Flex as D } from "../flex/flex.js";
-import { Icon as L } from "../icon/icon.js";
+import { jsxs as p, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { HStack as z, MenuItem as E, Box as h } from "@chakra-ui/react";
+import F, { useRef as w } from "react";
+import { setMenuItemElementType as H } from "./helper.js";
+import { IconButton as N } from "../icon-button/icon-button.js";
+import { Icons as S } from "../icon/types.js";
+import { Flex as K } from "../flex/flex.js";
+import { Icon as I } from "../icon/icon.js";
 import { ThemeColorVariable as g, ThemeSpaceVariable as a } from "../../theme/theme-types.js";
-const re = ({
+const Y = ({
   text: i,
-  children: M,
-  onClick: k,
-  as: y,
-  isDisabled: T = !1,
-  itemType: B = "button",
+  children: $,
+  onClick: C,
+  as: v,
+  isDisabled: L = !1,
+  itemType: M = "button",
   leftIcon: d,
   rightIcon: f,
-  rightElement: _,
-  ...R
+  rightElement: k,
+  ...y
 }) => {
-  const [n, A] = O.useState(!1), r = C(null), o = C(null), P = () => {
-    A(!n);
-  }, V = y ?? W(B), j = d ? /* @__PURE__ */ e(L, { icon: d, w: "24px", h: "24px" }) : void 0, s = (t) => ({
+  const [n, T] = F.useState(!1), r = w(null), o = w(null), B = () => {
+    T(!n);
+  }, _ = v ?? H(M), R = d ? /* @__PURE__ */ e(I, { icon: d, w: "24px", h: "24px" }) : void 0, s = (t) => ({
     content: '""',
     position: "absolute",
     top: 0,
@@ -30,7 +30,7 @@ const re = ({
     height: "100%",
     backgroundColor: g.OnSurfaceBorder,
     zIndex: 1
-  }), u = 64, x = 36, c = 22, m = 28, b = 20, z = {
+  }), u = 64, x = 36, c = 22, m = 28, b = 20, A = {
     ".menu-item": {
       paddingLeft: `${u}px`
     },
@@ -57,24 +57,23 @@ const re = ({
       "::before": s(`${m + 2 * b}px`)
     }
     // ...Add more selectors as needed to support more levels
-  }, E = "24px", F = (t) => {
-    var h, w, S, I;
+  }, P = "24px", V = (t) => {
     switch (t.stopPropagation(), t.key) {
       case "ArrowLeft": {
-        const l = (h = o.current) == null ? void 0 : h.previousSibling;
-        r.current = l, (w = r.current) == null || w.focus();
+        const l = o.current?.previousSibling;
+        r.current = l, r.current?.focus();
         break;
       }
       case "ArrowRight": {
-        const l = (S = r.current) == null ? void 0 : S.nextSibling;
-        o.current = l, (I = o.current) == null || I.focus();
+        const l = r.current?.nextSibling;
+        o.current = l, o.current?.focus();
         break;
       }
     }
   };
-  return /* @__PURE__ */ p(H, { children: [
+  return /* @__PURE__ */ p(j, { children: [
     /* @__PURE__ */ p(
-      N,
+      z,
       {
         w: "100%",
         pl: a.Medium,
@@ -87,38 +86,38 @@ const re = ({
           transitionTimingFunction: "ease-in"
         },
         role: "group",
-        onKeyUp: F,
+        onKeyUp: V,
         children: [
           /* @__PURE__ */ e(
-            X,
+            N,
             {
               ref: r,
-              onClick: P,
+              onClick: B,
               variant: "ghost",
               tabIndex: 0,
-              icon: n ? v.TreeViewCollapse : v.TreeViewExpand,
+              icon: n ? S.TreeViewCollapse : S.TreeViewExpand,
               "aria-label": n ? `Collapse ${i}` : `Expand ${i}`,
               size: "sm"
             }
           ),
           /* @__PURE__ */ e(
-            K,
+            E,
             {
               pl: 0,
               _groupHover: { bg: "unset" },
-              as: V,
-              isDisabled: T,
-              onClick: k,
+              as: _,
+              isDisabled: L,
+              onClick: C,
               minWidth: "unset",
-              w: `calc(100% - ${E} - ${a.XSmall})`,
-              icon: j,
+              w: `calc(100% - ${P} - ${a.XSmall})`,
+              icon: R,
               ref: o,
-              ...R,
-              children: /* @__PURE__ */ p(D, { justifyContent: "space-between", alignItems: "center", gap: a.Small, w: "100%", children: [
+              ...y,
+              children: /* @__PURE__ */ p(K, { justifyContent: "space-between", alignItems: "center", gap: a.Small, w: "100%", children: [
                 i,
-                /* @__PURE__ */ p($, { children: [
-                  _,
-                  f && /* @__PURE__ */ e(L, { icon: f, color: g.OnSurfaceBorder, w: "20px", h: "20px" })
+                /* @__PURE__ */ p(h, { children: [
+                  k,
+                  f && /* @__PURE__ */ e(I, { icon: f, color: g.OnSurfaceBorder, w: "20px", h: "20px" })
                 ] })
               ] })
             }
@@ -126,9 +125,9 @@ const re = ({
         ]
       }
     ),
-    /* @__PURE__ */ e($, { className: "menugroup-wrapper", __css: z, children: n && M })
+    /* @__PURE__ */ e(h, { className: "menugroup-wrapper", __css: A, children: n && $ })
   ] });
 };
 export {
-  re as MenuGroup
+  Y as MenuGroup
 };