@conduction/components 2.2.4 → 2.2.5

package/lib/components/card/richContentCard/RichContentCard.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./RichContentCard.module.css";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
-import { navigate } from "gatsby";
-import { Tag } from "../../tag/Tag";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faExternalLink } from "@fortawesome/free-solid-svg-icons";
-export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [_jsx(FontAwesomeIcon, { icon: linkIsExternal ? faExternalLink : faArrowRight }), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
-};
-const LabelWithIcon = ({ label, icon }) => {
-    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
-};
-const ContentLink = ({ title, subTitle }) => {
-    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(FontAwesomeIcon, { icon: faArrowRight }) })] }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./RichContentCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
+};
+const LabelWithIcon = ({ label, icon }) => {
+    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
+};
+const ContentLink = ({ title, subTitle, href }) => {
+    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
+};

package/lib/components/codeBlock/CodeBlock.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-interface CodeBlockProps {
-    codeBlock: string | JSX.Element;
-}
-export declare const CodeBlock: ({ codeBlock }: CodeBlockProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface CodeBlockProps {
+    codeBlock: string | JSX.Element;
+}
+export declare const CodeBlock: ({ codeBlock }: CodeBlockProps) => JSX.Element;
+export {};

package/lib/components/codeBlock/CodeBlock.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./CodeBlock.module.css";
-export const CodeBlock = ({ codeBlock }) => _jsx("div", { className: styles.code, children: codeBlock });
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CodeBlock.module.css";
+export const CodeBlock = ({ codeBlock }) => _jsx("div", { className: styles.code, children: codeBlock });

package/lib/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/lib/components/container/Container.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-interface ContainerProps {
-    layoutClassName?: string;
-}
-export declare const Container: ({ children, layoutClassName }: React.PropsWithChildren<ContainerProps>) => JSX.Element;
-export {};
+import * as React from "react";
+interface ContainerProps {
+    layoutClassName?: string;
+}
+export declare const Container: ({ children, layoutClassName }: React.PropsWithChildren<ContainerProps>) => JSX.Element;
+export {};

package/lib/components/container/Container.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./Container.module.css";
-import clsx from "clsx";
-export const Container = ({ children, layoutClassName }) => (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: children }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Container.module.css";
+import clsx from "clsx";
+export const Container = ({ children, layoutClassName }) => (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: children }));

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css

@@ -1,222 +1,222 @@
-.denhaag-breadcrumb {
-  --denhaag-breadcrumb-chevron-display: none;
-  --denhaag-breadcrumb-link-background-color: transparent;
-  --denhaag-breadcrumb-link-icon-content: "";
-  --denhaag-breadcrumb-link-pointer-events: bounding-box;
-  --denhaag-breadcrumb-item-display: none;
-
-  background-color: var(--denhaag-breadcrumb-background-color, transparent);
-  color: var(--denhaag-breadcrumb-color, inherit);
-  padding-block-end: var(--denhaag-breadcrumb-padding-block);
-  padding-block-start: var(--denhaag-breadcrumb-padding-block);
-  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
-  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
-}
-
-.denhaag-breadcrumb__list {
-  block-size: 100%;
-  display: flex;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: auto;
-  margin-inline-start: auto;
-  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
-}
-
-ol.denhaag-breadcrumb__list {
-  list-style: none;
-  padding-inline-start: 0;
-}
-
-.denhaag-breadcrumb__item {
-  align-items: center;
-  display: var(--denhaag-breadcrumb-item-display);
-}
-
-.denhaag-breadcrumb__item:nth-last-child(2) {
-  --denhaag-breadcrumb-item-display: flex;
-}
-
-.denhaag-breadcrumb__item:nth-last-child(2)
-  > .denhaag-breadcrumb__link::before {
-  background: var(--denhaag-breadcrumb-link-color);
-  clip-path: path(
-    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
-  );
-  content: var(--denhaag-breadcrumb-link-icon-content);
-  height: var(
-    --denhaag-breadcrumb-link-icon-height,
-    var(--denhaag-breadcrumb-link-icon-width)
-  );
-  margin-inline-end: var(
-    --denhaag-breadcrumb-link-icon-margin-inline,
-    var(--denhaag-breadcrumb-link-icon-width)
-  );
-  width: var(--denhaag-breadcrumb-link-icon-width);
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
-  --denhaag-breadcrumb-link-background-color: var(
-    --denhaag-breadcrumb-dots-background-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
-  --denhaag-breadcrumb-link-background-color: var(
-    --denhaag-breadcrumb-dots-hover-background-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__link {
-  align-items: center;
-  color: var(--denhaag-breadcrumb-link-color, inherit);
-  display: flex;
-  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
-  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
-  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
-  position: relative;
-}
-
-.denhaag-breadcrumb__link:hover,
-.denhaag-breadcrumb__link--hover {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-link-hover-color,
-    inherit
-  );
-}
-
-.denhaag-breadcrumb__link:focus,
-.denhaag-breadcrumb__link--focus {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-link-focus-color,
-    inherit
-  );
-
-  outline: var(
-    --denhaag-breadcrumb-link-focus-outline,
-    var(--denhaag-link-focus-outline)
-  );
-}
-
-.denhaag-breadcrumb__link--current,
-.denhaag-breadcrumb__link.denhaag-link--current,
-.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
-  --denhaag-breadcrumb-link-color: var(
-    --denhaag-breadcrumb-current-color,
-    var(--denhaag-breadcrumb-color, inherit)
-  );
-
-  text-decoration: none;
-}
-
-.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
-    > .denhaag-breadcrumb__link)
-  > :first-child {
-  pointer-events: bounding-box;
-}
-
-/* SVG for the separator */
-.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
-.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
-  color: initial;
-  font-size: inherit;
-  display: var(--denhaag-breadcrumb-chevron-display);
-  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
-  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
-}
-
-[dir="rtl"]
-  .denhaag-breadcrumb__link
-  > .denhaag-breadcrumb__text
-  + .denhaag-icon,
-[dir="rtl"]
-  .denhaag-breadcrumb__item:nth-last-child(2)
-  > .denhaag-breadcrumb__link::before {
-  transform: scaleX(-1);
-}
-
-.denhaag-breadcrumb__text {
-  background-color: var(--denhaag-breadcrumb-link-background-color);
-  overflow: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
-  .denhaag-breadcrumb__text {
-  aspect-ratio: 24/16;
-  border-radius: var(
-    --denhaag-breadcrumb-dots-border-radius,
-    var(--denhaag-border-radius)
-  );
-  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
-  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
-}
-
-.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
-  .denhaag-breadcrumb__text::before {
-  color: var(--denhaag-breadcrumb-dots-color, inherit);
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  top: calc(50% - 5px);
-  vertical-align: baseline;
-}
-
-@media (min-width: 481px) {
-  .denhaag-breadcrumb {
-    --denhaag-breadcrumb-chevron-display: inline-block;
-    --denhaag-breadcrumb-link-icon-content: unset;
-    --denhaag-breadcrumb-link-pointer-events: none;
-    --denhaag-breadcrumb-padding-block: var(
-      --denhaag-breadcrumb-padding-block-md
-    );
-  }
-
-  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
-    --denhaag-breadcrumb-item-display: flex;
-  }
-}
-
-@media (min-width: 1124px) {
-  .denhaag-breadcrumb {
-    --denhaag-breadcrumb-padding-inline: 0;
-  }
-}
-
-:root {
-  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
-  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
-  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
-  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
-  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
-  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
-  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
-  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
-  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
-  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
-  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
-  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
-  --utrecht-breadcrumb-item-padding-inline-start: 14px;
-  --utrecht-breadcrumb-item-padding-inline-end: 14px;
-  --utrecht-breadcrumb-divider-inline-size: 24px;
-  --utrecht-breadcrumb-divider-content: ›;
-  --denhaag-breadcrumb-list-max-width: 67.5rem;
-  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
-  --denhaag-breadcrumb-link-icon-width: 0.875rem;
-  --denhaag-breadcrumb-link-icon-height: 0.875rem;
-  --denhaag-breadcrumb-padding-inline: 0.75rem;
-  --denhaag-breadcrumb-padding-block-md: 0.75rem;
-  --denhaag-breadcrumb-padding-block: 1rem;
-  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
-  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
-  --utrecht-breadcrumb-font-size: var(
-    --denhaag-typography-scale-base-font-size
-  );
-}
+.denhaag-breadcrumb {
+  --denhaag-breadcrumb-chevron-display: none;
+  --denhaag-breadcrumb-link-background-color: transparent;
+  --denhaag-breadcrumb-link-icon-content: "";
+  --denhaag-breadcrumb-link-pointer-events: bounding-box;
+  --denhaag-breadcrumb-item-display: none;
+
+  background-color: var(--denhaag-breadcrumb-background-color, transparent);
+  color: var(--denhaag-breadcrumb-color, inherit);
+  padding-block-end: var(--denhaag-breadcrumb-padding-block);
+  padding-block-start: var(--denhaag-breadcrumb-padding-block);
+  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
+  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
+}
+
+.denhaag-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
+}
+
+ol.denhaag-breadcrumb__list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.denhaag-breadcrumb__item {
+  align-items: center;
+  display: var(--denhaag-breadcrumb-item-display);
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2) {
+  --denhaag-breadcrumb-item-display: flex;
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  background: var(--denhaag-breadcrumb-link-color);
+  clip-path: path(
+    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
+  );
+  content: var(--denhaag-breadcrumb-link-icon-content);
+  height: var(
+    --denhaag-breadcrumb-link-icon-height,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  margin-inline-end: var(
+    --denhaag-breadcrumb-link-icon-margin-inline,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  width: var(--denhaag-breadcrumb-link-icon-width);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-hover-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link {
+  align-items: center;
+  color: var(--denhaag-breadcrumb-link-color, inherit);
+  display: flex;
+  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
+  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
+  position: relative;
+}
+
+.denhaag-breadcrumb__link:hover,
+.denhaag-breadcrumb__link--hover {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-hover-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link:focus,
+.denhaag-breadcrumb__link--focus {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-focus-color,
+    inherit
+  );
+
+  outline: var(
+    --denhaag-breadcrumb-link-focus-outline,
+    var(--denhaag-link-focus-outline)
+  );
+}
+
+.denhaag-breadcrumb__link--current,
+.denhaag-breadcrumb__link.denhaag-link--current,
+.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-current-color,
+    var(--denhaag-breadcrumb-color, inherit)
+  );
+
+  text-decoration: none;
+}
+
+.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
+    > .denhaag-breadcrumb__link)
+  > :first-child {
+  pointer-events: bounding-box;
+}
+
+/* SVG for the separator */
+.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
+.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
+  color: initial;
+  font-size: inherit;
+  display: var(--denhaag-breadcrumb-chevron-display);
+  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
+}
+
+[dir="rtl"]
+  .denhaag-breadcrumb__link
+  > .denhaag-breadcrumb__text
+  + .denhaag-icon,
+[dir="rtl"]
+  .denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  transform: scaleX(-1);
+}
+
+.denhaag-breadcrumb__text {
+  background-color: var(--denhaag-breadcrumb-link-background-color);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text {
+  aspect-ratio: 24/16;
+  border-radius: var(
+    --denhaag-breadcrumb-dots-border-radius,
+    var(--denhaag-border-radius)
+  );
+  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text::before {
+  color: var(--denhaag-breadcrumb-dots-color, inherit);
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  top: calc(50% - 5px);
+  vertical-align: baseline;
+}
+
+@media (min-width: 481px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-chevron-display: inline-block;
+    --denhaag-breadcrumb-link-icon-content: unset;
+    --denhaag-breadcrumb-link-pointer-events: none;
+    --denhaag-breadcrumb-padding-block: var(
+      --denhaag-breadcrumb-padding-block-md
+    );
+  }
+
+  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
+    --denhaag-breadcrumb-item-display: flex;
+  }
+}
+
+@media (min-width: 1124px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-padding-inline: 0;
+  }
+}
+
+:root {
+  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
+  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
+  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
+  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
+  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
+  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
+  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
+  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
+  --utrecht-breadcrumb-item-padding-inline-start: 14px;
+  --utrecht-breadcrumb-item-padding-inline-end: 14px;
+  --utrecht-breadcrumb-divider-inline-size: 24px;
+  --utrecht-breadcrumb-divider-content: ›;
+  --denhaag-breadcrumb-list-max-width: 67.5rem;
+  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
+  --denhaag-breadcrumb-link-icon-width: 0.875rem;
+  --denhaag-breadcrumb-link-icon-height: 0.875rem;
+  --denhaag-breadcrumb-padding-inline: 0.75rem;
+  --denhaag-breadcrumb-padding-block-md: 0.75rem;
+  --denhaag-breadcrumb-padding-block: 1rem;
+  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
+  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
+  --utrecht-breadcrumb-font-size: var(
+    --denhaag-typography-scale-base-font-size
+  );
+}

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts

@@ -1,17 +1,17 @@
-/**
- * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
- *
- * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
- *
- * Note: we do not use css modules here due to this component being a wrapper
- */
-/// <reference types="react" />
-import "./Breadcrumbs.css";
-interface BreadcrumbsProps {
-    crumbs: {
-        pathname: string;
-        crumbLabel: string;
-    }[];
-}
-export declare const Breadcrumbs: ({ crumbs }: BreadcrumbsProps) => JSX.Element;
-export {};
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+/// <reference types="react" />
+import "./Breadcrumbs.css";
+interface BreadcrumbsProps {
+    crumbs: {
+        pathname: string;
+        crumbLabel: string;
+    }[];
+}
+export declare const Breadcrumbs: ({ crumbs }: BreadcrumbsProps) => JSX.Element;
+export {};

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js

@@ -1,20 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
- *
- * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
- *
- * Note: we do not use css modules here due to this component being a wrapper
- */
-import { Link } from "gatsby";
-import "./Breadcrumbs.css";
-export const Breadcrumbs = ({ crumbs }) => {
-    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "denhaag-breadcrumb", children: _jsx("ol", { className: "denhaag-breadcrumb__list", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: crumbs.map((crumb, idx) => {
-                if (crumbs.length !== idx + 1) {
-                    return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
-                }
-                return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
-            }) }) }));
-};
-const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", shapeRendering: "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
-const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+import { Link } from "gatsby";
+import "./Breadcrumbs.css";
+export const Breadcrumbs = ({ crumbs }) => {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "denhaag-breadcrumb", children: _jsx("ol", { className: "denhaag-breadcrumb__list", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: crumbs.map((crumb, idx) => {
+                if (crumbs.length !== idx + 1) {
+                    return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
+                }
+                return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
+            }) }) }));
+};
+const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", shapeRendering: "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));