@alto-avios/alto-ui 3.0.0 → 3.2.0

package/dist/components/AviosBadge/AviosBadge.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Badge } from "../Badge/Badge.js";
+import { AviosCurrencySymbol } from "../AviosCurrencySymbol/AviosCurrencySymbol.js";
+import '../../assets/AviosBadge.css';const aviosBadge = "_aviosBadge_a9p4a_1";
+const collect = "_collect_a9p4a_13";
+const spend = "_spend_a9p4a_18";
+const content = "_content_a9p4a_23";
+const points = "_points_a9p4a_30";
+const label = "_label_a9p4a_31";
+const textEnd = "_textEnd_a9p4a_37";
+const sm = "_sm_a9p4a_43";
+const lg = "_lg_a9p4a_48";
+const styles = {
+  aviosBadge,
+  collect,
+  spend,
+  content,
+  points,
+  label,
+  textEnd,
+  sm,
+  lg
+};
+const AviosBadge = ({
+  kind = "collect",
+  size = "md",
+  textEnd: textEnd2,
+  points: points2,
+  children,
+  ariaLabel,
+  className,
+  ...props
+}) => {
+  const formattedPoints = points2.toLocaleString();
+  const defaultAriaLabel = `${kind} ${formattedPoints} ${children || "Avios"} ${textEnd2 || ""}`.trim();
+  const iconSizes = {
+    sm: "18px",
+    md: "20px",
+    lg: "24px"
+  };
+  const badgeSize = size === "lg" ? "md" : size;
+  return /* @__PURE__ */ jsxs(Badge, { variant: kind === "collect" ? "success" : "info", size: badgeSize, ariaLabel: ariaLabel || defaultAriaLabel, className: `${styles.aviosBadge} ${styles[size]}  ${styles[kind]} ${className || ""}`, ...props, children: [
+    /* @__PURE__ */ jsx(AviosCurrencySymbol, { kind, styleVariant: "secondary", width: iconSizes[size], height: iconSizes[size], "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: styles.content, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.points, children: formattedPoints }),
+      children && /* @__PURE__ */ jsx("span", { className: styles.label, children }),
+      textEnd2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.plusSign, children: "+" }),
+        /* @__PURE__ */ jsx("span", { className: styles.textEnd, children: textEnd2 })
+      ] })
+    ] })
+  ] });
+};
+export {
+  AviosBadge,
+  AviosBadge as default
+};
+//# sourceMappingURL=AviosBadge.js.map

package/dist/components/AviosBadge/AviosBadge.js.map

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

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

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

package/dist/components/AviosBadge/index.js

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

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

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

package/dist/components/Badge/Badge.d.ts

@@ -26,9 +26,14 @@ export interface BadgeProps {
      */
     trailingIconProps?: IconProps;
     /**
-     * 	The focus style of the button
+     * The focus style of the button
      */
     focusStyle?: 'default' | 'white';
+    /**
+     * @internal
+     * Internal className prop for design system use only
+     */
+    className?: string;
 }
-export declare const Badge: ({ children, size, variant, ariaLabel, leadingIconProps, trailingIconProps, focusStyle, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ children, size, variant, ariaLabel, leadingIconProps, trailingIconProps, focusStyle, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -55,6 +55,7 @@ const Badge = ({
   leadingIconProps,
   trailingIconProps,
   focusStyle = "default",
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs("span", { className: `${badge({
@@ -62,7 +63,7 @@ const Badge = ({
     variant
   })} ${focusStyleVariants({
     focusStyle
-  })}`, role: "status", "aria-label": ariaLabel, ...props, children: [
+  })} ${className || ""}`, role: "status", "aria-label": ariaLabel, ...props, children: [
     leadingIconProps && /* @__PURE__ */ jsx(Icon, { ...leadingIconProps }),
     children,
     trailingIconProps && /* @__PURE__ */ jsx(Icon, { ...trailingIconProps })

package/dist/components/Badge/Badge.js.map

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

package/dist/components/Box/Box.d.ts

@@ -1,14 +1,14 @@
 import { default as React } from 'react';
-import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 import { FlexVariants } from '../../utils/flex/flex';
 import { BorderVariants } from '../../utils/border/border';
 import { PaddingVariants } from '../../utils/padding/padding';
-export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVariants, PaddingVariants {
-    children: React.ReactNode;
+import { PositionVariants } from '../../utils/position/position';
+export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVariants, PaddingVariants, PositionVariants, Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {
     /**
      * The HTML element to render the Box as.
      */
-    as?: 'div' | 'article';
+    as?: 'div' | 'article' | 'aside' | 'nav' | 'section' | 'main';
     /**
      * The width of the Box.
      * Accepts any valid CSS unit or "full"
@@ -39,6 +39,10 @@ export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVarian
      * Accepts any valid CSS unit.
      */
     minHeight?: string;
+    /**
+     * @deprecated Use `backgroundColor` instead.
+     */
+    backgroundColour?: BackgroundVariants['backgroundColor'];
 }
-export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, height, maxHeight, minHeight, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, height, maxHeight, minHeight, position, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/components/Box/Box.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 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",
@@ -12,8 +13,13 @@ const Box = ({
   height,
   maxHeight,
   minHeight,
+  position,
   ...props
 }) => {
+  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 ?? props.backgroundColour;
   const borderWidth = !(props == null ? void 0 : props.borderWidth) && props.borderColour !== "none" ? "sm" : props.borderWidth;
   const stylesProp = {
     width: width === "full" ? "100%" : width,
@@ -31,7 +37,10 @@ const Box = ({
   })} ${paddingVariants({
     ...props
   })} ${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_1pjm3_1";
-const content = "_content_1pjm3_22";
-const isNotLoading = "_isNotLoading_1pjm3_31";
-const loadingSpinner = "_loadingSpinner_1pjm3_31";
-const isLoading = "_isLoading_1pjm3_40";
-const focusWhite = "_focusWhite_1pjm3_52";
-const sm = "_sm_1pjm3_59";
-const md = "_md_1pjm3_64";
-const lg = "_lg_1pjm3_69";
-const fullWidth = "_fullWidth_1pjm3_74";
-const textAlignLeft = "_textAlignLeft_1pjm3_81";
-const textAlignCenter = "_textAlignCenter_1pjm3_85";
-const textAlignRight = "_textAlignRight_1pjm3_89";
-const accentPrimary = "_accentPrimary_1pjm3_97";
-const accentSecondary = "_accentSecondary_1pjm3_117";
-const accentTertiary = "_accentTertiary_1pjm3_147";
-const accentQuaternary = "_accentQuaternary_1pjm3_173";
-const criticalPrimary = "_criticalPrimary_1pjm3_199";
-const criticalSecondary = "_criticalSecondary_1pjm3_224";
-const criticalTertiary = "_criticalTertiary_1pjm3_254";
-const criticalQuaternary = "_criticalQuaternary_1pjm3_280";
-const neutralPrimary = "_neutralPrimary_1pjm3_307";
-const neutralSecondary = "_neutralSecondary_1pjm3_332";
-const neutralTertiary = "_neutralTertiary_1pjm3_361";
-const neutralQuaternary = "_neutralQuaternary_1pjm3_387";
-const whitePrimary = "_whitePrimary_1pjm3_414";
-const whiteSecondary = "_whiteSecondary_1pjm3_440";
-const whiteTertiary = "_whiteTertiary_1pjm3_473";
-const whiteQuaternary = "_whiteQuaternary_1pjm3_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_1pjm3_535",
-  "icon-wrapper": "_icon-wrapper_1pjm3_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_1o7bw_1";
+const calloutBanner__icon = "_calloutBanner__icon_1o7bw_11";
+const calloutBanner__start = "_calloutBanner__start_1o7bw_15";
+const calloutBanner__dismiss = "_calloutBanner__dismiss_1o7bw_23";
+const calloutBanner__meta = "_calloutBanner__meta_1o7bw_29";
+const calloutBanner__end = "_calloutBanner__end_1o7bw_58";
+const styles = {
+  calloutBanner: calloutBanner$1,
+  calloutBanner__icon,
+  calloutBanner__start,
+  calloutBanner__dismiss,
+  calloutBanner__meta,
+  "calloutBanner__meta-title": "_calloutBanner__meta-title_1o7bw_41",
+  "calloutBanner__meta-description": "_calloutBanner__meta-description_1o7bw_45",
+  "calloutBanner__meta-label": "_calloutBanner__meta-label_1o7bw_49",
+  calloutBanner__end,
+  "calloutBanner-critical": "_calloutBanner-critical_1o7bw_66",
+  "calloutBanner-primary": "_calloutBanner-primary_1o7bw_70",
+  "calloutBanner-secondary": "_calloutBanner-secondary_1o7bw_74",
+  "calloutBanner-tertiary": "_calloutBanner-tertiary_1o7bw_80",
+  "calloutBanner-success": "_calloutBanner-success_1o7bw_89",
+  "calloutBanner-information": "_calloutBanner-information_1o7bw_112",
+  "calloutBanner-neutral": "_calloutBanner-neutral_1o7bw_135"
+};
+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

@@ -0,0 +1,29 @@
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { FieldProps } from '../_base/Field';
+type CreditCardNumberValue = string | number | null | undefined;
+interface CreditCardNumberFieldBaseProps {
+    /**
+     * The icon to display.
+     * If a function is provided, it will be called with the current value of the input.
+     * Expects an icon name from the font-awesome `brands` icon pack.
+     * https://fontawesome.com/search?q=credit%20card&o=r&ip=brands
+     */
+    cardIcon?: string | ((value?: CreditCardNumberValue) => string);
+    /**
+     * The controlled value of the credit card number.
+     */
+    value?: CreditCardNumberValue;
+    /**
+     * The controlled onChange handler for the credit card number.
+     */
+    onChange?: (value?: CreditCardNumberValue) => void;
+    /**
+     * The default value of the credit card number.
+     */
+    defaultValue?: CreditCardNumberValue;
+}
+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, label, ...props }: CreditCardNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CreditCardNumberField;

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } 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 { 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";
+const styles = {
+  creditCardNumberField,
+  inputWrapper,
+  iconEnd
+};
+const CreditCardNumberField = ({
+  cardIcon: cardIconProp = getCardIcon,
+  defaultValue,
+  value: valueControlled,
+  onChange: onChangeControlled,
+  label = "Credit card number",
+  ...props
+}) => {
+  const [value, setValue] = React.useState(defaultValue);
+  const valueDefinitive = valueControlled ?? value;
+  const cardIcon = React.useMemo(() => {
+    if (typeof cardIconProp === "function") {
+      return cardIconProp(value) || "credit-card";
+    }
+    return cardIconProp || "credit-card";
+  }, [value, cardIconProp]);
+  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, iconPrefix: cardIcon === "credit-card" ? "fas" : "fab", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
+  ] }) });
+};
+export {
+  CreditCardNumberField,
+  CreditCardNumberField as default
+};
+//# sourceMappingURL=CreditCardNumberField.js.map

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

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

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

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

package/dist/components/CreditCardNumberField/index.js

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

package/dist/components/CreditCardNumberField/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;