@xyo-network/react-form-credit-card 2.81.2 → 2.81.4

package/dist/node/index.cjs

@@ -49,6 +49,7 @@ __export(src_exports, {
   FormControlTextField: () => FormControlTextField,
   FormGroupCreditCardContext: () => FormGroupCreditCardContext,
   FormGroupCreditCardProvider: () => FormGroupCreditCardProvider,
+  InputFieldsStack: () => InputFieldsStack,
   MastercardIcon: () => import_mastercard.default,
   NameFields: () => NameFields,
   NameFormControl: () => NameFormControl,
@@ -61,6 +62,7 @@ __export(src_exports, {
   useCreditCardFormControl: () => useCreditCardFormControl,
   useCreditCardNumberFormControl: () => useCreditCardNumberFormControl,
   useFormGroupWithCreditCardInput: () => useFormGroupWithCreditCardInput,
+  useFormStorage: () => useFormStorage,
   validateCreditCardInputs: () => validateCreditCardInputs
 });
 module.exports = __toCommonJS(src_exports);
@@ -513,7 +515,8 @@ var useFormGroupWithCreditCardInput = (required = false) => {
 
 // src/components/controls/card/useCreditCardFormControl.tsx
 var import_react3 = require("react");
-var useCreditCardFormControl = (formControlName, Control, args = []) => {
+var StableDefaultArgs = [];
+var useCreditCardFormControl = (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);
@@ -523,11 +526,6 @@ var useCreditCardFormControl = (formControlName, Control, args = []) => {
       const control = new Control(...args);
       control.registerOnErrorChange((newError) => setError(newError));
       control.registerOnChange((value2) => setValue(value2));
-      control.onCursorChange = (cursor) => {
-        if (inputRef.current && cursor) {
-          inputRef.current.setSelectionRange(cursor, cursor);
-        }
-      };
       if (formControlName) formGroup == null ? void 0 : formGroup.registerControl(formControlName, control);
       return control;
     }
@@ -577,7 +575,11 @@ var CreditCardCvvWithFormControl = ({ formControlName = "cvc", fieldLabel = "CVC
 
 // src/components/controls/card/Email.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CreditCardEmailWithFormControl = ({ formControlName = "email", fieldLabel = "Email", ...props }) => {
+var CreditCardEmailWithFormControl = ({
+  formControlName = "emailAddress",
+  fieldLabel = "Email",
+  ...props
+}) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
   const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -675,12 +677,17 @@ var useCreditCardNumberFormControl = (formControlName, control) => {
   const [type, setType] = (0, import_react6.useState)("");
   (0, import_react6.useEffect)(() => {
     if (creditCardFormControl) {
-      const castInstance = creditCardFormControl;
-      if (!castInstance.onCreditCardTypeChange) {
+      const castControl = creditCardFormControl;
+      if (!castControl.onCreditCardTypeChange) {
         console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
         return;
       }
-      castInstance.onCreditCardTypeChange = (type2) => setType(type2);
+      castControl.onCreditCardTypeChange = (type2) => setType(type2);
+      castControl.onCursorChange = (cursor) => {
+        if (inputRef.current && cursor) {
+          inputRef.current.setSelectionRange(cursor, cursor);
+        }
+      };
     }
   }, [creditCardFormControl, inputRef]);
   return { creditCardFormControl, error, inputRef, type, value };
@@ -739,6 +746,7 @@ var CreditCardZipWithFormControl = ({ formControlName = "zip", fieldLabel = "Zip
 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");
 
 // src/components/support/Fields.ts
 var NameFields = ["firstName", "lastName"];
@@ -757,12 +765,12 @@ var validateCreditCardInputs = (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"),
-    emailAddress: (0, import_assert3.assertEx)(values.emailAddress, () => "email is not a string"),
+    emailAddress: (0, import_assert3.assertEx)(values.emailAddress, () => "emailAddress is not a string"),
     expiration: (0, import_assert3.assertEx)(values.expiration, () => "card expiration is not a string"),
     firstName: (0, import_assert3.assertEx)(values.firstName, () => "first name is not a string"),
     lastName: (0, import_assert3.assertEx)(values.lastName, () => "last name is not a string"),
     schema: CreditCardInputSchema,
-    timestamp: (0, import_assert3.assertEx)(values.timestamp, () => "timestamp is not a number"),
+    timestamp: values.timestamp,
     zip: (0, import_assert3.assertEx)(values.zip, () => "zip is not a string")
   };
 };
@@ -821,31 +829,40 @@ var useFormStorage = () => {
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CreditCardFormFlexbox = ({
   ConfirmationButton,
-  onFailedSubmit,
+  onErrorDuringSubmit,
+  onInvalidSubmit,
   onSuccessfulSubmit,
   onValidSubmit,
   ...props
 }) => {
   const { formGroup } = useFormGroupWithCreditCardInput(true);
+  const [error, setError] = (0, import_react7.useState)();
   const handleConfirmPayment = async () => {
-    if (!formGroup) {
-      console.error("formGroup is not defined");
-      return;
-    }
-    formGroup.validateFields();
-    const errorSummary = formGroup.errorSummary;
-    if (errorSummary.invalidFields.length > 0) {
-      onFailedSubmit == null ? void 0 : onFailedSubmit(errorSummary);
+    try {
+      if (!formGroup) {
+        throw new Error("formGroup is not defined");
+      }
+      formGroup.validateFields();
+      const errorSummary = formGroup.errorSummary;
+      if (errorSummary.invalidFields.length > 0) {
+        onInvalidSubmit == null ? void 0 : onInvalidSubmit(errorSummary);
+      }
+      if (errorSummary.invalidFields.length > 0) return;
+      const formOutput = validateCreditCardInputs(formGroup.values);
+      await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
+      onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
+    } catch (error2) {
+      onErrorDuringSubmit == null ? void 0 : onErrorDuringSubmit(error2);
+      setError(error2);
     }
-    if (errorSummary.invalidFields.length > 0) return;
-    const formOutput = validateCreditCardInputs(formGroup.values);
-    await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
-    onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
   };
-  return /* @__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
-  ] }) });
+  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) => {
   const [params, error] = useFormStorage();
@@ -875,6 +892,7 @@ var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
   FormControlTextField,
   FormGroupCreditCardContext,
   FormGroupCreditCardProvider,
+  InputFieldsStack,
   MastercardIcon,
   NameFields,
   NameFormControl,
@@ -887,6 +905,7 @@ var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
   useCreditCardFormControl,
   useCreditCardNumberFormControl,
   useFormGroupWithCreditCardInput,
+  useFormStorage,
   validateCreditCardInputs
 });
 //# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/controls/CreditCardCvv.ts","../../src/utils/umask.ts","../../src/controls/CreditCardExpiry.ts","../../src/controls/CreditCardNumber.ts","../../src/controls/Email.ts","../../src/controls/Name.ts","../../src/controls/Zip.ts","../../src/components/controls/card/FormControlTextField.tsx","../../src/components/controls/card/cvv/use.tsx","../../src/context/FormGroupCreditCardContext.ts","../../src/context/FormGroupCreditCardProvider.tsx","../../src/context/useFormGroupWithCreditCard.tsx","../../src/components/controls/card/useCreditCardFormControl.tsx","../../src/components/controls/card/cvv/Cvv.tsx","../../src/components/controls/card/Email.tsx","../../src/components/controls/card/Expiration.tsx","../../src/components/controls/card/Name.tsx","../../src/components/controls/card/number/Number.tsx","../../src/components/img/index.ts","../../src/components/controls/card/Options.ts","../../src/components/controls/card/number/use.tsx","../../src/components/controls/card/Zip.tsx","../../src/components/form/Form.tsx","../../src/components/support/Fields.ts","../../src/components/support/validateCreditCardInputs.ts","../../src/models/CreditCardInput.ts","../../src/components/form/InputFieldsStack.tsx","../../src/components/form/useFormStorage.tsx"],"sourcesContent":["export * from './components/index.js'\nexport * from './context/index.js'\nexport * from './controls/index.js'\nexport * from './models/index.js'\nexport * from './utils/index.js'\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'cvv'\n\nexport class CreditCardCvvFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your card cvc is invalid.'\n\n  override pattern = /^\\d{0,4}$/\n  override patternStrict = /^\\d{1,4}$/\n\n  override props = {\n    autoComplete: 'cc-csc',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: 'CVC',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  get cardNumberFormControl() {\n    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n  }\n\n  override blurError(value: string) {\n    const num = this.cardNumberFormControl.value\n    const max = this.getCardNumberCvcMax(num)\n    const cvvValidation = valid.cvv(value, max)\n    if (cvvValidation.isValid) {\n      this.setError('')\n      this.setStatus('VALID')\n    } else {\n      this.setError(this.invalidMessage)\n      this.setStatus('INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const num = this.cardNumberFormControl.value\n      const max = this.getCardNumberCvcMax(num)\n      const cvvValidation = valid.cvv(value, max)\n      if (cvvValidation.isPotentiallyValid) {\n        this.setError('')\n        this.setStatus('VALID')\n      } else {\n        this.setError('Your card cvc is invalid.')\n        this.setStatus('INVALID')\n      }\n    } else {\n      this.setError(this.invalidMessage)\n      this.setStatus('INVALID')\n    }\n  }\n\n  setCardNumberFormControl(cardNumberFormControl: AbstractControl) {\n    this._cardNumberFormControl = cardNumberFormControl\n  }\n\n  private getCardNumberCvcMax(num?: string) {\n    if (!num) return 3\n    const numberValidation = valid.number(num)\n    return numberValidation.card ? numberValidation.card.code.size : 3\n  }\n}\n","export function unmask(value: string) {\n  return value.replaceAll(/\\D/g, '')\n}\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'expiration'\n\nexport class CreditCardExpirationFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase {\n  override invalidMessage = 'Card Expiration is invalid'\n\n  override pattern = /^\\d{0,4}$/\n  override patternStrict = /^\\d{1,4}$/\n\n  override props = {\n    autoComplete: 'cc-exp',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: 'MM / YY',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  get cardNumberFormControl() {\n    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n  }\n\n  override blurError(value: string) {\n    const unmasked = unmask(value)\n    const expirationValid = valid.expirationDate(unmasked)\n    if (!unmasked || (unmasked && unmasked.length !== 4)) {\n      this.setErrorAndValidity('Your card expiration is incomplete.', 'INVALID')\n    } else if (expirationValid.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const expirationValid = valid.expirationDate(unmasked)\n    if (expirationValid.isPotentiallyValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else if (expirationValid.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n    }\n  }\n\n  override mask(value: string) {\n    if (/^[2-9]/.test(unmask(value))) {\n      return this.makeMask(' / ', 2)(`0${value}`)\n    }\n    return this.makeMask(' / ', 2)(value)\n  }\n\n  private makeMask(separator: string, limit: number) {\n    return (value: string) => {\n      const output: string[] = []\n      // eslint-disable-next-line unicorn/no-for-loop\n      for (let i = 0; i < value.length; i++) {\n        if (i !== 0 && i % limit === 0) {\n          output.push(separator)\n        }\n\n        output.push(value[i])\n      }\n\n      return output.join('')\n    }\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase, SetOptions, ValidControlValue } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'cardNumber2'\n\nexport class CreditCardNumberFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  creditCardType: string = ''\n\n  override invalidMessage = 'Card Number is invalid'\n\n  override pattern = /^(\\d+)?$/\n  override patternStrict = /^\\d+$/\n\n  override props = {\n    autoComplete: 'cc-number',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: '1234 1234 1234 1234',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const unmasked = unmask(value)\n    const numberValidation = valid.number(unmasked)\n    if (!numberValidation.isValid) {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n      return\n    }\n    this.setErrorAndValidity('', 'VALID')\n  }\n\n  override changeError(value: string) {\n    const unmasked = unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const numberValidation = valid.number(unmasked)\n      if (!numberValidation.isPotentiallyValid) {\n        this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n        return\n      }\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  earlyNumberCheck(number: string) {\n    switch (number) {\n      case '4': {\n        this.setCreditCardType('visa')\n        break\n      }\n      case '5': {\n        this.setCreditCardType('mastercard')\n        break\n      }\n      case '3': {\n        this.setCreditCardType('amex')\n        break\n      }\n      case '6': {\n        this.setCreditCardType('discover')\n        break\n      }\n      default: {\n        this.setCreditCardType('')\n      }\n    }\n  }\n\n  override getCursorPosition() {\n    if (this.value) {\n      const previousValue = this.previousValue ?? ''\n      const unmasked = unmask(this.value)\n      const numberValidation = valid.number(unmasked)\n      const card = numberValidation.card\n      const lengthChange = this.value.length - (previousValue?.length ?? 0)\n      const unmaskedChange = unmask(this.value).length - unmask(previousValue).length\n\n      if (card) {\n        const gaps = card.gaps\n        const oldCursor = this.cursorPosition.previous ?? 0\n        const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length\n        const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length\n        const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange\n        return newCursor\n      }\n    }\n\n    return\n  }\n\n  override mask(value: ValidControlValue = '') {\n    const unmasked = unmask(value)\n    const numberValidation = valid.number(unmasked)\n    const card = numberValidation.card\n\n    if (card) {\n      const max = card.lengths.includes(16) ? 16 : card.lengths[0]\n      const gaps = [...card.gaps, max]\n      const newVal = gaps\n        .map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap))\n        .filter(Boolean)\n        .join(' ')\n\n      return newVal\n    }\n\n    return value\n  }\n\n  onCreditCardTypeChange: (type: string) => void = () => {}\n\n  setCreditCardType(type: string) {\n    this.creditCardType = type\n    this.onCreditCardTypeChange(type)\n  }\n\n  override setValue(value = '', options: SetOptions) {\n    const umMasked = this.unmask(value)\n    super.setValue(umMasked, options)\n    this.earlyNumberCheck(umMasked.charAt(0))\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nconst CONTROL_NAME = 'Email'\n\nexport class CreditCardEmailFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your email is invalid.'\n\n  override pattern = /^.*$/\n  override patternStrict = /^([\\w+.\\-])+@(([\\dA-Za-z-])+\\.)+([\\dA-Za-z]{2,4})+$/\n\n  override props = {\n    autoComplete: 'email',\n    autoCorrect: 'off',\n    id: CONTROL_NAME.toLocaleLowerCase(),\n    name: CONTROL_NAME.toLocaleLowerCase(),\n    placeholder: 'jerry.smith@email.com',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: false, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const match = value.match(this.patternStrict)\n    this.updateValidation(match)\n  }\n\n  override changeError(value: string) {\n    if (this.error) {\n      this.blurError(value)\n    }\n  }\n\n  private updateValidation(match: RegExpMatchArray | null) {\n    if (match) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nexport class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override required = true\n\n  constructor(\n    private nameLabel: string,\n    autoCompleteLabel: string,\n    placeHolder: string,\n  ) {\n    super()\n    super.setName(nameLabel)\n    this.setSerializeSettings({ sensitive: false, serializable: true })\n    this.invalidMessage = `${nameLabel} name is missing.`\n    this.props = {\n      autoComplete: autoCompleteLabel,\n      autoCorrect: 'off',\n      id: this.nameLabel,\n      name: this.nameLabel,\n      placeholder: placeHolder,\n      spellCheck: false,\n    } as TProps\n  }\n\n  override blurError(value: string) {\n    if (value) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  override changeError(value: string): void {\n    this.blurError(value)\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'Zip'\n\nexport class CreditCardZipFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your zip code is invalid.'\n\n  override props = {\n    autoComplete: 'postal-code',\n    autoCorrect: 'off',\n    id: CONTROL_NAME.toLocaleLowerCase(),\n    name: CONTROL_NAME.toLocaleLowerCase(),\n    placeholder: '12345',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const postalCodeValidation = valid.postalCode(value)\n    if (postalCodeValidation.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const postalCodeValidation = valid.postalCode(value)\n      if (postalCodeValidation.isPotentiallyValid) {\n        this.setErrorAndValidity('', 'VALID')\n      } else {\n        this.setErrorAndValidity('Your zip code is invalid.', 'INVALID')\n      }\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n}\n","import { FormControl as MuiFormControl, StandardTextFieldProps, TextField } from '@mui/material'\nimport { FormControl } from '@xyo-network/react-form-group'\nimport { LabeledTextFieldWrapper } from '@xyo-network/react-shared'\nimport { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'\n\nexport interface FormControlTextFieldProps extends StandardTextFieldProps {\n  fieldLabel: string\n  formControl?: FormControl<StandardTextFieldProps>\n  formControlError?: string\n}\n\nexport const FormControlTextField = forwardRef<HTMLDivElement, FormControlTextFieldProps>(\n  ({ formControl, formControlError, fieldLabel = '', ...props }, ref) => {\n    const { name } = formControl?.props ?? {}\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      formControl?.setValue(event.target.value)\n    }\n\n    const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n      formControl?.blurError?.(event.target.value)\n      formControl?.setTouched(true)\n    }\n\n    return (\n      <MuiFormControl fullWidth>\n        <LabeledTextFieldWrapper label={fieldLabel}>\n          <label htmlFor={name}>\n            <TextField\n              error={!!formControlError}\n              helperText={formControlError || ' '}\n              fullWidth\n              hiddenLabel\n              name={name}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n                // See - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n                // .currentTarget is the div in mui that emits the event, .target is the input element\n                // Unfortunately, the type definitions do not let you pass a generic specifically for target, only currentTarget\n                const selectionEnd = (event.target as HTMLInputElement).selectionEnd\n                if (selectionEnd && formControl) {\n                  formControl.cursorPosition.previous = selectionEnd\n                }\n              }}\n              ref={ref}\n              required={formControl?.required}\n              size={'small'}\n              variant=\"filled\"\n              {...props}\n            />\n          </label>\n        </LabeledTextFieldWrapper>\n      </MuiFormControl>\n    )\n  },\n)\n\nFormControlTextField.displayName = 'FormControlTextField'\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../../context/index.js'\nimport { CreditCardCvvFormControl } from '../../../../controls/index.js'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.js'\n\nexport const useCreditCardCvvFormControl = (\n  formControlName?: string,\n  cardNumberControlName = 'cardNumber',\n  control?: new () => FormControlBase<StandardTextFieldProps>,\n) => {\n  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control)\n\n  // only use FormGroupContext when name is passed\n  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName)\n\n  useEffect(() => {\n    if (creditCardNumberFormControl) {\n      const castControl = creditCardFormControl as CreditCardCvvFormControl\n      if (!castControl.setCardNumberFormControl) {\n        console.error('cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl')\n        return\n      }\n      castControl.setCardNumberFormControl(creditCardNumberFormControl)\n    }\n  }, [creditCardFormControl, creditCardNumberFormControl])\n\n  return { creditCardFormControl, error, inputRef, value }\n}\n","import { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'\nimport { createContextEx } from '@xyo-network/react-shared'\n\nimport { CreditCardInput } from '../models/index.js'\n\nexport const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()\n","import { Payload } from '@xyo-network/payload-model'\nimport { FormGroup, FormGroupParams } from '@xyo-network/react-form-group'\nimport { PropsWithChildren, useMemo } from 'react'\n\nimport { CreditCardInput } from '../models/CreditCardInput.js'\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'\n\nexport interface FormGroupCreditCardProviderProps<TStorage extends Payload = Payload> extends PropsWithChildren {\n  params?: FormGroupParams<TStorage>\n}\n\nexport const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({ children, params, ...props }) => {\n  const formGroup = useMemo(() => {\n    const formGroup = new FormGroup<CreditCardInput, CreditCardInput>(params)\n    return formGroup\n  }, [params])\n\n  return (\n    <FormGroupCreditCardContext.Provider value={{ formGroup, provided: true }} {...props}>\n      {children}\n    </FormGroupCreditCardContext.Provider>\n  )\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'\n\nexport const useFormGroupWithCreditCardInput = (required = false) => {\n  return useContextEx(FormGroupCreditCardContext, 'FormGroupCreditCard', required)\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'\nimport { useMemo, useRef, useState } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../context/index.js'\n\nexport const useCreditCardFormControl = (\n  formControlName?: string,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  args: any[] = [],\n) => {\n  const [error, setError] = useState('')\n  const [value, setValue] = useState<ValidControlValue>('')\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // only use FormGroupContext when name is passed\n  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n  const creditCardFormControl = useMemo(() => {\n    if (Control) {\n      const control = new Control(...args)\n      control.registerOnErrorChange((newError: string) => setError(newError))\n      control.registerOnChange((value: ValidControlValue) => setValue(value))\n      control.onCursorChange = (cursor: number | undefined) => {\n        if (inputRef.current && cursor) {\n          inputRef.current.setSelectionRange(cursor, cursor)\n        }\n      }\n\n      if (formControlName) formGroup?.registerControl(formControlName, control)\n      return control\n    }\n  }, [Control, args, formControlName, formGroup])\n\n  return { creditCardFormControl, error, inputRef, value }\n}\n","import { CreditCardCvvFormControl } from '../../../../controls/index.js'\nimport { WithFormControlProps } from '../../WithFormControlProps.js'\nimport { FormControlTextField } from '../FormControlTextField.js'\nimport { useCreditCardCvvFormControl } from './use.js'\n\nexport const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { CreditCardEmailFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardEmailWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'email', fieldLabel = 'Email', ...props }) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { CreditCardExpirationFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardExpirationWithFormControl: React.FC<WithFormControlProps> = ({\n  formControlName = 'expiration',\n  fieldLabel = 'Expiration',\n  ...props\n}) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      inputRef={inputRef}\n      formControl={creditCardFormControl}\n      fieldLabel={fieldLabel}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      value={value}\n      {...expirationProps}\n      {...props}\n    />\n  )\n}\n","import { useMemo } from 'react'\n\nimport { NameFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport interface NameWithFormControlProps extends WithFormControlProps {\n  autoCompleteLabel: string\n}\n\nexport const NameWithFormControl: React.FC<NameWithFormControlProps> = ({\n  autoCompleteLabel,\n  fieldLabel = 'Name',\n  formControlName,\n  placeholder,\n  tabIndex,\n  ...props\n}) => {\n  const args = useMemo(() => [fieldLabel, autoCompleteLabel, placeholder ?? ''], [autoCompleteLabel, fieldLabel, placeholder])\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { InputAdornment } from '@mui/material'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.js'\nimport { WithFormControlProps } from '../../WithFormControlProps.js'\nimport { FormControlTextField } from '../FormControlTextField.js'\nimport { CreditCardData } from '../Options.js'\nimport { useCreditCardNumberFormControl } from './use.js'\n\nexport const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = ({\n  fieldLabel = 'Card Number',\n  formControlName = 'cardNumber',\n  ...props\n}) => {\n  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputRef={inputRef}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}\n      InputProps={{\n        startAdornment:\n          type.length > 0 ?\n            <InputAdornment position=\"start\">\n              <img height={'30px'} width={'40px'} src={CreditCardData[type].icon} />\n            </InputAdornment>\n          : null,\n      }}\n      value={value}\n      {...cardProps}\n      {...props}\n    />\n  )\n}\n","export { default as AmexIcon } from './american-express.svg'\nexport { default as DiscoverIcon } from './discover.svg'\nexport { default as MastercardIcon } from './mastercard.svg'\nexport { default as VisaIcon } from './visa.svg'\n","import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.js'\n\nexport interface CreditCardInfo {\n  icon: string\n  name: string\n}\n\nexport interface CreditCardOptions {\n  amex: CreditCardInfo\n  discover: CreditCardInfo\n  mastercard: CreditCardInfo\n  visa: CreditCardInfo\n}\n\nexport const CreditCardData: CreditCardOptions = {\n  amex: { icon: AmexIcon, name: 'American Express' },\n  discover: { icon: DiscoverIcon, name: 'Discover' },\n  mastercard: { icon: MastercardIcon, name: 'Mastercard' },\n  visa: { icon: VisaIcon, name: 'Visa' },\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect, useState } from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.js'\nimport { CreditCardOptions } from '../Options.js'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.js'\n\nexport const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)\n  const [type, setType] = useState('' as keyof CreditCardOptions)\n\n  useEffect(() => {\n    if (creditCardFormControl) {\n      const castInstance = creditCardFormControl as CreditCardNumberFormControl<StandardTextFieldProps>\n      if (!castInstance.onCreditCardTypeChange) {\n        console.error('cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl')\n        return\n      }\n      castInstance.onCreditCardTypeChange = (type: string) => setType(type as keyof CreditCardOptions)\n    }\n  }, [creditCardFormControl, inputRef])\n\n  return { creditCardFormControl, error, inputRef, type, value }\n}\n","import { CreditCardZipFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'zip', fieldLabel = 'Zip', ...props }) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { Stack } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { ErrorRender } from '@xyo-network/react-error'\n\nimport { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.js'\nimport { validateCreditCardInputs } from '../support/index.js'\nimport { InputFieldsStack } from './InputFieldsStack.js'\nimport { CreditCardFormProps } from './Props.js'\nimport { useFormStorage } from './useFormStorage.js'\n\nexport const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({\n  ConfirmationButton,\n  onFailedSubmit,\n  onSuccessfulSubmit,\n  onValidSubmit,\n  ...props\n}) => {\n  const { formGroup } = useFormGroupWithCreditCardInput(true)\n\n  const handleConfirmPayment = async () => {\n    if (!formGroup) {\n      console.error('formGroup is not defined')\n      return\n    }\n\n    formGroup.validateFields()\n\n    const errorSummary = formGroup.errorSummary\n\n    if (errorSummary.invalidFields.length > 0) {\n      onFailedSubmit?.(errorSummary)\n    }\n\n    if (errorSummary.invalidFields.length > 0) return\n\n    const formOutput = validateCreditCardInputs(formGroup.values)\n\n    await onValidSubmit?.(formOutput)\n\n    onSuccessfulSubmit?.()\n  }\n\n  return (\n    <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width={'100%'} gap={2} {...props}>\n      <Stack flexDirection={'column'} sx={{ width: '100%' }} gap={2}>\n        <InputFieldsStack />\n        {ConfirmationButton ?\n          <ConfirmationButton onClick={handleConfirmPayment} variant=\"contained\" sx={{ alignSelf: 'end' }}>\n            Confirm Payment\n          </ConfirmationButton>\n        : null}\n      </Stack>\n    </FlexCol>\n  )\n}\n\nexport const CreditCardFormFlexboxWithFormGroupProvider: React.FC<CreditCardFormProps> = (props) => {\n  const [params, error] = useFormStorage()\n  return (\n    <FormGroupCreditCardProvider params={params}>\n      <ErrorRender error={error} />\n      <CreditCardFormFlexbox {...props} />\n    </FormGroupCreditCardProvider>\n  )\n}\n","export const NameFields = ['firstName', 'lastName'] as const\nexport const NameLabels = ['First', 'Last'] as const\nexport type NameLabel = (typeof NameLabels)[number]\n","import { assertEx } from '@xylabs/assert'\n\nimport { CreditCardInput, CreditCardInputSchema } from '../../models/index.js'\n\nexport const validateCreditCardInputs = (values: CreditCardInput): CreditCardInput => {\n  return {\n    cardNumber: assertEx(values.cardNumber, () => 'card number is not a string') as string,\n    cvc: assertEx(values.cvc, () => 'card cvc is not a string') as string,\n    emailAddress: assertEx(values.emailAddress, () => 'email is not a string') as string,\n    expiration: assertEx(values.expiration, () => 'card expiration is not a string') as string,\n    firstName: assertEx(values.firstName, () => 'first name is not a string') as string,\n    lastName: assertEx(values.lastName, () => 'last name is not a string') as string,\n    schema: CreditCardInputSchema,\n    timestamp: assertEx(values.timestamp, () => 'timestamp is not a number') as number,\n    zip: assertEx(values.zip, () => 'zip is not a string') as string,\n  }\n}\n","import { isPayloadOfSchemaTypeWithMeta, Payload } from '@xyo-network/payload-model'\n\nexport const CreditCardInputSchema = 'network.xyo.credit.card.input' as const\nexport type CreditCardInputSchema = typeof CreditCardInputSchema\n\nexport type CreditCardInputFields = {\n  cardNumber: string\n  cvc: string\n  emailAddress: string\n  expiration: string\n  firstName: string\n  lastName: string\n  timestamp: number\n  zip: string\n}\n\nexport type CreditCardInput = Payload<CreditCardInputFields, CreditCardInputSchema>\n\nexport const isCreditCardInput = isPayloadOfSchemaTypeWithMeta<CreditCardInput>(CreditCardInputSchema)\n","import { Stack, StackProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\n\nimport {\n  CreditCardCvvWithFormControl,\n  CreditCardEmailWithFormControl,\n  CreditCardExpirationWithFormControl,\n  CreditCardNumberWithFormControl,\n  CreditCardZipWithFormControl,\n  NameWithFormControl,\n} from '../controls/index.js'\n\nexport interface InputFieldsStackProps extends StackProps, PropsWithChildren {}\n\nexport const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {\n  const { sx } = props\n  return (\n    <>\n      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n        <NameWithFormControl autoCompleteLabel=\"given-name\" fieldLabel={'First'} formControlName={'firstName'} placeholder=\"Jerry\" />\n        <NameWithFormControl autoCompleteLabel=\"family-name\" fieldLabel={'Last'} formControlName={'lastName'} placeholder=\"Smith\" />\n      </Stack>\n      <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>\n        <Stack width={{ lg: '50%', xs: '100%' }}>\n          <CreditCardNumberWithFormControl />\n        </Stack>\n        <Stack direction={{ lg: 'row', xs: 'column' }} gap={2} width={{ lg: '50%', xs: '100%' }}>\n          <CreditCardCvvWithFormControl />\n          <CreditCardExpirationWithFormControl />\n        </Stack>\n      </Stack>\n      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n        <Stack width={{ md: '25%', xs: '100%' }}>\n          <CreditCardZipWithFormControl />\n        </Stack>\n        <Stack width={{ md: '75%', xs: '100%' }}>\n          <CreditCardEmailWithFormControl />\n        </Stack>\n      </Stack>\n    </>\n  )\n}\n","import { usePromise } from '@xylabs/react-promise'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\nimport { ArchivistFormGroupStorage, FormGroupParams } from '@xyo-network/react-form-group'\n\nimport { CreditCardInput } from '../../models/index.js'\n\nconst StorageNameSpace = 'credit-card-fields'\n\nconst calculateTTL = (months = 6) => {\n  const MS_PER_DAY = 24 * 60 * 60 * 1000\n  const DAYS_PER_MONTH = 30.44\n  return months * DAYS_PER_MONTH * MS_PER_DAY\n}\n\nexport const useFormStorage = () => {\n  return usePromise(async () => {\n    const localStorageArchivist = await StorageArchivist.create({\n      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },\n    })\n    const sessionStorageArchivist = await StorageArchivist.create({\n      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'session' },\n    })\n\n    const storage = {\n      sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),\n      storage: new ArchivistFormGroupStorage(localStorageArchivist),\n    }\n\n    return { serialize: true, storage, ttlStorage: calculateTTL() } as FormGroupParams<CreditCardInput>\n  }, [])\n}\n"],"mappings":"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","names":["valid","import_assert","import_react_form_group","import_card_validator","CONTROL_NAME","valid","import_react_form_group","import_card_validator","CONTROL_NAME","valid","import_react_form_group","CONTROL_NAME","import_react_form_group","import_react_form_group","import_card_validator","CONTROL_NAME","valid","MuiFormControl","import_react","import_react_shared","import_react_form_group","import_react","import_jsx_runtime","formGroup","import_react_shared","import_react","value","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_material","import_react","type","import_jsx_runtime","import_jsx_runtime","import_material","import_assert","import_material","import_jsx_runtime","import_react_form_group","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.ts","../../src/controls/CreditCardCvv.ts","../../src/utils/umask.ts","../../src/controls/CreditCardExpiry.ts","../../src/controls/CreditCardNumber.ts","../../src/controls/Email.ts","../../src/controls/Name.ts","../../src/controls/Zip.ts","../../src/components/controls/card/FormControlTextField.tsx","../../src/components/controls/card/cvv/use.tsx","../../src/context/FormGroupCreditCardContext.ts","../../src/context/FormGroupCreditCardProvider.tsx","../../src/context/useFormGroupWithCreditCard.tsx","../../src/components/controls/card/useCreditCardFormControl.tsx","../../src/components/controls/card/cvv/Cvv.tsx","../../src/components/controls/card/Email.tsx","../../src/components/controls/card/Expiration.tsx","../../src/components/controls/card/Name.tsx","../../src/components/controls/card/number/Number.tsx","../../src/components/img/index.ts","../../src/components/controls/card/Options.ts","../../src/components/controls/card/number/use.tsx","../../src/components/controls/card/Zip.tsx","../../src/components/form/Form.tsx","../../src/components/support/Fields.ts","../../src/components/support/validateCreditCardInputs.ts","../../src/models/CreditCardInput.ts","../../src/components/form/InputFieldsStack.tsx","../../src/components/form/useFormStorage.tsx"],"sourcesContent":["export * from './components/index.js'\nexport * from './context/index.js'\nexport * from './controls/index.js'\nexport * from './models/index.js'\nexport * from './utils/index.js'\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'cvv'\n\nexport class CreditCardCvvFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your card cvc is invalid.'\n\n  override pattern = /^\\d{0,4}$/\n  override patternStrict = /^\\d{1,4}$/\n\n  override props = {\n    autoComplete: 'cc-csc',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: 'CVC',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  get cardNumberFormControl() {\n    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n  }\n\n  override blurError(value: string) {\n    const num = this.cardNumberFormControl.value\n    const max = this.getCardNumberCvcMax(num)\n    const cvvValidation = valid.cvv(value, max)\n    if (cvvValidation.isValid) {\n      this.setError('')\n      this.setStatus('VALID')\n    } else {\n      this.setError(this.invalidMessage)\n      this.setStatus('INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const num = this.cardNumberFormControl.value\n      const max = this.getCardNumberCvcMax(num)\n      const cvvValidation = valid.cvv(value, max)\n      if (cvvValidation.isPotentiallyValid) {\n        this.setError('')\n        this.setStatus('VALID')\n      } else {\n        this.setError('Your card cvc is invalid.')\n        this.setStatus('INVALID')\n      }\n    } else {\n      this.setError(this.invalidMessage)\n      this.setStatus('INVALID')\n    }\n  }\n\n  setCardNumberFormControl(cardNumberFormControl: AbstractControl) {\n    this._cardNumberFormControl = cardNumberFormControl\n  }\n\n  private getCardNumberCvcMax(num?: string) {\n    if (!num) return 3\n    const numberValidation = valid.number(num)\n    return numberValidation.card ? numberValidation.card.code.size : 3\n  }\n}\n","export function unmask(value: string) {\n  return value.replaceAll(/\\D/g, '')\n}\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'expiration'\n\nexport class CreditCardExpirationFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase {\n  override invalidMessage = 'Card Expiration is invalid'\n\n  override pattern = /^\\d{0,4}$/\n  override patternStrict = /^\\d{1,4}$/\n\n  override props = {\n    autoComplete: 'cc-exp',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: 'MM / YY',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  get cardNumberFormControl() {\n    return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n  }\n\n  override blurError(value: string) {\n    const unmasked = unmask(value)\n    const expirationValid = valid.expirationDate(unmasked)\n    if (!unmasked || (unmasked && unmasked.length !== 4)) {\n      this.setErrorAndValidity('Your card expiration is incomplete.', 'INVALID')\n    } else if (expirationValid.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const expirationValid = valid.expirationDate(unmasked)\n    if (expirationValid.isPotentiallyValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else if (expirationValid.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n    }\n  }\n\n  override mask(value: string) {\n    if (/^[2-9]/.test(unmask(value))) {\n      return this.makeMask(' / ', 2)(`0${value}`)\n    }\n    return this.makeMask(' / ', 2)(value)\n  }\n\n  private makeMask(separator: string, limit: number) {\n    return (value: string) => {\n      const output: string[] = []\n      // eslint-disable-next-line unicorn/no-for-loop\n      for (let i = 0; i < value.length; i++) {\n        if (i !== 0 && i % limit === 0) {\n          output.push(separator)\n        }\n\n        output.push(value[i])\n      }\n\n      return output.join('')\n    }\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase, SetOptions, ValidControlValue } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'cardNumber2'\n\nexport class CreditCardNumberFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  creditCardType: string = ''\n\n  override invalidMessage = 'Card Number is invalid'\n\n  override pattern = /^(\\d+)?$/\n  override patternStrict = /^\\d+$/\n\n  override props = {\n    autoComplete: 'cc-number',\n    autoCorrect: 'off',\n    id: CONTROL_NAME,\n    inputMode: 'numeric',\n    name: CONTROL_NAME,\n    placeholder: '1234 1234 1234 1234',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const unmasked = unmask(value)\n    const numberValidation = valid.number(unmasked)\n    if (!numberValidation.isValid) {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n      return\n    }\n    this.setErrorAndValidity('', 'VALID')\n  }\n\n  override changeError(value: string) {\n    const unmasked = unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const numberValidation = valid.number(unmasked)\n      if (!numberValidation.isPotentiallyValid) {\n        this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n        return\n      }\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  earlyNumberCheck(number: string) {\n    switch (number) {\n      case '4': {\n        this.setCreditCardType('visa')\n        break\n      }\n      case '5': {\n        this.setCreditCardType('mastercard')\n        break\n      }\n      case '3': {\n        this.setCreditCardType('amex')\n        break\n      }\n      case '6': {\n        this.setCreditCardType('discover')\n        break\n      }\n      default: {\n        this.setCreditCardType('')\n      }\n    }\n  }\n\n  override getCursorPosition() {\n    if (this.value) {\n      const previousValue = this.previousValue ?? ''\n      const unmasked = unmask(this.value)\n      const numberValidation = valid.number(unmasked)\n      const card = numberValidation.card\n      const lengthChange = this.value.length - (previousValue?.length ?? 0)\n      const unmaskedChange = unmask(this.value).length - unmask(previousValue).length\n\n      if (card) {\n        const gaps = card.gaps\n        const oldCursor = this.cursorPosition.previous ?? 0\n        const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length\n        const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length\n        const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange\n        return newCursor\n      }\n    }\n\n    return\n  }\n\n  override mask(value: ValidControlValue = '') {\n    const unmasked = unmask(value)\n    const numberValidation = valid.number(unmasked)\n    const card = numberValidation.card\n\n    if (card) {\n      const max = card.lengths.includes(16) ? 16 : card.lengths[0]\n      const gaps = [...card.gaps, max]\n      const newVal = gaps\n        .map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap))\n        .filter(Boolean)\n        .join(' ')\n\n      return newVal\n    }\n\n    return value\n  }\n\n  onCreditCardTypeChange: (type: string) => void = () => {}\n\n  setCreditCardType(type: string) {\n    this.creditCardType = type\n    this.onCreditCardTypeChange(type)\n  }\n\n  override setValue(value = '', options: SetOptions) {\n    const umMasked = this.unmask(value)\n    super.setValue(umMasked, options)\n    this.earlyNumberCheck(umMasked.charAt(0))\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nconst CONTROL_NAME = 'Email'\n\nexport class CreditCardEmailFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your email is invalid.'\n\n  override pattern = /^.*$/\n  override patternStrict = /^([\\w+.\\-])+@(([\\dA-Za-z-])+\\.)+([\\dA-Za-z]{2,4})+$/\n\n  override props = {\n    autoComplete: 'email',\n    autoCorrect: 'off',\n    id: CONTROL_NAME.toLocaleLowerCase(),\n    name: CONTROL_NAME.toLocaleLowerCase(),\n    placeholder: 'jerry.smith@email.com',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: false, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const match = value.match(this.patternStrict)\n    this.updateValidation(match)\n  }\n\n  override changeError(value: string) {\n    if (this.error) {\n      this.blurError(value)\n    }\n  }\n\n  private updateValidation(match: RegExpMatchArray | null) {\n    if (match) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nexport class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override required = true\n\n  constructor(\n    private nameLabel: string,\n    autoCompleteLabel: string,\n    placeHolder: string,\n  ) {\n    super()\n    super.setName(nameLabel)\n    this.setSerializeSettings({ sensitive: false, serializable: true })\n    this.invalidMessage = `${nameLabel} name is missing.`\n    this.props = {\n      autoComplete: autoCompleteLabel,\n      autoCorrect: 'off',\n      id: this.nameLabel,\n      name: this.nameLabel,\n      placeholder: placeHolder,\n      spellCheck: false,\n    } as TProps\n  }\n\n  override blurError(value: string) {\n    if (value) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  override changeError(value: string): void {\n    this.blurError(value)\n  }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.js'\n\nconst CONTROL_NAME = 'Zip'\n\nexport class CreditCardZipFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n  override invalidMessage = 'Your zip code is invalid.'\n\n  override props = {\n    autoComplete: 'postal-code',\n    autoCorrect: 'off',\n    id: CONTROL_NAME.toLocaleLowerCase(),\n    name: CONTROL_NAME.toLocaleLowerCase(),\n    placeholder: '12345',\n    spellCheck: false,\n  } as TProps\n\n  override required = true\n\n  override unmask = unmask\n\n  constructor() {\n    super()\n    super.setName(CONTROL_NAME)\n    this.setSerializeSettings({ sensitive: true, serializable: true })\n  }\n\n  override blurError(value: string) {\n    const postalCodeValidation = valid.postalCode(value)\n    if (postalCodeValidation.isValid) {\n      this.setErrorAndValidity('', 'VALID')\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n\n  override changeError(value: string) {\n    const unmasked = this.unmask(value)\n    const match = unmasked.match(this.patternStrict)\n    if (match) {\n      const postalCodeValidation = valid.postalCode(value)\n      if (postalCodeValidation.isPotentiallyValid) {\n        this.setErrorAndValidity('', 'VALID')\n      } else {\n        this.setErrorAndValidity('Your zip code is invalid.', 'INVALID')\n      }\n    } else {\n      this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n    }\n  }\n}\n","import { FormControl as MuiFormControl, StandardTextFieldProps, TextField } from '@mui/material'\nimport { FormControl } from '@xyo-network/react-form-group'\nimport { LabeledTextFieldWrapper } from '@xyo-network/react-shared'\nimport { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'\n\nexport interface FormControlTextFieldProps extends StandardTextFieldProps {\n  fieldLabel: string\n  formControl?: FormControl<StandardTextFieldProps>\n  formControlError?: string\n}\n\nexport const FormControlTextField = forwardRef<HTMLDivElement, FormControlTextFieldProps>(\n  ({ formControl, formControlError, fieldLabel = '', ...props }, ref) => {\n    const { name } = formControl?.props ?? {}\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      formControl?.setValue(event.target.value)\n    }\n\n    const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n      formControl?.blurError?.(event.target.value)\n      formControl?.setTouched(true)\n    }\n\n    return (\n      <MuiFormControl fullWidth>\n        <LabeledTextFieldWrapper label={fieldLabel}>\n          <label htmlFor={name}>\n            <TextField\n              error={!!formControlError}\n              helperText={formControlError || ' '}\n              fullWidth\n              hiddenLabel\n              name={name}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n                // See - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n                // .currentTarget is the div in mui that emits the event, .target is the input element\n                // Unfortunately, the type definitions do not let you pass a generic specifically for target, only currentTarget\n                const selectionEnd = (event.target as HTMLInputElement).selectionEnd\n                if (selectionEnd && formControl) {\n                  formControl.cursorPosition.previous = selectionEnd\n                }\n              }}\n              ref={ref}\n              required={formControl?.required}\n              size={'small'}\n              variant=\"filled\"\n              {...props}\n            />\n          </label>\n        </LabeledTextFieldWrapper>\n      </MuiFormControl>\n    )\n  },\n)\n\nFormControlTextField.displayName = 'FormControlTextField'\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../../context/index.js'\nimport { CreditCardCvvFormControl } from '../../../../controls/index.js'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.js'\n\nexport const useCreditCardCvvFormControl = (\n  formControlName?: string,\n  cardNumberControlName = 'cardNumber',\n  control?: new () => FormControlBase<StandardTextFieldProps>,\n) => {\n  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control)\n\n  // only use FormGroupContext when name is passed\n  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName)\n\n  useEffect(() => {\n    if (creditCardNumberFormControl) {\n      const castControl = creditCardFormControl as CreditCardCvvFormControl\n      if (!castControl.setCardNumberFormControl) {\n        console.error('cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl')\n        return\n      }\n      castControl.setCardNumberFormControl(creditCardNumberFormControl)\n    }\n  }, [creditCardFormControl, creditCardNumberFormControl])\n\n  return { creditCardFormControl, error, inputRef, value }\n}\n","import { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'\nimport { createContextEx } from '@xyo-network/react-shared'\n\nimport { CreditCardInput } from '../models/index.js'\n\nexport const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()\n","import { Payload } from '@xyo-network/payload-model'\nimport { FormGroup, FormGroupParams } from '@xyo-network/react-form-group'\nimport { PropsWithChildren, useMemo } from 'react'\n\nimport { CreditCardInput } from '../models/CreditCardInput.js'\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'\n\nexport interface FormGroupCreditCardProviderProps<TStorage extends Payload = Payload> extends PropsWithChildren {\n  params?: FormGroupParams<TStorage>\n}\n\nexport const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({ children, params, ...props }) => {\n  const formGroup = useMemo(() => {\n    const formGroup = new FormGroup<CreditCardInput, CreditCardInput>(params)\n    return formGroup\n  }, [params])\n\n  return (\n    <FormGroupCreditCardContext.Provider value={{ formGroup, provided: true }} {...props}>\n      {children}\n    </FormGroupCreditCardContext.Provider>\n  )\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'\n\nexport const useFormGroupWithCreditCardInput = (required = false) => {\n  return useContextEx(FormGroupCreditCardContext, 'FormGroupCreditCard', required)\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'\nimport { useMemo, useRef, useState } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../context/index.js'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StableDefaultArgs: any[] = []\n\nexport const useCreditCardFormControl = (\n  formControlName?: string,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  args: any[] = StableDefaultArgs,\n) => {\n  const [error, setError] = useState('')\n  const [value, setValue] = useState<ValidControlValue>('')\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // only use FormGroupContext when name is passed\n  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n  const creditCardFormControl = useMemo(() => {\n    if (Control) {\n      const control = new Control(...args)\n      control.registerOnErrorChange((newError: string) => setError(newError))\n      control.registerOnChange((value: ValidControlValue) => setValue(value))\n\n      if (formControlName) formGroup?.registerControl(formControlName, control)\n      return control\n    }\n  }, [Control, args, formControlName, formGroup])\n\n  return { creditCardFormControl, error, inputRef, value }\n}\n","import { CreditCardCvvFormControl } from '../../../../controls/index.js'\nimport { WithFormControlProps } from '../../WithFormControlProps.js'\nimport { FormControlTextField } from '../FormControlTextField.js'\nimport { useCreditCardCvvFormControl } from './use.js'\n\nexport const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { CreditCardEmailFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardEmailWithFormControl: React.FC<WithFormControlProps> = ({\n  formControlName = 'emailAddress',\n  fieldLabel = 'Email',\n  ...props\n}) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { CreditCardExpirationFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardExpirationWithFormControl: React.FC<WithFormControlProps> = ({\n  formControlName = 'expiration',\n  fieldLabel = 'Expiration',\n  ...props\n}) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      inputRef={inputRef}\n      formControl={creditCardFormControl}\n      fieldLabel={fieldLabel}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      value={value}\n      {...expirationProps}\n      {...props}\n    />\n  )\n}\n","import { useMemo } from 'react'\n\nimport { NameFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport interface NameWithFormControlProps extends WithFormControlProps {\n  autoCompleteLabel: string\n}\n\nexport const NameWithFormControl: React.FC<NameWithFormControlProps> = ({\n  autoCompleteLabel,\n  fieldLabel = 'Name',\n  formControlName,\n  placeholder,\n  tabIndex,\n  ...props\n}) => {\n  const args = useMemo(() => [fieldLabel, autoCompleteLabel, placeholder ?? ''], [autoCompleteLabel, fieldLabel, placeholder])\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { InputAdornment } from '@mui/material'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.js'\nimport { WithFormControlProps } from '../../WithFormControlProps.js'\nimport { FormControlTextField } from '../FormControlTextField.js'\nimport { CreditCardData } from '../Options.js'\nimport { useCreditCardNumberFormControl } from './use.js'\n\nexport const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = ({\n  fieldLabel = 'Card Number',\n  formControlName = 'cardNumber',\n  ...props\n}) => {\n  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputRef={inputRef}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}\n      InputProps={{\n        startAdornment:\n          type.length > 0 ?\n            <InputAdornment position=\"start\">\n              <img height={'30px'} width={'40px'} src={CreditCardData[type].icon} />\n            </InputAdornment>\n          : null,\n      }}\n      value={value}\n      {...cardProps}\n      {...props}\n    />\n  )\n}\n","export { default as AmexIcon } from './american-express.svg'\nexport { default as DiscoverIcon } from './discover.svg'\nexport { default as MastercardIcon } from './mastercard.svg'\nexport { default as VisaIcon } from './visa.svg'\n","import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.js'\n\nexport interface CreditCardInfo {\n  icon: string\n  name: string\n}\n\nexport interface CreditCardOptions {\n  amex: CreditCardInfo\n  discover: CreditCardInfo\n  mastercard: CreditCardInfo\n  visa: CreditCardInfo\n}\n\nexport const CreditCardData: CreditCardOptions = {\n  amex: { icon: AmexIcon, name: 'American Express' },\n  discover: { icon: DiscoverIcon, name: 'Discover' },\n  mastercard: { icon: MastercardIcon, name: 'Mastercard' },\n  visa: { icon: VisaIcon, name: 'Visa' },\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect, useState } from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.js'\nimport { CreditCardOptions } from '../Options.js'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.js'\n\nexport const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)\n  const [type, setType] = useState('' as keyof CreditCardOptions)\n\n  useEffect(() => {\n    if (creditCardFormControl) {\n      const castControl = creditCardFormControl as CreditCardNumberFormControl<StandardTextFieldProps>\n      if (!castControl.onCreditCardTypeChange) {\n        console.error('cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl')\n        return\n      }\n      castControl.onCreditCardTypeChange = (type: string) => setType(type as keyof CreditCardOptions)\n      castControl.onCursorChange = (cursor: number | undefined) => {\n        if (inputRef.current && cursor) {\n          inputRef.current.setSelectionRange(cursor, cursor)\n        }\n      }\n    }\n  }, [creditCardFormControl, inputRef])\n\n  return { creditCardFormControl, error, inputRef, type, value }\n}\n","import { CreditCardZipFormControl } from '../../../controls/index.js'\nimport { WithFormControlProps } from '../WithFormControlProps.js'\nimport { FormControlTextField } from './FormControlTextField.js'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.js'\n\nexport const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'zip', fieldLabel = 'Zip', ...props }) => {\n  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)\n  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n  return (\n    <FormControlTextField\n      fieldLabel={fieldLabel}\n      formControl={creditCardFormControl}\n      formControlError={error}\n      inputMode={inputMode}\n      inputProps={{ 'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n      inputRef={inputRef}\n      value={value}\n      {...cvcProps}\n      {...props}\n    />\n  )\n}\n","import { Stack } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { ErrorRender } from '@xyo-network/react-error'\nimport { useState } from 'react'\n\nimport { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.js'\nimport { validateCreditCardInputs } from '../support/index.js'\nimport { InputFieldsStack } from './InputFieldsStack.js'\nimport { CreditCardFormProps } from './Props.js'\nimport { useFormStorage } from './useFormStorage.js'\n\nexport const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({\n  ConfirmationButton,\n  onErrorDuringSubmit,\n  onInvalidSubmit,\n  onSuccessfulSubmit,\n  onValidSubmit,\n  ...props\n}) => {\n  const { formGroup } = useFormGroupWithCreditCardInput(true)\n  const [error, setError] = useState<Error>()\n\n  const handleConfirmPayment = async () => {\n    try {\n      if (!formGroup) {\n        throw new Error('formGroup is not defined')\n      }\n\n      formGroup.validateFields()\n\n      const errorSummary = formGroup.errorSummary\n\n      if (errorSummary.invalidFields.length > 0) {\n        onInvalidSubmit?.(errorSummary)\n      }\n\n      if (errorSummary.invalidFields.length > 0) return\n\n      const formOutput = validateCreditCardInputs(formGroup.values)\n\n      await onValidSubmit?.(formOutput)\n\n      onSuccessfulSubmit?.()\n    } catch (error) {\n      onErrorDuringSubmit?.(error as Error)\n      setError(error as Error)\n    }\n  }\n\n  return (\n    <>\n      <ErrorRender error={error} />\n      <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width={'100%'} gap={2} {...props}>\n        <Stack flexDirection={'column'} sx={{ width: '100%' }} gap={2}>\n          <InputFieldsStack />\n          {ConfirmationButton ?\n            <ConfirmationButton onClick={handleConfirmPayment} variant=\"contained\" sx={{ alignSelf: 'end' }}>\n              Confirm Payment\n            </ConfirmationButton>\n          : null}\n        </Stack>\n      </FlexCol>\n    </>\n  )\n}\n\nexport const CreditCardFormFlexboxWithFormGroupProvider: React.FC<CreditCardFormProps> = (props) => {\n  const [params, error] = useFormStorage()\n  return (\n    <FormGroupCreditCardProvider params={params}>\n      <ErrorRender error={error} />\n      <CreditCardFormFlexbox {...props} />\n    </FormGroupCreditCardProvider>\n  )\n}\n","export const NameFields = ['firstName', 'lastName'] as const\nexport const NameLabels = ['First', 'Last'] as const\nexport type NameLabel = (typeof NameLabels)[number]\n","import { assertEx } from '@xylabs/assert'\n\nimport { CreditCardInput, CreditCardInputSchema } from '../../models/index.js'\n\nexport const validateCreditCardInputs = (values: CreditCardInput): CreditCardInput => {\n  return {\n    cardNumber: assertEx(values.cardNumber, () => 'card number is not a string') as string,\n    cvc: assertEx(values.cvc, () => 'card cvc is not a string') as string,\n    emailAddress: assertEx(values.emailAddress, () => 'emailAddress is not a string') as string,\n    expiration: assertEx(values.expiration, () => 'card expiration is not a string') as string,\n    firstName: assertEx(values.firstName, () => 'first name is not a string') as string,\n    lastName: assertEx(values.lastName, () => 'last name is not a string') as string,\n    schema: CreditCardInputSchema,\n    timestamp: values.timestamp,\n    zip: assertEx(values.zip, () => 'zip is not a string') as string,\n  }\n}\n","import { isPayloadOfSchemaTypeWithMeta, Payload } from '@xyo-network/payload-model'\n\nexport const CreditCardInputSchema = 'network.xyo.credit.card.input' as const\nexport type CreditCardInputSchema = typeof CreditCardInputSchema\n\nexport type CreditCardInputFields = {\n  cardNumber: string\n  cvc: string\n  emailAddress: string\n  expiration: string\n  firstName: string\n  lastName: string\n  timestamp: number\n  zip: string\n}\n\nexport type CreditCardInput = Payload<CreditCardInputFields, CreditCardInputSchema>\n\nexport const isCreditCardInput = isPayloadOfSchemaTypeWithMeta<CreditCardInput>(CreditCardInputSchema)\n","import { Stack, StackProps } from '@mui/material'\nimport { PropsWithChildren } from 'react'\n\nimport {\n  CreditCardCvvWithFormControl,\n  CreditCardEmailWithFormControl,\n  CreditCardExpirationWithFormControl,\n  CreditCardNumberWithFormControl,\n  CreditCardZipWithFormControl,\n  NameWithFormControl,\n} from '../controls/index.js'\n\nexport interface InputFieldsStackProps extends StackProps, PropsWithChildren {}\n\nexport const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {\n  const { sx } = props\n  return (\n    <>\n      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n        <NameWithFormControl autoCompleteLabel=\"given-name\" fieldLabel={'First'} formControlName={'firstName'} placeholder=\"Jerry\" />\n        <NameWithFormControl autoCompleteLabel=\"family-name\" fieldLabel={'Last'} formControlName={'lastName'} placeholder=\"Smith\" />\n      </Stack>\n      <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>\n        <Stack width={{ lg: '50%', xs: '100%' }}>\n          <CreditCardNumberWithFormControl />\n        </Stack>\n        <Stack direction={{ lg: 'row', xs: 'column' }} gap={2} width={{ lg: '50%', xs: '100%' }}>\n          <CreditCardCvvWithFormControl />\n          <CreditCardExpirationWithFormControl />\n        </Stack>\n      </Stack>\n      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n        <Stack width={{ md: '25%', xs: '100%' }}>\n          <CreditCardZipWithFormControl />\n        </Stack>\n        <Stack width={{ md: '75%', xs: '100%' }}>\n          <CreditCardEmailWithFormControl />\n        </Stack>\n      </Stack>\n    </>\n  )\n}\n","import { usePromise } from '@xylabs/react-promise'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\nimport { ArchivistFormGroupStorage, FormGroupParams } from '@xyo-network/react-form-group'\n\nimport { CreditCardInput } from '../../models/index.js'\n\nconst StorageNameSpace = 'credit-card-fields'\n\nconst calculateTTL = (months = 6) => {\n  const MS_PER_DAY = 24 * 60 * 60 * 1000\n  const DAYS_PER_MONTH = 30.44\n  return months * DAYS_PER_MONTH * MS_PER_DAY\n}\n\nexport const useFormStorage = () => {\n  return usePromise(async () => {\n    const localStorageArchivist = await StorageArchivist.create({\n      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },\n    })\n    const sessionStorageArchivist = await StorageArchivist.create({\n      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'session' },\n    })\n\n    const storage = {\n      sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),\n      storage: new ArchivistFormGroupStorage(localStorageArchivist),\n    }\n\n    return { serialize: true, storage, ttlStorage: calculateTTL() } as FormGroupParams<CreditCardInput>\n  }, [])\n}\n"],"mappings":"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","names":["valid","import_assert","import_react_form_group","import_card_validator","CONTROL_NAME","valid","import_react_form_group","import_card_validator","CONTROL_NAME","valid","import_react_form_group","CONTROL_NAME","import_react_form_group","import_react_form_group","import_card_validator","CONTROL_NAME","valid","MuiFormControl","import_react","import_react_shared","import_react_form_group","import_react","import_jsx_runtime","formGroup","import_react_shared","import_react","value","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_material","import_react","type","import_jsx_runtime","import_jsx_runtime","import_material","import_react","import_assert","import_material","import_jsx_runtime","import_react_form_group","import_jsx_runtime","error"]}

package/dist/node/index.js

@@ -446,7 +446,8 @@ var useFormGroupWithCreditCardInput = (required = false) => {
 
 // src/components/controls/card/useCreditCardFormControl.tsx
 import { useMemo as useMemo2, useRef, useState } from "react";
-var useCreditCardFormControl = (formControlName, Control, args = []) => {
+var StableDefaultArgs = [];
+var useCreditCardFormControl = (formControlName, Control, args = StableDefaultArgs) => {
   const [error, setError] = useState("");
   const [value, setValue] = useState("");
   const inputRef = useRef(null);
@@ -456,11 +457,6 @@ var useCreditCardFormControl = (formControlName, Control, args = []) => {
       const control = new Control(...args);
       control.registerOnErrorChange((newError) => setError(newError));
       control.registerOnChange((value2) => setValue(value2));
-      control.onCursorChange = (cursor) => {
-        if (inputRef.current && cursor) {
-          inputRef.current.setSelectionRange(cursor, cursor);
-        }
-      };
       if (formControlName) formGroup == null ? void 0 : formGroup.registerControl(formControlName, control);
       return control;
     }
@@ -510,7 +506,11 @@ var CreditCardCvvWithFormControl = ({ formControlName = "cvc", fieldLabel = "CVC
 
 // src/components/controls/card/Email.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var CreditCardEmailWithFormControl = ({ formControlName = "email", fieldLabel = "Email", ...props }) => {
+var CreditCardEmailWithFormControl = ({
+  formControlName = "emailAddress",
+  fieldLabel = "Email",
+  ...props
+}) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
   const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
   return /* @__PURE__ */ jsx4(
@@ -608,12 +608,17 @@ var useCreditCardNumberFormControl = (formControlName, control) => {
   const [type, setType] = useState2("");
   useEffect2(() => {
     if (creditCardFormControl) {
-      const castInstance = creditCardFormControl;
-      if (!castInstance.onCreditCardTypeChange) {
+      const castControl = creditCardFormControl;
+      if (!castControl.onCreditCardTypeChange) {
         console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
         return;
       }
-      castInstance.onCreditCardTypeChange = (type2) => setType(type2);
+      castControl.onCreditCardTypeChange = (type2) => setType(type2);
+      castControl.onCursorChange = (cursor) => {
+        if (inputRef.current && cursor) {
+          inputRef.current.setSelectionRange(cursor, cursor);
+        }
+      };
     }
   }, [creditCardFormControl, inputRef]);
   return { creditCardFormControl, error, inputRef, type, value };
@@ -672,6 +677,7 @@ var CreditCardZipWithFormControl = ({ formControlName = "zip", fieldLabel = "Zip
 import { Stack as Stack2 } from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
 import { ErrorRender } from "@xyo-network/react-error";
+import { useState as useState3 } from "react";
 
 // src/components/support/Fields.ts
 var NameFields = ["firstName", "lastName"];
@@ -690,12 +696,12 @@ var validateCreditCardInputs = (values) => {
   return {
     cardNumber: assertEx3(values.cardNumber, () => "card number is not a string"),
     cvc: assertEx3(values.cvc, () => "card cvc is not a string"),
-    emailAddress: assertEx3(values.emailAddress, () => "email is not a string"),
+    emailAddress: assertEx3(values.emailAddress, () => "emailAddress is not a string"),
     expiration: assertEx3(values.expiration, () => "card expiration is not a string"),
     firstName: assertEx3(values.firstName, () => "first name is not a string"),
     lastName: assertEx3(values.lastName, () => "last name is not a string"),
     schema: CreditCardInputSchema,
-    timestamp: assertEx3(values.timestamp, () => "timestamp is not a number"),
+    timestamp: values.timestamp,
     zip: assertEx3(values.zip, () => "zip is not a string")
   };
 };
@@ -751,34 +757,43 @@ var useFormStorage = () => {
 };
 
 // src/components/form/Form.tsx
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var CreditCardFormFlexbox = ({
   ConfirmationButton,
-  onFailedSubmit,
+  onErrorDuringSubmit,
+  onInvalidSubmit,
   onSuccessfulSubmit,
   onValidSubmit,
   ...props
 }) => {
   const { formGroup } = useFormGroupWithCreditCardInput(true);
+  const [error, setError] = useState3();
   const handleConfirmPayment = async () => {
-    if (!formGroup) {
-      console.error("formGroup is not defined");
-      return;
-    }
-    formGroup.validateFields();
-    const errorSummary = formGroup.errorSummary;
-    if (errorSummary.invalidFields.length > 0) {
-      onFailedSubmit == null ? void 0 : onFailedSubmit(errorSummary);
+    try {
+      if (!formGroup) {
+        throw new Error("formGroup is not defined");
+      }
+      formGroup.validateFields();
+      const errorSummary = formGroup.errorSummary;
+      if (errorSummary.invalidFields.length > 0) {
+        onInvalidSubmit == null ? void 0 : onInvalidSubmit(errorSummary);
+      }
+      if (errorSummary.invalidFields.length > 0) return;
+      const formOutput = validateCreditCardInputs(formGroup.values);
+      await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
+      onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
+    } catch (error2) {
+      onErrorDuringSubmit == null ? void 0 : onErrorDuringSubmit(error2);
+      setError(error2);
     }
-    if (errorSummary.invalidFields.length > 0) return;
-    const formOutput = validateCreditCardInputs(formGroup.values);
-    await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
-    onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
   };
-  return /* @__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
-  ] }) });
+  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
+    ] }) })
+  ] });
 };
 var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
   const [params, error] = useFormStorage();
@@ -807,6 +822,7 @@ export {
   FormControlTextField,
   FormGroupCreditCardContext,
   FormGroupCreditCardProvider,
+  InputFieldsStack,
   default4 as MastercardIcon,
   NameFields,
   NameFormControl,
@@ -819,6 +835,7 @@ export {
   useCreditCardFormControl,
   useCreditCardNumberFormControl,
   useFormGroupWithCreditCardInput,
+  useFormStorage,
   validateCreditCardInputs
 };
 //# sourceMappingURL=index.js.map