@alto-avios/alto-ui 3.1.0 → 3.2.0

package/dist/components/DateField/DateField.js.map

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

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

@@ -0,0 +1,7 @@
+import { CalloutBannerProps } from '../CalloutBanner/CalloutBanner';
+import { default as React } from 'react';
+export interface ErrorSummaryProps extends Pick<CalloutBannerProps, 'title' | 'description'> {
+    children: React.ReactElement[] | React.ReactElement;
+}
+export declare const ErrorSummary: ({ title, description, children, }: ErrorSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ErrorSummary;

package/dist/components/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalloutBanner } from "../CalloutBanner/CalloutBanner.js";
+import React, { 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__item": "_errorSummary-list__item_yt1ru_24"
+};
+const MAX_ERRORS_SHOW = 4;
+const ErrorSummary = ({
+  title,
+  description,
+  children
+}) => {
+  const [showAllErrors, setShowAllErrors] = useState(false);
+  if (!children || Array.isArray(children) && children.length === 0) {
+    return null;
+  }
+  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.Children.map(errorsToRender, (child, index) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          key: `error-${index}`,
+          iconEndProps: false
+        });
+      }
+      return child;
+    }) }),
+    hasMoreErrors && !showAllErrors && /* @__PURE__ */ jsx(Link, { onPress: () => setShowAllErrors(true), underline: true, size: "sm", iconEndProps: {
+      iconName: "chevron-down"
+    }, children: "Show more" }),
+    showAllErrors && hasMoreErrors && /* @__PURE__ */ jsx(Link, { onPress: () => setShowAllErrors(false), underline: true, size: "sm", iconEndProps: {
+      iconName: "chevron-up"
+    }, children: "Show less" })
+  ] }) });
+};
+export {
+  ErrorSummary,
+  ErrorSummary as default
+};
+//# sourceMappingURL=ErrorSummary.js.map

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

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

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

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

package/dist/components/ErrorSummary/index.js

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

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

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

package/dist/components/FieldHeader/FieldHeader.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import FieldDescription from "../FieldDescription/FieldDescription.js";
 import { FieldError } from "../FieldError/FieldError.js";
 import { FieldLabel } from "../FieldLabel/FieldLabel.js";
-import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_3rjlj_1";
+import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_jjofg_1";
 const styles = {
   fieldHeader,
-  "label-container": "_label-container_3rjlj_12"
+  "label-container": "_label-container_jjofg_13"
 };
 const FieldHeader = ({
   label,
@@ -16,10 +16,10 @@ const FieldHeader = ({
   labelFor
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles["label-container"], children: [
-      label && /* @__PURE__ */ jsx(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: label }),
-      !isRequired && /* @__PURE__ */ jsx("span", { children: "Optional" })
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
+      label,
+      !isRequired && ` (Optional)`
+    ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
   ] });

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Label } from "react-aria-components";
-import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_1jqml_1";
+import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_vou7c_1";
 const styles = {
   fieldLabel
 };

package/dist/components/Heading/Heading.d.ts

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

package/dist/components/Icon/Icon.d.ts

@@ -13,6 +13,7 @@ export interface IconProps {
     iconName: string;
     /**
      * The prefix of the icon to load.
+     * See https://docs.fontawesome.com/web/add-icons/how-to
      * @default 'fas'
      */
     iconPrefix?: 'fas' | 'far' | 'fal' | 'fab' | 'fad' | 'fak';

package/dist/components/Image/Image.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { BorderVariants } from '../../utils/border/border';
 import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 declare const imageVariants: (props?: ({
-    fit?: "fill" | "none" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
+    fit?: "none" | "fill" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>, Pick<BorderVariants, 'borderRadius'>, BackgroundVariants, VariantProps<typeof imageVariants> {
     /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button/Button';
+type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
+export interface MenuProps {
+    /**
+     * The label text for the menu button
+     */
+    label: string;
+    /**
+     * Accessible label for the menu (for screen readers)
+     * Defaults to the button label if not provided
+     * @default props.label
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the menu is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The placement of the menu relative to the button
+     * @default 'bottom start'
+     */
+    placement?: PlacementType;
+    /**
+     * The button emphasis
+     * @default 'tertiary'
+     */
+    buttonEmphasis?: ButtonProps['emphasis'];
+    /**
+     * The button style variant
+     * @default 'neutral'
+     */
+    buttonStyleVariant?: ButtonProps['styleVariant'];
+    /**
+     * The button style variant when menu is open
+     * @default buttonStyleVariant value
+     */
+    buttonOpenVariant?: ButtonProps['styleVariant'];
+    /**
+     * ID of an element to position the menu against instead of the button
+     * When provided, the menu will be positioned relative to this element
+     */
+    alignToElementId?: string;
+    /**
+     * Whether the menu should flip to fit in the viewport
+     * @default false
+     */
+    shouldFlip?: boolean;
+    /**
+     * Whether the menu should open on hover and focus
+     * @default false
+     */
+    openOnHoverAndFocus?: boolean;
+    /**
+     * Whether to allow tabbing out of the menu
+     * @default true
+     */
+    allowTabOut?: boolean;
+    /**
+     * The content to display inside the menu (as JSX children)
+     * Can be custom HTML content
+     */
+    children: React.ReactNode;
+    /**
+     * Icon props for the start of the button
+     */
+    iconStartProps?: ButtonProps['iconStartProps'];
+    /**
+     * Icon props for the end of the button
+     */
+    iconEndProps?: ButtonProps['iconEndProps'];
+}
+export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export default Menu;

package/dist/components/Menu/Menu.js

@@ -0,0 +1,356 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import { Button } from "../Button/Button.js";
+import { Popover } from "../Popover/Popover.js";
+import '../../assets/Menu.css';const menuContainer = "_menuContainer_qw7ps_1";
+const menuContent = "_menuContent_qw7ps_6";
+const styles = {
+  menuContainer,
+  menuContent
+};
+const menuRegistry = {
+  activeMenuId: null,
+  setActiveMenu: (id) => {
+    menuRegistry.activeMenuId = id;
+  },
+  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 [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);
+    setPreventFocusOpen(true);
+    setTimeout(() => {
+      setPreventFocusOpen(false);
+    }, 300);
+  };
+  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);
+    } else {
+      menuRegistry.setActiveMenu(null);
+      setIsOpen(false);
+    }
+  };
+  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]);
+  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();
+      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"])'));
+    if (focusableElements.length === 0) return;
+    const focusedElement = document.activeElement;
+    const currentIndex = focusableElements.indexOf(focusedElement);
+    if (e.key === "ArrowDown" && currentIndex < focusableElements.length - 1) {
+      e.preventDefault();
+      focusableElements[currentIndex + 1].focus();
+    } else if (e.key === "ArrowUp" && currentIndex > 0) {
+      e.preventDefault();
+      focusableElements[currentIndex - 1].focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusableElements[0].focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      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);
+      }
+    }
+  }, [isOpen, openedViaKeyboard]);
+  useEffect(() => {
+    if (!openOnHoverAndFocus || isDisabled) return;
+    let hoverTimeout = null;
+    const handleMouseEnter = () => {
+      if (hoverTimeout) {
+        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);
+      }, 300);
+    };
+    const handleMouseLeave = () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+      hoverTimeout = setTimeout(() => {
+        if (menuRegistry.getActiveMenu() === menuId) {
+          menuRegistry.setActiveMenu(null);
+        }
+        setIsOpen(false);
+      }, 300);
+    };
+    const buttonElement = buttonRef.current;
+    if (buttonElement) {
+      buttonElement.addEventListener("mouseenter", handleMouseEnter);
+      buttonElement.addEventListener("mouseleave", handleMouseLeave);
+    }
+    return () => {
+      if (buttonElement) {
+        buttonElement.removeEventListener("mouseenter", handleMouseEnter);
+        buttonElement.removeEventListener("mouseleave", handleMouseLeave);
+      }
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+    };
+  }, [openOnHoverAndFocus, isDisabled, menuId]);
+  useEffect(() => {
+    if (!openOnHoverAndFocus || isDisabled) return;
+    const buttonElement = buttonRef.current;
+    if (!buttonElement) return;
+    let focusTimeout = null;
+    let isMenuOpening = false;
+    const handleFocus = () => {
+      if (preventFocusOpen) return;
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+      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);
+        setTimeout(() => {
+          isMenuOpening = false;
+        }, 500);
+      }, 300);
+    };
+    const handleBlur = (e) => {
+      if (isMenuOpening) return;
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+      const containerElement = containerRef.current;
+      const relatedTarget = e.relatedTarget;
+      if (containerElement && !containerElement.contains(relatedTarget)) {
+        focusTimeout = setTimeout(() => {
+          if (menuRegistry.getActiveMenu() === menuId) {
+            menuRegistry.setActiveMenu(null);
+          }
+          setIsOpen(false);
+        }, 200);
+      }
+    };
+    buttonElement.addEventListener("focus", handleFocus);
+    buttonElement.addEventListener("blur", handleBlur);
+    return () => {
+      buttonElement.removeEventListener("focus", handleFocus);
+      buttonElement.removeEventListener("blur", handleBlur);
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+      }
+    };
+  }, [openOnHoverAndFocus, isDisabled, preventFocusOpen, menuId]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleOutsideClick = (e) => {
+      const container = containerRef.current;
+      if (container && !container.contains(e.target)) {
+        if (menuRegistry.getActiveMenu() === menuId) {
+          menuRegistry.setActiveMenu(null);
+        }
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [isOpen, menuId]);
+  useEffect(() => {
+    if (!isOpen) {
+      setOpenedViaKeyboard(false);
+    }
+  }, [isOpen]);
+  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,
+    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);
+    }
+  };
+  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 }),
+    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 }) })
+  ] });
+};
+export {
+  Menu,
+  Menu as default
+};
+//# sourceMappingURL=Menu.js.map

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

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

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

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

package/dist/components/Menu/index.js

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

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

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

package/dist/components/Paragraph/Paragraph.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
-    textAlign?: "end" | "start" | "center" | null | undefined;
+    textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
 type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';

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

@@ -49,5 +49,5 @@ export interface PhoneNumberFieldProps extends FieldProps {
      */
     placeholder?: string;
 }
-export declare const PhoneNumberField: ({ defaultCountry, hasCountrySelect, options, onChange, countryCode: countryCodeControlled, value: valueControlled, countryCodes, isFormatted, id: providedId, countrySelectLabel, ...props }: PhoneNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneNumberField: ({ defaultCountry, hasCountrySelect, options, onChange, countryCode: countryCodeControlled, value: valueControlled, countryCodes, isFormatted, id: providedId, countrySelectLabel, label, ...props }: PhoneNumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberField;

package/dist/components/PhoneNumberField/PhoneNumberField.js

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