@alto-avios/alto-ui 3.4.0 → 3.5.0

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -3,29 +3,31 @@ 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";
+import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_kxqgt_1";
+const calloutBanner__icon = "_calloutBanner__icon_kxqgt_12";
+const calloutBanner__start = "_calloutBanner__start_kxqgt_16";
+const calloutBanner__dismiss = "_calloutBanner__dismiss_kxqgt_24";
+const calloutBanner__meta = "_calloutBanner__meta_kxqgt_30";
+const calloutBanner__end = "_calloutBanner__end_kxqgt_75";
 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__meta-top": "_calloutBanner__meta-top_kxqgt_46",
+  "calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_kxqgt_54",
+  "calloutBanner__meta-title": "_calloutBanner__meta-title_kxqgt_58",
+  "calloutBanner__meta-description": "_calloutBanner__meta-description_kxqgt_62",
+  "calloutBanner__meta-label": "_calloutBanner__meta-label_kxqgt_66",
   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"
+  "calloutBanner-critical": "_calloutBanner-critical_kxqgt_83",
+  "calloutBanner-primary": "_calloutBanner-primary_kxqgt_87",
+  "calloutBanner-secondary": "_calloutBanner-secondary_kxqgt_91",
+  "calloutBanner-tertiary": "_calloutBanner-tertiary_kxqgt_100",
+  "calloutBanner-success": "_calloutBanner-success_kxqgt_109",
+  "calloutBanner-information": "_calloutBanner-information_kxqgt_135",
+  "calloutBanner-neutral": "_calloutBanner-neutral_kxqgt_161"
 };
 const calloutBanner = cva(styles.calloutBanner, {
   variants: {
@@ -69,6 +71,7 @@ const CalloutBanner = ({
         return "circle-exclamation";
     }
   }, [emphasis]);
+  const hasOnDismiss = typeof onDismiss === "function";
   return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
     emphasis,
     styleVariant
@@ -76,13 +79,15 @@ const CalloutBanner = ({
     /* @__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: {
+        hasOnDismiss && /* @__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 }),
+        /* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
+          /* @__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 })
       ] })
     ] }),

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import { ButtonProps } from '../Button/Button';
 import { FormProps } from '../../utils/forms/formProps';
-export type ClearFieldButtonButtonSize = 'lg' | 'md' | 'sm';
 export interface ClearFieldButtonProps extends Omit<ButtonProps, '$styleText'>, FormProps {
     slot?: string;
     className?: string;

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

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

package/dist/components/ComboBox/ComboBox.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
-import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps } from 'react-aria-components';
+import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps as AriaListBoxItemProps } from 'react-aria-components';
 import { FieldProps } from '../_base/Field';
 export interface ComboBoxProps<T extends object> extends FieldProps<AriaComboBoxProps<T>> {
     isLoading?: boolean;
-    children: React.ReactNode | React.ReactElement<ListBoxItemProps<T>>;
+    children: React.ReactNode | React.ReactElement<AriaListBoxItemProps<T>>;
 }
 export declare const ComboBox: <T extends object>({ children, isLoading, ...props }: ComboBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ComboBox;

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

@@ -1,7 +1,7 @@
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 import { FieldProps } from '../_base/Field';
 type CreditCardNumberValue = string | number | null | undefined;
-interface CreditCardNumberFieldBaseProps {
+export interface CreditCardNumberFieldBaseProps {
     /**
      * The icon to display.
      * If a function is provided, it will be called with the current value of the input.

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -35,7 +35,7 @@ const CreditCardNumberField = ({
         onChangeControlled(values.value);
       }
       setValue(values.value);
-    } }),
+    }, autoComplete: "cc-number" }),
     /* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPrefix: cardIcon === "credit-card" ? "fas" : "fab", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
   ] }) });
 };

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

@@ -1 +1,2 @@
 export { default } from './CreditCardNumberField';
+export type { CreditCardNumberFieldProps, CreditCardNumberFieldBaseProps, } from './CreditCardNumberField';

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

@@ -2,7 +2,7 @@ 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 {
+export interface CreditCardSecurityCodeFieldBaseProps {
     /**
      * The controlled value of the credit card number.
      */
@@ -30,6 +30,11 @@ export interface CreditCardSecurityCodeFieldProps extends Omit<FieldProps<Omit<A
      * Expects a DetailsDisclosure component for further information.
      */
     children?: React.ReactNode;
+    /**
+     * Digits allowed in the input
+     * @default 3
+     */
+    digits?: number;
 }
-export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreditCardSecurityCodeField: ({ defaultValue, value: valueControlled, onChange: onChangeControlled, label, cardIcon, digits, ...props }: CreditCardSecurityCodeFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default CreditCardSecurityCodeField;

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -17,18 +17,19 @@ const CreditCardSecurityCodeField = ({
   onChange: onChangeControlled,
   label = "Card security code",
   cardIcon = "back",
+  digits = 3,
   ...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) => {
+      /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: `${"#".repeat(digits)}`, customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
         if (typeof onChangeControlled === "function") {
           onChangeControlled(values.value);
         }
         setValue(values.value);
-      } }),
+      }, autoComplete: "cc-csc" }),
       /* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
     ] }),
     (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })

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

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

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

@@ -1 +1,2 @@
 export { default } from './CreditCardSecurityCodeField';
+export type { CreditCardSecurityCodeFieldProps, CreditCardSecurityCodeFieldBaseProps, } from './CreditCardSecurityCodeField';

package/dist/components/DateField/DateField.js

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components";
 import { Field } from "../_base/Field/Field.js";
 import { useMemo, useState } from "react";
-import '../../assets/DateField.css';const dateField = "_dateField_349vs_1";
-const dateInput = "_dateInput_349vs_5";
-const dateSegment = "_dateSegment_349vs_51";
+import '../../assets/DateField.css';const dateField = "_dateField_1fojc_1";
+const dateInput = "_dateInput_1fojc_5";
+const dateSegment = "_dateSegment_1fojc_50";
 const styles = {
   dateField,
   dateInput,

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

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

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

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

package/dist/components/DetailsDisclosure/DetailsDisclosure.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { DisclosureProps as AriaDisclosureProps, DisclosurePanelProps as AriaDisclosurePanelProps } from 'react-aria-components';
-interface DetailsDisclosureProps extends AriaDisclosureProps {
+export interface DetailsDisclosureProps extends AriaDisclosureProps {
     /**
      * Whether the disclosure is expanded by default.
      */
@@ -29,5 +29,4 @@ declare const DetailsDisclosure: {
         displayName: string;
     };
 };
-export type { DetailsDisclosureProps };
 export default DetailsDisclosure;

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

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

package/dist/components/Dialog/Dialog.d.ts

@@ -1,25 +1,43 @@
 import { default as React } from 'react';
 import { AriaDialogProps } from 'react-aria';
-export type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge';
-export type DialogRole = 'alertdialog' | 'dialog';
+type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge';
+type DialogRole = 'alertdialog' | 'dialog';
 export interface DialogProps extends AriaDialogProps {
-    /** Whether the dialog is currently visible */
+    /**
+     * Whether the dialog is currently visible
+     */
     isOpen?: boolean;
-    /** Callback function when dialog is requested to close */
+    /**
+     * Callback function when dialog is requested to close
+     */
     onClose?: () => void;
-    /** Width variant of the dialog - affects max-width */
+    /**
+     * Width variant of the dialog - affects max-width
+     */
     size?: DialogSize;
-    /** Whether clicking outside or escape key should be blocked */
+    /**
+     * Whether clicking outside or escape key should be blocked
+     */
     modal?: boolean;
-    /** Shows/hides the close (X) button in header */
+    /**
+     * Shows/hides the close (X) button in header
+     */
     hasDismissButton?: boolean;
-    /** ARIA role - use 'alertdialog' for important messages */
+    /**
+     * ARIA role - use 'alertdialog' for important messages
+     */
     role?: DialogRole;
-    /** Required unique ID for the dialog */
+    /**
+     * Required unique ID for the dialog
+     */
     id?: string;
-    /** ID of element labeling the dialog (required for a11y) */
+    /**
+     * ID of element labeling the dialog (required for a11y)
+     */
     'aria-describedby'?: string;
-    /** ID of element describing the dialog (optional but recommended) */
+    /**
+     * ID of element describing the dialog (optional but recommended)
+     */
     'aria-labelledby'?: string;
 }
 export interface DialogComposition {

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

@@ -1 +1,2 @@
 export { default } from './Dialog';
+export type { DialogProps, DialogComposition } from './Dialog';

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

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

package/dist/components/Eyebrow/Eyebrow.d.ts

@@ -1,7 +1,21 @@
 import { default as React } from 'react';
 export interface EyebrowProps {
+    /**
+     * The text content of the Eyebrow component.
+     * This is the main content that will be displayed.
+     */
     children: React.ReactNode;
+    /**
+     * As which HTML element to render the Eyebrow component.
+     * This allows for flexibility in the semantic structure of the document.
+     * @default 'span'
+     */
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Style variant of the Eyebrow component.
+     * This determines the visual style applied to the component.
+     * @default 'inspiration'
+     */
     styleVariant?: 'inspiration' | 'collect' | 'spend' | 'activate';
 }
 export declare const Eyebrow: ({ children, as: Component, styleVariant, ...props }: EyebrowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Eyebrow/Eyebrow.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_rc11b_1";
-const inspiration = "_inspiration_rc11b_16";
-const collect = "_collect_rc11b_20";
-const spend = "_spend_rc11b_24";
-const activate = "_activate_rc11b_29";
+import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_ie5k8_1";
+const inspiration = "_inspiration_ie5k8_14";
+const collect = "_collect_ie5k8_19";
+const spend = "_spend_ie5k8_24";
+const activate = "_activate_ie5k8_29";
 const styles = {
   eyebrow: eyebrow$1,
   inspiration,

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

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

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

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

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

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

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

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

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

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

package/dist/components/Grid/Grid.d.ts

@@ -3,7 +3,7 @@ import { SpaceToken } from '../../utils/spaceToken/spaceToken';
 type AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
 type AlignContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
 type ValidElements = 'div' | 'span';
-type PolymorphicProps<E extends ValidElements> = {
+export type PolymorphicProps<E extends ValidElements> = {
     as?: E;
 } & Omit<React.ComponentPropsWithRef<E>, 'as'>;
 export interface GridCellBaseProps {

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

@@ -1 +1,2 @@
 export { default } from './Grid';
+export type { PolymorphicProps, GridCellBaseProps, GridProps } from './Grid';

package/dist/components/Heading/Heading.d.ts

@@ -8,6 +8,7 @@ declare const heading: (props?: ({
 type HeadingVariants = VariantProps<typeof heading>;
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'legend';
 type HeadingSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare const DEFAULT_HEADING_SIZE_MAP: Record<HeadingLevel, HeadingSize>;
 export interface HeadingProps extends HeadingVariants {
     /**
      * children

package/dist/components/Heading/Heading.js

@@ -78,6 +78,7 @@ const Heading = ({
   })}`, ...props, children });
 };
 export {
+  DEFAULT_HEADING_SIZE_MAP,
   Heading,
   Heading as default
 };

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

@@ -1 +1,2 @@
 export { default } from './Heading';
+export type { HeadingProps, DEFAULT_HEADING_SIZE_MAP } from './Heading';

package/dist/components/Icon/Icon.d.ts

@@ -5,7 +5,7 @@ export type IconSize = '0.5x' | '0.75x' | '1x' | '1.25x' | '1.5x' | '2x' | '2.5x
  * @deprecated These sizes will be removed in the next major version. Use 1x instead.
  * @ignore
  */
-export type DeprecatedIconSize = 'lg' | 'sm' | 'xs' | '2xs' | 'xl' | '2xl';
+type DeprecatedIconSize = 'lg' | 'sm' | 'xs' | '2xs' | 'xl' | '2xl';
 export interface IconProps {
     /**
      * What Icon to load from fontAwesome

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

@@ -1 +1,2 @@
 export { default } from './Icon';
+export type { IconProps, IconSize } from './Icon';

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

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

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

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

package/dist/components/Image/Image.d.ts

@@ -6,17 +6,29 @@ declare const imageVariants: (props?: ({
     fit?: "none" | "fill" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>, Pick<BorderVariants, 'borderRadius'>, BackgroundVariants, VariantProps<typeof imageVariants> {
-    /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */
+    /**
+     * Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded
+     */
     fallbackSrc?: string;
-    /** Called when image fails to load */
+    /**
+     * Called when image fails to load
+     */
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    /** Called when image is loaded */
+    /**
+     * Called when image is loaded
+     */
     onLoad?: React.ReactEventHandler<HTMLImageElement>;
-    /** Polymorphism with children, the component will render the children instead of the image */
+    /**
+     * Polymorphism with children, the component will render the children instead of the image
+     */
     asChild?: boolean;
-    /** To support polymorphism with children */
+    /**
+     * To support polymorphism with children
+     */
     children?: React.ReactNode;
-    /** Aspect ratio of the image */
+    /**
+     * Aspect ratio of the image
+     */
     aspectRatio?: number;
     backgroundColour?: BackgroundVariants['backgroundColor'];
 }

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

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

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

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

package/dist/components/Link/Link.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Link as Link$1 } from "react-aria-components";
@@ -70,6 +71,20 @@ const Link = ({
     rel: "noopener noreferrer",
     "aria-label": ariaLabelExternal
   } : {};
+  const iconSize = useMemo(() => {
+    switch (size) {
+      case "xs":
+        return "0.75x";
+      case "sm":
+        return "0.75x";
+      case "md":
+        return "1x";
+      case "lg":
+        return "1.25x";
+      default:
+        return "1x";
+    }
+  }, [size]);
   return /* @__PURE__ */ jsxs(Link$1, { className: `${link({
     size,
     underline: underline2
@@ -80,11 +95,11 @@ const Link = ({
   })}`, href, target, ...externalLinkProps, ...props, children: [
     iconStartProps && /* @__PURE__ */ jsx(Icon, { className: link({
       iconStart: !!iconStartProps
-    }), ...iconStartProps }),
+    }), iconSize, ...iconStartProps }),
     children || linkText,
     finalIconEndProps && /* @__PURE__ */ jsx(Icon, { className: link({
       iconEnd: !!finalIconEndProps
-    }), ...finalIconEndProps })
+    }), iconSize, ...finalIconEndProps })
   ] });
 };
 export {

package/dist/components/Link/Link.js.map

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/Paragraph/Paragraph.d.ts

@@ -1,13 +1,14 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
+import { WithResponsive } from '../../utils/breakpoint/responsive';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
     textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
 type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
-export interface ParagraphProps extends ParagraphVariants {
+interface BaseProps extends ParagraphVariants {
     children: React.ReactNode;
     /**
      * The size of the paragraph
@@ -30,5 +31,7 @@ export interface ParagraphProps extends ParagraphVariants {
      */
     textAlign?: 'start' | 'center' | 'end';
 }
+type ResponsiveKeys = 'size' | 'textAlign';
+export type ParagraphProps = WithResponsive<BaseProps, ResponsiveKeys>;
 export declare const Paragraph: ({ children, size, foregroundColor, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
+import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
 import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_rcir1_1";
 const xs = "_xs_rcir1_13";
 const sm = "_sm_rcir1_19";
@@ -46,13 +48,16 @@ const Paragraph = ({
   textAlign = "start",
   ...props
 }) => {
+  const breakpoint = useBreakpoint();
+  const finalSize = resolveResponsiveProp(size, breakpoint);
+  const finalTextAlign = resolveResponsiveProp(textAlign, breakpoint);
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   if (fgColor) {
     console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
   }
-  const resolvedFontColor = fgColor ?? foregroundColor ?? "secondary";
   return /* @__PURE__ */ jsx("p", { className: `${paragraph({
-    size,
-    textAlign
+    size: finalSize,
+    textAlign: finalTextAlign
   })} ${foregroundColorVariants({
     foregroundColor: resolvedFontColor
   })}`, ...props, children });

package/dist/components/Paragraph/Paragraph.js.map

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

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

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