@alto-avios/alto-ui 4.3.0 → 4.5.0

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { forwardRef, Children, useState, useLayoutEffect } from "react";
+import { useBreadcrumbs } from "@react-aria/breadcrumbs";
+import { useObjectRef, mergeProps } from "@react-aria/utils";
+import Link from "../Link/Link.js";
+import { Icon } from "../Icon/Icon.js";
+import { Menu } from "../Menu/Menu.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import '../../assets/Breadcrumbs.css';const breadcrumbs = "_breadcrumbs_xrrvy_1";
+const breadcrumbs__list = "_breadcrumbs__list_xrrvy_8";
+const styles = {
+  breadcrumbs,
+  breadcrumbs__list,
+  "breadcrumbs__list-item": "_breadcrumbs__list-item_xrrvy_20",
+  "breadcrumbs__overflow-list": "_breadcrumbs__overflow-list_xrrvy_30",
+  "breadcrumbs__list-separator": "_breadcrumbs__list-separator_xrrvy_82"
+};
+function BreadcrumbItem({
+  as = Link,
+  isCurrent = false,
+  foregroundColor = "default",
+  "data-parent": dataParent,
+  children,
+  ...props
+}) {
+  const className = foregroundColorVariants({
+    foregroundColor
+  });
+  const itemProps = mergeProps(props, {
+    className
+  });
+  const itemElement = React__default.createElement(as, itemProps, children);
+  return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-item"], "data-parent": dataParent, children: isCurrent ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className, children }) : itemElement });
+}
+const SeparatorItem = ({
+  color
+}) => {
+  return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-separator"], "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { iconName: "chevron-right", iconSize: "0.75x", size: "sm", color }) });
+};
+const OverflowMenu = ({
+  children,
+  buttonStyleVariant = "neutral",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("li", { className: styles["breadcrumbs__list-item"], children: /* @__PURE__ */ jsxs(Menu, { shouldFlip: true, "aria-label": `${props["aria-label"]} menu`, children: [
+    /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { emphasis: "quaternary", iconProps: {
+      iconName: "ellipsis"
+    }, "aria-label": `${props["aria-label"]} menu button`, size: "sm", styleVariant: buttonStyleVariant }) }),
+    /* @__PURE__ */ jsx("ol", { className: styles["breadcrumbs__overflow-list"], children })
+  ] }) });
+};
+const CURRENT_ITEM_WHITE_FOREGROUND_COLORS = ["accentOnVibrant", "accentOnVibrantAccent", "accentOnDeep", "criticalOnVibrant", "warningOnVibrant", "successOnVibrant", "informationOnVibrant", "inversePrimary", "inverseOnVibrant", "whitePrimary", "whiteOnSubtle", "disabledOnVibrant", "saleOnVibrant"];
+const getDefaultCurrentItemColour = (foregroundColor) => CURRENT_ITEM_WHITE_FOREGROUND_COLORS.includes(foregroundColor) ? "whitePrimary" : "secondary";
+const Breadcrumbs = forwardRef((props, forwardedRef) => {
+  const {
+    navProps
+  } = useBreadcrumbs(props);
+  const {
+    as = Link,
+    children,
+    maxItems = 4,
+    itemForegroundColor = "primary",
+    separatorForegroundColor = itemForegroundColor,
+    buttonStyleVariant = "neutral",
+    hasCurrentItem = true,
+    disableAutomaticOverflow = false
+  } = props;
+  const ariaLabel = (props == null ? void 0 : props["aria-label"]) || "Breadcrumb";
+  const navRef = useObjectRef(forwardedRef);
+  const itemsArray = Children.toArray(children);
+  let items = itemsArray.map((child, index) => {
+    var _a, _b, _c;
+    const item = child;
+    const itemColor = ((_a = item.props) == null ? void 0 : _a.isCurrent) ? getDefaultCurrentItemColour(itemForegroundColor) : itemForegroundColor;
+    const iconEndProps = ((_b = item.props) == null ? void 0 : _b.iconEndProps) || false;
+    return React__default.cloneElement(item, {
+      as,
+      "data-parent": index === itemsArray.length - 2 || void 0,
+      iconEndProps: as === Link ? iconEndProps : void 0,
+      foregroundColor: ((_c = item.props) == null ? void 0 : _c.foregroundColor) || itemColor,
+      ...item.props
+    });
+  });
+  if (!hasCurrentItem) {
+    items = items.filter((item) => {
+      var _a;
+      return !((_a = item == null ? void 0 : item.props) == null ? void 0 : _a.isCurrent);
+    });
+  }
+  const itemCount = items.length;
+  const shouldOverflowMaxItems = itemCount > maxItems;
+  const [hasOverflow, setHasOverflow] = useState(false);
+  const [breadcrumbsWidth, setBreadcrumbsWidth] = useState(-1);
+  const shouldOverflowAutomatically = !disableAutomaticOverflow && breadcrumbsWidth > 0 && hasOverflow;
+  const checkForOverflow = (element) => {
+    if (!navRef.current) return;
+    const parentWidth = element.contentRect.width;
+    setHasOverflow(parentWidth <= breadcrumbsWidth);
+  };
+  useLayoutEffect(() => {
+    if (!navRef.current || disableAutomaticOverflow) return;
+    setBreadcrumbsWidth(navRef.current.clientWidth);
+  }, [navRef.current]);
+  useLayoutEffect(() => {
+    if (!navRef.current || disableAutomaticOverflow) return;
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        checkForOverflow(entry);
+      });
+    });
+    const parent = navRef.current.parentNode;
+    observer.observe(parent);
+    return () => {
+      observer.disconnect();
+    };
+  }, [navRef.current]);
+  const shouldOverflow = itemCount > 2 && (shouldOverflowMaxItems || shouldOverflowAutomatically);
+  const visibleItems = shouldOverflow ? [/* @__PURE__ */ jsx(OverflowMenu, { buttonStyleVariant, "aria-label": ariaLabel, children: items.slice(0, -2) }, "overflow"), items[itemCount - 2], items[itemCount - 1]] : items;
+  const breadcrumbItems = visibleItems.flatMap((child, index) => {
+    return index === visibleItems.length - 1 ? child : [child, /* @__PURE__ */ jsx(SeparatorItem, { color: separatorForegroundColor }, `separator-${index}`)];
+  });
+  return /* @__PURE__ */ jsx("nav", { ...navProps, className: styles.breadcrumbs, "aria-label": ariaLabel, ref: navRef, children: /* @__PURE__ */ jsx("ol", { className: styles["breadcrumbs__list"], children: breadcrumbItems }) });
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+Breadcrumbs.Item = BreadcrumbItem;
+export {
+  BreadcrumbItem,
+  Breadcrumbs,
+  Breadcrumbs as default
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/Breadcrumbs/Breadcrumbs.js.map

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

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

@@ -0,0 +1,2 @@
+export { default } from './Breadcrumbs';
+export type * from './Breadcrumbs';

package/dist/components/Breadcrumbs/index.js

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

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

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

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

@@ -9,8 +9,9 @@ export interface CalloutBannerBaseProps {
     title: string;
     /**
      * Optional secondary text providing more details
+     * Can be a string or React node
      */
-    description?: string;
+    description?: string | React.ReactNode;
     /**
      * Optional emphasis style for the banner
      * @default 'primary'

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -105,6 +105,10 @@ const CalloutBanner = ({
   const descriptionId = React__default.useId();
   const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;
   const resolvedRole = role || bannerRole;
+  const renderDescriptionContent = () => {
+    if (!description) return null;
+    return description;
+  };
   return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
     emphasis,
     styleVariant
@@ -129,7 +133,7 @@ const CalloutBanner = ({
               ] }),
               /* @__PURE__ */ jsx("bdi", { dir: "auto", children: title })
             ] }),
-            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children: description })
+            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children: renderDescriptionContent() })
           ] }) }),
           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/Carousel/Carousel.js

@@ -9,26 +9,26 @@ import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
 import { useFocusRing } from "@react-aria/focus";
 import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
 import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
-import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1bise_2";
-const showPartialItems = "_showPartialItems_1bise_14";
-const carousel$1 = "_carousel_1bise_2";
-const hasScrollPadding = "_hasScrollPadding_1bise_25";
-const scroller = "_scroller_1bise_43";
-const item = "_item_1bise_84";
-const slideLeft = "_slideLeft_1bise_122";
-const slideRight = "_slideRight_1bise_126";
-const controls = "_controls_1bise_149";
-const defaultPrevButton = "_defaultPrevButton_1bise_160";
-const defaultNextButton = "_defaultNextButton_1bise_168";
-const defaultDotsContainer = "_defaultDotsContainer_1bise_177";
-const defaultCarouselWrapper = "_defaultCarouselWrapper_1bise_188";
-const autoplayControlWrapper = "_autoplayControlWrapper_1bise_195";
-const defaultAutoplayControl = "_defaultAutoplayControl_1bise_195";
-const showOnHover = "_showOnHover_1bise_204";
-const hidden = "_hidden_1bise_214";
-const hiddenTabs = "_hiddenTabs_1bise_245";
-const infinite = "_infinite_1bise_264";
-const native = "_native_1bise_269";
+import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_16uhe_2";
+const showPartialItems = "_showPartialItems_16uhe_14";
+const carousel$1 = "_carousel_16uhe_2";
+const hasScrollPadding = "_hasScrollPadding_16uhe_25";
+const scroller = "_scroller_16uhe_43";
+const item = "_item_16uhe_84";
+const slideLeft = "_slideLeft_16uhe_122";
+const slideRight = "_slideRight_16uhe_126";
+const controls = "_controls_16uhe_149";
+const defaultPrevButton = "_defaultPrevButton_16uhe_160";
+const defaultNextButton = "_defaultNextButton_16uhe_168";
+const defaultDotsContainer = "_defaultDotsContainer_16uhe_177";
+const defaultCarouselWrapper = "_defaultCarouselWrapper_16uhe_188";
+const defaultAutoplayControl = "_defaultAutoplayControl_16uhe_195";
+const showOnHover = "_showOnHover_16uhe_204";
+const hidden = "_hidden_16uhe_214";
+const hiddenTabs = "_hiddenTabs_16uhe_245";
+const infinite = "_infinite_16uhe_264";
+const native = "_native_16uhe_269";
+const autoplayControlWrapper = "_autoplayControlWrapper_16uhe_273";
 const styles = {
   carouselWrapper,
   showPartialItems,
@@ -43,13 +43,13 @@ const styles = {
   defaultNextButton,
   defaultDotsContainer,
   defaultCarouselWrapper,
-  autoplayControlWrapper,
   defaultAutoplayControl,
   showOnHover,
   hidden,
   hiddenTabs,
   infinite,
-  native
+  native,
+  autoplayControlWrapper
 };
 const carousel = cva(styles.carousel, {
   variants: {
@@ -357,7 +357,7 @@ const Carousel = ({
       focusStyle
     })}`, ...focusProps, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-transitioning": isTransitioning ? "true" : void 0, style: getScrollerStyles(), tabIndex: 0, role: "region", "aria-label": "Carousel content", onKeyDown: handleCarouselKeyDown, children: items.map((child, index) => {
       const isActiveItem = activeItemIndices.includes(index);
-      const itemClasses = [styles.item, itemWrapperClassName || "", isActiveItem && activeItemClassName ? activeItemClassName : ""].filter(Boolean).join(" ");
+      const itemClasses = [itemWrapperClassName || "", styles.item, isActiveItem && activeItemClassName ? activeItemClassName : ""].filter(Boolean).join(" ");
       return /* @__PURE__ */ jsx(CarouselItem, { className: itemClasses, "data-is-active": isActiveItem ? "true" : void 0, "data-item-index": index, "aria-label": `Slide ${index + 1} of ${totalItems}`, children: child }, index);
     }) }),
     /* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [

package/dist/components/Carousel/CarouselButton/CarouselButton.js

@@ -4,17 +4,17 @@ import { e as CarouselButton$1, i as iconButtonStyles } from "../../../IconButto
 import { useFocusRing } from "@react-aria/focus";
 import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
 import { Icon } from "../../Icon/Icon.js";
-import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_1j6wm_1";
-const iconButton = "_iconButton_1j6wm_20";
-const hideDisabledArrow = "_hideDisabledArrow_1j6wm_26";
-const neutral = "_neutral_1j6wm_32";
-const white = "_white_1j6wm_44";
-const shapeFlat = "_shapeFlat_1j6wm_62";
-const shapeElevated = "_shapeElevated_1j6wm_75";
-const gradient = "_gradient_1j6wm_99";
-const next = "_next_1j6wm_106";
-const fullHeight = "_fullHeight_1j6wm_140";
-const prev = "_prev_1j6wm_151";
+import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_x58j2_1";
+const iconButton = "_iconButton_x58j2_19";
+const hideDisabledArrow = "_hideDisabledArrow_x58j2_25";
+const neutral = "_neutral_x58j2_31";
+const white = "_white_x58j2_43";
+const shapeFlat = "_shapeFlat_x58j2_61";
+const shapeElevated = "_shapeElevated_x58j2_74";
+const gradient = "_gradient_x58j2_98";
+const next = "_next_x58j2_105";
+const fullHeight = "_fullHeight_x58j2_139";
+const prev = "_prev_x58j2_150";
 const styles = {
   arrowContainer,
   iconButton,

package/dist/components/Carousel/CarouselDots/CarouselDots.js

@@ -3,12 +3,12 @@ import { useRef } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
-import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1aqyc_1";
-const tabs = "_tabs_1aqyc_1";
-const transparent = "_transparent_1aqyc_21";
-const dotsScroller = "_dotsScroller_1aqyc_25";
-const tab = "_tab_1aqyc_1";
-const activeTab = "_activeTab_1aqyc_52";
+import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_nzxrr_1";
+const tabs = "_tabs_nzxrr_1";
+const transparent = "_transparent_nzxrr_20";
+const dotsScroller = "_dotsScroller_nzxrr_24";
+const tab = "_tab_nzxrr_1";
+const activeTab = "_activeTab_nzxrr_51";
 const styles = {
   tabsContainer,
   tabs,

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ValidationError } from '@react-types/shared';
-import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+import { ValidationResult, CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
 export interface CheckboxProps extends AriaCheckboxProps {
     /** The label of the checkbox, can be a string or a React node. */
     label?: string | React.ReactNode;
@@ -33,9 +33,28 @@ export interface CheckboxProps extends AriaCheckboxProps {
      * @default 'aria'
      */
     validationBehavior?: 'native' | 'aria';
+    /** Description text for the checkbox */
     description?: string;
+    /** Alternate way to provide label content */
     children?: React.ReactNode;
+    /** Focus style variant */
     focusStyle?: 'default' | 'white';
+    /**
+     * Error message to display when the checkbox is invalid
+     * Can be a static string or a function that returns an error message
+     * @default undefined
+     */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /**
+     * Prefix text for screen readers only in error messages
+     * @default 'Error:'
+     */
+    errorPrefix?: string;
+    /**
+     * Custom test ID for testing purposes
+     * @default undefined
+     */
+    testId?: string;
 }
-export declare const Checkbox: ({ label, isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, description, children, focusStyle, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ label, isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, description, children, errorMessage, errorPrefix, testId, focusStyle, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,18 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
 import { Checkbox as Checkbox$1 } from "react-aria-components";
 import { c as cva } from "../../index-DdUYounA.js";
 import FieldDescription from "../FieldDescription/FieldDescription.js";
-import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_1twm2_2";
-const checkboxContainer = "_checkboxContainer_1twm2_19";
-const checkboxLabel = "_checkboxLabel_1twm2_24";
-const checkboxDescription = "_checkboxDescription_1twm2_28";
-const checkboxSvgWrapper = "_checkboxSvgWrapper_1twm2_32";
-const svg = "_svg_1twm2_46";
-const defaultFocus = "_defaultFocus_1twm2_74";
-const whiteFocus = "_whiteFocus_1twm2_78";
+import { FieldError } from "../FieldError/FieldError.js";
+import '../../assets/Checkbox.css';const checkbox$1 = "_checkbox_dtluy_2";
+const checkboxContainer = "_checkboxContainer_dtluy_26";
+const checkboxLabel = "_checkboxLabel_dtluy_31";
+const checkboxDescription = "_checkboxDescription_dtluy_35";
+const checkboxSvgWrapper = "_checkboxSvgWrapper_dtluy_40";
+const svg = "_svg_dtluy_54";
+const defaultFocus = "_defaultFocus_dtluy_82";
+const whiteFocus = "_whiteFocus_dtluy_86";
+const checkboxLabelWrapper = "_checkboxLabelWrapper_dtluy_180";
 const styles = {
   checkbox: checkbox$1,
   checkboxContainer,
@@ -18,7 +21,15 @@ const styles = {
   checkboxSvgWrapper,
   svg,
   defaultFocus,
-  whiteFocus
+  whiteFocus,
+  checkboxLabelWrapper
+};
+const DEFAULT_VALIDATION_RESULT = {
+  isInvalid: true,
+  validationErrors: ["Invalid"],
+  validationDetails: {
+    valid: false
+  }
 };
 const checkbox = cva(styles.checkbox, {
   variants: {
@@ -47,19 +58,36 @@ const Checkbox = ({
   validationBehavior,
   description,
   children,
+  errorMessage,
+  errorPrefix = "Error:",
+  testId,
   focusStyle = "default",
   ...props
 }) => {
+  const errorId = useId();
+  const descriptionId = useId();
+  const resolvedErrorMessage = useMemo(() => {
+    if (!isInvalid) return null;
+    if (typeof errorMessage === "function") {
+      return errorMessage(DEFAULT_VALIDATION_RESULT);
+    }
+    return errorMessage;
+  }, [errorMessage, isInvalid]);
+  const describedById = [description ? descriptionId : null, isInvalid && resolvedErrorMessage ? errorId : null].filter(Boolean).join(" ");
+  const labelContent = label || children;
   return /* @__PURE__ */ jsxs("div", { className: styles.checkboxContainer, children: [
-    /* @__PURE__ */ jsx(Checkbox$1, { className: checkbox({
-      focusStyle
-    }), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, ...props, children: ({
-      isIndeterminate: isIndeterminate2
-    }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: isIndeterminate2 ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
-      label || children ? /* @__PURE__ */ jsx("span", { className: styles.checkboxLabel, children: label || children }) : null
-    ] }) }),
-    description && /* @__PURE__ */ jsx(FieldDescription, { className: styles.checkboxDescription, children: description })
+    isInvalid && resolvedErrorMessage && /* @__PURE__ */ jsx(FieldError, { id: errorId, errorPrefix, isInvalid, children: resolvedErrorMessage }),
+    /* @__PURE__ */ jsxs("div", { className: styles.checkboxLabelWrapper, children: [
+      /* @__PURE__ */ jsx(Checkbox$1, { className: checkbox({
+        focusStyle
+      }), isIndeterminate, defaultSelected, isSelected, value, isDisabled, isReadOnly, isRequired, isInvalid, validate, autoFocus, name, validationBehavior, "aria-describedby": describedById || void 0, ...props, children: ({
+        isIndeterminate: isIndeterminate2
+      }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: isIndeterminate2 ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
+        labelContent ? /* @__PURE__ */ jsx("span", { className: styles.checkboxLabel, children: labelContent }) : null
+      ] }) }),
+      description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: styles.checkboxDescription, children: description })
+    ] })
   ] });
 };
 export {

package/dist/components/Checkbox/Checkbox.js.map

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

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

@@ -17,6 +17,16 @@ export interface CheckboxGroupProps extends AriaCheckboxGroupProps {
      * The error message to display when the input value is invalid.
      */
     errorMessage?: string | ((validation: ValidationResult) => string);
+    /**
+     * Prefix text for screen readers only in error messages
+     * @default 'Error:'
+     */
+    errorPrefix?: string;
+    /**
+     * Whether to show the error message. Defaults to true.
+     * @default true
+     */
+    showError?: boolean;
     /**
      * Whether the input is disabled.
      */
@@ -26,5 +36,5 @@ export interface CheckboxGroupProps extends AriaCheckboxGroupProps {
      */
     isInvalid?: boolean;
 }
-export declare const CheckboxGroup: ({ label, children, description, errorMessage, isDisabled, isInvalid, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ label, children, description, errorMessage, isDisabled, isInvalid, showError, errorPrefix, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -12,10 +12,13 @@ const CheckboxGroup = ({
   errorMessage,
   isDisabled,
   isInvalid,
+  showError = true,
+  // Default to true
+  errorPrefix = "Error:",
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(CheckboxGroup$1, { className: styles.checkboxGroup, isDisabled, isInvalid, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired: true, isInvalid }),
+    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired: true, isInvalid, showError, errorPrefix }),
     children
   ] });
 };

package/dist/components/CheckboxGroup/CheckboxGroup.js.map

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

package/dist/components/ComboBox/ComboBox.js

@@ -21,7 +21,7 @@ const ComboBox = ({
   return /* @__PURE__ */ jsxs(Field, { as: ComboBox$1, className: styles["comboBox"], ...props, children: [
     /* @__PURE__ */ jsxs(Group, { className: styles["comboBox-group"], children: [
       /* @__PURE__ */ jsx(Input, { className: styles["comboBox-input"] }),
-      isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x", buttonSize: "sm", className: styles["comboBox-loading"] }) : /* @__PURE__ */ jsx(Button, { className: styles.comboBoxButton, isDisabled: props == null ? void 0 : props.isDisabled, children: /* @__PURE__ */ jsx(Icon, { iconName: "angles-up-down", iconPrefix: "fas", padding: "roomy", scale: "1x" }) })
+      isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1.25x", className: styles["comboBox-loading"] }) : /* @__PURE__ */ jsx(Button, { className: styles.comboBoxButton, isDisabled: props == null ? void 0 : props.isDisabled, children: /* @__PURE__ */ jsx(Icon, { iconName: "angles-up-down", iconPrefix: "fas", padding: "roomy", scale: "1x" }) })
     ] }),
     /* @__PURE__ */ jsx(Popover, { className: styles["comboBox-popover"], children })
   ] });

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

@@ -49,6 +49,11 @@ export interface DialogProps extends AriaDialogProps {
      * @default false
      */
     removePadding?: boolean;
+    /**
+     * Custom z-index for the dialog wrapper
+     * @default 99 (from CSS)
+     */
+    zIndex?: number;
 }
 export interface DialogComposition {
     Header: typeof DialogHeader;

package/dist/components/Dialog/Dialog.js

@@ -4,18 +4,18 @@ import { IconButton } from "../IconButton/IconButton.js";
 import { OverlayContainer, useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
 import { useDialog } from "@react-aria/dialog";
 import { FocusScope } from "@react-aria/focus";
-import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_yj1df_1";
-const overlay = "_overlay_yj1df_10";
-const dialog = "_dialog_yj1df_1";
-const noPadding = "_noPadding_yj1df_30";
-const dialogContent = "_dialogContent_yj1df_59";
-const dialogHeading = "_dialogHeading_yj1df_66";
-const dialogContentInner = "_dialogContentInner_yj1df_70";
-const noHeader = "_noHeader_yj1df_76";
-const closeButton = "_closeButton_yj1df_80";
-const dialogSmall = "_dialogSmall_yj1df_106";
-const dialogMedium = "_dialogMedium_yj1df_110";
-const dialogLarge = "_dialogLarge_yj1df_114";
+import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_1i48s_1";
+const overlay = "_overlay_1i48s_10";
+const dialog = "_dialog_1i48s_1";
+const noPadding = "_noPadding_1i48s_30";
+const dialogContent = "_dialogContent_1i48s_59";
+const dialogHeading = "_dialogHeading_1i48s_66";
+const dialogContentInner = "_dialogContentInner_1i48s_70";
+const noHeader = "_noHeader_1i48s_76";
+const closeButton = "_closeButton_1i48s_80";
+const dialogSmall = "_dialogSmall_1i48s_106";
+const dialogMedium = "_dialogMedium_1i48s_110";
+const dialogLarge = "_dialogLarge_1i48s_114";
 const styles = {
   dialogWrapper,
   overlay,
@@ -31,9 +31,7 @@ const styles = {
   dialogLarge
 };
 const DialogHeader = ({
-  /** ID used to reference this header for aria-labelledby */
   id,
-  /** Content of the header section */
   children
 }) => {
   return /* @__PURE__ */ jsx("div", { className: styles.dialogHeading, id, children });
@@ -45,10 +43,7 @@ const DialogContent = ({
 };
 DialogHeader.displayName = "Dialog.Header";
 DialogContent.displayName = "Dialog.Content";
-function DialogWrapper({
-  children,
-  ...props
-}) {
+function DialogWrapper(props) {
   const {
     onClose,
     size = "dialogMedium",
@@ -57,7 +52,9 @@ function DialogWrapper({
     dismissButtonLabel = "Close dialog",
     role = "dialog",
     id,
-    removePadding = false
+    removePadding = false,
+    zIndex,
+    children
   } = props;
   const ref = useRef(null);
   const {
@@ -85,7 +82,10 @@ function DialogWrapper({
   const headerId = props["aria-labelledby"] || `${id}-header`;
   const contentId = props["aria-describedby"] || `${id}-content`;
   const dialogClasses = [styles.dialog, styles[size], removePadding ? styles.noPadding : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
+  const wrapperStyle = zIndex !== void 0 ? {
+    zIndex
+  } : {};
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, style: wrapperStyle, children: [
     modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className: dialogClasses, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
       /* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [

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

@@ -1,10 +1,28 @@
-import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
-export interface FieldErrorProps extends AriaFieldErrorProps {
-    children?: React.ReactNode | any;
+import { default as React } from 'react';
+import { FieldErrorProps as AriaFieldErrorProps, ValidationResult } from 'react-aria-components';
+export interface FieldErrorProps extends Omit<AriaFieldErrorProps, 'children' | 'className'> {
     /**
-     * Whether the field is invalid.
+     * Error message content
+     * Can be a static string or a function that returns an error message
+     */
+    children?: React.ReactNode | ((validation: ValidationResult) => string);
+    /**
+     * Prefix text for screen readers
+     * @default 'Error:'
+     */
+    errorPrefix?: string;
+    /**
+     * Label of the field to include in the error prefix
+     */
+    fieldLabel?: string;
+    /**
+     * Explicitly mark the field as invalid
      */
     isInvalid?: boolean;
+    /**
+     * CSS class name for the error
+     */
+    className?: string;
 }
-export declare const FieldError: ({ children, isInvalid: isInvalidProp, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldError: ({ children, errorPrefix, fieldLabel, isInvalid, className, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldError;