@xyo-network/react-form-credit-card 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/controls/card/cvv/Cvv.tsx","../../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.ts","../../src/context/FormGroupCreditCardContext.ts","../../src/context/FormGroupCreditCardProvider.tsx","../../src/context/useFormGroupWithCreditCard.tsx","../../src/components/controls/card/useCreditCardFormControl.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.ts","../../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":["import React from 'react'\n\nimport { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { useCreditCardCvvFormControl } from './use.ts'\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 { 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.ts'\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.ts'\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 // make it so the raw value is the same to preserve the / separator in the value\n override get rawValue() {\n return this.value\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.ts'\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.ts'\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 React, { 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.ts'\nimport { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\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.ts'\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 React, { PropsWithChildren, useMemo } from 'react'\n\nimport { CreditCardInput } from '../models/index.ts'\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.ts'\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 // eslint-disable-next-line @eslint-react/no-unstable-context-value\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.ts'\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.ts'\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 React from 'react'\n\nimport { CreditCardEmailFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React from 'react'\n\nimport { CreditCardExpirationFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React, { useMemo } from 'react'\n\nimport { NameFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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'\nimport React from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.ts'\nimport { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { CreditCardData } from '../Options.ts'\nimport { useCreditCardNumberFormControl } from './use.ts'\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 ? (\n <InputAdornment position=\"start\">\n <img height=\"30px\" width=\"40px\" src={CreditCardData[type].icon} />\n </InputAdornment>\n )\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.ts'\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.ts'\nimport { CreditCardOptions } from '../Options.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\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 React from 'react'\n\nimport { CreditCardZipFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React, { useState } from 'react'\n\nimport { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.ts'\nimport { validateCreditCardInputs } from '../support/index.ts'\nimport { InputFieldsStack } from './InputFieldsStack.tsx'\nimport { CreditCardFormProps } from './Props.ts'\nimport { useFormStorage } from './useFormStorage.tsx'\n\nexport const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({\n ConfirmationButton,\n displayErrors,\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 if (displayErrors) 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 ? (\n <ConfirmationButton onClick={handleConfirmPayment} variant=\"contained\" sx={{ alignSelf: 'end' }}>\n Confirm Payment\n </ConfirmationButton>\n )\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.ts'\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 React, { PropsWithChildren } from 'react'\n\nimport {\n CreditCardCvvWithFormControl,\n CreditCardEmailWithFormControl,\n CreditCardExpirationWithFormControl,\n CreditCardNumberWithFormControl,\n CreditCardZipWithFormControl,\n NameWithFormControl,\n} from '../controls/index.ts'\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.ts'\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 account: 'random',\n config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },\n })\n const sessionStorageArchivist = await StorageArchivist.create({\n account: 'random',\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":";;;;AAAA,OAAOA,YAAW;;;ACAlB,SAASC,gBAAgB;AAEzB,SAA0BC,uBAAuB;AACjD,OAAOC,WAAW;;;ACHX,SAASC,OAAOC,OAAa;AAClC,SAAOA,MAAMC,WAAW,OAAO,EAAA;AACjC;AAFgBF;;;ADOhB,IAAMG,eAAe;AAEd,IAAMC,2BAAN,cAAiFC,gBAAAA;EATxF,OASwFA;;;EAC7EC,iBAAiB;EAEjBC,UAAU;EACVC,gBAAgB;EAEhBC,QAAQ;IACfC,cAAc;IACdC,aAAa;IACbC,IAAIT;IACJU,WAAW;IACXC,MAAMX;IACNY,aAAa;IACbC,YAAY;EACd;EAESC,WAAW;EAEXC,SAASA;EAEVC,yBAAsDC;EAE9DC,cAAc;AACZ,UAAK;AACL,UAAMC,QAAQnB,YAAAA;AACd,SAAKoB,qBAAqB;MAAEC,WAAW;MAAMC,cAAc;IAAK,CAAA;EAClE;EAEA,IAAIC,wBAAwB;AAC1B,WAAOC,SAAS,KAAKR,wBAAwB,MAAM,qCAAA;EACrD;EAESS,UAAUC,OAAe;AAChC,UAAMC,MAAM,KAAKJ,sBAAsBG;AACvC,UAAME,MAAM,KAAKC,oBAAoBF,GAAAA;AACrC,UAAMG,gBAAgBC,MAAMC,IAAIN,OAAOE,GAAAA;AACvC,QAAIE,cAAcG,SAAS;AACzB,WAAKC,SAAS,EAAA;AACd,WAAKC,UAAU,OAAA;IACjB,OAAO;AACL,WAAKD,SAAS,KAAK/B,cAAc;AACjC,WAAKgC,UAAU,SAAA;IACjB;EACF;EAESC,YAAYV,OAAe;AAClC,UAAMW,WAAW,KAAKtB,OAAOW,KAAAA;AAC7B,UAAMY,QAAQD,SAASC,MAAM,KAAKjC,aAAa;AAC/C,QAAIiC,OAAO;AACT,YAAMX,MAAM,KAAKJ,sBAAsBG;AACvC,YAAME,MAAM,KAAKC,oBAAoBF,GAAAA;AACrC,YAAMG,gBAAgBC,MAAMC,IAAIN,OAAOE,GAAAA;AACvC,UAAIE,cAAcS,oBAAoB;AACpC,aAAKL,SAAS,EAAA;AACd,aAAKC,UAAU,OAAA;MACjB,OAAO;AACL,aAAKD,SAAS,2BAAA;AACd,aAAKC,UAAU,SAAA;MACjB;IACF,OAAO;AACL,WAAKD,SAAS,KAAK/B,cAAc;AACjC,WAAKgC,UAAU,SAAA;IACjB;EACF;EAEAK,yBAAyBjB,uBAAwC;AAC/D,SAAKP,yBAAyBO;EAChC;EAEQM,oBAAoBF,KAAc;AACxC,QAAI,CAACA,IAAK,QAAO;AACjB,UAAMc,mBAAmBV,MAAMW,OAAOf,GAAAA;AACtC,WAAOc,iBAAiBE,OAAOF,iBAAiBE,KAAKC,KAAKC,OAAO;EACnE;AACF;;;AEnFA,SAASC,YAAAA,iBAAgB;AAEzB,SAA0BC,mBAAAA,wBAAuB;AACjD,OAAOC,YAAW;AAIlB,IAAMC,gBAAe;AAEd,IAAMC,kCAAN,cAAwFC,iBAAAA;EAT/F,OAS+FA;;;EACpFC,iBAAiB;EAEjBC,UAAU;EACVC,gBAAgB;EAEhBC,QAAQ;IACfC,cAAc;IACdC,aAAa;IACbC,IAAIT;IACJU,WAAW;IACXC,MAAMX;IACNY,aAAa;IACbC,YAAY;EACd;EAESC,WAAW;EAEXC,SAASA;EAEVC,yBAAsDC;EAE9DC,cAAc;AACZ,UAAK;AACL,UAAMC,QAAQnB,aAAAA;AACd,SAAKoB,qBAAqB;MAAEC,WAAW;MAAMC,cAAc;IAAK,CAAA;EAClE;EAEA,IAAIC,wBAAwB;AAC1B,WAAOC,UAAS,KAAKR,wBAAwB,MAAM,qCAAA;EACrD;;EAGA,IAAaS,WAAW;AACtB,WAAO,KAAKC;EACd;EAESC,UAAUD,OAAe;AAChC,UAAME,WAAWb,OAAOW,KAAAA;AACxB,UAAMG,kBAAkBC,OAAMC,eAAeH,QAAAA;AAC7C,QAAI,CAACA,YAAaA,YAAYA,SAASI,WAAW,GAAI;AACpD,WAAKC,oBAAoB,uCAAuC,SAAA;IAClE,WAAWJ,gBAAgBK,SAAS;AAClC,WAAKD,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,+CAA+C,SAAA;IAC1E;EACF;EAESE,YAAYT,OAAe;AAClC,UAAME,WAAW,KAAKb,OAAOW,KAAAA;AAC7B,UAAMG,kBAAkBC,OAAMC,eAAeH,QAAAA;AAC7C,QAAIC,gBAAgBO,oBAAoB;AACtC,WAAKH,oBAAoB,IAAI,OAAA;IAC/B,WAAWJ,gBAAgBK,SAAS;AAClC,WAAKD,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,+CAA+C,SAAA;IAC1E;EACF;EAESI,KAAKX,OAAe;AAC3B,QAAI,SAASY,KAAKvB,OAAOW,KAAAA,CAAAA,GAAS;AAChC,aAAO,KAAKa,SAAS,OAAO,CAAA,EAAG,IAAIb,KAAAA,EAAO;IAC5C;AACA,WAAO,KAAKa,SAAS,OAAO,CAAA,EAAGb,KAAAA;EACjC;EAEQa,SAASC,WAAmBC,OAAe;AACjD,WAAO,CAACf,UAAAA;AACN,YAAMgB,SAAmB,CAAA;AAEzB,eAASC,IAAI,GAAGA,IAAIjB,MAAMM,QAAQW,KAAK;AACrC,YAAIA,MAAM,KAAKA,IAAIF,UAAU,GAAG;AAC9BC,iBAAOE,KAAKJ,SAAAA;QACd;AAEAE,eAAOE,KAAKlB,MAAMiB,CAAAA,CAAE;MACtB;AAEA,aAAOD,OAAOG,KAAK,EAAA;IACrB;EACF;AACF;;;AC3FA,SAASC,mBAAAA,wBAAsD;AAC/D,OAAOC,YAAW;AAIlB,IAAMC,gBAAe;AAEd,IAAMC,8BAAN,cAAoFC,iBAAAA;EAP3F,OAO2FA;;;EACzFC,iBAAyB;EAEhBC,iBAAiB;EAEjBC,UAAU;EACVC,gBAAgB;EAEhBC,QAAQ;IACfC,cAAc;IACdC,aAAa;IACbC,IAAIV;IACJW,WAAW;IACXC,MAAMZ;IACNa,aAAa;IACbC,YAAY;EACd;EAESC,WAAW;EAEXC,SAASA;EAElBC,cAAc;AACZ,UAAK;AACL,UAAMC,QAAQlB,aAAAA;AACd,SAAKmB,qBAAqB;MAAEC,WAAW;MAAMC,cAAc;IAAK,CAAA;EAClE;EAESC,UAAUC,OAAe;AAChC,UAAMC,WAAWR,OAAOO,KAAAA;AACxB,UAAME,mBAAmBC,OAAMC,OAAOH,QAAAA;AACtC,QAAI,CAACC,iBAAiBG,SAAS;AAC7B,WAAKC,oBAAoB,KAAKzB,gBAAgB,SAAA;AAC9C;IACF;AACA,SAAKyB,oBAAoB,IAAI,OAAA;EAC/B;EAESC,YAAYP,OAAe;AAClC,UAAMC,WAAWR,OAAOO,KAAAA;AACxB,UAAMQ,QAAQP,SAASO,MAAM,KAAKzB,aAAa;AAC/C,QAAIyB,OAAO;AACT,YAAMN,mBAAmBC,OAAMC,OAAOH,QAAAA;AACtC,UAAI,CAACC,iBAAiBO,oBAAoB;AACxC,aAAKH,oBAAoB,KAAKzB,gBAAgB,SAAA;AAC9C;MACF;AACA,WAAKyB,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,KAAKzB,gBAAgB,SAAA;IAChD;EACF;EAEA6B,iBAAiBN,QAAgB;AAC/B,YAAQA,QAAAA;MACN,KAAK,KAAK;AACR,aAAKO,kBAAkB,MAAA;AACvB;MACF;MACA,KAAK,KAAK;AACR,aAAKA,kBAAkB,YAAA;AACvB;MACF;MACA,KAAK,KAAK;AACR,aAAKA,kBAAkB,MAAA;AACvB;MACF;MACA,KAAK,KAAK;AACR,aAAKA,kBAAkB,UAAA;AACvB;MACF;MACA,SAAS;AACP,aAAKA,kBAAkB,EAAA;MACzB;IACF;EACF;EAESC,oBAAoB;AAC3B,QAAI,KAAKZ,OAAO;AACd,YAAMa,gBAAgB,KAAKA,iBAAiB;AAC5C,YAAMZ,WAAWR,OAAO,KAAKO,KAAK;AAClC,YAAME,mBAAmBC,OAAMC,OAAOH,QAAAA;AACtC,YAAMa,OAAOZ,iBAAiBY;AAC9B,YAAMC,eAAe,KAAKf,MAAMgB,UAAUH,eAAeG,UAAU;AACnE,YAAMC,iBAAiBxB,OAAO,KAAKO,KAAK,EAAEgB,SAASvB,OAAOoB,aAAAA,EAAeG;AAEzE,UAAIF,MAAM;AACR,cAAMI,OAAOJ,KAAKI;AAClB,cAAMC,YAAY,KAAKC,eAAeC,YAAY;AAClD,cAAMC,gBAAgBJ,KAAKK,OAAO,CAACC,KAAKC,MAAMD,MAAMC,IAAIN,SAAAA,EAAWH;AACnE,cAAMU,gBAAgBR,KAAKK,OAAO,CAACC,KAAKC,MAAMD,MAAMC,IAAIN,YAAYJ,YAAAA,EAAcC;AAClF,cAAMW,YAAYR,YAAYG,gBAAgBI,gBAAgBT;AAC9D,eAAOU;MACT;IACF;AAEA;EACF;EAESC,KAAK5B,QAA2B,IAAI;AAC3C,UAAMC,WAAWR,OAAOO,KAAAA;AACxB,UAAME,mBAAmBC,OAAMC,OAAOH,QAAAA;AACtC,UAAMa,OAAOZ,iBAAiBY;AAE9B,QAAIA,MAAM;AACR,YAAMe,MAAMf,KAAKgB,QAAQC,SAAS,EAAA,IAAM,KAAKjB,KAAKgB,QAAQ,CAAA;AAC1D,YAAMZ,OAAO;WAAIJ,KAAKI;QAAMW;;AAC5B,YAAMG,SAASd,KACZe,IAAI,CAACT,KAAKC,MAAMxB,SAASiC,MAAMhB,KAAKO,IAAI,CAAA,KAAM,GAAGD,GAAAA,CAAAA,EACjDD,OAAOY,OAAAA,EACPC,KAAK,GAAA;AAER,aAAOJ;IACT;AAEA,WAAOhC;EACT;EAEAqC,yBAAiD,6BAAA;EAAO,GAAP;EAEjD1B,kBAAkB2B,MAAc;AAC9B,SAAK1D,iBAAiB0D;AACtB,SAAKD,uBAAuBC,IAAAA;EAC9B;EAESC,SAASvC,QAAQ,IAAIwC,SAAqB;AACjD,UAAMC,WAAW,KAAKhD,OAAOO,KAAAA;AAC7B,UAAMuC,SAASE,UAAUD,OAAAA;AACzB,SAAK9B,iBAAiB+B,SAASC,OAAO,CAAA,CAAA;EACxC;AACF;;;ACzIA,SAASC,mBAAAA,wBAAuB;AAEhC,IAAMC,gBAAe;AAEd,IAAMC,6BAAN,cAAmFC,iBAAAA;EAJ1F,OAI0FA;;;EAC/EC,iBAAiB;EAEjBC,UAAU;EACVC,gBAAgB;EAEhBC,QAAQ;IACfC,cAAc;IACdC,aAAa;IACbC,IAAIT,cAAaU,kBAAiB;IAClCC,MAAMX,cAAaU,kBAAiB;IACpCE,aAAa;IACbC,YAAY;EACd;EAESC,WAAW;EAEpBC,cAAc;AACZ,UAAK;AACL,UAAMC,QAAQhB,aAAAA;AACd,SAAKiB,qBAAqB;MAAEC,WAAW;MAAOC,cAAc;IAAK,CAAA;EACnE;EAESC,UAAUC,OAAe;AAChC,UAAMC,QAAQD,MAAMC,MAAM,KAAKjB,aAAa;AAC5C,SAAKkB,iBAAiBD,KAAAA;EACxB;EAESE,YAAYH,OAAe;AAClC,QAAI,KAAKI,OAAO;AACd,WAAKL,UAAUC,KAAAA;IACjB;EACF;EAEQE,iBAAiBD,OAAgC;AACvD,QAAIA,OAAO;AACT,WAAKI,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,KAAKvB,gBAAgB,SAAA;IAChD;EACF;AACF;;;AC7CA,SAASwB,mBAAAA,wBAAuB;AAEzB,IAAMC,kBAAN,cAAwEC,iBAAAA;EAF/E,OAE+EA;;;;EACpEC;EAETC,YACUC,WACRC,mBACAC,aACA;AACA,UAAK;SAJGF,YAAAA;SAHDF,WAAW;AAQlB,UAAMK,QAAQH,SAAAA;AACd,SAAKI,qBAAqB;MAAEC,WAAW;MAAOC,cAAc;IAAK,CAAA;AACjE,SAAKC,iBAAiB,GAAGP,SAAAA;AACzB,SAAKQ,QAAQ;MACXC,cAAcR;MACdS,aAAa;MACbC,IAAI,KAAKX;MACTY,MAAM,KAAKZ;MACXa,aAAaX;MACbY,YAAY;IACd;EACF;EAESC,UAAUC,OAAe;AAChC,QAAIA,OAAO;AACT,WAAKC,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,KAAKV,gBAAgB,SAAA;IAChD;EACF;EAESW,YAAYF,OAAqB;AACxC,SAAKD,UAAUC,KAAAA;EACjB;AACF;;;ACnCA,SAASG,mBAAAA,wBAAuB;AAChC,OAAOC,YAAW;AAIlB,IAAMC,gBAAe;AAEd,IAAMC,2BAAN,cAAiFC,iBAAAA;EAPxF,OAOwFA;;;EAC7EC,iBAAiB;EAEjBC,QAAQ;IACfC,cAAc;IACdC,aAAa;IACbC,IAAIP,cAAaQ,kBAAiB;IAClCC,MAAMT,cAAaQ,kBAAiB;IACpCE,aAAa;IACbC,YAAY;EACd;EAESC,WAAW;EAEXC,SAASA;EAElBC,cAAc;AACZ,UAAK;AACL,UAAMC,QAAQf,aAAAA;AACd,SAAKgB,qBAAqB;MAAEC,WAAW;MAAMC,cAAc;IAAK,CAAA;EAClE;EAESC,UAAUC,OAAe;AAChC,UAAMC,uBAAuBC,OAAMC,WAAWH,KAAAA;AAC9C,QAAIC,qBAAqBG,SAAS;AAChC,WAAKC,oBAAoB,IAAI,OAAA;IAC/B,OAAO;AACL,WAAKA,oBAAoB,KAAKtB,gBAAgB,SAAA;IAChD;EACF;EAESuB,YAAYN,OAAe;AAClC,UAAMO,WAAW,KAAKd,OAAOO,KAAAA;AAC7B,UAAMQ,QAAQD,SAASC,MAAM,KAAKC,aAAa;AAC/C,QAAID,OAAO;AACT,YAAMP,uBAAuBC,OAAMC,WAAWH,KAAAA;AAC9C,UAAIC,qBAAqBS,oBAAoB;AAC3C,aAAKL,oBAAoB,IAAI,OAAA;MAC/B,OAAO;AACL,aAAKA,oBAAoB,6BAA6B,SAAA;MACxD;IACF,OAAO;AACL,WAAKA,oBAAoB,KAAKtB,gBAAgB,SAAA;IAChD;EACF;AACF;;;ACrDA,SAAS4B,eAAeC,gBAAwCC,iBAAiB;AAEjF,SAASC,+BAA+B;AACxC,OAAOC,SAAgDC,kBAAiC;AAQjF,IAAMC,uBAAuBC,2BAClC,CAAC,EAAEC,aAAaC,kBAAkBC,aAAa,IAAI,GAAGC,MAAAA,GAASC,QAAAA;AAC7D,QAAM,EAAEC,KAAI,IAAKL,aAAaG,SAAS,CAAC;AAExC,QAAMG,eAAqD,wBAACC,UAAAA;AAC1DP,iBAAaQ,SAASD,MAAME,OAAOC,KAAK;EAC1C,GAF2D;AAI3D,QAAMC,aAAkD,wBAACJ,UAAAA;AACvDP,iBAAaY,YAAYL,MAAME,OAAOC,KAAK;AAC3CV,iBAAaa,WAAW,IAAA;EAC1B,GAHwD;AAKxD,SACE,sBAAA,cAACC,gBAAAA;IAAeC,WAAAA;KACd,sBAAA,cAACC,yBAAAA;IAAwBC,OAAOf;KAC9B,sBAAA,cAACe,SAAAA;IAAMC,SAASb;KACd,sBAAA,cAACc,WAAAA;IACCC,OAAO,CAAC,CAACnB;IACToB,YAAYpB,oBAAoB;IAChCc,WAAAA;IACAO,aAAAA;IACAjB;IACAkB,QAAQZ;IACRa,UAAUlB;IACVmB,WAAW,wBAAClB,UAAAA;AAIV,YAAMmB,eAAgBnB,MAAME,OAA4BiB;AACxD,UAAIA,gBAAgB1B,aAAa;AAC/BA,oBAAY2B,eAAeC,WAAWF;MACxC;IACF,GARW;IASXtB;IACAyB,UAAU7B,aAAa6B;IACvBC,MAAK;IACLC,SAAQ;IACP,GAAG5B;;AAMhB,CAAA;AAGFL,qBAAqBkC,cAAc;;;ACxDnC,SAASC,iBAAiB;;;ACD1B,SAASC,uBAAuB;AAIzB,IAAMC,6BAA6BD,gBAAAA;;;ACJ1C,SAASE,iBAAkC;AAC3C,OAAOC,UAA4BC,eAAe;AAS3C,IAAMC,8BAA2F,wBAAC,EAAEC,UAAUC,QAAQ,GAAGC,MAAAA,MAAO;AACrI,QAAMC,YAAYC,QAAQ,MAAA;AACxB,UAAMD,aAAY,IAAIE,UAA4CJ,MAAAA;AAClE,WAAOE;EACT,GAAG;IAACF;GAAO;AAEX;;IAEE,gBAAAK,OAAA,cAACC,2BAA2BC,UAAQ;MAACC,OAAO;QAAEN;QAAWO,UAAU;MAAK;MAAI,GAAGR;OAC5EF,QAAAA;;AAGP,GAZwG;;;ACXxG,SAASW,oBAAoB;AAItB,IAAMC,kCAAkC,wBAACC,WAAW,UAAK;AAC9D,SAAOC,aAAaC,4BAA4B,uBAAuBF,QAAAA;AACzE,GAF+C;;;ACF/C,SAASG,WAAAA,UAASC,QAAQC,gBAAgB;AAK1C,IAAMC,oBAA2B,CAAA;AAE1B,IAAMC,2BAA2B,wBACtCC,iBAEAC,SAEAC,OAAcJ,sBAAiB;AAE/B,QAAM,CAACK,OAAOC,QAAAA,IAAYC,SAAS,EAAA;AACnC,QAAM,CAACC,OAAOC,QAAAA,IAAYF,SAA4B,EAAA;AACtD,QAAMG,WAAWC,OAAyB,IAAA;AAG1C,QAAM,EAAEC,UAAS,IAAKC,gCAAgC,CAAC,CAACX,eAAAA;AAExD,QAAMY,wBAAwBC,SAAQ,MAAA;AACpC,QAAIZ,SAAS;AACX,YAAMa,UAAU,IAAIb,QAAAA,GAAWC,IAAAA;AAC/BY,cAAQC,sBAAsB,CAACC,aAAqBZ,SAASY,QAAAA,CAAAA;AAC7DF,cAAQG,iBAAiB,CAACX,WAA6BC,SAASD,MAAAA,CAAAA;AAEhE,UAAIN,gBAAiBU,YAAWQ,gBAAgBlB,iBAAiBc,OAAAA;AACjE,aAAOA;IACT;EACF,GAAG;IAACb;IAASC;IAAMF;IAAiBU;GAAU;AAE9C,SAAO;IAAEE;IAAuBT;IAAOK;IAAUF;EAAM;AACzD,GA1BwC;;;AJDjC,IAAMa,8BAA8B,wBACzCC,iBACAC,wBAAwB,cACxBC,YAAAA;AAEA,QAAM,EAAEC,uBAAuBC,OAAOC,OAAOC,SAAQ,IAAKC,yBAAyBP,iBAAiBE,OAAAA;AAGpG,QAAM,EAAEM,UAAS,IAAKC,gCAAgC,CAAC,CAACT,eAAAA;AAExD,QAAMU,8BAA8BF,WAAWG,aAAaV,qBAAAA;AAE5DW,YAAU,MAAA;AACR,QAAIF,6BAA6B;AAC/B,YAAMG,cAAcV;AACpB,UAAI,CAACU,YAAYC,0BAA0B;AACzCC,gBAAQX,MAAM,yFAAA;AACd;MACF;AACAS,kBAAYC,yBAAyBJ,2BAAAA;IACvC;EACF,GAAG;IAACP;IAAuBO;GAA4B;AAEvD,SAAO;IAAEP;IAAuBC;IAAOE;IAAUD;EAAM;AACzD,GAxB2C;;;ATDpC,IAAMW,+BAA+D,wBAAC,EAAEC,kBAAkB,OAAOC,aAAa,OAAO,GAAGC,MAAAA,MAAO;AACpI,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,4BAA4BP,iBAAiBQ,QAAWC,wBAAAA;AAClH,QAAM,EAAEC,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,SAAAA,IAAab,uBAAuBD,SAAS,CAAC;AAErH,SACE,gBAAAe,OAAA,cAACC,sBAAAA;IACCjB;IACAkB,aAAahB;IACbiB,kBAAkBhB;IAClBS;IACAQ,YAAY;MAAE,cAAc,GAAGpB,UAAAA;MAA8CS;MAAcC;MAAaC;MAAIE;MAAMC;IAAW;IAC7HV;IACAC;IACC,GAAGU;IACH,GAAGd;;AAGV,GAjB4E;;;AcP5E,OAAOoB,YAAW;AAOX,IAAMC,iCAAiE,wBAAC,EAC7EC,kBAAkB,gBAClBC,aAAa,SACb,GAAGC,MAAAA,MACJ;AACC,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,yBAAyBP,iBAAiBQ,0BAAAA;AACpG,QAAM,EAAEC,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,SAAAA,IAAaZ,uBAAuBD,SAAS,CAAC;AAErH,SACE,gBAAAc,OAAA,cAACC,sBAAAA;IACChB;IACAiB,aAAaf;IACbgB,kBAAkBf;IAClBQ;IACAQ,YAAY;MAAE,cAAc,GAAGnB,UAAAA;MAAgCQ;MAAcC;MAAaC;MAAIE;MAAMC;IAAW;IAC/GT;IACAC;IACC,GAAGS;IACH,GAAGb;;AAGV,GArB8E;;;ACP9E,OAAOmB,YAAW;AAOX,IAAMC,sCAAsE,wBAAC,EAClFC,kBAAkB,cAClBC,aAAa,cACb,GAAGC,MAAAA,MACJ;AACC,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,yBAAyBP,iBAAiBQ,+BAAAA;AACpG,QAAM,EAAEC,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,gBAAAA,IAAoBZ,uBAAuBD,SAAS,CAAC;AAE5H,SACE,gBAAAc,OAAA,cAACC,sBAAAA;IACCZ;IACAa,aAAaf;IACbF;IACAkB,kBAAkBf;IAClBQ;IACAQ,YAAY;MAAE,cAAc,GAAGnB,UAAAA;MAA0BQ;MAAcC;MAAaC;MAAIE;MAAMC;IAAW;IACzGR;IACC,GAAGS;IACH,GAAGb;;AAGV,GArBmF;;;ACPnF,OAAOmB,UAASC,WAAAA,gBAAe;AAWxB,IAAMC,sBAA0D,wBAAC,EACtEC,mBACAC,aAAa,QACbC,iBACAC,aACAC,UACA,GAAGC,MAAAA,MACJ;AACC,QAAMC,OAAOC,SAAQ,MAAM;IAACN;IAAYD;IAAmBG,eAAe;KAAK;IAACH;IAAmBC;IAAYE;GAAY;AAC3H,QAAM,EAAEK,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,yBAAyBV,iBAAiBW,iBAAiBP,IAAAA;AACrH,QAAM,EAAEQ,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,SAAAA,IAAaZ,uBAAuBH,SAAS,CAAC;AACrH,SACE,gBAAAgB,OAAA,cAACC,sBAAAA;IACCrB;IACAsB,aAAaf;IACbgB,kBAAkBf;IAClBQ;IACAQ,YAAY;MAAE,cAAc,GAAGxB,UAAAA;MAAgCa;MAAcC;MAAaC;MAAIE;MAAMC;MAAYf;IAAS;IACzHM;IACAC;IACC,GAAGS;IACH,GAAGf;;AAGV,GAxBuE;;;ACXvE,SAASqB,sBAAsB;AAC/B,OAAOC,YAAW;;;ACDlB,SAAoBC,WAAXC,gBAA2B;AACpC,SAAoBC,WAAXD,gBAA+B;AACxC,SAAoBE,WAAXF,gBAAiC;AAC1C,SAAoBG,WAAXH,gBAA2B;;;ACW7B,IAAMI,iBAAoC;EAC/CC,MAAM;IAAEC,MAAMC;IAAUC,MAAM;EAAmB;EACjDC,UAAU;IAAEH,MAAMI;IAAcF,MAAM;EAAW;EACjDG,YAAY;IAAEL,MAAMM;IAAgBJ,MAAM;EAAa;EACvDK,MAAM;IAAEP,MAAMQ;IAAUN,MAAM;EAAO;AACvC;;;ACjBA,SAASO,aAAAA,YAAWC,YAAAA,iBAAgB;AAM7B,IAAMC,iCAAiC,wBAACC,iBAA0BC,YAAAA;AACvE,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,yBAAyBN,iBAAiBC,OAAAA;AACpG,QAAM,CAACM,MAAMC,OAAAA,IAAWC,UAAS,EAAA;AAEjCC,EAAAA,WAAU,MAAA;AACR,QAAIR,uBAAuB;AACzB,YAAMS,cAAcT;AACpB,UAAI,CAACS,YAAYC,wBAAwB;AACvCC,gBAAQV,MAAM,8FAAA;AACd;MACF;AACAQ,kBAAYC,yBAAyB,CAACL,UAAiBC,QAAQD,KAAAA;AAC/DI,kBAAYG,iBAAiB,CAACC,WAAAA;AAC5B,YAAIX,SAASY,WAAWD,QAAQ;AAC9BX,mBAASY,QAAQC,kBAAkBF,QAAQA,MAAAA;QAC7C;MACF;IACF;EACF,GAAG;IAACb;IAAuBE;GAAS;AAEpC,SAAO;IAAEF;IAAuBC;IAAOC;IAAUG;IAAMF;EAAM;AAC/D,GArB8C;;;AHCvC,IAAMa,kCAAkE,wBAAC,EAC9EC,aAAa,eACbC,kBAAkB,cAClB,GAAGC,MAAAA,MACJ;AACC,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAMC,MAAK,IAAKC,+BAA+BP,iBAAiBQ,2BAAAA;AAChH,QAAM,EAAEC,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,UAAAA,IAAcb,uBAAuBD,SAAS,CAAC;AAEtH,SACE,gBAAAe,OAAA,cAACC,sBAAAA;IACClB;IACAmB,aAAahB;IACbiB,kBAAkBhB;IAClBC;IACAQ;IACAQ,YAAY;MAAE,cAAcrB;MAAYU;MAAcC;MAAaC;MAAIC;MAAWC;MAAMC;IAAW;IACnGO,YAAY;MACVC,gBACEjB,KAAKkB,SAAS,IAER,gBAAAP,OAAA,cAACQ,gBAAAA;QAAeC,UAAS;SACvB,gBAAAT,OAAA,cAACU,OAAAA;QAAIC,QAAO;QAAOC,OAAM;QAAOC,KAAKC,eAAezB,IAAAA,EAAM0B;YAG9D;IACR;IACAzB;IACC,GAAGS;IACH,GAAGd;;AAGV,GA/B+E;;;AIT/E,OAAO+B,YAAW;AAOX,IAAMC,+BAA+D,wBAAC,EAAEC,kBAAkB,OAAOC,aAAa,OAAO,GAAGC,MAAAA,MAAO;AACpI,QAAM,EAAEC,uBAAuBC,OAAOC,UAAUC,MAAK,IAAKC,yBAAyBP,iBAAiBQ,wBAAAA;AACpG,QAAM,EAAEC,cAAcC,aAAaC,IAAIC,WAAWC,MAAMC,YAAY,GAAGC,SAAAA,IAAaZ,uBAAuBD,SAAS,CAAC;AAErH,SACE,gBAAAc,OAAA,cAACC,sBAAAA;IACChB;IACAiB,aAAaf;IACbgB,kBAAkBf;IAClBQ;IACAQ,YAAY;MAAE,cAAc,GAAGnB,UAAAA;MAAiCQ;MAAcC;MAAaC;MAAIE;MAAMC;IAAW;IAChHT;IACAC;IACC,GAAGS;IACH,GAAGb;;AAGV,GAjB4E;;;ACP5E,SAASmB,SAAAA,cAAa;AACtB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAC5B,OAAOC,WAASC,YAAAA,iBAAgB;;;ACHzB,IAAMC,aAAa;EAAC;EAAa;;AACjC,IAAMC,aAAa;EAAC;EAAS;;;;ACDpC,SAASC,YAAAA,iBAAgB;;;ACAzB,SAASC,qCAA8C;AAEhD,IAAMC,wBAAwB;AAgB9B,IAAMC,oBAAoBF,8BAA+CC,qBAAAA;;;ADdzE,IAAME,2BAA2B,wBAACC,WAAAA;AACvC,SAAO;IACLC,YAAYC,UAASF,OAAOC,YAAY,MAAM,6BAAA;IAC9CE,KAAKD,UAASF,OAAOG,KAAK,MAAM,0BAAA;IAChCC,cAAcF,UAASF,OAAOI,cAAc,MAAM,8BAAA;IAClDC,YAAYH,UAASF,OAAOK,YAAY,MAAM,iCAAA;IAC9CC,WAAWJ,UAASF,OAAOM,WAAW,MAAM,4BAAA;IAC5CC,UAAUL,UAASF,OAAOO,UAAU,MAAM,2BAAA;IAC1CC,QAAQC;IACRC,WAAWV,OAAOU;IAClBC,KAAKT,UAASF,OAAOW,KAAK,MAAM,qBAAA;EAClC;AACF,GAZwC;;;AEJxC,SAASC,aAAyB;AAClC,OAAOC,YAAkC;AAalC,IAAMC,mBAAoD,wBAACC,UAAAA;AAChE,QAAM,EAAEC,GAAE,IAAKD;AACf,SACE,gBAAAE,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACC,OAAAA;IAAMC,KAAK;IAAGH,IAAI;MAAEI,eAAe;QAAEC,IAAI;QAAOC,IAAI;MAAS;MAAG,GAAGN;IAAG;IAAI,GAAGD;KAC5E,gBAAAE,OAAA,cAACM,qBAAAA;IAAoBC,mBAAkB;IAAaC,YAAW;IAAQC,iBAAgB;IAAYC,aAAY;MAC/G,gBAAAV,OAAA,cAACM,qBAAAA;IAAoBC,mBAAkB;IAAcC,YAAW;IAAOC,iBAAgB;IAAWC,aAAY;OAEhH,gBAAAV,OAAA,cAACC,OAAAA;IAAMC,KAAK;IAAGH,IAAI;MAAEI,eAAe;QAAEQ,IAAI;QAAON,IAAI;MAAS;MAAG,GAAGN;IAAG;IAAI,GAAGD;KAC5E,gBAAAE,OAAA,cAACC,OAAAA;IAAMW,OAAO;MAAED,IAAI;MAAON,IAAI;IAAO;KACpC,gBAAAL,OAAA,cAACa,iCAAAA,IAAAA,CAAAA,GAEH,gBAAAb,OAAA,cAACC,OAAAA;IAAMa,WAAW;MAAEH,IAAI;MAAON,IAAI;IAAS;IAAGH,KAAK;IAAGU,OAAO;MAAED,IAAI;MAAON,IAAI;IAAO;KACpF,gBAAAL,OAAA,cAACe,8BAAAA,IAAAA,GACD,gBAAAf,OAAA,cAACgB,qCAAAA,IAAAA,CAAAA,CAAAA,GAGL,gBAAAhB,OAAA,cAACC,OAAAA;IAAMC,KAAK;IAAGH,IAAI;MAAEI,eAAe;QAAEC,IAAI;QAAOC,IAAI;MAAS;MAAG,GAAGN;IAAG;IAAI,GAAGD;KAC5E,gBAAAE,OAAA,cAACC,OAAAA;IAAMW,OAAO;MAAER,IAAI;MAAOC,IAAI;IAAO;KACpC,gBAAAL,OAAA,cAACiB,8BAAAA,IAAAA,CAAAA,GAEH,gBAAAjB,OAAA,cAACC,OAAAA;IAAMW,OAAO;MAAER,IAAI;MAAOC,IAAI;IAAO;KACpC,gBAAAL,OAAA,cAACkB,gCAAAA,IAAAA,CAAAA,CAAAA,CAAAA;AAKX,GA3BiE;;;ACdjE,SAASC,kBAAkB;AAC3B,SAASC,kBAAkBC,oCAAoC;AAC/D,SAASC,iCAAkD;AAI3D,IAAMC,mBAAmB;AAEzB,IAAMC,eAAe,wBAACC,SAAS,MAAC;AAC9B,QAAMC,aAAa,KAAK,KAAK,KAAK;AAClC,QAAMC,iBAAiB;AACvB,SAAOF,SAASE,iBAAiBD;AACnC,GAJqB;AAMd,IAAME,iBAAiB,6BAAA;AAC5B,SAAOC,WAAW,YAAA;AAChB,UAAMC,wBAAwB,MAAMC,iBAAiBC,OAAO;MAC1DC,SAAS;MACTC,QAAQ;QAAEC,WAAWZ;QAAkBa,QAAQC;QAA8BC,MAAM;MAAQ;IAC7F,CAAA;AACA,UAAMC,0BAA0B,MAAMR,iBAAiBC,OAAO;MAC5DC,SAAS;MACTC,QAAQ;QAAEC,WAAWZ;QAAkBa,QAAQC;QAA8BC,MAAM;MAAU;IAC/F,CAAA;AAEA,UAAME,UAAU;MACdC,WAAW,IAAIC,0BAA0BH,uBAAAA;MACzCC,SAAS,IAAIE,0BAA0BZ,qBAAAA;IACzC;AAEA,WAAO;MAAEa,WAAW;MAAMH;MAASI,YAAYpB,aAAAA;IAAe;EAChE,GAAG,CAAA,CAAE;AACP,GAlB8B;;;ALHvB,IAAMqB,wBAAuD,wBAAC,EACnEC,oBACAC,eACAC,qBACAC,iBACAC,oBACAC,eACA,GAAGC,MAAAA,MACJ;AACC,QAAM,EAAEC,UAAS,IAAKC,gCAAgC,IAAA;AACtD,QAAM,CAACC,OAAOC,QAAAA,IAAYC,UAAAA;AAE1B,QAAMC,uBAAuB,mCAAA;AAC3B,QAAI;AACF,UAAI,CAACL,WAAW;AACd,cAAM,IAAIM,MAAM,0BAAA;MAClB;AAEAN,gBAAUO,eAAc;AAExB,YAAMC,eAAeR,UAAUQ;AAE/B,UAAIA,aAAaC,cAAcC,SAAS,GAAG;AACzCd,0BAAkBY,YAAAA;MACpB;AAEA,UAAIA,aAAaC,cAAcC,SAAS,EAAG;AAE3C,YAAMC,aAAaC,yBAAyBZ,UAAUa,MAAM;AAE5D,YAAMf,gBAAgBa,UAAAA;AAEtBd,2BAAAA;IACF,SAASK,QAAO;AACdP,4BAAsBO,MAAAA;AACtB,UAAIR,cAAeS,UAASD,MAAAA;IAC9B;EACF,GAzB6B;AA2B7B,SACE,gBAAAY,QAAA,cAAAA,QAAA,UAAA,MACE,gBAAAA,QAAA,cAACC,aAAAA;IAAYb;MACb,gBAAAY,QAAA,cAACE,SAAAA;IAAQC,IAAI;MAAEC,eAAe;QAAEC,IAAI;QAAOC,IAAI;MAAS;IAAE;IAAGC,OAAM;IAAOC,KAAK;IAAI,GAAGvB;KACpF,gBAAAe,QAAA,cAACS,QAAAA;IAAML,eAAc;IAASD,IAAI;MAAEI,OAAO;IAAO;IAAGC,KAAK;KACxD,gBAAAR,QAAA,cAACU,kBAAAA,IAAAA,GACA/B,qBAEK,gBAAAqB,QAAA,cAACrB,oBAAAA;IAAmBgC,SAASpB;IAAsBqB,SAAQ;IAAYT,IAAI;MAAEU,WAAW;IAAM;KAAG,iBAAA,IAInG,IAAA,CAAA,CAAA;AAKd,GAxDoE;AA0D7D,IAAMC,6CAA4E,wBAAC7B,UAAAA;AACxF,QAAM,CAAC8B,QAAQ3B,KAAAA,IAAS4B,eAAAA;AACxB,SACE,gBAAAhB,QAAA,cAACiB,6BAAAA;IAA4BF;KAC3B,gBAAAf,QAAA,cAACC,aAAAA;IAAYb;MACb,gBAAAY,QAAA,cAACtB,uBAA0BO,KAAAA,CAAAA;AAGjC,GARyF;","names":["React","assertEx","FormControlBase","valid","unmask","value","replaceAll","CONTROL_NAME","CreditCardCvvFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","blurError","value","num","max","getCardNumberCvcMax","cvvValidation","valid","cvv","isValid","setError","setStatus","changeError","unmasked","match","isPotentiallyValid","setCardNumberFormControl","numberValidation","number","card","code","size","assertEx","FormControlBase","valid","CONTROL_NAME","CreditCardExpirationFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","rawValue","value","blurError","unmasked","expirationValid","valid","expirationDate","length","setErrorAndValidity","isValid","changeError","isPotentiallyValid","mask","test","makeMask","separator","limit","output","i","push","join","FormControlBase","valid","CONTROL_NAME","CreditCardNumberFormControl","FormControlBase","creditCardType","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","unmasked","numberValidation","valid","number","isValid","setErrorAndValidity","changeError","match","isPotentiallyValid","earlyNumberCheck","setCreditCardType","getCursorPosition","previousValue","card","lengthChange","length","unmaskedChange","gaps","oldCursor","cursorPosition","previous","oldSeparation","filter","gap","i","newSeparation","newCursor","mask","max","lengths","includes","newVal","map","slice","Boolean","join","onCreditCardTypeChange","type","setValue","options","umMasked","charAt","FormControlBase","CONTROL_NAME","CreditCardEmailFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","match","updateValidation","changeError","error","setErrorAndValidity","FormControlBase","NameFormControl","FormControlBase","required","constructor","nameLabel","autoCompleteLabel","placeHolder","setName","setSerializeSettings","sensitive","serializable","invalidMessage","props","autoComplete","autoCorrect","id","name","placeholder","spellCheck","blurError","value","setErrorAndValidity","changeError","FormControlBase","valid","CONTROL_NAME","CreditCardZipFormControl","FormControlBase","invalidMessage","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","postalCodeValidation","valid","postalCode","isValid","setErrorAndValidity","changeError","unmasked","match","patternStrict","isPotentiallyValid","FormControl","MuiFormControl","TextField","LabeledTextFieldWrapper","React","forwardRef","FormControlTextField","forwardRef","formControl","formControlError","fieldLabel","props","ref","name","handleChange","event","setValue","target","value","handleBlur","blurError","setTouched","MuiFormControl","fullWidth","LabeledTextFieldWrapper","label","htmlFor","TextField","error","helperText","hiddenLabel","onBlur","onChange","onKeyDown","selectionEnd","cursorPosition","previous","required","size","variant","displayName","useEffect","createContextEx","FormGroupCreditCardContext","FormGroup","React","useMemo","FormGroupCreditCardProvider","children","params","props","formGroup","useMemo","FormGroup","React","FormGroupCreditCardContext","Provider","value","provided","useContextEx","useFormGroupWithCreditCardInput","required","useContextEx","FormGroupCreditCardContext","useMemo","useRef","useState","StableDefaultArgs","useCreditCardFormControl","formControlName","Control","args","error","setError","useState","value","setValue","inputRef","useRef","formGroup","useFormGroupWithCreditCardInput","creditCardFormControl","useMemo","control","registerOnErrorChange","newError","registerOnChange","registerControl","useCreditCardCvvFormControl","formControlName","cardNumberControlName","control","creditCardFormControl","error","value","inputRef","useCreditCardFormControl","formGroup","useFormGroupWithCreditCardInput","creditCardNumberFormControl","getControl","useEffect","castControl","setCardNumberFormControl","console","CreditCardCvvWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardCvvFormControl","undefined","CreditCardCvvFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardEmailWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardEmailFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardExpirationWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardExpirationFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","expirationProps","React","FormControlTextField","formControl","formControlError","inputProps","React","useMemo","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","tabIndex","props","args","useMemo","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","NameFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","InputAdornment","React","AmexIcon","default","DiscoverIcon","MastercardIcon","VisaIcon","CreditCardData","amex","icon","AmexIcon","name","discover","DiscoverIcon","mastercard","MastercardIcon","visa","VisaIcon","useEffect","useState","useCreditCardNumberFormControl","formControlName","control","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","type","setType","useState","useEffect","castControl","onCreditCardTypeChange","console","onCursorChange","cursor","current","setSelectionRange","CreditCardNumberWithFormControl","fieldLabel","formControlName","props","creditCardFormControl","error","inputRef","type","value","useCreditCardNumberFormControl","CreditCardNumberFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cardProps","React","FormControlTextField","formControl","formControlError","inputProps","InputProps","startAdornment","length","InputAdornment","position","img","height","width","src","CreditCardData","icon","React","CreditCardZipWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardZipFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","Stack","FlexCol","ErrorRender","React","useState","NameFields","NameLabels","assertEx","isPayloadOfSchemaTypeWithMeta","CreditCardInputSchema","isCreditCardInput","validateCreditCardInputs","values","cardNumber","assertEx","cvc","emailAddress","expiration","firstName","lastName","schema","CreditCardInputSchema","timestamp","zip","Stack","React","InputFieldsStack","props","sx","React","Stack","gap","flexDirection","md","xs","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","lg","width","CreditCardNumberWithFormControl","direction","CreditCardCvvWithFormControl","CreditCardExpirationWithFormControl","CreditCardZipWithFormControl","CreditCardEmailWithFormControl","usePromise","StorageArchivist","StorageArchivistConfigSchema","ArchivistFormGroupStorage","StorageNameSpace","calculateTTL","months","MS_PER_DAY","DAYS_PER_MONTH","useFormStorage","usePromise","localStorageArchivist","StorageArchivist","create","account","config","namespace","schema","StorageArchivistConfigSchema","type","sessionStorageArchivist","storage","sensitive","ArchivistFormGroupStorage","serialize","ttlStorage","CreditCardFormFlexbox","ConfirmationButton","displayErrors","onErrorDuringSubmit","onInvalidSubmit","onSuccessfulSubmit","onValidSubmit","props","formGroup","useFormGroupWithCreditCardInput","error","setError","useState","handleConfirmPayment","Error","validateFields","errorSummary","invalidFields","length","formOutput","validateCreditCardInputs","values","React","ErrorRender","FlexCol","sx","flexDirection","md","xs","width","gap","Stack","InputFieldsStack","onClick","variant","alignSelf","CreditCardFormFlexboxWithFormGroupProvider","params","useFormStorage","FormGroupCreditCardProvider"]}
1
+ {"version":3,"sources":["../../src/components/controls/card/cvv/Cvv.tsx","../../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.ts","../../src/context/FormGroupCreditCardContext.ts","../../src/context/FormGroupCreditCardProvider.tsx","../../src/context/useFormGroupWithCreditCard.tsx","../../src/components/controls/card/useCreditCardFormControl.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.ts","../../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":["import React from 'react'\n\nimport { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport type { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { useCreditCardCvvFormControl } from './use.ts'\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 { assertEx } from '@xylabs/assert'\nimport type { EmptyObject } from '@xylabs/object'\nimport type { AbstractControl } from '@xyo-network/react-form-group'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\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 type { EmptyObject } from '@xylabs/object'\nimport type { AbstractControl } from '@xyo-network/react-form-group'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\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 // make it so the raw value is the same to preserve the / separator in the value\n override get rawValue() {\n return this.value\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 type { EmptyObject } from '@xylabs/object'\nimport type { SetOptions, ValidControlValue } from '@xyo-network/react-form-group'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\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 type { 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 type { 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 type { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\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 type { StandardTextFieldProps } from '@mui/material'\nimport { FormControl as MuiFormControl, TextField } from '@mui/material'\nimport type { FormControl } from '@xyo-network/react-form-group'\nimport { LabeledTextFieldWrapper } from '@xyo-network/react-shared'\nimport type { ChangeEventHandler, FocusEventHandler, KeyboardEvent } from 'react'\nimport React, { forwardRef } 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 type { StandardTextFieldProps } from '@mui/material'\nimport type { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../../context/index.ts'\nimport type { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\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 type { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'\nimport { createContextEx } from '@xyo-network/react-shared'\n\nimport type { CreditCardInput } from '../models/index.ts'\n\nexport const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()\n","import type { Payload } from '@xyo-network/payload-model'\nimport type { FormGroupParams } from '@xyo-network/react-form-group'\nimport { FormGroup } from '@xyo-network/react-form-group'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nimport type { CreditCardInput } from '../models/index.ts'\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.ts'\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 // eslint-disable-next-line @eslint-react/no-unstable-context-value\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.ts'\n\nexport const useFormGroupWithCreditCardInput = (required = false) => {\n return useContextEx(FormGroupCreditCardContext, 'FormGroupCreditCard', required)\n}\n","import type { StandardTextFieldProps } from '@mui/material'\nimport type { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'\nimport { useMemo, useRef, useState } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../context/index.ts'\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 React from 'react'\n\nimport { CreditCardEmailFormControl } from '../../../controls/index.ts'\nimport type { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React from 'react'\n\nimport { CreditCardExpirationFormControl } from '../../../controls/index.ts'\nimport type { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React, { useMemo } from 'react'\n\nimport { NameFormControl } from '../../../controls/index.ts'\nimport type { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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'\nimport React from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.ts'\nimport type { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { CreditCardData } from '../Options.ts'\nimport { useCreditCardNumberFormControl } from './use.ts'\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 ? (\n <InputAdornment position=\"start\">\n <img height=\"30px\" width=\"40px\" src={CreditCardData[type].icon} />\n </InputAdornment>\n )\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.ts'\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 type { StandardTextFieldProps } from '@mui/material'\nimport type { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect, useState } from 'react'\n\nimport type { CreditCardNumberFormControl } from '../../../../controls/index.ts'\nimport type { CreditCardOptions } from '../Options.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\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 React from 'react'\n\nimport { CreditCardZipFormControl } from '../../../controls/index.ts'\nimport type { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\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 React, { useState } from 'react'\n\nimport { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.ts'\nimport { validateCreditCardInputs } from '../support/index.ts'\nimport { InputFieldsStack } from './InputFieldsStack.tsx'\nimport type { CreditCardFormProps } from './Props.ts'\nimport { useFormStorage } from './useFormStorage.tsx'\n\nexport const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({\n ConfirmationButton,\n displayErrors,\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 if (displayErrors) 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 ? (\n <ConfirmationButton onClick={handleConfirmPayment} variant=\"contained\" sx={{ alignSelf: 'end' }}>\n Confirm Payment\n </ConfirmationButton>\n )\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 type { CreditCardInput } from '../../models/index.ts'\nimport { CreditCardInputSchema } from '../../models/index.ts'\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 type { Payload } from '@xyo-network/payload-model'\nimport { isPayloadOfSchemaTypeWithMeta } 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 type { StackProps } from '@mui/material'\nimport { Stack } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport {\n CreditCardCvvWithFormControl,\n CreditCardEmailWithFormControl,\n CreditCardExpirationWithFormControl,\n CreditCardNumberWithFormControl,\n CreditCardZipWithFormControl,\n NameWithFormControl,\n} from '../controls/index.ts'\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 type { FormGroupParams } from '@xyo-network/react-form-group'\nimport { ArchivistFormGroupStorage } from '@xyo-network/react-form-group'\n\nimport type { CreditCardInput } from '../../models/index.ts'\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 account: 'random',\n config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },\n })\n const sessionStorageArchivist = await StorageArchivist.create({\n account: 'random',\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":["React","assertEx","FormControlBase","valid","unmask","value","replaceAll","CONTROL_NAME","CreditCardCvvFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","blurError","value","num","max","getCardNumberCvcMax","cvvValidation","valid","cvv","isValid","setError","setStatus","changeError","unmasked","match","isPotentiallyValid","setCardNumberFormControl","numberValidation","number","card","code","size","assertEx","FormControlBase","valid","CONTROL_NAME","CreditCardExpirationFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","rawValue","value","blurError","unmasked","expirationValid","valid","expirationDate","length","setErrorAndValidity","isValid","changeError","isPotentiallyValid","mask","test","makeMask","separator","limit","output","i","push","join","FormControlBase","valid","CONTROL_NAME","CreditCardNumberFormControl","FormControlBase","creditCardType","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","unmasked","numberValidation","valid","number","isValid","setErrorAndValidity","changeError","match","isPotentiallyValid","earlyNumberCheck","setCreditCardType","getCursorPosition","previousValue","card","lengthChange","length","unmaskedChange","gaps","oldCursor","cursorPosition","previous","oldSeparation","filter","gap","i","newSeparation","newCursor","mask","max","lengths","includes","newVal","map","slice","Boolean","join","onCreditCardTypeChange","type","setValue","options","umMasked","charAt","FormControlBase","CONTROL_NAME","CreditCardEmailFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","match","updateValidation","changeError","error","setErrorAndValidity","FormControlBase","NameFormControl","FormControlBase","required","constructor","nameLabel","autoCompleteLabel","placeHolder","setName","setSerializeSettings","sensitive","serializable","invalidMessage","props","autoComplete","autoCorrect","id","name","placeholder","spellCheck","blurError","value","setErrorAndValidity","changeError","FormControlBase","valid","CONTROL_NAME","CreditCardZipFormControl","FormControlBase","invalidMessage","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","postalCodeValidation","valid","postalCode","isValid","setErrorAndValidity","changeError","unmasked","match","patternStrict","isPotentiallyValid","FormControl","MuiFormControl","TextField","LabeledTextFieldWrapper","React","forwardRef","FormControlTextField","forwardRef","formControl","formControlError","fieldLabel","props","ref","name","handleChange","event","setValue","target","value","handleBlur","blurError","setTouched","MuiFormControl","fullWidth","LabeledTextFieldWrapper","label","htmlFor","TextField","error","helperText","hiddenLabel","onBlur","onChange","onKeyDown","selectionEnd","cursorPosition","previous","required","size","variant","displayName","useEffect","createContextEx","FormGroupCreditCardContext","FormGroup","React","useMemo","FormGroupCreditCardProvider","children","params","props","formGroup","useMemo","FormGroup","React","FormGroupCreditCardContext","Provider","value","provided","useContextEx","useFormGroupWithCreditCardInput","required","useContextEx","FormGroupCreditCardContext","useMemo","useRef","useState","StableDefaultArgs","useCreditCardFormControl","formControlName","Control","args","error","setError","useState","value","setValue","inputRef","useRef","formGroup","useFormGroupWithCreditCardInput","creditCardFormControl","useMemo","control","registerOnErrorChange","newError","registerOnChange","registerControl","useCreditCardCvvFormControl","formControlName","cardNumberControlName","control","creditCardFormControl","error","value","inputRef","useCreditCardFormControl","formGroup","useFormGroupWithCreditCardInput","creditCardNumberFormControl","getControl","useEffect","castControl","setCardNumberFormControl","console","CreditCardCvvWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardCvvFormControl","undefined","CreditCardCvvFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardEmailWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardEmailFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardExpirationWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardExpirationFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","expirationProps","React","FormControlTextField","formControl","formControlError","inputProps","React","useMemo","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","tabIndex","props","args","useMemo","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","NameFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","InputAdornment","React","AmexIcon","default","DiscoverIcon","MastercardIcon","VisaIcon","CreditCardData","amex","icon","AmexIcon","name","discover","DiscoverIcon","mastercard","MastercardIcon","visa","VisaIcon","useEffect","useState","useCreditCardNumberFormControl","formControlName","control","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","type","setType","useState","useEffect","castControl","onCreditCardTypeChange","console","onCursorChange","cursor","current","setSelectionRange","CreditCardNumberWithFormControl","fieldLabel","formControlName","props","creditCardFormControl","error","inputRef","type","value","useCreditCardNumberFormControl","CreditCardNumberFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cardProps","React","FormControlTextField","formControl","formControlError","inputProps","InputProps","startAdornment","length","InputAdornment","position","img","height","width","src","CreditCardData","icon","React","CreditCardZipWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardZipFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","Stack","FlexCol","ErrorRender","React","useState","NameFields","NameLabels","assertEx","isPayloadOfSchemaTypeWithMeta","CreditCardInputSchema","isCreditCardInput","validateCreditCardInputs","values","cardNumber","assertEx","cvc","emailAddress","expiration","firstName","lastName","schema","CreditCardInputSchema","timestamp","zip","Stack","React","InputFieldsStack","props","sx","React","Stack","gap","flexDirection","md","xs","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","lg","width","CreditCardNumberWithFormControl","direction","CreditCardCvvWithFormControl","CreditCardExpirationWithFormControl","CreditCardZipWithFormControl","CreditCardEmailWithFormControl","usePromise","StorageArchivist","StorageArchivistConfigSchema","ArchivistFormGroupStorage","StorageNameSpace","calculateTTL","months","MS_PER_DAY","DAYS_PER_MONTH","useFormStorage","usePromise","localStorageArchivist","StorageArchivist","create","account","config","namespace","schema","StorageArchivistConfigSchema","type","sessionStorageArchivist","storage","sensitive","ArchivistFormGroupStorage","serialize","ttlStorage","CreditCardFormFlexbox","ConfirmationButton","displayErrors","onErrorDuringSubmit","onInvalidSubmit","onSuccessfulSubmit","onValidSubmit","props","formGroup","useFormGroupWithCreditCardInput","error","setError","useState","handleConfirmPayment","Error","validateFields","errorSummary","invalidFields","length","formOutput","validateCreditCardInputs","values","React","ErrorRender","FlexCol","sx","flexDirection","md","xs","width","gap","Stack","InputFieldsStack","onClick","variant","alignSelf","CreditCardFormFlexboxWithFormGroupProvider","params","useFormStorage","FormGroupCreditCardProvider"]}
package/package.json CHANGED
@@ -7,19 +7,19 @@
7
7
  },
8
8
  "bugs": {
9
9
  "email": "support@xyo.network",
10
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
10
+ "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
11
11
  },
12
12
  "dependencies": {
13
13
  "@mui/icons-material": "^5.16.7",
14
- "@xylabs/assert": "^4.0.1",
15
- "@xylabs/object": "^4.0.1",
16
- "@xylabs/react-flexbox": "^4.0.1",
17
- "@xylabs/react-promise": "^4.0.1",
18
- "@xyo-network/archivist-storage": "^3.0.2",
19
- "@xyo-network/payload-model": "^3.0.2",
20
- "@xyo-network/react-error": "^3.0.1",
21
- "@xyo-network/react-form-group": "^3.0.1",
22
- "@xyo-network/react-shared": "^3.0.1",
14
+ "@xylabs/assert": "^4.0.2",
15
+ "@xylabs/object": "^4.0.2",
16
+ "@xylabs/react-flexbox": "^4.0.3",
17
+ "@xylabs/react-promise": "^4.0.3",
18
+ "@xyo-network/archivist-storage": "^3.0.3",
19
+ "@xyo-network/payload-model": "^3.0.3",
20
+ "@xyo-network/react-error": "^3.0.2",
21
+ "@xyo-network/react-form-group": "^3.0.2",
22
+ "@xyo-network/react-shared": "^3.0.2",
23
23
  "card-validator": "^10.0.0"
24
24
  },
25
25
  "peerDependencies": {
@@ -29,8 +29,8 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@storybook/react": "^8.2.9",
32
- "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.15",
33
- "@xylabs/tsconfig-react": "^4.0.0-rc.15",
32
+ "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
33
+ "@xylabs/tsconfig-react": "^4.0.0-rc.20",
34
34
  "typescript": "^5.5.4"
35
35
  },
36
36
  "description": "Common React library for all XYO projects that use React",
@@ -60,7 +60,7 @@
60
60
  },
61
61
  "repository": {
62
62
  "type": "git",
63
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
63
+ "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
64
64
  },
65
65
  "scripts": {
66
66
  "lint-pkg": "npmPkgJsonLint .",
@@ -68,6 +68,6 @@
68
68
  },
69
69
  "sideEffects": false,
70
70
  "types": "dist/browser/index.d.ts",
71
- "version": "3.0.1",
71
+ "version": "3.0.2",
72
72
  "type": "module"
73
73
  }
@@ -1,4 +1,4 @@
1
- import { StandardTextFieldProps } from '@mui/material'
1
+ import type { StandardTextFieldProps } from '@mui/material'
2
2
 
3
3
  export interface WithFormControlProps extends StandardTextFieldProps {
4
4
  fieldLabel?: string
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import { CreditCardEmailFormControl } from '../../../controls/index.ts'
4
- import { WithFormControlProps } from '../WithFormControlProps.ts'
4
+ import type { WithFormControlProps } from '../WithFormControlProps.ts'
5
5
  import { FormControlTextField } from './FormControlTextField.tsx'
6
6
  import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
7
7
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import { CreditCardExpirationFormControl } from '../../../controls/index.ts'
4
- import { WithFormControlProps } from '../WithFormControlProps.ts'
4
+ import type { WithFormControlProps } from '../WithFormControlProps.ts'
5
5
  import { FormControlTextField } from './FormControlTextField.tsx'
6
6
  import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
7
7
 
@@ -1,7 +1,9 @@
1
- import { FormControl as MuiFormControl, StandardTextFieldProps, TextField } from '@mui/material'
2
- import { FormControl } from '@xyo-network/react-form-group'
1
+ import type { StandardTextFieldProps } from '@mui/material'
2
+ import { FormControl as MuiFormControl, TextField } from '@mui/material'
3
+ import type { FormControl } from '@xyo-network/react-form-group'
3
4
  import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
4
- import React, { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'
5
+ import type { ChangeEventHandler, FocusEventHandler, KeyboardEvent } from 'react'
6
+ import React, { forwardRef } from 'react'
5
7
 
6
8
  export interface FormControlTextFieldProps extends StandardTextFieldProps {
7
9
  fieldLabel: string
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo } from 'react'
2
2
 
3
3
  import { NameFormControl } from '../../../controls/index.ts'
4
- import { WithFormControlProps } from '../WithFormControlProps.ts'
4
+ import type { WithFormControlProps } from '../WithFormControlProps.ts'
5
5
  import { FormControlTextField } from './FormControlTextField.tsx'
6
6
  import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
7
7
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import { CreditCardZipFormControl } from '../../../controls/index.ts'
4
- import { WithFormControlProps } from '../WithFormControlProps.ts'
4
+ import type { WithFormControlProps } from '../WithFormControlProps.ts'
5
5
  import { FormControlTextField } from './FormControlTextField.tsx'
6
6
  import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
7
7
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
3
  import { CreditCardCvvFormControl } from '../../../../controls/index.ts'
4
- import { WithFormControlProps } from '../../WithFormControlProps.ts'
4
+ import type { WithFormControlProps } from '../../WithFormControlProps.ts'
5
5
  import { FormControlTextField } from '../FormControlTextField.tsx'
6
6
  import { useCreditCardCvvFormControl } from './use.ts'
7
7
 
@@ -1,9 +1,9 @@
1
- import { StandardTextFieldProps } from '@mui/material'
2
- import { FormControlBase } from '@xyo-network/react-form-group'
1
+ import type { StandardTextFieldProps } from '@mui/material'
2
+ import type { FormControlBase } from '@xyo-network/react-form-group'
3
3
  import { useEffect } from 'react'
4
4
 
5
5
  import { useFormGroupWithCreditCardInput } from '../../../../context/index.ts'
6
- import { CreditCardCvvFormControl } from '../../../../controls/index.ts'
6
+ import type { CreditCardCvvFormControl } from '../../../../controls/index.ts'
7
7
  import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
8
8
 
9
9
  export const useCreditCardCvvFormControl = (
@@ -2,7 +2,7 @@ import { InputAdornment } from '@mui/material'
2
2
  import React from 'react'
3
3
 
4
4
  import { CreditCardNumberFormControl } from '../../../../controls/index.ts'
5
- import { WithFormControlProps } from '../../WithFormControlProps.ts'
5
+ import type { WithFormControlProps } from '../../WithFormControlProps.ts'
6
6
  import { FormControlTextField } from '../FormControlTextField.tsx'
7
7
  import { CreditCardData } from '../Options.ts'
8
8
  import { useCreditCardNumberFormControl } from './use.ts'
@@ -1,9 +1,9 @@
1
- import { StandardTextFieldProps } from '@mui/material'
2
- import { FormControlBase } from '@xyo-network/react-form-group'
1
+ import type { StandardTextFieldProps } from '@mui/material'
2
+ import type { FormControlBase } from '@xyo-network/react-form-group'
3
3
  import { useEffect, useState } from 'react'
4
4
 
5
- import { CreditCardNumberFormControl } from '../../../../controls/index.ts'
6
- import { CreditCardOptions } from '../Options.ts'
5
+ import type { CreditCardNumberFormControl } from '../../../../controls/index.ts'
6
+ import type { CreditCardOptions } from '../Options.ts'
7
7
  import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
8
8
 
9
9
  export const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {
@@ -1,5 +1,5 @@
1
- import { StandardTextFieldProps } from '@mui/material'
2
- import { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
1
+ import type { StandardTextFieldProps } from '@mui/material'
2
+ import type { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
3
3
  import { useMemo, useRef, useState } from 'react'
4
4
 
5
5
  import { useFormGroupWithCreditCardInput } from '../../../context/index.ts'
@@ -6,7 +6,7 @@ import React, { useState } from 'react'
6
6
  import { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.ts'
7
7
  import { validateCreditCardInputs } from '../support/index.ts'
8
8
  import { InputFieldsStack } from './InputFieldsStack.tsx'
9
- import { CreditCardFormProps } from './Props.ts'
9
+ import type { CreditCardFormProps } from './Props.ts'
10
10
  import { useFormStorage } from './useFormStorage.tsx'
11
11
 
12
12
  export const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({
@@ -1,5 +1,7 @@
1
- import { Stack, StackProps } from '@mui/material'
2
- import React, { PropsWithChildren } from 'react'
1
+ import type { StackProps } from '@mui/material'
2
+ import { Stack } from '@mui/material'
3
+ import type { PropsWithChildren } from 'react'
4
+ import React from 'react'
3
5
 
4
6
  import {
5
7
  CreditCardCvvWithFormControl,
@@ -1,9 +1,9 @@
1
- import { ButtonProps } from '@mui/material'
2
- import { FlexBoxProps } from '@xylabs/react-flexbox'
3
- import { ErrorSummary } from '@xyo-network/react-form-group'
4
- import { ComponentType } from 'react'
1
+ import type { ButtonProps } from '@mui/material'
2
+ import type { FlexBoxProps } from '@xylabs/react-flexbox'
3
+ import type { ErrorSummary } from '@xyo-network/react-form-group'
4
+ import type { ComponentType } from 'react'
5
5
 
6
- import { CreditCardInput } from '../../models/index.ts'
6
+ import type { CreditCardInput } from '../../models/index.ts'
7
7
 
8
8
  export interface CreditCardFormProps extends FlexBoxProps {
9
9
  ConfirmationButton?: ComponentType<ButtonProps>
@@ -1,8 +1,9 @@
1
1
  import { usePromise } from '@xylabs/react-promise'
2
2
  import { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'
3
- import { ArchivistFormGroupStorage, FormGroupParams } from '@xyo-network/react-form-group'
3
+ import type { FormGroupParams } from '@xyo-network/react-form-group'
4
+ import { ArchivistFormGroupStorage } from '@xyo-network/react-form-group'
4
5
 
5
- import { CreditCardInput } from '../../models/index.ts'
6
+ import type { CreditCardInput } from '../../models/index.ts'
6
7
 
7
8
  const StorageNameSpace = 'credit-card-fields'
8
9
 
@@ -1,6 +1,7 @@
1
1
  import { assertEx } from '@xylabs/assert'
2
2
 
3
- import { CreditCardInput, CreditCardInputSchema } from '../../models/index.ts'
3
+ import type { CreditCardInput } from '../../models/index.ts'
4
+ import { CreditCardInputSchema } from '../../models/index.ts'
4
5
 
5
6
  export const validateCreditCardInputs = (values: CreditCardInput): CreditCardInput => {
6
7
  return {
@@ -1,6 +1,6 @@
1
- import { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'
1
+ import type { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'
2
2
  import { createContextEx } from '@xyo-network/react-shared'
3
3
 
4
- import { CreditCardInput } from '../models/index.ts'
4
+ import type { CreditCardInput } from '../models/index.ts'
5
5
 
6
6
  export const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()
@@ -1,8 +1,10 @@
1
- import { Payload } from '@xyo-network/payload-model'
2
- import { FormGroup, FormGroupParams } from '@xyo-network/react-form-group'
3
- import React, { PropsWithChildren, useMemo } from 'react'
1
+ import type { Payload } from '@xyo-network/payload-model'
2
+ import type { FormGroupParams } from '@xyo-network/react-form-group'
3
+ import { FormGroup } from '@xyo-network/react-form-group'
4
+ import type { PropsWithChildren } from 'react'
5
+ import React, { useMemo } from 'react'
4
6
 
5
- import { CreditCardInput } from '../models/index.ts'
7
+ import type { CreditCardInput } from '../models/index.ts'
6
8
  import { FormGroupCreditCardContext } from './FormGroupCreditCardContext.ts'
7
9
 
8
10
  export interface FormGroupCreditCardProviderProps<TStorage extends Payload = Payload> extends PropsWithChildren {
@@ -1,6 +1,7 @@
1
1
  import { assertEx } from '@xylabs/assert'
2
- import { EmptyObject } from '@xylabs/object'
3
- import { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'
2
+ import type { EmptyObject } from '@xylabs/object'
3
+ import type { AbstractControl } from '@xyo-network/react-form-group'
4
+ import { FormControlBase } from '@xyo-network/react-form-group'
4
5
  import valid from 'card-validator'
5
6
 
6
7
  import { unmask } from '../utils/index.ts'
@@ -1,6 +1,7 @@
1
1
  import { assertEx } from '@xylabs/assert'
2
- import { EmptyObject } from '@xylabs/object'
3
- import { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'
2
+ import type { EmptyObject } from '@xylabs/object'
3
+ import type { AbstractControl } from '@xyo-network/react-form-group'
4
+ import { FormControlBase } from '@xyo-network/react-form-group'
4
5
  import valid from 'card-validator'
5
6
 
6
7
  import { unmask } from '../utils/index.ts'
@@ -1,5 +1,6 @@
1
- import { EmptyObject } from '@xylabs/object'
2
- import { FormControlBase, SetOptions, ValidControlValue } from '@xyo-network/react-form-group'
1
+ import type { EmptyObject } from '@xylabs/object'
2
+ import type { SetOptions, ValidControlValue } from '@xyo-network/react-form-group'
3
+ import { FormControlBase } from '@xyo-network/react-form-group'
3
4
  import valid from 'card-validator'
4
5
 
5
6
  import { unmask } from '../utils/index.ts'
@@ -1,4 +1,4 @@
1
- import { EmptyObject } from '@xylabs/object'
1
+ import type { EmptyObject } from '@xylabs/object'
2
2
  import { FormControlBase } from '@xyo-network/react-form-group'
3
3
 
4
4
  const CONTROL_NAME = 'Email'
@@ -1,4 +1,4 @@
1
- import { EmptyObject } from '@xylabs/object'
1
+ import type { EmptyObject } from '@xylabs/object'
2
2
  import { FormControlBase } from '@xyo-network/react-form-group'
3
3
 
4
4
  export class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {
@@ -1,4 +1,4 @@
1
- import { EmptyObject } from '@xylabs/object'
1
+ import type { EmptyObject } from '@xylabs/object'
2
2
  import { FormControlBase } from '@xyo-network/react-form-group'
3
3
  import valid from 'card-validator'
4
4
 
@@ -1,4 +1,5 @@
1
- import { isPayloadOfSchemaTypeWithMeta, Payload } from '@xyo-network/payload-model'
1
+ import type { Payload } from '@xyo-network/payload-model'
2
+ import { isPayloadOfSchemaTypeWithMeta } from '@xyo-network/payload-model'
2
3
 
3
4
  export const CreditCardInputSchema = 'network.xyo.credit.card.input' as const
4
5
  export type CreditCardInputSchema = typeof CreditCardInputSchema
@@ -1,9 +1,9 @@
1
1
  import { Button } from '@mui/material'
2
- import { Meta, StoryFn } from '@storybook/react'
2
+ import type { Meta, StoryFn } from '@storybook/react'
3
3
  import React from 'react'
4
4
 
5
5
  import { CreditCardFormFlexboxWithFormGroupProvider } from '../components/index.ts'
6
- import { CreditCardInput } from '../models/index.ts'
6
+ import type { CreditCardInput } from '../models/index.ts'
7
7
 
8
8
  export default {
9
9
  title: 'form/CreditCardForm',
package/xy.config.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
1
+ import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
2
2
  const config: XyTsupConfig = {
3
3
  compile: {
4
4
  browser: {