@amsterdam/design-system-react 2.1.0 → 3.0.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { createContext, forwardRef, useContext, useState, useId, useRef, useImperativeHandle, useEffect, useCallback, useMemo, useLayoutEffect, startTransition } from 'react';
+import { createContext, forwardRef, useContext, useState, useId, useRef, useImperativeHandle, useEffect, useCallback, useMemo, startTransition } from 'react';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -659,6 +659,17 @@ CardHeading.displayName = 'Card.Heading';
 var _excluded$1l = ["children", "className", "color", "size"];
 function ownKeys$1u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var wrapChildren = function wrapChildren(size, children) {
+  if (size === 'large') return jsx("b", {
+    className: "ams-paragraph__b",
+    children: children
+  });
+  if (size === 'small') return jsx("small", {
+    className: "ams-paragraph__small",
+    children: children
+  });
+  return children;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
@@ -672,7 +683,7 @@ var Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
     ref: ref
   }, restProps), {}, {
-    children: children
+    children: wrapChildren(size, children)
   }));
 });
 Paragraph.displayName = 'Paragraph';
@@ -704,7 +715,7 @@ var generateAspectRatioClass = function generateAspectRatioClass(aspectRatio) {
   return aspectRatio && "ams-aspect-ratio-".concat(aspectRatio.replace(':', '-'));
 };
 
-var _excluded$1j = ["aspectRatio", "className"];
+var _excluded$1j = ["aspectRatio", "className", "width"];
 function ownKeys$1s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -713,11 +724,12 @@ function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var
 var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var aspectRatio = _ref.aspectRatio,
     className = _ref.className,
+    width = _ref.width,
     restProps = _objectWithoutProperties(_ref, _excluded$1j);
   return jsx("img", _objectSpread$1s(_objectSpread$1s({}, restProps), {}, {
     className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
     ref: ref,
-    width: 600
+    width: width !== null && width !== void 0 ? width : 600
   }));
 });
 Image.displayName = 'Image';
@@ -1104,7 +1116,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Field.displayName = 'Field';
 
-var _excluded$14 = ["className", "hint", "optional"];
+var _excluded$14 = ["className", "hint", "inFieldSet", "optional"];
 function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getHintText = function getHintText(_ref) {
@@ -1120,6 +1132,7 @@ var getHintText = function getHintText(_ref) {
 var Hint = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     hint = _ref2.hint,
+    inFieldSet = _ref2.inFieldSet,
     optional = _ref2.optional,
     restProps = _objectWithoutProperties(_ref2, _excluded$14);
   var hintText = getHintText({
@@ -1127,14 +1140,14 @@ var Hint = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     optional: optional
   });
   return hintText && jsxs("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
-    className: clsx('ams-hint', className),
+    className: clsx('ams-hint', inFieldSet && 'ams-hint--in-fieldset', className),
     ref: ref,
     children: ["(", hintText, ")"]
   }));
 });
 Hint.displayName = 'Hint';
 
-var _excluded$13 = ["children", "className", "hint", "invalid", "legend", "legendIsPageHeading", "optional"];
+var _excluded$13 = ["children", "className", "hint", "inFieldSet", "invalid", "legend", "legendIsPageHeading", "optional"];
 function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -1144,6 +1157,7 @@ var FieldSet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     hint = _ref.hint,
+    inFieldSet = _ref.inFieldSet,
     invalid = _ref.invalid,
     legend = _ref.legend,
     legendIsPageHeading = _ref.legendIsPageHeading,
@@ -1152,6 +1166,7 @@ var FieldSet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var legendContent = jsxs(Fragment, {
     children: [legend, " ", jsx(Hint, {
       hint: hint,
+      inFieldSet: inFieldSet,
       optional: optional
     })]
   });
@@ -1159,7 +1174,7 @@ var FieldSet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
     ref: ref,
     children: [jsx("legend", {
-      className: "ams-field-set__legend",
+      className: clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'),
       children: legendIsPageHeading ? jsx("h1", {
         className: "ams-field-set__heading",
         children: legendContent
@@ -1861,7 +1876,7 @@ var InvalidFormAlert = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 InvalidFormAlert.displayName = 'InvalidFormAlert';
 
-var _excluded$O = ["children", "className", "hint", "isPageHeading", "optional"];
+var _excluded$O = ["children", "className", "hint", "inFieldSet", "isPageHeading", "optional"];
 function ownKeys$W(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -1871,14 +1886,16 @@ var Label = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     hint = _ref.hint,
+    inFieldSet = _ref.inFieldSet,
     isPageHeading = _ref.isPageHeading,
     optional = _ref.optional,
     restProps = _objectWithoutProperties(_ref, _excluded$O);
   var labelElement = jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
-    className: clsx('ams-label', className),
+    className: clsx('ams-label', inFieldSet && 'ams-label--in-fieldset', className),
     ref: ref,
     children: [children, " ", jsx(Hint, {
       hint: hint,
+      inFieldSet: inFieldSet,
       optional: optional
     })]
   }));
@@ -2099,27 +2116,27 @@ function _objectSpread$O(e) { for (var r = 1; r < arguments.length; r++) { var t
 var logoConfig = {
   amsterdam: {
     label: 'Gemeente Amsterdam logo',
-    logo: LogoAmsterdam
+    svg: LogoAmsterdam
   },
   'ggd-amsterdam': {
     label: 'GGD Amsterdam logo',
-    logo: LogoGgdAmsterdam
+    svg: LogoGgdAmsterdam
   },
   'museum-weesp': {
     label: 'Gemeente Amsterdam Museum Weesp logo',
-    logo: LogoMuseumWeesp
+    svg: LogoMuseumWeesp
   },
   stadsarchief: {
     label: 'Gemeente Amsterdam Stadsarchief logo',
-    logo: LogoStadsarchief
+    svg: LogoStadsarchief
   },
   'stadsbank-van-lening': {
     label: 'Gemeente Amsterdam Stadsbank van Lening logo',
-    logo: LogoStadsbankVanLening
+    svg: LogoStadsbankVanLening
   },
   'vga-verzekeringen': {
     label: 'Gemeente Amsterdam VGA Verzekeringen logo',
-    logo: LogoVgaVerzekeringen
+    svg: LogoVgaVerzekeringen
   }
 };
 /**
@@ -2131,10 +2148,11 @@ var Logo = /*#__PURE__*/forwardRef(function (_ref, ref) {
     brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$M);
-  var LogoComponent = logoConfig[brand].logo;
-  var logoLabel = logoConfig[brand].label;
+  var config = typeof brand === 'string' ? logoConfig[brand] : brand;
+  var label = config.label,
+    LogoComponent = config.svg;
   return jsx(LogoComponent, _objectSpread$O(_objectSpread$O({}, restProps), {}, {
-    "aria-label": ariaLabel || logoLabel,
+    "aria-label": ariaLabel || label,
     className: clsx('ams-logo', className),
     ref: ref
   }));
@@ -2276,7 +2294,7 @@ var Overlap = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Overlap.displayName = 'Overlap';
 
-var _excluded$F = ["children", "className"];
+var _excluded$F = ["children", "className", "withMenu"];
 function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -2285,27 +2303,38 @@ function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t
 var Page = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    withMenu = _ref.withMenu,
     restProps = _objectWithoutProperties(_ref, _excluded$F);
   return jsx("div", _objectSpread$H(_objectSpread$H({}, restProps), {}, {
-    className: clsx('ams-page', className),
+    className: clsx('ams-page', withMenu && 'ams-page--with-menu', className),
     ref: ref,
     children: children
   }));
 });
 Page.displayName = 'Page';
 
-var _excluded$E = ["children", "className"];
+var _excluded$E = ["children", "className", "heading", "headingLevel"];
 function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageFooterMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 'Over deze website' : _ref$heading,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     restProps = _objectWithoutProperties(_ref, _excluded$E);
-  return jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
-    className: clsx('ams-page-footer__menu', className),
-    ref: ref,
-    children: children
-  }));
+  var HeadingTag = getHeadingTag(headingLevel);
+  return jsxs(Fragment, {
+    children: [jsx(HeadingTag, {
+      className: "ams-visually-hidden",
+      children: heading
+    }), jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
+      className: clsx('ams-page-footer__menu', className),
+      ref: ref,
+      children: children
+    }))]
+  });
 });
 PageFooterMenu.displayName = 'PageFooter.Menu';
 
@@ -2375,23 +2404,21 @@ var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
     _useState2 = _slicedToArray(_useState, 2),
     matches = _useState2[0],
     setMatches = _useState2[1];
-  useLayoutEffect(function () {
+  useEffect(function () {
     // Check for window object to avoid SSR issues
-    if (typeof window !== 'undefined') {
-      var media = window.matchMedia("(min-width: ".concat(BREAKPOINTS[breakpoint], ")"));
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-      var listener = function listener() {
-        return setMatches(media.matches);
-      };
-      window.addEventListener('resize', listener);
-      return function () {
-        return window.removeEventListener('resize', listener);
-      };
-    }
-    return undefined;
-  }, [matches, breakpoint]);
+    if (typeof window === 'undefined') return undefined;
+    var query = "(min-width: ".concat(BREAKPOINTS[breakpoint], ")");
+    var media = window.matchMedia(query);
+    var listener = function listener() {
+      return setMatches(media.matches);
+    };
+    // Set initial state
+    setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return function () {
+      return media.removeEventListener('change', listener);
+    };
+  }, [breakpoint]);
   return matches;
 };
 
@@ -2404,6 +2431,8 @@ var PageHeaderGridCellNarrowWindowOnly = /*#__PURE__*/forwardRef(function (_ref,
     restProps = _objectWithoutProperties(_ref, _excluded$A);
   return jsx(Grid.Cell, _objectSpread$C(_objectSpread$C({}, restProps), {}, {
     className: clsx('ams-page-header__grid-cell-narrow-window-only', className),
+    hidden // Hide until its CSS loads; this cell duplicates the non-fixed links in the Page Header Menu.
+    : true,
     ref: ref,
     children: children
   }));
@@ -2419,48 +2448,42 @@ var PageHeaderMenuIcon = function PageHeaderMenuIcon(props) {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {}, {
-    children: [jsx("line", {
+    children: [jsx("path", {
       className: "ams-page-header__menu-icon-top",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
-    }), jsx("line", {
+      d: "M1 5h22v2H1z"
+    }), jsx("path", {
       className: "ams-page-header__menu-icon-middle",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
-    }), jsx("line", {
+      d: "M1 11h22v2H1z"
+    }), jsx("path", {
       className: "ams-page-header__menu-icon-bottom",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
+      d: "M1 17h22v2H1z"
     })]
   }));
 };
 
-var _excluded$z = ["children", "className", "fixed"];
+var _excluded$z = ["children", "className", "fixed", "icon"];
 function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageHeaderMenuLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     fixed = _ref.fixed,
+    icon = _ref.icon,
     restProps = _objectWithoutProperties(_ref, _excluded$z);
   return jsx("li", {
     className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'),
-    children: jsx("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
+    children: jsxs("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
       className: clsx('ams-page-header__menu-link', className),
       ref: ref,
-      children: children
+      children: [children, icon && jsx(Icon, {
+        svg: icon
+      })]
     }))
   });
 });
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';
 
-var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
+var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuButtonTextForHide", "menuButtonTextForShow", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoLinkContent = function LogoLinkContent(_ref) {
@@ -2498,6 +2521,10 @@ var PageHeaderRoot = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     logoLinkTitle = _ref2$logoLinkTitle === void 0 ? "Ga naar de homepage".concat(brandName ? " van ".concat(brandName) : '') : _ref2$logoLinkTitle,
     _ref2$menuButtonText = _ref2.menuButtonText,
     menuButtonText = _ref2$menuButtonText === void 0 ? 'Menu' : _ref2$menuButtonText,
+    _ref2$menuButtonTextF = _ref2.menuButtonTextForHide,
+    menuButtonTextForHide = _ref2$menuButtonTextF === void 0 ? 'Verberg navigatiemenu' : _ref2$menuButtonTextF,
+    _ref2$menuButtonTextF2 = _ref2.menuButtonTextForShow,
+    menuButtonTextForShow = _ref2$menuButtonTextF2 === void 0 ? 'Laat navigatiemenu zien' : _ref2$menuButtonTextF2,
     menuItems = _ref2.menuItems,
     _ref2$navigationLabel = _ref2.navigationLabel,
     navigationLabel = _ref2$navigationLabel === void 0 ? 'Hoofdnavigatie' : _ref2$navigationLabel,
@@ -2549,7 +2576,9 @@ var PageHeaderRoot = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }), jsxs("ul", {
         className: "ams-page-header__menu",
         children: [menuItems, hasMegaMenu && jsx("li", {
-          className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
+          className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
+          hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
+          : true,
           children: jsxs("button", {
             "aria-controls": "ams-page-header-mega-menu",
             "aria-expanded": open,
@@ -2559,8 +2588,12 @@ var PageHeaderRoot = /*#__PURE__*/forwardRef(function (_ref2, ref) {
             },
             type: "button",
             children: [jsx("span", {
+              "aria-hidden": "true",
               className: "ams-page-header__mega-menu-button-label",
               children: menuButtonText
+            }), jsx("span", {
+              className: "ams-visually-hidden",
+              children: open ? menuButtonTextForHide : menuButtonTextForShow
             }), jsx("span", {
               "aria-hidden": "true",
               className: "ams-page-header__mega-menu-button-hidden-label",

package/dist/index.esm.js.map

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