@xyo-network/react-form-credit-card 2.81.10 → 2.82.0

package/dist/neutral/index.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -67,6 +68,9 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/components/controls/card/cvv/Cvv.tsx
+var import_react5 = __toESM(require("react"), 1);
+
 // src/controls/CreditCardCvv.ts
 var import_assert = require("@xylabs/assert");
 var import_react_form_group = require("@xyo-network/react-form-group");
@@ -76,10 +80,14 @@ var import_card_validator = __toESM(require("card-validator"), 1);
 function unmask(value) {
   return value.replaceAll(/\D/g, "");
 }
+__name(unmask, "unmask");
 
 // src/controls/CreditCardCvv.ts
 var CONTROL_NAME = "cvv";
 var CreditCardCvvFormControl = class extends import_react_form_group.FormControlBase {
+  static {
+    __name(this, "CreditCardCvvFormControl");
+  }
   invalidMessage = "Your card cvc is invalid.";
   pattern = /^\d{0,4}$/;
   patternStrict = /^\d{1,4}$/;
@@ -98,7 +106,10 @@ var CreditCardCvvFormControl = class extends import_react_form_group.FormControl
   constructor() {
     super();
     super.setName(CONTROL_NAME);
-    this.setSerializeSettings({ sensitive: true, serializable: true });
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
   }
   get cardNumberFormControl() {
     return (0, import_assert.assertEx)(this._cardNumberFormControl, () => "Card number form control is not set");
@@ -150,6 +161,9 @@ var import_react_form_group2 = require("@xyo-network/react-form-group");
 var import_card_validator2 = __toESM(require("card-validator"), 1);
 var CONTROL_NAME2 = "expiration";
 var CreditCardExpirationFormControl = class extends import_react_form_group2.FormControlBase {
+  static {
+    __name(this, "CreditCardExpirationFormControl");
+  }
   invalidMessage = "Card Expiration is invalid";
   pattern = /^\d{0,4}$/;
   patternStrict = /^\d{1,4}$/;
@@ -168,7 +182,10 @@ var CreditCardExpirationFormControl = class extends import_react_form_group2.For
   constructor() {
     super();
     super.setName(CONTROL_NAME2);
-    this.setSerializeSettings({ sensitive: true, serializable: true });
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
   }
   get cardNumberFormControl() {
     return (0, import_assert2.assertEx)(this._cardNumberFormControl, () => "Card number form control is not set");
@@ -224,6 +241,9 @@ var import_react_form_group3 = require("@xyo-network/react-form-group");
 var import_card_validator3 = __toESM(require("card-validator"), 1);
 var CONTROL_NAME3 = "cardNumber2";
 var CreditCardNumberFormControl = class extends import_react_form_group3.FormControlBase {
+  static {
+    __name(this, "CreditCardNumberFormControl");
+  }
   creditCardType = "";
   invalidMessage = "Card Number is invalid";
   pattern = /^(\d+)?$/;
@@ -242,7 +262,10 @@ var CreditCardNumberFormControl = class extends import_react_form_group3.FormCon
   constructor() {
     super();
     super.setName(CONTROL_NAME3);
-    this.setSerializeSettings({ sensitive: true, serializable: true });
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
   }
   blurError(value) {
     const unmasked = unmask(value);
@@ -315,14 +338,17 @@ var CreditCardNumberFormControl = class extends import_react_form_group3.FormCon
     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 = () => {
-  };
+  onCreditCardTypeChange = /* @__PURE__ */ __name(() => {
+  }, "onCreditCardTypeChange");
   setCreditCardType(type) {
     this.creditCardType = type;
     this.onCreditCardTypeChange(type);
@@ -338,6 +364,9 @@ var CreditCardNumberFormControl = class extends import_react_form_group3.FormCon
 var import_react_form_group4 = require("@xyo-network/react-form-group");
 var CONTROL_NAME4 = "Email";
 var CreditCardEmailFormControl = class extends import_react_form_group4.FormControlBase {
+  static {
+    __name(this, "CreditCardEmailFormControl");
+  }
   invalidMessage = "Your email is invalid.";
   pattern = /^.*$/;
   patternStrict = /^([\w+.\-])+@(([\dA-Za-z-])+\.)+([\dA-Za-z]{2,4})+$/;
@@ -353,7 +382,10 @@ var CreditCardEmailFormControl = class extends import_react_form_group4.FormCont
   constructor() {
     super();
     super.setName(CONTROL_NAME4);
-    this.setSerializeSettings({ sensitive: false, serializable: true });
+    this.setSerializeSettings({
+      sensitive: false,
+      serializable: true
+    });
   }
   blurError(value) {
     const match = value.match(this.patternStrict);
@@ -376,11 +408,20 @@ var CreditCardEmailFormControl = class extends import_react_form_group4.FormCont
 // src/controls/Name.ts
 var import_react_form_group5 = require("@xyo-network/react-form-group");
 var NameFormControl = class extends import_react_form_group5.FormControlBase {
+  static {
+    __name(this, "NameFormControl");
+  }
+  nameLabel;
+  required;
   constructor(nameLabel, autoCompleteLabel, placeHolder) {
     super();
     this.nameLabel = nameLabel;
+    this.required = true;
     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,
@@ -391,7 +432,6 @@ var NameFormControl = class extends import_react_form_group5.FormControlBase {
       spellCheck: false
     };
   }
-  required = true;
   blurError(value) {
     if (value) {
       this.setErrorAndValidity("", "VALID");
@@ -409,6 +449,9 @@ var import_react_form_group6 = require("@xyo-network/react-form-group");
 var import_card_validator4 = __toESM(require("card-validator"), 1);
 var CONTROL_NAME5 = "Zip";
 var CreditCardZipFormControl = class extends import_react_form_group6.FormControlBase {
+  static {
+    __name(this, "CreditCardZipFormControl");
+  }
   invalidMessage = "Your zip code is invalid.";
   props = {
     autoComplete: "postal-code",
@@ -423,7 +466,10 @@ var CreditCardZipFormControl = class extends import_react_form_group6.FormContro
   constructor() {
     super();
     super.setName(CONTROL_NAME5);
-    this.setSerializeSettings({ sensitive: true, serializable: true });
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
   }
   blurError(value) {
     const postalCodeValidation = import_card_validator4.default.postalCode(value);
@@ -452,46 +498,46 @@ var CreditCardZipFormControl = class extends import_react_form_group6.FormContro
 // src/components/controls/card/FormControlTextField.tsx
 var import_material = require("@mui/material");
 var import_react_shared = require("@xyo-network/react-shared");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FormControlTextField = (0, import_react.forwardRef)(
-  ({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
-    const { name } = formControl?.props ?? {};
-    const handleChange = (event) => {
-      formControl?.setValue(event.target.value);
-    };
-    const handleBlur = (event) => {
-      formControl?.blurError?.(event.target.value);
-      formControl?.setTouched(true);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControl, { fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_shared.LabeledTextFieldWrapper, { label: fieldLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: name, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_material.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
+var import_react = __toESM(require("react"), 1);
+var FormControlTextField = /* @__PURE__ */ (0, import_react.forwardRef)(({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
+  const { name } = formControl?.props ?? {};
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    formControl?.setValue(event.target.value);
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    formControl?.blurError?.(event.target.value);
+    formControl?.setTouched(true);
+  }, "handleBlur");
+  return /* @__PURE__ */ import_react.default.createElement(import_material.FormControl, {
+    fullWidth: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_shared.LabeledTextFieldWrapper, {
+    label: fieldLabel
+  }, /* @__PURE__ */ import_react.default.createElement("label", {
+    htmlFor: name
+  }, /* @__PURE__ */ import_react.default.createElement(import_material.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.displayName = "FormControlTextField";
 
-// src/components/controls/card/cvv/use.tsx
+// src/components/controls/card/cvv/use.ts
 var import_react4 = require("react");
 
 // src/context/FormGroupCreditCardContext.ts
@@ -500,26 +546,36 @@ var FormGroupCreditCardContext = (0, import_react_shared2.createContextEx)();
 
 // src/context/FormGroupCreditCardProvider.tsx
 var import_react_form_group7 = require("@xyo-network/react-form-group");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormGroupCreditCardProvider = ({ children, params, ...props }) => {
+var import_react2 = __toESM(require("react"), 1);
+var FormGroupCreditCardProvider = /* @__PURE__ */ __name(({ children, params, ...props }) => {
   const formGroup = (0, import_react2.useMemo)(() => {
     const formGroup2 = new import_react_form_group7.FormGroup(params);
     return formGroup2;
-  }, [params]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormGroupCreditCardContext.Provider, { value: { formGroup, provided: true }, ...props, children });
-};
+  }, [
+    params
+  ]);
+  return (
+    // eslint-disable-next-line @eslint-react/no-unstable-context-value
+    /* @__PURE__ */ import_react2.default.createElement(FormGroupCreditCardContext.Provider, {
+      value: {
+        formGroup,
+        provided: true
+      },
+      ...props
+    }, children)
+  );
+}, "FormGroupCreditCardProvider");
 
 // src/context/useFormGroupWithCreditCard.tsx
 var import_react_shared3 = require("@xyo-network/react-shared");
-var useFormGroupWithCreditCardInput = (required = false) => {
+var useFormGroupWithCreditCardInput = /* @__PURE__ */ __name((required = false) => {
   return (0, import_react_shared3.useContextEx)(FormGroupCreditCardContext, "FormGroupCreditCard", required);
-};
+}, "useFormGroupWithCreditCardInput");
 
 // src/components/controls/card/useCreditCardFormControl.tsx
 var import_react3 = require("react");
 var StableDefaultArgs = [];
-var useCreditCardFormControl = (formControlName, Control, args = StableDefaultArgs) => {
+var useCreditCardFormControl = /* @__PURE__ */ __name((formControlName, Control, args = StableDefaultArgs) => {
   const [error, setError] = (0, import_react3.useState)("");
   const [value, setValue] = (0, import_react3.useState)("");
   const inputRef = (0, import_react3.useRef)(null);
@@ -532,12 +588,22 @@ var useCreditCardFormControl = (formControlName, Control, args = StableDefaultAr
       if (formControlName) formGroup?.registerControl(formControlName, control);
       return control;
     }
-  }, [Control, args, formControlName, formGroup]);
-  return { creditCardFormControl, error, inputRef, value };
-};
+  }, [
+    Control,
+    args,
+    formControlName,
+    formGroup
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    value
+  };
+}, "useCreditCardFormControl");
 
-// src/components/controls/card/cvv/use.tsx
-var useCreditCardCvvFormControl = (formControlName, cardNumberControlName = "cardNumber", control) => {
+// src/components/controls/card/cvv/use.ts
+var useCreditCardCvvFormControl = /* @__PURE__ */ __name((formControlName, cardNumberControlName = "cardNumber", control) => {
   const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
   const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
   const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName);
@@ -550,113 +616,130 @@ var useCreditCardCvvFormControl = (formControlName, cardNumberControlName = "car
       }
       castControl.setCardNumberFormControl(creditCardNumberFormControl);
     }
-  }, [creditCardFormControl, creditCardNumberFormControl]);
-  return { creditCardFormControl, error, inputRef, value };
-};
+  }, [
+    creditCardFormControl,
+    creditCardNumberFormControl
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    value
+  };
+}, "useCreditCardCvvFormControl");
 
 // src/components/controls/card/cvv/Cvv.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var CreditCardCvvWithFormControl = ({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
+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__ */ (0, import_jsx_runtime3.jsx)(
-    FormControlTextField,
-    {
-      fieldLabel,
-      formControl: creditCardFormControl,
-      formControlError: error,
-      inputMode,
-      inputProps: { "aria-label": `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck },
-      inputRef,
-      value,
-      ...cvcProps,
-      ...props
-    }
-  );
-};
+  return /* @__PURE__ */ import_react5.default.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} number on the back of your card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "CreditCardCvvWithFormControl");
 
 // src/components/controls/card/Email.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CreditCardEmailWithFormControl = ({
-  formControlName = "emailAddress",
-  fieldLabel = "Email",
-  ...props
-}) => {
+var import_react6 = __toESM(require("react"), 1);
+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__ */ (0, import_jsx_runtime4.jsx)(
-    FormControlTextField,
-    {
-      fieldLabel,
-      formControl: creditCardFormControl,
-      formControlError: error,
-      inputMode,
-      inputProps: { "aria-label": `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck },
-      inputRef,
-      value,
-      ...cvcProps,
-      ...props
-    }
-  );
-};
+  return /* @__PURE__ */ import_react6.default.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} for your purchase`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "CreditCardEmailWithFormControl");
 
 // src/components/controls/card/Expiration.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var CreditCardExpirationWithFormControl = ({
-  formControlName = "expiration",
-  fieldLabel = "Expiration",
-  ...props
-}) => {
+var import_react7 = __toESM(require("react"), 1);
+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__ */ (0, import_jsx_runtime5.jsx)(
-    FormControlTextField,
-    {
-      inputRef,
-      formControl: creditCardFormControl,
-      fieldLabel,
-      formControlError: error,
-      inputMode,
-      inputProps: { "aria-label": `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck },
-      value,
-      ...expirationProps,
-      ...props
-    }
-  );
-};
+  return /* @__PURE__ */ import_react7.default.createElement(FormControlTextField, {
+    inputRef,
+    formControl: creditCardFormControl,
+    fieldLabel,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} of the card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    value,
+    ...expirationProps,
+    ...props
+  });
+}, "CreditCardExpirationWithFormControl");
 
 // src/components/controls/card/Name.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var NameWithFormControl = ({
-  autoCompleteLabel,
-  fieldLabel = "Name",
-  formControlName,
-  placeholder,
-  tabIndex,
-  ...props
-}) => {
-  const args = (0, import_react5.useMemo)(() => [fieldLabel, autoCompleteLabel, placeholder ?? ""], [autoCompleteLabel, fieldLabel, placeholder]);
+var import_react8 = __toESM(require("react"), 1);
+var NameWithFormControl = /* @__PURE__ */ __name(({ autoCompleteLabel, fieldLabel = "Name", formControlName, placeholder, tabIndex, ...props }) => {
+  const args = (0, import_react8.useMemo)(() => [
+    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__ */ (0, import_jsx_runtime6.jsx)(
-    FormControlTextField,
-    {
-      fieldLabel,
-      formControl: creditCardFormControl,
-      formControlError: error,
-      inputMode,
-      inputProps: { "aria-label": `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex },
-      inputRef,
-      value,
-      ...cvcProps,
-      ...props
-    }
-  );
-};
+  return /* @__PURE__ */ import_react8.default.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} name on your card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck,
+      tabIndex
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "NameWithFormControl");
 
 // src/components/controls/card/number/Number.tsx
 var import_material2 = require("@mui/material");
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/img/index.ts
 var import_american_express = __toESM(require("./american-express-TTLTB43R.svg"), 1);
@@ -666,18 +749,30 @@ var import_visa = __toESM(require("./visa-NRR5YBLP.svg"), 1);
 
 // src/components/controls/card/Options.ts
 var CreditCardData = {
-  amex: { icon: import_american_express.default, name: "American Express" },
-  discover: { icon: import_discover.default, name: "Discover" },
-  mastercard: { icon: import_mastercard.default, name: "Mastercard" },
-  visa: { icon: import_visa.default, name: "Visa" }
+  amex: {
+    icon: import_american_express.default,
+    name: "American Express"
+  },
+  discover: {
+    icon: import_discover.default,
+    name: "Discover"
+  },
+  mastercard: {
+    icon: import_mastercard.default,
+    name: "Mastercard"
+  },
+  visa: {
+    icon: import_visa.default,
+    name: "Visa"
+  }
 };
 
-// src/components/controls/card/number/use.tsx
-var import_react6 = require("react");
-var useCreditCardNumberFormControl = (formControlName, control) => {
+// src/components/controls/card/number/use.ts
+var import_react9 = require("react");
+var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, control) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
-  const [type, setType] = (0, import_react6.useState)("");
-  (0, import_react6.useEffect)(() => {
+  const [type, setType] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
     if (creditCardFormControl) {
       const castControl = creditCardFormControl;
       if (!castControl.onCreditCardTypeChange) {
@@ -691,68 +786,93 @@ var useCreditCardNumberFormControl = (formControlName, control) => {
         }
       };
     }
-  }, [creditCardFormControl, inputRef]);
-  return { creditCardFormControl, error, inputRef, type, value };
-};
+  }, [
+    creditCardFormControl,
+    inputRef
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    type,
+    value
+  };
+}, "useCreditCardNumberFormControl");
 
 // src/components/controls/card/number/Number.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var CreditCardNumberWithFormControl = ({
-  fieldLabel = "Card Number",
-  formControlName = "cardNumber",
-  ...props
-}) => {
+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__ */ (0, import_jsx_runtime7.jsx)(
-    FormControlTextField,
-    {
-      fieldLabel,
-      formControl: creditCardFormControl,
-      formControlError: error,
-      inputRef,
+  return /* @__PURE__ */ import_react10.default.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputRef,
+    inputMode,
+    inputProps: {
+      "aria-label": fieldLabel,
+      autoComplete,
+      autoCorrect,
+      id,
       inputMode,
-      inputProps: { "aria-label": fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck },
-      InputProps: {
-        startAdornment: type.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material2.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { height: "30px", width: "40px", src: CreditCardData[type].icon }) }) : null
-      },
-      value,
-      ...cardProps,
-      ...props
-    }
-  );
-};
+      name,
+      spellCheck
+    },
+    InputProps: {
+      startAdornment: type.length > 0 ? /* @__PURE__ */ import_react10.default.createElement(import_material2.InputAdornment, {
+        position: "start"
+      }, /* @__PURE__ */ import_react10.default.createElement("img", {
+        height: "30px",
+        width: "40px",
+        src: CreditCardData[type].icon
+      })) : null
+    },
+    value,
+    ...cardProps,
+    ...props
+  });
+}, "CreditCardNumberWithFormControl");
 
 // src/components/controls/card/Zip.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var CreditCardZipWithFormControl = ({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
+var import_react11 = __toESM(require("react"), 1);
+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__ */ (0, import_jsx_runtime8.jsx)(
-    FormControlTextField,
-    {
-      fieldLabel,
-      formControl: creditCardFormControl,
-      formControlError: error,
-      inputMode,
-      inputProps: { "aria-label": `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck },
-      inputRef,
-      value,
-      ...cvcProps,
-      ...props
-    }
-  );
-};
+  return /* @__PURE__ */ import_react11.default.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");
 
 // src/components/form/Form.tsx
 var import_material4 = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_error = require("@xyo-network/react-error");
-var import_react7 = require("react");
+var import_react13 = __toESM(require("react"), 1);
 
 // 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
 var import_assert3 = require("@xylabs/assert");
@@ -763,7 +883,7 @@ var CreditCardInputSchema = "network.xyo.credit.card.input";
 var isCreditCardInput = (0, import_payload_model.isPayloadOfSchemaTypeWithMeta)(CreditCardInputSchema);
 
 // src/components/support/validateCreditCardInputs.ts
-var validateCreditCardInputs = (values) => {
+var validateCreditCardInputs = /* @__PURE__ */ __name((values) => {
   return {
     cardNumber: (0, import_assert3.assertEx)(values.cardNumber, () => "card number is not a string"),
     cvc: (0, import_assert3.assertEx)(values.cvc, () => "card cvc is not a string"),
@@ -775,74 +895,126 @@ var validateCreditCardInputs = (values) => {
     timestamp: values.timestamp,
     zip: (0, import_assert3.assertEx)(values.zip, () => "zip is not a string")
   };
-};
+}, "validateCreditCardInputs");
 
 // src/components/form/InputFieldsStack.tsx
 var import_material3 = require("@mui/material");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var InputFieldsStack = (props) => {
+var import_react12 = __toESM(require("react"), 1);
+var InputFieldsStack = /* @__PURE__ */ __name((props) => {
   const { sx } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NameWithFormControl, { autoCompleteLabel: "given-name", fieldLabel: "First", formControlName: "firstName", placeholder: "Jerry" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NameWithFormControl, { autoCompleteLabel: "family-name", fieldLabel: "Last", formControlName: "lastName", placeholder: "Smith" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { lg: "row", xs: "column" }, ...sx }, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { lg: "50%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardNumberWithFormControl, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { direction: { lg: "row", xs: "column" }, gap: 2, width: { lg: "50%", xs: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardCvvWithFormControl, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardExpirationWithFormControl, {})
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { md: "25%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardZipWithFormControl, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { md: "75%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardEmailWithFormControl, {}) })
-    ] })
-  ] });
-};
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ import_react12.default.createElement(NameWithFormControl, {
+    autoCompleteLabel: "given-name",
+    fieldLabel: "First",
+    formControlName: "firstName",
+    placeholder: "Jerry"
+  }), /* @__PURE__ */ import_react12.default.createElement(NameWithFormControl, {
+    autoCompleteLabel: "family-name",
+    fieldLabel: "Last",
+    formControlName: "lastName",
+    placeholder: "Smith"
+  })), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        lg: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    width: {
+      lg: "50%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardNumberWithFormControl, null)), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    direction: {
+      lg: "row",
+      xs: "column"
+    },
+    gap: 2,
+    width: {
+      lg: "50%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardCvvWithFormControl, null), /* @__PURE__ */ import_react12.default.createElement(CreditCardExpirationWithFormControl, null))), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    width: {
+      md: "25%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardZipWithFormControl, null)), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
+    width: {
+      md: "75%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardEmailWithFormControl, null))));
+}, "InputFieldsStack");
 
 // src/components/form/useFormStorage.tsx
 var import_react_promise = require("@xylabs/react-promise");
 var import_archivist_storage = require("@xyo-network/archivist-storage");
 var import_react_form_group8 = require("@xyo-network/react-form-group");
 var StorageNameSpace = "credit-card-fields";
-var calculateTTL = (months = 6) => {
+var calculateTTL = /* @__PURE__ */ __name((months = 6) => {
   const MS_PER_DAY = 24 * 60 * 60 * 1e3;
   const DAYS_PER_MONTH = 30.44;
   return months * DAYS_PER_MONTH * MS_PER_DAY;
-};
-var useFormStorage = () => {
+}, "calculateTTL");
+var useFormStorage = /* @__PURE__ */ __name(() => {
   return (0, import_react_promise.usePromise)(async () => {
     const localStorageArchivist = await import_archivist_storage.StorageArchivist.create({
       account: "random",
-      config: { namespace: StorageNameSpace, schema: import_archivist_storage.StorageArchivistConfigSchema, type: "local" }
+      config: {
+        namespace: StorageNameSpace,
+        schema: import_archivist_storage.StorageArchivistConfigSchema,
+        type: "local"
+      }
     });
     const sessionStorageArchivist = await import_archivist_storage.StorageArchivist.create({
       account: "random",
-      config: { namespace: StorageNameSpace, schema: import_archivist_storage.StorageArchivistConfigSchema, type: "session" }
+      config: {
+        namespace: StorageNameSpace,
+        schema: import_archivist_storage.StorageArchivistConfigSchema,
+        type: "session"
+      }
     });
     const storage = {
       sensitive: new import_react_form_group8.ArchivistFormGroupStorage(sessionStorageArchivist),
       storage: new import_react_form_group8.ArchivistFormGroupStorage(localStorageArchivist)
     };
-    return { serialize: true, storage, ttlStorage: calculateTTL() };
+    return {
+      serialize: true,
+      storage,
+      ttlStorage: calculateTTL()
+    };
   }, []);
-};
+}, "useFormStorage");
 
 // src/components/form/Form.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CreditCardFormFlexbox = ({
-  ConfirmationButton,
-  displayErrors,
-  onErrorDuringSubmit,
-  onInvalidSubmit,
-  onSuccessfulSubmit,
-  onValidSubmit,
-  ...props
-}) => {
+var CreditCardFormFlexbox = /* @__PURE__ */ __name(({ ConfirmationButton, displayErrors, onErrorDuringSubmit, onInvalidSubmit, onSuccessfulSubmit, onValidSubmit, ...props }) => {
   const { formGroup } = useFormGroupWithCreditCardInput(true);
-  const [error, setError] = (0, import_react7.useState)();
-  const handleConfirmPayment = async () => {
+  const [error, setError] = (0, import_react13.useState)();
+  const handleConfirmPayment = /* @__PURE__ */ __name(async () => {
     try {
       if (!formGroup) {
         throw new Error("formGroup is not defined");
@@ -860,20 +1032,39 @@ var CreditCardFormFlexbox = ({
       onErrorDuringSubmit?.(error2);
       if (displayErrors) setError(error2);
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_error.ErrorRender, { error }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_flexbox.FlexCol, { sx: { flexDirection: { md: "row", xs: "column" } }, width: "100%", gap: 2, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material4.Stack, { flexDirection: "column", sx: { width: "100%" }, gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputFieldsStack, {}),
-      ConfirmationButton ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ConfirmationButton, { onClick: handleConfirmPayment, variant: "contained", sx: { alignSelf: "end" }, children: "Confirm Payment" }) : null
-    ] }) })
-  ] });
-};
-var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
+  }, "handleConfirmPayment");
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(import_react_error.ErrorRender, {
+    error
+  }), /* @__PURE__ */ import_react13.default.createElement(import_react_flexbox.FlexCol, {
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      }
+    },
+    width: "100%",
+    gap: 2,
+    ...props
+  }, /* @__PURE__ */ import_react13.default.createElement(import_material4.Stack, {
+    flexDirection: "column",
+    sx: {
+      width: "100%"
+    },
+    gap: 2
+  }, /* @__PURE__ */ import_react13.default.createElement(InputFieldsStack, null), ConfirmationButton ? /* @__PURE__ */ import_react13.default.createElement(ConfirmationButton, {
+    onClick: handleConfirmPayment,
+    variant: "contained",
+    sx: {
+      alignSelf: "end"
+    }
+  }, "Confirm Payment") : null)));
+}, "CreditCardFormFlexbox");
+var CreditCardFormFlexboxWithFormGroupProvider = /* @__PURE__ */ __name((props) => {
   const [params, error] = useFormStorage();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FormGroupCreditCardProvider, { params, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_error.ErrorRender, { error }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CreditCardFormFlexbox, { ...props })
-  ] });
-};
+  return /* @__PURE__ */ import_react13.default.createElement(FormGroupCreditCardProvider, {
+    params
+  }, /* @__PURE__ */ import_react13.default.createElement(import_react_error.ErrorRender, {
+    error
+  }), /* @__PURE__ */ import_react13.default.createElement(CreditCardFormFlexbox, props));
+}, "CreditCardFormFlexboxWithFormGroupProvider");
 //# sourceMappingURL=index.cjs.map