@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/page/Page.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Page.module.css');
+var Breadcrumbs = require('../breadcrumbs/Breadcrumbs');
+var Headline = require('../headline/Headline');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Page({
+  header,
+  subheader,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  contentBox = false,
+  disableTopPadding = true,
+  maxWidth,
+  containScrolling = false,
+  children,
+  loading = false
+}) {
+  const showContentBox = contentBox && !disableContentBox;
+  const maxWidthClass = maxWidth ? styles__default.default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
+  const hasHeadline = Boolean(header || subheader || headerAddition);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling} ${disableTopPadding ? styles__default.default.disableTopPadding : ""} ${maxWidthClass}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerMain, children: [
+          breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : null,
+          hasHeadline ? /* @__PURE__ */ jsxRuntime.jsx(
+            Headline.Headline,
+            {
+              disableMargin: true,
+              size: 1,
+              severity,
+              icon: headerIcon,
+              subheader,
+              addition: headerAddition,
+              children: header
+            }
+          ) : null
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${styles__default.default.content} ${loading ? styles__default.default.contentLoading : ""} ${showContentBox ? styles__default.default.contentBox : ""}`,
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Page = Page;

package/dist/components/page/Page.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Page.module.css';
+import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs';
+import { Headline } from '../headline/Headline';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
+
+function Page({
+  header,
+  subheader,
+  severity,
+  headerIcon,
+  headerAddition,
+  breadcrumbs,
+  disableContentBox,
+  contentBox = false,
+  disableTopPadding = true,
+  maxWidth,
+  containScrolling = false,
+  children,
+  loading = false
+}) {
+  const showContentBox = contentBox && !disableContentBox;
+  const maxWidthClass = maxWidth ? styles[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
+  const hasHeadline = Boolean(header || subheader || headerAddition);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.container} ${containScrolling ? styles.containScrolling : styles.documentScrolling} ${disableTopPadding ? styles.disableTopPadding : ""} ${maxWidthClass}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsxs("div", { className: styles.headerMain, children: [
+          breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }) : null,
+          hasHeadline ? /* @__PURE__ */ jsx(
+            Headline,
+            {
+              disableMargin: true,
+              size: 1,
+              severity,
+              icon: headerIcon,
+              subheader,
+              addition: headerAddition,
+              children: header
+            }
+          ) : null
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${styles.content} ${loading ? styles.contentLoading : ""} ${showContentBox ? styles.contentBox : ""}`,
+            children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Page };

package/dist/components/page/Page.module.css

@@ -0,0 +1,95 @@
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.maxWidthSm,
+.maxWidthMd,
+.maxWidthLg {
+  margin-inline: auto;
+  width: 100%;
+}
+
+.maxWidthSm {
+  max-width: 560px;
+}
+.maxWidthMd {
+  max-width: 768px;
+}
+.maxWidthLg {
+  max-width: 1024px;
+}
+
+.containScrolling {
+  height: 100%;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  height: auto;
+  overflow: visible;
+}
+
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-lg) 0;
+  padding-block-end: var(--spacing-lg);
+  gap: var(--spacing-md);
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.disableTopPadding {
+  padding-block-start: 0;
+}
+
+.disableTopPadding .headerContainer {
+  padding-block-start: 0;
+}
+
+.headerMain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.content {
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.contentLoading {
+  flex: 1 1 auto;
+}
+
+.documentScrolling .content {
+  overflow: visible;
+}
+
+.contentBox {
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+@media (max-width: 767px) {
+  .headerContainer {
+    padding-block: var(--spacing-md);
+  }
+
+  .contentBox {
+    padding-block: var(--spacing-md);
+    padding-inline: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}

package/dist/components/page-layout/PageLayout.cjs

@@ -0,0 +1,97 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./PageLayout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function getMaxWidthClass(value, styles2) {
+  if (!value) return "";
+  if (value === "sm") return styles2.maxWidthSm;
+  return styles2.maxWidthMd;
+}
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t == null ? void 0 : t.__PAGE_LAYOUT_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const PageLayoutSidebar = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
+const PageLayoutHeader = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.headerContent} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children }) });
+};
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
+const PageLayoutContent = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.contentInner} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children });
+};
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
+const PageLayoutFooter = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.footerContent} ${getMaxWidthClass(maxWidth, styles__default.default)}`, children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
+const PageLayoutBase = ({
+  children,
+  containScrolling = false,
+  orientation = "vertical"
+}) => {
+  var _a;
+  const { slots, rest } = splitSlots(children);
+  const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsxRuntime.jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
+  const rootClass = [
+    styles__default.default.root,
+    orientation === "vertical" ? styles__default.default.vertical : styles__default.default.horizontal,
+    containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, children: [
+    slots.Sidebar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sidebar, children: slots.Sidebar }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainColumn, children: [
+      slots.Header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: slots.Header }) : null,
+      slots.Hero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.hero, children: slots.Hero }) : null,
+      content || slots.Footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainScroll, children: [
+        content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children: content }) : null,
+        slots.Footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer, children: slots.Footer }) : null
+      ] }) : null
+    ] })
+  ] });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Sidebar: PageLayoutSidebar,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+exports.PageLayout = PageLayout;

package/dist/components/page-layout/PageLayout.d.ts

@@ -24,11 +24,6 @@ export interface PageLayoutFooterProps {
 }
 export interface PageLayoutSidebarProps {
     children: ReactNode;
-    /**
-     * Optional: if your sidebar contains navigation, you might wrap your nav in <nav>.
-     * This component will render an <aside>.
-     */
-    ariaLabel?: string;
 }
 export declare const PageLayout: FC<PageLayoutProps> & {
     Sidebar: FC<PageLayoutSidebarProps>;

package/dist/components/page-layout/PageLayout.js

@@ -0,0 +1,91 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Children, isValidElement } from 'react';
+import styles from './PageLayout.module.css';
+
+function getMaxWidthClass(value, styles2) {
+  if (!value) return "";
+  if (value === "sm") return styles2.maxWidthSm;
+  return styles2.maxWidthMd;
+}
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t == null ? void 0 : t.__PAGE_LAYOUT_SLOT__) != null ? _a : null;
+}
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
+    }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
+}
+const PageLayoutSidebar = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
+const PageLayoutHeader = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${styles.headerContent} ${getMaxWidthClass(maxWidth, styles)}`, children }) });
+};
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
+const PageLayoutContent = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.contentInner} ${getMaxWidthClass(maxWidth, styles)}`, children });
+};
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
+const PageLayoutFooter = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.footerContent} ${getMaxWidthClass(maxWidth, styles)}`, children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
+const PageLayoutBase = ({
+  children,
+  containScrolling = false,
+  orientation = "vertical"
+}) => {
+  var _a;
+  const { slots, rest } = splitSlots(children);
+  const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
+  const rootClass = [
+    styles.root,
+    orientation === "vertical" ? styles.vertical : styles.horizontal,
+    containScrolling ? styles.containScrolling : styles.documentScrolling
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    slots.Sidebar ? /* @__PURE__ */ jsx("div", { className: styles.sidebar, children: slots.Sidebar }) : null,
+    /* @__PURE__ */ jsxs("div", { className: styles.mainColumn, children: [
+      slots.Header ? /* @__PURE__ */ jsx("div", { className: styles.header, children: slots.Header }) : null,
+      slots.Hero ? /* @__PURE__ */ jsx("div", { className: styles.hero, children: slots.Hero }) : null,
+      content || slots.Footer ? /* @__PURE__ */ jsxs("div", { className: styles.mainScroll, children: [
+        content ? /* @__PURE__ */ jsx("div", { className: styles.content, children: content }) : null,
+        slots.Footer ? /* @__PURE__ */ jsx("div", { className: styles.footer, children: slots.Footer }) : null
+      ] }) : null
+    ] })
+  ] });
+};
+const PageLayout = Object.assign(PageLayoutBase, {
+  Sidebar: PageLayoutSidebar,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
+});
+
+export { PageLayout };

package/dist/components/page-layout/PageLayout.module.css

@@ -0,0 +1,236 @@
+/* Root shell */
+.root {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  gap: 0;
+}
+
+/* Viewport handling:
+   - containScrolling => app-shell: lock to viewport and manage scroll in regions
+   - documentScrolling => let page scroll normally
+*/
+.containScrolling {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  min-height: 100vh;
+  min-height: 100dvh;
+  overflow: visible;
+}
+
+/* Orientation layouts */
+.vertical {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.horizontal {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Sidebar */
+.sidebar {
+  min-width: 0;
+  overflow: hidden;
+  background: var(--color-bg-surface);
+}
+
+.containScrolling .sidebar {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* In document-scrolling vertical layouts, keep the sidebar pinned to the viewport
+   and let it manage its own scroll independently of body scrolling. */
+.documentScrolling.vertical .sidebar {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  block-size: 100vh;
+  block-size: 100dvh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* In horizontal orientation, sidebar becomes a top block if used */
+.horizontal .sidebar {
+  grid-column: 1 / -1;
+  border-right: none;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+}
+
+/* Main column:
+   Use flex so the "rest of space" logic works reliably.
+*/
+.mainColumn {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-surface);
+}
+
+/* In containScrolling mode, mainColumn must fill the viewport height
+   so the flex "remaining space" can be computed.
+*/
+.containScrolling .mainColumn {
+  height: 100%;
+  min-height: 0; /* important: allows children to shrink */
+}
+
+/* Regions */
+.header {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-default);
+  flex: 0 0 auto;
+}
+
+/* Sticky header only when the document is scrolling (body scroll) */
+.documentScrolling .header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+
+.hero {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Scroll wrapper: contains content + footer */
+.mainScroll {
+  min-width: 0;
+  min-height: 0; /* CRITICAL for nested flex/scroll */
+  display: flex;
+  flex-direction: column;
+
+  /* This is the "take all remaining space" bit */
+  flex: 1 1 auto;
+
+  /* default: documentScrolling uses normal page flow */
+  overflow: visible;
+}
+
+/* Contained scrolling: mainScroll scrolls (includes footer) */
+.containScrolling .mainScroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Content area (not a scroll container anymore) */
+.content {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto; /* take remaining space inside mainScroll */
+  display: flex; /* lets contentInner stretch */
+  flex-direction: column;
+  align-items: center;
+
+  background: var(--color-bg-surface);
+  padding: var(--spacing-lg) var(--spacing-md);
+  overflow: visible;
+}
+
+.footer {
+  min-width: 0;
+  background: var(--color-bg-surface-subtle);
+  display: flex;
+  justify-content: center;
+
+  /* When there is extra space (content is short), this pushes footer to the bottom.
+     When content is long, footer follows content normally and is reached by scrolling.
+  */
+  margin-top: auto;
+  flex: 0 0 auto;
+}
+
+/* Header slot wrappers */
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-inline: var(--spacing-md);
+}
+
+.headerContent {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.footerContent {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidthMd {
+  max-width: 1600px;
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.maxWidthSm {
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .maxWidthSm {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .maxWidthSm {
+    max-width: 668px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .maxWidthSm {
+    max-width: 924px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .maxWidthSm {
+    max-width: 1180px;
+  }
+}
+
+/* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
+.contentInner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+
+  /* This is what makes your "main content" actually expand to fill */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Optional: for small viewport heights, avoid forced viewport locking */
+@media (max-height: 400px) {
+  .containScrolling {
+    height: auto;
+    overflow: visible;
+  }
+
+  /* In this mode, avoid forcing a nested scroll region */
+  .containScrolling .mainScroll {
+    overflow: visible;
+  }
+
+  .containScrolling .mainColumn {
+    height: auto;
+  }
+}

package/dist/components/page-layout/components/footer/Footer.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var logo = require('../../../../assets/logo');
+var Hyperlink = require('../../../../components/hyperlink/Hyperlink');
+var styles = require('./Footer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const DEFAULT_META_PARTS = [
+  "Tempovej 7-11",
+  "DK-2750 Ballerup",
+  "+45 44 86 77 11",
+  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
+];
+const DEFAULT_LINKS = [
+  {
+    label: "Kundeservice",
+    href: "https://kundeservice.dbc.dk",
+    external: true
+  }
+];
+function Footer({
+  links = DEFAULT_LINKS,
+  metaParts = DEFAULT_META_PARTS,
+  version,
+  extraLinks
+}) {
+  const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
+    (part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
+  ) : metaParts;
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles__default.default.footer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.inner, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.brand, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logoRow, children: /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("address", { className: styles__default.default.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.part, children: part }, part)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: styles__default.default.links, "aria-label": "Footer navigation", children: [
+      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: link }, index))),
+      links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Hyperlink.Hyperlink,
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: link.label
+        }
+      ) }, link.label))
+    ] })
+  ] }) });
+}
+
+exports.Footer = Footer;