@alto-avios/alto-ui 4.0.0 → 4.2.0

package/dist/components/Currency/Currency.js

@@ -0,0 +1,110 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as cva } from "../../index-DdUYounA.js";
+import '../../assets/Currency.css';const currency$1 = "_currency_1w262_1";
+const styles = {
+  currency: currency$1,
+  "currency-strikethrough": "_currency-strikethrough_1w262_11",
+  "currency-primary": "_currency-primary_1w262_23",
+  "currency-secondary": "_currency-secondary_1w262_27",
+  "currency-white": "_currency-white_1w262_31",
+  "currency-onSpend": "_currency-onSpend_1w262_35",
+  "currency-onCollect": "_currency-onCollect_1w262_39",
+  "currency-accentPrimary": "_currency-accentPrimary_1w262_43",
+  "currency-accentSecondary": "_currency-accentSecondary_1w262_47",
+  "currency-xl": "_currency-xl_1w262_51",
+  "currency-lg": "_currency-lg_1w262_58",
+  "currency-md": "_currency-md_1w262_65",
+  "currency-sm": "_currency-sm_1w262_72",
+  "currency-xs": "_currency-xs_1w262_79",
+  "currency-2xs": "_currency-2xs_1w262_86",
+  "currency-3xs": "_currency-3xs_1w262_93",
+  "currency-4xs": "_currency-4xs_1w262_100",
+  "currency-5xs": "_currency-5xs_1w262_107"
+};
+const currency = cva(styles.currency, {
+  variants: {
+    styleVariant: {
+      primary: styles["currency-primary"],
+      secondary: styles["currency-secondary"],
+      white: styles["currency-white"],
+      onSpend: styles["currency-onSpend"],
+      onCollect: styles["currency-onCollect"],
+      accentPrimary: styles["currency-accentPrimary"],
+      accentSecondary: styles["currency-accentSecondary"]
+    },
+    size: {
+      ["5xs"]: styles["currency-5xs"],
+      ["4xs"]: styles["currency-4xs"],
+      ["3xs"]: styles["currency-3xs"],
+      ["2xs"]: styles["currency-2xs"],
+      xs: styles["currency-xs"],
+      sm: styles["currency-sm"],
+      md: styles["currency-md"],
+      lg: styles["currency-lg"],
+      xl: styles["currency-xl"]
+    },
+    isStrikethrough: {
+      true: styles["currency-strikethrough"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    styleVariant: "accentSecondary"
+  }
+});
+const Currency = ({
+  children,
+  locale = "en-GB",
+  symbol,
+  size = "md",
+  styleVariant,
+  isStrikethrough = false,
+  formatOptions = {
+    style: "currency",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  },
+  formatter
+}) => {
+  const text = useMemo(() => {
+    if (children == null) {
+      return "";
+    }
+    if (formatter) {
+      return formatter(children);
+    }
+    const {
+      style,
+      currency: currency2 = "GBP",
+      ...options
+    } = formatOptions;
+    const opts = {
+      style: style || "decimal",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+      ...options
+    };
+    if (opts.style === "currency") {
+      opts.currency = currency2 || "GBP";
+    }
+    const nf = new Intl.NumberFormat(locale, opts);
+    let formatted = nf.format(children);
+    if (opts.style === "decimal") {
+      formatted = symbol + formatted;
+    }
+    return formatted;
+  }, [children, locale, symbol, formatOptions, formatter]);
+  return /* @__PURE__ */ jsx("span", { className: currency({
+    styleVariant,
+    size,
+    isStrikethrough
+  }), ...isStrikethrough ? {
+    role: "deletion"
+  } : {}, children: text });
+};
+export {
+  Currency,
+  Currency as default
+};
+//# sourceMappingURL=Currency.js.map

package/dist/components/Currency/Currency.js.map

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

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

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

package/dist/components/Currency/index.js

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

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

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

package/dist/components/DetailsDisclosure/DetailsDisclosure.d.ts

@@ -18,10 +18,19 @@ export interface DetailsDisclosureProps extends AriaDisclosureProps {
      */
     children?: React.ReactNode;
 }
+export interface DetailsDisclosureSummaryProps {
+    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';
+}
 declare const DetailsDisclosure: {
     ({ children, ...props }: DetailsDisclosureProps): import("react/jsx-runtime").JSX.Element;
     Summary: {
-        ({ children, }: Pick<DetailsDisclosureProps, "children">): import("react/jsx-runtime").JSX.Element;
+        ({ children, headingLevel, }: DetailsDisclosureSummaryProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Details: {
@@ -29,4 +38,5 @@ declare const DetailsDisclosure: {
         displayName: string;
     };
 };
+export { DetailsDisclosure };
 export default DetailsDisclosure;

package/dist/components/DetailsDisclosure/DetailsDisclosure.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Disclosure, Button, DisclosurePanel } from "react-aria-components";
+import { Disclosure, DisclosurePanel, Button } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "_detailsDisclosure_9jcud_1";
 const detailsDisclosureIcon = "_detailsDisclosureIcon_9jcud_8";
@@ -10,12 +10,18 @@ const styles = {
   detailsDisclosureDetails
 };
 const DetailsDisclosureSummary = ({
-  children
+  children,
+  headingLevel
 }) => {
-  return /* @__PURE__ */ jsxs(Button, { slot: "trigger", children: [
-    /* @__PURE__ */ jsx(Icon, { className: styles["detailsDisclosureIcon"], iconName: "caret-right", iconPrefix: "fas", ariaLabel: "Open disclosure" }),
+  const buttonElement = /* @__PURE__ */ jsxs(Button, { slot: "trigger", children: [
+    /* @__PURE__ */ jsx(Icon, { className: styles["detailsDisclosureIcon"], iconName: "caret-right", iconPrefix: "fas", ariaLabel: "Toggle disclosure" }),
     children
   ] });
+  if (headingLevel) {
+    const HeadingTag = `${headingLevel}`;
+    return /* @__PURE__ */ jsx(HeadingTag, { children: buttonElement });
+  }
+  return buttonElement;
 };
 DetailsDisclosureSummary.displayName = "DetailsDisclosure.Summary";
 const DetailsDisclosureDetails = ({
@@ -34,6 +40,7 @@ const DetailsDisclosure = ({
 DetailsDisclosure.Summary = DetailsDisclosureSummary;
 DetailsDisclosure.Details = DetailsDisclosureDetails;
 export {
+  DetailsDisclosure,
   DetailsDisclosure as default
 };
 //# sourceMappingURL=DetailsDisclosure.js.map

package/dist/components/DetailsDisclosure/DetailsDisclosure.js.map

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

package/dist/components/DetailsDisclosure/index.js

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

package/dist/components/ErrorSummary/ErrorSummary.d.ts

@@ -1,7 +1,10 @@
 import { CalloutBannerProps } from '../CalloutBanner/CalloutBanner';
 import { default as React } from 'react';
-export interface ErrorSummaryProps extends Pick<CalloutBannerProps, 'title' | 'description'> {
+export interface ErrorSummaryProps extends Omit<CalloutBannerProps, 'emphasis' | 'styleVariant' | 'iconProps' | 'dismissButtonProps' | 'onDismiss' | 'hideIllustration' | 'dismissButtonTooltipLabel' | 'customAsset' | 'label' | 'alignButtons'> {
+    /**
+     * One or more error messages to display in the summary
+     */
     children: React.ReactElement[] | React.ReactElement;
 }
-export declare const ErrorSummary: ({ title, description, children, }: ErrorSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ErrorSummary: ({ title, description, children, ...props }: ErrorSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ErrorSummary;

package/dist/components/ErrorSummary/ErrorSummary.js

@@ -4,13 +4,14 @@ import React__default, { useState } from "react";
 import Link from "../Link/Link.js";
 import { Box } from "../Box/Box.js";
 import '../../assets/ErrorSummary.css';const styles = {
-  "errorSummary-list": "_errorSummary-list_yt1ru_1"
+  "errorSummary-list": "_errorSummary-list_1xa84_1"
 };
 const MAX_ERRORS_SHOW = 4;
 const ErrorSummary = ({
   title,
   description,
-  children
+  children,
+  ...props
 }) => {
   const [showAllErrors, setShowAllErrors] = useState(false);
   if (!children || Array.isArray(children) && children.length === 0) {
@@ -18,15 +19,12 @@ const ErrorSummary = ({
   }
   const errorsToRender = showAllErrors ? children : Array.isArray(children) ? children.slice(0, MAX_ERRORS_SHOW) : [children];
   const hasMoreErrors = Array.isArray(children) && children.length > MAX_ERRORS_SHOW;
-  return /* @__PURE__ */ jsx(CalloutBanner, { title, description, children: /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx("div", { className: styles["errorSummary-list"], children: React__default.Children.map(errorsToRender, (child, index) => {
-      if (React__default.isValidElement(child)) {
-        return React__default.cloneElement(child, {
-          key: `error-${index}`,
-          iconEndProps: false
-        });
-      }
-      return child;
+  return /* @__PURE__ */ jsx(CalloutBanner, { title, description, ...props, children: /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx("ul", { className: styles["errorSummary-list"], children: React__default.Children.map(errorsToRender, (child, index) => {
+      const content = React__default.isValidElement(child) ? React__default.cloneElement(child, {
+        iconEndProps: false
+      }) : child;
+      return /* @__PURE__ */ jsx("li", { className: styles["errorSummary-item"], children: content }, `error-${index}`);
     }) }),
     hasMoreErrors && !showAllErrors && /* @__PURE__ */ jsx(Link, { onPress: () => setShowAllErrors(true), underline: true, size: "sm", iconEndProps: {
       iconName: "chevron-down"

package/dist/components/ErrorSummary/ErrorSummary.js.map

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

package/dist/components/FieldError/FieldError.js

@@ -11,8 +11,8 @@ const FieldError = ({
   ...props
 }) => {
   if (children && isInvalidProp) {
-    return /* @__PURE__ */ jsxs("div", { className: styles.fieldError, children: [
-      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-label": "error-icon" }),
+    return /* @__PURE__ */ jsxs("div", { id: props.id, className: styles.fieldError, role: "alert", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas" }),
       children
     ] });
   }

package/dist/components/FieldHeader/FieldHeader.d.ts

@@ -6,7 +6,9 @@ export interface FieldHeaderProps {
     isInvalid?: boolean;
     isRequired?: boolean;
     labelFor?: string;
+    descriptionId?: string;
+    errorId?: string;
     optionalTranslation?: string;
 }
-export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldHeader: ({ label, description, isInvalid, isRequired, errorMessage, labelFor, descriptionId, errorId, optionalTranslation, }: FieldHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldHeader;

package/dist/components/FieldHeader/FieldHeader.js

@@ -14,6 +14,8 @@ const FieldHeader = ({
   isRequired,
   errorMessage,
   labelFor,
+  descriptionId,
+  errorId,
   optionalTranslation = "Optional"
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
@@ -21,8 +23,8 @@ const FieldHeader = ({
       label,
       !isRequired && ` (${optionalTranslation})`
     ] }) }),
-    description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-    /* @__PURE__ */ jsx(FieldError, { isInvalid, children: errorMessage })
+    description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }),
+    /* @__PURE__ */ jsx(FieldError, { isInvalid, id: errorId, children: errorMessage })
   ] });
 };
 export {

package/dist/components/FieldHeader/FieldHeader.js.map

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

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { FieldProps } from '../_base/Field';
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+type PasswordStrengthStatus = 'valid' | 'neutral' | 'invalid';
 export type PasswordStrengthValidation = {
     message: string;
     validation: (value?: string) => boolean;
@@ -30,6 +31,19 @@ export interface PasswordFieldProps extends Omit<FieldProps<AriaTextFieldProps>,
      * Placeholder for the password input.
      */
     placeholder?: string;
+    /**
+     * Screen reader text for each status, used for localization
+     */
+    screenReaderStrengthLabels?: Partial<Record<PasswordStrengthStatus, string>>;
 }
 export declare const PasswordField: React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<HTMLInputElement>>;
+interface PasswordStrengthItemProps {
+    status: PasswordStrengthStatus;
+    message: string;
+    screenReaderStrengthLabels?: Partial<Record<PasswordStrengthStatus, string>>;
+}
+export declare const PasswordStrengthItem: {
+    ({ status, message, screenReaderStrengthLabels, }: PasswordStrengthItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default PasswordField;

package/dist/components/PasswordField/PasswordField.js

@@ -1,46 +1,65 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { forwardRef, useState } from "react";
+import React__default, { forwardRef, useState, useMemo } from "react";
 import { Field } from "../_base/Field/Field.js";
 import { TextField, Group, Input } from "react-aria-components";
 import { IconButton } from "../IconButton/IconButton.js";
 import { c as cva } from "../../index-DdUYounA.js";
 import { Icon } from "../Icon/Icon.js";
-import '../../assets/PasswordField.css';const passwordField__wrapper = "_passwordField__wrapper_fvsth_1";
-const passwordField = "_passwordField_fvsth_1";
-const passwordField__strength = "_passwordField__strength_fvsth_12";
-const passwordStrengthItem$1 = "_passwordStrengthItem_fvsth_98";
-const passwordStrengthItemValid = "_passwordStrengthItemValid_fvsth_108";
-const passwordStrengthItemNeutral = "_passwordStrengthItemNeutral_fvsth_112";
-const passwordStrengthItemInvalid = "_passwordStrengthItemInvalid_fvsth_116";
+import '../../assets/PasswordField.css';const passwordField__wrapper = "_passwordField__wrapper_vzml0_1";
+const passwordField = "_passwordField_vzml0_1";
+const passwordField__strength = "_passwordField__strength_vzml0_12";
+const passwordStrengthItem$1 = "_passwordStrengthItem_vzml0_111";
+const passwordStrengthItemValid = "_passwordStrengthItemValid_vzml0_122";
+const passwordStrengthItemNeutral = "_passwordStrengthItemNeutral_vzml0_126";
+const passwordStrengthItemInvalid = "_passwordStrengthItemInvalid_vzml0_130";
 const styles = {
   passwordField__wrapper,
   passwordField,
   passwordField__strength,
+  "passwordField__strength-text": "_passwordField__strength-text_vzml0_22",
   passwordStrengthItem: passwordStrengthItem$1,
   passwordStrengthItemValid,
   passwordStrengthItemNeutral,
   passwordStrengthItemInvalid
 };
+const DEFAULT_SR_LABELS = {
+  valid: "Requirement met",
+  neutral: "Requirement",
+  invalid: "Requirement not met"
+};
 const PasswordField = forwardRef(({
+  screenReaderStrengthLabels,
   tooltipLabelShowPassword = "Show Password",
   tooltipLabelHidePassword = "Hide Password",
   requirementsLabel = "Password requirements",
   ...props
 }, ref) => {
-  var _a;
+  var _a, _b, _c;
   const [internalVisible, setInternalVisible] = useState(props.isVisible || false);
   const [internalValue, setInternalValue] = useState(props == null ? void 0 : props.defaultValue);
   const value = (props == null ? void 0 : props.value) ?? internalValue;
   const isVisibleState = (props == null ? void 0 : props.isVisible) ?? internalVisible;
+  const inputId = React__default.useId();
+  const descriptionId = React__default.useId();
+  const errorId = React__default.useId();
+  const requirementsId = React__default.useId();
+  const hasDescription = !!props.description;
+  const hasValidations = !!((_a = props.strengthValidations) == null ? void 0 : _a.length);
+  const hasError = !!props.isInvalid;
+  const ariaDescribedBy = [hasDescription && descriptionId, hasValidations && requirementsId, props["aria-describedby"]].filter(Boolean).join(" ");
   const handleChange = React__default.useCallback((e) => {
     var _a2;
     setInternalValue(e.target.value);
     (_a2 = props == null ? void 0 : props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
   }, [props == null ? void 0 : props.onChange]);
+  const srLabels = useMemo(() => ({
+    ...DEFAULT_SR_LABELS,
+    ...screenReaderStrengthLabels ?? {}
+  }), [screenReaderStrengthLabels]);
   const tooltipLabel = isVisibleState ? tooltipLabelHidePassword : tooltipLabelShowPassword;
   return /* @__PURE__ */ jsxs("div", { className: styles["passwordField__wrapper"], children: [
-    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
-      /* @__PURE__ */ jsx(Input, { type: isVisibleState ? "text" : "password", value, onChange: handleChange, ref }),
+    /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.passwordField, label: "Password", hasEndIcon: true, labelFor: (props == null ? void 0 : props.labelFor) ?? inputId, descriptionId: hasDescription ? descriptionId : void 0, errorId: hasError ? errorId : void 0, ...props, children: /* @__PURE__ */ jsx("div", { className: styles["passwordField"], children: /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Input, { id: (props == null ? void 0 : props.labelFor) ?? inputId, ref, type: isVisibleState ? "text" : "password", value, onChange: handleChange, "aria-describedby": ariaDescribedBy, "aria-errormessage": hasError ? errorId : void 0, "aria-invalid": hasError || void 0 }),
       /* @__PURE__ */ jsx(IconButton, { size: "sm", iconProps: isVisibleState ? {
         iconName: "eye",
         iconPrefix: "fas"
@@ -49,7 +68,7 @@ const PasswordField = forwardRef(({
         iconPrefix: "fas"
       }, onPress: () => setInternalVisible(!isVisibleState), isDisabled: props == null ? void 0 : props.isDisabled, styleVariant: "neutral", emphasis: "tertiary", "aria-label": tooltipLabel, tooltipLabel })
     ] }) }) }),
-    /* @__PURE__ */ jsx("ul", { className: styles["passwordField__strength"], "aria-label": requirementsLabel, "aria-live": "polite", children: (_a = props.strengthValidations) == null ? void 0 : _a.map((validation) => /* @__PURE__ */ jsx(PasswordStrengthItem, { status: value ? validation.validation(value) ? "valid" : "invalid" : "neutral", message: validation.message }, `${validation.message}-${value}`)) })
+    ((_b = props.strengthValidations) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx("ul", { id: requirementsId, className: styles["passwordField__strength"], "aria-label": requirementsLabel, "aria-live": "polite", "aria-atomic": false, children: (_c = props.strengthValidations) == null ? void 0 : _c.map((validation) => /* @__PURE__ */ jsx(PasswordStrengthItem, { status: value ? validation.validation(value) ? "valid" : "invalid" : "neutral", message: validation.message, screenReaderStrengthLabels: srLabels }, `${validation.message}-${value}`)) }) : null
   ] });
 });
 const passwordStrengthItem = cva(styles.passwordStrengthItem, {
@@ -64,44 +83,40 @@ const passwordStrengthItem = cva(styles.passwordStrengthItem, {
     status: "neutral"
   }
 });
-function getIcon(status) {
-  switch (status) {
-    case "invalid":
-      return {
-        iconName: "circle-xmark",
-        ariaLabel: "Requirement not met: "
-      };
-    case "valid":
-      return {
-        iconName: "circle-check",
-        ariaLabel: "Requirement met: "
-      };
-    case "neutral":
-    default:
-      return {
-        iconName: "circle-minus",
-        ariaLabel: "Requirement: "
-      };
+const PASSWORD_STRENGTH_MAP = {
+  valid: {
+    iconName: "circle-check"
+  },
+  neutral: {
+    iconName: "circle-minus"
+  },
+  invalid: {
+    iconName: "circle-xmark"
   }
-}
+};
 const PasswordStrengthItem = ({
   status,
-  message
+  message,
+  screenReaderStrengthLabels
 }) => {
   const {
-    iconName,
-    ariaLabel
-  } = getIcon(status);
-  return /* @__PURE__ */ jsxs("li", { className: passwordStrengthItem({
+    iconName
+  } = PASSWORD_STRENGTH_MAP[status];
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("p", { className: passwordStrengthItem({
     status
-  }), "aria-label": `${ariaLabel}${message}`, children: [
+  }), children: [
     /* @__PURE__ */ jsx(Icon, { iconName, iconPrefix: "fas" }),
-    /* @__PURE__ */ jsx("span", { children: message })
-  ] });
+    /* @__PURE__ */ jsxs("span", { role: "text", children: [
+      /* @__PURE__ */ jsx("span", { className: styles["passwordField__strength-text"], dir: "auto", children: `${screenReaderStrengthLabels == null ? void 0 : screenReaderStrengthLabels[status]}: ` }),
+      /* @__PURE__ */ jsx("bdi", { dir: "auto", children: message })
+    ] })
+  ] }) });
 };
 PasswordField.displayName = "PasswordField";
+PasswordStrengthItem.displayName = "PasswordStrengthItem";
 export {
   PasswordField,
+  PasswordStrengthItem,
   PasswordField as default
 };
 //# sourceMappingURL=PasswordField.js.map

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

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

package/dist/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -4,7 +4,7 @@ export interface PhoneNumberFieldProps extends Omit<FieldProps, 'maxWidthByChars
     /**
      * Country code of the default phone number
      */
-    defaultCountry?: string;
+    defaultCountry?: string | number;
     /**
      * Whether to show the country select
      */

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useId } from "react";
 import { TextField, Input } from "react-aria-components";
 import { u as usePatternFormat, N as NumberFormatBase } from "../../react-number-format.es-Dbc1db6s.js";
-import { countryPhoneMap, DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
+import { resolveCountryCode, countryPhoneMap, DEFAULT_PATTERN, getCountryOptions, getCountryFlagEmoji, getPhoneNumberValue } from "../../utils/phoneNumber/phoneNumber.js";
 import { Field } from "../_base/Field/Field.js";
 import '../../assets/PhoneNumberField.css';const phoneNumberField = "_phoneNumberField_ysf6g_1";
 const selectHandlerValue = "_selectHandlerValue_ysf6g_35";
@@ -15,7 +15,7 @@ const styles = {
   selectWrapper
 };
 const PhoneNumberField = ({
-  defaultCountry = "GB",
+  defaultCountry,
   hasCountrySelect = true,
   options = countryPhoneMap,
   onChange,
@@ -29,7 +29,8 @@ const PhoneNumberField = ({
   ...props
 }) => {
   const inputRef = useRef(null);
-  const [countryCode, setCountryCode] = useState(defaultCountry);
+  const defaultCountryCode = resolveCountryCode(defaultCountry) || "GB";
+  const [countryCode, setCountryCode] = useState(defaultCountryCode);
   const countryCodeDefinitive = countryCodeControlled ?? countryCode;
   const [value, setValue] = useState("");
   const valueDefinitive = valueControlled ?? value;
@@ -74,7 +75,7 @@ const PhoneNumberField = ({
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   };
   const countryOptions = getCountryOptions(options, countryCodes);
-  const defaultValue = countryOptions.find((opt) => opt.value === defaultCountry);
+  const defaultValue = countryOptions.find((opt) => opt.value === defaultCountryCode);
   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 ? {

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

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

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

@@ -12,6 +12,11 @@ export type SelectCardContextType = {
      * @default useId()
      */
     'aria-labelledby'?: string;
+    /**
+     * Show or hide the select control.
+     * @default true
+     */
+    hasSelectControl?: boolean;
 } & (({
     type?: 'checkbox';
 } & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
@@ -31,11 +36,11 @@ export type SelectCardProps = SelectCardContextType & {
     children?: React.ReactNode;
 };
 declare const SelectCard: {
-    ({ children, type, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, type, hasSelectControl, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
     Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
     StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
     EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ title, description }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ title, description, headingLevel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
     Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
     Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
 };
@@ -47,6 +52,15 @@ interface SlotProps {
 }
 interface LabelProps {
     title: string;
+    /**
+     * Optional secondary text providing more details about the SelectCard.
+     */
     description?: string;
+    /**
+     * Semantic heading level to use when styleVariant is 'heading'
+     * Affects accessibility and document structure
+     * @default 'h3'
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 export default SelectCard;