@vkzstudio/muza-ui 1.0.37 → 1.0.39

package/dist/components/ExpandableTable/ExpandableTable.d.ts

@@ -1,4 +1,9 @@
 import { ReactNode } from 'react';
+/**
+ * Named breakpoint at and above which a column becomes visible.
+ * Mirrors the breakpoints exported from `@/hooks/use-is-breakpoint`.
+ */
+export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 /**
  * Column definition for the ExpandableTable.
  * @typeParam T - The type of data objects in each row
@@ -19,11 +24,20 @@ export interface IColumn<T> {
      */
     render?: (value: T[keyof T], rowData: T) => ReactNode;
     /**
-     * Minimum breakpoint at which this column is visible.
-     * Columns hidden below their breakpoint automatically appear in the expanded row view.
+     * Controls when the column is visible.
+     * - Named breakpoint (`'xs'..'3xl'`): visible at and above that breakpoint, rendered with static Tailwind classes.
+     * - Boolean: caller supplies the visibility directly (e.g. from `useMediaQuery('(min-width: 52rem)')`).
+     *   `true` shows the column, `false` hides it. Use this for arbitrary thresholds.
      * @default 'xs'
      */
-    responsive?: 'xs' | 'sm' | 'md' | 'lg';
+    responsive?: ResponsiveBreakpoint | boolean;
+    /**
+     * When `responsive` hides this column, also render it in the automatic expandable area
+     * below the row. Set to `false` to just hide the column — useful when the expandable
+     * area already contains a richer version of the same data.
+     * @default true
+     */
+    moveToExpandable?: boolean;
 }
 /**
  * Cell definition within an expandable row section.

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;GAGG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;OAIG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB,kGAAkG;IAClG,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4FAA4F;IAC5F,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,sFAAsF;IACtF,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;OAaG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AAgCD,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,uDAKjC,oBAAoB,CAAC,CAAC,CAAC,4CAwXzB,CAAA"}
+{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAuBd;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC5B,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAA;AAET;;;GAGG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,iDAAiD;IACjD,KAAK,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB,kGAAkG;IAClG,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,4FAA4F;IAC5F,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,sFAAsF;IACtF,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;OAaG;IACH,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACjD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,0GAA0G;QAC1G,mBAAmB,EAAE,MAAM,CAAA;QAC3B,yFAAyF;QACzF,YAAY,EAAE,MAAM,CAAA;QACpB,0GAA0G;QAC1G,SAAS,EAAE,MAAM,CAAA;KAClB,CAAC,CAAA;CACH;AA4CD,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,uDAKjC,oBAAoB,CAAC,CAAC,CAAC,4CAgYzB,CAAA"}

package/dist/components/ExpandableTable/ExpandableTable.js

@@ -1,153 +1,174 @@
-import { jsxs as m, jsx as s, Fragment as _ } from "react/jsx-runtime";
-import { useState as L, useRef as O, useEffect as W, useCallback as q, useMemo as M, Fragment as J } from "react";
-import { cva as Q } from "class-variance-authority";
-import { useIsMinSm as U, useIsMinMd as X, useIsMinLg as Y } from "../../hooks/use-is-breakpoint.js";
-import { Table as Z, TableHeader as D, TableRow as $, TableHead as S, TableRowGroup as R, TableCell as j } from "./Table.js";
-import { cn as o } from "../../utils/cn.js";
-import { Typography as g } from "../Typography/Typography.js";
-import { AltArrowDownOutline as w } from "@solar-icons/react-perf";
-import { Flex as z } from "../Flex/Flex.js";
-const F = Q("", {
+import { jsxs as p, jsx as t, Fragment as A } from "react/jsx-runtime";
+import { useState as V, useRef as G, useEffect as _, useCallback as O, Fragment as W } from "react";
+import { cva as X } from "class-variance-authority";
+import { useIsMin3xl as q, useIsMin2xl as J, useIsMinXl as Q, useIsMinLg as U, useIsMinMd as Y, useIsMinSm as Z } from "../../hooks/use-is-breakpoint.js";
+import { Table as D, TableHeader as R, TableRow as L, TableHead as S, TableRowGroup as w, TableCell as $ } from "./Table.js";
+import { cn as a } from "../../utils/cn.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { AltArrowDownOutline as I } from "@solar-icons/react-perf";
+import { Flex as j } from "../Flex/Flex.js";
+const z = X("", {
   variants: {
     responsive: {
       xs: "",
       sm: "hidden sm:table-cell",
       md: "hidden md:table-cell",
-      lg: "hidden lg:table-cell"
+      lg: "hidden lg:table-cell",
+      xl: "hidden xl:table-cell",
+      "2xl": "hidden 2xl:table-cell",
+      "3xl": "hidden 3xl:table-cell"
     },
     reverse: {
       xs: "hidden",
       sm: "sm:hidden",
       md: "md:hidden",
-      lg: "lg:hidden"
+      lg: "lg:hidden",
+      xl: "xl:hidden",
+      "2xl": "2xl:hidden",
+      "3xl": "3xl:hidden"
     }
   }
-}), I = (h, a, t, d) => !h || h === "xs" ? !0 : h === "sm" ? a : h === "md" ? t : h === "lg" ? d : !0, oe = ({
-  data: h,
-  columns: a,
-  expandableRowSections: t,
-  classNames: d
+}), B = (n) => typeof n == "string" && (n === "xs" || n === "sm" || n === "md" || n === "lg" || n === "xl" || n === "2xl" || n === "3xl"), C = (n, m) => n === void 0 || n === "xs" ? !0 : typeof n == "boolean" ? n : m[n], oe = ({
+  data: n,
+  columns: m,
+  expandableRowSections: s,
+  classNames: o
 }) => {
-  const [b, A] = L(/* @__PURE__ */ new Set()), [B, N] = L(/* @__PURE__ */ new Set()), u = O(
+  const [v, H] = V(/* @__PURE__ */ new Set()), [P, u] = V(/* @__PURE__ */ new Set()), g = G(
     /* @__PURE__ */ new Map()
   );
-  W(() => {
-    const e = u.current;
+  _(() => {
+    const e = g.current;
     return () => {
       e.forEach((i) => clearTimeout(i)), e.clear();
     };
   }, []);
-  const K = q((e) => {
-    A((i) => {
+  const N = O((e) => {
+    H((i) => {
       const l = new Set(i);
       if (l.has(e)) {
-        l.delete(e), N((c) => {
+        l.delete(e), u((c) => {
           const r = new Set(c);
           return r.add(e), r;
         });
-        const n = u.current.get(e);
-        n && clearTimeout(n), u.current.set(
+        const d = g.current.get(e);
+        d && clearTimeout(d), g.current.set(
           e,
           setTimeout(() => {
-            N((c) => {
+            u((c) => {
               const r = new Set(c);
               return r.delete(e), r;
-            }), u.current.delete(e);
+            }), g.current.delete(e);
           }, 150)
         );
       } else {
         l.add(e);
-        const n = u.current.get(e);
-        n && (clearTimeout(n), u.current.delete(e), N((c) => {
+        const d = g.current.get(e);
+        d && (clearTimeout(d), g.current.delete(e), u((c) => {
           const r = new Set(c);
           return r.delete(e), r;
         }));
       }
       return l;
     });
-  }, []), f = M(() => {
-    const e = a.filter((i) => i.responsive).map((i) => i.responsive);
-    return e.includes("lg") ? "lg" : e.includes("md") ? "md" : e.includes("sm") ? "sm" : e.includes("xs") ? "xs" : null;
-  }, [a]), y = U(), k = X(), T = Y(), V = M(() => f ? f === "lg" ? T : f === "md" ? k : f === "sm" ? y : !1 : !1, [f, y, k, T]), { firstVisibleIndex: H, lastVisibleIndex: P } = M(() => {
-    let e = -1, i = -1;
-    return a.forEach((l, n) => {
-      I(l.responsive, y, k, T) && (e === -1 && (e = n), i = n);
-    }), { firstVisibleIndex: e, lastVisibleIndex: i };
-  }, [a, y, k, T]), C = !t && !!f && !V, x = !!t || C;
-  return /* @__PURE__ */ m(Z, { children: [
-    /* @__PURE__ */ s(D, { children: /* @__PURE__ */ s($, { className: "[&>th]:border-0 [&>th]:bg-transparent", children: a.map((e, i) => /* @__PURE__ */ s(
-      S,
-      {
-        className: o(
-          e.className,
-          F({ responsive: e.responsive })
-        ),
-        children: e.title
-      },
-      i
-    )) }) }),
-    h.map((e, i) => {
+  }, []), y = {
+    xs: !0,
+    sm: Z(),
+    md: Y(),
+    lg: U(),
+    xl: Q(),
+    "2xl": J(),
+    "3xl": q()
+  }, M = m.some(
+    (e) => e.responsive !== void 0 && e.responsive !== "xs" && e.moveToExpandable !== !1 && !C(e.responsive, y)
+  );
+  let x = -1, F = -1;
+  m.forEach((e, i) => {
+    C(e.responsive, y) && (x === -1 && (x = i), F = i);
+  });
+  const T = !s && M, K = !!s || T;
+  return /* @__PURE__ */ p(D, { children: [
+    /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(L, { className: "[&>th]:border-0 [&>th]:bg-transparent", children: m.map((e, i) => {
+      const l = B(e.responsive) ? e.responsive : void 0, d = e.responsive === !1;
+      return /* @__PURE__ */ t(
+        S,
+        {
+          className: a(
+            e.className,
+            z({ responsive: l })
+          ),
+          style: d ? { display: "none" } : void 0,
+          children: e.title
+        },
+        i
+      );
+    }) }) }),
+    n.map((e, i) => {
       var c;
-      const l = b.has(i) || C, n = B.has(i);
-      return /* @__PURE__ */ m(
-        R,
+      const l = v.has(i) || T, d = P.has(i);
+      return /* @__PURE__ */ p(
+        w,
         {
-          className: o({
-            "group hover:[&_td]:border-stroke-brand-hover": t
+          className: a({
+            "group hover:[&_td]:border-stroke-brand-hover": s
           }),
           children: [
-            /* @__PURE__ */ m(
-              $,
+            /* @__PURE__ */ p(
+              L,
               {
-                expandablePosition: t && (b.has(i) || n) || C ? "top" : "none",
-                className: o("focus-visible-default", {
-                  "cursor-pointer": t
+                expandablePosition: s && (v.has(i) || d) || T ? "top" : "none",
+                className: a("focus-visible-default", {
+                  "cursor-pointer": s
                 }),
-                onClick: t ? () => K(i) : void 0,
-                onKeyDown: t ? (r) => {
-                  (r.key === "Enter" || r.key === " ") && (r.preventDefault(), K(i));
+                onClick: s ? () => N(i) : void 0,
+                onKeyDown: s ? (r) => {
+                  (r.key === "Enter" || r.key === " ") && (r.preventDefault(), N(i));
                 } : void 0,
-                tabIndex: t ? 0 : void 0,
-                role: t ? "button" : void 0,
-                "aria-expanded": t ? b.has(i) : void 0,
+                tabIndex: s ? 0 : void 0,
+                role: s ? "button" : void 0,
+                "aria-expanded": s ? v.has(i) : void 0,
                 children: [
-                  a.map((r, p) => /* @__PURE__ */ s(
-                    j,
-                    {
-                      isFirst: p === H,
-                      isLast: p === P && !t,
-                      expandablePosition: (l || n) && x ? "top" : "none",
-                      className: o(
-                        r.className,
-                        F({ responsive: r.responsive })
-                      ),
-                      children: r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ s(
-                        g,
-                        {
-                          variant: "body",
-                          size: "base",
-                          weight: "medium",
-                          component: "span",
-                          children: e[r.dataKey]
-                        }
-                      )
-                    },
-                    p
-                  )),
-                  t && /* @__PURE__ */ s(
-                    j,
+                  m.map((r, h) => {
+                    const k = B(r.responsive) ? r.responsive : void 0, b = r.responsive === !1;
+                    return /* @__PURE__ */ t(
+                      $,
+                      {
+                        isFirst: h === x,
+                        isLast: h === F && !s,
+                        expandablePosition: (l || d) && K ? "top" : "none",
+                        className: a(
+                          r.className,
+                          z({ responsive: k })
+                        ),
+                        style: b ? { display: "none" } : void 0,
+                        children: r.render ? r.render(e[r.dataKey], e) : /* @__PURE__ */ t(
+                          f,
+                          {
+                            variant: "body",
+                            size: "base",
+                            weight: "medium",
+                            component: "span",
+                            children: e[r.dataKey]
+                          }
+                        )
+                      },
+                      h
+                    );
+                  }),
+                  s && /* @__PURE__ */ t(
+                    $,
                     {
                       className: "w-[68px]",
                       isFirst: !1,
                       isLast: !0,
-                      expandablePosition: b.has(i) || n ? "top" : "none",
-                      children: /* @__PURE__ */ s(
-                        w,
+                      expandablePosition: v.has(i) || d ? "top" : "none",
+                      children: /* @__PURE__ */ t(
+                        I,
                         {
-                          className: o(
+                          className: a(
                             "text-text-brand-def transition-transform duration-300",
                             {
-                              "rotate-180": b.has(i)
+                              "rotate-180": v.has(i)
                             }
                           )
                         }
@@ -157,57 +178,63 @@ const F = Q("", {
                 ]
               }
             ),
-            x && /* @__PURE__ */ s("tr", { "aria-hidden": !l, children: /* @__PURE__ */ s(
+            K && /* @__PURE__ */ t("tr", { "aria-hidden": !l, children: /* @__PURE__ */ t(
               "td",
               {
-                colSpan: a.length + (t ? 1 : 0),
+                colSpan: m.length + (s ? 1 : 0),
                 className: "border-0 p-0",
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ t(
                   "div",
                   {
-                    className: o(
+                    className: a(
                       "grid transition-[grid-template-rows] duration-300 ease-in-out",
                       l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                     ),
-                    children: /* @__PURE__ */ s("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ m(
+                    children: /* @__PURE__ */ t("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ p(
                       "div",
                       {
-                        className: o(
+                        className: a(
                           "rounded-b-xl border-x-1 border-b-1 border-stroke-base-secondary bg-surface-base-secondary transition-colors group-hover:border-stroke-brand-hover"
                         ),
                         children: [
-                          /* @__PURE__ */ s("div", { className: "mx-comp-table-p border-t-1 border-stroke-base-secondary" }),
-                          /* @__PURE__ */ m(
+                          /* @__PURE__ */ t("div", { className: "mx-comp-table-p border-t-1 border-stroke-base-secondary" }),
+                          /* @__PURE__ */ p(
                             "div",
                             {
-                              className: o(
+                              className: a(
                                 "grid grid-cols-1 gap-2xl px-comp-table-p py-2xl md:grid-cols-[auto_1fr]",
-                                d == null ? void 0 : d.expandedContentGrid
+                                o == null ? void 0 : o.expandedContentGrid
                               ),
                               children: [
-                                !V && /* @__PURE__ */ m(_, { children: [
-                                  /* @__PURE__ */ s(
-                                    z,
+                                M && /* @__PURE__ */ p(A, { children: [
+                                  /* @__PURE__ */ t(
+                                    j,
                                     {
                                       gap: "md",
                                       direction: "column",
                                       className: "col-span-full",
-                                      children: a.map((r, p) => /* @__PURE__ */ m(
-                                        z,
+                                      children: m.filter(
+                                        (r) => r.moveToExpandable !== !1 && r.responsive !== void 0 && r.responsive !== "xs" && !C(r.responsive, y)
+                                      ).map((r, h) => /* @__PURE__ */ p(
+                                        j,
                                         {
                                           align: "center",
                                           justify: "between",
                                           direction: "row",
-                                          className: F({
-                                            reverse: r.responsive
-                                          }),
                                           children: [
-                                            /* @__PURE__ */ s(g, { variant: "body", component: "span", children: r.title }),
+                                            /* @__PURE__ */ t(
+                                              f,
+                                              {
+                                                variant: "body",
+                                                component: "span",
+                                                children: r.title
+                                              }
+                                            ),
                                             r.render ? r.render(
                                               e[r.dataKey],
                                               e
-                                            ) : /* @__PURE__ */ s(
-                                              g,
+                                            ) : /* @__PURE__ */ t(
+                                              f,
                                               {
                                                 variant: "body",
                                                 weight: "medium",
@@ -218,26 +245,26 @@ const F = Q("", {
                                             )
                                           ]
                                         },
-                                        p
+                                        h
                                       ))
                                     }
                                   ),
-                                  t && /* @__PURE__ */ s("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                                  s && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
                                 ] }),
-                                (c = typeof t == "function" ? t(e) : t) == null ? void 0 : c.map((r, p) => {
-                                  if (!t) return null;
-                                  const G = typeof t == "function" ? t(e).length : t.length;
-                                  return /* @__PURE__ */ m(J, { children: [
-                                    /* @__PURE__ */ m(
+                                (c = typeof s == "function" ? s(e) : s) == null ? void 0 : c.map((r, h) => {
+                                  if (!s) return null;
+                                  const k = typeof s == "function" ? s(e).length : s.length;
+                                  return /* @__PURE__ */ p(W, { children: [
+                                    /* @__PURE__ */ p(
                                       "div",
                                       {
-                                        className: o(
+                                        className: a(
                                           "col-span-full grid grid-cols-1 gap-y-xl md:col-span-2 md:grid-cols-subgrid",
-                                          d == null ? void 0 : d.sectionTitle
+                                          o == null ? void 0 : o.sectionTitle
                                         ),
                                         children: [
-                                          r.title && /* @__PURE__ */ s(
-                                            g,
+                                          r.title && /* @__PURE__ */ t(
+                                            f,
                                             {
                                               variant: "body",
                                               uppercase: !0,
@@ -248,43 +275,43 @@ const F = Q("", {
                                               children: r.title
                                             }
                                           ),
-                                          /* @__PURE__ */ s(
+                                          /* @__PURE__ */ t(
                                             "div",
                                             {
-                                              className: o(
+                                              className: a(
                                                 "col-span-full grid grid-cols-1 gap-x-3xl md:col-span-2 md:grid-cols-subgrid md:gap-y-md",
-                                                d == null ? void 0 : d.cellsWrap
+                                                o == null ? void 0 : o.cellsWrap
                                               ),
                                               children: r.cells.flatMap(
-                                                (v, E) => [
-                                                  /* @__PURE__ */ s(
-                                                    g,
+                                                (b, E) => [
+                                                  /* @__PURE__ */ t(
+                                                    f,
                                                     {
                                                       component: "span",
                                                       variant: "body",
                                                       className: "mb-xs text-text-dark-primary-def md:mb-0",
-                                                      children: v.title
+                                                      children: b.title
                                                     },
                                                     `${E}-label`
                                                   ),
-                                                  v.render ? /* @__PURE__ */ s(
+                                                  b.render ? /* @__PURE__ */ t(
                                                     "div",
                                                     {
                                                       className: "mb-md block last-of-type:mb-0 md:mb-0",
-                                                      children: v.render(
-                                                        e[v.dataKey],
+                                                      children: b.render(
+                                                        e[b.dataKey],
                                                         e
                                                       )
                                                     },
                                                     `${E}-value`
-                                                  ) : /* @__PURE__ */ s(
-                                                    g,
+                                                  ) : /* @__PURE__ */ t(
+                                                    f,
                                                     {
                                                       variant: "body",
                                                       weight: "medium",
                                                       component: "span",
                                                       className: "mb-md block last-of-type:mb-0 md:mb-0",
-                                                      children: e[v.dataKey]
+                                                      children: e[b.dataKey]
                                                     },
                                                     `${E}-value`
                                                   )
@@ -295,8 +322,8 @@ const F = Q("", {
                                         ]
                                       }
                                     ),
-                                    p < G - 1 && /* @__PURE__ */ s("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
-                                  ] }, p);
+                                    h < k - 1 && /* @__PURE__ */ t("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                                  ] }, h);
                                 })
                               ]
                             }

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

@@ -36,4 +36,6 @@ export declare const SingleRow: Story;
 export declare const DynamicExpandableRowSections: Story;
 export declare const IndependentColumns: Story;
 export declare const LongLabels: Story;
+export declare const NoResponsiveColumns: Story;
+export declare const HideWithoutMoving: Story;
 //# sourceMappingURL=ExpandableTable.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA+MlC,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwJjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyH1C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0DhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoExB,CAAA"}
+{"version":3,"file":"ExpandableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA+MlC,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkB/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAwJjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAuBvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAyH1C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0DhC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoExB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA6EjC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA2E/B,CAAA"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './use-is-breakpoint';
+export * from './use-is-desktop';
+export * from './use-is-mobile';
+export * from './use-is-tablet';
+export * from './use-isomorphic-layout-effect';
+export * from './use-media-query';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA"}

package/dist/hooks/use-is-breakpoint.js

@@ -1,7 +1,16 @@
-import { useMediaQuery as n } from "./use-media-query.js";
-const t = 40, e = 48, r = 64, i = () => n(`(min-width: ${t}rem)`), m = () => n(`(min-width: ${e}rem)`), o = () => n(`(min-width: ${r}rem)`);
+import { useMediaQuery as t } from "./use-media-query.js";
+const s = 40, n = 48, e = 64, r = 80, m = 100, i = 120, o = () => t(`(min-width: ${s}rem)`), c = () => t(`(max-width: ${s}rem)`), I = () => t(`(min-width: ${n}rem)`), x = () => t(`(max-width: ${n}rem)`), M = () => t(`(min-width: ${e}rem)`), d = () => t(`(max-width: ${e}rem)`), a = () => t(`(min-width: ${r}rem)`), h = () => t(`(max-width: ${r}rem)`), w = () => t(`(min-width: ${m}rem)`), $ = () => t(`(max-width: ${m}rem)`), X = () => t(`(min-width: ${i}rem)`), l = () => t(`(max-width: ${i}rem)`);
 export {
-  o as useIsMinLg,
-  m as useIsMinMd,
-  i as useIsMinSm
+  $ as useIsMax2xl,
+  l as useIsMax3xl,
+  d as useIsMaxLg,
+  x as useIsMaxMd,
+  c as useIsMaxSm,
+  h as useIsMaxXl,
+  w as useIsMin2xl,
+  X as useIsMin3xl,
+  M as useIsMinLg,
+  I as useIsMinMd,
+  o as useIsMinSm,
+  a as useIsMinXl
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}