@sckyzo/cosmos-react 0.4.0 → 0.4.1

package/dist/index.d.cts

@@ -5522,6 +5522,13 @@ type ColumnDef<T> = {
     label: ReactNode;
     /** Optional fixed width (CSS value, e.g. `'20%'` or `'180px'`). */
     width?: string;
+    /**
+     * The narrowest the column is drawn when `width` is a percentage or unset (a length, `'180px'`,
+     * is kept as it is). Default `'8rem'`. The table is never narrower than what its columns need,
+     * so on a narrow screen it scrolls sideways instead of squeezing them. Columns without a width
+     * split what the others leave in equal parts: each gets at least the largest `minWidth` of them.
+     */
+    minWidth?: string;
     /** Text alignment override: `start` (the default), `end` or `center`. `end` is for numbers. */
     align?: 'start' | 'end' | 'center';
     /** Renders the cell for a row. */

package/dist/index.d.ts

@@ -5522,6 +5522,13 @@ type ColumnDef<T> = {
     label: ReactNode;
     /** Optional fixed width (CSS value, e.g. `'20%'` or `'180px'`). */
     width?: string;
+    /**
+     * The narrowest the column is drawn when `width` is a percentage or unset (a length, `'180px'`,
+     * is kept as it is). Default `'8rem'`. The table is never narrower than what its columns need,
+     * so on a narrow screen it scrolls sideways instead of squeezing them. Columns without a width
+     * split what the others leave in equal parts: each gets at least the largest `minWidth` of them.
+     */
+    minWidth?: string;
     /** Text alignment override: `start` (the default), `end` or `center`. `end` is for numbers. */
     align?: 'start' | 'end' | 'center';
     /** Renders the cell for a row. */

package/dist/index.js

@@ -3198,7 +3198,7 @@ var ProfileHeader = ({
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-60 sm:pt-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
-            /* @__PURE__ */ jsx(Heading2, { className: "text-xl font-bold break-words text-[var(--color-text-primary)]", children: /* @__PURE__ */ jsx("bdi", { children: name }) }),
+            /* @__PURE__ */ jsx(Heading2, { className: "min-w-0 text-xl font-bold break-words text-[var(--color-text-primary)]", children: /* @__PURE__ */ jsx("bdi", { children: name }) }),
             badges
           ] }),
           headline && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm break-words text-[var(--color-text-secondary)]", children: /* @__PURE__ */ jsx("bdi", { children: headline }) }),
@@ -3437,7 +3437,9 @@ var Button = ({
     type,
     disabled: disabled || loading,
     className: clsx(
-      "focus-visible:focus-indicator inline-flex items-center justify-center font-medium transition-colors",
+      // A label on one line in a button of fixed height: a row too narrow for it wraps or
+      // scrolls the buttons, not the text.
+      "focus-visible:focus-indicator inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors",
       VARIANT_CLASS[variant][intent],
       TEXT_CLASS[size],
       variant === "link" ? LINK_CLASS : [
@@ -3449,19 +3451,19 @@ var Button = ({
     ),
     ...rest,
     children: [
-      Icon2 && iconPosition === "start" && !loading && /* @__PURE__ */ jsx(Icon2, { className: ICON_SIZE[size] }),
+      Icon2 && iconPosition === "start" && !loading && /* @__PURE__ */ jsx(Icon2, { className: clsx("shrink-0", ICON_SIZE[size]) }),
       loading && /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": true,
           className: clsx(
-            "animate-spin rounded-full border-2 border-current border-t-transparent",
+            "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent",
             ICON_SIZE[size]
           )
         }
       ),
       children,
-      Icon2 && iconPosition === "end" && !loading && /* @__PURE__ */ jsx(Icon2, { className: ICON_SIZE[size] })
+      Icon2 && iconPosition === "end" && !loading && /* @__PURE__ */ jsx(Icon2, { className: clsx("shrink-0", ICON_SIZE[size]) })
     ]
   }
 );
@@ -4500,7 +4502,7 @@ var CheckName = ({ check, open, onToggle, outputId }) => check.output === void 0
   }
 );
 var Output = ({ check, open, outputId }) => check.output === void 0 ? null : /* @__PURE__ */ jsx("div", { id: outputId, hidden: !open, className: "min-w-0", children: open && /* @__PURE__ */ jsx(CodeBlock, { code: check.output }) });
-var Dash = () => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[var(--color-text-muted)] max-sm:hidden", children: "\u2014" });
+var Dash = () => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[var(--color-text-muted)] @max-[48rem]:hidden", children: "\u2014" });
 var CheckRow = ({ check, open, onToggle, outputId, now }) => /* @__PURE__ */ jsxs(
   "li",
   {
@@ -4509,15 +4511,15 @@ var CheckRow = ({ check, open, onToggle, outputId, now }) => /* @__PURE__ */ jsx
       (check.status === "WARN" || check.status === "CRIT") && "bg-gray-50/60 dark:bg-white/[0.02]"
     ),
     children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 sm:grid sm:grid-cols-[6.5rem_minmax(0,10rem)_minmax(0,12rem)_minmax(0,1fr)_5rem_6rem] sm:items-center sm:gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 @min-[48rem]:grid @min-[48rem]:grid-cols-[6.5rem_minmax(6rem,10rem)_minmax(0,12rem)_minmax(12rem,1fr)_5rem_7rem] @min-[48rem]:items-center @min-[48rem]:gap-3", children: [
         /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(StatusBadge, { status: check.status, label: STATUS_NAME[check.status] }) }),
         /* @__PURE__ */ jsx(CheckName, { check, open, onToggle, outputId }),
-        check.target ? /* @__PURE__ */ jsx("span", { className: "font-mono text-xs break-all text-[var(--color-text-secondary)] sm:truncate", children: /* @__PURE__ */ jsx("bdi", { children: check.target }) }) : /* @__PURE__ */ jsx(Dash, {}),
+        check.target ? /* @__PURE__ */ jsx("span", { className: "font-mono text-xs break-all text-[var(--color-text-secondary)] @min-[48rem]:truncate", children: /* @__PURE__ */ jsx("bdi", { children: check.target }) }) : /* @__PURE__ */ jsx(Dash, {}),
         check.message ? /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: /* @__PURE__ */ jsx("bdi", { children: check.message }) }) : /* @__PURE__ */ jsx(Dash, {}),
-        check.latency !== void 0 ? /* @__PURE__ */ jsx("span", { className: "tabular-nums sm:text-end", children: /* @__PURE__ */ jsx("bdi", { children: formatLatency(check.latency) }) }) : /* @__PURE__ */ jsx(Dash, {}),
-        check.checkedAt !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-secondary)] tabular-nums sm:text-end", children: /* @__PURE__ */ jsx(RelativeTime, { value: check.checkedAt, now }) }) : /* @__PURE__ */ jsx(Dash, {})
+        check.latency !== void 0 ? /* @__PURE__ */ jsx("span", { className: "tabular-nums @min-[48rem]:text-end", children: /* @__PURE__ */ jsx("bdi", { children: formatLatency(check.latency) }) }) : /* @__PURE__ */ jsx(Dash, {}),
+        check.checkedAt !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-[var(--color-text-secondary)] tabular-nums @min-[48rem]:text-end", children: /* @__PURE__ */ jsx(RelativeTime, { value: check.checkedAt, now }) }) : /* @__PURE__ */ jsx(Dash, {})
       ] }),
-      check.output !== void 0 && /* @__PURE__ */ jsx("div", { className: clsx(open && "mt-3 sm:ms-[7.25rem]"), children: /* @__PURE__ */ jsx(Output, { check, open, outputId }) })
+      check.output !== void 0 && /* @__PURE__ */ jsx("div", { className: clsx(open && "mt-3 @min-[48rem]:ms-[7.25rem]"), children: /* @__PURE__ */ jsx(Output, { check, open, outputId }) })
     ]
   }
 );
@@ -4645,7 +4647,9 @@ var HealthCheckList = ({
       role: ariaLabel ? "group" : void 0,
       "aria-label": ariaLabel,
       className: clsx(
-        variant === "list" && "overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-panel)]",
+        // The rows lay their columns out from the list's own width, not the screen's: in a card the
+        // list is narrower than the screen, and a grid of fixed columns left the message nothing.
+        variant === "list" && "@container overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-panel)]",
         variant === "grid" && "flex flex-col gap-4",
         className
       ),
@@ -5738,9 +5742,9 @@ function StackedListItem({
     /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 -top-px bottom-0", "aria-hidden": true }),
     /* @__PURE__ */ jsx("bdi", { children: title })
   ] }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm/6 font-semibold text-gray-900 dark:text-white", children: /* @__PURE__ */ jsx("bdi", { children: title }) });
-  const titleRow = badge ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-3", children: [
+  const titleRow = badge ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1", children: [
     titleEl,
-    badge
+    /* @__PURE__ */ jsx("span", { className: "flex-none", children: badge })
   ] }) : titleEl;
   return /* @__PURE__ */ jsxs(
     "li",
@@ -7806,7 +7810,9 @@ var AvatarGroup = ({
     "span",
     {
       className: clsx(
-        "relative inline-flex shrink-0 ring-2 ring-[var(--color-bg-panel)] has-focus-visible:z-10",
+        // The surface behind each avatar: a tinted fill lets the one before it, and its ring, show
+        // through otherwise.
+        "relative inline-flex shrink-0 bg-[var(--color-bg-panel)] ring-2 ring-[var(--color-bg-panel)] has-focus-visible:z-10",
         AVATAR_SHAPE_CLASS[shape],
         index > 0 && OVERLAP_CLASS[spacing][size],
         index < last && INITIALS_SHIFT_CLASS[spacing][size]
@@ -8784,7 +8790,8 @@ var STATE_CONFIG = {
   saving: { label: "Saving\u2026", loading: true },
   // The `success` intent carries the dark text on green (white on green-500 is about 2.3:1).
   saved: { label: "Saved", icon: Check, intent: "success" },
-  error: { label: "Error", intent: "danger" }
+  // What to do next, not the name of the state: the save failed, the click saves again.
+  error: { label: "Try again", intent: "danger" }
 };
 var StatefulSaveButton = ({
   state,
@@ -9134,7 +9141,9 @@ function NotificationsPanelTrigger({
       "aria-expanded": open,
       onClick: () => setOpen(!open),
       className: clsx(
-        "focus-visible:focus-indicator h-ctrl-40 w-ctrl-40 relative flex items-center justify-center rounded-lg border transition-colors",
+        // The ping around the count grows to twice its size: clipped to the bell, it never widens
+        // the row that holds it. The focus ring is a shadow, outside the clip.
+        "focus-visible:focus-indicator h-ctrl-40 w-ctrl-40 relative flex items-center justify-center overflow-hidden rounded-lg border transition-colors",
         muted ? "border-gray-200 text-gray-400 dark:border-gray-700 dark:text-gray-600" : "border-gray-200 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
         className
       ),
@@ -13719,21 +13728,30 @@ var DatePicker = (props) => {
         ]
       }
     ),
-    isRange ? /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center gap-2", !fullWidth && "w-fit"), children: [
-      renderTrigger(
-        fieldId,
-        "from",
-        selectedRange.from,
-        props.fromPlaceholder ?? "Start date"
-      ),
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "to" }),
-      renderTrigger(
-        void 0,
-        "to",
-        selectedRange.to,
-        props.toPlaceholder ?? "End date"
+    isRange ? (
+      // Two dates side by side don't fit a phone: the end date goes under the start date.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx("flex flex-wrap items-center gap-2", !fullWidth && "w-fit max-w-full"),
+          children: [
+            renderTrigger(
+              fieldId,
+              "from",
+              selectedRange.from,
+              props.fromPlaceholder ?? "Start date"
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "to" }),
+            renderTrigger(
+              void 0,
+              "to",
+              selectedRange.to,
+              props.toPlaceholder ?? "End date"
+            )
+          ]
+        }
       )
-    ] }) : renderTrigger(
+    ) : renderTrigger(
       fieldId,
       "from",
       selectedSingle,
@@ -13988,7 +14006,7 @@ var OtpInput = ({
     if (finalValue.length === length) onComplete?.(finalValue);
   };
   return /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center gap-2", className), role: "group", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx("div", { dir: "ltr", className: "flex items-center gap-2", children: Array.from({ length }).map((_, i) => {
+    /* @__PURE__ */ jsx("div", { dir: "ltr", className: "flex min-w-0 items-center gap-2", children: Array.from({ length }).map((_, i) => {
       const cellChar = value[i] ?? "";
       const display = mask && cellChar ? "\u2022" : cellChar;
       return /* @__PURE__ */ jsx(
@@ -14011,7 +14029,8 @@ var OtpInput = ({
           onPaste: handlePaste(i),
           onFocus: (e) => e.target.select(),
           className: clsx(
-            "h-ctrl-48 w-10 rounded-lg border bg-white text-center text-lg font-semibold text-gray-900 tabular-nums transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white",
+            // 2.5rem wide, narrower when the row doesn't fit (eight cells on a phone).
+            "h-ctrl-48 w-10 min-w-0 rounded-lg border bg-white text-center text-lg font-semibold text-gray-900 tabular-nums transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-800 dark:text-white",
             fieldStateClass({ invalid: error, success })
           )
         },
@@ -16053,7 +16072,8 @@ function Item4({
             "dd",
             {
               className: clsx(
-                "text-sm font-medium text-[var(--color-text-primary)]",
+                // A value with no space in it (an e-mail) breaks inside the row.
+                "min-w-0 text-sm font-medium break-words text-[var(--color-text-primary)]",
                 mono && "font-mono text-xs"
               ),
               children: isolate(children)
@@ -16075,7 +16095,7 @@ function Item4({
           "dd",
           {
             className: clsx(
-              "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300",
+              "mt-1 min-w-0 text-sm/6 break-words text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300",
               mono && "font-mono"
             ),
             children: isolate(children)
@@ -16172,7 +16192,7 @@ var KpiCard = ({
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: /* @__PURE__ */ jsx("bdi", { children: label }) }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 text-xs font-medium tracking-wider break-words hyphens-auto text-gray-500 uppercase dark:text-gray-400", children: /* @__PURE__ */ jsx("bdi", { children: label }) }),
       Icon2 && /* @__PURE__ */ jsx(
         "span",
         {
@@ -16195,7 +16215,9 @@ var KpiCard = ({
           "span",
           {
             className: clsx(
-              "block text-3xl font-bold tracking-tight tabular-nums",
+              // A figure with no break in it (`€12,418,906.40`) wraps in a narrow card instead of
+              // running out of it: cut, it would read as another number.
+              "block text-3xl font-bold tracking-tight break-words tabular-nums",
               intent === "neutral" ? "text-gray-900 dark:text-white" : INTENT_STYLE[intent].text
             ),
             children: withExact ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -16680,7 +16702,8 @@ var MiniCalendar = ({
                 "aria-current": isToday ? "date" : void 0,
                 className: clsx(
                   // The number sits above the middle of the cell (`pb-1.5`) to leave room for the event dot under it.
-                  "h-ctrl-36 relative flex items-center justify-center rounded-md border pb-1.5 text-xs font-medium transition-colors focus-visible:ring-inset",
+                  // At least 28px wide: a calendar as wide as its content had columns as narrow as the numbers.
+                  "h-ctrl-36 min-w-ctrl-28 relative flex items-center justify-center rounded-md border pb-1.5 text-xs font-medium transition-colors focus-visible:ring-inset",
                   isSelected ? "bg-brand-500 hover:bg-brand-600 focus-visible:focus-indicator-on-accent border-transparent text-white" : isToday ? "border-brand-500 text-brand-600 hover:bg-brand-50 focus-visible:focus-indicator dark:text-brand-400 dark:hover:bg-white/5" : "focus-visible:focus-indicator border-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                 ),
                 children: [
@@ -18489,12 +18512,13 @@ var DataTableBulkActions = ({
       icon: item.icon,
       disabled: item.disabled,
       onClick: () => item.onClick(selectedRows),
+      className: "shrink-0",
       children: item.label
     },
     item.key
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center gap-2", phoneIcons && "max-sm:hidden"), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-wrap items-center gap-2", phoneIcons && "max-sm:hidden"), children: [
       button(first, true),
       rest.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-2 @min-[1152px]:flex", children: rest.map((item) => button(item, false)) }),
@@ -18894,6 +18918,43 @@ var PageSizeSelect = ({ value, options, onChange }) => {
   ] });
 };
 
+// src/table/columnWidths.ts
+var DEFAULT_COLUMN_MIN_WIDTH = "8rem";
+var NUMBER = String.raw`(?:\d+(?:\.\d+)?|\.\d+)`;
+var LENGTH = new RegExp(`^${NUMBER}(?:px|rem|em|ch)$`);
+var PERCENT2 = new RegExp(`^(${NUMBER})%$`);
+var ratio = (n) => Number(n.toFixed(4));
+var tableMinWidth = (columns, fixed, takesTheRest) => {
+  if (columns.length === 0) return void 0;
+  const lengths = [...fixed];
+  const autoMins = [];
+  const percents = [];
+  columns.forEach((c, i) => {
+    const width = c.width?.trim() ?? "";
+    const min = c.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
+    const share = PERCENT2.exec(width);
+    if (i === takesTheRest) autoMins.push(LENGTH.test(width) ? width : min);
+    else if (LENGTH.test(width)) lengths.push(width);
+    else if (share) percents.push({ share: Number(share[1]) / 100, min });
+    else autoMins.push(min);
+  });
+  const bounds = percents.map((p) => `calc(${p.min} / ${ratio(p.share)})`);
+  const left = ratio(1 - percents.reduce((sum, p) => sum + p.share, 0));
+  const widest = [...new Set(autoMins)];
+  const parts = [
+    ...lengths,
+    ...autoMins.length > 0 ? [`${autoMins.length} * ${widest.length === 1 ? widest[0] : `max(${widest.join(", ")})`}`] : []
+  ];
+  if (parts.length > 0 && left > 0) {
+    bounds.push(
+      left === 1 ? `calc(${parts.join(" + ")})` : `calc((${parts.join(" + ")}) / ${left})`
+    );
+  }
+  const distinct = [...new Set(bounds)];
+  if (distinct.length === 0) return void 0;
+  return distinct.length === 1 ? distinct[0] : `max(${distinct.join(", ")})`;
+};
+
 // src/table/pipeline.ts
 var filtersToRecord = (filters) => {
   const out = {};
@@ -19783,12 +19844,15 @@ var DataTable = ({
     [filteredRows, columns, manual, sortKey, sortDir]
   );
   const firstColumnTakesTheRest = (selectable || actionColumn) && columns.length > 0 && columns.every((c) => c.width);
-  const statedMinWidth = firstColumnTakesTheRest ? `calc(${[
-    expandable && EXPAND_COLUMN_WIDTH,
-    selectable && SELECT_COLUMN_WIDTH,
-    ...columns.map((c) => c.width),
-    actionColumn && (rowEditing ? EDIT_ACTION_COLUMN_WIDTH : ACTION_COLUMN_WIDTH)
-  ].filter(Boolean).join(" + ")})` : void 0;
+  const tableMinimum = tableMinWidth(
+    columns,
+    [
+      expandable && EXPAND_COLUMN_WIDTH,
+      selectable && SELECT_COLUMN_WIDTH,
+      actionColumn && (rowEditing ? EDIT_ACTION_COLUMN_WIDTH : ACTION_COLUMN_WIDTH)
+    ].filter((w) => Boolean(w)),
+    firstColumnTakesTheRest ? 0 : void 0
+  );
   const mobileSortable = columns.some((c) => c.sortable);
   const hasRows = sortedRows.length > 0;
   const showSkeleton = loading && !hasRows;
@@ -20253,7 +20317,11 @@ var DataTable = ({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: clsx("flex min-w-0 items-center gap-3", mobileCards && "max-sm:flex-1"),
+              className: clsx(
+                // The actions go to the next line when the count leaves them too little room.
+                "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2",
+                mobileCards && "max-sm:flex-1"
+              ),
               children: [
                 /* @__PURE__ */ jsx("span", { className: "text-brand-700 dark:text-brand-300 text-sm font-medium whitespace-nowrap", children: /* @__PURE__ */ jsxs("bdi", { children: [
                   selection.size,
@@ -20268,7 +20336,7 @@ var DataTable = ({
                     children: "Clear"
                   }
                 ),
-                (bulkActionItems || bulkActions) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 ps-1", children: [
+                (bulkActionItems || bulkActions) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-auto flex-wrap items-center gap-2 ps-1", children: [
                   bulkActionItems && /* @__PURE__ */ jsx(
                     DataTableBulkActions,
                     {
@@ -20405,7 +20473,7 @@ var DataTable = ({
                         "aria-labelledby": ariaLabelledBy,
                         "aria-busy": loading || void 0,
                         "aria-rowcount": windowed ? pageRows.length + 1 : void 0,
-                        style: statedMinWidth ? { minWidth: statedMinWidth } : void 0,
+                        style: tableMinimum ? { minWidth: tableMinimum } : void 0,
                         className: "w-full table-fixed",
                         children: [
                           /* @__PURE__ */ jsxs("colgroup", { children: [
@@ -21356,7 +21424,7 @@ var SocialAuthButtons = ({
         onClick: () => onProviderClick(provider),
         disabled: isDisabled,
         "aria-label": label,
-        className: "focus-visible:focus-indicator h-ctrl-40 flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+        className: "focus-visible:focus-indicator h-ctrl-40 flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 [&>svg]:shrink-0",
         children: [
           isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Icon2, {}),
           /* @__PURE__ */ jsx("span", { className: "truncate", children: label })