@alto-avios/alto-ui 3.6.0 → 3.7.0

package/dist/assets/AviosCurrency.css

@@ -0,0 +1 @@
+._aviosCurrency_1gakm_1{align-items:center;display:inline-flex;gap:var(--alto-sem-space-5xs);position:relative;width:-moz-fit-content;width:fit-content}._aviosCurrencyName_1gakm_9{padding-left:var(--alto-sem-space-5xs)}._aviosCurrencyStrikethrough_1gakm_13{border-radius:1px;height:3px;left:0;position:absolute;top:50%;width:100%}._aviosCurrency_1gakm_1{color:var(--alto-sem-color-fg-spend-on-vibrant-default);font-family:var(--alto-sem-text-heading-font-family)}._aviosCurrency-primary_1gakm_27{color:var(--alto-sem-color-fg-primary)}._aviosCurrencyStrikethrough-primary_1gakm_31{background-color:var(--alto-sem-color-fg-primary)}._aviosCurrency-secondary_1gakm_35{color:var(--alto-sem-color-fg-secondary)}._aviosCurrencyStrikethrough-secondary_1gakm_39{background-color:var(--alto-sem-color-fg-secondary)}._aviosCurrency-white_1gakm_43{color:var(--alto-sem-color-fg-white-primary)}._aviosCurrencyStrikethrough-white_1gakm_47{background-color:var(--alto-sem-color-fg-white-primary)}._aviosCurrency-onSpend_1gakm_51{color:var(--alto-sem-color-fg-spend-on-vibrant-default)}._aviosCurrencyStrikethrough-onSpend_1gakm_55{background-color:var(--alto-sem-color-fg-spend-on-vibrant-default)}._aviosCurrency-onCollect_1gakm_59{color:var(--alto-sem-color-fg-collect-on-vibrant-default)}._aviosCurrencyStrikethrough-onCollect_1gakm_63{background-color:var(--alto-sem-color-fg-collect-on-vibrant-default)}._aviosCurrency-accentPrimary_1gakm_67{color:var(--alto-sem-color-fg-accent-primary)}._aviosCurrencyStrikethrough-accentPrimary_1gakm_71{background-color:var(--alto-sem-color-fg-accent-primary)}._aviosCurrency-accentSecondary_1gakm_75{color:var(--alto-sem-color-fg-accent-secondary)}._aviosCurrencyStrikethrough-accentSecondary_1gakm_79{background-color:var(--alto-sem-color-fg-accent-secondary)}._aviosCurrency-xl_1gakm_83{font-size:var(--alto-sem-text-heading-xl-font-size);font-weight:var(--alto-sem-text-heading-xl-font-weight);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-line-height)}._aviosCurrency-xl_1gakm_83 svg{height:var(--alto-sem-text-heading-xl-font-size);width:var(--alto-sem-text-heading-xl-font-size)}._aviosCurrencyStrikethrough-xl_1gakm_95{height:1.8px}._aviosCurrency-lg_1gakm_99{font-size:var(--alto-sem-text-heading-lg-font-size);font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-heading-lg-letter-spacing);line-height:var(--alto-sem-text-heading-lg-line-height)}._aviosCurrency-lg_1gakm_99 svg{height:var(--alto-sem-text-heading-lg-font-size);width:var(--alto-sem-text-heading-lg-font-size)}._aviosCurrencyStrikethrough-lg_1gakm_111{height:1.7px}._aviosCurrency-md_1gakm_115{font-size:var(--alto-sem-text-heading-md-font-size);font-weight:var(--alto-sem-text-heading-md-font-weight);letter-spacing:var(--alto-sem-text-heading-md-letter-spacing);line-height:var(--alto-sem-text-heading-md-line-height)}._aviosCurrency-md_1gakm_115 svg{height:var(--alto-sem-text-heading-md-font-size);width:var(--alto-sem-text-heading-md-font-size)}._aviosCurrencyStrikethrough-md_1gakm_127{height:1.5px}._aviosCurrency-sm_1gakm_131{font-size:var(--alto-sem-text-heading-sm-font-size);font-weight:var(--alto-sem-text-heading-sm-font-weight);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._aviosCurrency-sm_1gakm_131 svg{height:var(--alto-sem-text-heading-sm-font-size);width:var(--alto-sem-text-heading-sm-font-size)}._aviosCurrencyStrikethrough-sm_1gakm_143{height:1.2px}._aviosCurrency-xs_1gakm_147{font-size:var(--alto-sem-text-heading-xs-font-size);font-weight:var(--alto-sem-text-heading-xs-font-weight);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._aviosCurrency-xs_1gakm_147 svg{height:var(--alto-sem-text-heading-xs-font-size);width:var(--alto-sem-text-heading-xs-font-size)}._aviosCurrencyStrikethrough-xs_1gakm_159{height:1px}._aviosCurrency-2xs_1gakm_163{font-size:var(--alto-sem-text-heading-2xs-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-line-height)}._aviosCurrency-2xs_1gakm_163 svg{height:var(--alto-sem-text-heading-2xs-font-size);width:var(--alto-sem-text-heading-2xs-font-size)}._aviosCurrencyStrikethrough-2xs_1gakm_175{height:.8px}._aviosCurrency-3xs_1gakm_179{font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._aviosCurrency-3xs_1gakm_179 svg{height:var(--alto-sem-text-body-md-font-size);width:var(--alto-sem-text-body-md-font-size)}._aviosCurrencyStrikethrough-3xs_1gakm_191{height:.8px}._aviosCurrency-4xs_1gakm_195{font-size:var(--alto-sem-text-body-sm-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}._aviosCurrency-4xs_1gakm_195 svg{height:var(--alto-sem-text-body-sm-font-size);width:var(--alto-sem-text-body-sm-font-size)}._aviosCurrencyStrikethrough-4xs_1gakm_207{height:.6px}._aviosCurrency-5xs_1gakm_211{font-size:var(--alto-sem-text-body-xs-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-body-xs-letter-spacing);line-height:var(--alto-sem-text-body-xs-line-height)}._aviosCurrency-5xs_1gakm_211 svg{height:var(--alto-sem-text-body-xs-font-size);width:var(--alto-sem-text-body-xs-font-size)}._aviosCurrencyStrikethrough-5xs_1gakm_223{height:.6px}

package/dist/components/AviosCurrency/AviosCurrency.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { AviosCurrencySymbolProps } from '../AviosCurrencySymbol';
+import { IconSize } from '../Icon/Icon';
+export interface AviosCurrencyProps extends Omit<AviosCurrencySymbolProps, 'styleVariant'> {
+    children?: React.ReactNode;
+    /**
+     * The style variant of the Avios currency
+     */
+    styleVariant?: AviosCurrencySymbolProps['styleVariant'];
+    /**
+     * The size of the Avios currency
+     */
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs' | '4xs' | '5xs';
+    /**
+     * Whether to display the currency name " Avios"
+     */
+    hasCurrencyName?: boolean;
+    /**
+     * The decorator to display
+     */
+    decorator?: 'link' | 'dropdown';
+    /**
+     * Whether to display the Avios currency as a strikethrough
+     */
+    isStrikethrough?: boolean;
+}
+export declare function getIconSize(size: AviosCurrencyProps['size']): IconSize;
+export declare const AviosCurrency: ({ children, styleVariant, kind, size, hasCurrencyName, decorator, isStrikethrough, ...props }: AviosCurrencyProps) => import("react/jsx-runtime").JSX.Element;
+export default AviosCurrency;

package/dist/components/AviosCurrency/AviosCurrency.js

@@ -0,0 +1,166 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as cva } from "../../index-DdUYounA.js";
+import { AviosCurrencySymbol } from "../AviosCurrencySymbol/AviosCurrencySymbol.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/AviosCurrency.css';const aviosCurrency$1 = "_aviosCurrency_1gakm_1";
+const aviosCurrencyName = "_aviosCurrencyName_1gakm_9";
+const aviosCurrencyStrikethrough$1 = "_aviosCurrencyStrikethrough_1gakm_13";
+const styles = {
+  aviosCurrency: aviosCurrency$1,
+  aviosCurrencyName,
+  aviosCurrencyStrikethrough: aviosCurrencyStrikethrough$1,
+  "aviosCurrency-primary": "_aviosCurrency-primary_1gakm_27",
+  "aviosCurrencyStrikethrough-primary": "_aviosCurrencyStrikethrough-primary_1gakm_31",
+  "aviosCurrency-secondary": "_aviosCurrency-secondary_1gakm_35",
+  "aviosCurrencyStrikethrough-secondary": "_aviosCurrencyStrikethrough-secondary_1gakm_39",
+  "aviosCurrency-white": "_aviosCurrency-white_1gakm_43",
+  "aviosCurrencyStrikethrough-white": "_aviosCurrencyStrikethrough-white_1gakm_47",
+  "aviosCurrency-onSpend": "_aviosCurrency-onSpend_1gakm_51",
+  "aviosCurrencyStrikethrough-onSpend": "_aviosCurrencyStrikethrough-onSpend_1gakm_55",
+  "aviosCurrency-onCollect": "_aviosCurrency-onCollect_1gakm_59",
+  "aviosCurrencyStrikethrough-onCollect": "_aviosCurrencyStrikethrough-onCollect_1gakm_63",
+  "aviosCurrency-accentPrimary": "_aviosCurrency-accentPrimary_1gakm_67",
+  "aviosCurrencyStrikethrough-accentPrimary": "_aviosCurrencyStrikethrough-accentPrimary_1gakm_71",
+  "aviosCurrency-accentSecondary": "_aviosCurrency-accentSecondary_1gakm_75",
+  "aviosCurrencyStrikethrough-accentSecondary": "_aviosCurrencyStrikethrough-accentSecondary_1gakm_79",
+  "aviosCurrency-xl": "_aviosCurrency-xl_1gakm_83",
+  "aviosCurrencyStrikethrough-xl": "_aviosCurrencyStrikethrough-xl_1gakm_95",
+  "aviosCurrency-lg": "_aviosCurrency-lg_1gakm_99",
+  "aviosCurrencyStrikethrough-lg": "_aviosCurrencyStrikethrough-lg_1gakm_111",
+  "aviosCurrency-md": "_aviosCurrency-md_1gakm_115",
+  "aviosCurrencyStrikethrough-md": "_aviosCurrencyStrikethrough-md_1gakm_127",
+  "aviosCurrency-sm": "_aviosCurrency-sm_1gakm_131",
+  "aviosCurrencyStrikethrough-sm": "_aviosCurrencyStrikethrough-sm_1gakm_143",
+  "aviosCurrency-xs": "_aviosCurrency-xs_1gakm_147",
+  "aviosCurrencyStrikethrough-xs": "_aviosCurrencyStrikethrough-xs_1gakm_159",
+  "aviosCurrency-2xs": "_aviosCurrency-2xs_1gakm_163",
+  "aviosCurrencyStrikethrough-2xs": "_aviosCurrencyStrikethrough-2xs_1gakm_175",
+  "aviosCurrency-3xs": "_aviosCurrency-3xs_1gakm_179",
+  "aviosCurrencyStrikethrough-3xs": "_aviosCurrencyStrikethrough-3xs_1gakm_191",
+  "aviosCurrency-4xs": "_aviosCurrency-4xs_1gakm_195",
+  "aviosCurrencyStrikethrough-4xs": "_aviosCurrencyStrikethrough-4xs_1gakm_207",
+  "aviosCurrency-5xs": "_aviosCurrency-5xs_1gakm_211",
+  "aviosCurrencyStrikethrough-5xs": "_aviosCurrencyStrikethrough-5xs_1gakm_223"
+};
+const aviosCurrency = cva(styles.aviosCurrency, {
+  variants: {
+    styleVariant: {
+      primary: styles["aviosCurrency-primary"],
+      secondary: styles["aviosCurrency-secondary"],
+      white: styles["aviosCurrency-white"],
+      onSpend: styles["aviosCurrency-onSpend"],
+      onCollect: styles["aviosCurrency-onCollect"],
+      accentPrimary: styles["aviosCurrency-accentPrimary"],
+      accentSecondary: styles["aviosCurrency-accentSecondary"]
+    },
+    size: {
+      xl: styles["aviosCurrency-xl"],
+      lg: styles["aviosCurrency-lg"],
+      md: styles["aviosCurrency-md"],
+      sm: styles["aviosCurrency-sm"],
+      xs: styles["aviosCurrency-xs"],
+      "2xs": styles["aviosCurrency-2xs"],
+      "3xs": styles["aviosCurrency-3xs"],
+      "4xs": styles["aviosCurrency-4xs"],
+      "5xs": styles["aviosCurrency-5xs"]
+    }
+  },
+  defaultVariants: {
+    styleVariant: "accentSecondary"
+  }
+});
+function getIconSize(size) {
+  switch (size) {
+    case "sm":
+      return "0.75x";
+    case "2xs":
+    case "3xs":
+    case "4xs":
+    case "5xs":
+      return "0.5x";
+    default:
+      return "1x";
+  }
+}
+const aviosCurrencyStrikethrough = cva(styles.aviosCurrencyStrikethrough, {
+  variants: {
+    size: {
+      xl: styles["aviosCurrencyStrikethrough-xl"],
+      lg: styles["aviosCurrencyStrikethrough-lg"],
+      md: styles["aviosCurrencyStrikethrough-md"],
+      sm: styles["aviosCurrencyStrikethrough-sm"],
+      xs: styles["aviosCurrencyStrikethrough-xs"],
+      "2xs": styles["aviosCurrencyStrikethrough-2xs"],
+      "3xs": styles["aviosCurrencyStrikethrough-3xs"],
+      "4xs": styles["aviosCurrencyStrikethrough-4xs"],
+      "5xs": styles["aviosCurrencyStrikethrough-5xs"]
+    },
+    styleVariant: {
+      primary: styles["aviosCurrencyStrikethrough-primary"],
+      secondary: styles["aviosCurrencyStrikethrough-secondary"],
+      white: styles["aviosCurrencyStrikethrough-white"],
+      onSpend: styles["aviosCurrencyStrikethrough-onSpend"],
+      onCollect: styles["aviosCurrencyStrikethrough-onCollect"],
+      accentPrimary: styles["aviosCurrencyStrikethrough-accentPrimary"],
+      accentSecondary: styles["aviosCurrencyStrikethrough-accentSecondary"]
+    }
+  },
+  defaultVariants: {
+    styleVariant: "accentSecondary",
+    size: "xl"
+  }
+});
+const AviosCurrency = ({
+  children,
+  styleVariant = "accentSecondary",
+  kind = "balance",
+  size = "xl",
+  hasCurrencyName = false,
+  decorator,
+  isStrikethrough = false,
+  ...props
+}) => {
+  const {
+    isLink,
+    isDropdown
+  } = useMemo(() => {
+    if (decorator === "link") {
+      return {
+        isLink: true,
+        isDropdown: false
+      };
+    }
+    if (decorator === "dropdown") {
+      return {
+        isLink: false,
+        isDropdown: true
+      };
+    }
+    return {
+      isLink: false,
+      isDropdown: false
+    };
+  }, [decorator]);
+  const iconSize = useMemo(() => getIconSize(size), [size]);
+  return /* @__PURE__ */ jsxs("span", { className: aviosCurrency({
+    styleVariant,
+    size
+  }), children: [
+    isStrikethrough && /* @__PURE__ */ jsx("span", { className: aviosCurrencyStrikethrough({
+      size,
+      styleVariant
+    }) }),
+    /* @__PURE__ */ jsx(AviosCurrencySymbol, { ...props, styleVariant, kind }),
+    /* @__PURE__ */ jsx("span", { children }),
+    isLink && /* @__PURE__ */ jsx(Icon, { iconName: "chevron-right", iconSize }),
+    isDropdown && /* @__PURE__ */ jsx(Icon, { iconName: "angles-up-down", iconSize }),
+    hasCurrencyName && /* @__PURE__ */ jsx("span", { className: styles["aviosCurrencyName"], children: "Avios" })
+  ] });
+};
+export {
+  AviosCurrency,
+  AviosCurrency as default,
+  getIconSize
+};
+//# sourceMappingURL=AviosCurrency.js.map

package/dist/components/AviosCurrency/AviosCurrency.js.map

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

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

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

package/dist/components/AviosCurrency/index.js

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

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

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

package/dist/components/AviosCurrencySymbol/AviosCurrencySymbol.d.ts

@@ -1,4 +1,9 @@
 import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const aviosCurrencySymbol: (props?: ({
+    styleVariant?: "primary" | "secondary" | "accentPrimary" | "accentSecondary" | "white" | "onSpend" | "onCollect" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AviosCurrencySymbolVariants = VariantProps<typeof aviosCurrencySymbol>;
 export type AviosCurrencySymbolKind = 'collect' | 'spend' | 'balance';
 export type AviosCurrencySymbolStyleVariant = 'primary' | 'secondary' | 'white' | 'onSpend' | 'onCollect' | 'accentPrimary' | 'accentSecondary';
 export interface AviosCurrencySymbolProps extends Omit<React.SVGProps<SVGSVGElement>, 'fill' | 'className' | 'style'> {

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -70,7 +70,7 @@ const CalloutBanner = ({
       default:
         return "circle-exclamation";
     }
-  }, [emphasis]);
+  }, [styleVariant]);
   const hasOnDismiss = typeof onDismiss === "function";
   return /* @__PURE__ */ jsxs("div", { className: calloutBanner({
     emphasis,

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -29,13 +29,13 @@ const CreditCardNumberField = ({
     }
     return cardIconProp || "credit-card";
   }, [value, cardIconProp]);
-  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, label, isRequired: true, hasEndIcon: true, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, isRequired: true, hasEndIcon: true, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
     /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "#### #### #### ####", customInput: Input, placeholder: props == null ? void 0 : props.placeholder, allowEmptyFormatting: false, defaultValue, value: valueDefinitive, onValueChange: (values) => {
       if (typeof onChangeControlled === "function") {
         onChangeControlled(values.value);
       }
       setValue(values.value);
-    }, autoComplete: "cc-number" }),
+    }, autoComplete: "cc-number", "aria-label": label }),
     /* @__PURE__ */ jsx(Icon, { iconName: cardIcon, iconPrefix: cardIcon === "credit-card" ? "fas" : "fab", className: styles.iconEnd, iconSize: "1.25x", padding: "roomy" })
   ] }) });
 };

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -22,14 +22,14 @@ const CreditCardSecurityCodeField = ({
 }) => {
   const [value, setValue] = React.useState(defaultValue);
   const valueDefinitive = valueControlled ?? value;
-  return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, label, isRequired: true, ...props, children: [
+  return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, isRequired: true, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
       /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: `${"#".repeat(digits)}`, customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
         if (typeof onChangeControlled === "function") {
           onChangeControlled(values.value);
         }
         setValue(values.value);
-      }, autoComplete: "cc-csc" }),
+      }, autoComplete: "cc-csc", "aria-label": label }),
       /* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
     ] }),
     (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })

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

@@ -23,6 +23,11 @@ export interface DialogProps extends AriaDialogProps {
      * Shows/hides the close (X) button in header
      */
     hasDismissButton?: boolean;
+    /**
+     * Text for the close button's tooltip and aria-label
+     * @default "Close dialog"
+     */
+    dismissButtonLabel?: string;
     /**
      * ARIA role - use 'alertdialog' for important messages
      */

package/dist/components/Dialog/Dialog.js

@@ -45,6 +45,7 @@ function DialogWrapper({
     size = "medium",
     modal = false,
     hasDismissButton = true,
+    dismissButtonLabel = "Close dialog",
     role = "dialog",
     id
   } = props;
@@ -74,11 +75,7 @@ function DialogWrapper({
   const headerId = props["aria-labelledby"] || `${id}-header`;
   const contentId = props["aria-describedby"] || `${id}-content`;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
-    modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === "Space") {
-        onClose == null ? void 0 : onClose();
-      }
-    }, role: "button", tabIndex: 0 }),
+    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: `${styles.dialog} ${styles[size]}`, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
       /* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
         hasHeader && /* @__PURE__ */ jsx("div", { className: styles.dialogHeader, id: headerId, children: headerChild }),
@@ -88,7 +85,7 @@ function DialogWrapper({
         iconName: "close",
         iconPrefix: "far",
         iconSize: "1x"
-      }, tooltipLabel: "Close dialog", "aria-label": "Close dialog" }) })
+      }, tooltipLabel: dismissButtonLabel, "aria-label": dismissButtonLabel }) })
     ] }) })
   ] });
 }

package/dist/components/Dialog/Dialog.js.map

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

package/dist/components/Menu/Menu.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useId, useState, useRef, useEffect } from "react";
+import { useId, useRef, useEffect, useState } from "react";
 import { Button } from "../Button/Button.js";
 import { Popover } from "../Popover/Popover.js";
 import '../../assets/Menu.css';const menuContainer = "_menuContainer_qw7ps_1";
@@ -15,65 +15,10 @@ const menuRegistry = {
   },
   getActiveMenu: () => menuRegistry.activeMenuId
 };
-const Menu = ({
-  label,
-  "aria-label": ariaLabel,
-  isDisabled = false,
-  placement = "bottom start",
-  buttonEmphasis = "tertiary",
-  buttonStyleVariant = "neutral",
-  buttonOpenVariant = buttonStyleVariant,
-  alignToElementId,
-  shouldFlip = false,
-  openOnHoverAndFocus = false,
-  allowTabOut = true,
-  children,
-  iconStartProps,
-  iconEndProps
-}) => {
-  const uniqueId = useId();
-  const menuId = `menu-${uniqueId}`;
+const useMenuState = (menuId) => {
   const [isOpen, setIsOpen] = useState(false);
   const [preventFocusOpen, setPreventFocusOpen] = useState(false);
   const [openedViaKeyboard, setOpenedViaKeyboard] = useState(false);
-  const buttonRef = useRef(null);
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const currentStyleVariant = isOpen ? buttonOpenVariant : buttonStyleVariant;
-  const getAlignmentTarget = () => {
-    if (alignToElementId) {
-      const targetElement = document.getElementById(alignToElementId);
-      if (targetElement) {
-        return {
-          current: targetElement
-        };
-      }
-    }
-    return buttonRef;
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape" && isOpen) {
-      e.preventDefault();
-      menuRegistry.setActiveMenu(null);
-      setIsOpen(false);
-      setPreventFocusOpen(true);
-      setTimeout(() => {
-        setPreventFocusOpen(false);
-      }, 300);
-    } else if (e.key === "ArrowDown" && !isOpen) {
-      e.preventDefault();
-      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-        document.dispatchEvent(new CustomEvent("menu:closeAll", {
-          detail: {
-            exceptMenuId: menuId
-          }
-        }));
-      }
-      menuRegistry.setActiveMenu(menuId);
-      setIsOpen(true);
-      setOpenedViaKeyboard(true);
-    }
-  };
   const closeMenu = () => {
     menuRegistry.setActiveMenu(null);
     setIsOpen(false);
@@ -82,80 +27,60 @@ const Menu = ({
       setPreventFocusOpen(false);
     }, 300);
   };
+  const openMenu = (viaKeyboard = false) => {
+    if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
+      document.dispatchEvent(new CustomEvent("menu:closeAll", {
+        detail: {
+          exceptMenuId: menuId
+        }
+      }));
+    }
+    menuRegistry.setActiveMenu(menuId);
+    setIsOpen(true);
+    setOpenedViaKeyboard(viaKeyboard);
+  };
   const toggleMenu = () => {
-    const isKeyboardFocused = document.activeElement === buttonRef.current;
-    setOpenedViaKeyboard(isKeyboardFocused);
-    if (isDisabled) return;
-    if (!isOpen) {
-      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-        document.dispatchEvent(new CustomEvent("menu:closeAll", {
-          detail: {
-            exceptMenuId: menuId
-          }
-        }));
-      }
-      menuRegistry.setActiveMenu(menuId);
-      setIsOpen(true);
+    var _a;
+    if (isOpen) {
+      closeMenu();
     } else {
-      menuRegistry.setActiveMenu(null);
-      setIsOpen(false);
+      const isKeyboardFocused = ((_a = document.activeElement) == null ? void 0 : _a.tagName) === "BUTTON";
+      openMenu(isKeyboardFocused);
     }
   };
-  useEffect(() => {
-    const handleCloseAll = (e) => {
-      const {
-        exceptMenuId
-      } = e.detail || {};
-      if (exceptMenuId && exceptMenuId === menuId) {
-        return;
-      }
-      if (isOpen) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("menu:closeAll", handleCloseAll);
-    return () => {
-      document.removeEventListener("menu:closeAll", handleCloseAll);
-    };
-  }, [menuId, isOpen]);
-  useEffect(() => {
-    const isActive = menuRegistry.getActiveMenu() === menuId;
-    if (isActive !== isOpen) {
-      setIsOpen(isActive);
-    }
-  }, [menuId, isOpen]);
+  return {
+    isOpen,
+    setIsOpen,
+    preventFocusOpen,
+    setPreventFocusOpen,
+    openedViaKeyboard,
+    setOpenedViaKeyboard,
+    closeMenu,
+    openMenu,
+    toggleMenu
+  };
+};
+const useMenuNavigation = (menuRef, allowTabOut, closeMenu, buttonRef) => {
   const findNextFocusableElement = (startElement) => {
     const focusableElements = Array.from(document.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'));
     const startIndex = focusableElements.indexOf(startElement);
     return startIndex !== -1 && startIndex < focusableElements.length - 1 ? focusableElements[startIndex + 1] : focusableElements[0];
   };
-  const handleMenuKeyDown = (e) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
+  const handleTabNavigation = () => {
+    const triggerElement = buttonRef.current;
+    if (triggerElement) {
+      const nextElement = findNextFocusableElement(triggerElement);
+      closeMenu();
+      setTimeout(() => {
+        if (nextElement) {
+          nextElement.focus();
+        }
+      }, 10);
+    } else {
       closeMenu();
-      if (buttonRef.current) {
-        buttonRef.current.focus();
-      }
-      return;
-    }
-    if (e.key === "Tab" && allowTabOut) {
-      e.preventDefault();
-      const triggerElement = buttonRef.current;
-      if (triggerElement) {
-        const nextElement = findNextFocusableElement(triggerElement);
-        closeMenu();
-        setTimeout(() => {
-          if (nextElement) {
-            nextElement.focus();
-          }
-        }, 10);
-      } else {
-        closeMenu();
-      }
-      return;
     }
-    if (!menuRef.current) return;
-    const focusableElements = Array.from(menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
+  };
+  const handleArrowNavigation = (e, focusableElements) => {
     if (focusableElements.length === 0) return;
     const focusedElement = document.activeElement;
     const currentIndex = focusableElements.indexOf(focusedElement);
@@ -173,16 +98,43 @@ const Menu = ({
       focusableElements[focusableElements.length - 1].focus();
     }
   };
-  useEffect(() => {
-    if (isOpen && openedViaKeyboard && menuRef.current) {
-      const focusableElements = menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
-      if (focusableElements.length > 0) {
-        setTimeout(() => {
-          focusableElements[0].focus();
-        }, 50);
+  const handleMenuKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeMenu();
+      if (buttonRef.current) {
+        buttonRef.current.focus();
       }
+      return;
     }
-  }, [isOpen, openedViaKeyboard]);
+    if (e.key === "Tab" && allowTabOut) {
+      e.preventDefault();
+      handleTabNavigation();
+      return;
+    }
+    if (!menuRef.current) return;
+    const focusableElements = Array.from(menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'));
+    handleArrowNavigation(e, focusableElements);
+  };
+  return {
+    handleMenuKeyDown
+  };
+};
+const useHoverAndFocus = (config, refs, actions) => {
+  const {
+    openOnHoverAndFocus,
+    isDisabled,
+    preventFocusOpen,
+    menuId
+  } = config;
+  const {
+    buttonRef,
+    containerRef
+  } = refs;
+  const {
+    openMenu,
+    closeMenu
+  } = actions;
   useEffect(() => {
     if (!openOnHoverAndFocus || isDisabled) return;
     let hoverTimeout = null;
@@ -191,16 +143,7 @@ const Menu = ({
         clearTimeout(hoverTimeout);
       }
       hoverTimeout = setTimeout(() => {
-        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-          document.dispatchEvent(new CustomEvent("menu:closeAll", {
-            detail: {
-              exceptMenuId: menuId
-            }
-          }));
-        }
-        setOpenedViaKeyboard(false);
-        menuRegistry.setActiveMenu(menuId);
-        setIsOpen(true);
+        openMenu(false);
       }, 300);
     };
     const handleMouseLeave = () => {
@@ -209,9 +152,8 @@ const Menu = ({
       }
       hoverTimeout = setTimeout(() => {
         if (menuRegistry.getActiveMenu() === menuId) {
-          menuRegistry.setActiveMenu(null);
+          closeMenu();
         }
-        setIsOpen(false);
       }, 300);
     };
     const buttonElement = buttonRef.current;
@@ -242,18 +184,9 @@ const Menu = ({
       }
       isMenuOpening = true;
       focusTimeout = setTimeout(() => {
-        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-          document.dispatchEvent(new CustomEvent("menu:closeAll", {
-            detail: {
-              exceptMenuId: menuId
-            }
-          }));
-        }
         const activeElement = document.activeElement;
         const wasFocusedByKeyboard = activeElement === buttonElement && document.activeElement !== document.body;
-        setOpenedViaKeyboard(wasFocusedByKeyboard);
-        menuRegistry.setActiveMenu(menuId);
-        setIsOpen(true);
+        openMenu(wasFocusedByKeyboard);
         setTimeout(() => {
           isMenuOpening = false;
         }, 500);
@@ -269,9 +202,8 @@ const Menu = ({
       if (containerElement && !containerElement.contains(relatedTarget)) {
         focusTimeout = setTimeout(() => {
           if (menuRegistry.getActiveMenu() === menuId) {
-            menuRegistry.setActiveMenu(null);
+            closeMenu();
           }
-          setIsOpen(false);
         }, 200);
       }
     };
@@ -285,67 +217,153 @@ const Menu = ({
       }
     };
   }, [openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId]);
+};
+const Menu = ({
+  label,
+  "aria-label": ariaLabel,
+  isDisabled = false,
+  placement = "bottom start",
+  buttonEmphasis = "tertiary",
+  buttonStyleVariant = "neutral",
+  buttonOpenVariant = buttonStyleVariant,
+  alignToElementId,
+  shouldFlip = false,
+  openOnHoverAndFocus = false,
+  allowTabOut = true,
+  children,
+  iconStartProps,
+  iconEndProps
+}) => {
+  const uniqueId = useId();
+  const menuId = `menu-${uniqueId}`;
+  const buttonRef = useRef(null);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+  const {
+    isOpen,
+    setIsOpen,
+    preventFocusOpen,
+    setPreventFocusOpen,
+    openedViaKeyboard,
+    setOpenedViaKeyboard,
+    closeMenu,
+    openMenu,
+    toggleMenu
+  } = useMenuState(menuId);
+  const {
+    handleMenuKeyDown
+  } = useMenuNavigation(menuRef, allowTabOut, closeMenu, buttonRef);
+  useHoverAndFocus({
+    openOnHoverAndFocus,
+    isDisabled,
+    preventFocusOpen,
+    menuId
+  }, {
+    buttonRef,
+    containerRef
+  }, {
+    openMenu,
+    closeMenu
+  });
+  const currentStyleVariant = isOpen ? buttonOpenVariant : buttonStyleVariant;
+  const getAlignmentTarget = () => {
+    if (alignToElementId) {
+      const targetElement = document.getElementById(alignToElementId);
+      if (targetElement) {
+        return {
+          current: targetElement
+        };
+      }
+    }
+    return buttonRef;
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && isOpen) {
+      e.preventDefault();
+      closeMenu();
+      setPreventFocusOpen(true);
+      setTimeout(() => {
+        setPreventFocusOpen(false);
+      }, 300);
+    } else if (e.key === "ArrowDown" && !isOpen) {
+      e.preventDefault();
+      openMenu(true);
+    }
+  };
+  useEffect(() => {
+    const handleCloseAll = (e) => {
+      const {
+        exceptMenuId
+      } = e.detail || {};
+      if (exceptMenuId && exceptMenuId === menuId) {
+        return;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("menu:closeAll", handleCloseAll);
+    return () => {
+      document.removeEventListener("menu:closeAll", handleCloseAll);
+    };
+  }, [menuId, isOpen, setIsOpen]);
+  useEffect(() => {
+    const isActive = menuRegistry.getActiveMenu() === menuId;
+    if (isActive !== isOpen) {
+      setIsOpen(isActive);
+    }
+  }, [menuId, isOpen, setIsOpen]);
+  useEffect(() => {
+    if (isOpen && openedViaKeyboard && menuRef.current) {
+      const focusableElements = menuRef.current.querySelectorAll('[role="menuitem"], a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+      if (focusableElements.length > 0) {
+        setTimeout(() => {
+          focusableElements[0].focus();
+        }, 50);
+      }
+    }
+  }, [isOpen, openedViaKeyboard]);
   useEffect(() => {
     if (!isOpen) return;
     const handleOutsideClick = (e) => {
       const container = containerRef.current;
       if (container && !container.contains(e.target)) {
         if (menuRegistry.getActiveMenu() === menuId) {
-          menuRegistry.setActiveMenu(null);
+          closeMenu();
         }
-        setIsOpen(false);
       }
     };
     document.addEventListener("mousedown", handleOutsideClick);
     return () => {
       document.removeEventListener("mousedown", handleOutsideClick);
     };
-  }, [isOpen, menuId]);
+  }, [isOpen, menuId, closeMenu]);
   useEffect(() => {
     if (!isOpen) {
       setOpenedViaKeyboard(false);
     }
-  }, [isOpen]);
+  }, [isOpen, setOpenedViaKeyboard]);
   const menuTriggerState = {
     isOpen,
-    open: () => {
-      if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-        document.dispatchEvent(new CustomEvent("menu:closeAll", {
-          detail: {
-            exceptMenuId: menuId
-          }
-        }));
-      }
-      menuRegistry.setActiveMenu(menuId);
-      setIsOpen(true);
-    },
-    close: closeMenu,
+    open: () => openMenu(),
+    close: () => closeMenu(),
     toggle: () => toggleMenu(),
-    setOpen: (open) => {
-      if (open) {
-        if (menuRegistry.getActiveMenu() && menuRegistry.getActiveMenu() !== menuId) {
-          document.dispatchEvent(new CustomEvent("menu:closeAll", {
-            detail: {
-              exceptMenuId: menuId
-            }
-          }));
-        }
-        menuRegistry.setActiveMenu(menuId);
-      } else {
-        if (menuRegistry.getActiveMenu() === menuId) {
-          menuRegistry.setActiveMenu(null);
-        }
-      }
-      setIsOpen(open);
-    }
+    setOpen: /* @__PURE__ */ (() => {
+      const actionMap = /* @__PURE__ */ new Map([[true, openMenu], [false, closeMenu]]);
+      return (open) => {
+        var _a;
+        return (_a = actionMap.get(open)) == null ? void 0 : _a();
+      };
+    })()
+  };
+  const handleButtonPress = () => {
+    setPreventFocusOpen(false);
+    const isKeyboardFocused = document.activeElement === buttonRef.current;
+    setOpenedViaKeyboard(isKeyboardFocused);
+    toggleMenu();
   };
   return /* @__PURE__ */ jsxs("div", { className: styles.menuContainer, ref: containerRef, children: [
-    /* @__PURE__ */ jsx(Button, { ref: buttonRef, emphasis: buttonEmphasis, styleVariant: currentStyleVariant, isDisabled, onPress: () => {
-      setPreventFocusOpen(false);
-      const isKeyboardFocused = document.activeElement === buttonRef.current;
-      setOpenedViaKeyboard(isKeyboardFocused);
-      toggleMenu();
-    }, onKeyDown: handleKeyDown, "aria-haspopup": "true", "aria-expanded": isOpen, iconStartProps, iconEndProps, children: label }),
+    /* @__PURE__ */ jsx(Button, { ref: buttonRef, emphasis: buttonEmphasis, styleVariant: currentStyleVariant, isDisabled, onPress: handleButtonPress, onKeyDown: handleKeyDown, "aria-haspopup": "true", "aria-expanded": isOpen, iconStartProps, iconEndProps, children: label }),
     isOpen && /* @__PURE__ */ jsx(Popover, { state: menuTriggerState, triggerRef: getAlignmentTarget(), hasArrow: false, placement, shouldFlip, isNonModal: true, allowTabOut, autoFocus: openedViaKeyboard, children: /* @__PURE__ */ jsx("div", { className: styles.menuContent, ref: menuRef, onKeyDown: handleMenuKeyDown, role: "menu", "aria-label": ariaLabel || label, tabIndex: -1, children }) })
   ] });
 };

package/dist/components/Menu/Menu.js.map

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

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -75,7 +75,7 @@ const PhoneNumberField = ({
   };
   const countryOptions = getCountryOptions(options, countryCodes);
   const defaultValue = countryOptions.find((opt) => opt.value === defaultCountry);
-  return /* @__PURE__ */ jsx(Field, { as: TextField, label, labelFor: id, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
+  return /* @__PURE__ */ jsx(Field, { as: TextField, label, labelFor: id, hasEndIcon: false, hasStartIcon: false, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.phoneNumberField, children: [
     hasCountrySelect && /* @__PURE__ */ jsxs("div", { className: styles.selectWrapper, children: [
       /* @__PURE__ */ jsx("select", { className: styles.selectInput, ...countryCodeControlled ? {
         value: countryCodeDefinitive

package/dist/components/Slider/Slider.js

@@ -38,7 +38,11 @@ const CustomThumb = ({
   const isTooltipVisible = showTooltip && (isDragging || isFocused);
   const thumbRef = useRef(null);
   const value = state.values[index];
-  const thumbLabel = isRange ? `${index === 0 ? "Minimum" : "Maximum"} value for ${label}` : label;
+  let thumbLabel = label;
+  if (isRange) {
+    const thumbType = index === 0 ? "Minimum" : "Maximum";
+    thumbLabel = `${thumbType} value for ${label}`;
+  }
   const valueDescription = `${formatValue(value)} out of range ${formatValue(minValue)} to ${formatValue(maxValue)}`;
   return /* @__PURE__ */ jsxs("div", { className: styles.thumbContainer, style: {
     left: `${state.getThumbPercent(index) * 100}%`

package/dist/components/Slider/Slider.js.map

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

package/dist/components/Spacer/Spacer.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const spacerVariants: (props?: ({
-    w?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | null | undefined;
-    h?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | null | undefined;
+    w?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
+    h?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SpacerVariants = VariantProps<typeof spacerVariants>;

package/dist/components/_base/Field/Field.d.ts

@@ -19,6 +19,10 @@ export interface FieldCommonProps extends FieldHeaderProps {
      * @default 'top'
      */
     errorPlacement?: 'top' | 'bottom';
+    /**
+     * The label of the field. Required for accessibility compliance
+     */
+    label?: string;
 }
 export type FieldProps<T extends object = object> = T & FieldCommonProps;
 type FieldBaseProps<T extends object> = FieldProps<T> & Pick<FieldVariants, 'hasEndIcon' | 'hasStartIcon'> & {

package/dist/components/_base/Field/Field.js

@@ -30,6 +30,11 @@ function Field({
   errorPlacement = "top",
   ...props
 }) {
+  React.useEffect(() => {
+    if ((props == null ? void 0 : props.label) === void 0) {
+      console.warn("@alto/ui: Field expects a label prop for accessibility compliance");
+    }
+  }, [props == null ? void 0 : props.label]);
   return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, isRequired: props == null ? void 0 : props.isRequired, ...props, children: [
     (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor, errorMessage: errorPlacement === "top" ? props == null ? void 0 : props.errorMessage : void 0 }) : null,
     /* @__PURE__ */ jsx("div", { className: styles.fieldGrid, children: /* @__PURE__ */ jsx("div", { className: fieldVariants({

package/dist/components/_base/Field/Field.js.map

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

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Accordion, AccordionGroup } from './Accordion';
 export type * from './Accordion';
+export { default as AviosCurrency } from './AviosCurrency';
+export type * from './AviosCurrency';
 export { default as AviosBadge } from './AviosBadge';
 export type * from './AviosBadge';
 export { default as AviosCurrencySymbol } from './AviosCurrencySymbol';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 import '../assets/global.css';/* empty css                 */
 import { Accordion, AccordionGroup } from "./Accordion/Accordion.js";
+import { AviosCurrency } from "./AviosCurrency/AviosCurrency.js";
 import { AviosBadge } from "./AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./AviosCurrencySymbol/AviosCurrencySymbol.js";
 import { Badge } from "./Badge/Badge.js";
@@ -65,6 +66,7 @@ export {
   Accordion,
   AccordionGroup,
   AviosBadge,
+  AviosCurrency,
   AviosCurrencySymbol,
   Badge,
   Box,

package/dist/components/index.js.map

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

package/dist/index.js

@@ -1,5 +1,6 @@
 import './assets/global.css';/* empty css                */
 import { Accordion, AccordionGroup } from "./components/Accordion/Accordion.js";
+import { AviosCurrency } from "./components/AviosCurrency/AviosCurrency.js";
 import { AviosBadge } from "./components/AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./components/AviosCurrencySymbol/AviosCurrencySymbol.js";
 import { Badge } from "./components/Badge/Badge.js";
@@ -65,6 +66,7 @@ export {
   Accordion,
   AccordionGroup,
   AviosBadge,
+  AviosCurrency,
   AviosCurrencySymbol,
   Badge,
   Box,

package/dist/index.js.map

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

package/dist/utils/border/border.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputType } from 'storybook/internal/types';
 export declare const borderVariants: (props?: ({
-    borderRadius?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "circle" | "md" | "5xs" | "4xs" | "3xs" | "6xs" | "card" | null | undefined;
+    borderRadius?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "circle" | "md" | "3xs" | "4xs" | "5xs" | "6xs" | "card" | null | undefined;
     borderWidth?: "none" | "lg" | "sm" | "xs" | "xl" | "md" | null | undefined;
     borderStyle?: "none" | "solid" | "dashed" | null | undefined;
     borderColour?: "secondary" | "none" | "white" | "critical" | "warning" | "caution" | "success" | "tertiary" | "accent" | "information" | "inverse" | null | undefined;

package/dist/utils/flex/flex.d.ts

@@ -10,8 +10,8 @@ export declare const flexVariants: (props?: ({
     alignSelf?: "center" | "end" | "auto" | "baseline" | "inherit" | "initial" | "start" | "flexStart" | "flexEnd" | "stretch" | "selfStart" | "selfEnd" | "normal" | "revert" | "revertLayer" | "unset" | null | undefined;
     alignContent?: "center" | "end" | "baseline" | "inherit" | "initial" | "start" | "flexStart" | "flexEnd" | "stretch" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "normal" | "revert" | "revertLayer" | "unset" | "firstBaseline" | "lastBaseline" | "safeCenter" | "unsafeCenter" | null | undefined;
     flexBasis?: "inherit" | "initial" | "content" | "revert" | "revertLayer" | "unset" | "maxContent" | "minContent" | "fitContent" | null | undefined;
-    gap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    rowGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    columnGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    gap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    rowGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    columnGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type FlexVariants = VariantProps<typeof flexVariants>;

package/dist/utils/padding/padding.d.ts

@@ -1,13 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputType } from 'storybook/internal/types';
 export declare const paddingVariants: (props?: ({
-    padding?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingX?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingY?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingTop?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingRight?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingBottom?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
-    paddingLeft?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    padding?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingX?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingY?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingTop?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingRight?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingBottom?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingLeft?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type PaddingVariants = VariantProps<typeof paddingVariants>;
 export declare const paddingArgTypes: Record<string, InputType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",
@@ -44,24 +44,23 @@
     "use-breakpoint": "^4.0.6"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^4.0.0",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
     "@commitlint/cz-commitlint": "^19.5.0",
     "@eslint/js": "^9.14.0",
-    "@storybook/addon-a11y": "^8.4.4",
-    "@storybook/addon-actions": "^8.4.4",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-onboarding": "^8.4.4",
-    "@storybook/addon-themes": "^8.4.4",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/react": "^8.4.4",
-    "@storybook/react-webpack5": "^8.4.4",
-    "@storybook/test": "^8.4.4",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/addon-a11y": "^9.0.12",
+    "@storybook/addon-docs": "^9.0.12",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/addon-themes": "^9.0.12",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/cli": "^9.0.12",
+    "@storybook/react": "^9.0.0",
+    "@storybook/react-webpack5": "^9.0.0",
+    "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
@@ -95,7 +94,6 @@
     "react-remove-attr": "^0.0.6",
     "rimraf": "^6.0.1",
     "standard-version": "^9.5.0",
-    "storybook": "^8.4.4",
     "terser": "^5.31.3",
     "ts-jest": "^29.2.5",
     "tslib": "^2.6.2",