@agent-factory-platform/ui-kit 0.8.0 → 0.9.0

package/dist/components/input-otp.js

@@ -0,0 +1,56 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { cn as f } from "../lib/cn.js";
+function v({
+  value: a,
+  onValueChange: s,
+  label: l,
+  length: t = 6,
+  disabled: u = !1,
+  invalid: r = !1,
+  inputMode: o = "numeric",
+  className: d
+}) {
+  const c = (i) => {
+    const e = i.target.value, m = o === "numeric" ? e.replace(/\D/g, "") : e;
+    s(m.slice(0, t));
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-slot": "input-otp",
+      "data-focus-shell": !0,
+      "data-invalid": r || void 0,
+      className: f("group relative inline-flex max-w-full items-center gap-1.5 rounded-selection outline-none has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-rust/35", d),
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            type: "text",
+            value: a,
+            onChange: c,
+            maxLength: t,
+            inputMode: o,
+            autoComplete: "one-time-code",
+            "aria-label": l,
+            "aria-invalid": r || void 0,
+            disabled: u,
+            className: "absolute inset-0 z-10 size-full cursor-text opacity-0 outline-none disabled:cursor-not-allowed"
+          }
+        ),
+        Array.from({ length: t }, (i, e) => /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-hidden": !0,
+            "data-active": e === Math.min(a.length, t - 1) || void 0,
+            className: "grid size-control-default place-items-center rounded-control border border-border bg-pure-white font-mono text-body-sm tabular-nums text-ink data-[active=true]:border-rust data-[active=true]:bg-surface-muted group-data-[invalid=true]:border-danger",
+            children: a[e] ?? ""
+          },
+          e
+        ))
+      ]
+    }
+  );
+}
+export {
+  v as InputOtp
+};

package/dist/components/input.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { cn as a } from "../lib/cn.js";
+const s = "w-full rounded-control border border-border bg-pure-white font-sohne text-ink outline-none transition-colors placeholder:text-graphite hover:border-graphite focus:border-rust/70 focus-visible:ring-2 focus-visible:ring-rust/20 disabled:cursor-not-allowed disabled:bg-surface-muted disabled:text-graphite disabled:opacity-70", l = {
+  compact: "h-control-compact px-2.5 text-caption",
+  default: "h-control-default px-3 text-body-sm",
+  touch: "h-control-touch px-3.5 text-body"
+}, b = `${s} ${l.default}`, c = a(
+  s,
+  "min-h-[7.5rem] resize-y px-3 py-2.5 text-body-sm"
+), x = i(
+  function({ className: e, density: t = "default", ...o }, r) {
+    return /* @__PURE__ */ n(
+      "input",
+      {
+        ref: r,
+        "data-density": t,
+        className: a(s, l[t], e),
+        ...o
+      }
+    );
+  }
+), h = i(
+  function({ className: e, variant: t = "outlined", ...o }, r) {
+    return /* @__PURE__ */ n(
+      "textarea",
+      {
+        ref: r,
+        "data-variant": t,
+        className: a(
+          t === "outlined" ? c : "w-full min-h-[7.5rem] resize-y border-0 bg-transparent px-0 py-0 font-sohne text-body-sm text-ink outline-none placeholder:text-graphite focus-visible:ring-0 disabled:cursor-not-allowed disabled:text-graphite disabled:opacity-70",
+          e
+        ),
+        ...o
+      }
+    );
+  }
+);
+export {
+  x as Input,
+  h as Textarea,
+  b as fieldInputClass,
+  c as fieldTextareaClass
+};

package/dist/components/item.js

@@ -0,0 +1,47 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as a } from "../lib/cn.js";
+function c({ label: e, children: t, className: i }) {
+  return /* @__PURE__ */ n("ul", { role: "list", "aria-label": e, className: a("min-w-0 divide-y divide-divider", i), children: t });
+}
+function m({ className: e, density: t = "touch", ...i }) {
+  return /* @__PURE__ */ n(
+    "li",
+    {
+      "data-density": t,
+      className: a(
+        "flex min-w-0 items-center",
+        t === "compact" ? "min-h-row-default gap-1 py-0.5" : "min-h-row-touch gap-3 py-2.5",
+        e
+      ),
+      ...i
+    }
+  );
+}
+function s({ className: e, ...t }) {
+  return /* @__PURE__ */ n("span", { className: a("inline-grid size-control-default shrink-0 place-items-center rounded-control bg-surface-muted text-graphite", e), ...t });
+}
+function u({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", { className: a("min-w-0 flex-1", e), ...t });
+}
+function l({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", { className: a("truncate font-product text-body-sm font-[500] text-ink", e), ...t });
+}
+function p({ className: e, ...t }) {
+  return /* @__PURE__ */ n("p", { className: a("mt-0.5 truncate font-product text-caption text-graphite", e), ...t });
+}
+function d({ children: e, className: t }) {
+  return /* @__PURE__ */ n("span", { className: a("shrink-0 font-data text-data tabular-nums text-graphite", t), children: e });
+}
+function f({ children: e, className: t }) {
+  return /* @__PURE__ */ n("span", { className: a("shrink-0", t), children: e });
+}
+export {
+  m as Item,
+  f as ItemAction,
+  u as ItemContent,
+  p as ItemDescription,
+  c as ItemList,
+  s as ItemMedia,
+  d as ItemMeta,
+  l as ItemTitle
+};

package/dist/components/kbd.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as t } from "../lib/cn.js";
+function d({ className: e, ...r }) {
+  return /* @__PURE__ */ n(
+    "kbd",
+    {
+      className: t("inline-flex min-w-5 items-center justify-center rounded-indicator border border-border bg-surface-muted px-1.5 py-0.5 font-mono text-micro leading-none text-graphite shadow-subtle", e),
+      ...r
+    }
+  );
+}
+function m({ label: e, children: r, className: o }) {
+  return /* @__PURE__ */ n("span", { role: "group", "aria-label": e, className: t("inline-flex items-center gap-1", o), children: r });
+}
+export {
+  d as Kbd,
+  m as KbdGroup
+};

package/dist/components/line-chart.js

@@ -0,0 +1,79 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+function i(t, o, e, n = 6) {
+  const a = Math.max(...t, 1), c = Math.min(...t, 0), d = a - c || 1, f = (o - n * 2) / (t.length - 1 || 1);
+  return t.map((h, s) => {
+    const m = n + s * f, u = e - n - (h - c) / d * (e - n * 2);
+    return `${s === 0 ? "M" : "L"}${m.toFixed(1)},${u.toFixed(1)}`;
+  }).join(" ");
+}
+function k({
+  current: t,
+  previous: o,
+  width: e = 280,
+  height: n = 96,
+  ariaLabel: a
+}) {
+  return /* @__PURE__ */ l("svg", { width: "100%", viewBox: `0 0 ${e} ${n}`, role: "img", "aria-label": a, focusable: "false", className: "pointer-events-none select-none outline-none", children: [
+    o && /* @__PURE__ */ r(
+      "path",
+      {
+        d: i(o, e, n),
+        fill: "none",
+        stroke: "var(--color-rust)",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        opacity: 0.7
+      }
+    ),
+    /* @__PURE__ */ r(
+      "path",
+      {
+        d: i(t, e, n),
+        fill: "none",
+        stroke: "var(--color-data-blue)",
+        strokeWidth: 2,
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function $({ pct: t, size: o = 96 }) {
+  const e = o / 2 - 8, n = 2 * Math.PI * e;
+  return /* @__PURE__ */ l("svg", { width: o, height: o, viewBox: `0 0 ${o} ${o}`, role: "img", "aria-label": `${t}%`, focusable: "false", className: "pointer-events-none select-none outline-none", children: [
+    /* @__PURE__ */ r("circle", { cx: o / 2, cy: o / 2, r: e, fill: "none", stroke: "var(--color-pure-white)", strokeWidth: 10 }),
+    /* @__PURE__ */ r(
+      "circle",
+      {
+        cx: o / 2,
+        cy: o / 2,
+        r: e,
+        fill: "none",
+        stroke: "var(--color-rust)",
+        strokeWidth: 10,
+        strokeLinecap: "round",
+        strokeDasharray: `${n * t / 100} ${n}`,
+        transform: `rotate(-90 ${o / 2} ${o / 2})`
+      }
+    ),
+    /* @__PURE__ */ l(
+      "text",
+      {
+        x: "50%",
+        y: "52%",
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: "font-sohne font-[480]",
+        fontSize: o * 0.22,
+        fill: "var(--color-ink)",
+        children: [
+          t,
+          "%"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  $ as Donut,
+  k as LineChart
+};

package/dist/components/listbox.js

@@ -0,0 +1,33 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as s } from "radix-ui";
+import { cn as d } from "../lib/cn.js";
+function c({ label: o, className: t, children: i, ...r }) {
+  return /* @__PURE__ */ a("div", { role: "listbox", "aria-label": o, className: d("min-w-0", t), ...r, children: i });
+}
+function u({
+  selected: o,
+  disabled: t = !1,
+  asChild: i = !1,
+  className: r,
+  children: e,
+  ...n
+}) {
+  const l = i ? s.Root : "div";
+  return /* @__PURE__ */ a(
+    l,
+    {
+      role: "option",
+      "aria-selected": o,
+      "aria-disabled": t || void 0,
+      "data-selected": o ? "true" : "false",
+      "data-disabled": t ? "true" : void 0,
+      className: r,
+      ...n,
+      children: e
+    }
+  );
+}
+export {
+  c as Listbox,
+  u as ListboxOption
+};

package/dist/components/live-value.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as u, useState as p, useEffect as c } from "react";
+import { cn as l } from "../lib/cn.js";
+function x({ value: i, children: a, className: d, ...f }) {
+  const o = u(i), m = u(0), [e, s] = p(null);
+  return c(() => {
+    const n = o.current;
+    i != null && Number.isFinite(i) && n != null && Number.isFinite(n) && i !== n && s({ direction: i > n ? "up" : "down", sequence: ++m.current }), o.current = i;
+  }, [i]), c(() => {
+    if (!e) return;
+    const n = window.setTimeout(() => s((t) => (t == null ? void 0 : t.sequence) === e.sequence ? null : t), 1200);
+    return () => window.clearTimeout(n);
+  }, [e]), /* @__PURE__ */ r("span", { "data-live-value": !0, className: l("inline-flex min-w-0", d), ...f, children: /* @__PURE__ */ r(
+    "span",
+    {
+      "data-live-value-pulse": !0,
+      "data-direction": e == null ? void 0 : e.direction,
+      className: l("rounded-control px-0.5", e && (e.direction === "up" ? "af-live-value-up" : "af-live-value-down")),
+      children: a
+    },
+    (e == null ? void 0 : e.sequence) ?? 0
+  ) });
+}
+export {
+  x as LiveValue
+};

package/dist/components/modal.js

@@ -0,0 +1,140 @@
+import { jsx as o, jsxs as b, Fragment as S } from "react/jsx-runtime";
+import { useRef as C, useId as O, useEffect as q, useState as T } from "react";
+import { createPortal as A } from "react-dom";
+import { AnimatePresence as X, motion as j } from "motion/react";
+import { X as $ } from "lucide-react";
+import { transitions as v, fadeInOut as z, dialogRise as B, bottomSheet as G } from "../lib/motion.js";
+import { cn as y } from "../lib/cn.js";
+function H(i = 560) {
+  const n = `(min-width: ${i}px)`, [r, m] = T(
+    () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(n).matches
+  );
+  return q(() => {
+    if (typeof window.matchMedia != "function") return;
+    const a = window.matchMedia(n), d = () => m(a.matches);
+    return a.addEventListener("change", d), () => a.removeEventListener("change", d);
+  }, [n]), r;
+}
+function _({
+  open: i,
+  onClose: n,
+  title: r,
+  ariaLabel: m,
+  closeLabel: a = "Close",
+  children: d,
+  footer: w,
+  size: s = "sm",
+  bare: f = !1,
+  /** Viewport width (px) at which the modal becomes a centered card; below stays bottom sheet. */
+  sheetUntilPx: D = 560,
+  placement: x = "responsive",
+  rootClassName: I,
+  panelClassName: P
+}) {
+  const l = C(null), g = O(), k = C(n);
+  k.current = n;
+  const R = H(D), c = x === "center" || x === "responsive" && R, p = c ? B : G, F = c ? v.panel : v.drawer;
+  return q(() => {
+    if (!i) return;
+    const t = document.activeElement, E = (e) => {
+      if (e.key === "Escape") {
+        k.current();
+        return;
+      }
+      if (e.key === "Tab" && l.current) {
+        const u = l.current.querySelectorAll(
+          'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+        );
+        if (u.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const M = u[0], N = u[u.length - 1], h = document.activeElement;
+        e.shiftKey && (h === M || h === l.current) ? (e.preventDefault(), N.focus()) : !e.shiftKey && h === N && (e.preventDefault(), M.focus());
+      }
+    };
+    document.addEventListener("keydown", E);
+    const K = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const L = requestAnimationFrame(() => {
+      var e;
+      return (e = l.current) == null ? void 0 : e.focus();
+    });
+    return () => {
+      var e;
+      document.removeEventListener("keydown", E), document.body.style.overflow = K, cancelAnimationFrame(L), (e = t == null ? void 0 : t.focus) == null || e.call(t);
+    };
+  }, [i]), typeof document > "u" ? null : A(
+    /* @__PURE__ */ o(X, { children: i && /* @__PURE__ */ b(
+      "div",
+      {
+        className: y("fixed inset-0 z-50 flex justify-center", c ? "items-center" : "items-end", I),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": !f && r ? g : void 0,
+        "aria-label": f ? m ?? r : r ? void 0 : m,
+        "data-overlay": "modal",
+        "data-placement": c ? "center" : "bottom",
+        children: [
+          /* @__PURE__ */ o(
+            j.div,
+            {
+              ...z,
+              transition: v.fade,
+              "aria-hidden": "true",
+              onClick: n,
+              className: "absolute inset-0 bg-black/55 backdrop-blur-sm"
+            }
+          ),
+          /* @__PURE__ */ o(
+            j.div,
+            {
+              ref: l,
+              "data-testid": "modal-panel",
+              tabIndex: -1,
+              onClick: (t) => t.stopPropagation(),
+              onMouseDown: (t) => t.stopPropagation(),
+              initial: p.initial,
+              animate: p.animate,
+              exit: p.exit,
+              transition: F,
+              className: y(
+                // overflow-hidden clips full-bleed children (e.g. the account
+                // modal's Fog sidebar) to the panel radius — without it a square
+                // child paints over the rounded corners.
+                "relative z-10 flex max-h-[90dvh] w-full min-w-0 flex-col overflow-hidden border border-border bg-surface-raised shadow-pop outline-none",
+                c ? y(
+                  "m-4 rounded-overlay pb-0",
+                  s === "full" ? "max-w-[1500px]" : s === "wide" ? "max-w-[980px]" : s === "xl" ? "max-w-overlay-dashboard" : s === "lg" ? "max-w-overlay-lg" : s === "command" ? "max-w-overlay-command" : "max-w-overlay-sm"
+                ) : "rounded-t-sheet border-b-0 pb-[env(safe-area-inset-bottom)]",
+                P
+              ),
+              children: f ? d : /* @__PURE__ */ b(S, { children: [
+                r && /* @__PURE__ */ b("header", { className: "flex shrink-0 items-center justify-between gap-3 px-5 pb-1 pt-5", children: [
+                  /* @__PURE__ */ o("h2", { id: g, className: "font-sohne text-body-lg font-[500] tracking-[0] text-ink", children: r }),
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: n,
+                      title: a,
+                      "aria-label": a,
+                      className: "-mr-1 grid size-8 place-items-center rounded-control text-graphite outline-none transition hover:bg-surface-hover hover:text-ink focus-visible:ring-2 focus-visible:ring-rust/35",
+                      children: /* @__PURE__ */ o($, { size: 16, "aria-hidden": !0 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ o("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto px-5 pb-5 pt-2", children: d }),
+                w && /* @__PURE__ */ o("div", { className: "shrink-0 border-t border-divider px-5 py-3", children: w })
+              ] })
+            }
+          )
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+export {
+  _ as Modal
+};

package/dist/components/multi-select.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { ChevronDown as f, Check as b } from "lucide-react";
+import { useId as p } from "react";
+import { DropdownMenu as a } from "radix-ui";
+import { Button as g } from "./button.js";
+function C({
+  value: t,
+  options: s,
+  onValueChange: c,
+  label: l,
+  valueLabel: o
+}) {
+  const i = p(), u = s.filter((e) => t.includes(e.value));
+  return /* @__PURE__ */ n(a.Root, { children: [
+    /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: /* @__PURE__ */ n(g, { variant: "secondary", "aria-label": l, className: "max-w-full", children: [
+      /* @__PURE__ */ r("span", { className: "truncate", children: o(u) }),
+      /* @__PURE__ */ r(f, { size: 14, className: "shrink-0", "aria-hidden": !0 })
+    ] }) }),
+    /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ n(
+      a.Content,
+      {
+        "aria-labelledby": i,
+        sideOffset: 4,
+        collisionPadding: 8,
+        className: "z-50 min-w-48 rounded-panel border border-border bg-surface-raised p-1 font-product text-body-sm text-ink shadow-pop outline-none",
+        children: [
+          /* @__PURE__ */ r("span", { id: i, className: "sr-only", children: l }),
+          s.map((e) => {
+            const h = t.includes(e.value);
+            return /* @__PURE__ */ n(
+              a.CheckboxItem,
+              {
+                checked: h,
+                disabled: e.disabled,
+                onCheckedChange: (d) => c(d ? [...t, e.value] : t.filter((m) => m !== e.value)),
+                onSelect: (d) => d.preventDefault(),
+                className: "group flex min-h-row-default cursor-default select-none items-center gap-2 rounded-control px-3 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-surface-hover",
+                children: [
+                  /* @__PURE__ */ r("span", { className: "inline-flex size-4 shrink-0 items-center justify-center rounded-indicator border border-border group-data-[state=checked]:border-rust group-data-[state=checked]:bg-rust group-data-[state=checked]:text-on-accent", children: /* @__PURE__ */ r(a.ItemIndicator, { children: /* @__PURE__ */ r(b, { size: 12, strokeWidth: 3, "aria-hidden": !0 }) }) }),
+                  /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
+                  e.meta
+                ]
+              },
+              e.value
+            );
+          })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  C as MultiSelect
+};

package/dist/components/native-select.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as i } from "../lib/cn.js";
+function s({ label: t, options: l, onChange: a, className: o, ...d }) {
+  return /* @__PURE__ */ r(
+    "select",
+    {
+      "aria-label": t,
+      className: i("h-control-default min-w-0 rounded-control border border-border bg-pure-white px-3 font-product text-body-sm text-ink outline-none hover:border-graphite focus:border-rust/70 focus-visible:ring-2 focus-visible:ring-rust/20 disabled:bg-surface-muted disabled:text-graphite", o),
+      onChange: (e) => a(e.target.value),
+      ...d,
+      children: l.map((e) => /* @__PURE__ */ r("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+    }
+  );
+}
+export {
+  s as NativeSelect
+};

package/dist/components/navigation.js

@@ -0,0 +1,42 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { ChevronLeft as f, ChevronRight as d } from "lucide-react";
+function v({ label: l, items: t }) {
+  return /* @__PURE__ */ e("nav", { "aria-label": l, children: /* @__PURE__ */ e("ol", { className: "flex min-w-0 items-center gap-1 font-product text-caption text-graphite", children: t.map((r, i) => {
+    const o = i === t.length - 1;
+    return /* @__PURE__ */ s("li", { className: "flex min-w-0 items-center gap-1", children: [
+      i > 0 && /* @__PURE__ */ e("span", { "aria-hidden": !0, children: "/" }),
+      o ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "truncate font-[500] text-ink", children: r.label }) : r.href ? /* @__PURE__ */ e("a", { href: r.href, className: "truncate rounded-control outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-rust", children: r.label }) : /* @__PURE__ */ e("button", { type: "button", onClick: r.onClick, className: "truncate rounded-control outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-rust", children: r.label })
+    ] }, r.id);
+  }) }) });
+}
+function x({
+  label: l,
+  page: t,
+  pageCount: r,
+  onPageChange: i,
+  pageLabel: o,
+  previousLabel: c,
+  nextLabel: u
+}) {
+  const b = Array.from({ length: r }, (n, h) => h + 1), a = "inline-flex size-control-compact items-center justify-center rounded-control font-data text-caption outline-none hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-rust disabled:opacity-40";
+  return /* @__PURE__ */ s("nav", { "aria-label": l, className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ e("button", { type: "button", "aria-label": c, disabled: t <= 1, onClick: () => i(t - 1), className: a, children: /* @__PURE__ */ e(f, { size: 14, "aria-hidden": !0 }) }),
+    b.map((n) => /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": o(n),
+        "aria-current": n === t ? "page" : void 0,
+        onClick: () => i(n),
+        className: `${a} ${n === t ? "bg-surface-hover font-[500] text-ink" : "text-graphite"}`,
+        children: n
+      },
+      n
+    )),
+    /* @__PURE__ */ e("button", { type: "button", "aria-label": u, disabled: t >= r, onClick: () => i(t + 1), className: a, children: /* @__PURE__ */ e(d, { size: 14, "aria-hidden": !0 }) })
+  ] });
+}
+export {
+  v as Breadcrumb,
+  x as Pagination
+};

package/dist/components/page.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as t } from "../lib/cn.js";
+function p({
+  className: m,
+  children: o,
+  width: a = "fluid"
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-page-width": a,
+      className: t(
+        "w-full px-3 md:px-5",
+        a === "contained" && "mx-auto max-w-[96rem]",
+        m
+      ),
+      children: o
+    }
+  );
+}
+export {
+  p as PageContainer
+};