@dmsi/wedgekit-react 0.0.105 → 0.0.107

package/dist/components/LoadingScrim.js

@@ -0,0 +1,27 @@
+import {
+  Spinner
+} from "../chunk-4F6VQXKY.js";
+import "../chunk-ORMEWXMH.js";
+
+// src/components/LoadingScrim.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+function LoadingScrim({ className }) {
+  return /* @__PURE__ */ jsx(
+    "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,
+      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "large" }) })
+    }
+  );
+}
+LoadingScrim.displayName = "LoadingScrim";
+export {
+  LoadingScrim
+};

package/dist/components/MobileDataGrid.cjs

@@ -474,11 +474,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
@@ -516,7 +519,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/MobileDataGrid.js

@@ -12,7 +12,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/Modal.cjs

@@ -327,11 +327,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.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
@@ -369,7 +372,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_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Modal.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Modal
-} from "../chunk-D2YP2BTN.js";
+} from "../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-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/ModalButtons.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/ModalButtons.js

@@ -1,7 +1,7 @@
 import {
   ModalButtons
-} from "../chunk-CG2NIXZE.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-6CS5ZBXO.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/ModalHeader.cjs

@@ -324,11 +324,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.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
@@ -366,7 +369,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_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/ModalHeader.js

@@ -1,8 +1,8 @@
 import {
   ModalHeader
-} from "../chunk-6UI5GABI.js";
+} from "../chunk-3JRVV6QY.js";
 import "../chunk-J6LETUNM.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/NavigationTab.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/NavigationTab.js

@@ -1,7 +1,7 @@
 import {
   NavigationTab
-} from "../chunk-P242H6OU.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-IMN6I5NV.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/NavigationTabs.cjs

@@ -280,11 +280,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
@@ -322,7 +325,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/NavigationTabs.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   NavigationTab
-} from "../chunk-P242H6OU.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-IMN6I5NV.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import {
   componentGap

package/dist/components/Notification.cjs

@@ -277,11 +277,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
@@ -319,7 +322,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/Notification.js

@@ -10,7 +10,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/OptionPill.cjs

@@ -273,11 +273,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
@@ -315,7 +318,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/OptionPill.js

@@ -1,8 +1,8 @@
 import {
   OptionPill
-} from "../chunk-QNQ5K7NW.js";
+} from "../chunk-3NWBR3V3.js";
 import "../chunk-S5K22XTH.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/PDFViewer.cjs

@@ -331,11 +331,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.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
@@ -373,7 +376,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_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/PDFViewer.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Modal
-} from "../chunk-D2YP2BTN.js";
+} from "../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 {
@@ -18,7 +18,7 @@ import {
 } from "../chunk-EO3JJWFW.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/PaymentOnAccountModal.cjs

@@ -329,11 +329,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.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
@@ -371,7 +374,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_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
@@ -1948,7 +1950,13 @@ function SelectPaymentMethod(props) {
       {
         isOpen: selectedMethod === "CCPayment",
         title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Radio,
+          {
+            checked: selectedMethod === "CCPayment",
+            onClick: (e) => e.preventDefault()
+          }
+        ),
         onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
         children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
@@ -1992,8 +2000,7 @@ function ACHSelector(props) {
       before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
-          readOnly: true
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
         }
       ),
       onClick: () => setIsOpen((prev) => !prev),

package/dist/components/PaymentOnAccountModal.js

@@ -1,14 +1,14 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} 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";
@@ -23,7 +23,7 @@ import "../chunk-QDFQ3B4N.js";
 import "../chunk-EO3JJWFW.js";
 import "../chunk-JOMM4KBH.js";
 import "../chunk-VG4EPHJA.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -610,11 +610,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx7.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
@@ -652,7 +655,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_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
@@ -1016,7 +1018,13 @@ function SelectPaymentMethod(props) {
       {
         isOpen: selectedMethod === "CCPayment",
         title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Radio,
+          {
+            checked: selectedMethod === "CCPayment",
+            onClick: (e) => e.preventDefault()
+          }
+        ),
         onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
@@ -1060,8 +1068,7 @@ function ACHSelector(props) {
       before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
-          readOnly: true
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
         }
       ),
       onClick: () => setIsOpen((prev) => !prev),

package/dist/components/SelectPaymentMethod.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-VPEVXTBJ.js";
+} from "../chunk-KYMBBPEW.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
@@ -11,7 +11,7 @@ import "../chunk-QDFQ3B4N.js";
 import "../chunk-EO3JJWFW.js";
 import "../chunk-JOMM4KBH.js";
 import "../chunk-VG4EPHJA.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";