@alto-avios/alto-ui 3.1.0 → 3.2.1

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_1owea_1";
-const selectHandlerValue = "_selectHandlerValue_1owea_35";
-const selectHandlerIcon = "_selectHandlerIcon_1owea_66";
-const selectWrapper = "_selectWrapper_1owea_78";
+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,
@@ -25,6 +25,7 @@ const PhoneNumberField = ({
   isFormatted = true,
   id: providedId,
   countrySelectLabel = "Select a country",
+  label = "Phone number",
   ...props
 }) => {
   const inputRef = useRef(null);
@@ -73,15 +74,19 @@ const PhoneNumberField = ({
   };
   const countryOptions = getCountryOptions(options, countryCodes);
   const defaultValue = countryOptions.find((opt) => opt.value === defaultCountry);
-  return /* @__PURE__ */ jsx(Field, { as: TextField, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
-    /* @__PURE__ */ jsx(NumberFormatBase, { type: "tel", format: handleFormat, autoComplete: "tel", customInput: Input, getInputRef: inputRef, "aria-label": (props == null ? void 0 : props.label) || "Phone number", ...inputProps, onValueChange: (e) => handleInputChange(e.value), value: valueDefinitive, placeholder: props == null ? void 0 : props.placeholder }),
+  return /* @__PURE__ */ jsx(Field, { as: TextField, label, labelFor: id, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
     hasCountrySelect && /* @__PURE__ */ jsxs("div", { className: styles.selectWrapper, children: [
-      /* @__PURE__ */ jsx("select", { className: styles.selectInput, defaultValue: defaultValue == null ? void 0 : defaultValue.value, value: countryCodeDefinitive, onChange: (e) => handleSelectCountry(e.target.value), "aria-label": countrySelectLabel, id: `${id}-country-select`, disabled: props == null ? void 0 : props.isDisabled, "aria-disabled": props == null ? void 0 : props.isDisabled, children: countryOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }),
+      /* @__PURE__ */ jsx("select", { className: styles.selectInput, ...countryCodeControlled ? {
+        value: countryCodeDefinitive
+      } : {
+        defaultValue: defaultValue == null ? void 0 : defaultValue.value
+      }, onChange: (e) => handleSelectCountry(e.target.value), "aria-label": countrySelectLabel, id: `${id}-country-select`, disabled: props == null ? void 0 : props.isDisabled, "aria-disabled": props == null ? void 0 : props.isDisabled, children: countryOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) }),
       /* @__PURE__ */ jsxs("div", { className: styles.selectHandlerValue, "aria-hidden": "true", id: `${id}-country-display`, children: [
         getCountryFlagEmoji(countryCodeDefinitive) + " " + countryCodeDefinitive,
         /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "13", height: "16", fill: "none", viewBox: "0 0 13 16", className: styles.selectHandlerIcon, "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m6.926 2.664 3.75 3c.305.281.375.75.117 1.055-.28.328-.75.375-1.054.117L6.457 4.21l-3.28 2.625a.747.747 0 0 1-1.056-.117.75.75 0 0 1 .118-1.055l3.75-3c.257-.21.656-.21.937 0m3.75 8.672-3.75 3a.71.71 0 0 1-.937 0l-3.75-3c-.328-.258-.399-.727-.118-1.055a.77.77 0 0 1 1.055-.117l3.281 2.625 3.282-2.625c.304-.258.797-.187 1.054.117a.77.77 0 0 1-.117 1.055" }) })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(NumberFormatBase, { id, type: "tel", format: handleFormat, autoComplete: "tel", customInput: Input, getInputRef: inputRef, ...inputProps, onValueChange: (e) => handleInputChange(e.value), value: valueDefinitive, placeholder: props == null ? void 0 : props.placeholder })
   ] }) });
 };
 export {

package/dist/components/PhoneNumberField/PhoneNumberField.js.map

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

package/dist/components/Popover/Popover.d.ts

@@ -1,16 +1,48 @@
 import { default as React } from 'react';
 import { OverlayTriggerState } from 'react-stately';
+type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
+type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
+interface InternalPopoverProps {
+    /**
+     * @private Internal use only - placement of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    placement?: PlacementType;
+    /**
+     * @private Internal use only - whether the popover should flip to fit in the viewport
+     * This prop should only be used by internal components like Menu
+     */
+    shouldFlip?: boolean;
+    /**
+     * @private Internal use only - whether to allow elements outside the popover may be interacted with
+     * This prop should only be used by internal components like Menu
+     */
+    isNonModal?: boolean;
+    /**
+     * @private Internal use only - whether to allow tabbing out of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    allowTabOut?: boolean;
+    /**
+     * @private Internal use only - whether to auto-focus elements within the popover
+     * This prop should only be used by internal components like Menu
+     */
+    autoFocus?: boolean;
+}
 export interface PopoverProps {
     /** Content to be rendered inside the popover */
     children: React.ReactNode;
     /** State object controlling the overlay's open/closed status */
     state: OverlayTriggerState;
-    /** Direction of the popover arrow - affects initial placement */
-    arrowDirection?: 'top' | 'right' | 'bottom' | 'left';
+    /** Direction of the arrow that points to the trigger element */
+    arrowDirection?: ArrowDirectionType;
     /** Reference to the trigger element that opens the popover */
-    triggerRef: React.RefObject<HTMLButtonElement>;
+    triggerRef: React.RefObject<HTMLButtonElement> | {
+        current: HTMLElement;
+    };
     /** Whether to show the directional arrow on the popover */
     hasArrow?: boolean;
 }
-export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
+export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, placement, shouldFlip, isNonModal, allowTabOut, autoFocus, }: CombinedPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/dist/components/Popover/Popover.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useEffect } from "react";
 import { usePopover, Overlay, DismissButton } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
-import { mergeProps } from "@react-aria/utils";
 import '../../assets/Popover.css';const popoverWrapper = "_popoverWrapper_qrzbw_1";
 const popover = "_popover_qrzbw_1";
 const arrow = "_arrow_qrzbw_16";
@@ -11,54 +10,52 @@ const styles = {
   popover,
   arrow
 };
+const arrowDirectionToPlacement = {
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left"
+};
 const Popover = ({
   children,
   state,
   arrowDirection = "bottom",
   triggerRef,
-  hasArrow = true
+  hasArrow = true,
+  placement,
+  shouldFlip = true,
+  isNonModal = false,
+  allowTabOut = false,
+  autoFocus = false
 }) => {
   const popoverRef = useRef(null);
-  const [optimalPlacement, setOptimalPlacement] = React.useState(arrowDirection);
+  const initialPlacement = placement || arrowDirectionToPlacement[arrowDirection];
+  const [optimalPlacement, setOptimalPlacement] = React.useState(initialPlacement);
   useEffect(() => {
     const updatePlacement = () => {
       if (!popoverRef.current || !triggerRef.current) return;
-      const popoverRect = popoverRef.current.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      let newPlacement = arrowDirection;
-      if (arrowDirection === "bottom" && triggerRect.bottom + popoverRect.height > viewportHeight) {
-        newPlacement = "top";
-      } else if (arrowDirection === "top" && triggerRect.top - popoverRect.height < 0) {
-        newPlacement = "bottom";
-      }
-      if (arrowDirection === "right" && triggerRect.right + popoverRect.width > viewportWidth) {
-        newPlacement = "left";
-      } else if (arrowDirection === "left" && triggerRect.left - popoverRect.width < 0) {
-        newPlacement = "right";
-      }
-      setOptimalPlacement(newPlacement);
+      setOptimalPlacement(initialPlacement);
     };
     updatePlacement();
     window.addEventListener("resize", updatePlacement);
     return () => window.removeEventListener("resize", updatePlacement);
-  }, [arrowDirection, popoverRef.current]);
+  }, [initialPlacement, popoverRef.current]);
   const {
     popoverProps,
     arrowProps,
-    placement
+    placement: finalPlacement
   } = usePopover({
     popoverRef,
     triggerRef,
     offset: 12,
     placement: optimalPlacement,
-    shouldFlip: true
+    shouldFlip,
+    isNonModal
   }, state);
-  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: true, children: /* @__PURE__ */ jsxs("div", { ...mergeProps(popoverProps), ref: popoverRef, className: styles.popover, children: [
+  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: !allowTabOut, autoFocus, children: /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, className: styles.popover, children: [
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
     children,
-    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": placement })
+    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": finalPlacement })
   ] }) }) }) });
 };
 export {

package/dist/components/Popover/Popover.js.map

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

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

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

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/SelectCard/SelectCard.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { CheckboxProps } from 'react-aria-components';
+import { RadioProps } from '../Radio';
+type SelectCardContextType = {
+    /**
+     * The input type of the select card.
+     * @default 'checkbox'
+     */
+    type?: 'checkbox' | 'radio';
+    /**
+     * The ID of the title for a11y labelling.
+     * @default useId()
+     */
+    'aria-labelledby'?: string;
+} & (({
+    type?: 'checkbox';
+} & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
+    type: 'radio';
+} & Omit<RadioProps, 'children' | 'focusStyle'>));
+type SelectCardProps = SelectCardContextType & {
+    /**
+     * The compounds components of the SelectCard:
+     * - SelectCard.Header
+     * - SelectCard.StartSlot
+     * - SelectCard.EndSlot
+     * - SelectCard.Label
+     * - SelectCard.Body
+     * - SelectCard.Details
+     */
+    children?: React.ReactNode;
+};
+declare const SelectCard: {
+    ({ children, type, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ title, description }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface HeaderProps {
+    children?: React.ReactNode;
+}
+interface SlotProps {
+    children: React.ReactNode;
+}
+interface LabelProps {
+    title: string;
+    description?: string;
+}
+export default SelectCard;

package/dist/components/SelectCard/SelectCard.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+import { Paragraph } from "../Paragraph/Paragraph.js";
+import { Checkbox, Radio } from "react-aria-components";
+import '../../assets/SelectCard.css';const checkboxSvgWrapper = "_checkboxSvgWrapper_dir9q_104";
+const svg = "_svg_dir9q_118";
+const styles = {
+  "select-card": "_select-card_dir9q_1",
+  "select-card__header": "_select-card__header_dir9q_30",
+  "select-card__start-slot": "_select-card__start-slot_dir9q_38",
+  "select-card__label-title": "_select-card__label-title_dir9q_43",
+  "select-card__label": "_select-card__label_dir9q_43",
+  "select-card__end-slot": "_select-card__end-slot_dir9q_67",
+  "select-card__body": "_select-card__body_dir9q_79",
+  "select-card__details": "_select-card__details_dir9q_90",
+  "select-card__checkbox": "_select-card__checkbox_dir9q_104",
+  checkboxSvgWrapper,
+  svg,
+  "select-card__radio": "_select-card__radio_dir9q_183"
+};
+const SelectCardContext = createContext({});
+const SelectCard = ({
+  children,
+  type = "checkbox",
+  ...contextProps
+}) => {
+  const labelId = React.useId();
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+      type,
+      "aria-labelledby": labelId,
+      ...contextProps
+    }, children: /* @__PURE__ */ jsx(Checkbox, { className: `${styles["select-card"]} ${styles["select-card__checkbox"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+  }
+  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+    "aria-labelledby": labelId,
+    ...contextProps
+  }, children: /* @__PURE__ */ jsx(Radio, { className: `${styles["select-card"]} ${styles["select-card__radio"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+};
+const Header = ({
+  children
+}) => {
+  const state = useContext(SelectCardContext);
+  if ((state == null ? void 0 : state.type) === "checkbox") {
+    return /* @__PURE__ */ jsxs("div", { className: styles["select-card__header"], children: [
+      /* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": state == null ? void 0 : state.isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: (state == null ? void 0 : state.isIndeterminate) ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__header"], children });
+};
+const StartSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__start-slot"], children });
+const EndSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__end-slot"], children });
+const Label = ({
+  title,
+  description
+}) => {
+  const state = useContext(SelectCardContext);
+  return /* @__PURE__ */ jsxs("div", { className: styles["select-card__label"], children: [
+    /* @__PURE__ */ jsx("div", { className: styles["select-card__label-title"], id: state == null ? void 0 : state["aria-labelledby"], children: title }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "sm", foregroundColor: (state == null ? void 0 : state.isDisabled) ? "disabledOnSubtle" : "default", children: description })
+  ] });
+};
+const Body = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__body"], children });
+const Details = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__details"], children });
+};
+SelectCard.Header = Header;
+SelectCard.StartSlot = StartSlot;
+SelectCard.EndSlot = EndSlot;
+SelectCard.Label = Label;
+SelectCard.Body = Body;
+SelectCard.Details = Details;
+export {
+  SelectCard as default
+};
+//# sourceMappingURL=SelectCard.js.map

package/dist/components/SelectCard/SelectCard.js.map

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

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

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

package/dist/components/SelectCard/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/SubHeading/SubHeading.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "end" | "start" | "center" | null | undefined;
+    textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof subHeading>;
 type SubHeadingLevel = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/Tag/Tag.js

@@ -3,9 +3,9 @@ import { Tag as Tag$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Tag.css';const tag = "_tag_ob7tq_1";
-const isRemovable = "_isRemovable_ob7tq_21";
-const iconWrapper = "_iconWrapper_ob7tq_123";
+import '../../assets/Tag.css';const tag = "_tag_1jz2y_1";
+const isRemovable = "_isRemovable_1jz2y_21";
+const iconWrapper = "_iconWrapper_1jz2y_123";
 const styles = {
   tag,
   isRemovable,
@@ -24,7 +24,7 @@ const Tag = ({
   return /* @__PURE__ */ jsxs(Tag$1, { className: `${styles.tag} ${isRemovable2 ? styles.isRemovable : ""} ${focusStyleVariants({
     focusStyle
   })}`, isDisabled, id: id == null ? void 0 : id.toString(), textValue, ...props, children: [
-    leadingIconProps ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { ...leadingIconProps }) }) : null,
+    leadingIconProps ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { ...leadingIconProps, iconSize: "0.75x", padding: "square" }) }) : null,
     children,
     isRemovable2 && /* @__PURE__ */ jsx(IconButton, { slot: "remove", size: "sm", iconProps: {
       iconName: "close"

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}