@vkzstudio/muza-ui 1.7.0 → 1.9.0

package/dist/components/CategoryIcon/CategoryIcon.js

@@ -1,9 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as g from "react";
-import { cva as l } from "class-variance-authority";
-import p from "color";
+import { jsx as s } from "react/jsx-runtime";
+import * as m from "react";
+import { cva as g } from "class-variance-authority";
+import l from "color";
 import { cn as y } from "../../utils/cn.js";
-const d = l(
+import { warnOnce as p } from "../../utils/warnOnce.js";
+const f = g(
   "inline-flex shrink-0 items-center justify-center rounded-full [&>svg]:pointer-events-none",
   {
     variants: {
@@ -15,40 +16,41 @@ const d = l(
     },
     defaultVariants: { size: "sm" }
   }
-), f = (t) => {
+), z = (e) => {
   try {
-    return p(t);
+    return l(e);
   } catch {
     return null;
   }
-}, a = /* @__PURE__ */ new Set(), z = g.forwardRef(
-  ({ className: t, color: e, icon: c, size: i, style: r, ...n }, s) => {
-    const o = f(e);
-    return !o && process.env.NODE_ENV !== "production" && !a.has(e) && (a.add(e), console.warn(
-      `[CategoryIcon] Invalid color "${e}". Falling back to neutral styling.`
-    )), /* @__PURE__ */ m(
+}, d = m.forwardRef(
+  ({ className: e, color: r, icon: i, size: c, style: t, ...a }, n) => {
+    const o = z(r);
+    return o || p(
+      `CategoryIcon:invalid-color:${r}`,
+      `[CategoryIcon] Invalid color "${r}". Falling back to neutral styling.`
+    ), /* @__PURE__ */ s(
       "span",
       {
-        ref: s,
+        ref: n,
         "data-slot": "category-icon",
         className: y(
-          d({ size: i }),
+          f({ size: c }),
           o && "bg-(--category-icon-bg) text-(--category-icon-fg)",
-          t
+          e
         ),
         style: o ? {
           "--category-icon-bg": o.alpha(0.2).toString(),
           "--category-icon-fg": o.toString(),
-          ...r
-        } : r,
-        ...n,
-        children: c
+          ...t
+        } : t,
+        ...a,
+        children: i
       }
     );
   }
 );
-z.displayName = "CategoryIcon";
+d.displayName = "CategoryIcon";
 export {
-  z as CategoryIcon,
-  d as categoryIconVariants
+  d as CategoryIcon,
+  f as categoryIconVariants
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -20,11 +20,28 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     /**
      * Shrinks the content region's top and bottom padding to
      * `--spacing-comp-dialog-p-hor-sm` for a more compact dialog. Header and
-     * footer keep their own padding and stay flush to the edges.
+     * footer keep their own padding and stay flush to the edges. Combined with
+     * `isFullscreenOnMobile`, a bare-content dialog keeps this compact bottom
+     * padding at fullscreen too.
      *
      * @default false
      */
     smallerContentYpadding?: boolean;
+    /**
+     * Below the `md` breakpoint (768px), renders the dialog edge-to-edge over
+     * the whole viewport: the overlay gutter, the `max-w-*` cap and the corner
+     * radius all come off. Above `md` the dialog is unchanged.
+     *
+     * A bare-content dialog moves its close button in-flow to the top right and
+     * scrolls as a whole. A dialog with a `DialogHeader` / `DialogFooter` is
+     * pinned to the full screen height with the content region scrolling
+     * between them. Without a `DialogHeader` a close button is rendered at the
+     * top of the content region, because at fullscreen there is no overlay to
+     * tap; with `DialogHeader hideCloseButton` provide your own `DialogClose`.
+     *
+     * @default false
+     */
+    isFullscreenOnMobile?: boolean;
 }
 declare const Dialog: React.FC<DialogProps>;
 declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
@@ -48,10 +65,6 @@ declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPri
 declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-    size?: "small" | "medium" | "large";
-    closeAriaLabel?: string;
-    smallerContentYpadding?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>>;
+declare const DialogContent: import('react').ForwardRefExoticComponent<DialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAMzD,6EAA6E;AAC7E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,kHAAkH;AAClH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IAChE,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;OAMG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAA;AAC1D,QAAA,MAAM,WAAW,iIAAwB,CAAA;AACzC,QAAA,MAAM,iBAAiB,yIAA8B,CAAA;AAsBrD,iHAAiH;AACjH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,YAAY,8GAyDjB,CAAA;AAGD,6IAA6I;AAC7I,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,YAAY,2MAejB,CAAA;AAGD,QAAA,MAAM,aAAa,kIAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,uDAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,gIAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,4LAYjB,CAAA;AAGF,QAAA,MAAM,aAAa;WAGR,OAAO,GAAG,QAAQ,GAAG,OAAO;qBAClB,MAAM;6BACE,OAAO;kDA4FnC,CAAA;AAGD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAMzD,6EAA6E;AAC7E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACzD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,kHAAkH;AAClH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IAChE,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAA;AAC1D,QAAA,MAAM,WAAW,iIAAwB,CAAA;AACzC,QAAA,MAAM,iBAAiB,yIAA8B,CAAA;AAsBrD,iHAAiH;AACjH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,YAAY,8GAyDjB,CAAA;AAGD,6IAA6I;AAC7I,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE/D,QAAA,MAAM,YAAY,2MAejB,CAAA;AAGD,QAAA,MAAM,aAAa,kIAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,uDAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,gIAAwB,CAAA;AAEzC,QAAA,MAAM,aAAa,4LAYjB,CAAA;AAGF,QAAA,MAAM,aAAa,+GA+HlB,CAAA;AAGD,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/Dialog/Dialog.js

@@ -1,68 +1,68 @@
-import { jsx as a, jsxs as p, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as n, Children as L, isValidElement as w } from "react";
+import { jsx as a, jsxs as n, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as b, Children as T, isValidElement as k } from "react";
 import * as e from "@radix-ui/react-dialog";
-import { useMuzaTranslations as D } from "../../translations/TranslationContext.js";
-import { cn as r } from "../../utils/cn.js";
+import { useMuzaTranslations as C } from "../../translations/TranslationContext.js";
+import { cn as i } from "../../utils/cn.js";
 import "@solar-icons/react-perf";
-import { XClose as T } from "../Icons/CustomIcons.js";
-import { typographyVariants as z } from "../Typography/Typography.js";
-const q = e.Root, G = e.Title, I = e.Description, k = ({
-  className: i,
+import { XClose as z } from "../Icons/CustomIcons.js";
+import { typographyVariants as H } from "../Typography/Typography.js";
+const J = e.Root, K = e.Title, Q = e.Description, w = ({
+  className: t,
   ariaLabel: o
 }) => /* @__PURE__ */ a(
   e.Close,
   {
-    className: r(
+    className: i(
       "cursor-pointer text-icon-dark-primary-def focus-visible-default transition-opacity disabled:pointer-events-none",
-      i
+      t
     ),
     "aria-label": o,
-    children: /* @__PURE__ */ a(T, { className: "size-icon-medium" })
+    children: /* @__PURE__ */ a(z, { className: "size-icon-medium" })
   }
-), F = n(
+), j = b(
   ({
-    className: i,
+    className: t,
     icon: o,
-    children: t,
-    title: s,
-    hideCloseButton: m = !1,
-    closeAriaLabel: g,
-    ...b
-  }, f) => {
-    const y = D(), c = g ?? y.dialog.closeAriaLabel;
+    children: r,
+    title: m,
+    hideCloseButton: d = !1,
+    closeAriaLabel: s,
+    ...f
+  }, h) => {
+    const y = C(), g = s ?? y.dialog.closeAriaLabel;
     return /* @__PURE__ */ a(
       "div",
       {
-        ref: f,
-        className: r(
+        ref: h,
+        className: i(
           "-mx-comp-dialog-p -mt-comp-dialog-p border-b border-stroke-base-primary px-comp-dialog-p py-comp-dialog-p-hor-def",
-          i
+          t
         ),
-        ...b,
-        children: /* @__PURE__ */ p("div", { className: "flex items-center gap-comp-dialog-gap", children: [
-          /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
+        ...f,
+        children: /* @__PURE__ */ n("div", { className: "flex items-center gap-comp-dialog-gap", children: [
+          /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
             o && /* @__PURE__ */ a("span", { className: "text-icon-brand-def [&>svg]:size-icon-medium", children: o }),
             /* @__PURE__ */ a(
               e.Title,
               {
-                className: r(
+                className: i(
                   "min-w-0 flex-1 text-text-dark-primary-def",
-                  z({
+                  H({
                     variant: "title",
                     size: "md",
                     weight: "medium",
                     fixY: !0
                   })
                 ),
-                children: s ?? t
+                children: m ?? r
               }
             )
           ] }),
-          !m && /* @__PURE__ */ a(
-            k,
+          !d && /* @__PURE__ */ a(
+            w,
             {
               className: "shrink-0",
-              ariaLabel: c
+              ariaLabel: g
             }
           )
         ] })
@@ -70,112 +70,148 @@ const q = e.Root, G = e.Title, I = e.Description, k = ({
     );
   }
 );
-F.displayName = "DialogHeader";
-const H = n(
-  ({ className: i, children: o, ...t }, s) => /* @__PURE__ */ a(
+j.displayName = "DialogHeader";
+const P = b(
+  ({ className: t, children: o, ...r }, m) => /* @__PURE__ */ a(
     "div",
     {
-      ref: s,
-      className: r(
+      ref: m,
+      className: i(
         "-mx-comp-dialog-p -mb-comp-dialog-p flex items-center justify-end gap-sm border-t border-stroke-base-primary px-comp-dialog-p py-comp-dialog-p-hor-sm",
-        i
+        t
       ),
-      ...t,
+      ...r,
       children: o
     }
   )
 );
-H.displayName = "DialogFooter";
-const J = e.Trigger, j = e.Portal, K = e.Close, C = n(({ className: i, ...o }, t) => /* @__PURE__ */ a(
+P.displayName = "DialogFooter";
+const S = e.Trigger, R = e.Portal, U = e.Close, L = b(({ className: t, ...o }, r) => /* @__PURE__ */ a(
   e.Overlay,
   {
-    ref: t,
-    className: r(
+    ref: r,
+    className: i(
       "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-surface-base-overlay px-layout-p-standard py-comp-dialog-p-hor-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      i
+      t
     ),
     ...o
   }
 ));
-C.displayName = e.Overlay.displayName;
-const O = n(
+L.displayName = e.Overlay.displayName;
+const V = b(
   ({
-    className: i,
+    className: t,
     children: o,
-    size: t = "medium",
-    closeAriaLabel: s,
-    smallerContentYpadding: m = !1,
-    ...g
-  }, b) => {
-    const f = D(), y = s ?? f.dialog.closeAriaLabel, c = L.toArray(o), u = c.find(
+    size: r = "medium",
+    closeAriaLabel: m,
+    smallerContentYpadding: d = !1,
+    isFullscreenOnMobile: s = !1,
+    ...f
+  }, h) => {
+    const y = C(), g = m ?? y.dialog.closeAriaLabel, u = T.toArray(o), v = u.find(
       (l) => {
-        var d;
-        return w(l) && ((d = l.type) == null ? void 0 : d.displayName) === "DialogHeader";
+        var p;
+        return k(l) && ((p = l.type) == null ? void 0 : p.displayName) === "DialogHeader";
       }
-    ), h = c.find(
+    ), N = u.find(
       (l) => {
-        var d;
-        return w(l) && ((d = l.type) == null ? void 0 : d.displayName) === "DialogFooter";
+        var p;
+        return k(l) && ((p = l.type) == null ? void 0 : p.displayName) === "DialogFooter";
       }
-    ), A = c.filter(
-      (l) => l !== u && l !== h
-    ), x = !!u, v = !!h;
-    return /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(C, { children: /* @__PURE__ */ a(
-      e.Content,
+    ), A = u.filter(
+      (l) => l !== v && l !== N
+    ), c = !!v, x = !!N;
+    return /* @__PURE__ */ a(R, { children: /* @__PURE__ */ a(
+      L,
       {
-        ref: b,
-        className: r(
-          "relative flex w-full flex-col rounded-comp-dialog-radius bg-surface-base-secondary px-comp-dialog-p duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          {
-            "max-w-comp-dialog-w-sm": t === "small",
-            "max-w-comp-dialog-w-md": t === "medium",
-            "max-w-comp-dialog-w-lg": t === "large",
-            "max-h-[calc(100vh-var(--spacing-comp-dialog-p-hor-overlay)*2)]": v || x
-          },
-          // Header/footer bleed to the edges via negative margins that cancel
-          // the root vertical padding, so it stays standard when either is
-          // present. A bare content dialog is padded directly by the root.
-          x || v ? "py-comp-dialog-p" : m ? "py-comp-dialog-p-hor-sm" : "pt-5xl pb-comp-dialog-p",
-          i
+        className: i(
+          s && "max-md:place-items-stretch max-md:px-0 max-md:py-0"
         ),
-        ...g,
-        children: x || v ? /* @__PURE__ */ p(N, { children: [
-          u,
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: r(
-                "-mr-[calc(var(--spacing-comp-dialog-p)-8px)] min-h-0 flex-1 overflow-y-auto pr-[calc(var(--spacing-comp-dialog-p)-8px-5px)] [&::-webkit-scrollbar]:w-[5px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
-                m ? "py-comp-dialog-p-hor-sm" : "py-comp-dialog-p"
+        children: /* @__PURE__ */ a(
+          e.Content,
+          {
+            ref: h,
+            className: i(
+              "relative flex w-full flex-col rounded-comp-dialog-radius bg-surface-base-secondary px-comp-dialog-p duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+              {
+                "max-w-comp-dialog-w-sm": r === "small",
+                "max-w-comp-dialog-w-md": r === "medium",
+                "max-w-comp-dialog-w-lg": r === "large",
+                "max-h-[calc(100vh-var(--spacing-comp-dialog-p-hor-overlay)*2)]": x || c
+              },
+              // Header/footer bleed to the edges via negative margins that cancel
+              // the root vertical padding, so it stays standard when either is
+              // present. A bare content dialog is padded directly by the root.
+              c || x ? "py-comp-dialog-p" : d ? "py-comp-dialog-p-hor-sm" : "pt-5xl pb-comp-dialog-p",
+              // `max-w-none` is unusable: the design system defines
+              // `--spacing-none`, so Tailwind resolves it to `0px`.
+              s && "max-md:max-w-[none] max-md:rounded-none",
+              s && (c || x ? (
+                // The overlay's grid row is auto-sized, so the column needs
+                // a definite height for the `flex-1` middle to scroll in.
+                "max-md:h-dvh max-md:max-h-dvh"
+              ) : (
+                // Tokens follow the design's fullscreen frame, which binds
+                // the primitives rather than the dialog tokens.
+                [
+                  "max-md:px-layout-p-standard max-md:pt-xl",
+                  !d && "max-md:pb-3xl"
+                ]
+              )),
+              t
+            ),
+            ...f,
+            children: c || x ? /* @__PURE__ */ n(D, { children: [
+              v,
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: i(
+                    "-mr-[calc(var(--spacing-comp-dialog-p)-8px)] min-h-0 flex-1 overflow-y-auto pr-[calc(var(--spacing-comp-dialog-p)-8px-5px)] [&::-webkit-scrollbar]:w-[5px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-stroke-base-secondary hover:[&::-webkit-scrollbar-thumb]:bg-stroke-base-primary [&::-webkit-scrollbar-track]:bg-transparent",
+                    d ? "py-comp-dialog-p-hor-sm" : "py-comp-dialog-p"
+                  ),
+                  children: [
+                    s && !c && /* @__PURE__ */ a(
+                      w,
+                      {
+                        className: "mb-xl ml-auto block md:hidden",
+                        ariaLabel: g
+                      }
+                    ),
+                    /* @__PURE__ */ a("div", { children: A })
+                  ]
+                }
               ),
-              children: /* @__PURE__ */ a("div", { children: A })
-            }
-          ),
-          h
-        ] }) : /* @__PURE__ */ p(N, { children: [
-          o,
-          /* @__PURE__ */ a(
-            k,
-            {
-              className: "absolute top-4 right-4",
-              ariaLabel: y
-            }
-          )
-        ] })
+              N
+            ] }) : /* @__PURE__ */ n(D, { children: [
+              o,
+              /* @__PURE__ */ a(
+                w,
+                {
+                  className: i(
+                    "absolute top-4 right-4",
+                    s && "max-md:static max-md:order-first max-md:mb-xl max-md:self-end"
+                  ),
+                  ariaLabel: g
+                }
+              )
+            ] })
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 );
-O.displayName = e.Content.displayName;
+V.displayName = e.Content.displayName;
 export {
-  q as Dialog,
-  K as DialogClose,
-  O as DialogContent,
-  I as DialogDescription,
-  H as DialogFooter,
-  F as DialogHeader,
-  C as DialogOverlay,
-  j as DialogPortal,
-  G as DialogTitle,
-  J as DialogTrigger
+  J as Dialog,
+  U as DialogClose,
+  V as DialogContent,
+  Q as DialogDescription,
+  P as DialogFooter,
+  j as DialogHeader,
+  L as DialogOverlay,
+  R as DialogPortal,
+  K as DialogTitle,
+  S as DialogTrigger
 };

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

@@ -17,4 +17,7 @@ export declare const OverflowContent: Story;
 export declare const WithHeaderAndFooter: Story;
 export declare const SmallerContentYPadding: Story;
 export declare const WithHeaderAndFooterLongContent: Story;
+export declare const FullscreenOnMobile: Story;
+export declare const FullscreenOnMobileWithHeaderAndFooter: Story;
+export declare const FullscreenOnMobileFooterOnly: Story;
 //# sourceMappingURL=Dialog.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiD7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoDnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA2CjC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAuCpC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiK5C,CAAA"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EACL,MAAM,EAOP,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiD7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoDnB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkBpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KA2CjC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAuCpC,CAAA;AAED,eAAO,MAAM,8BAA8B,EAAE,KAiK5C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA6HhC,CAAA;AAED,eAAO,MAAM,qCAAqC,EAAE,KAwCnD,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAiD1C,CAAA"}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
+import { ResponsiveBreakpoint } from '../../utils/breakpoints';
 export type { ResponsiveBreakpoint };
 /**
  * Column definition for the ExpandableTable.

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;AAEd,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAA;AAclC,YAAY,EAAE,oBAAoB,EAAE,CAAA;AAEpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxD,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;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxE,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAC3E,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACrE,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;;;;OAUG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;;;;;OAiBG;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;;;;;;;;;;;;;;OAcG;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,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,uDAKhE,oBAAoB,CAAC,CAAC,CAAC,4CAgYzB,CAAA"}
+{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAId,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAa/D,YAAY,EAAE,oBAAoB,EAAE,CAAA;AAEpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxD,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;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAA;IAC3C;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACxE,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IAC3E,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE;IACrE,sEAAsE;IACtE,IAAI,EAAE,CAAC,EAAE,CAAA;IACT;;;;;;;;;;OAUG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB;;;;;;;;;;;;;;;;;OAiBG;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;;;;;;;;;;;;;;OAcG;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,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAAE,uDAKhE,oBAAoB,CAAC,CAAC,CAAC,4CAgYzB,CAAA"}

package/dist/components/Flex/Flex.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { HTMLElementTag } from '../../utils/polymorphic';
 import { SpacingProps } from '../../utils/spacing';
 import * as React from 'react';
 /**
@@ -373,39 +373,39 @@ export declare const flexLayoutDefaults: {
     readonly align: "stretch";
 };
 declare const flexVariants: (props?: ({
-    gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    gapX?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    gapY?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    p?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    px?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    py?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    pt?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    pr?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    pb?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    pl?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    m?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    mx?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    my?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    mt?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    mr?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    mb?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
-    ml?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    gap?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    gapX?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    gapY?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    p?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    px?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    py?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    pt?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    pr?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    pb?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    pl?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    m?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    mx?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    my?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    mt?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    mr?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    mb?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
+    ml?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "2xs" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
     direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
     justify?: "end" | "start" | "center" | "stretch" | "between" | "around" | "evenly" | null | undefined;
     align?: "end" | "start" | "center" | "baseline" | "stretch" | null | undefined;
     flex?: 1 | "none" | "auto" | "initial" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type HTMLElementTag = keyof React.JSX.IntrinsicElements & keyof HTMLElementTagNameMap;
 /**
- * Props for the Flex layout component.
- * Extends CSS Flexbox with design system spacing tokens and semantic HTML support.
+ * Flex's own layout props, independent of which element it renders as.
+ *
+ * Split out from `FlexProps` so composing components can subtract these keys
+ * from an element's native attributes — the two sets overlap on names like
+ * `wrap` and `align`, and Flex's meaning has to win.
  */
-export interface FlexProps extends Omit<VariantProps<typeof flexVariants>, 'gap' | 'gapX' | 'gapY' | 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'm' | 'mx' | 'my' | 'mt' | 'mr' | 'mb' | 'ml' | 'direction' | 'wrap' | 'justify' | 'align' | 'flex'>, SpacingProps {
+export interface FlexOwnProps extends SpacingProps {
     /** Content to display inside the flex container. */
     children?: React.ReactNode;
-    /** HTML element to render for semantic markup. @default 'div' */
-    component?: HTMLElementTag;
     /** Additional CSS classes for custom styling. */
     className?: string;
     /** Inline styles for escape-hatch customizations not covered by tokens. */
@@ -452,6 +452,23 @@ export interface FlexProps extends Omit<VariantProps<typeof flexVariants>, 'gap'
      */
     margin?: SpacingProps['margin'];
 }
-declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for the Flex layout component.
+ * Extends CSS Flexbox with design system spacing tokens and semantic HTML support.
+ *
+ * Includes the standard HTML attributes (`id`, `onClick`, `role`, `aria-*`, …)
+ * typed against `HTMLElement`, since the rendered tag is not known here. Name
+ * a `component` at the call site and its own attributes come along too —
+ * `href` on an `a`, `htmlFor` on a `label` — with `ref` typed as that element.
+ *
+ * @example
+ * <Flex id="filters" onClick={handleClick} gap="sm" />
+ * <Flex component="a" href="/account" gap="sm" />
+ */
+export interface FlexProps extends FlexOwnProps, Omit<React.HTMLAttributes<HTMLElement>, keyof FlexOwnProps | 'color'> {
+    /** HTML element to render for semantic markup. @default 'div' */
+    component?: HTMLElementTag;
+}
+declare const Flex: import('../../utils').PolymorphicComponent<FlexOwnProps, FlexProps>;
 export { Flex, flexVariants };
 //# sourceMappingURL=Flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAA;AAExB;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC9B,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAA;AAEV,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;8EAGhB,CAAA;AAEF,KAAK,cAAc,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GACrD,MAAM,qBAAqB,CAAA;AAE7B;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACR,YAAY,CAAC,OAAO,YAAY,CAAC,EAC/B,KAAK,GACL,MAAM,GACN,MAAM,GACN,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,WAAW,GACX,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,CACT,EACD,YAAY;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;IACzC,yDAAyD;IACzD,OAAO,CAAC,EACJ,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,SAAS,CAAA;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,0CAA0C;IAC1C,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC;AAED,QAAA,MAAM,IAAI,+EA4CT,CAAA;AAID,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,cAAc,EAAyB,MAAM,qBAAqB,CAAA;AAChF,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAA;AAExB;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC9B,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAA;AAEV,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;8EAGhB,CAAA;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;IACzC,yDAAyD;IACzD,OAAO,CAAC,EACJ,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,SAAS,CAAA;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,0CAA0C;IAC1C,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,SACf,SAAQ,YAAY,EAClB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,MAAM,YAAY,GAAG,OAAO,CAAC;IACvE,iEAAiE;IACjE,SAAS,CAAC,EAAE,cAAc,CAAA;CAC3B;AAED,QAAA,MAAM,IAAI,iEAwCR,CAAA;AAIF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}