@amsterdam/design-system-react 1.1.0 → 2.0.1

package/dist/Logo/brand/LogoVgaVerzekeringen.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { forwardRef } from 'react';
-const LogoVgaVerzekeringen = forwardRef((props, ref) => (_jsxs("svg", { className: "ams-logo", focusable: "false", ref: ref, role: "img", viewBox: "0 0 145 43", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { className: "ams-logo__emblem", d: "m0 38.2 3.53-3.53L0 31.14l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 38.2ZM0 9.96l3.53-3.53L0 2.9 2.35.55l3.53 3.53L9.41.55l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.96ZM0 24.09l3.53-3.53L0 17.03l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 24.09Z", fill: "#EC0000" }), _jsx("path", { className: "ams-logo__text-secondary", d: "M17.13 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM26.5 34.55c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27v-1.58h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09s-4.71-2.02-4.71-4.89l-.02.01ZM40.43 29.86h2.17l3.76 9.4h-2.01l-.78-2.07h-4.18l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04l-1.5-3.96h-.03l-1.5 3.96h-.01ZM50.38 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM59.42 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM68.13 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM73.01 38.06l3.4-4.45h-3.3v-1.49h5.73v1.2l-3.4 4.45h3.5v1.49h-5.93v-1.2ZM79.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM90.38 39.26h-1.79V28.77h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98H93.2l-1.98-2.81-.84.97v1.84ZM95.68 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM104.38 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM110.65 31.21c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM113.48 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM121.55 40.97l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2ZM129.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM138.59 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01Z", fill: "#000" }), _jsx("path", { className: "ams-logo__text-primary", d: "M20.94 15.88h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.69h-.03l-1.5 3.96h-.01ZM28.05 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 22.29c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.72v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.71c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 18.14h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM64.73 21.74c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79V25.3h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 23.25c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 6.41c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.74h4.18V7.2c0 2.4-1.87 4.09-4.54 4.09S17.6 9.27 17.6 6.4l-.02.01ZM28.05 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.98h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V7.1c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V7.1c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.98h-.01ZM48.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.98h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V7.14c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.98h-.01ZM74.21 8.56V5.47h-1.23V3.98h.65c.59 0 .82-.23.82-.82V2.04h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62l.01.01ZM78.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z", fill: "#EC0000" })] })));
+const LogoVgaVerzekeringen = forwardRef((props, ref) => (_jsxs("svg", { className: "ams-logo", focusable: "false", height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    , ref: ref, role: "img", viewBox: "0 0 145 43", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { className: "ams-logo__emblem", d: "m0 38.2 3.53-3.53L0 31.14l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 38.2ZM0 9.96l3.53-3.53L0 2.9 2.35.55l3.53 3.53L9.41.55l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.96ZM0 24.09l3.53-3.53L0 17.03l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 24.09Z", fill: "#EC0000" }), _jsx("path", { className: "ams-logo__text-secondary", d: "M17.13 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM26.5 34.55c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27v-1.58h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09s-4.71-2.02-4.71-4.89l-.02.01ZM40.43 29.86h2.17l3.76 9.4h-2.01l-.78-2.07h-4.18l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04l-1.5-3.96h-.03l-1.5 3.96h-.01ZM50.38 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM59.42 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM68.13 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM73.01 38.06l3.4-4.45h-3.3v-1.49h5.73v1.2l-3.4 4.45h3.5v1.49h-5.93v-1.2ZM79.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM90.38 39.26h-1.79V28.77h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98H93.2l-1.98-2.81-.84.97v1.84ZM95.68 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM104.38 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM110.65 31.21c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM113.48 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM121.55 40.97l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2ZM129.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM138.59 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01Z", fill: "#000" }), _jsx("path", { className: "ams-logo__text-primary", d: "M20.94 15.88h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.69h-.03l-1.5 3.96h-.01ZM28.05 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 22.29c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.72v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.71c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 18.14h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM64.73 21.74c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79V25.3h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 23.25c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 6.41c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.74h4.18V7.2c0 2.4-1.87 4.09-4.54 4.09S17.6 9.27 17.6 6.4l-.02.01ZM28.05 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.98h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V7.1c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V7.1c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.98h-.01ZM48.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.98h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V7.14c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.98h-.01ZM74.21 8.56V5.47h-1.23V3.98h.65c.59 0 .82-.23.82-.82V2.04h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62l.01.01ZM78.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z", fill: "#EC0000" })] })));
 LogoVgaVerzekeringen.displayName = 'LogoVgaVerzekeringen';
 export default LogoVgaVerzekeringen;

package/dist/Logo/index.d.ts

@@ -3,4 +3,4 @@
  * Copyright Gemeente Amsterdam
  */
 export { Logo } from './Logo';
-export type { LogoProps, LogoBrand } from './Logo';
+export type { LogoBrand, LogoProps } from './Logo';

package/dist/Mark/Mark.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-mark--docs Mark docs at Amsterdam Design System}

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    accessibleName?: string;
+};
+export declare const MenuRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    accessibleName?: string;
+} & import("react").RefAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
+ */
+export declare const Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    accessibleName?: string;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Link: import("react").ForwardRefExoticComponent<{
+        color?: "contrast" | "inverse";
+        icon: import("..").IconProps["svg"];
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/Menu/Menu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { MenuLink } from './MenuLink';
+export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, ...restProps }, ref) => (_jsxs("nav", { ...restProps, "aria-labelledby": "primary-navigation", className: clsx('ams-menu', className), ref: ref, children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName }), _jsx("ul", { className: "ams-menu__list", children: children })] })));
+MenuRoot.displayName = 'Menu';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
+ */
+export const Menu = Object.assign(MenuRoot, { Link: MenuLink });

package/dist/Menu/Menu.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/Menu/Menu.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Menu } from './Menu';
+import '@testing-library/jest-dom';
+describe('Menu', () => {
+    it('renders', () => {
+        render(_jsx(Menu, {}));
+        const component = screen.getByRole('navigation');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Menu, {}));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-menu');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Menu, { className: "extra" }));
+        const component = screen.getByRole('navigation');
+        expect(component).toHaveClass('ams-menu extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Menu, { ref: ref }));
+        const component = screen.getByRole('navigation');
+        expect(ref.current).toBe(component);
+    });
+    it('renders a custom accessible name for the logo', () => {
+        render(_jsx(Menu, { accessibleName: "Custom accessible name" }));
+        const component = screen.getByRole('heading', { name: 'Custom accessible name' });
+        expect(component).toBeInTheDocument();
+    });
+});

package/dist/Menu/MenuLink.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
+export type MenuLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    icon: IconProps['svg'];
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const MenuLink: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    icon: IconProps["svg"];
+} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Menu/MenuLink.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const MenuLink = forwardRef(({ children, className, color, icon, ...restProps }, ref) => {
+    return (_jsx("li", { children: _jsxs("a", { ...restProps, className: clsx('ams-menu__link', color && `ams-menu__link--${color}`, className), ref: ref, children: [_jsx(Icon, { className: "ams-menu__icon", svg: icon }), children] }) }));
+});
+MenuLink.displayName = 'Menu.Link';

package/dist/Menu/MenuLink.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/Menu/MenuLink.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';
+import { DocumentIcon, StarIcon } from '@amsterdam/design-system-react-icons';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Menu } from './Menu';
+describe('Menu link', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Menu.Link, { href: "#", icon: DocumentIcon }));
+        const listItem = screen.getByRole('listitem');
+        const link = screen.getByRole('link');
+        const icon = container.querySelector('svg');
+        expect(listItem).toBeInTheDocument();
+        expect(listItem).toBeVisible();
+        expect(link).toBeInTheDocument();
+        expect(link).toBeVisible();
+        expect(icon).toBeInTheDocument();
+        expect(icon).not.toBeVisible(); // The icon is hidden by default, and only shown when the CSS loads.
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Menu.Link, { href: "#", icon: DocumentIcon }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-menu__link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Menu.Link, { className: "extra", href: "#", icon: DocumentIcon }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-menu__link extra');
+    });
+    it('renders the class name for contrast color', () => {
+        render(_jsx(Menu.Link, { color: "contrast", href: "#", icon: DocumentIcon }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-menu__link--contrast');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(Menu.Link, { color: "inverse", href: "#", icon: DocumentIcon }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-menu__link--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Menu.Link, { href: "#", icon: DocumentIcon, ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+    it('shows a custom icon', () => {
+        render(_jsx(Menu.Link, { href: "#", icon: _jsx(StarIcon, { className: "test-class" }) }));
+        const component = screen.getByRole('link');
+        const icon = component.querySelector('.test-class');
+        expect(icon).toBeInTheDocument();
+    });
+});

package/dist/Menu/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { Menu } from './Menu';
+export type { MenuProps } from './Menu';
+export type { MenuLinkProps } from './MenuLink';

package/dist/Menu/index.js

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { Menu } from './Menu';

package/dist/OrderedList/OrderedList.d.ts

@@ -3,26 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { OlHTMLAttributes, PropsWithChildren } from 'react';
-export type OrderedListProps = {
+export type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
     /** 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<OlHTMLAttributes<HTMLOListElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
  */
-export declare const OrderedList: import("react").ForwardRefExoticComponent<{
+export declare const OrderedList: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** 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";
-} & OlHTMLAttributes<HTMLOListElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/OrderedList/OrderedList.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { OrderedListItem } from './OrderedListItem';
 const OrderedListRoot = forwardRef(({ children, className, color, markers = true, size, ...restProps }, ref) => (_jsx("ol", { className: clsx('ams-ordered-list', color && `ams-ordered-list--${color}`, !markers && 'ams-ordered-list--no-markers', size && `ams-ordered-list--${size}`, className), ref: ref, ...restProps, children: children })));

package/dist/OrderedList/OrderedList.test.js

@@ -35,7 +35,7 @@ describe('Ordered list', () => {
     });
     it('renders its subcomponent', () => {
         const listItems = ['Item 1', 'Item 2', 'Item 3'];
-        const { container } = render(_jsx(OrderedList, { children: listItems.map((item, index) => (_jsx(OrderedList.Item, { children: item }, index))) }));
+        const { container } = render(_jsx(OrderedList, { children: listItems.map((item) => (_jsx(OrderedList.Item, { children: item }, item))) }));
         const list = screen.getByRole('list');
         const items = container.querySelectorAll('.ams-ordered-list__item');
         expect(list).toBeInTheDocument();

package/dist/OrderedList/OrderedListItem.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const OrderedListItem = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-ordered-list__item', className), ref: ref, ...restProps, children: children })));
 OrderedListItem.displayName = 'OrderedList.Item';

package/dist/Overlap/Overlap.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-overlap--docs Overlap docs at Amsterdam Design System}

package/dist/Page/Page.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}

package/dist/PageFooter/PageFooter.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { PageFooterMenu } from './PageFooterMenu';
 import { PageFooterMenuLink } from './PageFooterMenuLink';

package/dist/PageFooter/PageFooterMenu.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const PageFooterMenu = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-page-footer__menu', className), ref: ref, children: children })));
 PageFooterMenu.displayName = 'PageFooter.Menu';

package/dist/PageFooter/PageFooterMenuLink.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const PageFooterMenuLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-page-footer__menu-item", children: _jsx("a", { ...restProps, className: clsx('ams-page-footer__menu-link', className), ref: ref, children: children }) })));
 PageFooterMenuLink.displayName = 'PageFooter.MenuLink';

package/dist/PageFooter/PageFooterSpotlight.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const PageFooterSpotlight = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page-footer__spotlight', className), ref: ref, children: children })));
 PageFooterSpotlight.displayName = 'PageFooter.Spotlight';

package/dist/PageHeader/PageHeader.d.ts

@@ -4,7 +4,7 @@
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
-export type PageHeaderProps = {
+export type PageHeaderProps = HTMLAttributes<HTMLElement> & {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -25,11 +25,11 @@ export type PageHeaderProps = {
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
  */
-export declare const PageHeader: import("react").ForwardRefExoticComponent<{
+export declare const PageHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -50,11 +50,11 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+} & import("react").RefAttributes<HTMLElement>> & {
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
-    MenuLink: import("react").ForwardRefExoticComponent<{
-        fixed?: boolean;
-    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    MenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
+    } & {
+        fixed?: boolean;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };

package/dist/PageHeader/PageHeader.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect, useState } from 'react';
+import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
 import { Icon } from '../Icon';
 import { Logo } from '../Logo';
 import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
 import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
 import { PageHeaderMenuLink } from './PageHeaderMenuLink';
-import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
 const LogoLinkContent = ({ brandName, logoAccessibleName, logoBrand, }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'), children: _jsx(Logo, { "aria-label": logoAccessibleName, brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-page-header__brand-name", children: brandName }))] }));
 const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle = `Ga naar de homepage${brandName ? ` van ${brandName}` : ''}`, menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
     const [open, setOpen] = useState(false);
@@ -23,7 +19,7 @@ const PageHeaderRoot = forwardRef(({ brandName, children, className, logoAccessi
             setOpen(false);
         }
     }, [isWideWindow]);
-    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _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'), children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
+    return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(Link, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { brandName: brandName, logoAccessibleName: logoAccessibleName, logoBrand: logoBrand }), _jsx("span", { className: "ams-visually-hidden", children: ` ${logoLinkTitle}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _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'), children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
 });
 PageHeaderRoot.displayName = 'PageHeader';
 /**

package/dist/PageHeader/PageHeader.test.js

@@ -123,7 +123,7 @@ describe('Page Header', () => {
         expect(openMegaMenu).toBeInTheDocument();
         expect(openMegaMenu).not.toHaveClass('ams-page-header__mega-menu--closed');
     });
-    it.skip('it closes the mega menu when it is open and the screen width passes the breakpoint', () => {
+    it.skip('closes the mega menu when it is open and the screen width passes the breakpoint', () => {
         // TODO: Add this test
     });
     it('renders a custom logo link component', () => {

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Grid } from '../Grid';
 export const PageHeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-page-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -3,11 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeaderMenuLinkProps = {
+export type PageHeaderMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
     fixed?: boolean;
-} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
-    fixed?: boolean;
-} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+};
+export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;
+} & {
+    fixed?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';

package/dist/PageHeading/PageHeading.d.ts

@@ -3,16 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeadingProps = {
+export type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+};
 /**
+ * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
-export declare const PageHeading: import("react").ForwardRefExoticComponent<{
+export declare const PageHeading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
-} & HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/PageHeading/PageHeading.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
+ * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
 export const PageHeading = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("h1", { ...restProps, className: clsx('ams-page-heading', color && `ams-page-heading--${color}`, className), ref: ref, children: children })));