@amsterdam/design-system-react 2.0.2 → 2.1.0

package/dist/Select/Select.d.ts

@@ -3,18 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { PropsWithChildren, SelectHTMLAttributes } from 'react';
-export type SelectProps = PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>> & {
+export type SelectProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-};
+} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-select--docs Select docs at Amsterdam Design System}
  */
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Select: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLSelectElement>> & {
     Group: import("react").ForwardRefExoticComponent<import("./SelectOptionGroup").SelectOptionGroupProps & {
         children?: import("react").ReactNode | undefined;

package/dist/Spotlight/Spotlight.d.ts

@@ -2,26 +2,26 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
 export declare const spotlightTags: readonly ["article", "aside", "div", "footer", "section"];
 type SpotlightTag = (typeof spotlightTags)[number];
 export declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
-export type SpotlightProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type SpotlightProps = {
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs Spotlight docs at Amsterdam Design System}
  */
-export declare const Spotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Spotlight: import("react").ForwardRefExoticComponent<{
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/Spotlight/Spotlight.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const spotlightTags = ['article', 'aside', 'div', 'footer', 'section'];

package/dist/StandaloneLink/StandaloneLink.d.ts

@@ -4,7 +4,7 @@
  */
 import type { AnchorHTMLAttributes } from 'react';
 import type { IconProps } from '../Icon';
-export type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
+export type StandaloneLinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
     /**
@@ -12,11 +12,11 @@ export type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>,
      * @default ChevronForwardIcon
      */
     icon?: IconProps['svg'];
-};
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
-export declare const StandaloneLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
+export declare const StandaloneLink: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
     /**
@@ -24,4 +24,4 @@ export declare const StandaloneLink: import("react").ForwardRefExoticComponent<O
      * @default ChevronForwardIcon
      */
     icon?: IconProps["svg"];
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Table/TableCaption.d.ts

@@ -1,7 +1,3 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2022 Robbert Broersma

package/dist/TableOfContents/TableOfContents.d.ts

@@ -4,7 +4,7 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { HeadingProps } from '../Heading';
-export type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type TableOfContentsProps = {
     /** The text for the Heading. */
     heading?: string;
     /**
@@ -12,13 +12,11 @@ export type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>
      * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps['level'];
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-table-of-contents--docs Table Of Contents docs at Amsterdam Design System}
  */
-export declare const TableOfContents: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<{
     /** The text for the Heading. */
     heading?: string;
     /**
@@ -26,10 +24,12 @@ export declare const TableOfContents: import("react").ForwardRefExoticComponent<
      * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps["level"];
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
-    Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+    Link: import("react").ForwardRefExoticComponent<{
         label: string;
-    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
     List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLUListElement>>;

package/dist/TableOfContents/TableOfContentsLink.d.ts

@@ -3,11 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes } from 'react';
-export type TableOfContentsLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type TableOfContentsLinkProps = {
     /** The text for the link. */
     label: string;
-};
-export declare const TableOfContentsLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const TableOfContentsLink: import("react").ForwardRefExoticComponent<{
     /** The text for the link. */
     label: string;
-} & import("react").RefAttributes<HTMLAnchorElement>>;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Tabs/Tabs.d.ts

@@ -3,32 +3,32 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type TabsProps = {
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
  */
-export declare const Tabs: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Tabs: import("react").ForwardRefExoticComponent<{
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
-    Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Button: import("react").ForwardRefExoticComponent<{
         'aria-controls': string;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
-    Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & {
+    Panel: import("react").ForwardRefExoticComponent<{
         id: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/Tabs/TabsButton.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
-export type TabsButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+export type TabsButtonProps = {
     /** The identifier of the corresponding tab panel. */
     'aria-controls': string;
-};
-export declare const TabsButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const TabsButton: import("react").ForwardRefExoticComponent<{
     /** The identifier of the corresponding tab panel. */
     'aria-controls': string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Tabs/TabsPanel.d.ts

@@ -3,13 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type TabsPanelProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+export type TabsPanelProps = {
     /** The identifier of the Tab Panel. */
     id: string;
-};
-export declare const TabsPanel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<{
     /** The identifier of the Tab Panel. */
     id: string;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/TextArea/TextArea.d.ts

@@ -3,18 +3,24 @@
  * Copyright Gemeente Amsterdam
  */
 import type { TextareaHTMLAttributes } from 'react';
-export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'> & {
+export type TextAreaProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    /**
+     * Allows the user to resize the text box. The default is resizing in both directions.
+     * Note: this feature is not fully supported in Safari on iOS.
+     */
     resize?: 'none' | 'horizontal' | 'vertical';
-};
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-area--docs Text Area docs at Amsterdam Design System}
  */
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & {
+export declare const TextArea: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    /**
+     * Allows the user to resize the text box. The default is resizing in both directions.
+     * Note: this feature is not fully supported in Safari on iOS.
+     */
     resize?: "none" | "horizontal" | "vertical";
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/TextInput/TextInput.d.ts

@@ -5,19 +5,19 @@
 import type { InputHTMLAttributes } from 'react';
 export declare const textInputTypes: readonly ["email", "tel", "text", "url"];
 type TextInputType = (typeof textInputTypes)[number];
-export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'> & {
+export type TextInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-};
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-input--docs Text Input docs at Amsterdam Design System}
  */
-export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & {
+export declare const TextInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/TimeInput/TimeInput.d.ts

@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes } from 'react';
-export type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
+export type TimeInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-};
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}
  */
-export declare const TimeInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+export declare const TimeInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/UnorderedList/UnorderedList.d.ts

@@ -3,26 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type UnorderedListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>> & {
+export type UnorderedListProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: 'small';
-};
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
  */
-export declare const UnorderedList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const UnorderedList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: "small";
+} & HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/common/useIsAfterBreakpoint.d.ts

@@ -2,6 +2,10 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+export declare const BREAKPOINTS: {
+    medium: string;
+    wide: string;
+};
 type useIsAfterBreakpointProps = 'medium' | 'wide';
 declare const useIsAfterBreakpoint: (breakpoint: useIsAfterBreakpointProps) => boolean;
 export default useIsAfterBreakpoint;

package/dist/common/useIsAfterBreakpoint.js

@@ -4,16 +4,16 @@
  */
 import { useLayoutEffect, useState } from 'react';
 // TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
-const breakpoints = {
-    medium: '36rem',
-    wide: '68rem',
+export const BREAKPOINTS = {
+    medium: '37.5rem',
+    wide: '72.5rem',
 };
 const useIsAfterBreakpoint = (breakpoint) => {
     const [matches, setMatches] = useState(false);
     useLayoutEffect(() => {
         // Check for window object to avoid SSR issues
         if (breakpoint && typeof window !== 'undefined') {
-            const media = window.matchMedia(`(min-width: ${breakpoints[breakpoint]})`);
+            const media = window.matchMedia(`(min-width: ${BREAKPOINTS[breakpoint]})`);
             if (media.matches !== matches) {
                 setMatches(media.matches);
             }

package/dist/index.cjs.js

@@ -1136,7 +1136,7 @@ var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
 });
 Hint.displayName = 'Hint';
 
-var _excluded$13 = ["children", "className", "hint", "invalid", "legend", "optional"];
+var _excluded$13 = ["children", "className", "hint", "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; }
 /**
@@ -1148,17 +1148,24 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     hint = _ref.hint,
     invalid = _ref.invalid,
     legend = _ref.legend,
+    legendIsPageHeading = _ref.legendIsPageHeading,
     optional = _ref.optional,
     restProps = _objectWithoutProperties(_ref, _excluded$13);
+  var legendContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [legend, " ", jsxRuntime.jsx(Hint, {
+      hint: hint,
+      optional: optional
+    })]
+  });
   return jsxRuntime.jsxs("fieldset", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
     className: clsx.clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
     ref: ref,
-    children: [jsxRuntime.jsxs("legend", {
+    children: [jsxRuntime.jsx("legend", {
       className: "ams-field-set__legend",
-      children: [legend, " ", jsxRuntime.jsx(Hint, {
-        hint: hint,
-        optional: optional
-      })]
+      children: legendIsPageHeading ? jsxRuntime.jsx("h1", {
+        className: "ams-field-set__heading",
+        children: legendContent
+      }) : legendContent
     }), children]
   }));
 });
@@ -1856,7 +1863,7 @@ var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 InvalidFormAlert.displayName = 'InvalidFormAlert';
 
-var _excluded$O = ["children", "className", "hint", "optional"];
+var _excluded$O = ["children", "className", "hint", "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; }
 /**
@@ -1866,9 +1873,10 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     hint = _ref.hint,
+    isPageHeading = _ref.isPageHeading,
     optional = _ref.optional,
     restProps = _objectWithoutProperties(_ref, _excluded$O);
-  return jsxRuntime.jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
+  var labelElement = jsxRuntime.jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
     className: clsx.clsx('ams-label', className),
     ref: ref,
     children: [children, " ", jsxRuntime.jsx(Hint, {
@@ -1876,6 +1884,10 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       optional: optional
     })]
   }));
+  return isPageHeading ? jsxRuntime.jsx("h1", {
+    className: "ams-label__heading",
+    children: labelElement
+  }) : labelElement;
 });
 Label.displayName = 'Label';
 
@@ -2171,7 +2183,7 @@ var MenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 MenuLink.displayName = 'Menu.Link';
 
-var _excluded$J = ["accessibleName", "children", "className"];
+var _excluded$J = ["accessibleName", "children", "className", "inWideWindow"];
 function ownKeys$L(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$L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$L(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MenuRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
@@ -2179,12 +2191,16 @@ var MenuRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     accessibleName = _ref$accessibleName === void 0 ? 'Hoofdnavigatie' : _ref$accessibleName,
     children = _ref.children,
     className = _ref.className,
+    inWideWindow = _ref.inWideWindow,
     restProps = _objectWithoutProperties(_ref, _excluded$J);
-  return jsxRuntime.jsxs("nav", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
-    "aria-labelledby": "primary-navigation",
-    className: clsx.clsx('ams-menu', className),
-    ref: ref,
-    children: [jsxRuntime.jsx("h2", {
+  // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
+  // In a wide window, we render a `nav` element and the related accessibility features.
+  var Tag = inWideWindow ? 'nav' : 'div';
+  return jsxRuntime.jsxs(Tag, _objectSpread$L(_objectSpread$L({}, restProps), {}, {
+    "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined,
+    className: clsx.clsx('ams-menu', inWideWindow && "ams-menu--in-wide-window", className),
+    ref: ref,
+    children: [inWideWindow && jsxRuntime.jsx("h2", {
       className: "ams-visually-hidden",
       id: "primary-navigation",
       children: accessibleName
@@ -2352,9 +2368,9 @@ var PageFooter = Object.assign(PageFooterRoot, {
 });
 
 // TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
-var breakpoints = {
-  medium: '36rem',
-  wide: '68rem'
+var BREAKPOINTS = {
+  medium: '37.5rem',
+  wide: '72.5rem'
 };
 var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
   var _useState = react.useState(false),
@@ -2364,7 +2380,7 @@ var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
   react.useLayoutEffect(function () {
     // Check for window object to avoid SSR issues
     if (typeof window !== 'undefined') {
-      var media = window.matchMedia("(min-width: ".concat(breakpoints[breakpoint], ")"));
+      var media = window.matchMedia("(min-width: ".concat(BREAKPOINTS[breakpoint], ")"));
       if (media.matches !== matches) {
         setMatches(media.matches);
       }
@@ -2874,6 +2890,7 @@ var SearchFieldButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     icon: designSystemReactIcons.SearchIcon,
     iconOnly: true,
     ref: ref,
+    type: "submit",
     children: children
   }));
 });

package/dist/index.cjs.js.map

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