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

package/dist/neutral/index.cjs

@@ -0,0 +1,855 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AmexIcon: () => import_american_express.default,
+  CreditCardCvvFormControl: () => CreditCardCvvFormControl,
+  CreditCardCvvWithFormControl: () => CreditCardCvvWithFormControl,
+  CreditCardData: () => CreditCardData,
+  CreditCardEmailFormControl: () => CreditCardEmailFormControl,
+  CreditCardEmailWithFormControl: () => CreditCardEmailWithFormControl,
+  CreditCardExpirationFormControl: () => CreditCardExpirationFormControl,
+  CreditCardExpirationWithFormControl: () => CreditCardExpirationWithFormControl,
+  CreditCardFormFlexbox: () => CreditCardFormFlexbox,
+  CreditCardFormFlexboxWithFormGroupProvider: () => CreditCardFormFlexboxWithFormGroupProvider,
+  CreditCardInputSchema: () => CreditCardInputSchema,
+  CreditCardNumberFormControl: () => CreditCardNumberFormControl,
+  CreditCardNumberWithFormControl: () => CreditCardNumberWithFormControl,
+  CreditCardZipFormControl: () => CreditCardZipFormControl,
+  CreditCardZipWithFormControl: () => CreditCardZipWithFormControl,
+  DiscoverIcon: () => import_discover.default,
+  FormControlTextField: () => FormControlTextField,
+  FormGroupCreditCardContext: () => FormGroupCreditCardContext,
+  FormGroupCreditCardProvider: () => FormGroupCreditCardProvider,
+  MastercardIcon: () => import_mastercard.default,
+  NameFields: () => NameFields,
+  NameFormControl: () => NameFormControl,
+  NameLabels: () => NameLabels,
+  NameWithFormControl: () => NameWithFormControl,
+  VisaIcon: () => import_visa.default,
+  isCreditCardInput: () => isCreditCardInput,
+  unmask: () => unmask,
+  useCreditCardCvvFormControl: () => useCreditCardCvvFormControl,
+  useCreditCardFormControl: () => useCreditCardFormControl,
+  useCreditCardNumberFormControl: () => useCreditCardNumberFormControl,
+  useFormGroupWithCreditCardInput: () => useFormGroupWithCreditCardInput,
+  validateCreditCardInputs: () => validateCreditCardInputs
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/controls/CreditCardCvv.ts
+var import_assert = require("@xylabs/assert");
+var import_react_form_group = require("@xyo-network/react-form-group");
+var import_card_validator = __toESM(require("card-validator"), 1);
+
+// src/utils/umask.ts
+function unmask(value) {
+  return value.replaceAll(/\D/g, "");
+}
+
+// src/controls/CreditCardCvv.ts
+var CONTROL_NAME = "cvv";
+var CreditCardCvvFormControl = class extends import_react_form_group.FormControlBase {
+  invalidMessage = "Your card cvc is invalid.";
+  pattern = /^\d{0,4}$/;
+  patternStrict = /^\d{1,4}$/;
+  props = {
+    autoComplete: "cc-csc",
+    autoCorrect: "off",
+    id: CONTROL_NAME,
+    inputMode: "numeric",
+    name: CONTROL_NAME,
+    placeholder: "CVC",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  _cardNumberFormControl = void 0;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME);
+    this.setSerializeSettings({ sensitive: true, serializable: true });
+  }
+  get cardNumberFormControl() {
+    return (0, import_assert.assertEx)(this._cardNumberFormControl, () => "Card number form control is not set");
+  }
+  blurError(value) {
+    const num = this.cardNumberFormControl.value;
+    const max = this.getCardNumberCvcMax(num);
+    const cvvValidation = import_card_validator.default.cvv(value, max);
+    if (cvvValidation.isValid) {
+      this.setError("");
+      this.setStatus("VALID");
+    } else {
+      this.setError(this.invalidMessage);
+      this.setStatus("INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const num = this.cardNumberFormControl.value;
+      const max = this.getCardNumberCvcMax(num);
+      const cvvValidation = import_card_validator.default.cvv(value, max);
+      if (cvvValidation.isPotentiallyValid) {
+        this.setError("");
+        this.setStatus("VALID");
+      } else {
+        this.setError("Your card cvc is invalid.");
+        this.setStatus("INVALID");
+      }
+    } else {
+      this.setError(this.invalidMessage);
+      this.setStatus("INVALID");
+    }
+  }
+  setCardNumberFormControl(cardNumberFormControl) {
+    this._cardNumberFormControl = cardNumberFormControl;
+  }
+  getCardNumberCvcMax(num) {
+    if (!num) return 3;
+    const numberValidation = import_card_validator.default.number(num);
+    return numberValidation.card ? numberValidation.card.code.size : 3;
+  }
+};
+
+// src/controls/CreditCardExpiry.ts
+var import_assert2 = require("@xylabs/assert");
+var import_react_form_group2 = require("@xyo-network/react-form-group");
+var import_card_validator2 = __toESM(require("card-validator"), 1);
+var CONTROL_NAME2 = "expiration";
+var CreditCardExpirationFormControl = class extends import_react_form_group2.FormControlBase {
+  invalidMessage = "Card Expiration is invalid";
+  pattern = /^\d{0,4}$/;
+  patternStrict = /^\d{1,4}$/;
+  props = {
+    autoComplete: "cc-exp",
+    autoCorrect: "off",
+    id: CONTROL_NAME2,
+    inputMode: "numeric",
+    name: CONTROL_NAME2,
+    placeholder: "MM / YY",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  _cardNumberFormControl = void 0;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME2);
+    this.setSerializeSettings({ sensitive: true, serializable: true });
+  }
+  get cardNumberFormControl() {
+    return (0, import_assert2.assertEx)(this._cardNumberFormControl, () => "Card number form control is not set");
+  }
+  blurError(value) {
+    const unmasked = unmask(value);
+    const expirationValid = import_card_validator2.default.expirationDate(unmasked);
+    if (!unmasked || unmasked && unmasked.length !== 4) {
+      this.setErrorAndValidity("Your card expiration is incomplete.", "INVALID");
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", "INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const expirationValid = import_card_validator2.default.expirationDate(unmasked);
+    if (expirationValid.isPotentiallyValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", "INVALID");
+    }
+  }
+  mask(value) {
+    if (/^[2-9]/.test(unmask(value))) {
+      return this.makeMask(" / ", 2)(`0${value}`);
+    }
+    return this.makeMask(" / ", 2)(value);
+  }
+  makeMask(separator, limit) {
+    return (value) => {
+      const output = [];
+      for (let i = 0; i < value.length; i++) {
+        if (i !== 0 && i % limit === 0) {
+          output.push(separator);
+        }
+        output.push(value[i]);
+      }
+      return output.join("");
+    };
+  }
+};
+
+// src/controls/CreditCardNumber.ts
+var import_react_form_group3 = require("@xyo-network/react-form-group");
+var import_card_validator3 = __toESM(require("card-validator"), 1);
+var CONTROL_NAME3 = "cardNumber2";
+var CreditCardNumberFormControl = class extends import_react_form_group3.FormControlBase {
+  creditCardType = "";
+  invalidMessage = "Card Number is invalid";
+  pattern = /^(\d+)?$/;
+  patternStrict = /^\d+$/;
+  props = {
+    autoComplete: "cc-number",
+    autoCorrect: "off",
+    id: CONTROL_NAME3,
+    inputMode: "numeric",
+    name: CONTROL_NAME3,
+    placeholder: "1234 1234 1234 1234",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME3);
+    this.setSerializeSettings({ sensitive: true, serializable: true });
+  }
+  blurError(value) {
+    const unmasked = unmask(value);
+    const numberValidation = import_card_validator3.default.number(unmasked);
+    if (!numberValidation.isValid) {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+      return;
+    }
+    this.setErrorAndValidity("", "VALID");
+  }
+  changeError(value) {
+    const unmasked = unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const numberValidation = import_card_validator3.default.number(unmasked);
+      if (!numberValidation.isPotentiallyValid) {
+        this.setErrorAndValidity(this.invalidMessage, "INVALID");
+        return;
+      }
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  earlyNumberCheck(number) {
+    switch (number) {
+      case "4": {
+        this.setCreditCardType("visa");
+        break;
+      }
+      case "5": {
+        this.setCreditCardType("mastercard");
+        break;
+      }
+      case "3": {
+        this.setCreditCardType("amex");
+        break;
+      }
+      case "6": {
+        this.setCreditCardType("discover");
+        break;
+      }
+      default: {
+        this.setCreditCardType("");
+      }
+    }
+  }
+  getCursorPosition() {
+    if (this.value) {
+      const previousValue = this.previousValue ?? "";
+      const unmasked = unmask(this.value);
+      const numberValidation = import_card_validator3.default.number(unmasked);
+      const card = numberValidation.card;
+      const lengthChange = this.value.length - (previousValue?.length ?? 0);
+      const unmaskedChange = unmask(this.value).length - unmask(previousValue).length;
+      if (card) {
+        const gaps = card.gaps;
+        const oldCursor = this.cursorPosition.previous ?? 0;
+        const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length;
+        const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length;
+        const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange;
+        return newCursor;
+      }
+    }
+    return;
+  }
+  mask(value = "") {
+    const unmasked = unmask(value);
+    const numberValidation = import_card_validator3.default.number(unmasked);
+    const card = numberValidation.card;
+    if (card) {
+      const max = card.lengths.includes(16) ? 16 : card.lengths[0];
+      const gaps = [...card.gaps, max];
+      const newVal = gaps.map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap)).filter(Boolean).join(" ");
+      return newVal;
+    }
+    return value;
+  }
+  onCreditCardTypeChange = () => {
+  };
+  setCreditCardType(type) {
+    this.creditCardType = type;
+    this.onCreditCardTypeChange(type);
+  }
+  setValue(value = "", options) {
+    const umMasked = this.unmask(value);
+    super.setValue(umMasked, options);
+    this.earlyNumberCheck(umMasked.charAt(0));
+  }
+};
+
+// src/controls/Email.ts
+var import_react_form_group4 = require("@xyo-network/react-form-group");
+var CONTROL_NAME4 = "Email";
+var CreditCardEmailFormControl = class extends import_react_form_group4.FormControlBase {
+  invalidMessage = "Your email is invalid.";
+  pattern = /^.*$/;
+  patternStrict = /^([\w+.\-])+@(([\dA-Za-z-])+\.)+([\dA-Za-z]{2,4})+$/;
+  props = {
+    autoComplete: "email",
+    autoCorrect: "off",
+    id: CONTROL_NAME4.toLocaleLowerCase(),
+    name: CONTROL_NAME4.toLocaleLowerCase(),
+    placeholder: "jerry.smith@email.com",
+    spellCheck: false
+  };
+  required = true;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME4);
+    this.setSerializeSettings({ sensitive: false, serializable: true });
+  }
+  blurError(value) {
+    const match = value.match(this.patternStrict);
+    this.updateValidation(match);
+  }
+  changeError(value) {
+    if (this.error) {
+      this.blurError(value);
+    }
+  }
+  updateValidation(match) {
+    if (match) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+};
+
+// src/controls/Name.ts
+var import_react_form_group5 = require("@xyo-network/react-form-group");
+var NameFormControl = class extends import_react_form_group5.FormControlBase {
+  constructor(nameLabel, autoCompleteLabel, placeHolder) {
+    super();
+    this.nameLabel = nameLabel;
+    super.setName(nameLabel);
+    this.setSerializeSettings({ sensitive: false, serializable: true });
+    this.invalidMessage = `${nameLabel} name is missing.`;
+    this.props = {
+      autoComplete: autoCompleteLabel,
+      autoCorrect: "off",
+      id: this.nameLabel,
+      name: this.nameLabel,
+      placeholder: placeHolder,
+      spellCheck: false
+    };
+  }
+  required = true;
+  blurError(value) {
+    if (value) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  changeError(value) {
+    this.blurError(value);
+  }
+};
+
+// src/controls/Zip.ts
+var import_react_form_group6 = require("@xyo-network/react-form-group");
+var import_card_validator4 = __toESM(require("card-validator"), 1);
+var CONTROL_NAME5 = "Zip";
+var CreditCardZipFormControl = class extends import_react_form_group6.FormControlBase {
+  invalidMessage = "Your zip code is invalid.";
+  props = {
+    autoComplete: "postal-code",
+    autoCorrect: "off",
+    id: CONTROL_NAME5.toLocaleLowerCase(),
+    name: CONTROL_NAME5.toLocaleLowerCase(),
+    placeholder: "12345",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME5);
+    this.setSerializeSettings({ sensitive: true, serializable: true });
+  }
+  blurError(value) {
+    const postalCodeValidation = import_card_validator4.default.postalCode(value);
+    if (postalCodeValidation.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const postalCodeValidation = import_card_validator4.default.postalCode(value);
+      if (postalCodeValidation.isPotentiallyValid) {
+        this.setErrorAndValidity("", "VALID");
+      } else {
+        this.setErrorAndValidity("Your zip code is invalid.", "INVALID");
+      }
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+};
+
+// src/components/controls/card/FormControlTextField.tsx
+var import_material = require("@mui/material");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormControlTextField = (0, import_react.forwardRef)(
+  ({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
+    const { name } = formControl?.props ?? {};
+    const handleChange = (event) => {
+      formControl?.setValue(event.target.value);
+    };
+    const handleBlur = (event) => {
+      formControl?.blurError?.(event.target.value);
+      formControl?.setTouched(true);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControl, { fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_shared.LabeledTextFieldWrapper, { label: fieldLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: name, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.TextField,
+      {
+        error: !!formControlError,
+        helperText: formControlError || " ",
+        fullWidth: true,
+        hiddenLabel: true,
+        name,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown: (event) => {
+          const selectionEnd = event.target.selectionEnd;
+          if (selectionEnd && formControl) {
+            formControl.cursorPosition.previous = selectionEnd;
+          }
+        },
+        ref,
+        required: formControl?.required,
+        size: "small",
+        variant: "filled",
+        ...props
+      }
+    ) }) }) });
+  }
+);
+FormControlTextField.displayName = "FormControlTextField";
+
+// src/components/controls/card/cvv/use.tsx
+var import_react4 = require("react");
+
+// src/context/FormGroupCreditCardContext.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var FormGroupCreditCardContext = (0, import_react_shared2.createContextEx)();
+
+// src/context/FormGroupCreditCardProvider.tsx
+var import_react_form_group7 = require("@xyo-network/react-form-group");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormGroupCreditCardProvider = ({ children, params, ...props }) => {
+  const formGroup = (0, import_react2.useMemo)(() => {
+    const formGroup2 = new import_react_form_group7.FormGroup(params);
+    return formGroup2;
+  }, [params]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormGroupCreditCardContext.Provider, { value: { formGroup, provided: true }, ...props, children });
+};
+
+// src/context/useFormGroupWithCreditCard.tsx
+var import_react_shared3 = require("@xyo-network/react-shared");
+var useFormGroupWithCreditCardInput = (required = false) => {
+  return (0, import_react_shared3.useContextEx)(FormGroupCreditCardContext, "FormGroupCreditCard", required);
+};
+
+// src/components/controls/card/useCreditCardFormControl.tsx
+var import_react3 = require("react");
+var useCreditCardFormControl = (formControlName, Control, args = []) => {
+  const [error, setError] = (0, import_react3.useState)("");
+  const [value, setValue] = (0, import_react3.useState)("");
+  const inputRef = (0, import_react3.useRef)(null);
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
+  const creditCardFormControl = (0, import_react3.useMemo)(() => {
+    if (Control) {
+      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?.registerControl(formControlName, control);
+      return control;
+    }
+  }, [Control, args, formControlName, formGroup]);
+  return { creditCardFormControl, error, inputRef, value };
+};
+
+// src/components/controls/card/cvv/use.tsx
+var useCreditCardCvvFormControl = (formControlName, cardNumberControlName = "cardNumber", control) => {
+  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
+  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName);
+  (0, import_react4.useEffect)(() => {
+    if (creditCardNumberFormControl) {
+      const castControl = creditCardFormControl;
+      if (!castControl.setCardNumberFormControl) {
+        console.error("cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl");
+        return;
+      }
+      castControl.setCardNumberFormControl(creditCardNumberFormControl);
+    }
+  }, [creditCardFormControl, creditCardNumberFormControl]);
+  return { creditCardFormControl, error, inputRef, value };
+};
+
+// src/components/controls/card/cvv/Cvv.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CreditCardCvvWithFormControl = ({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Email.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CreditCardEmailWithFormControl = ({ formControlName = "email", fieldLabel = "Email", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Expiration.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CreditCardExpirationWithFormControl = ({
+  formControlName = "expiration",
+  fieldLabel = "Expiration",
+  ...props
+}) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    FormControlTextField,
+    {
+      inputRef,
+      formControl: creditCardFormControl,
+      fieldLabel,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck },
+      value,
+      ...expirationProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Name.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NameWithFormControl = ({
+  autoCompleteLabel,
+  fieldLabel = "Name",
+  formControlName,
+  placeholder,
+  tabIndex,
+  ...props
+}) => {
+  const args = (0, import_react5.useMemo)(() => [fieldLabel, autoCompleteLabel, placeholder ?? ""], [autoCompleteLabel, fieldLabel, placeholder]);
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/number/Number.tsx
+var import_material2 = require("@mui/material");
+
+// src/components/img/index.ts
+var import_american_express = __toESM(require("./american-express-TTLTB43R.svg"), 1);
+var import_discover = __toESM(require("./discover-6CUKUO43.svg"), 1);
+var import_mastercard = __toESM(require("./mastercard-XKS2A7C5.svg"), 1);
+var import_visa = __toESM(require("./visa-NRR5YBLP.svg"), 1);
+
+// src/components/controls/card/Options.ts
+var CreditCardData = {
+  amex: { icon: import_american_express.default, name: "American Express" },
+  discover: { icon: import_discover.default, name: "Discover" },
+  mastercard: { icon: import_mastercard.default, name: "Mastercard" },
+  visa: { icon: import_visa.default, name: "Visa" }
+};
+
+// src/components/controls/card/number/use.tsx
+var import_react6 = require("react");
+var useCreditCardNumberFormControl = (formControlName, control) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
+  const [type, setType] = (0, import_react6.useState)("");
+  (0, import_react6.useEffect)(() => {
+    if (creditCardFormControl) {
+      const castInstance = creditCardFormControl;
+      if (!castInstance.onCreditCardTypeChange) {
+        console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
+        return;
+      }
+      castInstance.onCreditCardTypeChange = (type2) => setType(type2);
+    }
+  }, [creditCardFormControl, inputRef]);
+  return { creditCardFormControl, error, inputRef, type, value };
+};
+
+// src/components/controls/card/number/Number.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CreditCardNumberWithFormControl = ({
+  fieldLabel = "Card Number",
+  formControlName = "cardNumber",
+  ...props
+}) => {
+  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputRef,
+      inputMode,
+      inputProps: { "aria-label": fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck },
+      InputProps: {
+        startAdornment: type.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material2.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { height: "30px", width: "40px", src: CreditCardData[type].icon }) }) : null
+      },
+      value,
+      ...cardProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Zip.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CreditCardZipWithFormControl = ({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// src/components/form/Form.tsx
+var import_material4 = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_error = require("@xyo-network/react-error");
+
+// src/components/support/Fields.ts
+var NameFields = ["firstName", "lastName"];
+var NameLabels = ["First", "Last"];
+
+// src/components/support/validateCreditCardInputs.ts
+var import_assert3 = require("@xylabs/assert");
+
+// src/models/CreditCardInput.ts
+var import_payload_model = require("@xyo-network/payload-model");
+var CreditCardInputSchema = "network.xyo.credit.card.input";
+var isCreditCardInput = (0, import_payload_model.isPayloadOfSchemaTypeWithMeta)(CreditCardInputSchema);
+
+// src/components/support/validateCreditCardInputs.ts
+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"),
+    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"),
+    zip: (0, import_assert3.assertEx)(values.zip, () => "zip is not a string")
+  };
+};
+
+// src/components/form/InputFieldsStack.tsx
+var import_material3 = require("@mui/material");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var InputFieldsStack = (props) => {
+  const { sx } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NameWithFormControl, { autoCompleteLabel: "given-name", fieldLabel: "First", formControlName: "firstName", placeholder: "Jerry" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NameWithFormControl, { autoCompleteLabel: "family-name", fieldLabel: "Last", formControlName: "lastName", placeholder: "Smith" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { lg: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { lg: "50%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardNumberWithFormControl, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { direction: { lg: "row", xs: "column" }, gap: 2, width: { lg: "50%", xs: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardCvvWithFormControl, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardExpirationWithFormControl, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material3.Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { md: "25%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardZipWithFormControl, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material3.Stack, { width: { md: "75%", xs: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreditCardEmailWithFormControl, {}) })
+    ] })
+  ] });
+};
+
+// src/components/form/useFormStorage.tsx
+var import_react_promise = require("@xylabs/react-promise");
+var import_archivist_storage = require("@xyo-network/archivist-storage");
+var import_react_form_group8 = require("@xyo-network/react-form-group");
+var StorageNameSpace = "credit-card-fields";
+var calculateTTL = (months = 6) => {
+  const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+  const DAYS_PER_MONTH = 30.44;
+  return months * DAYS_PER_MONTH * MS_PER_DAY;
+};
+var useFormStorage = () => {
+  return (0, import_react_promise.usePromise)(async () => {
+    const localStorageArchivist = await import_archivist_storage.StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: import_archivist_storage.StorageArchivistConfigSchema, type: "local" }
+    });
+    const sessionStorageArchivist = await import_archivist_storage.StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: import_archivist_storage.StorageArchivistConfigSchema, type: "session" }
+    });
+    const storage = {
+      sensitive: new import_react_form_group8.ArchivistFormGroupStorage(sessionStorageArchivist),
+      storage: new import_react_form_group8.ArchivistFormGroupStorage(localStorageArchivist)
+    };
+    return { serialize: true, storage, ttlStorage: calculateTTL() };
+  }, []);
+};
+
+// src/components/form/Form.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CreditCardFormFlexbox = ({
+  ConfirmationButton,
+  onFailedSubmit,
+  onSuccessfulSubmit,
+  onValidSubmit,
+  ...props
+}) => {
+  const { formGroup } = useFormGroupWithCreditCardInput(true);
+  const handleConfirmPayment = async () => {
+    if (!formGroup) {
+      console.error("formGroup is not defined");
+      return;
+    }
+    formGroup.validateFields();
+    const errorSummary = formGroup.errorSummary;
+    if (errorSummary.invalidFields.length > 0) {
+      onFailedSubmit?.(errorSummary);
+    }
+    if (errorSummary.invalidFields.length > 0) return;
+    const formOutput = validateCreditCardInputs(formGroup.values);
+    await onValidSubmit?.(formOutput);
+    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
+  ] }) });
+};
+var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
+  const [params, error] = useFormStorage();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FormGroupCreditCardProvider, { params, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_error.ErrorRender, { error }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CreditCardFormFlexbox, { ...props })
+  ] });
+};
+//# sourceMappingURL=index.cjs.map