@dmsi/wedgekit-react 0.0.87 → 0.0.88

package/dist/components/PaymentOnAccountModal.cjs

@@ -0,0 +1,2132 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PaymentOnAccountModal.tsx
+var PaymentOnAccountModal_exports = {};
+__export(PaymentOnAccountModal_exports, {
+  PaymentOnAccountModal: () => PaymentOnAccountModal
+});
+module.exports = __toCommonJS(PaymentOnAccountModal_exports);
+
+// src/components/Modal.tsx
+var import_clsx9 = __toESM(require("clsx"), 1);
+var import_react5 = require("react");
+
+// src/components/Heading.tsx
+var import_clsx2 = __toESM(require("clsx"), 1);
+
+// src/classNames.ts
+var import_clsx = __toESM(require("clsx"), 1);
+var typography = {
+  display1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: (0, import_clsx.default)(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: (0, import_clsx.default)(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: (0, import_clsx.default)(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  )
+};
+var baseTransition = (0, import_clsx.default)(
+  "transition-colors duration-100 ease-in-out"
+);
+var componentGap = (0, import_clsx.default)(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+);
+var paddingUsingComponentGap = (0, import_clsx.default)(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+);
+var paddingXUsingLayoutGroupGap = (0, import_clsx.default)(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+);
+var paddingYUsingLayoutGroupGap = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var componentPadding = (0, import_clsx.default)(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+);
+var componentPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+var componentPaddingX = (0, import_clsx.default)(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
+var componentPaddingY = (0, import_clsx.default)(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+);
+var componentPaddingXUsingComponentGap = (0, import_clsx.default)(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+);
+var componentPaddingYUsingComponentGap = (0, import_clsx.default)(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+var componentPaddingMinusBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+);
+var componentPaddingMinus2pxBorder = (0, import_clsx.default)(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+);
+var layoutPaddding = (0, import_clsx.default)(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+);
+var layoutPaddingBottom = (0, import_clsx.default)(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+);
+var layoutPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+);
+var containerPaddingX = (0, import_clsx.default)(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+);
+var containerPaddingY = (0, import_clsx.default)(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+var layoutGroupGapPaddingY = (0, import_clsx.default)(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+var layoutGroupGap = (0, import_clsx.default)(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+);
+var layoutGap = (0, import_clsx.default)(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+);
+var gapUsingContainerPadding = (0, import_clsx.default)(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+
+// src/components/Heading.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Heading = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as,
+    color,
+    align,
+    variant = "heading1",
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "color",
+    "align",
+    "variant",
+    "id"
+  ]);
+  const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
+  const Element = as != null ? as : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx2.default)(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Heading.displayName = "Heading";
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+Heading1.displayName = "Heading1";
+Heading2.displayName = "Heading2";
+Heading3.displayName = "Heading3";
+
+// src/components/Button.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    variant = "primary",
+    as = "button",
+    block,
+    leftIcon,
+    rightIcon,
+    className,
+    classNameLabel,
+    disabled = false,
+    children,
+    iconOnly = false,
+    colorClassName,
+    href,
+    id
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "as",
+    "block",
+    "leftIcon",
+    "rightIcon",
+    "className",
+    "classNameLabel",
+    "disabled",
+    "children",
+    "iconOnly",
+    "colorClassName",
+    "href",
+    "id"
+  ]);
+  const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-primary-normal border-background-action-primary-normal",
+    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
+    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
+    "active:bg-background-action-primary-active active:border-background-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryVariantStyles = variant === "secondary" && (0, import_clsx3.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-background-action-secondary-normal border-border-action-normal",
+    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
+    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
+  );
+  const tertiaryVariantStyles = variant === "tertiary" && (0, import_clsx3.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
+  const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx3.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
+    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
+    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
+    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
+    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
+  );
+  const secondaryCriticalVariantStyles = variant === "secondary-critical" && (0, import_clsx3.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
+    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
+  );
+  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && (0, import_clsx3.default)(
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
+    "bg-transparent border-transparent text-text-action-critical-normal",
+    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
+    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
+    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
+    "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-on-action-primary-normal",
+    "bg-transparent",
+    "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
+  );
+  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx3.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
+  const buttonClasses = (0, import_clsx3.default)(
+    disabled ? "cursor-default" : "cursor-pointer",
+    block ? "w-full" : "w-fit",
+    baseTransition,
+    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
+    primaryVariantStyles,
+    secondaryVariantStyles,
+    tertiaryVariantStyles,
+    primaryCriticalVariantStyles,
+    secondaryCriticalVariantStyles,
+    tertiaryCriticalVariantStyles,
+    navigationVarianStyles,
+    notNavigationVariantStyles,
+    className
+  );
+  const labelClasses = (0, import_clsx3.default)(
+    "min-h-6 flex items-center justify-center",
+    classNameLabel,
+    componentPaddingXUsingComponentGap,
+    typography.buttonLabel
+  );
+  const Element = href && !as ? "a" : as;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      type: Element === "button" ? "button" : void 0,
+      className: buttonClasses
+    }, props), {
+      onClick: props.onClick,
+      disabled,
+      href,
+      children: [
+        leftIcon && leftIcon,
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        rightIcon && rightIcon
+      ]
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/components/Icon.tsx
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Icon(_a) {
+  var _b = _a, {
+    name,
+    size = 24,
+    variant = "outline"
+  } = _b, props = __objRest(_b, [
+    "name",
+    "size",
+    "variant"
+  ]);
+  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
+  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    __spreadProps(__spreadValues({}, props), {
+      className: (0, import_clsx4.default)(
+        "icon",
+        `icon-${size}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        props.className
+      ),
+      style: __spreadValues({
+        fontVariationSettings: variantStyle + `, ${weightStyle}`
+      }, props.style),
+      children: name
+    })
+  );
+}
+
+// src/components/ModalHeader.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalHeader = ({
+  title,
+  hideCloseIcon,
+  headerIcon,
+  onClose,
+  id
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id,
+      className: (0, import_clsx5.default)(
+        "flex justify-between items-center",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
+          headerIcon,
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+        ] }),
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            iconOnly: true,
+            variant: "tertiary",
+            onClick: onClose,
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
+          }
+        )
+      ]
+    }
+  );
+};
+ModalHeader.displayName = "ModalHeader";
+
+// src/components/ModalContent.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ModalContent({
+  fixedHeightScrolling,
+  children,
+  id
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      id,
+      className: (0, import_clsx6.default)(
+        "flex-grow desktop:flex-grow-0",
+        layoutPaddding,
+        fixedHeightScrolling && "overflow-auto"
+      ),
+      children
+    }
+  );
+}
+ModalContent.displayName = "ModalContent";
+
+// src/components/ModalButtons.tsx
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModalButtons = ({
+  onClose,
+  onContinue,
+  customActions,
+  id
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      id,
+      className: (0, import_clsx7.default)(
+        "border-t border-neutral-300 flex justify-end",
+        layoutPaddding,
+        layoutGroupGap
+      ),
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
+          {
+            id: id ? `${id}-close-button` : void 0,
+            variant: "secondary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
+            onClick: onClose,
+            className: "max-sm:w-full",
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
+          {
+            id: id ? `${id}-continue-button` : void 0,
+            variant: "primary",
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
+            className: "max-sm:w-full",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ] })
+    }
+  );
+};
+ModalButtons.displayName = "ModalButtons";
+
+// src/components/ModalScrim.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModalScrim = ({
+  show = false,
+  size = "small",
+  children,
+  onClick,
+  ref,
+  id
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      id,
+      className: (0, import_clsx8.default)(
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+        size === "small" && "p-4",
+        "inset-0 z-50"
+      ),
+      onMouseDown: onClick,
+      ref,
+      children
+    }
+  );
+};
+ModalScrim.displayName = "ModalScrim";
+
+// src/components/Modal.tsx
+var import_react_dom = require("react-dom");
+
+// src/utils.ts
+function findDocumentRoot(element) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error(
+      "findDocumentRoot can only be used in a browser environment."
+    );
+  }
+  if (!element || !(element instanceof Node)) {
+    return window.document.body;
+  }
+  var currentElement = element;
+  while (currentElement && currentElement.parentNode) {
+    if (currentElement.parentNode === document) {
+      return document.body;
+    } else if (currentElement.parentNode instanceof DocumentFragment) {
+      return currentElement.parentNode;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return window.document.body;
+}
+
+// src/components/Modal.tsx
+var import_react_use = require("react-use");
+
+// src/hooks/useKeydown.ts
+var import_react = require("react");
+
+// src/hooks/useInfiniteScroll.tsx
+var import_react2 = require("react");
+
+// src/hooks/useMatchesMedia.ts
+var import_react3 = require("react");
+var useMatchesMedia = (query) => {
+  const [matches, setMatches] = (0, import_react3.useState)();
+  (0, import_react3.useLayoutEffect)(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = () => setMatches(mediaQueryList.matches);
+    listener();
+    mediaQueryList.addEventListener("change", listener);
+    return () => mediaQueryList.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+};
+var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
+
+// src/components/useMounted.tsx
+var import_react4 = require("react");
+var useMounted = () => {
+  const [isMounted, setIsMounted] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  return isMounted;
+};
+
+// src/components/Modal.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var fadeInScale = (element, duration = 300) => element.animate(
+  [
+    { opacity: 0, transform: "scale(0.95)" },
+    { opacity: 1, transform: "scale(1)" }
+  ],
+  {
+    duration,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fill: "both"
+  }
+);
+var fadeOutScale = (element, duration = 200) => element.animate(
+  [
+    { opacity: 1, transform: "scale(1)" },
+    { opacity: 0, transform: "scale(0.95)" }
+  ],
+  {
+    duration,
+    easing: "ease-in-out",
+    fill: "both"
+  }
+);
+var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
+  duration,
+  easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  fill: "both"
+});
+var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
+  duration,
+  easing: "ease-in-out",
+  fill: "both"
+});
+var whenAllAnimationsFinish = (animations, callback) => {
+  let finishedCount = 0;
+  animations.forEach((animation) => {
+    animation.onfinish = () => {
+      finishedCount += 1;
+      if (finishedCount === animations.length) {
+        callback();
+      }
+    };
+  });
+};
+var sizes = {
+  small: {
+    sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
+  },
+  medium: {
+    sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  large: {
+    sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  },
+  "x-large": {
+    sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
+  }
+};
+var Modal = ({
+  id,
+  title,
+  open = false,
+  size = "small",
+  className,
+  children,
+  onClose,
+  onContinue,
+  closeOnBackdropClick = true,
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  fixedHeightScrolling = false,
+  customActions
+}) => {
+  var _a;
+  const mounted = useMounted();
+  const modalRef = (0, import_react5.useRef)(null);
+  const bgRef = (0, import_react5.useRef)(null);
+  const wasOpen = (0, import_react_use.usePrevious)(open);
+  const isMobile = useMatchesMobile();
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+  (0, import_react5.useEffect)(() => {
+    if (!mounted) return;
+    if (!modalRef.current || !bgRef.current) {
+      console.error("Modal or background reference is not set.");
+      return;
+    }
+    if (wasOpen === void 0) return;
+    if (wasOpen && !open) {
+      const modalAnimation = fadeOutScale(modalRef.current);
+      const bgAnimation = bgFadeOut(bgRef.current);
+      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
+        if (onClose) {
+          onClose();
+        }
+      });
+    } else if (!wasOpen && open) {
+      fadeInScale(modalRef.current);
+      bgFadeIn(bgRef.current);
+    }
+  }, [mounted, open]);
+  const handleKeyDown = (0, import_react5.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        if (onClose) {
+          e.preventDefault();
+          onClose();
+        }
+      }
+    },
+    [onClose, bgRef, modalRef]
+  );
+  const handleClose = (0, import_react5.useCallback)(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  (0, import_react5.useEffect)(() => {
+    if (open) {
+      document.addEventListener("keyup", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, [open, handleKeyDown]);
+  (0, import_react5.useEffect)(() => {
+    if (!open) return;
+    const scrollY = window.scrollY;
+    const body = document.body;
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.overflow = "hidden";
+    body.style.width = "100%";
+    return () => {
+      body.style.position = "";
+      body.style.top = "";
+      body.style.left = "";
+      body.style.right = "";
+      body.style.overflow = "";
+      body.style.width = "";
+      window.scrollTo(0, scrollY);
+    };
+  }, [open]);
+  const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
+  const backgroundClickHandler = (0, import_react5.useCallback)(
+    (e) => {
+      const target = e.target;
+      const currentTarget = e.currentTarget;
+      if (currentTarget.contains(target) && currentTarget !== target) {
+        e.stopPropagation();
+        return;
+      }
+      if (open && closeOnBackdropClick) {
+        handleClose();
+      }
+    },
+    [open, closeOnBackdropClick, handleClose]
+  );
+  if (!mounted) {
+    return null;
+  }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ModalScrim,
+      {
+        id: id ? `${id}-scrim` : void 0,
+        size,
+        ref: bgRef,
+        show: open,
+        onClick: backgroundClickHandler,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            id,
+            ref: modalRef,
+            className: (0, import_clsx9.default)(
+              "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+              computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+              className,
+              sizeClass
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ModalHeader,
+                {
+                  id: id ? `${id}-header` : void 0,
+                  title,
+                  onClose: handleClose,
+                  hideCloseIcon,
+                  headerIcon
+                }
+              ),
+              children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ModalContent,
+                {
+                  id: id ? `${id}-content` : void 0,
+                  fixedHeightScrolling: computedFixedHeightScrolling,
+                  children
+                }
+              ),
+              showButtons && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                ModalButtons,
+                {
+                  id: id ? `${id}-buttons` : void 0,
+                  onClose: handleClose,
+                  onContinue,
+                  customActions
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    findDocumentRoot(bgRef.current)
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/Stack.tsx
+var import_clsx10 = __toESM(require("clsx"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx10.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx10.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom"
+  ]);
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx10.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    })
+  );
+};
+
+// src/components/Paragraph.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Paragraph = (_a) => {
+  var _b = _a, {
+    className,
+    color,
+    padded,
+    align = "left",
+    tall,
+    addOverflow,
+    children,
+    as = "p",
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "color",
+    "padded",
+    "align",
+    "tall",
+    "addOverflow",
+    "children",
+    "as",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id
+    }, props), {
+      className: (0, import_clsx11.default)(
+        typography.paragraph,
+        className,
+        padded && componentPaddingXUsingComponentGap,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6",
+        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      }),
+      children
+    })
+  );
+};
+Paragraph.displayName = "Paragraph";
+
+// src/components/Input.tsx
+var import_react6 = require("react");
+var import_clsx13 = __toESM(require("clsx"), 1);
+
+// src/components/Label.tsx
+var import_clsx12 = __toESM(require("clsx"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Label = (_a) => {
+  var _b = _a, {
+    as = "span",
+    padded,
+    className,
+    color,
+    align,
+    id
+  } = _b, props = __objRest(_b, [
+    "as",
+    "padded",
+    "className",
+    "color",
+    "align",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx12.default)(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap
+      )
+    }, props), {
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    })
+  );
+};
+Label.displayName = "Label";
+
+// src/utils/formatting.tsx
+function getDecimalPlaceholder(decimals) {
+  if (!decimals || decimals <= 0) {
+    return {};
+  }
+  return {
+    placeholder: `0.${"0".repeat(decimals)}`
+  };
+}
+function formatDecimalValue(value, decimals) {
+  if (!value || value === "") {
+    return "";
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (!decimals || decimals <= 0) {
+    return String(Math.round(numValue));
+  }
+  return numValue.toFixed(decimals);
+}
+function formatCurrencyDisplay(value) {
+  if (!value || value === "") {
+    return "";
+  }
+  const parts = value.split(".");
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimalPart !== void 0 ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+}
+
+// src/components/Input.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var InputBase = (_a) => {
+  var _b = _a, {
+    id,
+    before,
+    after,
+    type,
+    label,
+    error,
+    className,
+    align = "left",
+    caption,
+    required,
+    selectOnFocus,
+    removeRoundness,
+    inputContainerRef,
+    removeBorder,
+    wrapperClassName,
+    focus,
+    fullWidth = true
+  } = _b, props = __objRest(_b, [
+    "id",
+    "before",
+    "after",
+    "type",
+    "label",
+    "error",
+    "className",
+    "align",
+    "caption",
+    "required",
+    "selectOnFocus",
+    "removeRoundness",
+    "inputContainerRef",
+    "removeBorder",
+    "wrapperClassName",
+    "focus",
+    "fullWidth"
+  ]);
+  const attributes = {
+    "data-error": error && !focus || null,
+    "data-focus": focus || null
+  };
+  const inputRef = (0, import_react6.useRef)(null);
+  const inputId = id ? `${id}-input` : void 0;
+  (0, import_react6.useEffect)(() => {
+    var _a2;
+    const input = inputRef.current;
+    const focusHandler = () => {
+      input == null ? void 0 : input.select();
+    };
+    if (selectOnFocus) {
+      (_a2 = inputRef.current) == null ? void 0 : _a2.addEventListener("focus", focusHandler);
+      return () => {
+        input == null ? void 0 : input.removeEventListener("focus", focusHandler);
+      };
+    }
+  }, [selectOnFocus]);
+  const inputBaseClass = (0, import_clsx13.default)(
+    fullWidth ? "w-full" : "w-fit",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    componentGap,
+    baseTransition,
+    "outline-transparent outline-2 -outline-offset-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal",
+    "relative"
+  );
+  const inputFocusClass = (0, import_clsx13.default)(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
+  );
+  const inputDisabledClass = (0, import_clsx13.default)(
+    "has-disabled:bg-background-action-secondary-disabled"
+  );
+  const inputReadOnlyClass = (0, import_clsx13.default)(
+    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
+  );
+  const inputInvalidClass = (0, import_clsx13.default)(
+    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "label",
+    {
+      id,
+      htmlFor: inputId,
+      ref: inputContainerRef,
+      className: (0, import_clsx13.default)(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        componentGap
+      ),
+      style: __spreadValues({}, props.style),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_clsx13.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Label,
+            {
+              id: id ? `${id}-label` : void 0,
+              className: (0, import_clsx13.default)(
+                props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: label
+            }
+          ),
+          required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: (0, import_clsx13.default)(typography.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx13.default)(
+              inputBaseClass,
+              !props.disabled && inputInvalidClass,
+              inputFocusClass,
+              inputDisabledClass,
+              inputReadOnlyClass,
+              wrapperClassName
+            ),
+            children: [
+              before,
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                __spreadProps(__spreadValues(__spreadValues({
+                  ref: (el) => {
+                    inputRef.current = el;
+                  },
+                  type,
+                  required
+                }, props), attributes), {
+                  id: inputId,
+                  className: (0, import_clsx13.default)(
+                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
+                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
+                    align === "right" && "text-right",
+                    align === "center" && "text-center",
+                    componentPaddingXUsingComponentGap,
+                    typography.paragraph,
+                    className,
+                    props.readOnly && !props.disabled && "!px-0"
+                  )
+                })
+              ),
+              after
+            ]
+          }
+        ),
+        caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+      ]
+    }
+  );
+};
+var Input = (_a) => {
+  var _b = _a, {
+    variant = "default",
+    decimals,
+    uom,
+    removeSearchIcon,
+    value: propValue,
+    onChange,
+    onBlur,
+    onClear,
+    id
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "decimals",
+    "uom",
+    "removeSearchIcon",
+    "value",
+    "onChange",
+    "onBlur",
+    "onClear",
+    "id"
+  ]);
+  const [internalValue, setInternalValue] = (0, import_react6.useState)("");
+  const [displayValue, setDisplayValue] = (0, import_react6.useState)("");
+  (0, import_react6.useEffect)(() => {
+    var _a2;
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (variant === "currency") {
+      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
+        setInternalValue("");
+        setDisplayValue("");
+      } else {
+        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
+        if (!isNaN(numValue)) {
+          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
+          setInternalValue(formatted);
+          setDisplayValue(formatCurrencyDisplay(formatted));
+        }
+      }
+    } else {
+      setInternalValue(stringValue);
+      setDisplayValue(stringValue);
+    }
+  }, [propValue, decimals, variant]);
+  const getInputProps = () => {
+    var _a2;
+    const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+      id
+    }), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
+    switch (variant) {
+      case "search":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          placeholder: (_a2 = props.placeholder) != null ? _a2 : "Search",
+          className: "!mr-6",
+          value: displayValue
+        });
+      case "finder":
+        return baseProps;
+      case "currency":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          align: "right",
+          type: "text",
+          value: displayValue
+        });
+      case "percentage":
+      case "uom":
+        return __spreadProps(__spreadValues({}, baseProps), {
+          type: "number",
+          align: "right"
+        });
+      default:
+        return baseProps;
+    }
+  };
+  const getBeforeElement = () => {
+    if (props.before) return props.before;
+    switch (variant) {
+      case "search":
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "search" }) }) : null;
+      case "currency":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "attach_money" }) });
+      default:
+        return null;
+    }
+  };
+  const getAfterElement = () => {
+    if (props.after) return props.after;
+    switch (variant) {
+      case "search": {
+        const hasValue = displayValue.length > 0;
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Icon,
+          {
+            id: id ? `${id}-clear-button` : void 0,
+            name: "close",
+            onClick: handleSearchReset,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      }
+      case "finder":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "search" });
+      case "uom":
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
+      case "percentage":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "percent" }) });
+      default:
+        return null;
+    }
+  };
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" }
+      };
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+    onClear == null ? void 0 : onClear();
+  };
+  const handleChange = (e) => {
+    const rawValue = e.target.value;
+    if (variant === "search") {
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+    if (variant === "currency") {
+      const raw = rawValue.replace(/,/g, "");
+      if (raw === "") {
+        setInternalValue("");
+        setDisplayValue("");
+        if (onChange) {
+          const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+            target: __spreadProps(__spreadValues({}, e.target), { value: "" })
+          });
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+      const regex = /^\d*\.?\d*$/;
+      if (!regex.test(raw)) return;
+      const parts = raw.split(".");
+      const currentDecimals = decimals != null ? decimals : 2;
+      if (parts.length === 2 && parts[1].length > currentDecimals) return;
+      setInternalValue(raw);
+      setDisplayValue(formatCurrencyDisplay(raw));
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+      return;
+    }
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    if (variant === "currency") {
+      const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
+      setInternalValue(formatted);
+      setDisplayValue(formatCurrencyDisplay(formatted));
+      const asNumber = Number(formatted);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = __spreadProps(__spreadValues({}, e), {
+          target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
+        });
+        onChange(syntheticEvent);
+      }
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const inputProps = getInputProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    InputBase,
+    __spreadProps(__spreadValues({}, inputProps), {
+      before: getBeforeElement(),
+      after: getAfterElement(),
+      onChange: handleChange,
+      onBlur: handleBlur
+    })
+  );
+};
+Input.displayName = "Input";
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Currency = (props) => {
+  var _a;
+  const handleCurrencyChange = (e) => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      variant: "currency",
+      decimals: (_a = props.decimals) != null ? _a : 2,
+      onChange: handleCurrencyChange
+    })
+  );
+};
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+Finder.displayName = "Finder";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";
+
+// src/components/Card.tsx
+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"]);
+  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",
+        rest.className
+      ),
+      children
+    })
+  );
+}
+
+// src/components/PaymentOnAccountModal.tsx
+var import_react8 = require("react");
+
+// src/components/SelectPaymentMethod.tsx
+var import_react7 = require("react");
+
+// src/components/Accordion.tsx
+var import_clsx15 = __toESM(require("clsx"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Accordion(props) {
+  const { isOpen, onClick, className } = props;
+  const {
+    title,
+    before,
+    after = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Icon,
+      {
+        name: "expand_more",
+        className: (0, import_clsx15.default)(
+          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
+          isOpen ? "rotate-180" : "rotate-0"
+        )
+      }
+    ),
+    children
+  } = props;
+  function handleClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    onClick == null ? void 0 : onClick();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    Card,
+    {
+      className: (0, import_clsx15.default)(
+        "overflow-hidden select-none cursor-pointer",
+        className,
+        isOpen && "border-2 !border-border-primary-focus"
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
+            before,
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+          ] }),
+          after
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: (0, import_clsx15.default)("grid transition-all duration-300 ease-in-out"),
+            style: {
+              gridTemplateRows: isOpen ? "1fr" : "0fr"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: (0, import_clsx15.default)(
+                  typography.paragraph,
+                  "text-text-primary-normal desktop:pt-desktop-layout-gap",
+                  "flex flex-col gap-desktop-layout-gap"
+                ),
+                onClick: (e) => e.stopPropagation(),
+                children
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Radio.tsx
+var import_clsx16 = __toESM(require("clsx"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Radio = (_a) => {
+  var _b = _a, {
+    className,
+    label,
+    error,
+    disabled,
+    checked,
+    readOnly,
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "label",
+    "error",
+    "disabled",
+    "checked",
+    "readOnly",
+    "id"
+  ]);
+  const radioId = id;
+  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
+  const defaultClassName = (0, import_clsx16.default)(
+    !error && !disabled && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
+  );
+  const errorClassName = (0, import_clsx16.default)(
+    error && !disabled && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
+  );
+  const disabledClassName = (0, import_clsx16.default)(
+    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
+  );
+  const readonlyClassName = (0, import_clsx16.default)(
+    readOnly && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "label",
+    {
+      htmlFor: radioId,
+      className: (0, import_clsx16.default)(
+        "flex items-center",
+        componentGap,
+        disabled ? "cursor-default" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "input",
+            __spreadValues({
+              id: radioId,
+              type: "radio",
+              className: "sr-only peer",
+              disabled,
+              checked,
+              readOnly
+            }, props)
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "div",
+            {
+              className: (0, import_clsx16.default)(
+                "size-6 rounded-full border flex items-center justify-center",
+                baseTransition,
+                defaultClassName,
+                errorClassName,
+                disabledClassName,
+                readonlyClassName
+              ),
+              children: checked && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                RadioIcon,
+                {
+                  className: (0, import_clsx16.default)(
+                    "transition-colors",
+                    !error && !disabled && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
+                    error && !disabled && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
+                    disabled && "text-icon-on-action-secondary-disabled",
+                    readOnly && "text-icon-on-action-secondary-disabled"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
+      ]
+    }
+  );
+};
+Radio.displayName = "Radio";
+var RadioIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "rect",
+          {
+            x: "1",
+            y: "1",
+            width: "22",
+            height: "22",
+            rx: "11",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
+      ]
+    }
+  );
+};
+RadioIcon.displayName = "RadioIcon";
+
+// src/components/SelectPaymentMethod.tsx
+var import_clsx19 = __toESM(require("clsx"), 1);
+
+// src/components/Checkbox.tsx
+var import_clsx17 = __toESM(require("clsx"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    error,
+    disabled,
+    readOnly,
+    checked,
+    onChange,
+    indeterminate,
+    paragraphClassName,
+    id
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "disabled",
+    "readOnly",
+    "checked",
+    "onChange",
+    "indeterminate",
+    "paragraphClassName",
+    "id"
+  ]);
+  const selected = indeterminate || checked;
+  const normalClassName = (0, import_clsx17.default)(
+    !selected && !error && !disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active"
+  );
+  const normalSelectedClassName = (0, import_clsx17.default)(
+    selected && !error && !disabled && !readOnly && "bg-background-action-primary-normal border-background-action-primary-normal peer-hover:bg-background-action-primary-hover peer-hover:border-background-action-primary-hover peer-active:bg-background-action-primary-active peer-active:border-background-action-primary-active"
+  );
+  const errorClassName = (0, import_clsx17.default)(
+    error && !selected && "bg-background-action-critical-secondary-normal border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active"
+  );
+  const errorSelectedClassName = (0, import_clsx17.default)(
+    error && selected && "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal peer-hover:bg-background-action-critical-primary-hover peer-hover:border-background-action-critical-primary-hover peer-active:bg-background-action-critical-primary-active peer-active:border-background-action-critical-primary-active"
+  );
+  const disabledClassName = (0, import_clsx17.default)(
+    disabled && !readOnly && "border-border-primary-normal bg-background-action-secondary-disabled peer-checked:bg-icon-on-action-primary-disabled peer-checked:border-icon-on-action-primary-disabled"
+  );
+  const readOnlyClassName = (0, import_clsx17.default)(
+    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
+  );
+  const checkColor = (0, import_clsx17.default)(
+    selected && !disabled && !readOnly && "color-icon-on-action-primary-normal peer-hover:color-icon-on-action-primary-hover peer-active:color-icon-on-action-primary-active",
+    selected && disabled && "color-background-action-primary-disabled"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "label",
+    {
+      id,
+      htmlFor: id ? `${id}-input` : void 0,
+      className: (0, import_clsx17.default)(
+        "flex items-center",
+        componentGap,
+        (disabled || readOnly && error || readOnly) && "cursor-default",
+        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "input",
+            __spreadValues({
+              id: id ? `${id}-input` : void 0,
+              type: "checkbox",
+              className: "sr-only peer",
+              disabled,
+              checked: selected,
+              onChange: handleOnChange,
+              "data-indeterminate": indeterminate
+            }, props)
+          ),
+          error && (readOnly || disabled) ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx17.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: (0, import_clsx17.default)(
+                "size-6 border rounded-base",
+                "flex items-center justify-center",
+                baseTransition,
+                normalClassName,
+                normalSelectedClassName,
+                errorClassName,
+                errorSelectedClassName,
+                disabledClassName,
+                readOnlyClassName,
+                checkColor
+              ),
+              children: selected ? indeterminate ? readOnly ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "close" }) })
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Paragraph,
+          {
+            id: id ? `${id}-label` : void 0,
+            as: "span",
+            padded: true,
+            className: (0, import_clsx17.default)(
+              "text-nowrap",
+              disabled && !error && "!text-text-primary-disabled",
+              error && !disabled && !readOnly && "!text-text-primary-error",
+              paragraphClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
+  function handleOnChange(e) {
+    if (disabled || readOnly || readOnly && error || !onChange) {
+      return;
+    }
+    onChange(e);
+  }
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/Subheader.tsx
+var import_clsx18 = __toESM(require("clsx"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Subheader = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    as = "span",
+    align,
+    color,
+    tall,
+    id
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "as",
+    "align",
+    "color",
+    "tall",
+    "id"
+  ]);
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Element,
+    __spreadProps(__spreadValues({
+      id,
+      className: (0, import_clsx18.default)(
+        typography.subheader,
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        tall && "!leading-6"
+      ),
+      style: __spreadProps(__spreadValues({}, props.style), {
+        color: color ? `var(--color-${color})` : void 0
+      })
+    }, props), {
+      children
+    })
+  );
+};
+Subheader.displayName = "Subheader";
+
+// src/components/HorizontalDivider.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function HorizontalDivider({ id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("hr", { id, className: "w-full border-t border-border-primary-normal" });
+}
+
+// src/components/SelectPaymentMethod.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function SelectPaymentMethod(props) {
+  const {
+    selectedMethod,
+    onSelectMethod,
+    selectedCredits,
+    allCredits,
+    allowedMethods,
+    selectedACHBankGuid,
+    setSelectedACHBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading
+  } = props;
+  function handleToggle(method) {
+    onSelectMethod(method);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
+    !!(allCredits == null ? void 0 : allCredits.length) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      CreditsSelector,
+      {
+        selectedCredits: selectedCredits || [],
+        allCredits: allCredits || [],
+        setSelectedCredits: props.setSelectedCredits || (() => {
+        })
+      }
+    ),
+    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      ACHSelector,
+      {
+        selectedMethod,
+        handleToggle,
+        selectedBankGuid: selectedACHBankGuid || null,
+        setSelectedBankGuid: setSelectedACHBankGuid || (() => {
+        }),
+        customerBanks: customerBanks || [],
+        onPay,
+        isPayLoading: isPayLoading || false
+      }
+    ),
+    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Accordion,
+      {
+        isOpen: selectedMethod === "CCPayment",
+        title: "Pay by Credit/Debit Card",
+        before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        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" })
+      }
+    )
+  ] });
+}
+function ACHSelector(props) {
+  var _a;
+  const {
+    selectedMethod,
+    handleToggle,
+    selectedBankGuid,
+    setSelectedBankGuid,
+    customerBanks,
+    onPay,
+    isPayLoading
+  } = 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,
+    {
+      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)(
+        Radio,
+        {
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
+          readOnly: true
+        }
+      ),
+      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_clsx19.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" })
+      ] })
+    }
+  );
+}
+function CreditsSelector(props) {
+  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(true);
+  const handleCreditSelect = (credit) => {
+    if (setSelectedCredits) {
+      setSelectedCredits(
+        (prev) => prev.includes(credit) ? prev.filter((c) => c !== credit) : [...prev, credit]
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    Accordion,
+    {
+      isOpen,
+      title: "Available Credits",
+      onClick: () => setIsOpen((prev) => !prev),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HorizontalDivider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Stack,
+          {
+            sizing: "layout-group",
+            width: "full",
+            overflowY: "auto",
+            maxHeight: 300,
+            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+              Stack,
+              {
+                horizontal: true,
+                justify: "between",
+                items: "center",
+                sizing: "layout-group",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    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 })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                    "$",
+                    formatCurrencyDisplay(`${Math.abs(credits.InvoiceBalance)}`)
+                  ] })
+                ]
+              },
+              credits.AROpenGUID
+            ))
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/PaymentOnAccountModal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function PaymentOnAccountModal(props) {
+  const { isOpen, paymentProps, onClose } = props;
+  const [amount, setAmount] = (0, import_react8.useState)(paymentProps.amountToPay);
+  (0, import_react8.useEffect)(() => {
+    setAmount(paymentProps.amountToPay);
+  }, [paymentProps.amountToPay]);
+  function handleAmountChange(event) {
+    const value = event.target.value.replace(/[^0-9.-]+/g, "");
+    setAmount(+value || 0);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { className: "py-desktop-component-padding", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { sizing: "component", justify: "between", items: "center", horizontal: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Paragraph, { className: "w-full", children: "Amount to Pay" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        Input,
+        {
+          type: "number",
+          placeholder: "$0.00",
+          align: "right",
+          value: amount === 0 ? "" : amount,
+          onChange: handleAmountChange,
+          before: "$"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPaymentMethod, __spreadValues({}, paymentProps))
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentOnAccountModal
+});