@alto-avios/alto-ui 2.4.0 → 3.0.0

package/dist/components/Button/Button.d.ts

@@ -1,18 +1,27 @@
-import { default as React } from 'react';
-import { PressEvent } from 'react-aria';
+import { default as React, ComponentType, ElementType, ReactNode } from 'react';
+import { AriaButtonOptions } from '@react-aria/button';
+import { HoverProps } from '@react-aria/interactions';
+import { IconProps } from '../Icon/Icon';
 export type ButtonSize = 'lg' | 'md' | 'sm';
-/**
- * Primary UI component for user interaction
- */
-export interface ButtonProps {
+export type ButtonTextAlignement = 'left' | 'center' | 'right';
+export type DefaultButtonProps = ButtonProps<'button'>;
+export type ButtonProps<T extends ElementType = 'button'> = AriaButtonOptions<T> & HoverProps & {
     /**
-     * What the base style of button is
+     * The HTML element to be rendered as the button.
      */
+    as?: T;
+    elementType?: 'a' | 'button';
     /**
      * What the base style of button is
      * @default 'accent'
+     * @deprecated use styleVariant instead
      */
     styleType?: 'accent' | 'critical' | 'neutral' | 'white';
+    /**
+     * What the base style of button is
+     * @default 'accent'
+     */
+    styleVariant?: 'accent' | 'critical' | 'neutral' | 'white';
     /**
      * What the purpose is for the button
      * @default 'primary'
@@ -24,81 +33,164 @@ export interface ButtonProps {
      */
     size?: ButtonSize;
     /**
-     * Whether the button is loading
+     * Whether an icon should display at the end of Button and icon properties
+     * @default
      */
-    isLoading?: boolean;
+    iconEndProps?: IconProps;
+    /**
+     * Whether an icon should display at the start of the Button and icon properties
+     */
+    iconStartProps?: IconProps;
     /**
      * Whether the button leading has an icon
+     * @deprecated use iconStartProps instead
      */
     hasLeadingIcon?: boolean;
     /**
      * Leading icon name
+     * @deprecated use iconStartProps instead
      */
     leadingIconName?: string;
     /**
      * Whether the button trailing has an icon
+     * @deprecated use iconEndProps instead
      */
     hasTrailingIcon?: boolean;
     /**
      * Trailing icon name
+     * @deprecated use iconEndProps instead
      */
     trailingIconName?: string;
+    /**
+     * isLoading is a boolean that will show a spinner in the button
+     */
+    isLoading?: boolean;
+    /**
+     * The text alignment of the button
+     */
+    textAlign?: ButtonTextAlignement;
+    /**
+     * The content for the button.
+     */
+    children?: ReactNode;
     /**
      * 	Whether the element should receive focus on render.
      */
     type?: 'button' | 'submit' | 'reset';
     /**
-     * 	Handler to be called when the button is clicked.
+     * Whether the button should be full width.
      */
-    onClick?: (e: PressEvent) => void;
+    fullWidth?: boolean;
     /**
-     * The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document
+     * @deprecated onPress should be preferred
+     * Handler to be called when the button is clicked.
      */
-    form?: string;
+    onClick?: React.MouseEventHandler;
     /**
-     * The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
+     * The target of the link (if `as` is set to 'a').
      */
-    formAction?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
-     * 	Indicates how to encode the form data that is submitted.
+     *  What type of focus style to apply to the button.
      */
-    formEncType?: string;
+    focusStyle?: 'default' | 'white';
     /**
-     * 	Indicates the HTTP method used to submit the form
+     * Passthrough props for the button element.
      */
-    formMethod?: string;
+    passthroughProps?: Partial<T extends ComponentType<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : never>;
+};
+export declare const Button: React.ForwardRefExoticComponent<AriaButtonOptions<React.ElementType> & HoverProps & {
     /**
-     * 	Indicates that the form is not to be validated when it is submitted.
+     * The HTML element to be rendered as the button.
      */
-    formNoValidate?: boolean;
+    as?: React.ElementType | undefined;
+    elementType?: "a" | "button";
     /**
-     * 	Overrides the target attribute of the button's form owner.
+     * What the base style of button is
+     * @default 'accent'
+     * @deprecated use styleVariant instead
      */
-    formTarget?: string;
+    styleType?: "accent" | "critical" | "neutral" | "white";
     /**
-     * 	Submitted as a pair with the button's value as part of the form data.
+     * What the base style of button is
+     * @default 'accent'
      */
-    name?: string;
+    styleVariant?: "accent" | "critical" | "neutral" | "white";
     /**
-     * 	The value associated with the button's name when it's submitted with the form data.
+     * What the purpose is for the button
+     * @default 'primary'
      */
-    value?: string;
+    emphasis?: "primary" | "secondary" | "tertiary" | "quaternary";
     /**
-     * 	Whether the button is disabled.
+     * How large should the button be?
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether an icon should display at the end of Button and icon properties
+     * @default
      */
-    isDisabled?: boolean;
+    iconEndProps?: IconProps;
+    /**
+     * Whether an icon should display at the start of the Button and icon properties
+     */
+    iconStartProps?: IconProps;
+    /**
+     * Whether the button leading has an icon
+     * @deprecated use iconStartProps instead
+     */
+    hasLeadingIcon?: boolean;
+    /**
+     * Leading icon name
+     * @deprecated use iconStartProps instead
+     */
+    leadingIconName?: string;
+    /**
+     * Whether the button trailing has an icon
+     * @deprecated use iconEndProps instead
+     */
+    hasTrailingIcon?: boolean;
+    /**
+     * Trailing icon name
+     * @deprecated use iconEndProps instead
+     */
+    trailingIconName?: string;
+    /**
+     * isLoading is a boolean that will show a spinner in the button
+     */
+    isLoading?: boolean;
+    /**
+     * The text alignment of the button
+     */
+    textAlign?: ButtonTextAlignement;
+    /**
+     * The content for the button.
+     */
+    children?: ReactNode;
     /**
      * 	Whether the element should receive focus on render.
      */
-    autoFocus?: boolean;
+    type?: "button" | "submit" | "reset";
     /**
-     * 	The content for the button
+     * Whether the button should be full width.
      */
-    children?: React.ReactNode;
+    fullWidth?: boolean;
     /**
-     * 	The focus style of the button
+     * @deprecated onPress should be preferred
+     * Handler to be called when the button is clicked.
      */
-    focusStyle?: 'default' | 'white';
-}
-export declare const Button: ({ styleType, emphasis, size, isLoading, focusStyle, children, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, onClick, hasLeadingIcon, leadingIconName, hasTrailingIcon, trailingIconName, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    onClick?: React.MouseEventHandler;
+    /**
+     * The target of the link (if `as` is set to 'a').
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     *  What type of focus style to apply to the button.
+     */
+    focusStyle?: "default" | "white";
+    /**
+     * Passthrough props for the button element.
+     */
+    passthroughProps?: Partial<any> | undefined;
+} & React.RefAttributes<any>>;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,37 +1,57 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { useRef, useState, useEffect } from "react";
-import { Button as Button$1 } from "react-aria-components";
+import { forwardRef } from "react";
+import { useButton } from "@react-aria/button";
+import { useObjectRef, mergeProps } from "@react-aria/utils";
+import { useHover } from "@react-aria/interactions";
+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_fkkc6_1";
-const sm = "_sm_fkkc6_25";
-const md = "_md_fkkc6_30";
-const lg = "_lg_fkkc6_35";
-const accentPrimary = "_accentPrimary_fkkc6_44";
-const accentSecondary = "_accentSecondary_fkkc6_67";
-const accentTertiary = "_accentTertiary_fkkc6_100";
-const accentQuaternary = "_accentQuaternary_fkkc6_129";
-const criticalPrimary = "_criticalPrimary_fkkc6_157";
-const criticalSecondary = "_criticalSecondary_fkkc6_185";
-const criticalTertiary = "_criticalTertiary_fkkc6_218";
-const criticalQuaternary = "_criticalQuaternary_fkkc6_247";
-const neutralPrimary = "_neutralPrimary_fkkc6_276";
-const neutralSecondary = "_neutralSecondary_fkkc6_304";
-const neutralTertiary = "_neutralTertiary_fkkc6_335";
-const neutralQuaternary = "_neutralQuaternary_fkkc6_364";
-const whitePrimary = "_whitePrimary_fkkc6_394";
-const whiteSecondary = "_whiteSecondary_fkkc6_423";
-const whiteTertiary = "_whiteTertiary_fkkc6_454";
-const whiteQuaternary = "_whiteQuaternary_fkkc6_483";
+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";
 const styles = {
   button: button$1,
+  content,
+  isNotLoading,
+  loadingSpinner,
+  isLoading,
+  focusWhite,
   sm,
   md,
   lg,
+  fullWidth,
+  textAlignLeft,
+  textAlignCenter,
+  textAlignRight,
   accentPrimary,
-  "local-class": "_local-class_fkkc6_61",
   accentSecondary,
   accentTertiary,
   accentQuaternary,
@@ -47,8 +67,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_fkkc6_514",
-  "icon-wrapper": "_icon-wrapper_fkkc6_519"
+  "fa-spinner-third": "_fa-spinner-third_1pjm3_535",
+  "icon-wrapper": "_icon-wrapper_1pjm3_540"
 };
 const button = cva(styles.button, {
   variants: {
@@ -80,62 +100,105 @@ const button = cva(styles.button, {
       secondary: styles.whiteSecondary,
       tertiary: styles.whiteTertiary,
       quaternary: styles.whiteQuaternary
+    },
+    fullWidth: {
+      true: styles.fullWidth
+    },
+    focusStyle: {
+      default: void 0,
+      white: styles.focusWhite
+    },
+    isLoading: {
+      false: styles.isNotLoading,
+      true: styles.isLoading
+    },
+    textAlign: {
+      left: styles.textAlignLeft,
+      center: styles.textAlignCenter,
+      right: styles.textAlignRight
     }
   },
+  compoundVariants: [{
+    size: "md",
+    accent: "primary",
+    className: styles.accentPrimary
+  }],
   defaultVariants: {
     size: "md"
   }
 });
-const Button = ({
-  // Custom Props
-  styleType = "accent",
+const Button = forwardRef(function Button2({
+  as,
+  elementType,
+  styleType,
+  styleVariant,
   emphasis = "primary",
   size = "md",
-  isLoading = false,
-  focusStyle = "default",
-  children,
-  // react-aria props
-  form,
-  formAction,
-  formEncType,
-  formMethod,
-  formNoValidate,
-  formTarget,
-  name,
-  value,
-  isDisabled,
-  autoFocus,
-  type,
-  onClick,
-  hasLeadingIcon,
+  iconStartProps,
+  iconEndProps,
   leadingIconName,
-  hasTrailingIcon,
   trailingIconName,
+  children,
+  fullWidth: fullWidth2,
+  textAlign = "center",
+  focusStyle = "default",
+  passthroughProps,
+  isLoading: isLoading2 = false,
   ...props
-}) => {
-  const buttonRef = useRef(null);
-  const [buttonWidth, setButtonWidth] = useState(null);
-  useEffect(() => {
-    if (buttonRef.current) {
-      setButtonWidth(buttonRef.current.offsetWidth);
+}, forwardedRef) {
+  const ref = useObjectRef(forwardedRef);
+  const {
+    buttonProps,
+    isPressed
+  } = useButton({
+    ...props,
+    elementType: elementType ?? as
+  }, ref);
+  const {
+    hoverProps,
+    isHovered
+  } = useHover(props);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing(props);
+  const getAriaLabel = () => {
+    if (isLoading2) {
+      return "Loading Spinner";
+    }
+    const label = buttonProps["aria-label"] || (typeof children === "string" ? children : void 0);
+    if (props.isDisabled && label) {
+      return `${label}, unavailable`;
     }
-  }, [isLoading]);
-  return /* @__PURE__ */ jsxs(Button$1, { className: `${button({
+    return label;
+  };
+  const resolvedStyleVariant = styleVariant ?? styleType ?? "accent";
+  const className = button({
     size,
-    [styleType]: emphasis
-  })} ${focusStyleVariants({
+    fullWidth: fullWidth2,
+    focusStyle,
+    isLoading: isLoading2,
+    textAlign,
+    [resolvedStyleVariant]: emphasis
+  });
+  const Component = elementType ?? as ?? "button";
+  const resolvedIconStartProps = leadingIconName ? {
+    iconName: leadingIconName
+  } : iconStartProps;
+  const resolvedIconEndProps = trailingIconName ? {
+    iconName: trailingIconName
+  } : iconEndProps;
+  return /* @__PURE__ */ jsx(Component, { className: `${className} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, onPress: onClick, "aria-label": isLoading ? "Loading Spinner" : void 0, style: {
-    width: isLoading && buttonWidth ? `${buttonWidth}px` : "auto"
-  }, ...props, children: [
-    isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { buttonSize: size }),
-    !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasLeadingIcon && leadingIconName ? /* @__PURE__ */ jsx(Icon, { iconName: leadingIconName || "" }) : null,
+  })}`, ref, "data-focused": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, "data-pressed": isPressed ? true : void 0, "aria-label": getAriaLabel(), "aria-disabled": props.isDisabled ? true : void 0, ...mergeProps(buttonProps, hoverProps, focusProps), ...passthroughProps, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading2 && /* @__PURE__ */ jsx(LoadingSpinner, { className: styles.loadingSpinner, size: size === "lg" ? "lg" : "1x", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: styles.content, children: [
+      resolvedIconStartProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconStartProps, "aria-hidden": "true" }),
       children,
-      hasTrailingIcon && trailingIconName ? /* @__PURE__ */ jsx(Icon, { iconName: trailingIconName || "" }) : null
+      resolvedIconEndProps && /* @__PURE__ */ jsx(Icon, { ...resolvedIconEndProps, "aria-hidden": "true" })
     ] })
-  ] });
-};
+  ] }) });
+});
 export {
   Button,
   Button as default

package/dist/components/Button/Button.js.map

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

package/dist/components/CardSection/CardSection.d.ts

@@ -14,10 +14,16 @@ interface CardSectionComponent extends React.ForwardRefExoticComponent<CardSecti
     Media: typeof Media;
 }
 declare const CardSection: CardSectionComponent;
-declare const Content: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const Media: ({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const Content: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const Media: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default CardSection;

package/dist/components/CardSection/CardSection.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { forwardRef } from "react";
-import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1qtaq_1";
-const cardContainer = "_cardContainer_1qtaq_12";
-const cardGrid = "_cardGrid_1qtaq_24";
-const contentCell = "_contentCell_1qtaq_33";
-const contentBox = "_contentBox_1qtaq_40";
-const mediaCell = "_mediaCell_1qtaq_51";
-const isReversed = "_isReversed_1qtaq_65";
+import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1uwwa_1";
+const cardContainer = "_cardContainer_1uwwa_12";
+const cardGrid = "_cardGrid_1uwwa_24";
+const contentCell = "_contentCell_1uwwa_33";
+const contentBox = "_contentBox_1uwwa_40";
+const mediaCell = "_mediaCell_1uwwa_51";
+const isReversed = "_isReversed_1uwwa_65";
 const styles = {
   cardSection: cardSection$1,
   cardContainer,
@@ -35,9 +35,11 @@ CardSection.displayName = "CardSection";
 const Content = ({
   children
 }) => /* @__PURE__ */ jsx("div", { className: styles.contentCell, children: /* @__PURE__ */ jsx("article", { className: styles.contentBox, children }) });
+Content.displayName = "CardSection.Content";
 const Media = ({
   children
 }) => /* @__PURE__ */ jsx("figure", { className: styles.mediaCell, children });
+Media.displayName = "CardSection.Media";
 CardSection.Content = Content;
 CardSection.Media = Media;
 export {

package/dist/components/CardSection/CardSection.js.map

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

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

@@ -1,7 +1,9 @@
+import { default as React } from 'react';
 import { ValidationError } from '@react-types/shared';
 import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
 export interface CheckboxProps extends AriaCheckboxProps {
-    label?: string;
+    /** The label of the checkbox, can be a string or a React node. */
+    label?: string | React.ReactNode;
     /** Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. */
     isIndeterminate?: boolean;
     /** Whether the element should be selected (uncontrolled). */

package/dist/components/Checkbox/Checkbox.js

@@ -44,7 +44,7 @@ const Checkbox = ({
   validate,
   autoFocus,
   name,
-  validationBehavior = "native",
+  validationBehavior,
   description,
   children,
   focusStyle = "default",

package/dist/components/ClearFieldButton/ClearFieldButton.d.ts

@@ -1,14 +1,12 @@
 import { ButtonProps } from '../Button/Button';
-import { IconSize } from '../Icon/Icon';
+import { FormProps } from '../../utils/forms/formProps';
 export type ClearFieldButtonButtonSize = 'lg' | 'md' | 'sm';
-export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'> {
+export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'>, FormProps {
     slot?: string;
-    iconSize?: IconSize;
     className?: string;
-    /**
-     * 	The focus style of the button
-     */
     focusStyle?: 'default' | 'white';
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
 }
 export declare const ClearFieldButton: ({ size, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, slot, onClick, className, focusStyle, ...props }: ClearFieldButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ClearFieldButton;

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

@@ -1,25 +1,5 @@
-import { DateFieldProps as AriaDateFieldProps, DateValue, ValidationResult } from 'react-aria-components';
-export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
-    /**
-     * The label for the TextField
-     */
-    label?: string;
-    /**
-     * The description for the TextField
-     */
-    description?: string;
-    /**
-     * The error message for the TextField
-     */
-    errorMessage?: string | ((validation: ValidationResult) => string);
-    /**
-     * Whether the TextField is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the TextField is invalid
-     */
-    isInvalid?: boolean;
-}
-export declare const DateField: ({ label, description, errorMessage, isRequired, isInvalid, isDisabled, value, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+import { DateFieldProps as AriaDateFieldProps, 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;
 export default DateField;

package/dist/components/DateField/DateField.js

@@ -1,28 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components";
-import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/DateField.css';const dateField = "_dateField_1mc0h_1";
-const dateInput = "_dateInput_1mc0h_5";
-const dateSegment = "_dateSegment_1mc0h_48";
+import { Field } from "../_base/Field/Field.js";
+import '../../assets/DateField.css';const dateField = "_dateField_1bpet_1";
+const dateInput = "_dateInput_1bpet_5";
+const dateSegment = "_dateSegment_1bpet_50";
 const styles = {
   dateField,
   dateInput,
   dateSegment
 };
-const DateField = ({
-  label,
-  description,
-  errorMessage,
-  isRequired = false,
-  isInvalid = false,
-  isDisabled = false,
-  value,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(DateField$1, { className: styles.dateField, isInvalid, isDisabled, value, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
-    /* @__PURE__ */ jsx(DateInput, { className: styles.dateInput, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { className: styles.dateSegment, segment }) })
-  ] });
+const DateField = (props) => {
+  return /* @__PURE__ */ jsx(Field, { as: DateField$1, className: styles.dateField, ...props, children: /* @__PURE__ */ jsx(DateInput, { className: styles.dateInput, children: (segment) => /* @__PURE__ */ jsx(DateSegment, { className: styles.dateSegment, segment }) }) });
 };
 export {
   DateField,

package/dist/components/DateField/DateField.js.map

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

package/dist/components/FieldError/FieldError.d.ts

@@ -2,5 +2,5 @@ import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
 export interface FieldErrorProps extends AriaFieldErrorProps {
     children?: React.ReactNode | any;
 }
-export declare const FieldError: ({ children, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FieldError: ({ children, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldError;