@alto-avios/alto-ui 3.2.0 → 3.3.0

package/dist/components/Label/Label.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import '../../assets/Label.css';const label$1 = "_label_1w8ui_1";
+const xxs = "_xxs_1w8ui_7";
+const xs = "_xs_1w8ui_13";
+const sm = "_sm_1w8ui_19";
+const md = "_md_1w8ui_25";
+const lg = "_lg_1w8ui_31";
+const styles = {
+  label: label$1,
+  xxs,
+  xs,
+  sm,
+  md,
+  lg
+};
+const label = cva(styles.label, {
+  variants: {
+    size: {
+      "2xs": styles.xxs,
+      xs: styles.xs,
+      sm: styles.sm,
+      md: styles.md,
+      lg: styles.lg
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const Label = ({
+  children,
+  as: Component = "span",
+  size = "md",
+  foregroundColor,
+  ...props
+}) => {
+  const classNames = `${label({
+    size
+  })} ${foregroundColorVariants({
+    foregroundColor
+  })}`;
+  return /* @__PURE__ */ jsx(Component, { className: classNames, ...props, children });
+};
+export {
+  Label,
+  Label as default
+};
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

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

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

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

package/dist/components/Label/index.js

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

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

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

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ListBoxItemProps as AriaListBoxItemProps } from 'react-aria-components';
+export interface ListBoxItemProps extends AriaListBoxItemProps {
+    children?: React.ReactNode;
+    /**
+     *  Enables loading state
+     */
+    isLoading?: boolean;
+    /**
+     *  Enables disabled state
+     */
+    labelLoading?: string;
+}
+export declare const ListBoxItem: ({ children, isLoading, labelLoading, ...props }: ListBoxItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ListBoxItem;

package/dist/components/ListBoxItem/ListBoxItem.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ListBoxItem as ListBoxItem$1, Text } from "react-aria-components";
+import { Icon } from "../Icon/Icon.js";
+import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
+import '../../assets/ListBoxItem.css';const listBoxItem = "_listBoxItem_1d71p_1";
+const listBoxItemLabel = "_listBoxItemLabel_1d71p_17";
+const listBoxItemIcon = "_listBoxItemIcon_1d71p_65";
+const listBoxItemSelected = "_listBoxItemSelected_1d71p_71";
+const styles = {
+  listBoxItem,
+  listBoxItemLabel,
+  listBoxItemIcon,
+  listBoxItemSelected
+};
+const ListBoxItem = ({
+  children,
+  isLoading,
+  labelLoading = "Loading",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(ListBoxItem$1, { className: styles["listBoxItem"], ...isLoading && {
+    "data-loading": true
+  }, ...props, children: [
+    /* @__PURE__ */ jsx(Text, { slot: "label", className: styles["listBoxItemLabel"], children: isLoading ? labelLoading : children }),
+    isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x", className: styles["listBoxItemIcon"] }) : /* @__PURE__ */ jsx("span", { className: styles["listBoxItemSelected"], children: /* @__PURE__ */ jsx(Icon, { iconName: "check", scale: "1x", padding: "square" }) })
+  ] });
+};
+export {
+  ListBoxItem,
+  ListBoxItem as default
+};
+//# sourceMappingURL=ListBoxItem.js.map

package/dist/components/ListBoxItem/ListBoxItem.js.map

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

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

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

package/dist/components/ListBoxItem/index.js

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

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

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

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

@@ -21,5 +21,5 @@ export interface NumberFieldProps extends FieldProps<AriaNumberFieldProps> {
      */
     maxValue?: number;
 }
-export declare const NumberField: ({ labelIncrement, labelDecrement, minValue, maxValue, isInvalid, isDisabled, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberField: import('react').ForwardRefExoticComponent<NumberFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -3,6 +3,7 @@ import { NumberField as NumberField$1, Group, Button, Input } from "react-aria-c
 import { Icon } from "../Icon/Icon.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Field } from "../_base/Field/Field.js";
+import { forwardRef } from "react";
 import '../../assets/NumberField.css';const numberField = "_numberField_1knmk_1";
 const numberFieldGroup = "_numberFieldGroup_1knmk_6";
 const numberFieldInput = "_numberFieldInput_1knmk_59";
@@ -13,7 +14,7 @@ const styles = {
   numberFieldInput,
   numberFieldButton
 };
-const NumberField = ({
+const NumberField = forwardRef(({
   labelIncrement = "Increase",
   labelDecrement = "Decrease",
   minValue,
@@ -21,13 +22,14 @@ const NumberField = ({
   isInvalid = false,
   isDisabled = false,
   ...props
-}) => {
+}, ref) => {
   return /* @__PURE__ */ jsx(Field, { as: NumberField$1, className: styles.numberField, minValue, maxValue, isInvalid, isDisabled, ...props, children: /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
     /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
-    /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
+    /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput, ref }),
     /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
   ] }) });
-};
+});
+NumberField.displayName = "NumberField";
 export {
   NumberField,
   NumberField as default

package/dist/components/NumberField/NumberField.js.map

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

package/dist/components/Paragraph/Paragraph.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
-import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_odu3c_1";
-const xs = "_xs_odu3c_9";
-const sm = "_sm_odu3c_15";
-const md = "_md_odu3c_21";
-const lg = "_lg_odu3c_27";
-const start = "_start_odu3c_33";
-const center = "_center_odu3c_37";
-const end = "_end_odu3c_41";
+import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_rcir1_1";
+const xs = "_xs_rcir1_13";
+const sm = "_sm_rcir1_19";
+const md = "_md_rcir1_25";
+const lg = "_lg_rcir1_31";
+const start = "_start_rcir1_37";
+const center = "_center_rcir1_41";
+const end = "_end_rcir1_45";
 const styles = {
   paragraph: paragraph$1,
   xs,

package/dist/components/PasswordField/PasswordField.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { FieldProps } from '../_base/Field';
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 type PasswordStrengthValidation = {
@@ -26,5 +27,5 @@ export interface PasswordFieldProps extends FieldProps<AriaTextFieldProps> {
      */
     requirementsLabel?: string;
 }
-export declare const PasswordField: ({ tooltipLabelShowPassword, tooltipLabelHidePassword, requirementsLabel, ...props }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordField: React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default PasswordField;

package/dist/components/PasswordField/PasswordField.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { Field } from "../_base/Field/Field.js";
 import { TextField, Group, Input } from "react-aria-components";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -19,12 +19,12 @@ const styles = {
   passwordStrengthItemNeutral,
   passwordStrengthItemInvalid
 };
-const PasswordField = ({
+const PasswordField = forwardRef(({
   tooltipLabelShowPassword = "Show Password",
   tooltipLabelHidePassword = "Hide Password",
   requirementsLabel = "Password requirements",
   ...props
-}) => {
+}, ref) => {
   var _a;
   const [internalVisible, setInternalVisible] = useState(props.isVisible || false);
   const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
@@ -38,7 +38,7 @@ const PasswordField = ({
   const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
   return /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Field, { as: TextField, className: styles.passwordField, label: "Password", ...props, children: [
     /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Input, { type: isVisibleState ? "text" : "password", value, onChange: handleChange }),
+      /* @__PURE__ */ jsx(Input, { type: isVisibleState ? "text" : "password", value, onChange: handleChange, ref }),
       /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
         iconName: "eye",
         iconPrefix: "fas"
@@ -49,7 +49,7 @@ const PasswordField = ({
     ] }),
     /* @__PURE__ */ jsx("ul", { className: styles["passwordField__strength"], "aria-label": requirementsLabel, "aria-live": "polite", children: (_a = props.strengthValidations) == null ? void 0 : _a.map((validation) => /* @__PURE__ */ jsx(PasswordStrengthItem, { status: value ? validation.validation(value) ? "valid" : "invalid" : "neutral", message: validation.message }, `${validation.message}-${value}`)) })
   ] }) });
-};
+});
 const passwordStrengthItem = cva(styles.passwordStrengthItem, {
   variants: {
     status: {
@@ -97,6 +97,7 @@ const PasswordStrengthItem = ({
     /* @__PURE__ */ jsx("span", { children: message })
   ] });
 };
+PasswordField.displayName = "PasswordField";
 export {
   PasswordField,
   PasswordField as default

package/dist/components/PasswordField/PasswordField.js.map

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

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -4,10 +4,10 @@ import { TextField, Input } from "react-aria-components";
 import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-DMLgWFZX.js";
 import { DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, countryPhoneMap, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
 import { Field } from "../_base/Field/Field.js";
-import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_1udln_1";
-const selectHandlerValue = "_selectHandlerValue_1udln_34";
-const selectHandlerIcon = "_selectHandlerIcon_1udln_65";
-const selectWrapper = "_selectWrapper_1udln_77";
+import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_trpoz_1";
+const selectHandlerValue = "_selectHandlerValue_trpoz_34";
+const selectHandlerIcon = "_selectHandlerIcon_trpoz_65";
+const selectWrapper = "_selectWrapper_trpoz_77";
 const styles = {
   phoneNumberField,
   selectHandlerValue,

package/dist/components/SearchField/SearchField.d.ts

@@ -0,0 +1,14 @@
+import { FieldProps } from '../_base/Field';
+import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+export interface SearchFieldProps extends FieldProps<AriaTextFieldProps> {
+    /**
+     * Label for clear button
+     */
+    clearLabel?: string;
+    /**
+     * Placeholder for the search field
+     */
+    placeholder?: string;
+}
+export declare const SearchField: ({ clearLabel, placeholder, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchField;

package/dist/components/SearchField/SearchField.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from "react";
+import { Field } from "../_base/Field/Field.js";
+import { TextField, Group, Input } from "react-aria-components";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/SearchField.css';const searchField = "_searchField_acl05_1";
+const iconStart = "_iconStart_acl05_80";
+const styles = {
+  searchField,
+  iconStart
+};
+const SearchField = ({
+  clearLabel = "Delete search",
+  placeholder,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
+  const value = (props == null ? void 0 : props.value) ?? internalValue;
+  const setValue = React.useCallback((nextValue) => {
+    var _a;
+    setInternalValue(nextValue);
+    (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, nextValue);
+  }, [props == null ? void 0 : props.onChange]);
+  const handleClear = React.useCallback(() => {
+    var _a;
+    setValue("");
+    (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+  }, [setValue]);
+  const tooltipLabel = clearLabel;
+  return /* @__PURE__ */ jsx("div", { className: styles["searchField"], children: /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.searchField, ...props, children: /* @__PURE__ */ jsxs(Group, { onClick: () => {
+    var _a;
+    return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+  }, children: [
+    /* @__PURE__ */ jsx(Icon, { iconSize: "1x", padding: "roomy", iconName: "search", className: styles.iconStart }),
+    /* @__PURE__ */ jsx(Input, { type: "text", value, onChange: (e) => setValue(e.target.value), ref: inputRef, placeholder }),
+    !!value && /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: {
+      iconName: "xmark",
+      iconPrefix: "fas"
+    }, onClick: (props == null ? void 0 : props.isDisabled) ? void 0 : handleClear, isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
+  ] }) }) });
+};
+export {
+  SearchField,
+  SearchField as default
+};
+//# sourceMappingURL=SearchField.js.map

package/dist/components/SearchField/SearchField.js.map

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

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

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

package/dist/components/SearchField/index.js

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

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

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

package/dist/components/Section/Section.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 import { PaddingVariants } from '../../utils/padding/padding';
+import { FlexVariants } from '../../utils/flex/flex';
 type SectionPaddingValue = 'default' | PaddingVariants['paddingX'];
 type SectionPadding = {
     paddingX?: SectionPaddingValue;
@@ -10,7 +11,7 @@ type SectionPadding = {
     paddingBottom?: SectionPaddingValue;
     paddingLeft?: SectionPaddingValue;
 };
-export interface SectionProps extends BackgroundVariants, SectionPadding {
+export interface SectionProps extends BackgroundVariants, SectionPadding, Pick<FlexVariants, 'flexDirection' | 'justifyContent' | 'alignItems'> {
     children: React.ReactNode;
     containerMaxWidth?: 'full-width' | 'page';
     style?: React.CSSProperties;
@@ -21,8 +22,11 @@ interface ContainerProps {
     children: React.ReactNode;
     className?: string;
     containerMaxWidth?: 'full-width' | 'page';
+    flexDirection?: FlexVariants['flexDirection'];
+    justifyContent?: FlexVariants['justifyContent'];
+    alignItems?: FlexVariants['alignItems'];
 }
-declare const Container: ({ children, className, containerMaxWidth, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Container: ({ children, className, containerMaxWidth, flexDirection, justifyContent, alignItems, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
     Container: typeof Container;
 }

package/dist/components/Section/Section.js

@@ -3,21 +3,22 @@ import React, { forwardRef } from "react";
 import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 import { paddingVariants } from "../../utils/padding/padding.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Section.css';const section = "_section_1lo00_1";
-const container = "_container_1lo00_8";
-const pageWidth = "_pageWidth_1lo00_16";
-const fullWidth = "_fullWidth_1lo00_20";
-const paddingTopDefault = "_paddingTopDefault_1lo00_34";
-const paddingRightDefault = "_paddingRightDefault_1lo00_38";
-const paddingBottomDefault = "_paddingBottomDefault_1lo00_42";
-const paddingLeftDefault = "_paddingLeftDefault_1lo00_46";
+import { flexVariants } from "../../utils/flex/flex.js";
+import '../../assets/Section.css';const section = "_section_1w3or_1";
+const container = "_container_1w3or_7";
+const pageWidth = "_pageWidth_1w3or_15";
+const fullWidth = "_fullWidth_1w3or_19";
+const paddingTopDefault = "_paddingTopDefault_1w3or_33";
+const paddingRightDefault = "_paddingRightDefault_1w3or_37";
+const paddingBottomDefault = "_paddingBottomDefault_1w3or_41";
+const paddingLeftDefault = "_paddingLeftDefault_1w3or_45";
 const styles = {
   section,
   container,
   pageWidth,
   fullWidth,
-  "paddingX-default": "_paddingX-default_1lo00_24",
-  "paddingY-default": "_paddingY-default_1lo00_29",
+  "paddingX-default": "_paddingX-default_1w3or_23",
+  "paddingY-default": "_paddingY-default_1w3or_28",
   paddingTopDefault,
   paddingRightDefault,
   paddingBottomDefault,
@@ -48,8 +49,23 @@ const sectionPaddingVariants = cva("", {
 const Container = ({
   children,
   className,
-  containerMaxWidth = "page"
-}) => /* @__PURE__ */ jsx("div", { className: `${styles.container} ${styles[`${containerMaxWidth}Width`]} ${className || ""}`, children });
+  containerMaxWidth = "page",
+  flexDirection,
+  justifyContent,
+  alignItems
+}) => {
+  const widthClassName = containerMaxWidth === "full-width" ? "fullWidth" : "pageWidth";
+  return /* @__PURE__ */ jsx("div", { className: `
+        ${styles.container} 
+        ${styles[widthClassName]} 
+        ${flexVariants({
+    flexDirection,
+    justifyContent,
+    alignItems
+  })} 
+        ${className || ""}
+      `.trim(), children });
+};
 const Section = forwardRef(({
   children,
   containerMaxWidth = "page",
@@ -62,7 +78,10 @@ const Section = forwardRef(({
   paddingX,
   paddingY = "default",
   style,
-  className
+  className,
+  flexDirection,
+  justifyContent,
+  alignItems
 }, ref) => {
   if (backgroundColour && !backgroundColor) {
     console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
@@ -89,12 +108,21 @@ const Section = forwardRef(({
         ${backgroundColorVariants({
     backgroundColor: resolvedBackgroundColor
   })} 
+        ${flexVariants({
+    display: flexDirection || justifyContent ? "flex" : void 0,
+    flexDirection,
+    justifyContent,
+    alignItems
+  })}
         ${className || ""}
       `.trim(), style, children: React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.type === Container) {
       return React.cloneElement(child, {
         ...child.props,
-        containerMaxWidth
+        containerMaxWidth,
+        flexDirection,
+        justifyContent,
+        alignItems
       });
     }
     return child;

package/dist/components/Section/Section.js.map

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

package/dist/components/SelectNative/SelectNative.d.ts

@@ -1,4 +1,5 @@
 import { ValidationResult } from 'react-aria-components';
+import { ChangeEvent } from 'react';
 export interface SelectNativeOption {
     label: string;
     value: string;
@@ -51,6 +52,10 @@ export interface SelectNativeProps {
      * Optional ID for the select element. If not provided, one will be generated.
      */
     id?: string;
+    /**
+     * Callback function when the selection changes
+     */
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
-export declare const SelectNative: ({ label, description, errorMessage, isInvalid, isDisabled, isRequired, placeholder, options, defaultValue, value, id: providedId, ...props }: SelectNativeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectNative: ({ label, description, errorMessage, isInvalid, isDisabled, isRequired, placeholder, options, defaultValue, value, id: providedId, onChange, ...props }: SelectNativeProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectNative;

package/dist/components/SelectNative/SelectNative.js

@@ -20,14 +20,20 @@ const SelectNative = ({
   defaultValue,
   value,
   id: providedId,
+  onChange,
   ...props
 }) => {
   const uniqueId = useId();
   const id = providedId || `select-${uniqueId}`;
   const showPlaceholder = !defaultValue && !value;
+  const handleChange = (event) => {
+    if (onChange) {
+      onChange(event);
+    }
+  };
   return /* @__PURE__ */ jsxs(TextField, { className: styles.select, defaultValue, value, isDisabled, isInvalid, ...props, children: [
     label && /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage, labelFor: id }),
-    /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, children: [
+    /* @__PURE__ */ jsxs("select", { id, className: styles.selectInput, defaultValue, value, disabled: isDisabled, required: isRequired, "aria-invalid": isInvalid, onChange: handleChange, children: [
       showPlaceholder && placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
       options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
     ] })

package/dist/components/SelectNative/SelectNative.js.map

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

package/dist/components/TagGroup/TagGroup.d.ts

@@ -1,10 +1,30 @@
 import { TagGroupProps as AriaTagGroupProps, PressEvent, TagListProps } from 'react-aria-components';
 export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {
+    /**
+     * Optional label text
+     */
     label?: string;
+    /**
+     * Optional description text
+     */
     description?: string;
+    /**
+     * AriaLabel for the tag group. Required for accessibility if no label is provided
+     */
+    ariaLabel?: string;
+    /**
+     * Selection mode for the tag group
+     * @default 'single'
+     */
     selectionMode?: 'single' | 'multiple';
+    /**
+     * Whether to show a clear button
+     */
     clearButton?: boolean;
+    /**
+     * Function to call when the clear button is clicked
+     */
     clearButtonOnClick?: (e: PressEvent) => void;
 }
-export declare const TagGroup: <T extends object>({ label, description, items, children, renderEmptyState, clearButton, clearButtonOnClick, selectionMode, ...props }: TagGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TagGroup: <T extends object>({ label, description, ariaLabel, items, children, renderEmptyState, clearButton, clearButtonOnClick, selectionMode, ...props }: TagGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TagGroup;

package/dist/components/TagGroup/TagGroup.js

@@ -15,6 +15,7 @@ const styles = {
 const TagGroup = ({
   label,
   description,
+  ariaLabel,
   items,
   children,
   renderEmptyState,
@@ -23,8 +24,11 @@ const TagGroup = ({
   selectionMode = "single",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, ...props, children: [
-    /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
+  if (!label && !ariaLabel) {
+    console.warn("⚠️ [TagGroup] Accessibility Warning: You must provide either a 'label' or 'ariaLabel' for screen reader support.");
+  }
+  return /* @__PURE__ */ jsxs(TagGroup$1, { className: styles.tagGroup, selectionMode, "aria-label": label ? void 0 : ariaLabel, ...props, children: [
+    (label || clearButton) && /* @__PURE__ */ jsxs("span", { className: styles.spanContainer, children: [
       /* @__PURE__ */ jsx(FieldLabel, { children: label }),
       clearButton && /* @__PURE__ */ jsx(Button, { styleVariant: "accent", emphasis: "quaternary", size: "sm", onPress: clearButtonOnClick, children: "Clear" })
     ] }),

package/dist/components/TagGroup/TagGroup.js.map

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

package/dist/components/TextAreaField/TextAreaField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from '../TextField/TextField';
-export declare const TextAreaField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaField;

package/dist/components/TextAreaField/TextAreaField.js

@@ -1,15 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { TextField, TextArea } from "react-aria-components";
 import { Field } from "../_base/Field/Field.js";
+import { forwardRef } from "react";
 import '../../assets/TextAreaField.css';const textAreaField = "_textAreaField_1hjyj_1";
 const validationError = "_validationError_1hjyj_71";
 const styles = {
   textAreaField,
   validationError
 };
-const TextAreaField = (props) => {
-  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, ...props, children: /* @__PURE__ */ jsx(TextArea, {}) });
-};
+const TextAreaField = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, ...props, children: /* @__PURE__ */ jsx(TextArea, { ref }) });
+});
+TextAreaField.displayName = "TextAreaField";
 export {
   TextAreaField,
   TextAreaField as default