@vkzstudio/muza-ui 1.0.26 → 1.0.27

package/dist/components/Reorderable/Reorderable.js

@@ -1,62 +1,62 @@
 import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as A, useContext as K, useRef as X, useCallback as N, createContext as k } from "react";
-import { useMuzaTranslations as M } from "../../translations/TranslationContext.js";
+import { forwardRef as A, useContext as k, useRef as X, useCallback as G, createContext as M } from "react";
+import { useMuzaTranslations as T } from "../../translations/TranslationContext.js";
 import { AnimatePresence as O } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
 import { useDragControls as U } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
 import { motion as Y } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
 import { cn as C } from "../../utils/cn.js";
 import { ReorderGroup as j } from "../../node_modules/framer-motion/dist/es/components/Reorder/Group.js";
 import { ReorderItem as z } from "../../node_modules/framer-motion/dist/es/components/Reorder/Item.js";
-const w = {
+const D = {
   initial: { opacity: 0, scale: 0.96 },
   animate: { opacity: 1, scale: 1 },
   exit: { opacity: 0, scale: 0.96 },
   transition: { duration: 0.2, ease: "easeOut" }
-}, T = k({}), F = 50, G = 3, _ = () => K(T), P = k(null), V = () => {
-  const r = K(P);
+}, _ = M({}), F = 50, K = 3, P = () => k(_), S = M(null), V = () => {
+  const r = k(S);
   if (!r)
     throw new Error("useReorderableItem must be used within a ReorderableItem");
   return r;
 }, Z = ({
   values: r,
-  onReorder: s,
+  onReorder: l,
   axis: b = "y",
-  as: l = "ol",
-  disabled: a = !1,
-  layoutScroll: n = !1,
-  animatePresence: D,
-  style: x,
-  className: I,
+  as: c = "ol",
+  disabled: n = !1,
+  layoutScroll: o = !1,
+  animatePresence: R,
+  style: g,
+  className: w,
   children: f
-}, v) => {
-  const c = M(), u = {
-    disabled: a,
+}, x) => {
+  const I = T(), a = {
+    disabled: n,
     values: r,
-    onReorder: a ? void 0 : s,
+    onReorder: n ? void 0 : l,
     axis: b,
-    animatePresence: !!D
-  }, e = D === !0 ? { mode: "popLayout", initial: !1 } : D || null, m = e ? /* @__PURE__ */ d(O, { ...e, children: f }) : f;
+    animatePresence: !!R
+  }, t = R === !0 ? { mode: "popLayout", initial: !1 } : R || null, i = t ? /* @__PURE__ */ d(O, { ...t, children: f }) : f;
   return /* @__PURE__ */ d(
-    T.Provider,
+    _.Provider,
     {
-      value: u,
+      value: a,
       children: /* @__PURE__ */ d(
         j,
         {
-          ref: v,
+          ref: x,
           axis: b,
           values: r,
-          onReorder: a ? () => {
-          } : s,
-          as: l,
-          layoutScroll: n,
-          style: x,
-          ...l !== "tbody" && {
+          onReorder: n ? () => {
+          } : l,
+          as: c,
+          layoutScroll: o,
+          style: g,
+          ...c !== "tbody" && {
             role: "list",
-            "aria-label": c.reorderableTable.listAriaLabel
+            "aria-label": I.reorderableTable.listAriaLabel
           },
-          className: C(I),
-          children: m
+          className: C(w),
+          children: i
         }
       )
     }
@@ -65,77 +65,79 @@ const w = {
 q.displayName = "ReorderableGroup";
 const B = ({
   value: r,
-  as: s = "li",
+  as: l = "li",
   disabled: b = !1,
-  dragListenerDisabled: l = !1,
-  whileDrag: a,
-  animation: n,
-  className: D,
-  children: x,
-  style: I
-}, f) => {
+  dragListenerDisabled: c = !1,
+  whileDrag: n,
+  animation: o,
+  className: R,
+  children: g,
+  style: w,
+  layout: f
+}, x) => {
   const {
-    disabled: v,
-    values: c,
-    onReorder: u,
-    axis: e,
-    animatePresence: m
-  } = _(), E = U(), L = b || v, p = !L && !l, t = n === !1 ? null : n === !0 ? w : typeof n == "object" ? {
-    initial: n.initial ?? w.initial,
-    animate: n.animate ?? w.animate,
-    exit: n.exit ?? w.exit,
-    transition: n.transition ?? w.transition
-  } : m ? w : null, o = N(
-    (i) => {
-      if (!c || !u) return;
-      const y = c.indexOf(r);
-      if (y === -1) return;
-      const R = y + i;
-      if (R < 0 || R >= c.length) return;
-      const g = [...c];
-      g.splice(y, 1), g.splice(R, 0, r), u(g);
+    disabled: I,
+    values: a,
+    onReorder: t,
+    axis: i,
+    animatePresence: N
+  } = P(), E = U(), L = b || I, s = !L && !c, e = o === !1 ? null : o === !0 ? D : typeof o == "object" ? {
+    initial: o.initial ?? D.initial,
+    animate: o.animate ?? D.animate,
+    exit: o.exit ?? D.exit,
+    transition: o.transition ?? D.transition
+  } : N ? D : null, m = G(
+    (u) => {
+      if (!a || !t) return;
+      const p = a.indexOf(r);
+      if (p === -1) return;
+      const y = p + u;
+      if (y < 0 || y >= a.length) return;
+      const h = [...a];
+      h.splice(p, 1), h.splice(y, 0, r), t(h);
     },
-    [c, u, r]
-  ), h = N(
-    (i) => {
-      if (!p) return;
-      const y = e === "y" ? "ArrowUp" : "ArrowLeft", R = e === "y" ? "ArrowDown" : "ArrowRight";
-      i.key === y ? (i.preventDefault(), o(-1)) : i.key === R && (i.preventDefault(), o(1));
+    [a, t, r]
+  ), v = G(
+    (u) => {
+      if (!s) return;
+      const p = i === "y" ? "ArrowUp" : "ArrowLeft", y = i === "y" ? "ArrowDown" : "ArrowRight";
+      u.key === p ? (u.preventDefault(), m(-1)) : u.key === y && (u.preventDefault(), m(1));
     },
-    [p, e, o]
+    [s, i, m]
   );
   return /* @__PURE__ */ d(
-    P.Provider,
+    S.Provider,
     {
-      value: { dragControls: E, dragListenerDisabled: l, moveItem: o },
+      value: { dragControls: E, dragListenerDisabled: c, moveItem: m },
       children: /* @__PURE__ */ d(
         z,
         {
-          ref: f,
+          ref: x,
           value: r,
-          as: s,
+          as: l,
+          layout: f,
           dragControls: E,
-          dragListener: p,
-          initial: t == null ? void 0 : t.initial,
-          animate: t == null ? void 0 : t.animate,
-          exit: t == null ? void 0 : t.exit,
-          transition: t == null ? void 0 : t.transition,
-          tabIndex: p ? 0 : void 0,
+          dragListener: s,
+          initial: e == null ? void 0 : e.initial,
+          animate: e == null ? void 0 : e.animate,
+          exit: e == null ? void 0 : e.exit,
+          transition: e == null ? void 0 : e.transition,
+          tabIndex: s ? 0 : void 0,
           role: "listitem",
           "aria-disabled": L,
-          onKeyDown: h,
+          onKeyDown: v,
           className: C(
-            p && "cursor-grab active:cursor-grabbing",
-            p && "focus-visible-default",
-            D
+            s && "cursor-grab active:cursor-grabbing",
+            s && "focus-visible-default",
+            R
           ),
-          style: I,
+          style: w,
           whileDrag: {
             zIndex: F,
             position: "relative",
-            ...a
+            ...n
           },
-          children: x
+          children: g
         }
       )
     }
@@ -145,69 +147,69 @@ J.displayName = "ReorderableItem";
 const Q = A(
   ({
     as: r = "button",
-    disabled: s = !1,
+    disabled: l = !1,
     "aria-label": b,
-    className: l,
-    children: a
-  }, n) => {
-    const D = M(), x = b ?? D.reorderableTable.dragHandleAriaLabel, { disabled: I, axis: f } = _(), { dragControls: v, dragListenerDisabled: c, moveItem: u } = V(), e = c && !I && !s, m = X(!1), E = (o) => {
-      if (!e) return;
-      m.current = !1;
-      const h = o.clientX, i = o.clientY, y = (g) => {
-        const S = Math.abs(g.clientX - h), H = Math.abs(g.clientY - i);
-        (S > G || H > G) && (m.current = !0);
-      }, R = () => {
-        document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", R);
+    className: c,
+    children: n
+  }, o) => {
+    const R = T(), g = b ?? R.reorderableTable.dragHandleAriaLabel, { disabled: w, axis: f } = P(), { dragControls: x, dragListenerDisabled: I, moveItem: a } = V(), t = I && !w && !l, i = X(!1), N = (e) => {
+      if (!t) return;
+      i.current = !1;
+      const m = e.clientX, v = e.clientY, u = (y) => {
+        const h = Math.abs(y.clientX - m), H = Math.abs(y.clientY - v);
+        (h > K || H > K) && (i.current = !0);
+      }, p = () => {
+        document.removeEventListener("pointermove", u), document.removeEventListener("pointerup", p);
       };
-      document.addEventListener("pointermove", y), document.addEventListener("pointerup", R), v.start(o);
-    }, L = (o) => {
-      m.current && (o.stopPropagation(), m.current = !1);
-    }, p = N(
-      (o) => {
-        if (!e) return;
-        const h = f === "y" ? "ArrowUp" : "ArrowLeft", i = f === "y" ? "ArrowDown" : "ArrowRight";
-        o.key === h ? (o.preventDefault(), u(-1)) : o.key === i && (o.preventDefault(), u(1));
+      document.addEventListener("pointermove", u), document.addEventListener("pointerup", p), x.start(e);
+    }, E = (e) => {
+      i.current && (e.stopPropagation(), i.current = !1);
+    }, L = G(
+      (e) => {
+        if (!t) return;
+        const m = f === "y" ? "ArrowUp" : "ArrowLeft", v = f === "y" ? "ArrowDown" : "ArrowRight";
+        e.key === m ? (e.preventDefault(), a(-1)) : e.key === v && (e.preventDefault(), a(1));
       },
-      [e, f, u]
-    ), t = {
-      "aria-label": x,
+      [t, f, a]
+    ), s = {
+      "aria-label": g,
       "aria-roledescription": "sortable",
-      onPointerDown: E,
-      onKeyDown: p,
-      onClick: L,
+      onPointerDown: N,
+      onKeyDown: L,
+      onClick: E,
       className: C(
         "touch-none select-none",
-        e && "cursor-grab active:cursor-grabbing",
-        !e && "cursor-default",
-        e && "focus-visible-default",
-        l
+        t && "cursor-grab active:cursor-grabbing",
+        !t && "cursor-default",
+        t && "focus-visible-default",
+        c
       )
     };
-    return r === "button" ? /* @__PURE__ */ d("button", { ref: n, type: "button", disabled: s, ...t, children: a }) : r === "div" ? /* @__PURE__ */ d(
+    return r === "button" ? /* @__PURE__ */ d("button", { ref: o, type: "button", disabled: l, ...s, children: n }) : r === "div" ? /* @__PURE__ */ d(
       "div",
       {
-        ref: n,
-        tabIndex: e ? 0 : void 0,
-        role: e ? "button" : void 0,
-        ...t,
-        children: a
+        ref: o,
+        tabIndex: t ? 0 : void 0,
+        role: t ? "button" : void 0,
+        ...s,
+        children: n
       }
     ) : /* @__PURE__ */ d(
       "span",
       {
-        ref: n,
-        tabIndex: e ? 0 : void 0,
-        role: e ? "button" : void 0,
-        ...t,
-        children: a
+        ref: o,
+        tabIndex: t ? 0 : void 0,
+        role: t ? "button" : void 0,
+        ...s,
+        children: n
       }
     );
   }
 );
 Q.displayName = "ReorderableHandle";
-const W = ({ as: r = "li", className: s, children: b }, l) => {
-  const a = Y[r];
-  return /* @__PURE__ */ d(a, { ref: l, layout: !0, role: "listitem", className: C(s), children: b });
+const W = ({ as: r = "li", className: l, children: b }, c) => {
+  const n = Y[r];
+  return /* @__PURE__ */ d(n, { ref: c, layout: !0, role: "listitem", className: C(l), children: b });
 }, $ = A(W);
 $.displayName = "ReorderableStaticItem";
 export {
@@ -215,6 +217,6 @@ export {
   Q as ReorderableHandle,
   J as ReorderableItem,
   $ as ReorderableStaticItem,
-  _ as useReorderableGroup,
+  P as useReorderableGroup,
   V as useReorderableItem
 };

package/dist/components/Reorderable/Reorderable.stories.d.ts

@@ -12,4 +12,5 @@ export declare const ScrollableList: Story;
 export declare const ContentBlocks: Story;
 export declare const AnimatedItems: Story;
 export declare const StaticItem: Story;
+export declare const DynamicHeight: Story;
 //# sourceMappingURL=Reorderable.stories.d.ts.map

package/dist/components/Reorderable/Reorderable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA"}
+{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAwFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAuEvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA;AA8GD,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAA"}

package/dist/components/ReorderableTable/ReorderableTable.d.ts

@@ -64,6 +64,11 @@ export interface ReorderableTableProps<T extends {
     isMovable?: boolean;
     /** Enables enter/exit animations when rows are added or removed. @default false */
     animateItems?: boolean;
+    /**
+     * Controls Motion's layout animation mode on rows.
+     * Use `"position"` to animate only position and prevent scale distortion when row height changes.
+     */
+    layout?: true | 'position';
 }
 declare const ReorderableTable: <T extends {
     id: string | number;

package/dist/components/ReorderableTable/ReorderableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,+EAA+E;IAC/E,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAClC,4FAA4F;IAC5F,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAkOD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"ReorderableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ReorderableTable/ReorderableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAWrE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;CACxE;AAED;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CACtE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,wFAAwF;IACxF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,+EAA+E;IAC/E,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAClC,4FAA4F;IAC5F,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uFAAuF;IACvF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,CAAA;CAC3B;AAoOD,QAAA,MAAM,gBAAgB,EAAwC,CAC5D,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAEjC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvE,KAAK,CAAC,YAAY,CACtB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ReorderableTable/ReorderableTable.js

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as T } from "react";
+import { forwardRef as w } from "react";
 import { motion as n } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { ReorderableGroup as w, ReorderableItem as A, ReorderableHandle as C } from "../Reorderable/Reorderable.js";
-import { Reorder as H } from "../Icons/CustomIcons.js";
+import { ReorderableGroup as A, ReorderableItem as C, ReorderableHandle as H } from "../Reorderable/Reorderable.js";
+import { Reorder as O } from "../Icons/CustomIcons.js";
 import { cn as i } from "../../utils/cn.js";
-import { typographyVariants as O, Typography as k } from "../Typography/Typography.js";
-const p = 72, u = 20, E = 24, D = 4, R = ({
+import { typographyVariants as k, Typography as E } from "../Typography/Typography.js";
+const p = 72, u = 20, D = 24, R = 4, j = ({
   data: b,
   onReorder: y,
   columns: o,
@@ -15,23 +15,24 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
   className: g,
   isMovable: s = !0,
   animateItems: x = !1,
-  ...L
-}, _) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ m(
+  layout: L,
+  ..._
+}, v) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ m(
   "table",
   {
-    ref: _,
+    ref: v,
     className: i(
       "-my-sm w-full border-separate border-spacing-y-sm",
       g
     ),
-    ...L,
+    ..._,
     children: [
       N && /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
         o.map((r, d) => /* @__PURE__ */ e(
           "th",
           {
             className: i(
-              O({
+              k({
                 size: "sm",
                 uppercase: !0,
                 variant: "body",
@@ -57,7 +58,7 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
         )
       ] }) }),
       /* @__PURE__ */ e(
-        w,
+        A,
         {
           values: b,
           onReorder: y,
@@ -66,32 +67,33 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
           as: "tbody",
           className: "contents",
           children: b.map((r, d) => {
-            const v = (l == null ? void 0 : l(r, d)) ?? !1, t = h || v;
+            const I = (l == null ? void 0 : l(r, d)) ?? !1, t = h || I;
             return /* @__PURE__ */ m(
-              A,
+              C,
               {
                 value: r,
                 as: "tr",
+                layout: L,
                 disabled: t,
                 dragListenerDisabled: !0,
                 whileDrag: t ? void 0 : { boxShadow: "0 8px 32px 0 rgba(59, 18, 107, 0.2)" },
                 className: "group rounded-2xl",
                 children: [
                   o.map((a, c) => {
-                    const I = c === 0, f = c === o.length - 1;
+                    const T = c === 0, f = c === o.length - 1;
                     return /* @__PURE__ */ e(
                       n.td,
                       {
                         initial: !1,
                         animate: f ? {
-                          paddingRight: s ? E : D
+                          paddingRight: s ? D : R
                         } : void 0,
                         transition: { duration: 0.3, ease: "easeInOut" },
                         className: i(
                           "h-comp-table-h border-y border-stroke-base-secondary bg-surface-base-secondary align-middle",
                           f ? "pl-comp-table-p" : "px-comp-table-p",
                           {
-                            "rounded-l-xl border-l": I,
+                            "rounded-l-xl border-l": T,
                             "group-focus-within:border-icon-brand-focus group-hover:border-icon-brand-hover": !t
                           },
                           a.className
@@ -101,7 +103,7 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
                           r,
                           d
                         ) : /* @__PURE__ */ e(
-                          k,
+                          E,
                           {
                             variant: "body",
                             size: "base",
@@ -146,14 +148,14 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
                           transition: { duration: 0.3, ease: "easeInOut" },
                           className: "flex h-full items-center justify-center overflow-hidden border-l border-stroke-base-secondary",
                           children: /* @__PURE__ */ e(
-                            C,
+                            H,
                             {
                               disabled: !s || t,
                               className: i(
                                 "flex h-comp-button-h-sm w-comp-button-w-sm items-center justify-center focus-visible-default",
                                 t ? "text-text-dark-disabled" : "text-text-brand-def"
                               ),
-                              children: /* @__PURE__ */ e(H, { className: "size-icon-default" })
+                              children: /* @__PURE__ */ e(O, { className: "size-icon-default" })
                             }
                           )
                         }
@@ -169,8 +171,8 @@ const p = 72, u = 20, E = 24, D = 4, R = ({
       )
     ]
   }
-) }), j = T(R);
-j.displayName = "ReorderableTable";
+) }), P = w(j);
+P.displayName = "ReorderableTable";
 export {
-  j as ReorderableTable
+  P as ReorderableTable
 };