@ramme-io/ui 4.2.2 → 4.2.4

package/dist/blocks/ai/Actions.js

@@ -1,6 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
-const s = ({ children: o, onClick: t }) => /* @__PURE__ */ r("button", { onClick: t, className: "px-3 py-1.5 bg-card-alt hover:bg-bg-hover border border-border rounded-full text-sm text-muted-foreground transition-colors", children: o }), a = ({ children: o }) => /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2 mt-3", children: o });
+import { jsx as t } from "react/jsx-runtime";
+const n = ({ children: e, onClick: r }) => (
+  // min-h-11 is the 44px tap target (AGENTS.md Zero Jank rule 8) — these sat at
+  // 38px with the open chat panel measured at 360px wide.
+  /* @__PURE__ */ t("button", { onClick: r, className: "inline-flex min-h-11 items-center justify-center px-3 bg-card-alt hover:bg-bg-hover border border-border rounded-full text-sm text-muted-foreground transition-colors", children: e })
+), s = ({ children: e }) => /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2 mt-3", children: e });
 export {
-  a as Actions,
-  s as Suggestion
+  s as Actions,
+  n as Suggestion
 };

package/dist/blocks/ai/PromptInput.js

@@ -1,18 +1,26 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { Icon as m } from "../../components/ui/Icon.js";
-const i = ({ value: r, onChange: t, onSubmit: o, placeholder: n = "Type your message..." }) => /* @__PURE__ */ s("form", { onSubmit: o, className: "flex items-center p-2 border-t border-border", children: [
+const l = ({ value: r, onChange: t, onSubmit: n, placeholder: o = "Type your message..." }) => /* @__PURE__ */ s("form", { onSubmit: n, className: "flex items-center p-2 border-t border-border", children: [
   /* @__PURE__ */ e(
     "input",
     {
       type: "text",
-      placeholder: n,
-      className: "flex-1 p-2 bg-transparent focus:outline-none text-foreground",
+      placeholder: o,
+      className: "flex-1 min-h-11 p-2 bg-transparent focus:outline-none text-foreground",
       value: r,
       onChange: t
     }
   ),
-  /* @__PURE__ */ e("button", { type: "submit", className: "p-2 text-primary hover:bg-primary/10 rounded-full transition-colors", children: /* @__PURE__ */ e(m, { name: "send" }) })
+  /* @__PURE__ */ e(
+    "button",
+    {
+      type: "submit",
+      "aria-label": "Send message",
+      className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center text-primary hover:bg-primary/10 rounded-full transition-colors",
+      children: /* @__PURE__ */ e(m, { name: "send" })
+    }
+  )
 ] });
 export {
-  i as PromptInput
+  l as PromptInput
 };

package/dist/components/data-display/DataTable.d.ts

@@ -4,10 +4,15 @@ import { type DataFormat } from '../../lib/formatters';
 /**
  * @wizard
  * @name DataTable
- * @description A "Smart" data grid that renders data based on a simple JSON schema.
- * @tags data-display, grid, table, smart-component
+ * @description A "Smart" data grid that renders data based on a simple JSON schema. Below 768px it renders the same rows as cards instead, derived from the column definitions — no second layout to write. Set mobileCards={false} to keep the grid at every width.
+ * @tags data-display, grid, table, smart-component, responsive, mobile
  * @category data-display
  * @id data-table
+ * @param {ColumnSchema[]} schema - Columns as a JSON schema; an alternative to passing columnDefs.
+ * @param {TableAction[]} actions - Per-row icon buttons, pinned right in the grid and shown in the card footer.
+ * @param {boolean} mobileCards - Render rows as cards below 768px. Default true.
+ * @param {ReactNode} emptyState - Shown instead of the grid or the cards when there are no rows.
+ * @param {boolean} loading - Shows a loading overlay in the grid, skeleton cards on a phone.
  */
 export interface ColumnSchema {
     key: string;
@@ -29,5 +34,15 @@ export interface DataTableProps extends AgGridReactProps {
     actions?: TableAction[];
     emptyState?: React.ReactNode;
     loading?: boolean;
+    /**
+     * Render rows as cards below 768px instead of a horizontally scrolling grid.
+     *
+     * Defaults to ON. A grid is a horizontal instrument and a phone is not: the
+     * risk watchlist declares eight columns with one pinned each side, so at
+     * 360px a reader got the two pinned columns and a sliver of the six carrying
+     * the actual data. Opting out is for a table that genuinely needs to stay a
+     * table — a wide matrix read by comparing rows down a column.
+     */
+    mobileCards?: boolean;
 }
 export declare const DataTable: React.FC<DataTableProps>;

package/dist/components/data-display/DataTable.js

@@ -1,92 +1,104 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useMemo as c } from "react";
-import { AgGridReact as v } from "ag-grid-react";
-import { formatValue as N } from "../../lib/formatters.js";
-import { Button as w } from "../ui/Button.js";
-import { Icon as C } from "../ui/Icon.js";
-const j = ({
-  height: g = "500px",
-  defaultColDef: d,
-  schema: n,
-  actions: r,
-  columnDefs: o,
-  emptyState: p,
-  rowData: s,
-  loading: m = !1,
-  ...i
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { AgGridReact as w } from "ag-grid-react";
+import { formatValue as x } from "../../lib/formatters.js";
+import { Button as R } from "../ui/Button.js";
+import { Icon as z } from "../ui/Icon.js";
+import { useIsMobile as T } from "../../lib/hooks/useMediaQuery.js";
+import { DataTableCards as k } from "./_DataTableCards.js";
+const O = ({
+  height: f = "500px",
+  defaultColDef: p,
+  schema: m,
+  actions: n,
+  columnDefs: c,
+  emptyState: s,
+  rowData: i,
+  loading: o = !1,
+  mobileCards: h = !0,
+  ...t
 }) => {
-  const h = c(() => ({
+  const b = T(), v = d(() => ({
     flex: 1,
     minWidth: 120,
     resizable: !0,
     sortable: !0,
     filter: !0,
     menuTabs: ["filterMenuTab"],
-    ...d
-  }), [d]), f = c(() => {
-    if (o) return o;
-    if (!n) return [];
-    const l = n.map((e) => {
-      const t = e.type === "number" || e.type === "currency" || e.type === "percent" || e.type === "delta";
+    ...p
+  }), [p]), g = d(() => {
+    if (c) return c;
+    if (!m) return [];
+    const r = m.map((e) => {
+      const a = e.type === "number" || e.type === "currency" || e.type === "percent" || e.type === "delta";
       return {
         field: e.key,
         headerName: e.label,
         hide: e.hide,
         width: e.width,
-        cellClass: t ? "text-right tabular-nums" : void 0,
-        headerClass: t ? "ag-right-aligned-header" : void 0,
-        cellRenderer: (u) => N(u.value, e.type),
-        filter: e.type === "date" ? "agDateColumnFilter" : t ? "agNumberColumnFilter" : "agTextColumnFilter"
+        cellClass: a ? "text-right tabular-nums" : void 0,
+        headerClass: a ? "ag-right-aligned-header" : void 0,
+        cellRenderer: (u) => x(u.value, e.type),
+        filter: e.type === "date" ? "agDateColumnFilter" : a ? "agNumberColumnFilter" : "agTextColumnFilter"
       };
     });
-    return r && r.length > 0 && l.push({
+    return n && n.length > 0 && r.push({
       headerName: "",
       field: "actions",
       pinned: "right",
-      width: 80 + r.length * 40,
+      width: 80 + n.length * 40,
       sortable: !1,
       filter: !1,
       resizable: !1,
-      cellRenderer: (e) => /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-1 h-full", children: r.map((t) => /* @__PURE__ */ a(
-        w,
+      cellRenderer: (e) => /* @__PURE__ */ l("div", { className: "flex items-center justify-end gap-1 h-full", children: n.map((a) => /* @__PURE__ */ l(
+        R,
         {
-          variant: t.variant || "ghost",
+          variant: a.variant || "ghost",
           size: "icon",
           className: "h-7 w-7",
-          title: t.label,
+          title: a.label,
           onClick: (u) => {
-            u.stopPropagation(), t.onClick(e.data);
+            u.stopPropagation(), a.onClick(e.data);
           },
-          children: /* @__PURE__ */ a(C, { name: t.icon, className: "h-4 w-4" })
+          children: /* @__PURE__ */ l(z, { name: a.icon, className: "h-4 w-4" })
         },
-        t.id
+        a.id
       )) })
-    }), l;
-  }, [n, o, r]), b = "ag-theme-quartz ag-theme-ramme", y = c(() => ({
+    }), r;
+  }, [m, c, n]), y = "ag-theme-quartz ag-theme-ramme", C = d(() => ({
     overlayLoadingTemplate: '<span class="ag-overlay-loading-center">Loading data...</span>',
     overlayNoRowsTemplate: '<span class="ag-overlay-no-rows-center">No data available</span>'
-  }), []);
-  return /* @__PURE__ */ a("div", { className: `relative ${b}`, style: { height: g, width: "100%" }, children: (!s || s.length === 0) && p && !m ? /* @__PURE__ */ a("div", { className: "absolute inset-0 z-10 bg-background/50 flex items-center justify-center", children: p }) : /* @__PURE__ */ a(
-    v,
+  }), []), N = (!i || i.length === 0) && !o;
+  return h && b ? /* @__PURE__ */ l("div", { className: "w-full", children: N && s ? /* @__PURE__ */ l("div", { className: "flex items-center justify-center py-fluid-lg", children: s }) : /* @__PURE__ */ l(
+    k,
     {
-      rowData: m ? [] : s,
-      columnDefs: f,
-      defaultColDef: h,
+      rowData: i,
+      columnDefs: g,
+      loading: o,
+      pageSize: t.pagination === !1 ? !1 : t.paginationPageSize ?? 20,
+      onRowClick: t.onRowClicked ? (r) => t.onRowClicked({ data: r }) : void 0
+    }
+  ) }) : /* @__PURE__ */ l("div", { className: `relative ${y}`, style: { height: f, width: "100%" }, children: (!i || i.length === 0) && s && !o ? /* @__PURE__ */ l("div", { className: "absolute inset-0 z-10 bg-background/50 flex items-center justify-center", children: s }) : /* @__PURE__ */ l(
+    w,
+    {
+      rowData: o ? [] : i,
+      columnDefs: g,
+      defaultColDef: v,
       rowSelection: "multiple",
       animateRows: !0,
       pagination: !0,
       paginationPageSize: 20,
       enableCellTextSelection: !0,
       suppressCellFocus: !0,
-      gridOptions: y,
-      onGridReady: (l) => {
+      gridOptions: C,
+      onGridReady: (r) => {
         var e;
-        m && l.api.showLoadingOverlay(), (e = i.onGridReady) == null || e.call(i, l);
+        o && r.api.showLoadingOverlay(), (e = t.onGridReady) == null || e.call(t, r);
       },
-      ...i
+      ...t
     }
   ) });
 };
 export {
-  j as DataTable
+  O as DataTable
 };

package/dist/components/data-display/_DataTableCards.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type ColDef } from 'ag-grid-community';
+export interface DataTableCardsProps {
+    rowData: any[] | null | undefined;
+    columnDefs: ColDef[];
+    loading?: boolean;
+    /** 0 or false disables card pagination; the grid's page size otherwise. */
+    pageSize?: number | false;
+    onRowClick?: (row: any) => void;
+}
+interface Slots {
+    heading: ColDef[];
+    body: ColDef[];
+    footer: ColDef[];
+}
+/**
+ * Split the columns into the card's three zones.
+ *
+ * Exported for the test, which is the only way to assert the mapping without
+ * mounting AG Grid.
+ */
+export declare function splitColumns(columnDefs: ColDef[]): Slots;
+/**
+ * Apply the grid's declared initial sort.
+ *
+ * Order is information here: the watchlist opens on risk ascending so the
+ * zombies lead, and a phone showing the same rows in insertion order would be
+ * a different screen, not a narrower one. `sortIndex` orders a multi-column
+ * sort; AG Grid treats a missing one as "after those that have it".
+ */
+export declare function applyDeclaredSort(rows: any[], columnDefs: ColDef[]): any[];
+export declare const DataTableCards: React.FC<DataTableCardsProps>;
+export {};

package/dist/components/data-display/_DataTableCards.js

@@ -0,0 +1,153 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import f from "react";
+import { Card as N, CardHeader as E, CardContent as F, CardFooter as I } from "../layout/Card.js";
+import { Pagination as M } from "../navigation/Pagination.js";
+import { Skeleton as x } from "../feedback/Skeleton.js";
+function y(n, r) {
+  if (!(!n || !r))
+    return r.includes(".") ? r.split(".").reduce((t, e) => t == null ? t : t[e], n) : n[r];
+}
+function P(n) {
+  return (n.colId ?? n.field ?? "").toLowerCase() === "actions";
+}
+function j(n) {
+  const r = n.filter((e) => !e.hide), t = { heading: [], body: [], footer: [] };
+  for (const e of r)
+    e.pinned === "left" || e.pinned === !0 ? t.heading.push(e) : e.pinned === "right" || P(e) ? t.footer.push(e) : t.body.push(e);
+  return t.heading.length === 0 && t.body.length > 0 && t.heading.push(t.body.shift()), t;
+}
+function k(n, r) {
+  const t = r.filter((s) => s.sort === "asc" || s.sort === "desc").sort((s, l) => (s.sortIndex ?? Number.MAX_SAFE_INTEGER) - (l.sortIndex ?? Number.MAX_SAFE_INTEGER));
+  if (t.length === 0) return n;
+  const e = [...n];
+  return e.sort((s, l) => {
+    for (const d of t) {
+      const c = y(s, d.field), u = y(l, d.field);
+      let i;
+      if (typeof d.comparator == "function")
+        i = d.comparator(c, u, null, null, !1) ?? 0;
+      else if (c == null && u == null) i = 0;
+      else {
+        if (c == null) return 1;
+        if (u == null) return -1;
+        typeof c == "number" && typeof u == "number" ? i = c - u : i = String(c).localeCompare(String(u), void 0, { numeric: !0 });
+      }
+      if (i !== 0) return d.sort === "desc" ? -i : i;
+    }
+    return 0;
+  }), e;
+}
+function C(n, r) {
+  const t = y(r, n.field);
+  let e = null;
+  try {
+    e = n.valueFormatter ? n.valueFormatter({ value: t, data: r, colDef: n, node: null }) : null;
+  } catch {
+    e = null;
+  }
+  return {
+    value: t,
+    valueFormatted: e,
+    data: r,
+    colDef: n,
+    node: null
+  };
+}
+function b(n, r) {
+  const t = C(n, r), e = t.valueFormatted ?? (t.value == null ? "—" : String(t.value)), s = n.cellRenderer;
+  if (typeof s == "function")
+    try {
+      const l = s(t);
+      if (l === null || typeof l == "string" || typeof l == "number" || f.isValidElement(l)) return l;
+    } catch {
+    }
+  return e;
+}
+function _(n, r) {
+  const t = n.cellClass;
+  let e;
+  if (typeof t == "function")
+    try {
+      e = t(C(n, r));
+    } catch {
+      e = void 0;
+    }
+  else
+    e = t;
+  const s = (Array.isArray(e) ? e : e ? [e] : []).flatMap((d) => String(d).split(/\s+/)), l = /* @__PURE__ */ new Set(["text-right", "ag-right-aligned-cell"]);
+  return s.filter((d) => d && !l.has(d)).join(" ");
+}
+const R = ({ count: n }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-3", children: Array.from({ length: n }, (r, t) => /* @__PURE__ */ g(N, { className: "p-4", children: [
+  /* @__PURE__ */ o(x, { className: "h-4 w-24" }),
+  /* @__PURE__ */ o("div", { className: "mt-3 grid grid-cols-2 gap-2", children: Array.from({ length: 4 }, (e, s) => /* @__PURE__ */ o(x, { className: "h-3 w-full" }, s)) })
+] }, t)) }), D = ({
+  rowData: n,
+  columnDefs: r,
+  loading: t = !1,
+  pageSize: e = !1,
+  onRowClick: s
+}) => {
+  const [l, d] = f.useState(1), c = f.useMemo(() => j(r), [r]), u = f.useMemo(
+    () => k(n ?? [], r),
+    [n, r]
+  ), i = typeof e == "number" && e > 0 ? e : 0, m = i ? Math.max(1, Math.ceil(u.length / i)) : 1;
+  f.useEffect(() => {
+    l > m && d(m);
+  }, [l, m]);
+  const A = i ? u.slice((l - 1) * i, l * i) : u;
+  return t ? /* @__PURE__ */ o(R, { count: Math.min(i || 3, 5) }) : /* @__PURE__ */ g("div", { className: "flex flex-col gap-3", children: [
+    A.map((p, S) => {
+      const v = !!s;
+      return /* @__PURE__ */ g(
+        N,
+        {
+          className: [
+            "overflow-hidden",
+            v ? "cursor-pointer active:bg-surface-muted" : ""
+          ].filter(Boolean).join(" "),
+          onClick: v ? () => s(p) : void 0,
+          children: [
+            c.heading.length > 0 && /* @__PURE__ */ o(E, { className: "flex-row items-center gap-3 p-4 pb-0", children: c.heading.map((a, h) => /* @__PURE__ */ o("div", { className: "min-w-0 flex-1 truncate", children: b(a, p) }, a.colId ?? a.field ?? h)) }),
+            c.body.length > 0 && /* @__PURE__ */ o(F, { className: "p-4 pt-3", children: /* @__PURE__ */ o("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: c.body.map((a, h) => /* @__PURE__ */ g(
+              "div",
+              {
+                className: "flex min-w-0 items-baseline justify-between gap-2",
+                children: [
+                  /* @__PURE__ */ o("dt", { className: "shrink-0 text-xs uppercase tracking-wider text-muted-foreground", children: a.headerName ?? a.field }),
+                  /* @__PURE__ */ o(
+                    "dd",
+                    {
+                      className: [
+                        "min-w-0 truncate text-sm tabular-nums",
+                        _(a, p)
+                      ].filter(Boolean).join(" "),
+                      children: b(a, p)
+                    }
+                  )
+                ]
+              },
+              a.colId ?? a.field ?? h
+            )) }) }),
+            c.footer.length > 0 && // min-h-11 is the 44px AAA tap target from AGENTS.md: the footer
+            // is where the controls live and a phone is what taps them.
+            /* @__PURE__ */ o(
+              I,
+              {
+                className: "flex-row items-center justify-end gap-1 border-t border-border p-2 min-h-11",
+                onClick: (a) => a.stopPropagation(),
+                children: c.footer.map((a, h) => /* @__PURE__ */ o(f.Fragment, { children: b(a, p) }, a.colId ?? a.field ?? h))
+              }
+            )
+          ]
+        },
+        S
+      );
+    }),
+    m > 1 && /* @__PURE__ */ o(M, { currentPage: l, totalPages: m, onPageChange: d })
+  ] });
+};
+export {
+  D as DataTableCards,
+  k as applyDeclaredSort,
+  j as splitColumns
+};

package/dist/components/feedback/Plan.js

@@ -50,7 +50,7 @@ const S = ({ status: a }) => {
               className: l("w-full flex items-center gap-3 p-4 text-left focus:outline-none", !e.description && "cursor-default"),
               children: [
                 /* @__PURE__ */ r("div", { className: "shrink-0 pt-0.5", children: /* @__PURE__ */ r(S, { status: e.status }) }),
-                /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: l("font-medium truncate", s && "text-muted-foreground line-through"), children: e.label }) }),
+                /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ r("p", { className: l("font-medium", s && "text-muted-foreground line-through"), children: e.label }) }),
                 e.description && /* @__PURE__ */ r(x, { className: l("w-4 h-4 text-muted-foreground transition-transform", m[e.id] && "rotate-180") })
               ]
             }

package/dist/components/forms/DatePicker.js

@@ -1,10 +1,10 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import s from "react";
+import m from "react";
 import b from "react-datepicker";
 import { cn as e } from "../../utils/cn.js";
 import { Icon as u } from "../ui/Icon.js";
 import "react-datepicker/dist/react-datepicker.css";
-const f = `
+const g = `
   .react-datepicker {
     font-family: inherit !important;
     background-color: rgb(var(--app-card-bg-color)) !important;
@@ -38,9 +38,9 @@ const f = `
   helperText: a,
   ...c
 }) => {
-  const m = s.useId(), i = c.id || m;
+  const s = m.useId(), i = c.id || s;
   return /* @__PURE__ */ d("div", { className: e("w-full flex flex-col", p), children: [
-    /* @__PURE__ */ r("style", { children: f }),
+    /* @__PURE__ */ r("style", { children: g }),
     o && /* @__PURE__ */ r("label", { htmlFor: i, className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
     /* @__PURE__ */ d("div", { className: "relative", children: [
       /* @__PURE__ */ r(
@@ -50,7 +50,21 @@ const f = `
           selected: l,
           onChange: n,
           className: e(
-            "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            // No text size on the control. react-datepicker forwards this
+            // className straight to its own <input>, so a `text-sm` here sits
+            // on a real focus target and out-ranks the floor in index.css
+            // exactly as one written inline would — 14.5px, and iOS Safari
+            // zooms in on focus and never zooms back out.
+            //
+            // It was copied from Input.tsx before Input had its own `text-sm`
+            // removed, so that fix never reached here. The `file:` rules came
+            // along in the same copy and mean nothing on a date field; they are
+            // dropped so a future search for `file:text-sm` finds only the one
+            // place it is deliberate.
+            //
+            // A source scan cannot catch this one — there is no <input> tag to
+            // find — which is why formFieldFloor.test.tsx also renders the atoms.
+            "flex h-10 w-full rounded-md border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             t ? "border-destructive" : "border-input"
           ),
           wrapperClassName: "w-full",

package/dist/components/showroom/ShowroomSidebar.js

@@ -77,7 +77,7 @@ const C = {
           placeholder: "Search components...",
           value: l,
           onChange: (e) => u(e.target.value),
-          className: "w-full rounded-md bg-muted/50 border border-border pl-7 pr-3 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/60 transition-shadow"
+          className: "w-full rounded-md bg-muted/50 border border-border pl-7 pr-3 py-1.5 placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/60 transition-shadow"
         }
       ),
       l && /* @__PURE__ */ o(

package/dist/components/theme/FineTuningControls.js

@@ -6,8 +6,8 @@ import { Button as v } from "../ui/Button.js";
 import { Icon as l } from "../ui/Icon.js";
 const S = ({
   headingFont: i,
-  setHeadingFont: t,
-  bodyFont: c,
+  setHeadingFont: c,
+  bodyFont: t,
   setBodyFont: s,
   borderRadius: d,
   setBorderRadius: u,
@@ -33,8 +33,8 @@ const S = ({
         "select",
         {
           value: i,
-          onChange: (n) => t(n.target.value),
-          className: "w-full border border-input bg-background rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none",
+          onChange: (n) => c(n.target.value),
+          className: "w-full border border-input bg-background rounded-md px-3 py-2 focus:ring-2 focus:ring-primary focus:outline-none",
           children: [
             /* @__PURE__ */ e("option", { value: "Inter", children: "Inter" }),
             /* @__PURE__ */ e("option", { value: "Orbitron", children: "Orbitron" }),
@@ -53,9 +53,9 @@ const S = ({
       /* @__PURE__ */ r(
         "select",
         {
-          value: c,
+          value: t,
           onChange: (n) => s(n.target.value),
-          className: "w-full border border-input bg-background rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none",
+          className: "w-full border border-input bg-background rounded-md px-3 py-2 focus:ring-2 focus:ring-primary focus:outline-none",
           children: [
             /* @__PURE__ */ e("option", { value: "Inter", children: "Inter" }),
             /* @__PURE__ */ e("option", { value: "Rajdhani", children: "Rajdhani" }),
@@ -73,7 +73,7 @@ const S = ({
         {
           value: d,
           onChange: (n) => u(n.target.value),
-          className: "w-full border border-input bg-background rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none",
+          className: "w-full border border-input bg-background rounded-md px-3 py-2 focus:ring-2 focus:ring-primary focus:outline-none",
           children: [
             /* @__PURE__ */ e("option", { value: "0rem", children: "0rem (Sharp)" }),
             /* @__PURE__ */ e("option", { value: "0.25rem", children: "0.25rem (Sm)" }),
@@ -92,7 +92,7 @@ const S = ({
         {
           value: m,
           onChange: (n) => p(n.target.value),
-          className: "w-full border border-input bg-background rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none",
+          className: "w-full border border-input bg-background rounded-md px-3 py-2 focus:ring-2 focus:ring-primary focus:outline-none",
           children: [
             /* @__PURE__ */ e("option", { value: "0.875rem", children: "0.875rem (Small)" }),
             /* @__PURE__ */ e("option", { value: "1rem", children: "1rem (Base)" }),