@alto-avios/alto-ui 3.1.0 → 3.2.1

package/dist/components/Box/Box.js

@@ -3,22 +3,23 @@ import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundC
 import { flexVariants } from "../../utils/flex/flex.js";
 import { borderVariants } from "../../utils/border/border.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
+import { positionVariants } from "../../utils/position/position.js";
 const Box = ({
   children,
   as: Component = "div",
-  backgroundColour,
   width,
   maxWidth,
   minWidth,
   height,
   maxHeight,
   minHeight,
+  position,
   ...props
 }) => {
-  if (backgroundColour && !props.backgroundColor) {
+  if ((props == null ? void 0 : props.backgroundColour) && !(props == null ? void 0 : props.backgroundColor)) {
     console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
   }
-  const resolvedBackgroundColor = props.backgroundColor ?? backgroundColour;
+  const resolvedBackgroundColor = props.backgroundColor ?? props.backgroundColour;
   const borderWidth = !(props == null ? void 0 : props.borderWidth) && props.borderColour !== "none" ? "sm" : props.borderWidth;
   const stylesProp = {
     width: width === "full" ? "100%" : width,
@@ -38,6 +39,8 @@ const Box = ({
   })} ${backgroundColorVariants({
     backgroundColor: resolvedBackgroundColor,
     ...props
+  })} ${positionVariants({
+    position
   })}`, style: stylesProp, children });
 };
 export {

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Box.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Button/Button.js

@@ -8,35 +8,35 @@ import { useFocusRing } from "@react-aria/focus";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Button.css';const button$1 = "_button_1t97g_1";
-const content = "_content_1t97g_22";
-const isNotLoading = "_isNotLoading_1t97g_31";
-const loadingSpinner = "_loadingSpinner_1t97g_31";
-const isLoading = "_isLoading_1t97g_40";
-const focusWhite = "_focusWhite_1t97g_52";
-const sm = "_sm_1t97g_59";
-const md = "_md_1t97g_64";
-const lg = "_lg_1t97g_69";
-const fullWidth = "_fullWidth_1t97g_74";
-const textAlignLeft = "_textAlignLeft_1t97g_81";
-const textAlignCenter = "_textAlignCenter_1t97g_85";
-const textAlignRight = "_textAlignRight_1t97g_89";
-const accentPrimary = "_accentPrimary_1t97g_97";
-const accentSecondary = "_accentSecondary_1t97g_117";
-const accentTertiary = "_accentTertiary_1t97g_147";
-const accentQuaternary = "_accentQuaternary_1t97g_173";
-const criticalPrimary = "_criticalPrimary_1t97g_199";
-const criticalSecondary = "_criticalSecondary_1t97g_224";
-const criticalTertiary = "_criticalTertiary_1t97g_254";
-const criticalQuaternary = "_criticalQuaternary_1t97g_280";
-const neutralPrimary = "_neutralPrimary_1t97g_307";
-const neutralSecondary = "_neutralSecondary_1t97g_332";
-const neutralTertiary = "_neutralTertiary_1t97g_361";
-const neutralQuaternary = "_neutralQuaternary_1t97g_387";
-const whitePrimary = "_whitePrimary_1t97g_414";
-const whiteSecondary = "_whiteSecondary_1t97g_440";
-const whiteTertiary = "_whiteTertiary_1t97g_473";
-const whiteQuaternary = "_whiteQuaternary_1t97g_503";
+import '../../assets/Button.css';const button$1 = "_button_etsb3_1";
+const content = "_content_etsb3_19";
+const isNotLoading = "_isNotLoading_etsb3_28";
+const loadingSpinner = "_loadingSpinner_etsb3_28";
+const isLoading = "_isLoading_etsb3_37";
+const focusWhite = "_focusWhite_etsb3_49";
+const sm = "_sm_etsb3_56";
+const md = "_md_etsb3_64";
+const lg = "_lg_etsb3_72";
+const fullWidth = "_fullWidth_etsb3_80";
+const textAlignLeft = "_textAlignLeft_etsb3_87";
+const textAlignCenter = "_textAlignCenter_etsb3_91";
+const textAlignRight = "_textAlignRight_etsb3_95";
+const accentPrimary = "_accentPrimary_etsb3_103";
+const accentSecondary = "_accentSecondary_etsb3_123";
+const accentTertiary = "_accentTertiary_etsb3_153";
+const accentQuaternary = "_accentQuaternary_etsb3_179";
+const criticalPrimary = "_criticalPrimary_etsb3_205";
+const criticalSecondary = "_criticalSecondary_etsb3_230";
+const criticalTertiary = "_criticalTertiary_etsb3_260";
+const criticalQuaternary = "_criticalQuaternary_etsb3_286";
+const neutralPrimary = "_neutralPrimary_etsb3_313";
+const neutralSecondary = "_neutralSecondary_etsb3_338";
+const neutralTertiary = "_neutralTertiary_etsb3_367";
+const neutralQuaternary = "_neutralQuaternary_etsb3_393";
+const whitePrimary = "_whitePrimary_etsb3_420";
+const whiteSecondary = "_whiteSecondary_etsb3_446";
+const whiteTertiary = "_whiteTertiary_etsb3_479";
+const whiteQuaternary = "_whiteQuaternary_etsb3_509";
 const styles = {
   button: button$1,
   content,
@@ -67,8 +67,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_1t97g_535",
-  "icon-wrapper": "_icon-wrapper_1t97g_540"
+  "fa-spinner-third": "_fa-spinner-third_etsb3_541",
+  "icon-wrapper": "_icon-wrapper_etsb3_546"
 };
 const button = cva(styles.button, {
   variants: {

package/dist/components/CalloutBanner/CalloutBanner.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const calloutBanner: (props?: ({
+    emphasis?: "secondary" | "primary" | "tertiary" | null | undefined;
+    styleVariant?: "neutral" | "critical" | "success" | "information" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CalloutBannerVariants = VariantProps<typeof calloutBanner>;
+export interface CalloutBannerProps extends CalloutBannerVariants {
+    /** The main heading text of the banner */
+    title: string;
+    /** Optional secondary text providing more details */
+    description?: string;
+    /** Optional button group to be rendered as a label */
+    label?: React.ReactNode;
+    /** Optional content to be rendered in the end section of the banner */
+    children?: React.ReactNode;
+    /** Optional callback function triggered when the dismiss button is clicked */
+    onDismiss?: () => void;
+}
+export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, onDismiss, }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
+export default CalloutBanner;

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Icon } from "../Icon/Icon.js";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_kvv8j_1";
+const calloutBanner__icon = "_calloutBanner__icon_kvv8j_11";
+const calloutBanner__start = "_calloutBanner__start_kvv8j_15";
+const calloutBanner__dismiss = "_calloutBanner__dismiss_kvv8j_23";
+const calloutBanner__meta = "_calloutBanner__meta_kvv8j_29";
+const calloutBanner__end = "_calloutBanner__end_kvv8j_58";
+const styles = {
+  calloutBanner: calloutBanner$1,
+  calloutBanner__icon,
+  calloutBanner__start,
+  calloutBanner__dismiss,
+  calloutBanner__meta,
+  "calloutBanner__meta-title": "_calloutBanner__meta-title_kvv8j_41",
+  "calloutBanner__meta-description": "_calloutBanner__meta-description_kvv8j_45",
+  "calloutBanner__meta-label": "_calloutBanner__meta-label_kvv8j_49",
+  calloutBanner__end,
+  "calloutBanner-critical": "_calloutBanner-critical_kvv8j_66",
+  "calloutBanner-primary": "_calloutBanner-primary_kvv8j_70",
+  "calloutBanner-secondary": "_calloutBanner-secondary_kvv8j_74",
+  "calloutBanner-tertiary": "_calloutBanner-tertiary_kvv8j_83",
+  "calloutBanner-success": "_calloutBanner-success_kvv8j_92",
+  "calloutBanner-information": "_calloutBanner-information_kvv8j_118",
+  "calloutBanner-neutral": "_calloutBanner-neutral_kvv8j_144"
+};
+const calloutBanner = cva(styles.calloutBanner, {
+  variants: {
+    emphasis: {
+      primary: styles["calloutBanner-primary"],
+      secondary: styles["calloutBanner-secondary"],
+      tertiary: styles["calloutBanner-tertiary"]
+    },
+    styleVariant: {
+      critical: styles["calloutBanner-critical"],
+      success: styles["calloutBanner-success"],
+      information: styles["calloutBanner-information"],
+      neutral: styles["calloutBanner-neutral"]
+    }
+  },
+  defaultVariants: {
+    emphasis: "primary",
+    styleVariant: "critical"
+  }
+});
+const CalloutBanner = ({
+  title,
+  description,
+  label,
+  children,
+  styleVariant = "critical",
+  emphasis = "primary",
+  onDismiss
+}) => {
+  const iconName = React.useMemo(() => {
+    switch (styleVariant) {
+      case "critical":
+        return "circle-exclamation";
+      case "success":
+        return "check-circle";
+      case "information":
+        return "info-circle";
+      case "neutral":
+        return "check-circle";
+      default:
+        return "circle-exclamation";
+    }
+  }, [emphasis]);
+  return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
+    emphasis,
+    styleVariant
+  }), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__start"], children: [
+      /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas", className: styles["calloutBanner__icon"], iconSize: "1.25x", padding: "roomy" }),
+      /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__meta"], children: [
+        typeof onDismiss === "function" && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__dismiss"], children: /* @__PURE__ */ jsx(IconButton, { onClick: onDismiss, styleVariant: emphasis === "primary" ? "white" : "neutral", emphasis: "quaternary", size: "sm", iconProps: {
+          iconName: "close",
+          iconPrefix: "far",
+          iconSize: "1x"
+        }, tooltipLabel: "Dismiss banner", "aria-label": "Dismiss banner" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-title"], children: title }),
+        description && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-description"], children: description }),
+        label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
+      ] })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__end"], children })
+  ] });
+};
+export {
+  CalloutBanner,
+  CalloutBanner as default
+};
+//# sourceMappingURL=CalloutBanner.js.map

package/dist/components/CalloutBanner/CalloutBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutBanner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CalloutBanner/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CalloutBanner';

package/dist/components/CalloutBanner/index.js

@@ -0,0 +1,5 @@
+import { CalloutBanner } from "./CalloutBanner.js";
+export {
+  CalloutBanner as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CalloutBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Checkbox/index.d.ts

@@ -1 +1,2 @@
+export type { CheckboxProps } from './Checkbox';
 export { default } from './Checkbox';

package/dist/components/CreditCardNumberField/CreditCardNumberField.d.ts

@@ -22,8 +22,8 @@ interface CreditCardNumberFieldBaseProps {
      */
     defaultValue?: CreditCardNumberValue;
 }
-export interface CreditCardNumberFieldProps extends FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, CreditCardNumberFieldBaseProps {
+export interface CreditCardNumberFieldProps extends Omit<FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, 'isRequired'>, CreditCardNumberFieldBaseProps {
     placeholder?: string;
 }
-export declare const CreditCardNumberField: ({ cardIcon: cardIconProp, defaultValue, value: valueControlled, onChange: onChangeControlled, ...props }: CreditCardNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardNumberField: ({ cardIcon: cardIconProp, defaultValue, value: valueControlled, onChange: onChangeControlled, label, ...props }: CreditCardNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default CreditCardNumberField;

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -5,9 +5,9 @@ import { P as PatternFormat } from "../../react-number-format.es-DMLgWFZX.js";
 import { Field } from "../_base/Field/Field.js";
 import { Icon } from "../Icon/Icon.js";
 import { getCardIcon } from "../../utils/creditCard/creditCard.js";
-import '../../assets/CreditCardNumberField.css';const creditCardNumberField = "_creditCardNumberField_1d9o2_1";
-const inputWrapper = "_inputWrapper_1d9o2_45";
-const iconEnd = "_iconEnd_1d9o2_51";
+import '../../assets/CreditCardNumberField.css';const creditCardNumberField = "_creditCardNumberField_1wvso_1";
+const inputWrapper = "_inputWrapper_1wvso_45";
+const iconEnd = "_iconEnd_1wvso_51";
 const styles = {
   creditCardNumberField,
   inputWrapper,
@@ -18,6 +18,7 @@ const CreditCardNumberField = ({
   defaultValue,
   value: valueControlled,
   onChange: onChangeControlled,
+  label = "Credit card number",
   ...props
 }) => {
   const [value, setValue] = React.useState(defaultValue);
@@ -28,14 +29,14 @@ const CreditCardNumberField = ({
     }
     return cardIconProp || "credit-card";
   }, [value, cardIconProp]);
-  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
-    /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "#### #### #### ####", customInput: Input, "aria-label": (props == null ? void 0 : props.label) || "Credit card number", placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
+  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, label, isRequired: true, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+    /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "#### #### #### ####", customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
       if (typeof onChangeControlled === "function") {
         onChangeControlled(values.value);
       }
       setValue(values.value);
     } }),
-    /* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPack: cardIcon === "credit-card" ? "solid" : "brands", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
+    /* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPrefix: cardIcon === "credit-card" ? "fas" : "fab", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
   ] }) });
 };
 export {

package/dist/components/CreditCardNumberField/CreditCardNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreditCardNumberField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CreditCardNumberField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { FieldProps } from '../_base/Field';
+type CreditCardSecurityCodeValue = string | number | null | undefined;
+interface CreditCardSecurityCodeFieldBaseProps {
+    /**
+     * The controlled value of the credit card number.
+     */
+    value?: CreditCardSecurityCodeValue;
+    /**
+     * The controlled onChange handler for the credit card number.
+     */
+    onChange?: (value?: CreditCardSecurityCodeValue) => void;
+    /**
+     * The default value of the credit card number.
+     */
+    defaultValue?: CreditCardSecurityCodeValue;
+    /**
+     * The CSV pictogram icon to display.
+     * Expects 'back' or 'front' depending on card type.
+     */
+    cardIcon?: 'front' | 'back';
+}
+export interface CreditCardSecurityCodeFieldProps extends Omit<FieldProps<Omit<AriaTextFieldProps, 'defaultValue' | 'value' | 'onChange'>>, 'isRequired'>, CreditCardSecurityCodeFieldBaseProps {
+    /**
+     * The placeholder text to display when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Expects a DetailsDisclosure component for further information.
+     */
+    children?: React.ReactNode;
+}
+export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CreditCardSecurityCodeField;

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { TextField, Input } from "react-aria-components";
+import { P as PatternFormat } from "../../react-number-format.es-DMLgWFZX.js";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/CreditCardSecurityCodeField.css';const creditCardSecurityCodeField = "_creditCardSecurityCodeField_14mb2_1";
+const inputWrapper = "_inputWrapper_14mb2_11";
+const inputChildren = "_inputChildren_14mb2_54";
+const styles = {
+  creditCardSecurityCodeField,
+  inputWrapper,
+  inputChildren
+};
+const CreditCardSecurityCodeField = ({
+  defaultValue,
+  value: valueControlled,
+  onChange: onChangeControlled,
+  label = "Card security code",
+  cardIcon = "back",
+  ...props
+}) => {
+  const [value, setValue] = React.useState(defaultValue);
+  const valueDefinitive = valueControlled ?? value;
+  return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, label, isRequired: true, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+      /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "###", customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
+        if (typeof onChangeControlled === "function") {
+          onChangeControlled(values.value);
+        }
+        setValue(values.value);
+      } }),
+      /* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
+    ] }),
+    (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })
+  ] });
+};
+function CreditCardSecurityCodeIcon({
+  cardIcon = "back"
+}) {
+  return cardIcon === "back" ? /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", fill: "none", viewBox: "0 0 48 48", children: [
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M30.528 29.287v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M7.2 24v7.2h31.2V24zm30 1.2H8.4V30h28.8z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M4.8 14.4a4.8 4.8 0 0 1 4.8-4.8h28.8a4.8 4.8 0 0 1 4.8 4.8v19.2a4.8 4.8 0 0 1-4.8 4.8H9.6a4.8 4.8 0 0 1-4.8-4.8zm4.8-3.6h28.8a3.6 3.6 0 0 1 3.6 3.6H6a3.6 3.6 0 0 1 3.6-3.6M42 19.2v14.4a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V19.2z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M42 33.6V19.2H6v14.4a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6M38.4 24H7.2v7.2h31.2z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", d: "M38.4 10.8H9.6A3.6 3.6 0 0 0 6 14.4h36a3.6 3.6 0 0 0-3.6-3.6" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M8.4 25.2h28.8V30H8.4zm22.128 4.087v-.514l1.202-1.113a5 5 0 0 0 .258-.267q.105-.12.16-.233a.6.6 0 0 0 .054-.249.44.44 0 0 0-.252-.422.6.6 0 0 0-.266-.06.56.56 0 0 0-.27.063.43.43 0 0 0-.178.18.6.6 0 0 0-.063.279h-.678q0-.331.15-.576t.42-.377a1.4 1.4 0 0 1 .624-.134q.363 0 .632.129.27.126.42.353.15.225.15.517a1 1 0 0 1-.076.378q-.075.186-.265.414a6 6 0 0 1-.54.542l-.492.483v.023h1.418v.584zm-.802-3.377v3.377h-.714v-2.7h-.02l-.773.486v-.634l.836-.529zm4.317 3.296q.29.127.658.127.38 0 .673-.128a1.1 1.1 0 0 0 .46-.353.82.82 0 0 0 .166-.513.73.73 0 0 0-.194-.524q-.195-.211-.567-.26v-.026a.8.8 0 0 0 .46-.24.66.66 0 0 0 .176-.474.82.82 0 0 0-.145-.481 1 1 0 0 0-.407-.343 1.4 1.4 0 0 0-.612-.127q-.346 0-.621.127-.274.126-.436.348a.9.9 0 0 0-.166.514h.684a.4.4 0 0 1 .077-.224.47.47 0 0 1 .193-.147.65.65 0 0 1 .516.002.4.4 0 0 1 .23.374q0 .134-.07.235a.46.46 0 0 1-.194.154.7.7 0 0 1-.285.056h-.315v.525h.315q.19 0 .33.06a.5.5 0 0 1 .214.164.4.4 0 0 1 .075.24.4.4 0 0 1-.07.235.5.5 0 0 1-.197.16.7.7 0 0 1-.288.058.7.7 0 0 1-.282-.052.5.5 0 0 1-.201-.143.38.38 0 0 1-.081-.218h-.719q.005.295.17.521.166.225.453.353", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M37.641 30.866c1.298-.927 1.96-2.098 1.96-3.266s-.662-2.34-1.96-3.266c-1.295-.925-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.926-1.96 2.097-1.96 3.266 0 1.168.662 2.34 1.96 3.265 1.296.925 3.147 1.535 5.248 1.535 2.1 0 3.952-.61 5.247-1.534M32.394 33.6c4.643 0 8.407-2.687 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.763 6 8.407 6", clipRule: "evenodd" })
+  ] }) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", fill: "none", viewBox: "0 0 48 48", children: [
+    /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M37.336 31.19c1.627-1.044 2.418-2.343 2.418-3.592s-.791-2.548-2.418-3.593c-1.615-1.036-3.917-1.716-6.522-1.716s-4.908.68-6.522 1.716c-1.627 1.045-2.418 2.343-2.418 3.593s.79 2.548 2.418 3.592c1.614 1.036 3.916 1.716 6.522 1.716 2.605 0 4.907-.68 6.522-1.716m-6.522 2.916c5.6 0 10.14-2.914 10.14-6.508 0-3.595-4.54-6.509-10.14-6.509s-10.14 2.914-10.14 6.509c0 3.594 4.54 6.508 10.14 6.508", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M27.296 29.47v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.889-3.742v3.743h-.792v-2.992h-.022l-.857.537v-.702l.927-.586zm4.785 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M33.874 28.813v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zm1.782-2.223h.029v1.588H34.67v-.029zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-.676-1.678q.117.267.117.656 0 .39-.117.656a.9.9 0 0 1-.324.405.87.87 0 0 1-.492.138.87.87 0 0 1-.49-.138.9.9 0 0 1-.327-.405 1.7 1.7 0 0 1-.115-.656q0-.39.115-.656a.9.9 0 0 1 .326-.405.87.87 0 0 1 .491-.138q.282 0 .492.138a.9.9 0 0 1 .324.405", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M8.276 16.802V13.13h2.43v.64H9.053v.874h1.493v.64H9.052v1.517z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M11.229 16.802V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm1.303-1.925h-.527v-1.112h.523q.225 0 .371.067a.45.45 0 0 1 .22.19.6.6 0 0 1 .074.308q0 .18-.073.303a.44.44 0 0 1-.219.183 1 1 0 0 1-.37.06Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", d: "M21.56 16.802h-.67l-1.598-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.501-3.672v.64h1.124v3.032h.767V13.77h1.124v-.64z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4B4855", fillRule: "evenodd", d: "M9.6 9.6a4.8 4.8 0 0 0-4.8 4.8v19.2a4.8 4.8 0 0 0 4.8 4.8h28.8a4.8 4.8 0 0 0 4.8-4.8V14.4a4.8 4.8 0 0 0-4.8-4.8zm28.8 1.2H9.6A3.6 3.6 0 0 0 6 14.4v19.2a3.6 3.6 0 0 0 3.6 3.6h28.8a3.6 3.6 0 0 0 3.6-3.6V14.4a3.6 3.6 0 0 0-3.6-3.6", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", fillRule: "evenodd", d: "M9.6 10.8h28.8a3.6 3.6 0 0 1 3.6 3.6v19.2a3.6 3.6 0 0 1-3.6 3.6H9.6A3.6 3.6 0 0 1 6 33.6V14.4a3.6 3.6 0 0 1 3.6-3.6m17.696 18.67v-.57l1.332-1.233q.17-.165.286-.296.117-.132.177-.258a.64.64 0 0 0 .06-.276.49.49 0 0 0-.28-.468.64.64 0 0 0-.294-.066.6.6 0 0 0-.3.07.5.5 0 0 0-.197.2.65.65 0 0 0-.07.308h-.75q0-.368.166-.638a1.1 1.1 0 0 1 .466-.418q.3-.149.69-.148.403 0 .7.142.3.14.467.391.166.25.166.574 0 .211-.084.419a1.8 1.8 0 0 1-.294.458 7 7 0 0 1-.598.602l-.546.535v.026h1.572v.647h-2.669Zm-.89-3.742v3.743h-.79v-2.992h-.023l-.857.537v-.702l.927-.586h.744Zm4.786 3.653q.32.14.73.14.42 0 .745-.142.326-.143.51-.39a.9.9 0 0 0 .184-.57.8.8 0 0 0-.215-.58q-.216-.234-.629-.287v-.03a.9.9 0 0 0 .51-.266.73.73 0 0 0 .196-.525.9.9 0 0 0-.161-.534 1.1 1.1 0 0 0-.452-.38 1.54 1.54 0 0 0-.678-.14q-.383 0-.689.14a1.2 1.2 0 0 0-.482.386.97.97 0 0 0-.185.57h.759a.43.43 0 0 1 .086-.248.5.5 0 0 1 .213-.163.73.73 0 0 1 .572.002.45.45 0 0 1 .255.415.45.45 0 0 1-.077.26.5.5 0 0 1-.216.17.8.8 0 0 1-.316.063h-.35v.581h.35q.212 0 .365.066a.54.54 0 0 1 .238.183.44.44 0 0 1 .084.265.45.45 0 0 1-.078.261.5.5 0 0 1-.218.177.8.8 0 0 1-.32.064.8.8 0 0 1-.312-.056.55.55 0 0 1-.223-.16.4.4 0 0 1-.09-.24h-.797q.006.327.189.577.184.249.502.391m2.682-.568v-.623l1.562-2.462h.99v2.45h.465v.635h-.464v.658h-.757v-.658zM17.687 15.988q.227-.42.227-1.022 0-.6-.227-1.021a1.57 1.57 0 0 0-.617-.642 1.73 1.73 0 0 0-.875-.222q-.49 0-.878.222a1.57 1.57 0 0 0-.615.641q-.226.422-.226 1.022c0 .6.076.74.226 1.02q.226.42.615.644.39.222.878.222.486 0 .875-.22a1.6 1.6 0 0 0 .617-.644m-9.41.814V13.13h2.43v.64H9.052v.874h1.493v.64H9.052v1.517zm2.952 0V13.13h1.448q.416 0 .71.149.295.147.45.417t.156.633q0 .366-.158.629a1.02 1.02 0 0 1-.457.402l-.033.014.778 1.427h-.856L12.57 15.5h-.566v1.302zm10.33 0h-.67l-1.597-2.31h-.027v2.31h-.776V13.13h.681l1.585 2.308h.032V13.13h.773v3.67Zm.502-3.671v.64h1.124v3.03h.767v-3.03h1.124v-.64z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FEFEFE", d: "M17.128 14.966q0-.39-.117-.656a.9.9 0 0 0-.324-.405.87.87 0 0 0-.492-.138.87.87 0 0 0-.49.138.9.9 0 0 0-.327.405 1.7 1.7 0 0 0-.115.656q0 .39.115.656a.9.9 0 0 0 .326.405q.21.138.491.138a.87.87 0 0 0 .492-.138.9.9 0 0 0 .324-.405 1.6 1.6 0 0 0 .117-.656m-5.123-.089h.527a1 1 0 0 0 .369-.061.44.44 0 0 0 .219-.183.6.6 0 0 0 .073-.303.6.6 0 0 0-.073-.308.45.45 0 0 0-.22-.19.9.9 0 0 0-.372-.067h-.523zm23.68 11.713h-.03l-.985 1.56v.029h1.015z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#D32B1E", fillRule: "evenodd", d: "M36.062 30.866c1.297-.926 1.959-2.098 1.959-3.266s-.662-2.34-1.96-3.266c-1.295-.924-3.147-1.534-5.247-1.534s-3.952.61-5.248 1.534c-1.298.927-1.96 2.098-1.96 3.266s.662 2.34 1.96 3.266c1.296.925 3.147 1.534 5.248 1.534 2.1 0 3.952-.61 5.248-1.534M30.814 33.6c4.643 0 8.407-2.686 8.407-6s-3.764-6-8.407-6-8.407 2.686-8.407 6 3.764 6 8.407 6", clipRule: "evenodd" })
+  ] });
+}
+export {
+  CreditCardSecurityCodeField,
+  CreditCardSecurityCodeField as default
+};
+//# sourceMappingURL=CreditCardSecurityCodeField.js.map

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCardSecurityCodeField.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CreditCardSecurityCodeField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CreditCardSecurityCodeField';

package/dist/components/CreditCardSecurityCodeField/index.js

@@ -0,0 +1,5 @@
+import { CreditCardSecurityCodeField } from "./CreditCardSecurityCodeField.js";
+export {
+  CreditCardSecurityCodeField as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CreditCardSecurityCodeField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DateField/DateField.d.ts

@@ -1,5 +1,24 @@
-import { DateFieldProps as AriaDateFieldProps, DateValue } from 'react-aria-components';
+import { DateFieldProps as AriaDateFieldBaseProps, DateValue } from 'react-aria-components';
 import { FieldProps } from '../_base/Field/Field';
-export type DateFieldProps = FieldProps<AriaDateFieldProps<DateValue>>;
-export declare const DateField: (props: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+type AriaDateFieldProps = Omit<AriaDateFieldBaseProps<DateValue>, 'defaultValue' | 'value' | 'onChange' | 'minValue' | 'maxValue'>;
+export type DateFieldProps = FieldProps<AriaDateFieldProps> & {
+    /**
+     * The default value of the date field.
+     */
+    defaultValue?: string | DateValue;
+    /**
+     * The controlled value of the date field.
+     */
+    value?: string | DateValue;
+    onChange?: (value: string) => void;
+    /**
+     * The minimum value of the date field.
+     */
+    minValue?: string | DateValue;
+    /**
+     * The maximum value of the date field.
+     */
+    maxValue?: string | DateValue;
+};
+export declare const DateField: ({ defaultValue: defaultPropValue, value: controlledValue, onChange: onChangeProp, minValue: minPropValue, maxValue: maxPropValue, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default DateField;