@xyo-network/react-form-credit-card 7.0.0 → 7.0.1

package/dist/browser/index.mjs

@@ -1,9 +1,3 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/components/controls/card/cvv/Cvv.tsx
-import React3 from "react";
-
 // src/controls/CreditCardCvv.ts
 import { assertEx } from "@xylabs/assert";
 import { FormControlBase } from "@xyo-network/react-form-group";
@@ -13,14 +7,10 @@ import valid from "card-validator";
 function unmask(value) {
   return value.replaceAll(/\D/g, "");
 }
-__name(unmask, "unmask");
 
 // src/controls/CreditCardCvv.ts
 var CONTROL_NAME = "cvv";
 var CreditCardCvvFormControl = class extends FormControlBase {
-  static {
-    __name(this, "CreditCardCvvFormControl");
-  }
   invalidMessage = "Your card cvc is invalid.";
   pattern = /^\d{0,4}$/;
   patternStrict = /^\d{1,4}$/;
@@ -39,10 +29,7 @@ var CreditCardCvvFormControl = class extends FormControlBase {
   constructor() {
     super();
     super.setName(CONTROL_NAME);
-    this.setSerializeSettings({
-      sensitive: true,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: true, serializable: true });
   }
   get cardNumberFormControl() {
     return assertEx(this._cardNumberFormControl, () => "Card number form control is not set");
@@ -94,9 +81,6 @@ import { FormControlBase as FormControlBase2 } from "@xyo-network/react-form-gro
 import valid2 from "card-validator";
 var CONTROL_NAME2 = "expiration";
 var CreditCardExpirationFormControl = class extends FormControlBase2 {
-  static {
-    __name(this, "CreditCardExpirationFormControl");
-  }
   invalidMessage = "Card Expiration is invalid";
   pattern = /^\d{0,4}$/;
   patternStrict = /^\d{1,4}$/;
@@ -115,10 +99,7 @@ var CreditCardExpirationFormControl = class extends FormControlBase2 {
   constructor() {
     super();
     super.setName(CONTROL_NAME2);
-    this.setSerializeSettings({
-      sensitive: true,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: true, serializable: true });
   }
   get cardNumberFormControl() {
     return assertEx2(this._cardNumberFormControl, () => "Card number form control is not set");
@@ -174,9 +155,6 @@ import { FormControlBase as FormControlBase3 } from "@xyo-network/react-form-gro
 import valid3 from "card-validator";
 var CONTROL_NAME3 = "cardNumber2";
 var CreditCardNumberFormControl = class extends FormControlBase3 {
-  static {
-    __name(this, "CreditCardNumberFormControl");
-  }
   creditCardType = "";
   invalidMessage = "Card Number is invalid";
   pattern = /^(\d+)?$/;
@@ -195,10 +173,7 @@ var CreditCardNumberFormControl = class extends FormControlBase3 {
   constructor() {
     super();
     super.setName(CONTROL_NAME3);
-    this.setSerializeSettings({
-      sensitive: true,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: true, serializable: true });
   }
   blurError(value) {
     const unmasked = unmask(value);
@@ -270,17 +245,14 @@ var CreditCardNumberFormControl = class extends FormControlBase3 {
     const card = numberValidation.card;
     if (card) {
       const max = card.lengths.includes(16) ? 16 : card.lengths[0];
-      const gaps = [
-        ...card.gaps,
-        max
-      ];
+      const gaps = [...card.gaps, max];
       const newVal = gaps.map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap)).filter(Boolean).join(" ");
       return newVal;
     }
     return value;
   }
-  onCreditCardTypeChange = /* @__PURE__ */ __name(() => {
-  }, "onCreditCardTypeChange");
+  onCreditCardTypeChange = () => {
+  };
   setCreditCardType(type) {
     this.creditCardType = type;
     this.onCreditCardTypeChange(type);
@@ -296,9 +268,6 @@ var CreditCardNumberFormControl = class extends FormControlBase3 {
 import { FormControlBase as FormControlBase4 } from "@xyo-network/react-form-group";
 var CONTROL_NAME4 = "Email";
 var CreditCardEmailFormControl = class extends FormControlBase4 {
-  static {
-    __name(this, "CreditCardEmailFormControl");
-  }
   invalidMessage = "Your email is invalid.";
   pattern = /^.*$/;
   patternStrict = /^([\w+.\-])+@(([\dA-Za-z-])+\.)+([\dA-Za-z]{2,4})+$/;
@@ -314,10 +283,7 @@ var CreditCardEmailFormControl = class extends FormControlBase4 {
   constructor() {
     super();
     super.setName(CONTROL_NAME4);
-    this.setSerializeSettings({
-      sensitive: false,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: false, serializable: true });
   }
   blurError(value) {
     const match = RegExp(this.patternStrict).exec(value);
@@ -340,18 +306,13 @@ var CreditCardEmailFormControl = class extends FormControlBase4 {
 // src/controls/Name.ts
 import { FormControlBase as FormControlBase5 } from "@xyo-network/react-form-group";
 var NameFormControl = class extends FormControlBase5 {
-  static {
-    __name(this, "NameFormControl");
-  }
-  nameLabel;
   required = true;
+  nameLabel;
   constructor(nameLabel, autoCompleteLabel, placeHolder) {
-    super(), this.nameLabel = nameLabel;
+    super();
+    this.nameLabel = nameLabel;
     super.setName(nameLabel);
-    this.setSerializeSettings({
-      sensitive: false,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: false, serializable: true });
     this.invalidMessage = `${nameLabel} name is missing.`;
     this.props = {
       autoComplete: autoCompleteLabel,
@@ -379,9 +340,6 @@ import { FormControlBase as FormControlBase6 } from "@xyo-network/react-form-gro
 import valid4 from "card-validator";
 var CONTROL_NAME5 = "Zip";
 var CreditCardZipFormControl = class extends FormControlBase6 {
-  static {
-    __name(this, "CreditCardZipFormControl");
-  }
   invalidMessage = "Your zip code is invalid.";
   props = {
     autoComplete: "postal-code",
@@ -396,10 +354,7 @@ var CreditCardZipFormControl = class extends FormControlBase6 {
   constructor() {
     super();
     super.setName(CONTROL_NAME5);
-    this.setSerializeSettings({
-      sensitive: true,
-      serializable: true
-    });
+    this.setSerializeSettings({ sensitive: true, serializable: true });
   }
   blurError(value) {
     const postalCodeValidation = valid4.postalCode(value);
@@ -428,43 +383,46 @@ var CreditCardZipFormControl = class extends FormControlBase6 {
 // src/components/controls/card/FormControlTextField.tsx
 import { FormControl as MuiFormControl, TextField } from "@mui/material";
 import { LabeledTextFieldWrapper } from "@xyo-network/react-shared";
-import React from "react";
-var FormControlTextField = /* @__PURE__ */ __name(({ ref, formControl, formControlError, fieldLabel = "", ...props }) => {
+import { jsx } from "react/jsx-runtime";
+var FormControlTextField = ({
+  ref,
+  formControl,
+  formControlError,
+  fieldLabel = "",
+  ...props
+}) => {
   const { name } = formControl?.props ?? {};
-  const handleChange = /* @__PURE__ */ __name((event) => {
+  const handleChange = (event) => {
     formControl?.setValue(event.target.value);
-  }, "handleChange");
-  const handleBlur = /* @__PURE__ */ __name((event) => {
+  };
+  const handleBlur = (event) => {
     formControl?.blurError?.(event.target.value);
     formControl?.setTouched(true);
-  }, "handleBlur");
-  return /* @__PURE__ */ React.createElement(MuiFormControl, {
-    fullWidth: true
-  }, /* @__PURE__ */ React.createElement(LabeledTextFieldWrapper, {
-    label: fieldLabel
-  }, /* @__PURE__ */ React.createElement("label", {
-    htmlFor: name
-  }, /* @__PURE__ */ React.createElement(TextField, {
-    error: !!formControlError,
-    helperText: formControlError || " ",
-    fullWidth: true,
-    hiddenLabel: true,
-    name,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: /* @__PURE__ */ __name((event) => {
-      const selectionEnd = event.target.selectionEnd;
-      if (selectionEnd && formControl) {
-        formControl.cursorPosition.previous = selectionEnd;
-      }
-    }, "onKeyDown"),
-    ref,
-    required: formControl?.required,
-    size: "small",
-    variant: "filled",
-    ...props
-  }))));
-}, "FormControlTextField");
+  };
+  return /* @__PURE__ */ jsx(MuiFormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(LabeledTextFieldWrapper, { label: fieldLabel, children: /* @__PURE__ */ jsx("label", { htmlFor: name, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      error: !!formControlError,
+      helperText: formControlError || " ",
+      fullWidth: true,
+      hiddenLabel: true,
+      name,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: (event) => {
+        const selectionEnd = event.target.selectionEnd;
+        if (selectionEnd && formControl) {
+          formControl.cursorPosition.previous = selectionEnd;
+        }
+      },
+      ref,
+      required: formControl?.required,
+      size: "small",
+      variant: "filled",
+      ...props
+    }
+  ) }) }) });
+};
 FormControlTextField.displayName = "FormControlTextField";
 
 // src/components/controls/card/cvv/use.ts
@@ -476,36 +434,42 @@ var FormGroupCreditCardContext = createContextEx();
 
 // src/context/FormGroupCreditCardProvider.tsx
 import { FormGroup } from "@xyo-network/react-form-group";
-import React2, { useMemo } from "react";
-var FormGroupCreditCardProvider = /* @__PURE__ */ __name(({ children, params, ...props }) => {
+import { useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormGroupCreditCardProvider = ({
+  children,
+  params,
+  ...props
+}) => {
   const formGroup = useMemo(() => {
     const formGroup2 = new FormGroup(params);
     return formGroup2;
-  }, [
-    params
-  ]);
-  const value = useMemo(() => ({
-    formGroup,
-    provided: true
-  }), [
-    formGroup
-  ]);
-  return /* @__PURE__ */ React2.createElement(FormGroupCreditCardContext, {
-    value,
-    ...props
-  }, children);
-}, "FormGroupCreditCardProvider");
+  }, [params]);
+  const value = useMemo(() => ({ formGroup, provided: true }), [formGroup]);
+  return /* @__PURE__ */ jsx2(
+    FormGroupCreditCardContext,
+    {
+      value,
+      ...props,
+      children
+    }
+  );
+};
 
 // src/context/useFormGroupWithCreditCard.tsx
 import { useContextEx } from "@xylabs/react-shared";
-var useFormGroupWithCreditCardInput = /* @__PURE__ */ __name((required = false) => {
+var useFormGroupWithCreditCardInput = (required = false) => {
   return useContextEx(FormGroupCreditCardContext, "FormGroupCreditCard", required);
-}, "useFormGroupWithCreditCardInput");
+};
 
 // src/components/controls/card/useCreditCardFormControl.tsx
-import { useMemo as useMemo2, useRef, useState } from "react";
+import {
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
 var STABLE_DEFAULT_ARGS = [];
-var useCreditCardFormControl = /* @__PURE__ */ __name((formControlName, Control, args = STABLE_DEFAULT_ARGS) => {
+var useCreditCardFormControl = (formControlName, Control, args = STABLE_DEFAULT_ARGS) => {
   const [error, setError] = useState("");
   const [value, setValue] = useState("");
   const inputRef = useRef(null);
@@ -518,23 +482,23 @@ var useCreditCardFormControl = /* @__PURE__ */ __name((formControlName, Control,
       if (formControlName) formGroup?.registerControl(formControlName, control);
       return control;
     }
-  }, [
-    Control,
-    args,
-    formControlName,
-    formGroup
-  ]);
+  }, [Control, args, formControlName, formGroup]);
   return {
     creditCardFormControl,
     error,
     inputRef,
     value
   };
-}, "useCreditCardFormControl");
+};
 
 // src/components/controls/card/cvv/use.ts
-var useCreditCardCvvFormControl = /* @__PURE__ */ __name((formControlName, cardNumberControlName = "cardNumber", control) => {
-  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
+var useCreditCardCvvFormControl = (formControlName, cardNumberControlName = "cardNumber", control) => {
+  const {
+    creditCardFormControl,
+    error,
+    value,
+    inputRef
+  } = useCreditCardFormControl(formControlName, control);
   const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
   const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName);
   useEffect(() => {
@@ -546,138 +510,211 @@ var useCreditCardCvvFormControl = /* @__PURE__ */ __name((formControlName, cardN
       }
       castControl.setCardNumberFormControl(creditCardNumberFormControl);
     }
-  }, [
-    creditCardFormControl,
-    creditCardNumberFormControl
-  ]);
+  }, [creditCardFormControl, creditCardNumberFormControl]);
   return {
     creditCardFormControl,
     error,
     inputRef,
     value
   };
-}, "useCreditCardCvvFormControl");
+};
 
 // src/components/controls/card/cvv/Cvv.tsx
-var CreditCardCvvWithFormControl = /* @__PURE__ */ __name(({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React3.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    slotProps: {
-      htmlInput: {
-        "aria-label": `${fieldLabel} number on the back of your card`,
-        autoComplete,
-        autoCorrect,
-        id,
-        name,
-        spellCheck
-      }
-    },
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CreditCardCvvWithFormControl = ({
+  formControlName = "cvc",
+  fieldLabel = "CVC",
+  ...props
+}) => {
+  const {
+    creditCardFormControl,
+    error,
     inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardCvvWithFormControl");
+    value
+  } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
+    inputMode,
+    name,
+    spellCheck,
+    ...cvcProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx3(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      slotProps: {
+        htmlInput: {
+          "aria-label": `${fieldLabel} number on the back of your card`,
+          autoComplete,
+          autoCorrect,
+          id,
+          name,
+          spellCheck
+        }
+      },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
 
 // src/components/controls/card/Email.tsx
-import React4 from "react";
-var CreditCardEmailWithFormControl = /* @__PURE__ */ __name(({ formControlName = "emailAddress", fieldLabel = "Email", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React4.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    slotProps: {
-      htmlInput: {
-        "aria-label": `${fieldLabel} for your purchase`,
-        autoComplete,
-        autoCorrect,
-        id,
-        name,
-        spellCheck
-      }
-    },
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CreditCardEmailWithFormControl = ({
+  formControlName = "emailAddress",
+  fieldLabel = "Email",
+  ...props
+}) => {
+  const {
+    creditCardFormControl,
+    error,
     inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardEmailWithFormControl");
+    value
+  } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
+    inputMode,
+    name,
+    spellCheck,
+    ...cvcProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx4(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      slotProps: {
+        htmlInput: {
+          "aria-label": `${fieldLabel} for your purchase`,
+          autoComplete,
+          autoCorrect,
+          id,
+          name,
+          spellCheck
+        }
+      },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
 
 // src/components/controls/card/Expiration.tsx
-import React5 from "react";
-var CreditCardExpirationWithFormControl = /* @__PURE__ */ __name(({ formControlName = "expiration", fieldLabel = "Expiration", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React5.createElement(FormControlTextField, {
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CreditCardExpirationWithFormControl = ({
+  formControlName = "expiration",
+  fieldLabel = "Expiration",
+  ...props
+}) => {
+  const {
+    creditCardFormControl,
+    error,
     inputRef,
-    formControl: creditCardFormControl,
-    fieldLabel,
-    formControlError: error,
+    value
+  } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
     inputMode,
-    slotProps: {
-      htmlInput: {
-        "aria-label": `${fieldLabel} of the card`,
-        autoComplete,
-        autoCorrect,
-        id,
-        name,
-        spellCheck
-      }
-    },
-    value,
-    ...expirationProps,
-    ...props
-  });
-}, "CreditCardExpirationWithFormControl");
+    name,
+    spellCheck,
+    ...expirationProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx5(
+    FormControlTextField,
+    {
+      inputRef,
+      formControl: creditCardFormControl,
+      fieldLabel,
+      formControlError: error,
+      inputMode,
+      slotProps: {
+        htmlInput: {
+          "aria-label": `${fieldLabel} of the card`,
+          autoComplete,
+          autoCorrect,
+          id,
+          name,
+          spellCheck
+        }
+      },
+      value,
+      ...expirationProps,
+      ...props
+    }
+  );
+};
 
 // src/components/controls/card/Name.tsx
-import React6, { useMemo as useMemo3 } from "react";
-var NameWithFormControl = /* @__PURE__ */ __name(({ autoCompleteLabel, fieldLabel = "Name", formControlName, placeholder, tabIndex, ...props }) => {
-  const args = useMemo3(() => [
-    fieldLabel,
-    autoCompleteLabel,
-    placeholder ?? ""
-  ], [
-    autoCompleteLabel,
-    fieldLabel,
-    placeholder
-  ]);
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React6.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    slotProps: {
-      htmlInput: {
-        "aria-label": `${fieldLabel} name on your card`,
-        autoComplete,
-        autoCorrect,
-        id,
-        name,
-        spellCheck,
-        tabIndex
-      }
-    },
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var NameWithFormControl = ({
+  autoCompleteLabel,
+  fieldLabel = "Name",
+  formControlName,
+  placeholder,
+  tabIndex,
+  ...props
+}) => {
+  const args = useMemo3(() => [fieldLabel, autoCompleteLabel, placeholder ?? ""], [autoCompleteLabel, fieldLabel, placeholder]);
+  const {
+    creditCardFormControl,
+    error,
     inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "NameWithFormControl");
+    value
+  } = useCreditCardFormControl(formControlName, NameFormControl, args);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
+    inputMode,
+    name,
+    spellCheck,
+    ...cvcProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx6(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      slotProps: {
+        htmlInput: {
+          "aria-label": `${fieldLabel} name on your card`,
+          autoComplete,
+          autoCorrect,
+          id,
+          name,
+          spellCheck,
+          tabIndex
+        }
+      },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
 
 // src/components/controls/card/number/Number.tsx
 import { InputAdornment } from "@mui/material";
-import React7 from "react";
 
 // src/components/img/american-express.svg
 var american_express_default = '<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" \n	 viewBox="0 0 512 512" xml:space="preserve">\n<path style="fill:#306FC5;" d="M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717\n	c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z"/>\n<path style="opacity:0.15;fill:#202121;enable-background:new    ;" d="M21.517,402.281V109.717\n	c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52\n	C35.07,432.549,21.517,418.997,21.517,402.281z"/>\n<g>\n	<polygon style="fill:#FFFFFF;" points="74.59,220.748 89.888,220.748 82.241,201.278 	"/>\n	<polygon style="fill:#FFFFFF;" points="155.946,286.107 155.946,295.148 181.675,295.148 181.675,304.885 155.946,304.885 \n		155.946,315.318 184.455,315.318 197.666,300.712 185.151,286.107 	"/>\n	<polygon style="fill:#FFFFFF;" points="356.898,201.278 348.553,220.748 364.548,220.748 	"/>\n	<polygon style="fill:#FFFFFF;" points="230.348,320.875 230.348,281.241 212.268,300.712 	"/>\n	<path style="fill:#FFFFFF;" d="M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299\n		C261.637,298.624,264.42,296.539,264.42,292.368z"/>\n	<path style="fill:#FFFFFF;" d="M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868\n		c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z"/>\n	<path style="fill:#FFFFFF;" d="M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502\n		c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384\n		l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444\n		l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965\n		h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123\n		h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z M177.501,241.609h-6.955\n		h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43\n		H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306\n		l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738\n		h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042\n		c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197\n		c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565\n		c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818\n		v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829\n		C270.676,218.662,272.996,219.129,275.076,221.294z M298.491,241.609h-11.822v-48.675h11.822V241.609z M434.083,241.609h-15.3\n		l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211\n		c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472\n		c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783\n		c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243\n		h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609\n		L434.083,241.609z"/>\n	<path style="fill:#FFFFFF;" d="M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244\n		c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367\n		c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413\n		l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z"/>\n	<path style="fill:#FFFFFF;" d="M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0\n		c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081\n		c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431\n		l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953\n		v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394\n		h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478\n		c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039\n		C475.087,312.043,475.105,311.598,475.105,311.144z M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299\n		l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852\n		c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z\n		 M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739\n		c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084\n		c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z\n		 M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z M402.791,325.05h-22.252\n		v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475\n		c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819\n		h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473\n		c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43\n		C420.869,320.179,414.611,325.05,402.791,325.05z M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245\n		c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475\n		c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352\n		c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696\n		c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565\n		c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495\n		C466.761,313.925,465.37,317.401,462.59,320.179z"/>\n</g>\n</svg>';
@@ -693,28 +730,21 @@ var visa_default = '<svg width="800px" height="800px" viewBox="0 -140 780 780" e
 
 // src/components/controls/card/Options.ts
 var CreditCardData = {
-  amex: {
-    icon: american_express_default,
-    name: "American Express"
-  },
-  discover: {
-    icon: discover_default,
-    name: "Discover"
-  },
-  mastercard: {
-    icon: mastercard_default,
-    name: "Mastercard"
-  },
-  visa: {
-    icon: visa_default,
-    name: "Visa"
-  }
+  amex: { icon: american_express_default, name: "American Express" },
+  discover: { icon: discover_default, name: "Discover" },
+  mastercard: { icon: mastercard_default, name: "Mastercard" },
+  visa: { icon: visa_default, name: "Visa" }
 };
 
 // src/components/controls/card/number/use.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
-var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, control) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
+var useCreditCardNumberFormControl = (formControlName, control) => {
+  const {
+    creditCardFormControl,
+    error,
+    inputRef,
+    value
+  } = useCreditCardFormControl(formControlName, control);
   const [type, setType] = useState2("");
   useEffect2(() => {
     if (creditCardFormControl) {
@@ -730,10 +760,7 @@ var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, co
         }
       };
     }
-  }, [
-    creditCardFormControl,
-    inputRef
-  ]);
+  }, [creditCardFormControl, inputRef]);
   return {
     creditCardFormControl,
     error,
@@ -741,84 +768,114 @@ var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, co
     type,
     value
   };
-}, "useCreditCardNumberFormControl");
+};
 
 // src/components/controls/card/number/Number.tsx
-var CreditCardNumberWithFormControl = /* @__PURE__ */ __name(({ fieldLabel = "Card Number", formControlName = "cardNumber", ...props }) => {
-  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React7.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CreditCardNumberWithFormControl = ({
+  fieldLabel = "Card Number",
+  formControlName = "cardNumber",
+  ...props
+}) => {
+  const {
+    creditCardFormControl,
+    error,
+    inputRef,
+    type,
+    value
+  } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
+    inputMode,
+    name,
+    spellCheck,
+    ...cardProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx7(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputRef,
+      inputMode,
+      slotProps: {
+        htmlInput: {
+          "aria-label": fieldLabel,
+          autoComplete,
+          autoCorrect,
+          id,
+          inputMode,
+          name,
+          spellCheck
+        },
+        input: {
+          startAdornment: type.length > 0 ? /* @__PURE__ */ jsx7(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx7("img", { height: "30px", width: "40px", src: CreditCardData[type].icon }) }) : null
+        }
+      },
+      value,
+      ...cardProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Zip.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CreditCardZipWithFormControl = ({
+  formControlName = "zip",
+  fieldLabel = "Zip",
+  ...props
+}) => {
+  const {
+    creditCardFormControl,
+    error,
     inputRef,
+    value
+  } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
+  const {
+    autoComplete,
+    autoCorrect,
+    id,
     inputMode,
-    slotProps: {
-      htmlInput: {
-        "aria-label": fieldLabel,
+    name,
+    spellCheck,
+    ...cvcProps
+  } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ jsx8(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: {
+        "aria-label": `${fieldLabel} code for your card`,
         autoComplete,
         autoCorrect,
         id,
-        inputMode,
         name,
         spellCheck
       },
-      input: {
-        startAdornment: type.length > 0 ? /* @__PURE__ */ React7.createElement(InputAdornment, {
-          position: "start"
-        }, /* @__PURE__ */ React7.createElement("img", {
-          height: "30px",
-          width: "40px",
-          src: CreditCardData[type].icon
-        })) : null
-      }
-    },
-    value,
-    ...cardProps,
-    ...props
-  });
-}, "CreditCardNumberWithFormControl");
-
-// src/components/controls/card/Zip.tsx
-import React8 from "react";
-var CreditCardZipWithFormControl = /* @__PURE__ */ __name(({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ React8.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} code for your card`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck
-    },
-    inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardZipWithFormControl");
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
 
 // src/components/form/Form.tsx
 import { Stack as Stack2 } from "@mui/material";
 import { ErrorRender } from "@xylabs/react-error";
 import { FlexCol } from "@xylabs/react-flexbox";
-import React10, { useState as useState3 } from "react";
+import { useState as useState3 } from "react";
 
 // src/components/support/Fields.ts
-var NameFields = [
-  "firstName",
-  "lastName"
-];
-var NameLabels = [
-  "First",
-  "Last"
-];
+var NameFields = ["firstName", "lastName"];
+var NameLabels = ["First", "Last"];
 
 // src/components/support/validateCreditCardInputs.ts
 import { assertEx as assertEx3 } from "@xylabs/assert";
@@ -829,7 +886,7 @@ var CreditCardInputSchema = "network.xyo.credit.card.input";
 var isCreditCardInput = isPayloadOfSchemaType(CreditCardInputSchema);
 
 // src/components/support/validateCreditCardInputs.ts
-var validateCreditCardInputs = /* @__PURE__ */ __name((values) => {
+var validateCreditCardInputs = (values) => {
   return {
     cardNumber: assertEx3(values.cardNumber, () => "card number is not a string"),
     cvc: assertEx3(values.cvc, () => "card cvc is not a string"),
@@ -841,92 +898,84 @@ var validateCreditCardInputs = /* @__PURE__ */ __name((values) => {
     timestamp: values.timestamp,
     zip: assertEx3(values.zip, () => "zip is not a string")
   };
-}, "validateCreditCardInputs");
+};
 
 // src/components/form/InputFieldsStack.tsx
 import { Stack } from "@mui/material";
-import React9 from "react";
-var InputFieldsStack = /* @__PURE__ */ __name((props) => {
+import { Fragment, jsx as jsx9, jsxs } from "react/jsx-runtime";
+var InputFieldsStack = (props) => {
   const { sx } = props;
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ React9.createElement(NameWithFormControl, {
-    autoCompleteLabel: "given-name",
-    fieldLabel: "First",
-    formControlName: "firstName",
-    placeholder: "Jerry"
-  }), /* @__PURE__ */ React9.createElement(NameWithFormControl, {
-    autoCompleteLabel: "family-name",
-    fieldLabel: "Last",
-    formControlName: "lastName",
-    placeholder: "Smith"
-  })), /* @__PURE__ */ React9.createElement(Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        lg: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ React9.createElement(Stack, {
-    width: {
-      lg: "50%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ React9.createElement(CreditCardNumberWithFormControl, null)), /* @__PURE__ */ React9.createElement(Stack, {
-    direction: {
-      lg: "row",
-      xs: "column"
-    },
-    gap: 2,
-    width: {
-      lg: "50%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ React9.createElement(CreditCardCvvWithFormControl, null), /* @__PURE__ */ React9.createElement(CreditCardExpirationWithFormControl, null))), /* @__PURE__ */ React9.createElement(Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ React9.createElement(Stack, {
-    width: {
-      md: "25%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ React9.createElement(CreditCardZipWithFormControl, null)), /* @__PURE__ */ React9.createElement(Stack, {
-    width: {
-      md: "75%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ React9.createElement(CreditCardEmailWithFormControl, null))));
-}, "InputFieldsStack");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 2,
+        sx: {
+          flexDirection: { md: "row", xs: "column" },
+          ...sx
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9(NameWithFormControl, { autoCompleteLabel: "given-name", fieldLabel: "First", formControlName: "firstName", placeholder: "Jerry" }),
+          /* @__PURE__ */ jsx9(NameWithFormControl, { autoCompleteLabel: "family-name", fieldLabel: "Last", formControlName: "lastName", placeholder: "Smith" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 2,
+        sx: {
+          flexDirection: { lg: "row", xs: "column" },
+          ...sx
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9(Stack, { width: { lg: "50%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardNumberWithFormControl, {}) }),
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: { lg: "row", xs: "column" },
+              gap: 2,
+              width: { lg: "50%", xs: "100%" },
+              children: [
+                /* @__PURE__ */ jsx9(CreditCardCvvWithFormControl, {}),
+                /* @__PURE__ */ jsx9(CreditCardExpirationWithFormControl, {})
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 2,
+        sx: {
+          flexDirection: { md: "row", xs: "column" },
+          ...sx
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9(Stack, { width: { md: "25%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardZipWithFormControl, {}) }),
+          /* @__PURE__ */ jsx9(Stack, { width: { md: "75%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardEmailWithFormControl, {}) })
+        ]
+      }
+    )
+  ] });
+};
 
 // src/components/form/useFormStorage.tsx
 import { usePromise } from "@xylabs/react-promise";
 import { StorageArchivist, StorageArchivistConfigSchema } from "@xyo-network/archivist-storage";
 import { ArchivistFormGroupStorage } from "@xyo-network/react-form-group";
 var STORAGE_NAME_SPACE = "credit-card-fields";
-var calculateTTL = /* @__PURE__ */ __name((months = 6) => {
+var calculateTTL = (months = 6) => {
   const MS_PER_DAY = 24 * 60 * 60 * 1e3;
   const DAYS_PER_MONTH = 30.44;
   return months * DAYS_PER_MONTH * MS_PER_DAY;
-}, "calculateTTL");
-var useFormStorage = /* @__PURE__ */ __name(() => {
+};
+var useFormStorage = () => {
   return usePromise(async () => {
     const localStorageArchivist = await StorageArchivist.create({
       account: "random",
@@ -954,13 +1003,22 @@ var useFormStorage = /* @__PURE__ */ __name(() => {
       ttlStorage: calculateTTL()
     };
   }, []);
-}, "useFormStorage");
+};
 
 // src/components/form/Form.tsx
-var CreditCardFormFlexbox = /* @__PURE__ */ __name(({ ConfirmationButton, displayErrors, onErrorDuringSubmit, onInvalidSubmit, onSuccessfulSubmit, onValidSubmit, ...props }) => {
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var CreditCardFormFlexbox = ({
+  ConfirmationButton,
+  displayErrors,
+  onErrorDuringSubmit,
+  onInvalidSubmit,
+  onSuccessfulSubmit,
+  onValidSubmit,
+  ...props
+}) => {
   const { formGroup } = useFormGroupWithCreditCardInput(true);
   const [error, setError] = useState3();
-  const handleConfirmPayment = /* @__PURE__ */ __name(async () => {
+  const handleConfirmPayment = async () => {
     try {
       if (!formGroup) {
         throw new Error("formGroup is not defined");
@@ -978,41 +1036,31 @@ var CreditCardFormFlexbox = /* @__PURE__ */ __name(({ ConfirmationButton, displa
       onErrorDuringSubmit?.(error2);
       if (displayErrors) setError(error2);
     }
-  }, "handleConfirmPayment");
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ErrorRender, {
-    error
-  }), /* @__PURE__ */ React10.createElement(FlexCol, {
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(ErrorRender, { error }),
+    /* @__PURE__ */ jsx10(
+      FlexCol,
+      {
+        sx: { flexDirection: { md: "row", xs: "column" } },
+        width: "100%",
+        gap: 2,
+        ...props,
+        children: /* @__PURE__ */ jsxs2(Stack2, { flexDirection: "column", sx: { width: "100%" }, gap: 2, children: [
+          /* @__PURE__ */ jsx10(InputFieldsStack, {}),
+          ConfirmationButton ? /* @__PURE__ */ jsx10(ConfirmationButton, { onClick: handleConfirmPayment, variant: "contained", sx: { alignSelf: "end" }, children: "Confirm Payment" }) : null
+        ] })
       }
-    },
-    width: "100%",
-    gap: 2,
-    ...props
-  }, /* @__PURE__ */ React10.createElement(Stack2, {
-    flexDirection: "column",
-    sx: {
-      width: "100%"
-    },
-    gap: 2
-  }, /* @__PURE__ */ React10.createElement(InputFieldsStack, null), ConfirmationButton ? /* @__PURE__ */ React10.createElement(ConfirmationButton, {
-    onClick: handleConfirmPayment,
-    variant: "contained",
-    sx: {
-      alignSelf: "end"
-    }
-  }, "Confirm Payment") : null)));
-}, "CreditCardFormFlexbox");
-var CreditCardFormFlexboxWithFormGroupProvider = /* @__PURE__ */ __name((props) => {
+    )
+  ] });
+};
+var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
   const [params, error] = useFormStorage();
-  return /* @__PURE__ */ React10.createElement(FormGroupCreditCardProvider, {
-    params
-  }, /* @__PURE__ */ React10.createElement(ErrorRender, {
-    error
-  }), /* @__PURE__ */ React10.createElement(CreditCardFormFlexbox, props));
-}, "CreditCardFormFlexboxWithFormGroupProvider");
+  return /* @__PURE__ */ jsxs2(FormGroupCreditCardProvider, { params, children: [
+    /* @__PURE__ */ jsx10(ErrorRender, { error }),
+    /* @__PURE__ */ jsx10(CreditCardFormFlexbox, { ...props })
+  ] });
+};
 export {
   CreditCardCvvFormControl,
   CreditCardCvvWithFormControl,