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

package/dist/browser/index.cjs

@@ -1,1070 +0,0 @@
-"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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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,
-  InputFieldsStack: () => InputFieldsStack,
-  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,
-  useFormStorage: () => useFormStorage,
-  validateCreditCardInputs: () => validateCreditCardInputs
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/controls/card/cvv/Cvv.tsx
-var import_react5 = __toESM(require("react"), 1);
-
-// src/controls/CreditCardCvv.ts
-var import_assert = require("@xylabs/assert");
-var import_react_form_group = require("@xyo-network/react-form-group");
-var import_card_validator = __toESM(require("card-validator"), 1);
-
-// src/utils/umask.ts
-function unmask(value) {
-  return value.replaceAll(/\D/g, "");
-}
-__name(unmask, "unmask");
-
-// src/controls/CreditCardCvv.ts
-var CONTROL_NAME = "cvv";
-var CreditCardCvvFormControl = class extends import_react_form_group.FormControlBase {
-  static {
-    __name(this, "CreditCardCvvFormControl");
-  }
-  invalidMessage = "Your card cvc is invalid.";
-  pattern = /^\d{0,4}$/;
-  patternStrict = /^\d{1,4}$/;
-  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 {
-  static {
-    __name(this, "CreditCardExpirationFormControl");
-  }
-  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");
-  }
-  // make it so the raw value is the same to preserve the / separator in the value
-  get rawValue() {
-    return this.value;
-  }
-  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 {
-  static {
-    __name(this, "CreditCardNumberFormControl");
-  }
-  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 = /* @__PURE__ */ __name(() => {
-  }, "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 {
-  static {
-    __name(this, "CreditCardEmailFormControl");
-  }
-  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 {
-  static {
-    __name(this, "NameFormControl");
-  }
-  nameLabel;
-  required;
-  constructor(nameLabel, autoCompleteLabel, placeHolder) {
-    super();
-    this.nameLabel = nameLabel;
-    this.required = true;
-    super.setName(nameLabel);
-    this.setSerializeSettings({
-      sensitive: false,
-      serializable: true
-    });
-    this.invalidMessage = `${nameLabel} name is missing.`;
-    this.props = {
-      autoComplete: autoCompleteLabel,
-      autoCorrect: "off",
-      id: this.nameLabel,
-      name: this.nameLabel,
-      placeholder: placeHolder,
-      spellCheck: false
-    };
-  }
-  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 {
-  static {
-    __name(this, "CreditCardZipFormControl");
-  }
-  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 = __toESM(require("react"), 1);
-var FormControlTextField = /* @__PURE__ */ (0, import_react.forwardRef)(({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
-  const { name } = formControl?.props ?? {};
-  const handleChange = /* @__PURE__ */ __name((event) => {
-    formControl?.setValue(event.target.value);
-  }, "handleChange");
-  const handleBlur = /* @__PURE__ */ __name((event) => {
-    formControl?.blurError?.(event.target.value);
-    formControl?.setTouched(true);
-  }, "handleBlur");
-  return /* @__PURE__ */ import_react.default.createElement(import_material.FormControl, {
-    fullWidth: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_shared.LabeledTextFieldWrapper, {
-    label: fieldLabel
-  }, /* @__PURE__ */ import_react.default.createElement("label", {
-    htmlFor: name
-  }, /* @__PURE__ */ import_react.default.createElement(import_material.TextField, {
-    error: !!formControlError,
-    helperText: formControlError || " ",
-    fullWidth: true,
-    hiddenLabel: true,
-    name,
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: /* @__PURE__ */ __name((event) => {
-      const selectionEnd = event.target.selectionEnd;
-      if (selectionEnd && formControl) {
-        formControl.cursorPosition.previous = selectionEnd;
-      }
-    }, "onKeyDown"),
-    ref,
-    required: formControl?.required,
-    size: "small",
-    variant: "filled",
-    ...props
-  }))));
-});
-FormControlTextField.displayName = "FormControlTextField";
-
-// src/components/controls/card/cvv/use.ts
-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 = __toESM(require("react"), 1);
-var FormGroupCreditCardProvider = /* @__PURE__ */ __name(({ children, params, ...props }) => {
-  const formGroup = (0, import_react2.useMemo)(() => {
-    const formGroup2 = new import_react_form_group7.FormGroup(params);
-    return formGroup2;
-  }, [
-    params
-  ]);
-  return (
-    // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    /* @__PURE__ */ import_react2.default.createElement(FormGroupCreditCardContext.Provider, {
-      value: {
-        formGroup,
-        provided: true
-      },
-      ...props
-    }, children)
-  );
-}, "FormGroupCreditCardProvider");
-
-// src/context/useFormGroupWithCreditCard.tsx
-var import_react_shared3 = require("@xyo-network/react-shared");
-var useFormGroupWithCreditCardInput = /* @__PURE__ */ __name((required = false) => {
-  return (0, import_react_shared3.useContextEx)(FormGroupCreditCardContext, "FormGroupCreditCard", required);
-}, "useFormGroupWithCreditCardInput");
-
-// src/components/controls/card/useCreditCardFormControl.tsx
-var import_react3 = require("react");
-var StableDefaultArgs = [];
-var useCreditCardFormControl = /* @__PURE__ */ __name((formControlName, Control, args = StableDefaultArgs) => {
-  const [error, setError] = (0, import_react3.useState)("");
-  const [value, setValue] = (0, import_react3.useState)("");
-  const inputRef = (0, import_react3.useRef)(null);
-  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));
-      if (formControlName) formGroup?.registerControl(formControlName, control);
-      return control;
-    }
-  }, [
-    Control,
-    args,
-    formControlName,
-    formGroup
-  ]);
-  return {
-    creditCardFormControl,
-    error,
-    inputRef,
-    value
-  };
-}, "useCreditCardFormControl");
-
-// src/components/controls/card/cvv/use.ts
-var useCreditCardCvvFormControl = /* @__PURE__ */ __name((formControlName, cardNumberControlName = "cardNumber", control) => {
-  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
-  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
-  };
-}, "useCreditCardCvvFormControl");
-
-// src/components/controls/card/cvv/Cvv.tsx
-var CreditCardCvvWithFormControl = /* @__PURE__ */ __name(({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react5.default.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} number on the back of your card`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck
-    },
-    inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardCvvWithFormControl");
-
-// src/components/controls/card/Email.tsx
-var import_react6 = __toESM(require("react"), 1);
-var CreditCardEmailWithFormControl = /* @__PURE__ */ __name(({ formControlName = "emailAddress", fieldLabel = "Email", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react6.default.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} for your purchase`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck
-    },
-    inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardEmailWithFormControl");
-
-// src/components/controls/card/Expiration.tsx
-var import_react7 = __toESM(require("react"), 1);
-var CreditCardExpirationWithFormControl = /* @__PURE__ */ __name(({ formControlName = "expiration", fieldLabel = "Expiration", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react7.default.createElement(FormControlTextField, {
-    inputRef,
-    formControl: creditCardFormControl,
-    fieldLabel,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} of the card`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck
-    },
-    value,
-    ...expirationProps,
-    ...props
-  });
-}, "CreditCardExpirationWithFormControl");
-
-// src/components/controls/card/Name.tsx
-var import_react8 = __toESM(require("react"), 1);
-var NameWithFormControl = /* @__PURE__ */ __name(({ autoCompleteLabel, fieldLabel = "Name", formControlName, placeholder, tabIndex, ...props }) => {
-  const args = (0, import_react8.useMemo)(() => [
-    fieldLabel,
-    autoCompleteLabel,
-    placeholder ?? ""
-  ], [
-    autoCompleteLabel,
-    fieldLabel,
-    placeholder
-  ]);
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react8.default.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} name on your card`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck,
-      tabIndex
-    },
-    inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "NameWithFormControl");
-
-// src/components/controls/card/number/Number.tsx
-var import_material2 = require("@mui/material");
-var import_react10 = __toESM(require("react"), 1);
-
-// src/components/img/index.ts
-var import_american_express = __toESM(require("./american-express-TTLTB43R.svg"), 1);
-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.ts
-var import_react9 = require("react");
-var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, control) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
-  const [type, setType] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
-    if (creditCardFormControl) {
-      const castControl = creditCardFormControl;
-      if (!castControl.onCreditCardTypeChange) {
-        console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
-        return;
-      }
-      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
-  };
-}, "useCreditCardNumberFormControl");
-
-// src/components/controls/card/number/Number.tsx
-var CreditCardNumberWithFormControl = /* @__PURE__ */ __name(({ fieldLabel = "Card Number", formControlName = "cardNumber", ...props }) => {
-  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react10.default.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputRef,
-    inputMode,
-    inputProps: {
-      "aria-label": fieldLabel,
-      autoComplete,
-      autoCorrect,
-      id,
-      inputMode,
-      name,
-      spellCheck
-    },
-    InputProps: {
-      startAdornment: type.length > 0 ? /* @__PURE__ */ import_react10.default.createElement(import_material2.InputAdornment, {
-        position: "start"
-      }, /* @__PURE__ */ import_react10.default.createElement("img", {
-        height: "30px",
-        width: "40px",
-        src: CreditCardData[type].icon
-      })) : null
-    },
-    value,
-    ...cardProps,
-    ...props
-  });
-}, "CreditCardNumberWithFormControl");
-
-// src/components/controls/card/Zip.tsx
-var import_react11 = __toESM(require("react"), 1);
-var CreditCardZipWithFormControl = /* @__PURE__ */ __name(({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
-  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
-  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
-  return /* @__PURE__ */ import_react11.default.createElement(FormControlTextField, {
-    fieldLabel,
-    formControl: creditCardFormControl,
-    formControlError: error,
-    inputMode,
-    inputProps: {
-      "aria-label": `${fieldLabel} code for your card`,
-      autoComplete,
-      autoCorrect,
-      id,
-      name,
-      spellCheck
-    },
-    inputRef,
-    value,
-    ...cvcProps,
-    ...props
-  });
-}, "CreditCardZipWithFormControl");
-
-// src/components/form/Form.tsx
-var import_material4 = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_error = require("@xyo-network/react-error");
-var import_react13 = __toESM(require("react"), 1);
-
-// 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 = /* @__PURE__ */ __name((values) => {
-  return {
-    cardNumber: (0, import_assert3.assertEx)(values.cardNumber, () => "card number is not a string"),
-    cvc: (0, import_assert3.assertEx)(values.cvc, () => "card cvc is not a string"),
-    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: values.timestamp,
-    zip: (0, import_assert3.assertEx)(values.zip, () => "zip is not a string")
-  };
-}, "validateCreditCardInputs");
-
-// src/components/form/InputFieldsStack.tsx
-var import_material3 = require("@mui/material");
-var import_react12 = __toESM(require("react"), 1);
-var InputFieldsStack = /* @__PURE__ */ __name((props) => {
-  const { sx } = props;
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ import_react12.default.createElement(NameWithFormControl, {
-    autoCompleteLabel: "given-name",
-    fieldLabel: "First",
-    formControlName: "firstName",
-    placeholder: "Jerry"
-  }), /* @__PURE__ */ import_react12.default.createElement(NameWithFormControl, {
-    autoCompleteLabel: "family-name",
-    fieldLabel: "Last",
-    formControlName: "lastName",
-    placeholder: "Smith"
-  })), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        lg: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    width: {
-      lg: "50%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardNumberWithFormControl, null)), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    direction: {
-      lg: "row",
-      xs: "column"
-    },
-    gap: 2,
-    width: {
-      lg: "50%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardCvvWithFormControl, null), /* @__PURE__ */ import_react12.default.createElement(CreditCardExpirationWithFormControl, null))), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    gap: 2,
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
-      },
-      ...sx
-    },
-    ...props
-  }, /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    width: {
-      md: "25%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardZipWithFormControl, null)), /* @__PURE__ */ import_react12.default.createElement(import_material3.Stack, {
-    width: {
-      md: "75%",
-      xs: "100%"
-    }
-  }, /* @__PURE__ */ import_react12.default.createElement(CreditCardEmailWithFormControl, null))));
-}, "InputFieldsStack");
-
-// src/components/form/useFormStorage.tsx
-var import_react_promise = require("@xylabs/react-promise");
-var import_archivist_storage = require("@xyo-network/archivist-storage");
-var import_react_form_group8 = require("@xyo-network/react-form-group");
-var StorageNameSpace = "credit-card-fields";
-var calculateTTL = /* @__PURE__ */ __name((months = 6) => {
-  const MS_PER_DAY = 24 * 60 * 60 * 1e3;
-  const DAYS_PER_MONTH = 30.44;
-  return months * DAYS_PER_MONTH * MS_PER_DAY;
-}, "calculateTTL");
-var useFormStorage = /* @__PURE__ */ __name(() => {
-  return (0, import_react_promise.usePromise)(async () => {
-    const localStorageArchivist = await import_archivist_storage.StorageArchivist.create({
-      account: "random",
-      config: {
-        namespace: StorageNameSpace,
-        schema: import_archivist_storage.StorageArchivistConfigSchema,
-        type: "local"
-      }
-    });
-    const sessionStorageArchivist = await import_archivist_storage.StorageArchivist.create({
-      account: "random",
-      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()
-    };
-  }, []);
-}, "useFormStorage");
-
-// src/components/form/Form.tsx
-var CreditCardFormFlexbox = /* @__PURE__ */ __name(({ ConfirmationButton, displayErrors, onErrorDuringSubmit, onInvalidSubmit, onSuccessfulSubmit, onValidSubmit, ...props }) => {
-  const { formGroup } = useFormGroupWithCreditCardInput(true);
-  const [error, setError] = (0, import_react13.useState)();
-  const handleConfirmPayment = /* @__PURE__ */ __name(async () => {
-    try {
-      if (!formGroup) {
-        throw new Error("formGroup is not defined");
-      }
-      formGroup.validateFields();
-      const errorSummary = formGroup.errorSummary;
-      if (errorSummary.invalidFields.length > 0) {
-        onInvalidSubmit?.(errorSummary);
-      }
-      if (errorSummary.invalidFields.length > 0) return;
-      const formOutput = validateCreditCardInputs(formGroup.values);
-      await onValidSubmit?.(formOutput);
-      onSuccessfulSubmit?.();
-    } catch (error2) {
-      onErrorDuringSubmit?.(error2);
-      if (displayErrors) setError(error2);
-    }
-  }, "handleConfirmPayment");
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(import_react_error.ErrorRender, {
-    error
-  }), /* @__PURE__ */ import_react13.default.createElement(import_react_flexbox.FlexCol, {
-    sx: {
-      flexDirection: {
-        md: "row",
-        xs: "column"
-      }
-    },
-    width: "100%",
-    gap: 2,
-    ...props
-  }, /* @__PURE__ */ import_react13.default.createElement(import_material4.Stack, {
-    flexDirection: "column",
-    sx: {
-      width: "100%"
-    },
-    gap: 2
-  }, /* @__PURE__ */ import_react13.default.createElement(InputFieldsStack, null), ConfirmationButton ? /* @__PURE__ */ import_react13.default.createElement(ConfirmationButton, {
-    onClick: handleConfirmPayment,
-    variant: "contained",
-    sx: {
-      alignSelf: "end"
-    }
-  }, "Confirm Payment") : null)));
-}, "CreditCardFormFlexbox");
-var CreditCardFormFlexboxWithFormGroupProvider = /* @__PURE__ */ __name((props) => {
-  const [params, error] = useFormStorage();
-  return /* @__PURE__ */ import_react13.default.createElement(FormGroupCreditCardProvider, {
-    params
-  }, /* @__PURE__ */ import_react13.default.createElement(import_react_error.ErrorRender, {
-    error
-  }), /* @__PURE__ */ import_react13.default.createElement(CreditCardFormFlexbox, props));
-}, "CreditCardFormFlexboxWithFormGroupProvider");
-//# sourceMappingURL=index.cjs.map