@dmsi/wedgekit-react 0.0.161 → 0.0.162

package/dist/components/SelectPaymentMethod.cjs

@@ -1,1355 +0,0 @@
-"use strict";
-"use client";
-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/SelectPaymentMethod.tsx
-var SelectPaymentMethod_exports = {};
-__export(SelectPaymentMethod_exports, {
-  SelectPaymentMethod: () => SelectPaymentMethod
-});
-module.exports = __toCommonJS(SelectPaymentMethod_exports);
-var import_react = require("react");
-
-// src/components/Accordion.tsx
-var import_clsx6 = __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/Card.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-function Card(props) {
-  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      "data-testid": testid,
-      className: (0, import_clsx2.default)(
-        "rounded-sm p-desktop-layout-padding",
-        selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
-        rest.className
-      ),
-      children
-    })
-  );
-}
-
-// src/components/Icon.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Icon(_a) {
-  var _b = _a, {
-    name,
-    size = 24,
-    variant = "outline",
-    testid
-  } = _b, props = __objRest(_b, [
-    "name",
-    "size",
-    "variant",
-    "testid"
-  ]);
-  const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
-  const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      "data-testid": testid,
-      className: (0, import_clsx3.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/Stack.tsx
-var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx4.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_clsx4.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,
-    testid
-  } = _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",
-    "testid"
-  ]);
-  const flexClassNames = getFlexClassNames({ items, justify, grow });
-  const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, 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_clsx4.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_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Paragraph = (_a) => {
-  var _b = _a, {
-    className,
-    color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p",
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid
-    }, props), {
-      className: (0, import_clsx5.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/Accordion.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Accordion(props) {
-  const { isOpen, onClick, className, disabled, testid } = props;
-  const {
-    title,
-    before,
-    after = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Icon,
-      {
-        name: "expand_more",
-        className: (0, import_clsx6.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_runtime5.jsxs)(
-    Card,
-    {
-      className: (0, import_clsx6.default)(
-        "overflow-hidden select-none",
-        { "cursor-pointer": !disabled },
-        className
-      ),
-      selected: isOpen,
-      onClick: handleClick,
-      testid,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
-            before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
-          ] }),
-          after
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: (0, import_clsx6.default)("grid transition-all duration-300 ease-in-out"),
-            style: {
-              gridTemplateRows: isOpen ? "1fr" : "0fr"
-            },
-            "data-testid": testid ? `${testid}-content-container` : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "div",
-              {
-                className: (0, import_clsx6.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/Button.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = 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,
-    testid
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children",
-    "iconOnly",
-    "colorClassName",
-    "href",
-    "id",
-    "testid"
-  ]);
-  const primaryVariantStyles = variant === "primary" && (0, import_clsx7.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_clsx7.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_clsx7.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_clsx7.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_clsx7.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_clsx7.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_clsx7.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
-    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-    "flex-col",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && (0, import_clsx7.default)("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = (0, import_clsx7.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_clsx7.default)(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      type: Element === "button" ? "button" : void 0,
-      className: buttonClasses
-    }, props), {
-      onClick: props.onClick,
-      disabled,
-      href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
-      children: [
-        leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-// src/components/Radio.tsx
-var import_clsx8 = __toESM(require("clsx"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Radio = (_a) => {
-  var _b = _a, {
-    className,
-    label,
-    error,
-    disabled,
-    checked,
-    readOnly,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "label",
-    "error",
-    "disabled",
-    "checked",
-    "readOnly",
-    "id",
-    "testid"
-  ]);
-  const radioId = id;
-  const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
-  const defaultClassName = (0, import_clsx8.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_clsx8.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_clsx8.default)(
-    disabled && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
-  );
-  const readonlyClassName = (0, import_clsx8.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_runtime7.jsxs)(
-    "label",
-    {
-      htmlFor: radioId,
-      className: (0, import_clsx8.default)(
-        "flex items-center",
-        componentGap,
-        disabled ? "cursor-default" : "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "input",
-            __spreadValues({
-              id: radioId,
-              "data-testid": testid,
-              type: "radio",
-              className: "sr-only peer",
-              disabled,
-              checked,
-              readOnly
-            }, props)
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "div",
-            {
-              className: (0, import_clsx8.default)(
-                "size-6 rounded-full border flex items-center justify-center",
-                baseTransition,
-                defaultClassName,
-                errorClassName,
-                disabledClassName,
-                readonlyClassName
-              ),
-              children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                RadioIcon,
-                {
-                  className: (0, import_clsx8.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_runtime7.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
-      ]
-    }
-  );
-};
-Radio.displayName = "Radio";
-var RadioIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
-          "rect",
-          {
-            x: "1",
-            y: "1",
-            width: "22",
-            height: "22",
-            rx: "11",
-            stroke: "currentColor",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
-      ]
-    }
-  );
-};
-RadioIcon.displayName = "RadioIcon";
-
-// src/components/Checkbox.tsx
-var import_clsx9 = __toESM(require("clsx"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Checkbox = (_a) => {
-  var _b = _a, {
-    label,
-    error,
-    disabled,
-    readOnly,
-    checked,
-    onChange,
-    indeterminate,
-    paragraphClassName,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "label",
-    "error",
-    "disabled",
-    "readOnly",
-    "checked",
-    "onChange",
-    "indeterminate",
-    "paragraphClassName",
-    "id",
-    "testid"
-  ]);
-  const selected = indeterminate || checked;
-  const normalClassName = (0, import_clsx9.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_clsx9.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_clsx9.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_clsx9.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_clsx9.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_clsx9.default)(
-    readOnly && "border-transparent bg-transparent peer-checked:bg-transparent peer-checked:border-transparent"
-  );
-  const checkColor = (0, import_clsx9.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_runtime8.jsxs)(
-    "label",
-    {
-      id,
-      "data-testid": testid,
-      htmlFor: id ? `${id}-input` : void 0,
-      className: (0, import_clsx9.default)(
-        "flex items-center",
-        componentGap,
-        (disabled || readOnly && error || readOnly) && "cursor-default",
-        !(readOnly && error) && !disabled && !readOnly && "cursor-pointer"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "input",
-            __spreadValues({
-              id: id ? `${id}-input` : void 0,
-              "data-testid": testid ? `${testid}-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_runtime8.jsx)("div", { className: (0, import_clsx9.default)("size-6", "flex items-center justify-center"), children: selected ? indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "question_mark" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "close" }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              className: (0, import_clsx9.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_runtime8.jsx)("span", { className: "text-icon-primary-normal  contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "question_mark" }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "remove", className: "pointer-events-none" }) }) : readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-success-400 contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check" }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-on-action-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "check", className: "pointer-events-none" }) }) : readOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "close" }) })
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          Paragraph,
-          {
-            id: id ? `${id}-label` : void 0,
-            testid: testid ? `${testid}-label` : void 0,
-            as: "span",
-            padded: true,
-            className: (0, import_clsx9.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_clsx10 = __toESM(require("clsx"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Subheader = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "span",
-    align,
-    color,
-    tall,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "align",
-    "color",
-    "tall",
-    "id",
-    "testid"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Element,
-    __spreadProps(__spreadValues({
-      id,
-      "data-testid": testid,
-      className: (0, import_clsx10.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/utils/formatting.tsx
-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/HorizontalDivider.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function HorizontalDivider({ id, testid, hideOnMobile }) {
-  const hideOnMobileStyle = (0, import_clsx11.default)(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, "data-testid": testid, className: (0, import_clsx11.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
-}
-
-// src/components/Spinner.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Spinner = ({ size = "small", testid }) => {
-  const dimension = size === "large" ? 48 : 24;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    "svg",
-    {
-      "data-testid": testid,
-      width: dimension,
-      height: dimension,
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "#1D1E1E",
-      className: "animate-spin",
-      "aria-label": "Loading",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "0s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.875s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.75s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.625s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.5s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.375s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.25s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "animate",
-          {
-            attributeName: "opacity",
-            begin: "-0.125s",
-            dur: "1s",
-            from: "1",
-            to: "0",
-            repeatCount: "indefinite"
-          }
-        ) })
-      ]
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// src/components/WorldpayIframe.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function WorldpayIframe({ url }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("iframe", { src: url, style: { width: "100%", height: "100%", flex: 1 } });
-}
-
-// src/components/SelectPaymentMethod.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function SelectPaymentMethod(props) {
-  const {
-    amountToPay,
-    selectedMethod,
-    onSelectMethod,
-    selectedCredits,
-    allCredits,
-    allowedMethods,
-    selectedACHBankGuid,
-    setSelectedACHBankGuid,
-    customerBanks,
-    onPay,
-    isPayLoading,
-    withCredits = false,
-    isLoadingCCiframe,
-    cardPaymentUrl,
-    testid
-  } = props;
-  const payAllWithCredits = withCredits && amountToPay <= 0;
-  (0, import_react.useEffect)(() => {
-    if (payAllWithCredits) {
-      onSelectMethod("CreditsOnly");
-    } else {
-      onSelectMethod(null);
-    }
-  }, [onSelectMethod, payAllWithCredits]);
-  function handleToggle(method) {
-    onSelectMethod(method);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Stack, { sizing: "layout-group", width: "full", minWidth: 400, children: [
-    !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      CreditsSelector,
-      {
-        testid: testid ? `${testid}-credit-selector` : void 0,
-        selectedCredits: selectedCredits || [],
-        allCredits: allCredits || [],
-        setSelectedCredits: props.setSelectedCredits || (() => {
-        })
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      ACHSelector,
-      {
-        testid: testid ? `${testid}-ach-selector` : void 0,
-        selectedMethod,
-        handleToggle,
-        selectedBankGuid: selectedACHBankGuid || null,
-        setSelectedBankGuid: setSelectedACHBankGuid || (() => {
-        }),
-        customerBanks: customerBanks || [],
-        onPay,
-        isPayLoading: isPayLoading || false,
-        disabled: payAllWithCredits || !amountToPay
-      }
-    ),
-    (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      Accordion,
-      {
-        testid: testid ? `${testid}-cc-payment` : void 0,
-        isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
-        title: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Radio,
-          {
-            testid: testid ? `${testid}-cc-payment-radio` : void 0,
-            label: "Pay by Credit/Debit Card",
-            checked: !payAllWithCredits && selectedMethod === "CCPayment",
-            onChange: (e) => e.stopPropagation(),
-            disabled: payAllWithCredits || !amountToPay
-          }
-        ),
-        onClick: () => {
-          if (payAllWithCredits || !amountToPay) return;
-          handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment");
-        },
-        disabled: payAllWithCredits || !amountToPay,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            items: "center",
-            justify: "center",
-            style: {
-              flex: 1
-            },
-            minHeight: 245,
-            children: !isLoadingCCiframe && cardPaymentUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WorldpayIframe, { url: cardPaymentUrl }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {})
-          }
-        )
-      }
-    ),
-    selectedMethod === "ACHPayment" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      Button,
-      {
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading || amountToPay <= 0,
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      Button,
-      {
-        testid: testid ? `${testid}-submit-payment-button` : void 0,
-        block: true,
-        onClick: onPay,
-        disabled: isPayLoading,
-        children: isPayLoading ? "Processing..." : "Submit Payment"
-      }
-    )
-  ] });
-}
-function ACHSelector(props) {
-  const {
-    selectedMethod,
-    handleToggle,
-    selectedBankGuid,
-    setSelectedBankGuid,
-    customerBanks,
-    disabled,
-    testid
-  } = props;
-  function handleBankSelect(e, bankGuid) {
-    if (disabled) return;
-    e.stopPropagation();
-    setSelectedBankGuid(bankGuid);
-    handleToggle("ACHPayment");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    Card,
-    {
-      testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
-      onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
-      selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Radio,
-        {
-          label: `Pay by ${bank.AccountDisplayString}`,
-          checked: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
-          disabled,
-          onChange: (e) => e.stopPropagation()
-        }
-      )
-    },
-    bank.CustBankGUID
-  )) });
-}
-function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
-  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
-  const handleCreditSelect = (credit) => {
-    if (setSelectedCredits) {
-      setSelectedCredits(
-        (prev) => prev.includes(credit) ? prev.filter((c) => c !== credit) : [...prev, credit]
-      );
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    Accordion,
-    {
-      isOpen,
-      title: "Available Credits",
-      onClick: () => setIsOpen((prev) => !prev),
-      testid,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HorizontalDivider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Stack,
-          {
-            sizing: "layout-group",
-            width: "full",
-            overflowY: "auto",
-            maxHeight: 300,
-            children: allCredits.map((credits) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              Stack,
-              {
-                horizontal: true,
-                justify: "between",
-                items: "center",
-                sizing: "layout-group",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    Stack,
-                    {
-                      sizing: "layout-group",
-                      onClick: () => handleCreditSelect(credits),
-                      paddingY: true,
-                      flexGrow: 1,
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        Checkbox,
-                        {
-                          testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
-                          label: credits.InvoiceNumber,
-                          checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
-                          onChange: () => handleCreditSelect(credits)
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                    Subheader,
-                    {
-                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0,
-                      className: " pr-desktop-component-padding",
-                      children: [
-                        "$",
-                        formatCurrencyDisplay(
-                          formatDecimalValue(Math.abs(credits.InvoiceBalanceDue), 2)
-                        )
-                      ]
-                    }
-                  )
-                ]
-              },
-              credits.AROpenGUID
-            ))
-          }
-        ) })
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  SelectPaymentMethod
-});