@dmsi/wedgekit-react 0.0.120 → 0.0.121

package/dist/{chunk-OX3HKFIH.js → chunk-22CQ3BSY.js}

@@ -1,6 +1,6 @@
 import {
   SelectPaymentMethod
-} from "./chunk-KYMBBPEW.js";
+} from "./chunk-FWRT5E5M.js";
 import {
   Modal
 } from "./chunk-QIHDPSOM.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk-EO3JJWFW.js";
 import {
   Card
-} from "./chunk-JOMM4KBH.js";
+} from "./chunk-4OS6APPF.js";
 import {
   Paragraph
 } from "./chunk-VG4EPHJA.js";

package/dist/{chunk-JOMM4KBH.js → chunk-4OS6APPF.js}

@@ -8,12 +8,13 @@ import {
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: clsx(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children

package/dist/{chunk-KYMBBPEW.js → chunk-FWRT5E5M.js}

@@ -15,27 +15,20 @@ import {
 } from "./chunk-O4M2GISS.js";
 import {
   Accordion
-} from "./chunk-QDFQ3B4N.js";
+} from "./chunk-XEUPUTYP.js";
 import {
   Stack
 } from "./chunk-EO3JJWFW.js";
 import {
   Card
-} from "./chunk-JOMM4KBH.js";
-import {
-  Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-4OS6APPF.js";
 import {
   Button
 } from "./chunk-L364HTYC.js";
-import {
-  Icon
-} from "./chunk-IGQVA7SC.js";
 
 // src/components/SelectPaymentMethod.tsx
-import { useEffect, useState } from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SelectPaymentMethod(props) {
   const {
     selectedMethod,
@@ -80,10 +73,10 @@ function SelectPaymentMethod(props) {
       Accordion,
       {
         isOpen: selectedMethod === "CCPayment",
-        title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ jsx(
+        title: /* @__PURE__ */ jsx(
           Radio,
           {
+            label: "Pay by Credit/Debit Card",
             checked: selectedMethod === "CCPayment",
             onClick: (e) => e.preventDefault()
           }
@@ -91,82 +84,38 @@ function SelectPaymentMethod(props) {
         onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
         children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
-    )
+    ),
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
-  var _a;
   const {
     selectedMethod,
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading
+    customerBanks
   } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  useEffect(() => {
-    if (selectedMethod === "CCPayment") return setIsOpen(false);
-  }, [selectedMethod]);
-  useEffect(() => {
-    if (isOpen) {
-      if (!selectedBankGuid) {
-        setSelectedBankGuid(customerBanks[0].CustBankGUID);
-      }
-      handleToggle("ACHPayment");
-      return;
-    }
-  }, [isOpen]);
   function handleBankSelect(e, bankGuid) {
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ jsx(
-    Accordion,
+  return /* @__PURE__ */ jsx(Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ jsx(
+    Card,
     {
-      isOpen,
-      title: selectedBankGuid ? (_a = customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)) == null ? void 0 : _a.AccountDisplayString : "Select a Bank",
-      before: /* @__PURE__ */ jsx(
+      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
+      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      children: /* @__PURE__ */ jsx(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
+          label: `Pay by ${bank.AccountDisplayString}`,
+          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
         }
-      ),
-      onClick: () => setIsOpen((prev) => !prev),
-      children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
-        /* @__PURE__ */ jsx(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 200,
-            children: customerBanks.map((bank) => /* @__PURE__ */ jsx(
-              Card,
-              {
-                className: clsx(
-                  "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
-                  selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
-                ),
-                onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-                children: /* @__PURE__ */ jsxs(Stack, { horizontal: true, items: "center", justify: "between", children: [
-                  /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-                    /* @__PURE__ */ jsx(Icon, { name: "question_mark" }),
-                    /* @__PURE__ */ jsx(Paragraph, { children: bank.AccountDisplayString })
-                  ] }),
-                  selectedBankGuid === bank.CustBankGUID && /* @__PURE__ */ jsx(Icon, { name: "check" })
-                ] })
-              },
-              bank.CustBankGUID
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
-      ] })
-    }
-  );
+      )
+    },
+    bank.CustBankGUID
+  )) });
 }
 function CreditsSelector(props) {
   const { selectedCredits, allCredits, setSelectedCredits } = props;
@@ -201,24 +150,21 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx(
                     Stack,
                     {
-                      horizontal: true,
-                      items: "center",
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Checkbox,
-                          {
-                            checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                            onChange: () => handleCreditSelect(credits)
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Paragraph, { children: credits.InvoiceNumber })
-                      ]
+                      flexGrow: 1,
+                      children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          label: credits.InvoiceNumber,
+                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
+                          onChange: () => handleCreditSelect(credits)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsxs(Subheader, { className: " pr-desktop-component-padding", children: [

package/dist/{chunk-QDFQ3B4N.js → chunk-XEUPUTYP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-EO3JJWFW.js";
 import {
   Card
-} from "./chunk-JOMM4KBH.js";
+} from "./chunk-4OS6APPF.js";
 import {
   Paragraph
 } from "./chunk-VG4EPHJA.js";
@@ -44,9 +44,9 @@ function Accordion(props) {
     {
       className: clsx(
         "overflow-hidden select-none cursor-pointer",
-        className,
-        isOpen && "border-2 !border-border-primary-focus"
+        className
       ),
+      selected: isOpen,
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsxs(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [

package/dist/components/Accordion.cjs

@@ -195,12 +195,13 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx2.default)(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children
@@ -486,9 +487,9 @@ function Accordion(props) {
     {
       className: (0, import_clsx6.default)(
         "overflow-hidden select-none cursor-pointer",
-        className,
-        isOpen && "border-2 !border-border-primary-focus"
+        className
       ),
+      selected: isOpen,
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [

package/dist/components/Accordion.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Accordion
-} from "../chunk-QDFQ3B4N.js";
+} from "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
-import "../chunk-JOMM4KBH.js";
+import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";

package/dist/components/Card.cjs

@@ -65,12 +65,13 @@ module.exports = __toCommonJS(Card_exports);
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx.default)(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children

package/dist/components/Card.js

@@ -1,6 +1,6 @@
 import {
   Card
-} from "../chunk-JOMM4KBH.js";
+} from "../chunk-4OS6APPF.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Card

package/dist/components/PaymentOnAccountModal.cjs

@@ -1522,12 +1522,13 @@ Percentage.displayName = "Percentage";
 var import_clsx14 = __toESM(require("clsx"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx14.default)(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children
@@ -1571,9 +1572,9 @@ function Accordion(props) {
     {
       className: (0, import_clsx15.default)(
         "overflow-hidden select-none cursor-pointer",
-        className,
-        isOpen && "border-2 !border-border-primary-focus"
+        className
       ),
+      selected: isOpen,
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
@@ -1729,9 +1730,6 @@ var RadioIcon = ({ className }) => {
 };
 RadioIcon.displayName = "RadioIcon";
 
-// src/components/SelectPaymentMethod.tsx
-var import_clsx20 = __toESM(require("clsx"), 1);
-
 // src/components/Checkbox.tsx
 var import_clsx17 = __toESM(require("clsx"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1949,10 +1947,10 @@ function SelectPaymentMethod(props) {
       Accordion,
       {
         isOpen: selectedMethod === "CCPayment",
-        title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Radio,
           {
+            label: "Pay by Credit/Debit Card",
             checked: selectedMethod === "CCPayment",
             onClick: (e) => e.preventDefault()
           }
@@ -1960,82 +1958,38 @@ function SelectPaymentMethod(props) {
         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" })
       }
-    )
+    ),
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
-  var _a;
   const {
     selectedMethod,
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading
+    customerBanks
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
-    if (selectedMethod === "CCPayment") return setIsOpen(false);
-  }, [selectedMethod]);
-  (0, import_react7.useEffect)(() => {
-    if (isOpen) {
-      if (!selectedBankGuid) {
-        setSelectedBankGuid(customerBanks[0].CustBankGUID);
-      }
-      handleToggle("ACHPayment");
-      return;
-    }
-  }, [isOpen]);
   function handleBankSelect(e, bankGuid) {
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Accordion,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Card,
     {
-      isOpen,
-      title: selectedBankGuid ? (_a = customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)) == null ? void 0 : _a.AccountDisplayString : "Select a Bank",
-      before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
+      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
+          label: `Pay by ${bank.AccountDisplayString}`,
+          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
         }
-      ),
-      onClick: () => setIsOpen((prev) => !prev),
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 200,
-            children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              Card,
-              {
-                className: (0, import_clsx20.default)(
-                  "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
-                  selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
-                ),
-                onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { horizontal: true, items: "center", justify: "between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "question_mark" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Paragraph, { children: bank.AccountDisplayString })
-                  ] }),
-                  selectedBankGuid === bank.CustBankGUID && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" })
-                ] })
-              },
-              bank.CustBankGUID
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
-      ] })
-    }
-  );
+      )
+    },
+    bank.CustBankGUID
+  )) });
 }
 function CreditsSelector(props) {
   const { selectedCredits, allCredits, setSelectedCredits } = props;
@@ -2070,24 +2024,21 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     Stack,
                     {
-                      horizontal: true,
-                      items: "center",
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                          Checkbox,
-                          {
-                            checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                            onChange: () => handleCreditSelect(credits)
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Paragraph, { children: credits.InvoiceNumber })
-                      ]
+                      flexGrow: 1,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        Checkbox,
+                        {
+                          label: credits.InvoiceNumber,
+                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
+                          onChange: () => handleCreditSelect(credits)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [

package/dist/components/PaymentOnAccountModal.js

@@ -1,8 +1,8 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} from "../chunk-OX3HKFIH.js";
-import "../chunk-KYMBBPEW.js";
+} from "../chunk-22CQ3BSY.js";
+import "../chunk-FWRT5E5M.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
@@ -19,9 +19,9 @@ import "../chunk-R5TLUWDD.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-S5K22XTH.js";
 import "../chunk-O4M2GISS.js";
-import "../chunk-QDFQ3B4N.js";
+import "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
-import "../chunk-JOMM4KBH.js";
+import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";
 import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -198,12 +198,13 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx2.default)(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children
@@ -489,9 +490,9 @@ function Accordion(props) {
     {
       className: (0, import_clsx6.default)(
         "overflow-hidden select-none cursor-pointer",
-        className,
-        isOpen && "border-2 !border-border-primary-focus"
+        className
       ),
+      selected: isOpen,
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
@@ -785,9 +786,6 @@ var RadioIcon = ({ className }) => {
 };
 RadioIcon.displayName = "RadioIcon";
 
-// src/components/SelectPaymentMethod.tsx
-var import_clsx12 = __toESM(require("clsx"), 1);
-
 // src/components/Checkbox.tsx
 var import_clsx9 = __toESM(require("clsx"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -1017,10 +1015,10 @@ function SelectPaymentMethod(props) {
       Accordion,
       {
         isOpen: selectedMethod === "CCPayment",
-        title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Radio,
           {
+            label: "Pay by Credit/Debit Card",
             checked: selectedMethod === "CCPayment",
             onClick: (e) => e.preventDefault()
           }
@@ -1028,82 +1026,38 @@ function SelectPaymentMethod(props) {
         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" })
       }
-    )
+    ),
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
-  var _a;
   const {
     selectedMethod,
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading
+    customerBanks
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    if (selectedMethod === "CCPayment") return setIsOpen(false);
-  }, [selectedMethod]);
-  (0, import_react.useEffect)(() => {
-    if (isOpen) {
-      if (!selectedBankGuid) {
-        setSelectedBankGuid(customerBanks[0].CustBankGUID);
-      }
-      handleToggle("ACHPayment");
-      return;
-    }
-  }, [isOpen]);
   function handleBankSelect(e, bankGuid) {
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Accordion,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Card,
     {
-      isOpen,
-      title: selectedBankGuid ? (_a = customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)) == null ? void 0 : _a.AccountDisplayString : "Select a Bank",
-      before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
+      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
+          label: `Pay by ${bank.AccountDisplayString}`,
+          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
         }
-      ),
-      onClick: () => setIsOpen((prev) => !prev),
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 200,
-            children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Card,
-              {
-                className: (0, import_clsx12.default)(
-                  "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
-                  selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
-                ),
-                onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { horizontal: true, items: "center", justify: "between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "question_mark" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Paragraph, { children: bank.AccountDisplayString })
-                  ] }),
-                  selectedBankGuid === bank.CustBankGUID && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "check" })
-                ] })
-              },
-              bank.CustBankGUID
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
-      ] })
-    }
-  );
+      )
+    },
+    bank.CustBankGUID
+  )) });
 }
 function CreditsSelector(props) {
   const { selectedCredits, allCredits, setSelectedCredits } = props;
@@ -1138,24 +1092,21 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     Stack,
                     {
-                      horizontal: true,
-                      items: "center",
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                          Checkbox,
-                          {
-                            checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                            onChange: () => handleCreditSelect(credits)
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Paragraph, { children: credits.InvoiceNumber })
-                      ]
+                      flexGrow: 1,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        Checkbox,
+                        {
+                          label: credits.InvoiceNumber,
+                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
+                          onChange: () => handleCreditSelect(credits)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [

package/dist/components/SelectPaymentMethod.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-KYMBBPEW.js";
+} from "../chunk-FWRT5E5M.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-O4M2GISS.js";
-import "../chunk-QDFQ3B4N.js";
+import "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
-import "../chunk-JOMM4KBH.js";
+import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";
 import "../chunk-L364HTYC.js";
 import "../chunk-IGQVA7SC.js";

package/dist/components/index.cjs

@@ -4206,12 +4206,13 @@ var Stack = (_a) => {
 var import_clsx26 = __toESM(require("clsx"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_clsx26.default)(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className
       ),
       children
@@ -4255,9 +4256,9 @@ function Accordion(props) {
     {
       className: (0, import_clsx27.default)(
         "overflow-hidden select-none cursor-pointer",
-        className,
-        isOpen && "border-2 !border-border-primary-focus"
+        className
       ),
+      selected: isOpen,
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
@@ -4413,9 +4414,6 @@ var RadioIcon = ({ className }) => {
 };
 RadioIcon.displayName = "RadioIcon";
 
-// src/components/SelectPaymentMethod.tsx
-var import_clsx30 = __toESM(require("clsx"), 1);
-
 // src/components/HorizontalDivider.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -4470,10 +4468,10 @@ function SelectPaymentMethod(props) {
       Accordion,
       {
         isOpen: selectedMethod === "CCPayment",
-        title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        title: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Radio,
           {
+            label: "Pay by Credit/Debit Card",
             checked: selectedMethod === "CCPayment",
             onClick: (e) => e.preventDefault()
           }
@@ -4481,82 +4479,38 @@ function SelectPaymentMethod(props) {
         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" })
       }
-    )
+    ),
+    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
-  var _a;
   const {
     selectedMethod,
     handleToggle,
     selectedBankGuid,
     setSelectedBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading
+    customerBanks
   } = props;
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
-    if (selectedMethod === "CCPayment") return setIsOpen(false);
-  }, [selectedMethod]);
-  (0, import_react20.useEffect)(() => {
-    if (isOpen) {
-      if (!selectedBankGuid) {
-        setSelectedBankGuid(customerBanks[0].CustBankGUID);
-      }
-      handleToggle("ACHPayment");
-      return;
-    }
-  }, [isOpen]);
   function handleBankSelect(e, bankGuid) {
     e.stopPropagation();
     setSelectedBankGuid(bankGuid);
     handleToggle("ACHPayment");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    Accordion,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    Card,
     {
-      isOpen,
-      title: selectedBankGuid ? (_a = customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)) == null ? void 0 : _a.AccountDisplayString : "Select a Bank",
-      before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
+      selected: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
+          label: `Pay by ${bank.AccountDisplayString}`,
+          checked: selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID
         }
-      ),
-      onClick: () => setIsOpen((prev) => !prev),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 200,
-            children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              Card,
-              {
-                className: (0, import_clsx30.default)(
-                  "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
-                  selectedBankGuid === bank.CustBankGUID && "bg-background-secondary-normal/20"
-                ),
-                onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack, { horizontal: true, items: "center", justify: "between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "question_mark" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Paragraph, { children: bank.AccountDisplayString })
-                  ] }),
-                  selectedBankGuid === bank.CustBankGUID && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "check" })
-                ] })
-              },
-              bank.CustBankGUID
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
-      ] })
-    }
-  );
+      )
+    },
+    bank.CustBankGUID
+  )) });
 }
 function CreditsSelector(props) {
   const { selectedCredits, allCredits, setSelectedCredits } = props;
@@ -4591,24 +4545,21 @@ function CreditsSelector(props) {
                 items: "center",
                 sizing: "layout-group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     Stack,
                     {
-                      horizontal: true,
-                      items: "center",
                       sizing: "layout-group",
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                          Checkbox,
-                          {
-                            checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                            onChange: () => handleCreditSelect(credits)
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Paragraph, { children: credits.InvoiceNumber })
-                      ]
+                      flexGrow: 1,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        Checkbox,
+                        {
+                          label: credits.InvoiceNumber,
+                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
+                          onChange: () => handleCreditSelect(credits)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [

package/dist/components/index.js

@@ -6,8 +6,8 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-OX3HKFIH.js";
-import "../chunk-KYMBBPEW.js";
+} from "../chunk-22CQ3BSY.js";
+import "../chunk-FWRT5E5M.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-QIHDPSOM.js";
 import "../chunk-4RJKB7LC.js";
@@ -53,11 +53,11 @@ import {
 } from "../chunk-O4M2GISS.js";
 import {
   Accordion
-} from "../chunk-QDFQ3B4N.js";
+} from "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
 import {
   Card
-} from "../chunk-JOMM4KBH.js";
+} from "../chunk-4OS6APPF.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";

package/dist/index.css

@@ -1233,9 +1233,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-border-primary-focus {
-    border-color: var(--color-border-primary-focus) !important;
-  }
   .border-action-400 {
     border-color: var(--color-action-400);
   }
@@ -1260,6 +1257,9 @@
   .border-border-primary-error {
     border-color: var(--color-border-primary-error);
   }
+  .border-border-primary-focus {
+    border-color: var(--color-border-primary-focus);
+  }
   .border-border-primary-normal {
     border-color: var(--color-border-primary-normal);
   }
@@ -1383,12 +1383,6 @@
   .bg-background-secondary-normal {
     background-color: var(--color-background-secondary-normal);
   }
-  .bg-background-secondary-normal\/20 {
-    background-color: color-mix(in srgb, #c1c1c1 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-background-secondary-normal) 20%, transparent);
-    }
-  }
   .bg-background-success-normal {
     background-color: var(--color-background-success-normal);
   }
@@ -1878,9 +1872,6 @@
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
-  .py-desktop-compact-layout-padding {
-    padding-block: var(--spacing-desktop-compact-layout-padding);
-  }
   .py-desktop-component-padding {
     padding-block: var(--spacing-desktop-component-padding);
   }
@@ -2879,16 +2870,6 @@
       }
     }
   }
-  .hover\:bg-background-secondary-normal\/30 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #c1c1c1 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-background-secondary-normal) 30%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-border-action-hover {
     &:hover {
       @media (hover: hover) {

package/package.json

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

package/src/components/Accordion.tsx

@@ -45,8 +45,8 @@ export function Accordion(props: AccordionProps) {
       className={clsx(
         "overflow-hidden select-none cursor-pointer",
         className,
-        isOpen && "border-2 !border-border-primary-focus",
       )}
+      selected={isOpen}
       onClick={handleClick}
     >
       <Stack sizing="component" horizontal justify="between" items="center">

package/src/components/Card.tsx

@@ -1,13 +1,14 @@
 import clsx from "clsx";
 import { HTMLProps } from "react";
 
-export function Card(props: HTMLProps<HTMLDivElement>) {
-  const { children, ...rest } = props;
+export function Card(props: HTMLProps<HTMLDivElement> & { selected?: boolean; }) {
+  const { children, selected, ...rest } = props;
   return (
     <div
       {...rest}
       className={clsx(
-        "border rounded-sm border-border-primary-normal p-desktop-layout-padding",
+        "rounded-sm p-desktop-layout-padding",
+        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
         rest.className,
       )}
     >

package/src/components/SelectPaymentMethod.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Accordion } from "./Accordion";
 import { Button } from "./Button";
 import { Card } from "./Card";
-import { Icon } from "./Icon";
 import { Paragraph } from "./Paragraph";
 import { Radio } from "./Radio";
 import { Stack } from "./Stack";
-import clsx from "clsx";
 import { Checkbox } from "./Checkbox";
 import { Subheader } from "./Subheader";
 import { formatCurrencyDisplay } from "../utils/formatting";
@@ -82,9 +80,9 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
       {allowedMethods?.includes("CCPayment") && (
         <Accordion
           isOpen={selectedMethod === "CCPayment"}
-          title="Pay by Credit/Debit Card"
-          before={
+          title={
             <Radio
+              label="Pay by Credit/Debit Card"
               checked={selectedMethod === "CCPayment"}
               onClick={(e) => e.preventDefault()}
             />
@@ -98,6 +96,12 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
           </Button>
         </Accordion>
       )}
+
+      {selectedMethod === "ACHPayment" && (
+        <Button block onClick={onPay} disabled={isPayLoading}>
+          {isPayLoading ? "Processing..." : "Submit Payment"}
+        </Button>
+      )}
     </Stack>
   );
 }
@@ -118,24 +122,7 @@ function ACHSelector(props: ACHSelectorProps) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
-    onPay,
-    isPayLoading,
   } = props;
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (selectedMethod === "CCPayment") return setIsOpen(false);
-  }, [selectedMethod]);
-
-  useEffect(() => {
-    if (isOpen) {
-      if (!selectedBankGuid) {
-        setSelectedBankGuid(customerBanks[0]!.CustBankGUID);
-      }
-      handleToggle("ACHPayment");
-      return;
-    }
-  }, [isOpen]);
 
   function handleBankSelect(
     e: React.MouseEvent<HTMLDivElement>,
@@ -146,57 +133,20 @@ function ACHSelector(props: ACHSelectorProps) {
     handleToggle("ACHPayment");
   }
 
-  return (
-    <Accordion
-      isOpen={isOpen}
-      title={
-        selectedBankGuid
-          ? customerBanks.find((bank) => bank.CustBankGUID === selectedBankGuid)
-              ?.AccountDisplayString
-          : "Select a Bank"
-      }
-      before={
+  return <>
+    {customerBanks.map((bank) => (
+      <Card
+        key={bank.CustBankGUID}
+        onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
+        selected={selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID}
+      >
         <Radio
-          checked={!!selectedBankGuid && selectedMethod === "ACHPayment"}
+          label={`Pay by ${bank.AccountDisplayString}`}
+          checked={selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID}
         />
-      }
-      onClick={() => setIsOpen((prev) => !prev)}
-    >
-      <Stack sizing="layout-group" width="full">
-        <Stack
-          sizing="layout-group"
-          width="full"
-          overflowY="auto"
-          maxHeight={200}
-        >
-          {customerBanks.map((bank) => (
-            <Card
-              className={clsx(
-                "transition-colors duration-300 py-desktop-compact-layout-padding cursor-pointer hover:bg-background-secondary-normal/30",
-                selectedBankGuid === bank.CustBankGUID &&
-                  "bg-background-secondary-normal/20",
-              )}
-              key={bank.CustBankGUID}
-              onClick={(e) => handleBankSelect(e, bank.CustBankGUID)}
-            >
-              <Stack horizontal items="center" justify="between">
-                <Stack sizing="layout-group" horizontal items="center">
-                  <Icon name="question_mark" />
-                  <Paragraph>{bank.AccountDisplayString}</Paragraph>
-                </Stack>
-                {selectedBankGuid === bank.CustBankGUID && (
-                  <Icon name="check" />
-                )}
-              </Stack>
-            </Card>
-          ))}
-        </Stack>
-        <Button className="w-full" onClick={onPay} disabled={isPayLoading}>
-          {isPayLoading ? "Processing..." : "Submit Payment"}
-        </Button>
-      </Stack>
-    </Accordion>
-  );
+      </Card>
+    ))}
+  </>;
 }
 type CreditsSelectorProps = {
   selectedCredits: unknown[];
@@ -246,18 +196,18 @@ function CreditsSelector(props: CreditsSelectorProps) {
               sizing="layout-group"
             >
               <Stack
-                horizontal
-                items="center"
                 sizing="layout-group"
                 onClick={() => handleCreditSelect(credits)}
                 paddingY
+                flexGrow={1}
               >
                 <Checkbox
+                  label={credits.InvoiceNumber}
                   checked={selectedCredits?.includes(credits)}
                   onChange={() => handleCreditSelect(credits)}
                 />
-                <Paragraph>{credits.InvoiceNumber}</Paragraph>
               </Stack>
+
               <Subheader className=" pr-desktop-component-padding">
                 ${formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)}
               </Subheader>