@dmsi/wedgekit-react 0.0.105 → 0.0.107

package/dist/components/Spinner.cjs

@@ -0,0 +1,136 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Spinner.tsx
+var Spinner_exports = {};
+__export(Spinner_exports, {
+  Spinner: () => Spinner
+});
+module.exports = __toCommonJS(Spinner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = ({ size = "small" }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: size === "large" ? "animate-spin" : "",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spinner
+});

package/dist/components/Spinner.js

@@ -0,0 +1,7 @@
+import {
+  Spinner
+} from "../chunk-4F6VQXKY.js";
+import "../chunk-ORMEWXMH.js";
+export {
+  Spinner
+};

package/dist/components/Stepper.cjs

@@ -275,11 +275,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -317,7 +320,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Stepper.js

@@ -6,7 +6,7 @@ import "../chunk-5UH6QUFB.js";
 import "../chunk-S5K22XTH.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Toast.cjs

@@ -410,11 +410,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx5.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -452,7 +455,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Toast.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Upload.cjs

@@ -355,11 +355,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx4.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -397,7 +400,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Upload.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/index.cjs

@@ -1782,9 +1782,10 @@ var DataGridCell = (0, import_react10.memo)(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-action-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       "overflow-x-hidden",
+      "overflow-y-hidden",
       component === "input" && "border",
       component === "input" && !error && !warning && "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
@@ -1802,7 +1803,6 @@ var DataGridCell = (0, import_react10.memo)(
         className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
-        "data-theme": type === "header" ? "brand" : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
@@ -2875,13 +2875,14 @@ function DataGrid({
                                   ),
                                   useMenuDefaultMinWidth,
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                    typeof cellValue !== "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
                                     getSortIcon(header.column.getIsSorted()),
                                     !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
                                       header.column.getNextSortingOrder(),
                                       true
                                     ),
                                     header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    typeof cellValue === "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
                                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                       "div",
                                       {
@@ -3430,11 +3431,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx17.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -3472,7 +3476,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
@@ -4468,7 +4471,13 @@ function SelectPaymentMethod(props) {
       {
         isOpen: selectedMethod === "CCPayment",
         title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          Radio,
+          {
+            checked: selectedMethod === "CCPayment",
+            onClick: (e) => e.preventDefault()
+          }
+        ),
         onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
@@ -4512,8 +4521,7 @@ function ACHSelector(props) {
       before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
-          readOnly: true
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
         }
       ),
       onClick: () => setIsOpen((prev) => !prev),

package/dist/components/index.js

@@ -6,14 +6,14 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-WVLT6XM7.js";
-import "../chunk-VPEVXTBJ.js";
+} from "../chunk-OX3HKFIH.js";
+import "../chunk-KYMBBPEW.js";
 import "../chunk-TTO4PL7Y.js";
-import "../chunk-D2YP2BTN.js";
+import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-CG2NIXZE.js";
+import "../chunk-6CS5ZBXO.js";
 import "../chunk-FWPJ73IK.js";
-import "../chunk-6UI5GABI.js";
+import "../chunk-3JRVV6QY.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
 import "../chunk-3ZUSYRI7.js";
@@ -25,7 +25,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-E5VEDZYV.js";
+} from "../chunk-ZEGVZ5NW.js";
 import {
   Menu
 } from "../chunk-37TJJQL3.js";
@@ -63,7 +63,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -853,13 +853,14 @@ function DataGrid({
                                   ),
                                   useMenuDefaultMinWidth,
                                   children: [
-                                    /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
+                                    typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
                                     getSortIcon(header.column.getIsSorted()),
                                     !header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
                                       header.column.getNextSortingOrder(),
                                       true
                                     ),
                                     header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
+                                    typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
                                     /* @__PURE__ */ jsx8(
                                       "div",
                                       {

package/dist/index.css

@@ -1602,6 +1602,12 @@
   .bg-neutral-600 {
     background-color: var(--color-neutral-600);
   }
+  .bg-neutral-600\/30 {
+    background-color: color-mix(in srgb, #000000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-neutral-600) 30%, transparent);
+    }
+  }
   .bg-neutral-600\/50 {
     background-color: color-mix(in srgb, #000000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2866,6 +2872,13 @@
       }
     }
   }
+  .hover\:bg-background-on-action-secondary-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-on-action-secondary-hover);
+      }
+    }
+  }
   .hover\:bg-background-secondary-normal\/30 {
     &:hover {
       @media (hover: hover) {
@@ -2904,6 +2917,13 @@
       }
     }
   }
+  .hover\:text-brand-text-action-primary-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand-text-action-primary-hover);
+      }
+    }
+  }
   .hover\:text-icon-action-critical-secondary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3031,6 +3051,16 @@
       background-color: var(--color-background-action-secondary-hover);
     }
   }
+  .focus\:bg-background-on-action-secondary-hover {
+    &:focus {
+      background-color: var(--color-background-on-action-secondary-hover);
+    }
+  }
+  .focus\:text-brand-text-action-primary-hover {
+    &:focus {
+      color: var(--color-brand-text-action-primary-hover);
+    }
+  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3171,6 +3201,11 @@
       background-color: var(--color-background-action-secondary-active);
     }
   }
+  .active\:bg-background-on-action-secondary-active {
+    &:active {
+      background-color: var(--color-background-on-action-secondary-active);
+    }
+  }
   .active\:\!text-brand-text-on-action-primary-active {
     &:active {
       color: var(--color-brand-text-on-action-primary-active) !important;
@@ -3186,6 +3221,11 @@
       color: var(--color-action-300);
     }
   }
+  .active\:text-brand-text-action-primary-active {
+    &:active {
+      color: var(--color-brand-text-action-primary-active);
+    }
+  }
   .active\:text-icon-action-critical-secondary-active {
     &:active {
       color: var(--color-icon-action-critical-secondary-active);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.105",
+  "version": "0.0.107",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Button.tsx

@@ -146,11 +146,14 @@ export const Button = ({
     clsx(
       colorClassName?.trim()
         ? colorClassName
-        : "text-text-action-primary-normal",
+        : "text-text-on-action-primary-normal",
       "bg-transparent",
-      "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-      "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-      "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+      "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+      // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+      "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+      // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+      "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+      // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
       "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
       "flex-col",
       paddingUsingComponentGap,
@@ -195,7 +198,6 @@ export const Button = ({
       onClick={props.onClick}
       disabled={disabled}
       href={href}
-      data-theme={variant === "navigation" ? "brand" : undefined}
     >
       {leftIcon && leftIcon}
 

package/src/components/DataGrid/index.tsx

@@ -393,9 +393,11 @@ export function DataGrid<T extends Record<string, unknown>>({
                             )}
                             useMenuDefaultMinWidth={useMenuDefaultMinWidth}
                           >
-                            <Subheader tall>
-                              {header.column.columnDef.header}
-                            </Subheader>
+                            {typeof cellValue !== "number" && (
+                              <Subheader tall>
+                                {header.column.columnDef.header}
+                              </Subheader>
+                            )}
 
                             {getSortIcon(header.column.getIsSorted())}
 
@@ -412,7 +414,11 @@ export function DataGrid<T extends Record<string, unknown>>({
                                   {header.column.getSortIndex() + 1}
                                 </Subheader>
                               )}
-
+                            {typeof cellValue === "number" && (
+                              <Subheader tall>
+                                {header.column.columnDef.header}
+                              </Subheader>
+                            )}
                             <div
                               onDoubleClick={(e) => {
                                 e.stopPropagation();

package/src/components/DataGridCell.tsx

@@ -146,9 +146,10 @@ export const DataGridCell = memo(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-action-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       "overflow-x-hidden",
+      "overflow-y-hidden",
       component === "input" && "border",
       component === "input" &&
         !error &&
@@ -169,7 +170,6 @@ export const DataGridCell = memo(
         className={clsx("flex h-10", !width && "flex-1")}
         style={{ width }}
         {...props}
-        data-theme={type === "header" ? "brand" : undefined}
       >
         <div
           className={cellClasses}

package/src/components/LoadingScrim.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import clsx from "clsx";
+
+import { Spinner } from "./Spinner";
+/**
+ * LoadingScrim
+ *
+ * Displays a full-screen backdrop with a centered loading spinner.
+ * Disables interaction with underlying UI.
+ *
+ * @example
+ * <LoadingScrim />
+ */
+export function LoadingScrim({ className }: { className?: string }) {
+  return (
+    <div
+      className={clsx(
+        "fixed inset-0 z-50 flex items-center justify-center bg-neutral-600/30",
+        className,
+      )}
+      aria-modal="true"
+      role="dialog"
+      tabIndex={-1}
+    >
+      <div className="flex items-center justify-center">
+        <Spinner size="large" />
+      </div>
+    </div>
+  );
+}
+
+LoadingScrim.displayName = "LoadingScrim";

package/src/components/SelectPaymentMethod.tsx

@@ -83,7 +83,12 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
         <Accordion
           isOpen={selectedMethod === "CCPayment"}
           title="Pay by Credit/Debit Card"
-          before={<Radio checked={selectedMethod === "CCPayment"} readOnly />}
+          before={
+            <Radio
+              checked={selectedMethod === "CCPayment"}
+              onClick={(e) => e.preventDefault()}
+            />
+          }
           onClick={() =>
             handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment")
           }
@@ -153,7 +158,6 @@ function ACHSelector(props: ACHSelectorProps) {
       before={
         <Radio
           checked={!!selectedBankGuid && selectedMethod === "ACHPayment"}
-          readOnly
         />
       }
       onClick={() => setIsOpen((prev) => !prev)}