@alto-avios/alto-ui 4.0.0 → 4.2.0

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

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
-export interface CalloutBannerProps {
+import { default as IconButton } from '../IconButton';
+type StyleVariant = 'critical' | 'success' | 'information' | 'neutral';
+type DismissButtonProps = Omit<React.ComponentProps<typeof IconButton>, 'onPress' | 'iconProps' | 'size' | 'styleVariant' | 'emphasis' | 'tooltipLabel'>;
+export interface CalloutBannerBaseProps {
     /**
      * The main heading text of the banner
      */
@@ -21,7 +24,7 @@ export interface CalloutBannerProps {
      * - 'neutral' for non-critical messages, guidance
      * @default 'critical'
      */
-    styleVariant?: 'critical' | 'success' | 'information' | 'neutral';
+    styleVariant?: StyleVariant;
     /**
      * Optional button group to be rendered as a label
      */
@@ -30,10 +33,20 @@ export interface CalloutBannerProps {
      * Optional label for the dismiss button tooltip
      */
     dismissButtonTooltipLabel?: string;
+    /**
+     * Optional props for the dismiss icon button
+     */
+    dismissButtonProps?: DismissButtonProps;
     /**
      * Optional content to be rendered in the end section of the banner
      */
     children?: React.ReactNode;
+    /**
+     * Semantic heading level to use when styleVariant is 'heading'
+     * Affects accessibility and document structure
+     * @default 'h3'
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
      * Optional callback function triggered when the dismiss button is clicked
      */
@@ -55,6 +68,17 @@ export interface CalloutBannerProps {
      * @default 'left'
      */
     alignButtons?: 'left' | 'right';
+    /**
+     * Optional prefix text to be added before the title to denote severity.
+     * E.g., "Critical", "Success", "Information"
+     * For i18m purposes, this should be provided by the consumer.
+     */
+    severityLabel?: string;
+    /**
+     * Optional ARIA role for the banner. Defaults to 'alert' for critical, 'status' for success/information, 'region' for neutral.
+     */
+    role?: React.AriaRole;
 }
-export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, dismissButtonTooltipLabel, onDismiss, customAsset, hideIllustration, alignButtons, }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
+export type CalloutBannerProps = CalloutBannerBaseProps & React.AriaAttributes;
+export declare const CalloutBanner: ({ title, description, label, children, styleVariant, emphasis, headingLevel, dismissButtonTooltipLabel, onDismiss, customAsset, hideIllustration, alignButtons, severityLabel, role, dismissButtonProps, ...ariaProps }: CalloutBannerProps) => import("react/jsx-runtime").JSX.Element;
 export default CalloutBanner;

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -3,34 +3,35 @@ import React__default from "react";
 import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-DdUYounA.js";
 import { IconButton } from "../IconButton/IconButton.js";
-import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_confe_1";
-const calloutBanner__icon = "_calloutBanner__icon_confe_12";
-const calloutBanner__start = "_calloutBanner__start_confe_16";
-const calloutBanner__end = "_calloutBanner__end_confe_26";
-const calloutBanner__dismiss = "_calloutBanner__dismiss_confe_33";
-const calloutBanner__meta = "_calloutBanner__meta_confe_39";
+import '../../assets/CalloutBanner.css';const calloutBanner$1 = "_calloutBanner_10d8r_1";
+const calloutBanner__icon = "_calloutBanner__icon_10d8r_12";
+const calloutBanner__start = "_calloutBanner__start_10d8r_16";
+const calloutBanner__end = "_calloutBanner__end_10d8r_26";
+const calloutBanner__dismiss = "_calloutBanner__dismiss_10d8r_33";
+const calloutBanner__meta = "_calloutBanner__meta_10d8r_39";
 const styles = {
   calloutBanner: calloutBanner$1,
   calloutBanner__icon,
   calloutBanner__start,
   calloutBanner__end,
   calloutBanner__dismiss,
+  "calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_10d8r_39",
   calloutBanner__meta,
-  "calloutBanner__meta-content": "_calloutBanner__meta-content_confe_55",
-  "calloutBanner__meta-label": "_calloutBanner__meta-label_confe_62",
-  "calloutBanner__meta-right": "_calloutBanner__meta-right_confe_66",
-  "calloutBanner__meta-top": "_calloutBanner__meta-top_confe_71",
-  "calloutBanner__custom-asset": "_calloutBanner__custom-asset_confe_79",
-  "calloutBanner__meta-top-dismiss": "_calloutBanner__meta-top-dismiss_confe_87",
-  "calloutBanner__meta-title": "_calloutBanner__meta-title_confe_91",
-  "calloutBanner__meta-description": "_calloutBanner__meta-description_confe_95",
-  "calloutBanner-critical": "_calloutBanner-critical_confe_100",
-  "calloutBanner-primary": "_calloutBanner-primary_confe_104",
-  "calloutBanner-secondary": "_calloutBanner-secondary_confe_108",
-  "calloutBanner-tertiary": "_calloutBanner-tertiary_confe_117",
-  "calloutBanner-success": "_calloutBanner-success_confe_126",
-  "calloutBanner-information": "_calloutBanner-information_confe_152",
-  "calloutBanner-neutral": "_calloutBanner-neutral_confe_178"
+  "calloutBanner__meta-content": "_calloutBanner__meta-content_10d8r_59",
+  "calloutBanner__meta-label": "_calloutBanner__meta-label_10d8r_66",
+  "calloutBanner__meta-right": "_calloutBanner__meta-right_10d8r_70",
+  "calloutBanner__meta-top": "_calloutBanner__meta-top_10d8r_39",
+  "calloutBanner__custom-asset": "_calloutBanner__custom-asset_10d8r_83",
+  "calloutBanner__meta-title": "_calloutBanner__meta-title_10d8r_91",
+  "calloutBanner__meta-description": "_calloutBanner__meta-description_10d8r_97",
+  "calloutBanner__severity-label": "_calloutBanner__severity-label_10d8r_103",
+  "calloutBanner-critical": "_calloutBanner-critical_10d8r_115",
+  "calloutBanner-primary": "_calloutBanner-primary_10d8r_119",
+  "calloutBanner-secondary": "_calloutBanner-secondary_10d8r_123",
+  "calloutBanner-tertiary": "_calloutBanner-tertiary_10d8r_132",
+  "calloutBanner-success": "_calloutBanner-success_10d8r_141",
+  "calloutBanner-information": "_calloutBanner-information_10d8r_167",
+  "calloutBanner-neutral": "_calloutBanner-neutral_10d8r_193"
 };
 const calloutBanner = cva(styles.calloutBanner, {
   variants: {
@@ -51,6 +52,28 @@ const calloutBanner = cva(styles.calloutBanner, {
     styleVariant: "critical"
   }
 });
+const CALLOUT_BANNER_META = {
+  critical: {
+    icon: "circle-exclamation",
+    severityLabel: "Critical",
+    role: "alert"
+  },
+  success: {
+    icon: "check-circle",
+    severityLabel: "Success",
+    role: "status"
+  },
+  information: {
+    icon: "info-circle",
+    severityLabel: "Information",
+    role: "status"
+  },
+  neutral: {
+    icon: "check-circle",
+    severityLabel: "",
+    role: "region"
+  }
+};
 const CalloutBanner = ({
   title,
   description,
@@ -58,31 +81,34 @@ const CalloutBanner = ({
   children,
   styleVariant = "critical",
   emphasis = "primary",
+  headingLevel = "h3",
   dismissButtonTooltipLabel,
   onDismiss,
   customAsset,
   hideIllustration = false,
-  alignButtons = "left"
+  alignButtons = "left",
+  severityLabel,
+  role,
+  dismissButtonProps = {
+    "aria-label": "Dismiss banner"
+  },
+  ...ariaProps
 }) => {
-  const iconName = React__default.useMemo(() => {
-    switch (styleVariant) {
-      case "critical":
-        return "circle-exclamation";
-      case "success":
-        return "check-circle";
-      case "information":
-        return "info-circle";
-      case "neutral":
-        return "check-circle";
-      default:
-        return "circle-exclamation";
-    }
-  }, [styleVariant]);
   const hasOnDismiss = typeof onDismiss === "function";
+  const {
+    icon: iconName,
+    severityLabel: defaultSeverityLabel,
+    role: bannerRole
+  } = CALLOUT_BANNER_META[styleVariant];
+  const HeadingBanner = headingLevel;
+  const titleId = React__default.useId();
+  const descriptionId = React__default.useId();
+  const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;
+  const resolvedRole = role || bannerRole;
   return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
     emphasis,
     styleVariant
-  }), children: [
+  }), role: resolvedRole, "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0, ...ariaProps, children: [
     /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__start"], children: [
       !hideIllustration && (customAsset ? /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__custom-asset"], children: customAsset }) : /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__default-asset"], children: /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas", className: styles["calloutBanner__icon"], iconSize: "1.25x", padding: "roomy" }) })),
       /* @__PURE__ */ jsxs("div", { className: styles["calloutBanner__meta"], children: [
@@ -90,14 +116,20 @@ const CalloutBanner = ({
           iconName: "close",
           iconPrefix: "far",
           iconSize: "1x"
-        }, tooltipLabel: dismissButtonTooltipLabel, "aria-label": "Dismiss banner" }) }),
+        }, tooltipLabel: dismissButtonTooltipLabel, ...dismissButtonProps }) }),
         /* @__PURE__ */ jsxs("div", { className: `
               ${styles["calloutBanner__meta-content"]}
               
               ${alignButtons === "right" ? styles["calloutBanner__meta-right"] : ""}`, children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: `${styles["calloutBanner__meta-top"]} ${hasOnDismiss ? styles["calloutBanner__meta-top-dismiss"] : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-title"], children: title }),
-            description && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-description"], children: description })
+            /* @__PURE__ */ jsxs(HeadingBanner, { id: titleId, className: styles["calloutBanner__meta-title"], children: [
+              /* @__PURE__ */ jsxs("span", { className: styles["calloutBanner__severity-label"], dir: "auto", children: [
+                resolvedSeverityLabel,
+                resolvedSeverityLabel ? ": " : ""
+              ] }),
+              /* @__PURE__ */ jsx("bdi", { dir: "auto", children: title })
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: styles["calloutBanner__meta-description"], children: description })
           ] }) }),
           label && /* @__PURE__ */ jsx("div", { className: styles["calloutBanner__meta-label"], children: label })
         ] })

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

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

package/dist/components/Carousel/CarouselButton/CarouselButton.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export interface CarouselButtonProps {
     /**
      * Direction of the button (prev or next)
@@ -23,6 +24,11 @@ export interface CarouselButtonProps {
      * @default false
      */
     hideDisabledArrow?: boolean;
+    /**
+     * Whether the button is disabled (for standalone use)
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Additional CSS class name for the button container
      */
@@ -35,10 +41,15 @@ export interface CarouselButtonProps {
      * Custom click handler for implementing custom navigation behavior
      */
     onClick?: () => void;
+    /**
+     * Whether to use standalone mode (outside carousel context)
+     * @default false
+     */
+    standalone?: boolean;
     /**
      * @private
      */
     iconType?: 'chevron';
 }
-export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName, onClick, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselButton: React.ForwardRefExoticComponent<CarouselButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default CarouselButton;

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

@@ -1,20 +1,20 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { forwardRef, useState, useRef, useEffect } from "react";
 import { e as CarouselButton$1, i as iconButtonStyles } from "../../../IconButton.module-4obqG6tY.js";
 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_f9nx_1";
-const iconButton = "_iconButton_f9nx_20";
-const hideDisabledArrow = "_hideDisabledArrow_f9nx_26";
-const neutral = "_neutral_f9nx_32";
-const white = "_white_f9nx_44";
-const shapeFlat = "_shapeFlat_f9nx_62";
-const shapeElevated = "_shapeElevated_f9nx_72";
-const gradient = "_gradient_f9nx_93";
-const next = "_next_f9nx_100";
-const fullHeight = "_fullHeight_f9nx_137";
-const prev = "_prev_f9nx_148";
+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";
 const styles = {
   arrowContainer,
   iconButton,
@@ -28,17 +28,19 @@ const styles = {
   fullHeight,
   prev
 };
-const CarouselButton = ({
+const CarouselButton = forwardRef(({
   dir,
   variant = "neutral",
   size = "md",
   focusStyle = "default",
   hideDisabledArrow: hideDisabledArrow2 = false,
+  isDisabled = false,
   iconType = "chevron",
   className = "",
   buttonClassName = "",
-  onClick
-}) => {
+  onClick,
+  standalone = false
+}, forwardedRef) => {
   const {
     isFocusVisible,
     focusProps,
@@ -47,20 +49,39 @@ const CarouselButton = ({
   const directionClass = dir === "prev" ? styles.prev : styles.next;
   const [isHovered, setIsHovered] = useState(false);
   const [isPressed, setIsPressed] = useState(false);
-  const [isDisabled, setIsDisabled] = useState(false);
+  const [carouselIsDisabled, setCarouselIsDisabled] = useState(false);
   const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
-  const variantStyleClass = variant ? styles[variant] : "";
-  const shouldBeFullHeight = variant === "gradient";
+  const internalButtonRef = useRef(null);
   const buttonRef = useRef(null);
   useEffect(() => {
+    const setRefs = (element) => {
+      buttonRef.current = element;
+      internalButtonRef.current = element;
+      if (forwardedRef) {
+        if (typeof forwardedRef === "function") {
+          forwardedRef(element);
+        } else {
+          forwardedRef.current = element;
+        }
+      }
+    };
+    if (buttonRef.current) {
+      setRefs(buttonRef.current);
+    }
+  }, [forwardedRef]);
+  const variantStyleClass = variant ? styles[variant] || "" : "";
+  const shouldBeFullHeight = variant === "gradient";
+  const effectiveIsDisabled = standalone ? isDisabled : carouselIsDisabled;
+  useEffect(() => {
+    if (standalone) return;
     const element = buttonRef.current;
     if (!element) return;
-    setIsDisabled(element.getAttribute("aria-disabled") === "true");
+    setCarouselIsDisabled(element.getAttribute("aria-disabled") === "true");
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes" && mutation.attributeName === "aria-disabled") {
           const isCurrentlyDisabled = element.getAttribute("aria-disabled") === "true";
-          setIsDisabled(isCurrentlyDisabled);
+          setCarouselIsDisabled(isCurrentlyDisabled);
           if (isCurrentlyDisabled) {
             setIsHovered(false);
             setIsPressed(false);
@@ -76,21 +97,23 @@ const CarouselButton = ({
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [standalone]);
   useEffect(() => {
     if (!buttonRef.current) return;
     const element = buttonRef.current;
     const handleFocus = (e) => {
       if (e.target === element && isFocusVisible) {
         setShouldShowFocusRing(true);
-        const carouselContainer = element.closest('[role="region"][aria-roledescription="carousel"], .carouselWrapper');
-        if (carouselContainer) {
-          const siblingButtons = carouselContainer.querySelectorAll('[dir="prev"], [dir="next"]');
-          siblingButtons.forEach((button) => {
-            if (button !== element && button instanceof HTMLElement) {
-              button.dispatchEvent(new CustomEvent("carousel:hideFocus"));
-            }
-          });
+        if (!standalone) {
+          const carouselContainer = element.closest('[role="region"][aria-roledescription="carousel"], .carouselWrapper');
+          if (carouselContainer) {
+            const siblingButtons = carouselContainer.querySelectorAll('[dir="prev"], [dir="next"]');
+            siblingButtons.forEach((button) => {
+              if (button !== element && button instanceof HTMLElement) {
+                button.dispatchEvent(new CustomEvent("carousel:hideFocus"));
+              }
+            });
+          }
         }
       }
     };
@@ -108,7 +131,7 @@ const CarouselButton = ({
       element.removeEventListener("blur", handleBlur);
       element.removeEventListener("carousel:hideFocus", handleHideFocus);
     };
-  }, [isFocusVisible]);
+  }, [isFocusVisible, standalone]);
   useEffect(() => {
     if (!isFocusVisible) {
       setShouldShowFocusRing(false);
@@ -151,43 +174,93 @@ const CarouselButton = ({
     }) : "";
     return `${baseClass} ${sizeClass} ${emphasisClass} ${focusClass} ${buttonClassName || ""}`;
   };
-  const mouseEventHandlers = isDisabled ? {} : {
+  const mouseEventHandlers = effectiveIsDisabled ? {} : {
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     onMouseDown: () => setIsPressed(true),
     onMouseUp: () => setIsPressed(false)
   };
   const handleClick = () => {
-    if (!isDisabled && onClick) {
+    if (!effectiveIsDisabled && onClick) {
       onClick();
     }
   };
   const handleKeyDown = (e) => {
+    if (standalone && effectiveIsDisabled) {
+      return;
+    }
     if (e.key === " " || e.key === "Enter") {
       e.preventDefault();
     }
   };
   const handleKeyUp = (e) => {
-    if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+    if (standalone && effectiveIsDisabled) {
+      return;
+    }
+    if ((e.key === " " || e.key === "Enter") && !effectiveIsDisabled) {
       handleClick();
-      if (buttonRef.current) {
+      if (!standalone && buttonRef.current) {
         buttonRef.current.click();
       }
     }
   };
   const getTabIndex = () => {
-    if (isDisabled) {
+    if (standalone) {
+      return hideDisabledArrow2 && effectiveIsDisabled ? -1 : 0;
+    }
+    if (effectiveIsDisabled) {
       return -1;
     }
     return 0;
   };
   const getAriaLabel = () => {
     const action = dir === "prev" ? "Previous" : "Next";
-    const state = isDisabled ? ", unavailable" : "";
-    return `${action} slide${state}`;
+    const context = standalone ? "item" : "slide";
+    const state = effectiveIsDisabled ? ", unavailable" : "";
+    return `${action} ${context}${state}`;
   };
-  return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, "data-focus-visible": shouldShowFocusRing ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused && shouldShowFocusRing ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && shouldShowFocusRing ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
-};
+  const commonProps = {
+    className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`,
+    ...focusProps,
+    ...mouseEventHandlers,
+    "data-hovered": !effectiveIsDisabled && isHovered ? true : void 0,
+    "data-pressed": !effectiveIsDisabled && isPressed ? true : void 0,
+    "data-disabled": effectiveIsDisabled ? true : void 0,
+    "data-focused": !effectiveIsDisabled && isFocused ? true : void 0,
+    "data-focus-visible": shouldShowFocusRing ? true : void 0,
+    ref: buttonRef,
+    tabIndex: getTabIndex(),
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    "aria-label": getAriaLabel(),
+    role: "button"
+  };
+  const buttonContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${getButtonClasses()} ${styles.iconButton}`,
+      "data-focused": !effectiveIsDisabled && isFocused && shouldShowFocusRing ? true : void 0,
+      "data-focus-visible": !effectiveIsDisabled && shouldShowFocusRing ? true : void 0,
+      "data-parent-hovered": !effectiveIsDisabled && isHovered ? true : void 0,
+      "data-parent-pressed": !effectiveIsDisabled && isPressed ? true : void 0,
+      "data-parent-disabled": standalone ? void 0 : effectiveIsDisabled ? true : void 0,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" })
+    }
+  );
+  if (standalone) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...commonProps,
+        onClick: handleClick,
+        children: buttonContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(CarouselButton$1, { dir, ...commonProps, onClick: handleClick, children: buttonContent });
+});
+CarouselButton.displayName = "CarouselButton";
 export {
   CarouselButton,
   CarouselButton as default

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

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

package/dist/components/Currency/Currency.d.ts

@@ -0,0 +1,51 @@
+export type CurrencyStyleVariant = 'primary' | 'secondary' | 'white' | 'onSpend' | 'onCollect' | 'accentPrimary' | 'accentSecondary';
+export interface CurrencyProps {
+    /**
+     * The numeric value to display
+     */
+    children?: number;
+    /**
+     * A BCP‑47 language tag, e.g. "en-GB", "fr-FR".
+     * Only used when you don’t supply a custom `formatter`.
+     * @default "en-GB"
+     */
+    locale?: string;
+    /**
+     * If you just want to prepend/append a symbol and use decimal formatting,
+     * supply this (e.g. "£", "$", "€"). Ignored if `formatOptions.style === "currency"`.
+     */
+    symbol?: string;
+    /**
+     * The style variant to use for the currency
+     * @default 'accentSecondary'
+     */
+    styleVariant?: CurrencyStyleVariant;
+    /**
+     * The size of the Avios currency
+     * @default 'md'
+     */
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | '4xs' | '5xs';
+    /**
+     * Whether to apply strikethrough styling to the currency text.
+     * Useful for indicating a discount or a change in value.
+     * @default false
+     */
+    isStrikethrough?: boolean;
+    /**
+     * Any standard Intl.NumberFormatOptions you’d like to customize
+     * (digit counts, grouping, currency style, etc.).
+     */
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'style'> & {
+        /** If you want a true currency style, set this to "currency" and supply `currency` below */
+        style?: 'decimal' | 'currency';
+        currency?: Intl.NumberFormatOptions['currency'];
+    };
+    /**
+     * Full override formatter. Handy if you need something totally bespoke:
+     * `(value) => string`.
+     * When present, this always wins and `locale|symbol|formatOptions` are ignored.
+     */
+    formatter?: (value: number) => string;
+}
+export declare const Currency: ({ children, locale, symbol, size, styleVariant, isStrikethrough, formatOptions, formatter, }: CurrencyProps) => import("react/jsx-runtime").JSX.Element;
+export default Currency;