@dbcdk/react-components 0.0.97 → 0.0.98

package/dist/index.js

@@ -1846,6 +1846,7 @@ var Tabs_default = {
   label: "Tabs_label",
   badge: "Tabs_badge",
   tabContent: "Tabs_tabContent",
+  loadingContent: "Tabs_loadingContent",
   filled: "Tabs_filled",
   outlined: "Tabs_outlined",
   panelStyle: "Tabs_panelStyle"
@@ -1960,1610 +1961,1693 @@ function Chip({
     }
   );
 }
-var TabsItem = (_props) => {
-  return /* @__PURE__ */ jsx(Fragment, {});
-};
-TabsItem.__TABS_SLOT__ = "Item";
-function getFirstEnabledId(items) {
-  var _a;
-  return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
-}
-function normalizeFromChildren(children) {
-  const items = [];
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    const t = child.type;
-    if ((t == null ? void 0 : t.__TABS_SLOT__) !== "Item") return;
-    const props = child.props;
-    items.push({
-      id: props.id,
-      header: props.header,
-      headerIcon: props.headerIcon,
-      disabled: props.disabled,
-      hidden: props.hidden,
-      badge: props.badge,
-      content: props.children
-    });
-  });
-  return items;
-}
-function Tabs({
-  header,
-  subheader,
-  variant,
-  panelStyle = false,
-  tabs,
-  value,
-  defaultValue,
-  onValueChange,
-  addition,
-  disableTopPadding,
-  children
+function SkeletonLoader({
+  type,
+  rows = 3,
+  columns = 3,
+  variant = "default",
+  speedSec = 3
 }) {
-  const uid = useId();
-  const sourceTabs = useMemo(() => {
-    if (tabs && tabs.length) return tabs;
-    return normalizeFromChildren(children);
-  }, [tabs, children]);
-  const visibleTabs = useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(() => {
-    return defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
-  });
-  const currentValue = isControlled ? value : internalValue;
-  const activeIndex = useMemo(() => {
-    if (!visibleTabs.length) return -1;
-    const idx = visibleTabs.findIndex((t) => t.id === currentValue);
-    return idx >= 0 ? idx : 0;
-  }, [visibleTabs, currentValue]);
-  const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : void 0;
-  const setValue = useCallback(
-    (nextId) => {
-      const idx = visibleTabs.findIndex((t) => t.id === nextId);
-      const tab = idx >= 0 ? visibleTabs[idx] : void 0;
-      if (!tab || tab.disabled) return;
-      if (!isControlled) setInternalValue(nextId);
-      onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
+  const resolvedRows = type === "dataPage" ? rows || 12 : rows;
+  const resolvedColumns = type === "dataPage" ? columns || 4 : columns;
+  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsx(
+    SkeletonLoaderItem,
+    {
+      width,
+      height,
+      radius,
+      variant,
+      speedSec
     },
-    [visibleTabs, isControlled, onValueChange]
+    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
   );
-  useEffect(() => {
-    if (!visibleTabs.length) return;
-    const current = currentValue;
-    const stillValid = visibleTabs.some((t) => t.id === current && !t.disabled);
-    if (stillValid) return;
-    const next = getFirstEnabledId(visibleTabs);
-    if (next === void 0) return;
-    setValue(next);
-  }, [visibleTabs, currentValue, setValue]);
-  const onKeyDownTab = useCallback(
-    (e, index) => {
-      var _a;
-      const enabled = visibleTabs.filter((t) => !t.disabled);
-      if (!enabled.length) return;
-      const currentId = (_a = visibleTabs[index]) == null ? void 0 : _a.id;
-      const currentEnabledIndex = enabled.findIndex((t) => t.id === currentId);
-      const focusAndSelect = (enabledIndex) => {
-        const nextTab = enabled[enabledIndex];
-        if (!nextTab) return;
-        const btn = document.getElementById(
-          `${uid}-tab-${String(nextTab.id)}`
-        );
-        btn == null ? void 0 : btn.focus();
-        setValue(nextTab.id);
-      };
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        focusAndSelect((currentEnabledIndex + 1) % enabled.length);
-      } else if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
-      } else if (e.key === "Home") {
-        e.preventDefault();
-        focusAndSelect(0);
-      } else if (e.key === "End") {
-        e.preventDefault();
-        focusAndSelect(enabled.length - 1);
-      }
+  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
+    SkeletonLoaderItem,
+    {
+      width: 80 + i % 3 * 30,
+      height: 30,
+      radius: 6,
+      variant,
+      speedSec,
+      ariaLabel: "Loading filter"
     },
-    [uid, visibleTabs, setValue]
+    `pill-${i}`
+  ));
+  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
+    SkeletonLoaderItem,
+    {
+      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
+      height: 12,
+      radius: 4,
+      variant,
+      speedSec,
+      ariaLabel: "Loading text line"
+    },
+    `text-${i}`
+  ));
+  const tableHeaderRow = () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: resolvedColumns }).map((_, i) => /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          height: 20,
+          width: "90%",
+          radius: 6,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table header"
+        },
+        `thead-${i}`
+      ))
+    }
   );
-  return /* @__PURE__ */ jsxs("div", { className: Tabs_default.root, children: [
-    header ? /* @__PURE__ */ jsx(
+  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: resolvedColumns }).map((_, colIndex) => /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          height: 20,
+          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
+          radius: 4,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table cell"
+        },
+        `tcell-${rowIndex}-${colIndex}`
+      ))
+    },
+    `trow-${rowIndex}`
+  );
+  const inputFieldRow = (i) => {
+    const labelW = i % 3 === 0 ? "34%" : i % 3 === 1 ? "42%" : "28%";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: [Tabs_default.headerContainer, disableTopPadding ? Tabs_default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: `${Tabs_default.tabs} ${Tabs_default[variant]} ${panelStyle ? Tabs_default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsx("div", { className: Tabs_default.tabList, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
-        const selected = index === activeIndex;
-        const tabDomId = `${uid}-tab-${String(tab.id)}`;
-        const panelDomId = `${uid}-panel-${String(tab.id)}`;
-        return /* @__PURE__ */ jsx("div", { className: `${Tabs_default.tab} ${selected ? Tabs_default.active : ""}`, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            id: tabDomId,
-            type: "button",
-            className: Tabs_default.tabButton,
-            role: "tab",
-            "aria-selected": selected,
-            "aria-controls": panelDomId,
-            tabIndex: selected ? 0 : -1,
-            disabled: tab.disabled,
-            onClick: () => setValue(tab.id),
-            onKeyDown: (e) => onKeyDownTab(e, index),
-            children: [
-              tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: Tabs_default.icon, children: tab.headerIcon }) : null,
-              /* @__PURE__ */ jsx("span", { className: Tabs_default.label, children: tab.header }),
-              tab.badge ? /* @__PURE__ */ jsx("span", { className: Tabs_default.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-            ]
-          }
-        ) }, tab.id);
-      }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
-          role: "tabpanel",
-          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
-          className: Tabs_default.tabContent,
-          children: activeTab == null ? void 0 : activeTab.content
-        }
-      )
-    ] })
-  ] });
-}
-Tabs.Item = TabsItem;
-function CollapsibleHeadline({
-  header,
-  expanded,
-  onToggle,
-  controls,
-  addition,
-  storageKey,
-  children,
-  size = 2,
-  variant = "muted",
-  weight = 400,
-  ...headlineProps
-}) {
-  const generatedId = useId();
-  const panelId = controls != null ? controls : generatedId;
-  const [internalExpanded, setInternalExpanded] = useState(() => {
-    if (!storageKey || typeof window === "undefined") return expanded != null ? expanded : true;
-    const stored = localStorage.getItem(storageKey);
-    return stored !== null ? stored === "true" : expanded != null ? expanded : true;
-  });
-  const isExpanded = storageKey ? internalExpanded : expanded != null ? expanded : false;
-  const handleToggle = () => {
-    if (storageKey) {
-      const next = !internalExpanded;
-      setInternalExpanded(next);
-      localStorage.setItem(storageKey, String(next));
-    }
-    onToggle == null ? void 0 : onToggle();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: Headline_default.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxs(
-      Headline,
-      {
-        ...headlineProps,
-        variant,
-        weight,
-        size,
-        addition,
+        style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
         children: [
-          header,
           /* @__PURE__ */ jsx(
-            Button,
+            "div",
             {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12
+              },
               children: /* @__PURE__ */ jsx(
-                ChevronDown,
+                SkeletonLoaderItem,
                 {
-                  "aria-hidden": true,
-                  className: [Headline_default.toggleChevron, isExpanded ? Headline_default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                  width: labelW,
+                  height: 10,
+                  radius: 4,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading label"
                 }
               )
             }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 25,
+              radius: 8,
+              variant,
+              speedSec,
+              ariaLabel: "Loading input"
+            }
           )
         ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: Headline_default.collapsiblePanel, children })
-  ] });
-}
-
-// src/components/page-layout/components/page-layout-hero/PageLayoutHero.module.css
-var PageLayoutHero_default = {
-  heroContainer: "PageLayoutHero_heroContainer",
-  splitWrapper: "PageLayoutHero_splitWrapper",
-  imageColumn: "PageLayoutHero_imageColumn",
-  textColumn: "PageLayoutHero_textColumn",
-  textInner: "PageLayoutHero_textInner",
-  metaHeadline: "PageLayoutHero_metaHeadline",
-  headline: "PageLayoutHero_headline"
-};
-
-// src/components/page-layout/PageLayout.module.css
-var PageLayout_default = {
-  root: "PageLayout_root",
-  containScrolling: "PageLayout_containScrolling",
-  documentScrolling: "PageLayout_documentScrolling",
-  vertical: "PageLayout_vertical",
-  horizontal: "PageLayout_horizontal",
-  sidebar: "PageLayout_sidebar",
-  mainColumn: "PageLayout_mainColumn",
-  header: "PageLayout_header",
-  hero: "PageLayout_hero",
-  mainScroll: "PageLayout_mainScroll",
-  content: "PageLayout_content",
-  footer: "PageLayout_footer",
-  headerContainer: "PageLayout_headerContainer",
-  headerContent: "PageLayout_headerContent",
-  footerContent: "PageLayout_footerContent",
-  maxWidthMd: "PageLayout_maxWidthMd",
-  maxWidthSm: "PageLayout_maxWidthSm",
-  contentInner: "PageLayout_contentInner"
-};
-function getMaxWidthClass(value) {
-  if (!value) return "";
-  if (value === "sm") return PageLayout_default.maxWidthSm;
-  return PageLayout_default.maxWidthMd;
-}
-var PageLayoutHero = ({
-  children,
-  link,
-  metaHeadline,
-  headline,
-  image,
-  maxWidth = "md",
-  textBgColor = "var(--color-primary-900)"
-}) => {
-  const content = /* @__PURE__ */ jsx("div", { className: `${PageLayoutHero_default.heroContainer} ${getMaxWidthClass(maxWidth)}`, children: /* @__PURE__ */ jsxs("div", { className: PageLayoutHero_default.splitWrapper, children: [
-    /* @__PURE__ */ jsx("div", { className: PageLayoutHero_default.imageColumn, children: image }),
-    /* @__PURE__ */ jsx("div", { className: PageLayoutHero_default.textColumn, style: { backgroundColor: textBgColor }, children: /* @__PURE__ */ jsxs("div", { className: PageLayoutHero_default.textInner, children: [
-      metaHeadline && /* @__PURE__ */ jsx("div", { className: PageLayoutHero_default.metaHeadline, children: metaHeadline }),
-      headline && /* @__PURE__ */ jsx("div", { className: PageLayoutHero_default.headline, children: /* @__PURE__ */ jsx("h2", { children: headline }) }),
-      children
-    ] }) })
-  ] }) });
-  return link ? /* @__PURE__ */ jsx(Fragment, { children: link(content) }) : /* @__PURE__ */ jsx(Fragment, { children: content });
-};
-function getMaxWidthClass2(value, styles) {
-  if (!value) return "";
-  if (value === "sm") return styles.maxWidthSm;
-  return styles.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 };
-}
-var PageLayoutSidebar = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx(Fragment, { children });
-};
-PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
-var PageLayoutHeader = ({
-  maxWidth = false,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: PageLayout_default.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.headerContent} ${getMaxWidthClass2(maxWidth, PageLayout_default)}`, children }) });
-};
-PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
-var PageLayoutContent = ({
-  maxWidth = false,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.contentInner} ${getMaxWidthClass2(maxWidth, PageLayout_default)}`, children });
-};
-PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
-var PageLayoutFooter = ({
-  maxWidth = false,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.footerContent} ${getMaxWidthClass2(maxWidth, PageLayout_default)}`, children });
-};
-PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
-PageLayoutHero.__PAGE_LAYOUT_SLOT__ = "Hero";
-var PageLayoutBase = ({
-  children,
-  containScrolling = false,
-  orientation = "vertical"
-}) => {
-  var _a, _b;
-  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 = [
-    PageLayout_default.root,
-    orientation === "vertical" ? PageLayout_default.vertical : PageLayout_default.horizontal,
-    containScrolling ? PageLayout_default.containScrolling : PageLayout_default.documentScrolling
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    slots.Sidebar ? /* @__PURE__ */ jsx("aside", { className: PageLayout_default.sidebar, "aria-label": (_b = slots.Sidebar.props) == null ? void 0 : _b.ariaLabel, children: slots.Sidebar }) : null,
-    /* @__PURE__ */ jsxs("div", { className: PageLayout_default.mainColumn, children: [
-      slots.Header ? /* @__PURE__ */ jsx("header", { className: PageLayout_default.header, children: slots.Header }) : null,
-      slots.Hero ? /* @__PURE__ */ jsx("div", { className: PageLayout_default.hero, children: slots.Hero }) : null,
-      content || slots.Footer ? /* @__PURE__ */ jsxs("div", { className: PageLayout_default.mainScroll, children: [
-        content ? /* @__PURE__ */ jsx("main", { className: PageLayout_default.content, children: content }) : null,
-        slots.Footer ? /* @__PURE__ */ jsx("footer", { className: PageLayout_default.footer, children: slots.Footer }) : null
-      ] }) : null
+      },
+      `if-${i}`
+    );
+  };
+  const inputFieldList = (count) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
+    Array.from({ length: count }).map((_, i) => inputFieldRow(i)),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          width: 110,
+          height: 30,
+          radius: 8,
+          variant,
+          speedSec,
+          ariaLabel: "Loading action"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          width: 90,
+          height: 30,
+          radius: 8,
+          variant,
+          speedSec,
+          ariaLabel: "Loading action"
+        }
+      )
     ] })
   ] });
-};
-var PageLayout = Object.assign(PageLayoutBase, {
-  Sidebar: PageLayoutSidebar,
-  Header: PageLayoutHeader,
-  Hero: PageLayoutHero,
-  Content: PageLayoutContent,
-  Footer: PageLayoutFooter
-});
-
-// src/components/hyperlink/Hyperlink.module.css
-var Hyperlink_default = {
-  link: "Hyperlink_link",
-  secondary: "Hyperlink_secondary",
-  primary: "Hyperlink_primary",
-  block: "Hyperlink_block",
-  content: "Hyperlink_content",
-  icon: "Hyperlink_icon"
-};
-function cx2(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function renderInner(children, icon) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: Hyperlink_default.content, children }),
-    icon && /* @__PURE__ */ jsx("span", { className: Hyperlink_default.icon, children: icon })
-  ] });
-}
-function Hyperlink(props) {
-  var _a;
-  const {
-    children,
-    icon,
-    className,
-    asChild,
-    as = "a",
-    variant = "primary",
-    inline = true,
-    ...rest
-  } = props;
-  const linkClassName = cx2(
-    Hyperlink_default.link,
-    className,
-    variant === "secondary" ? Hyperlink_default.secondary : Hyperlink_default.primary,
-    inline ? "" : Hyperlink_default.block
-  );
-  if (asChild) {
-    const child = React20.Children.only(children);
-    if (!React20.isValidElement(child)) {
-      throw new Error("Hyperlink with asChild expects a single valid React element as its child.");
-    }
-    const childProps = (_a = child.props) != null ? _a : {};
-    return React20.cloneElement(child, {
-      ...childProps,
-      ...rest,
-      className: cx2(childProps.className, linkClassName),
-      children: renderInner(childProps.children, icon),
-      onClick: (e) => {
-        e.stopPropagation();
-        if (childProps.onClick) {
-          childProps.onClick(e);
-        }
-      }
-    });
-  }
-  if (as === "button") {
+  const squares = () => {
+    const gap = 12;
+    const squareSize = `min(calc((100% - ${(resolvedColumns - 1) * gap}px) / ${resolvedColumns}), calc((100% - ${(resolvedRows - 1) * gap}px) / ${resolvedRows}))`;
+    const gridTemplateColumns = resolvedColumns === 1 ? "repeat(1, 100%)" : `repeat(${resolvedColumns}, ${squareSize})`;
     return /* @__PURE__ */ jsx(
-      "button",
+      "div",
       {
-        type: "button",
-        className: linkClassName,
-        ...rest,
-        children: renderInner(children, icon)
+        style: {
+          display: "grid",
+          gridTemplateColumns,
+          gridTemplateRows: `repeat(${resolvedRows}, ${squareSize})`,
+          gap,
+          justifyContent: "center",
+          alignContent: "center",
+          width: "100%",
+          height: "100%",
+          minHeight: 0,
+          flexGrow: 1
+        },
+        children: Array.from({ length: resolvedRows * resolvedColumns }).map((_, i) => /* @__PURE__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: "100%",
+            height: "100%",
+            radius: 8,
+            variant,
+            speedSec,
+            ariaLabel: "Loading square"
+          },
+          `square-${i}`
+        ))
       }
     );
-  }
-  return /* @__PURE__ */ jsx(
-    "a",
+  };
+  const filterbar = () => /* @__PURE__ */ jsxs(
+    "div",
     {
-      onClick: (e) => e.stopPropagation(),
-      className: linkClassName,
-      ...rest,
-      children: renderInner(children, icon)
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(resolvedColumns) }),
+        /* @__PURE__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: 240,
+            height: 30,
+            variant,
+            speedSec,
+            ariaLabel: "Loading"
+          }
+        )
+      ]
     }
   );
-}
-
-// src/components/page-layout/components/layout-footer/LayoutFooter.module.css
-var LayoutFooter_default = {
-  footer: "LayoutFooter_footer",
-  inner: "LayoutFooter_inner",
-  brand: "LayoutFooter_brand",
-  logoRow: "LayoutFooter_logoRow",
-  meta: "LayoutFooter_meta",
-  part: "LayoutFooter_part",
-  links: "LayoutFooter_links"};
-var DEFAULT_META_PARTS = [
-  "Tempovej 7-11",
-  "DK-2750 Ballerup",
-  "+45 44 86 77 11",
-  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
-];
-var DEFAULT_LINKS = [
-  {
-    label: "Kundeservice",
-    href: "https://kundeservice.dbc.dk",
-    external: true
-  },
-  {
-    label: "Cookies",
-    href: "/cookies"
-  }
-];
-function LayoutFooter({
-  links = DEFAULT_LINKS,
-  metaParts = DEFAULT_META_PARTS,
-  extraLinks
-}) {
-  return /* @__PURE__ */ jsx("footer", { className: LayoutFooter_default.footer, children: /* @__PURE__ */ jsxs("div", { className: LayoutFooter_default.inner, children: [
-    /* @__PURE__ */ jsxs("div", { className: LayoutFooter_default.brand, children: [
-      /* @__PURE__ */ jsx("div", { className: LayoutFooter_default.logoRow, children: /* @__PURE__ */ jsx(Logo, {}) }),
-      /* @__PURE__ */ jsx("address", { className: LayoutFooter_default.meta, children: metaParts.map((part) => /* @__PURE__ */ jsx("span", { className: LayoutFooter_default.part, children: part }, part)) })
-    ] }),
-    /* @__PURE__ */ jsxs("nav", { className: LayoutFooter_default.links, "aria-label": "Footer navigation", children: [
-      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsx("span", { children: link }, index))),
-      links.map((link) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-        Hyperlink,
-        {
-          href: link.href,
-          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-          children: link.label
-        }
-      ) }, link.label))
-    ] })
-  ] }) });
-}
-
-// src/components/clear-button/ClearButton.module.css
-var ClearButton_default = {
-  clearButton: "ClearButton_clearButton",
-  button: "ClearButton_button",
-  absolute: "ClearButton_absolute"
-};
-function ClearButton({ onClick, absolute }) {
-  return /* @__PURE__ */ jsx("span", { className: `${ClearButton_default.clearButton} ${absolute ? ClearButton_default.absolute : ""}`, children: /* @__PURE__ */ jsx(
-    "button",
+  const table = () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+    tableHeaderRow(),
+    Array.from({ length: resolvedRows }).map((_, r) => tableBodyRow(r))
+  ] });
+  const dataPageHeader = () => /* @__PURE__ */ jsxs(
+    "div",
     {
-      className: ClearButton_default.button,
-      type: "button",
-      "data-input-role": "clear",
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(e);
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 16,
+        flexWrap: "wrap",
+        width: "100%"
       },
-      children: /* @__PURE__ */ jsx(X, { size: 16 })
-    }
-  ) });
-}
-
-// src/components/forms/input/Input.module.css
-var Input_default = {
-  container: "Input_container",
-  fullWidth: "Input_fullWidth",
-  field: "Input_field",
-  input: "Input_input",
-  withButton: "Input_withButton",
-  withClear: "Input_withClear",
-  withInlineClear: "Input_withInlineClear",
-  outlined: "Input_outlined",
-  surface: "Input_surface",
-  subtle: "Input_subtle",
-  embedded: "Input_embedded",
-  standalone: "Input_standalone",
-  modified: "Input_modified",
-  xs: "Input_xs",
-  sm: "Input_sm",
-  md: "Input_md",
-  lg: "Input_lg",
-  fieldWithIcon: "Input_fieldWithIcon",
-  icon: "Input_icon",
-  withTrailingLabel: "Input_withTrailingLabel",
-  trailingLabel: "Input_trailingLabel",
-  trailingButton: "Input_trailingButton",
-  startAdornment: "Input_startAdornment",
-  endAdornment: "Input_endAdornment",
-  clearSlot: "Input_clearSlot"
-};
-function mergeRefs2(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
+      children: [
+        /* @__PURE__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: "32%",
+            height: 24,
+            radius: 6,
+            variant,
+            speedSec,
+            ariaLabel: "Loading page header"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { display: "flex", gap: 12, justifyContent: "flex-end", marginInlineStart: "auto" },
+            children: [
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 110,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-  };
-}
-var Input = forwardRef(function Input2({
-  label,
-  error,
-  helpText,
-  orientation = "vertical",
-  labelWidth = "160px",
-  fullWidth = false,
-  required,
-  tooltip,
-  tooltipPlacement = "right",
-  modified = false,
-  icon,
-  autoFocus,
-  minWidth,
-  width,
-  maxWidth,
-  inputSize = "md",
-  variant = "outlined",
-  onClear,
-  onButtonClick,
-  buttonDisabled = false,
-  buttonLabel,
-  buttonIcon,
-  trailingLabel,
-  id,
-  tooltipOpenOnFocus = true,
-  style,
-  className,
-  fieldClassName,
-  inputClassName,
-  startAdornment,
-  endAdornment,
-  ...inputProps
-}, ref) {
-  const inputRef = useRef(null);
-  const reactId = useId();
-  const inputId = id != null ? id : `input-${reactId}`;
-  useEffect(() => {
-    var _a;
-    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, [autoFocus]);
-  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
-  const hasTrailingLabel = Boolean(trailingLabel);
-  const hasValue = Boolean(inputProps.value);
-  const hasVisibleClear = Boolean(onClear && hasValue);
-  const hasEndAdornment = Boolean(endAdornment);
-  const reservesInlineClearSlot = Boolean(onClear);
-  const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
-  const rootStyle = {
-    ...style != null ? style : {},
-    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
-    ...width ? { ["--input-width"]: width } : null,
-    ...maxWidth ? { ["--input-max-width"]: maxWidth } : null
-  };
-  const { triggerProps } = useTooltipTrigger({
-    content: tooltip,
-    placement: tooltipPlacement,
-    offset: 8,
-    delayOpenMs: 0,
-    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
-    closeOnPointerDown: false
-  });
-  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
-  return /* @__PURE__ */ jsx(
-    InputContainer,
-    {
-      label,
-      labelAction: inputProps.labelAction,
-      htmlFor: inputId,
-      fullWidth,
-      error,
-      helpText,
-      orientation,
-      labelWidth,
-      required,
-      modified,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: rootStyle,
-          className: [
-            Input_default.container,
-            fullWidth ? Input_default.fullWidth : "",
-            onClear ? Input_default.withClear : "",
-            hasInlineClear ? Input_default.withInlineClear : "",
-            hasButton ? Input_default.withButton : "",
-            hasTrailingLabel ? Input_default.withTrailingLabel : "",
-            className != null ? className : ""
-          ].filter(Boolean).join(" "),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: [
-                  Input_default.field,
-                  Input_default[variant],
-                  icon ? Input_default.fieldWithIcon : "",
-                  inputSize ? Input_default[inputSize] : "",
-                  modified ? Input_default.modified : "",
-                  fieldClassName != null ? fieldClassName : ""
-                ].filter(Boolean).join(" "),
-                "data-forminput": "field",
-                "data-modified": modified ? "true" : void 0,
-                "aria-disabled": inputProps.disabled ? "true" : void 0,
-                ...tooltip ? triggerProps : {},
-                children: [
-                  icon && /* @__PURE__ */ jsx("span", { className: Input_default.icon, "data-input-role": "icon", children: icon }),
-                  startAdornment && /* @__PURE__ */ jsx("span", { className: Input_default.startAdornment, "data-input-role": "start-adornment", children: startAdornment }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ...inputProps,
-                      id: inputId,
-                      ref: mergeRefs2(inputRef, ref),
-                      className: [Input_default.input, inputSize ? Input_default[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
-                    }
-                  ),
-                  (reservesInlineClearSlot || hasEndAdornment) && /* @__PURE__ */ jsxs("span", { className: Input_default.endAdornment, "data-input-role": "end-adornment", children: [
-                    reservesInlineClearSlot ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: Input_default.clearSlot,
-                        "aria-hidden": hasVisibleClear ? void 0 : "true",
-                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) : null
-                      }
-                    ) : null,
-                    endAdornment
-                  ] }),
-                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true }) : null
-                ]
-              }
-            ),
-            hasTrailingLabel && /* @__PURE__ */ jsx(
-              "span",
+  );
+  const getSkeletonItems = () => {
+    switch (type) {
+      case "button": {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              justifyContent: "flex-start",
+              width: "100%",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 120,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              )
+            ]
+          }
+        );
+      }
+      case "card": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 160,
+              radius: 12,
+              variant,
+              speedSec,
+              ariaLabel: "Loading card media"
+            }
+          ),
+          line("60%", 16, 6),
+          textBlock(3),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
+            /* @__PURE__ */ jsx(
+              SkeletonLoaderItem,
               {
-                className: [Input_default.trailingLabel, inputSize ? Input_default[inputSize] : ""].filter(Boolean).join(" "),
-                children: trailingLabel
+                width: 100,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
               }
             ),
-            hasButton && /* @__PURE__ */ jsxs(
-              Button,
+            /* @__PURE__ */ jsx(
+              SkeletonLoaderItem,
               {
-                onClick: onButtonClick,
-                disabled: buttonDisabled,
-                className: Input_default.trailingButton,
-                type: "button",
-                variant: trailingButtonVariant,
-                size: inputSize,
-                children: [
-                  buttonIcon != null ? buttonIcon : null,
-                  buttonLabel != null ? buttonLabel : null
-                ]
+                width: 72,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
               }
             )
-          ]
-        }
-      )
+          ] })
+        ] });
+      }
+      case "avatar": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: 48,
+              height: 48,
+              radius: "50%",
+              variant,
+              speedSec,
+              ariaLabel: "Loading avatar"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
+            line("40%", 14),
+            line("25%", 12)
+          ] })
+        ] });
+      }
+      case "text": {
+        return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(resolvedRows) });
+      }
+      case "table": {
+        return table();
+      }
+      case "filterbar": {
+        return filterbar();
+      }
+      case "inputFieldList": {
+        return inputFieldList(resolvedRows);
+      }
+      case "squares": {
+        return squares();
+      }
+      case "dataPage": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                paddingBottom: 16,
+                borderBottom: "var(--border-width-thin) solid var(--color-border-subtle)"
+              },
+              children: dataPageHeader()
+            }
+          ),
+          table()
+        ] });
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading content",
+      style: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        gap: 16,
+        width: "100%",
+        height: type === "squares" ? "100%" : void 0
+      },
+      children: getSkeletonItems()
     }
   );
-});
-Input.displayName = "Input";
-
-// src/components/search-box/SearchBox.module.css
-var SearchBox_default = {
-  resultContainer: "SearchBox_resultContainer",
-  suggestionTable: "SearchBox_suggestionTable",
-  suggestionRow: "SearchBox_suggestionRow",
-  suggestionCell: "SearchBox_suggestionCell",
-  suggestionRowActive: "SearchBox_suggestionRowActive"
+}
+var TabsItem = (_props) => {
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
-var SearchBox = forwardRef(function SearchBoxInner({
-  inputWidth,
-  maxWidth,
-  inputSize,
+TabsItem.__TABS_SLOT__ = "Item";
+function getFirstEnabledId(items) {
+  var _a;
+  return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
+}
+function normalizeFromChildren(children) {
+  const items = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const t = child.type;
+    if ((t == null ? void 0 : t.__TABS_SLOT__) !== "Item") return;
+    const props = child.props;
+    items.push({
+      id: props.id,
+      header: props.header,
+      headerIcon: props.headerIcon,
+      disabled: props.disabled,
+      hidden: props.hidden,
+      badge: props.badge,
+      content: props.children
+    });
+  });
+  return items;
+}
+function Tabs({
+  header,
+  subheader,
   variant,
-  result,
-  debounce = true,
-  debounceMs = 800,
-  onSearch,
-  onSelect,
-  displayPopover,
-  resultKeys,
-  resultTemplate,
-  initialTemplate,
-  popoverMinWidth = "500px",
-  noResultText = "Ingen resultater",
-  loading,
-  enableHotkey = true,
-  onButtonClick,
-  buttonLabel,
-  buttonIcon,
-  fullWidth = false,
+  panelStyle = false,
+  tabs,
   value,
-  onChange,
-  ...rest
-}, ref) {
+  defaultValue,
+  onValueChange,
+  addition,
+  disableTopPadding,
+  loading = false,
+  children
+}) {
+  const uid = useId();
+  const sourceTabs = useMemo(() => {
+    if (tabs && tabs.length) return tabs;
+    return normalizeFromChildren(children);
+  }, [tabs, children]);
+  const visibleTabs = useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
   const isControlled = value !== void 0;
-  const [draft, setDraft] = useState(() => isControlled ? String(value != null ? value : "") : "");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [activeIndex, setActiveIndex] = useState(null);
-  const popoverRef = useRef(null);
-  const internalInputRef = useRef(null);
-  useEffect(() => {
-    if (typeof ref === "function") {
-      ref(internalInputRef.current);
-    } else if (ref) {
-      ref.current = internalInputRef.current;
-    }
-  }, [ref]);
-  useEffect(() => {
-    if (!isControlled) return;
-    const next = String(value != null ? value : "");
-    if (next !== draft) setDraft(next);
-  }, [value]);
-  useEffect(() => {
-    if (!onSearch) return;
-    if (!debounce) {
-      setSearchQuery(draft);
-      onSearch(draft);
-      return;
-    }
-    const handler = setTimeout(() => {
-      setSearchQuery(draft);
-      onSearch(draft);
-    }, debounceMs);
-    return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  const [internalValue, setInternalValue] = useState(() => {
+    return defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  });
+  const currentValue = isControlled ? value : internalValue;
+  const activeIndex = useMemo(() => {
+    if (!visibleTabs.length) return -1;
+    const idx = visibleTabs.findIndex((t) => t.id === currentValue);
+    return idx >= 0 ? idx : 0;
+  }, [visibleTabs, currentValue]);
+  const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : void 0;
+  const setValue = useCallback(
+    (nextId) => {
+      const idx = visibleTabs.findIndex((t) => t.id === nextId);
+      const tab = idx >= 0 ? visibleTabs[idx] : void 0;
+      if (!tab || tab.disabled) return;
+      if (!isControlled) setInternalValue(nextId);
+      onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
+    },
+    [visibleTabs, isControlled, onValueChange]
+  );
   useEffect(() => {
-    function handleKeyDown(event) {
+    if (!visibleTabs.length) return;
+    const current = currentValue;
+    const stillValid = visibleTabs.some((t) => t.id === current && !t.disabled);
+    if (stillValid) return;
+    const next = getFirstEnabledId(visibleTabs);
+    if (next === void 0) return;
+    setValue(next);
+  }, [visibleTabs, currentValue, setValue]);
+  const onKeyDownTab = useCallback(
+    (e, index) => {
       var _a;
-      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
+      const enabled = visibleTabs.filter((t) => !t.disabled);
+      if (!enabled.length) return;
+      const currentId = (_a = visibleTabs[index]) == null ? void 0 : _a.id;
+      const currentEnabledIndex = enabled.findIndex((t) => t.id === currentId);
+      const focusAndSelect = (enabledIndex) => {
+        const nextTab = enabled[enabledIndex];
+        if (!nextTab) return;
+        const btn = document.getElementById(
+          `${uid}-tab-${String(nextTab.id)}`
+        );
+        btn == null ? void 0 : btn.focus();
+        setValue(nextTab.id);
+      };
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex + 1) % enabled.length);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusAndSelect(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusAndSelect(enabled.length - 1);
       }
-    }
-    if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [enableHotkey]);
-  const handleChange = React20__default.useCallback(
-    (e) => {
-      setDraft(e.target.value);
-      onChange == null ? void 0 : onChange(e);
-    },
-    [onChange]
-  );
-  const handleSelect = React20__default.useCallback(
-    (item) => {
-      onSelect == null ? void 0 : onSelect(item);
-      reset();
     },
-    [onSelect]
+    [uid, visibleTabs, setValue]
   );
-  function reset() {
-    var _a;
-    setDraft("");
-    setSearchQuery("");
-    setActiveIndex(null);
-    (_a = popoverRef.current) == null ? void 0 : _a.close();
-  }
-  const handleClear = React20__default.useCallback(() => {
-    var _a;
-    reset();
-    onSearch == null ? void 0 : onSearch("");
-    (_a = internalInputRef.current) == null ? void 0 : _a.focus();
-  }, [onSearch]);
-  useEffect(() => {
-    setActiveIndex(null);
-  }, [result]);
-  const inputField = useMemo(() => {
-    var _a;
-    const inputProps = {
-      ...rest,
-      value: draft,
-      onChange: handleChange
-    };
-    const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
-    const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
-    if (displayPopover) {
-      return /* @__PURE__ */ jsx(
-        Popover,
-        {
-          ref: popoverRef,
-          minWidth: popoverMinWidth,
-          fullWidth,
-          trigger: (event) => {
-            var _a2;
-            return /* @__PURE__ */ jsx(
-              Input,
-              {
-                ref: internalInputRef,
-                onFocusCapture: event,
-                onClick: () => {
-                  var _a3, _b;
-                  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
-                },
-                minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
-                width: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
-                fullWidth,
-                icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
-                inputSize,
-                variant,
-                autoComplete: "off",
-                onClear: handleClear,
-                onButtonClick,
-                buttonLabel,
-                buttonIcon: trailingButtonIcon,
-                ...inputProps,
-                onKeyDown: (e) => {
-                  var _a3;
-                  if (result == null ? void 0 : result.length) {
-                    if (e.key === "ArrowDown") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1
-                      );
-                    } else if (e.key === "ArrowUp") {
-                      e.preventDefault();
-                      setActiveIndex(
-                        (prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1
-                      );
-                    } else if (e.key === "Enter") {
-                      e.preventDefault();
-                      if (activeIndex !== null) {
-                        handleSelect(result[activeIndex]);
-                      } else if (onButtonClick) {
-                        onButtonClick();
-                      }
-                    } else if (e.key === "Escape") {
-                      reset();
-                    }
-                  }
-                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
-                },
-                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
-              }
-            );
-          },
-          children: resultTemplate ? resultTemplate : (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("table", { className: SearchBox_default.suggestionTable, children: /* @__PURE__ */ jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsx(
-            "tr",
-            {
-              onClick: () => handleSelect(item),
-              role: "button",
-              tabIndex: 0,
-              className: `${SearchBox_default.suggestionRow}${index === activeIndex ? ` ${SearchBox_default.suggestionRowActive}` : ""}`,
-              children: resultKeys == null ? void 0 : resultKeys.map((key) => {
-                const raw = item[key];
-                const cell = raw != null ? String(raw) : "";
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    className: SearchBox_default.suggestionCell,
-                    style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
-                    children: cell
-                  },
-                  key
-                );
-              })
-            },
-            index
-          )) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsx("div", { className: SearchBox_default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key)) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: SearchBox_default.resultContainer, children: noResultText })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      Input,
+  return /* @__PURE__ */ jsxs("div", { className: Tabs_default.root, children: [
+    header ? /* @__PURE__ */ jsx(
+      "div",
       {
-        ref: internalInputRef,
-        icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
-        minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
-        fullWidth,
-        inputSize,
-        variant,
-        onClear: handleClear,
-        onButtonClick,
-        buttonLabel,
-        buttonIcon: trailingButtonIcon,
-        ...inputProps,
-        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
-      }
-    );
-  }, [
-    rest,
-    draft,
-    handleChange,
-    handleClear,
-    displayPopover,
-    inputWidth,
-    inputSize,
-    variant,
-    popoverMinWidth,
-    resultTemplate,
-    result,
-    searchQuery,
-    loading,
-    initialTemplate,
-    noResultText,
-    resultKeys,
-    handleSelect,
-    activeIndex,
-    onButtonClick,
-    buttonLabel,
-    buttonIcon,
-    fullWidth
-  ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        ...fullWidth ? { width: "100%" } : void 0,
-        ...maxWidth !== void 0 ? { maxWidth } : void 0
-      },
-      children: inputField
-    }
-  );
-});
-var THEME_VARIANTS = ["light", "dark", "system"];
-var STORAGE_KEY = "dbc_theme";
-function isThemeVariant(x) {
-  return !!x && THEME_VARIANTS.includes(x);
-}
-function getCookie(name) {
-  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-  return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-  try {
-    localStorage.setItem(STORAGE_KEY, id);
-  } catch {
-    console.error("Failed to access localStorage");
-  }
-  try {
-    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
-      id
-    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-  } catch {
-    console.error("Failed to set theme cookie");
-  }
-}
-function getTheme() {
-  return document.documentElement.dataset.theme;
-}
-function applyTheme(id) {
-  document.documentElement.dataset.theme = id;
-}
-function useTheme(initialTheme = "system") {
-  const [theme, setTheme] = useState(null);
-  useEffect(() => {
-    const themeFromDataAttributes = getTheme();
-    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-    const fromCookie = getCookie(STORAGE_KEY);
-    if (isThemeVariant(fromCookie)) {
-      resolved = fromCookie;
-    } else {
-      try {
-        const fromStorage = localStorage.getItem(STORAGE_KEY);
-        if (isThemeVariant(fromStorage)) resolved = fromStorage;
-      } catch {
-        console.error("Failed to access localStorage");
+        className: [Tabs_default.headerContainer, disableTopPadding ? Tabs_default.disableTopPadding : ""].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
-    }
-    applyTheme(resolved);
-    setTheme(resolved);
-    persistTheme(resolved);
-  }, [initialTheme]);
-  const switchTheme = useCallback((id) => {
-    applyTheme(id);
-    setTheme(id);
-    persistTheme(id);
-    return id;
-  }, []);
-  return { theme, switchTheme };
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: `${Tabs_default.tabs} ${Tabs_default[variant]} ${panelStyle ? Tabs_default.panelStyle : ""}`, children: [
+      /* @__PURE__ */ jsx("div", { className: Tabs_default.tabList, role: "tablist", "aria-label": header != null ? header : "Tabs", children: visibleTabs.map((tab, index) => {
+        const selected = index === activeIndex;
+        const tabDomId = `${uid}-tab-${String(tab.id)}`;
+        const panelDomId = `${uid}-panel-${String(tab.id)}`;
+        return /* @__PURE__ */ jsx("div", { className: `${Tabs_default.tab} ${selected ? Tabs_default.active : ""}`, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: tabDomId,
+            type: "button",
+            className: Tabs_default.tabButton,
+            role: "tab",
+            "aria-selected": selected,
+            "aria-controls": panelDomId,
+            tabIndex: selected ? 0 : -1,
+            disabled: tab.disabled,
+            onClick: () => setValue(tab.id),
+            onKeyDown: (e) => onKeyDownTab(e, index),
+            children: [
+              tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: Tabs_default.icon, children: tab.headerIcon }) : null,
+              /* @__PURE__ */ jsx("span", { className: Tabs_default.label, children: tab.header }),
+              tab.badge ? /* @__PURE__ */ jsx("span", { className: Tabs_default.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+            ]
+          }
+        ) }, tab.id);
+      }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+          role: "tabpanel",
+          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+          className: Tabs_default.tabContent,
+          children: loading ? /* @__PURE__ */ jsx("div", { className: Tabs_default.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
+        }
+      )
+    ] })
+  ] });
 }
-
-// src/components/panel/Panel.module.css
-var Panel_default = {
-  container: "Panel_container",
-  header: "Panel_header",
-  content: "Panel_content",
-  sm: "Panel_sm"
-};
-function Panel({
+Tabs.Item = TabsItem;
+function CollapsibleHeadline({
   header,
-  subheader,
-  headerIcon,
-  headerAddition,
+  expanded,
+  onToggle,
+  controls,
+  addition,
+  storageKey,
   children,
-  severity,
-  size
+  size = 2,
+  variant = "muted",
+  weight = 400,
+  ...headlineProps
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: `${Panel_default.container} ${size ? Panel_default[size] : ""}`, children: [
-    /* @__PURE__ */ jsx("div", { className: Panel_default.header, children: /* @__PURE__ */ jsx(
+  const generatedId = useId();
+  const panelId = controls != null ? controls : generatedId;
+  const [internalExpanded, setInternalExpanded] = useState(() => {
+    if (!storageKey || typeof window === "undefined") return expanded != null ? expanded : true;
+    const stored = localStorage.getItem(storageKey);
+    return stored !== null ? stored === "true" : expanded != null ? expanded : true;
+  });
+  const isExpanded = storageKey ? internalExpanded : expanded != null ? expanded : false;
+  const handleToggle = () => {
+    if (storageKey) {
+      const next = !internalExpanded;
+      setInternalExpanded(next);
+      localStorage.setItem(storageKey, String(next));
+    }
+    onToggle == null ? void 0 : onToggle();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: Headline_default.collapsibleRoot, children: [
+    /* @__PURE__ */ jsxs(
       Headline,
       {
-        disableMargin: true,
-        size: size === "sm" ? 4 : 3,
-        icon: headerIcon,
-        addition: headerAddition,
-        subheader,
-        severity,
-        children: header
+        ...headlineProps,
+        variant,
+        weight,
+        size,
+        addition,
+        children: [
+          header,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              shape: "round",
+              type: "button",
+              variant: "inline",
+              "aria-expanded": isExpanded,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              children: /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: [Headline_default.toggleChevron, isExpanded ? Headline_default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                }
+              )
+            }
+          )
+        ]
       }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: Panel_default.content, children })
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: Headline_default.collapsiblePanel, children })
   ] });
 }
 
-// src/components/card/Card.module.css
-var Card_default = {
-  outerContainer: "Card_outerContainer",
-  container: "Card_container",
-  variantDefault: "Card_variantDefault",
-  variantSubtle: "Card_variantSubtle",
-  sm: "Card_sm",
-  md: "Card_md",
-  content: "Card_content",
-  lg: "Card_lg",
-  inner: "Card_inner",
-  innerImgLeft: "Card_innerImgLeft",
-  innerImgRight: "Card_innerImgRight",
-  innerImgTop: "Card_innerImgTop",
-  media: "Card_media",
-  header: "Card_header",
-  headerMeta: "Card_headerMeta",
-  body: "Card_body",
-  actions: "Card_actions",
-  section: "Card_section",
-  sectionDivider: "Card_sectionDivider",
-  sectionTitle: "Card_sectionTitle",
-  loadingList: "Card_loadingList",
-  loadingRow: "Card_loadingRow"
-};
-
-// src/components/card/components/CardMeta.module.css
-var CardMeta_default = {
-  grid: "CardMeta_grid",
-  cols1: "CardMeta_cols1",
-  cols2: "CardMeta_cols2",
-  cols3: "CardMeta_cols3",
-  row: "CardMeta_row",
-  label: "CardMeta_label",
-  value: "CardMeta_value",
-  valueBold: "CardMeta_valueBold",
-  nowrap: "CardMeta_nowrap"
-};
-function getColsClass(columns) {
-  switch (columns) {
-    case 1:
-      return CardMeta_default.cols1;
-    case 3:
-      return CardMeta_default.cols3;
-    case 2:
-    default:
-      return CardMeta_default.cols2;
-  }
+// src/components/page-layout/PageLayout.module.css
+var PageLayout_default = {
+  root: "PageLayout_root",
+  containScrolling: "PageLayout_containScrolling",
+  documentScrolling: "PageLayout_documentScrolling",
+  vertical: "PageLayout_vertical",
+  horizontal: "PageLayout_horizontal",
+  sidebar: "PageLayout_sidebar",
+  mainColumn: "PageLayout_mainColumn",
+  header: "PageLayout_header",
+  hero: "PageLayout_hero",
+  mainScroll: "PageLayout_mainScroll",
+  content: "PageLayout_content",
+  footer: "PageLayout_footer",
+  headerContainer: "PageLayout_headerContainer",
+  headerContent: "PageLayout_headerContent",
+  footerContent: "PageLayout_footerContent",
+  maxWidthMd: "PageLayout_maxWidthMd",
+  maxWidthSm: "PageLayout_maxWidthSm",
+  contentInner: "PageLayout_contentInner"
+};
+function getMaxWidthClass(value, styles) {
+  if (!value) return "";
+  if (value === "sm") return styles.maxWidthSm;
+  return styles.maxWidthMd;
 }
-function CardMeta({
-  columns = 2,
-  className,
-  children,
-  ...rest
-}) {
-  const colsClass = getColsClass(columns);
-  return /* @__PURE__ */ jsx("dl", { ...rest, className: [CardMeta_default.grid, colsClass, className].filter(Boolean).join(" "), children });
+function getSlotName(el) {
+  var _a;
+  const t = el.type;
+  return (_a = t == null ? void 0 : t.__PAGE_LAYOUT_SLOT__) != null ? _a : null;
 }
-function CardMetaRow({
-  label,
-  value,
-  className,
-  nowrapValue,
-  labelWidth,
-  boldValue = false
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [CardMeta_default.row, className].filter(Boolean).join(" "),
-      style: labelWidth ? { ["--label-width"]: labelWidth } : void 0,
-      children: [
-        /* @__PURE__ */ jsx("dt", { className: CardMeta_default.label, children: label }),
-        /* @__PURE__ */ jsx(
-          "dd",
-          {
-            className: [
-              CardMeta_default.value,
-              !boldValue ? CardMeta_default.valueRegular : CardMeta_default.valueBold,
-              nowrapValue ? CardMeta_default.nowrap : ""
-            ].filter(Boolean).join(" "),
-            children: value
-          }
-        )
-      ]
+function splitSlots(children) {
+  const slots = {};
+  const rest = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      if (child != null) rest.push(child);
+      return;
     }
-  );
-}
-function getGapShare(width) {
-  switch (width) {
-    case 25:
-      return "calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)";
-    case 33:
-      return "calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)";
-    case 50:
-      return "calc(var(--card-container-gap, var(--spacing-md)) / 2)";
-    case 66:
-      return "calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)";
-    case 75:
-      return "calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)";
-    case 100:
-    default:
-      return "0px";
-  }
-}
-function getInnerPlacementClass(imgPlacement, s) {
-  switch (imgPlacement) {
-    case "top":
-      return s.innerImgTop;
-    case "right":
-      return s.innerImgRight;
-    case "left":
-    default:
-      return s.innerImgLeft;
-  }
-}
-function getVariantClass(variant, s) {
-  switch (variant) {
-    case "subtle":
-      return s.variantSubtle;
-    case "default":
-    default:
-      return s.variantDefault;
-  }
+    const slot = getSlotName(child);
+    if (!slot) {
+      rest.push(child);
+      return;
+    }
+    slots[slot] = child;
+  });
+  return { slots, rest };
 }
-function CardImpl({
-  title,
-  subheader,
-  loading = false,
-  variant = "default",
-  size = "md",
-  headerMarker = true,
-  headerIcon,
-  headerAddition,
-  severity,
-  image,
-  imgPlacement = "left",
-  mediaWidth,
-  actions,
-  headerMeta,
-  sectionTitle,
-  showSectionDivider = false,
+var PageLayoutSidebar = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+PageLayoutSidebar.__PAGE_LAYOUT_SLOT__ = "Sidebar";
+var PageLayoutHeader = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: PageLayout_default.headerContainer, children: /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.headerContent} ${getMaxWidthClass(maxWidth, PageLayout_default)}`, children }) });
+};
+PageLayoutHeader.__PAGE_LAYOUT_SLOT__ = "Header";
+var PageLayoutContent = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.contentInner} ${getMaxWidthClass(maxWidth, PageLayout_default)}`, children });
+};
+PageLayoutContent.__PAGE_LAYOUT_SLOT__ = "Content";
+var PageLayoutFooter = ({
+  maxWidth = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${PageLayout_default.footerContent} ${getMaxWidthClass(maxWidth, PageLayout_default)}`, children });
+};
+PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
+var PageLayoutBase = ({
   children,
-  link,
-  width,
-  headlineSize = 4
-}) {
-  const outerStyle = width ? {
-    ["--width"]: `${width}%`,
-    ["--gap-share"]: getGapShare(width)
-  } : void 0;
-  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
-  const innerPlacementClass = getInnerPlacementClass(imgPlacement, Card_default);
-  const variantClass = getVariantClass(variant, Card_default);
-  const hasHeader = !!title || !!headerMeta;
-  const showSection = !loading && (showSectionDivider || !!sectionTitle);
-  const showBody = !loading && !!children;
-  const showActions = !loading && !!actions;
-  const inner = /* @__PURE__ */ jsxs("div", { className: `${Card_default.inner} ${innerPlacementClass}`, children: [
-    image ? /* @__PURE__ */ jsx("div", { className: Card_default.media, style: mediaStyle, children: image }) : null,
-    /* @__PURE__ */ jsxs("div", { className: Card_default.content, children: [
-      hasHeader ? /* @__PURE__ */ jsxs("header", { className: Card_default.header, children: [
-        title ? /* @__PURE__ */ jsx(
-          Headline,
-          {
-            severity,
-            marker: headerMarker,
-            icon: headerIcon,
-            addition: headerAddition,
-            subheader,
-            size: headlineSize,
-            weight: 500,
-            disableMargin: true,
-            children: title
-          }
-        ) : null,
-        headerMeta ? /* @__PURE__ */ jsx("div", { className: Card_default.headerMeta, children: headerMeta }) : null
-      ] }) : null,
-      loading ? /* @__PURE__ */ jsx("div", { className: Card_default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: Card_default.loadingRow, children: [
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
-      showSection ? /* @__PURE__ */ jsxs("div", { className: Card_default.section, children: [
-        showSectionDivider ? /* @__PURE__ */ jsx("div", { className: Card_default.sectionDivider }) : null,
-        sectionTitle ? /* @__PURE__ */ jsx("div", { className: Card_default.sectionTitle, children: sectionTitle }) : null
-      ] }) : null,
-      showBody ? /* @__PURE__ */ jsx("div", { className: Card_default.body, children }) : null,
-      showActions ? /* @__PURE__ */ jsx("div", { className: Card_default.actions, children: actions }) : null
+  containScrolling = false,
+  orientation = "vertical"
+}) => {
+  var _a, _b;
+  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 = [
+    PageLayout_default.root,
+    orientation === "vertical" ? PageLayout_default.vertical : PageLayout_default.horizontal,
+    containScrolling ? PageLayout_default.containScrolling : PageLayout_default.documentScrolling
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    slots.Sidebar ? /* @__PURE__ */ jsx("aside", { className: PageLayout_default.sidebar, "aria-label": (_b = slots.Sidebar.props) == null ? void 0 : _b.ariaLabel, children: slots.Sidebar }) : null,
+    /* @__PURE__ */ jsxs("div", { className: PageLayout_default.mainColumn, children: [
+      slots.Header ? /* @__PURE__ */ jsx("header", { className: PageLayout_default.header, children: slots.Header }) : null,
+      slots.Hero ? /* @__PURE__ */ jsx("div", { className: PageLayout_default.hero, children: slots.Hero }) : null,
+      content || slots.Footer ? /* @__PURE__ */ jsxs("div", { className: PageLayout_default.mainScroll, children: [
+        content ? /* @__PURE__ */ jsx("main", { className: PageLayout_default.content, children: content }) : null,
+        slots.Footer ? /* @__PURE__ */ jsx("footer", { className: PageLayout_default.footer, children: slots.Footer }) : null
+      ] }) : null
     ] })
   ] });
-  const cardContent = link ? /* @__PURE__ */ jsx(Hyperlink, { children: link }) : inner;
-  return /* @__PURE__ */ jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${Card_default.container} ${variantClass}`, children: cardContent }) });
-}
-var Card = Object.assign(CardImpl, {
-  Meta: CardMeta,
-  MetaRow: CardMetaRow
+};
+var PageLayout = Object.assign(PageLayoutBase, {
+  Sidebar: PageLayoutSidebar,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  Footer: PageLayoutFooter
 });
 
-// src/components/card-container/CardContainer.module.css
-var CardContainer_default = {
-  wrapper: "CardContainer_wrapper",
-  container: "CardContainer_container"};
-function CardContainer({
-  children,
-  headline,
-  subheader,
-  expand,
-  severity,
-  displayHeaderMarker
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: CardContainer_default.wrapper, children: [
-    headline && /* @__PURE__ */ jsx(
-      Headline,
-      {
-        marker: displayHeaderMarker,
-        severity,
-        disableMargin: true,
-        subheader,
-        children: headline
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: CardContainer_default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+// src/components/hyperlink/Hyperlink.module.css
+var Hyperlink_default = {
+  link: "Hyperlink_link",
+  secondary: "Hyperlink_secondary",
+  primary: "Hyperlink_primary",
+  block: "Hyperlink_block",
+  content: "Hyperlink_content",
+  icon: "Hyperlink_icon"
+};
+function cx2(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function renderInner(children, icon) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: Hyperlink_default.content, children }),
+    icon && /* @__PURE__ */ jsx("span", { className: Hyperlink_default.icon, children: icon })
   ] });
 }
-function SkeletonLoader({
-  type,
-  rows = 3,
-  columns = 3,
-  variant = "default",
-  speedSec = 3
-}) {
-  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width,
-      height,
-      radius,
-      variant,
-      speedSec
-    },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+function Hyperlink(props) {
+  var _a;
+  const {
+    children,
+    icon,
+    className,
+    asChild,
+    as = "a",
+    variant = "primary",
+    inline = true,
+    ...rest
+  } = props;
+  const linkClassName = cx2(
+    Hyperlink_default.link,
+    className,
+    variant === "secondary" ? Hyperlink_default.secondary : Hyperlink_default.primary,
+    inline ? "" : Hyperlink_default.block
   );
-  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width: 80 + i % 3 * 30,
-      height: 30,
-      radius: 6,
-      variant,
-      speedSec,
-      ariaLabel: "Loading filter"
-    },
-    `pill-${i}`
-  ));
-  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
-      height: 12,
-      radius: 4,
-      variant,
-      speedSec,
-      ariaLabel: "Loading text line"
-    },
-    `text-${i}`
-  ));
-  const tableHeaderRow = () => /* @__PURE__ */ jsx(
-    "div",
+  if (asChild) {
+    const child = React20.Children.only(children);
+    if (!React20.isValidElement(child)) {
+      throw new Error("Hyperlink with asChild expects a single valid React element as its child.");
+    }
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React20.cloneElement(child, {
+      ...childProps,
+      ...rest,
+      className: cx2(childProps.className, linkClassName),
+      children: renderInner(childProps.children, icon),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (childProps.onClick) {
+          childProps.onClick(e);
+        }
+      }
+    });
+  }
+  if (as === "button") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: linkClassName,
+        ...rest,
+        children: renderInner(children, icon)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
     {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
-        {
-          height: 20,
-          width: "90%",
-          radius: 6,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table header"
-        },
-        `thead-${i}`
-      ))
+      onClick: (e) => e.stopPropagation(),
+      className: linkClassName,
+      ...rest,
+      children: renderInner(children, icon)
     }
   );
-  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsx(
-    "div",
+}
+
+// src/components/page-layout/components/layout-footer/LayoutFooter.module.css
+var LayoutFooter_default = {
+  footer: "LayoutFooter_footer",
+  inner: "LayoutFooter_inner",
+  brand: "LayoutFooter_brand",
+  logoRow: "LayoutFooter_logoRow",
+  meta: "LayoutFooter_meta",
+  part: "LayoutFooter_part",
+  links: "LayoutFooter_links"};
+var DEFAULT_META_PARTS = [
+  "Tempovej 7-11",
+  "DK-2750 Ballerup",
+  "+45 44 86 77 11",
+  `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} DBC DIGITAL A/S`
+];
+var DEFAULT_LINKS = [
+  {
+    label: "Kundeservice",
+    href: "https://kundeservice.dbc.dk",
+    external: true
+  },
+  {
+    label: "Cookies",
+    href: "/cookies"
+  }
+];
+function LayoutFooter({
+  links = DEFAULT_LINKS,
+  metaParts = DEFAULT_META_PARTS,
+  extraLinks
+}) {
+  return /* @__PURE__ */ jsx("footer", { className: LayoutFooter_default.footer, children: /* @__PURE__ */ jsxs("div", { className: LayoutFooter_default.inner, children: [
+    /* @__PURE__ */ jsxs("div", { className: LayoutFooter_default.brand, children: [
+      /* @__PURE__ */ jsx("div", { className: LayoutFooter_default.logoRow, children: /* @__PURE__ */ jsx(Logo, {}) }),
+      /* @__PURE__ */ jsx("address", { className: LayoutFooter_default.meta, children: metaParts.map((part) => /* @__PURE__ */ jsx("span", { className: LayoutFooter_default.part, children: part }, part)) })
+    ] }),
+    /* @__PURE__ */ jsxs("nav", { className: LayoutFooter_default.links, "aria-label": "Footer navigation", children: [
+      extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsx("span", { children: link }, index))),
+      links.map((link) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        Hyperlink,
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: link.label
+        }
+      ) }, link.label))
+    ] })
+  ] }) });
+}
+
+// src/components/clear-button/ClearButton.module.css
+var ClearButton_default = {
+  clearButton: "ClearButton_clearButton",
+  button: "ClearButton_button",
+  absolute: "ClearButton_absolute"
+};
+function ClearButton({ onClick, absolute }) {
+  return /* @__PURE__ */ jsx("span", { className: `${ClearButton_default.clearButton} ${absolute ? ClearButton_default.absolute : ""}`, children: /* @__PURE__ */ jsx(
+    "button",
     {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
+      className: ClearButton_default.button,
+      type: "button",
+      "data-input-role": "clear",
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
       },
-      children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
-        {
-          height: 20,
-          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
-          radius: 4,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table cell"
-        },
-        `tcell-${rowIndex}-${colIndex}`
-      ))
-    },
-    `trow-${rowIndex}`
-  );
-  const inputFieldRow = (i) => {
-    const labelW = i % 3 === 0 ? "34%" : i % 3 === 1 ? "42%" : "28%";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 12
-              },
-              children: /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: labelW,
-                  height: 10,
-                  radius: 4,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading label"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SkeletonLoaderItem,
-            {
-              width: "100%",
-              height: 25,
-              radius: 8,
-              variant,
-              speedSec,
-              ariaLabel: "Loading input"
-            }
-          )
-        ]
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick == null ? void 0 : onClick(e);
       },
-      `if-${i}`
-    );
+      children: /* @__PURE__ */ jsx(X, { size: 16 })
+    }
+  ) });
+}
+
+// src/components/forms/input/Input.module.css
+var Input_default = {
+  container: "Input_container",
+  fullWidth: "Input_fullWidth",
+  field: "Input_field",
+  input: "Input_input",
+  withButton: "Input_withButton",
+  withClear: "Input_withClear",
+  withInlineClear: "Input_withInlineClear",
+  outlined: "Input_outlined",
+  surface: "Input_surface",
+  subtle: "Input_subtle",
+  embedded: "Input_embedded",
+  standalone: "Input_standalone",
+  modified: "Input_modified",
+  xs: "Input_xs",
+  sm: "Input_sm",
+  md: "Input_md",
+  lg: "Input_lg",
+  fieldWithIcon: "Input_fieldWithIcon",
+  icon: "Input_icon",
+  withTrailingLabel: "Input_withTrailingLabel",
+  trailingLabel: "Input_trailingLabel",
+  trailingButton: "Input_trailingButton",
+  startAdornment: "Input_startAdornment",
+  endAdornment: "Input_endAdornment",
+  clearSlot: "Input_clearSlot"
+};
+function mergeRefs2(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
   };
-  const inputFieldList = (count) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
-    Array.from({ length: count }).map((_, i) => inputFieldRow(i)),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 8 }, children: [
-      /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
-        {
-          width: 110,
-          height: 30,
-          radius: 8,
-          variant,
-          speedSec,
-          ariaLabel: "Loading action"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
+}
+var Input = forwardRef(function Input2({
+  label,
+  error,
+  helpText,
+  orientation = "vertical",
+  labelWidth = "160px",
+  fullWidth = false,
+  required,
+  tooltip,
+  tooltipPlacement = "right",
+  modified = false,
+  icon,
+  autoFocus,
+  minWidth,
+  width,
+  maxWidth,
+  inputSize = "md",
+  variant = "outlined",
+  onClear,
+  onButtonClick,
+  buttonDisabled = false,
+  buttonLabel,
+  buttonIcon,
+  trailingLabel,
+  id,
+  tooltipOpenOnFocus = true,
+  style,
+  className,
+  fieldClassName,
+  inputClassName,
+  startAdornment,
+  endAdornment,
+  ...inputProps
+}, ref) {
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const inputId = id != null ? id : `input-${reactId}`;
+  useEffect(() => {
+    var _a;
+    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [autoFocus]);
+  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
+  const hasTrailingLabel = Boolean(trailingLabel);
+  const hasValue = Boolean(inputProps.value);
+  const hasVisibleClear = Boolean(onClear && hasValue);
+  const hasEndAdornment = Boolean(endAdornment);
+  const reservesInlineClearSlot = Boolean(onClear);
+  const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
+  const rootStyle = {
+    ...style != null ? style : {},
+    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
+    ...width ? { ["--input-width"]: width } : null,
+    ...maxWidth ? { ["--input-max-width"]: maxWidth } : null
+  };
+  const { triggerProps } = useTooltipTrigger({
+    content: tooltip,
+    placement: tooltipPlacement,
+    offset: 8,
+    delayOpenMs: 0,
+    focusOpenMode: tooltipOpenOnFocus ? "any" : "focus-visible",
+    closeOnPointerDown: false
+  });
+  const trailingButtonVariant = variant === "outlined" || variant === "standalone" ? "outlined" : "default";
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      labelAction: inputProps.labelAction,
+      htmlFor: inputId,
+      fullWidth,
+      error,
+      helpText,
+      orientation,
+      labelWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxs(
+        "div",
         {
-          width: 90,
-          height: 30,
-          radius: 8,
-          variant,
-          speedSec,
-          ariaLabel: "Loading action"
-        }
-      )
-    ] })
-  ] });
-  const getSkeletonItems = () => {
-    switch (type) {
-      case "button": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 120,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              )
-            ]
-          }
-        );
-      }
-      case "card": {
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-          /* @__PURE__ */ jsx(
-            SkeletonLoaderItem,
-            {
-              width: "100%",
-              height: 160,
-              radius: 12,
-              variant,
-              speedSec,
-              ariaLabel: "Loading card media"
-            }
-          ),
-          line("60%", 16, 6),
-          textBlock(3),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
-            /* @__PURE__ */ jsx(
-              SkeletonLoaderItem,
+          style: rootStyle,
+          className: [
+            Input_default.container,
+            fullWidth ? Input_default.fullWidth : "",
+            onClear ? Input_default.withClear : "",
+            hasInlineClear ? Input_default.withInlineClear : "",
+            hasButton ? Input_default.withButton : "",
+            hasTrailingLabel ? Input_default.withTrailingLabel : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                width: 100,
-                height: 30,
-                variant,
-                speedSec,
-                ariaLabel: "Loading action"
+                className: [
+                  Input_default.field,
+                  Input_default[variant],
+                  icon ? Input_default.fieldWithIcon : "",
+                  inputSize ? Input_default[inputSize] : "",
+                  modified ? Input_default.modified : "",
+                  fieldClassName != null ? fieldClassName : ""
+                ].filter(Boolean).join(" "),
+                "data-forminput": "field",
+                "data-modified": modified ? "true" : void 0,
+                "aria-disabled": inputProps.disabled ? "true" : void 0,
+                ...tooltip ? triggerProps : {},
+                children: [
+                  icon && /* @__PURE__ */ jsx("span", { className: Input_default.icon, "data-input-role": "icon", children: icon }),
+                  startAdornment && /* @__PURE__ */ jsx("span", { className: Input_default.startAdornment, "data-input-role": "start-adornment", children: startAdornment }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id: inputId,
+                      ref: mergeRefs2(inputRef, ref),
+                      className: [Input_default.input, inputSize ? Input_default[inputSize] : "", inputClassName != null ? inputClassName : ""].filter(Boolean).join(" ")
+                    }
+                  ),
+                  (reservesInlineClearSlot || hasEndAdornment) && /* @__PURE__ */ jsxs("span", { className: Input_default.endAdornment, "data-input-role": "end-adornment", children: [
+                    reservesInlineClearSlot ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: Input_default.clearSlot,
+                        "aria-hidden": hasVisibleClear ? void 0 : "true",
+                        children: hasVisibleClear && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }) : null
+                      }
+                    ) : null,
+                    endAdornment
+                  ] }),
+                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true }) : null
+                ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              SkeletonLoaderItem,
+            hasTrailingLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: [Input_default.trailingLabel, inputSize ? Input_default[inputSize] : ""].filter(Boolean).join(" "),
+                children: trailingLabel
+              }
+            ),
+            hasButton && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: onButtonClick,
+                disabled: buttonDisabled,
+                className: Input_default.trailingButton,
+                type: "button",
+                variant: trailingButtonVariant,
+                size: inputSize,
+                children: [
+                  buttonIcon != null ? buttonIcon : null,
+                  buttonLabel != null ? buttonLabel : null
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/components/search-box/SearchBox.module.css
+var SearchBox_default = {
+  resultContainer: "SearchBox_resultContainer",
+  suggestionTable: "SearchBox_suggestionTable",
+  suggestionRow: "SearchBox_suggestionRow",
+  suggestionCell: "SearchBox_suggestionCell",
+  suggestionRowActive: "SearchBox_suggestionRowActive"
+};
+var SearchBox = forwardRef(function SearchBoxInner({
+  inputWidth,
+  maxWidth,
+  inputSize,
+  variant,
+  result,
+  debounce = true,
+  debounceMs = 800,
+  onSearch,
+  onSelect,
+  displayPopover,
+  resultKeys,
+  resultTemplate,
+  initialTemplate,
+  popoverMinWidth = "500px",
+  noResultText = "Ingen resultater",
+  loading,
+  enableHotkey = true,
+  onButtonClick,
+  buttonLabel,
+  buttonIcon,
+  fullWidth = false,
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const [draft, setDraft] = useState(() => isControlled ? String(value != null ? value : "") : "");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const popoverRef = useRef(null);
+  const internalInputRef = useRef(null);
+  useEffect(() => {
+    if (typeof ref === "function") {
+      ref(internalInputRef.current);
+    } else if (ref) {
+      ref.current = internalInputRef.current;
+    }
+  }, [ref]);
+  useEffect(() => {
+    if (!isControlled) return;
+    const next = String(value != null ? value : "");
+    if (next !== draft) setDraft(next);
+  }, [value]);
+  useEffect(() => {
+    if (!onSearch) return;
+    if (!debounce) {
+      setSearchQuery(draft);
+      onSearch(draft);
+      return;
+    }
+    const handler = setTimeout(() => {
+      setSearchQuery(draft);
+      onSearch(draft);
+    }, debounceMs);
+    return () => clearTimeout(handler);
+  }, [draft, onSearch, debounce, debounceMs]);
+  useEffect(() => {
+    function handleKeyDown(event) {
+      var _a;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const handleChange = React20__default.useCallback(
+    (e) => {
+      setDraft(e.target.value);
+      onChange == null ? void 0 : onChange(e);
+    },
+    [onChange]
+  );
+  const handleSelect = React20__default.useCallback(
+    (item) => {
+      onSelect == null ? void 0 : onSelect(item);
+      reset();
+    },
+    [onSelect]
+  );
+  function reset() {
+    var _a;
+    setDraft("");
+    setSearchQuery("");
+    setActiveIndex(null);
+    (_a = popoverRef.current) == null ? void 0 : _a.close();
+  }
+  const handleClear = React20__default.useCallback(() => {
+    var _a;
+    reset();
+    onSearch == null ? void 0 : onSearch("");
+    (_a = internalInputRef.current) == null ? void 0 : _a.focus();
+  }, [onSearch]);
+  useEffect(() => {
+    setActiveIndex(null);
+  }, [result]);
+  const inputField = useMemo(() => {
+    var _a;
+    const inputProps = {
+      ...rest,
+      value: draft,
+      onChange: handleChange
+    };
+    const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
+    const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsx(Search, {}) : buttonIcon;
+    if (displayPopover) {
+      return /* @__PURE__ */ jsx(
+        Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          fullWidth,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsx(
+              Input,
               {
-                width: 72,
-                height: 30,
+                ref: internalInputRef,
+                onFocusCapture: event,
+                onClick: () => {
+                  var _a3, _b;
+                  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+                },
+                minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                width: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                fullWidth,
+                icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
+                inputSize,
                 variant,
-                speedSec,
-                ariaLabel: "Loading action"
+                autoComplete: "off",
+                onClear: handleClear,
+                onButtonClick,
+                buttonLabel,
+                buttonIcon: trailingButtonIcon,
+                ...inputProps,
+                onKeyDown: (e) => {
+                  var _a3;
+                  if (result == null ? void 0 : result.length) {
+                    if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      setActiveIndex(
+                        (prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1
+                      );
+                    } else if (e.key === "ArrowUp") {
+                      e.preventDefault();
+                      setActiveIndex(
+                        (prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1
+                      );
+                    } else if (e.key === "Enter") {
+                      e.preventDefault();
+                      if (activeIndex !== null) {
+                        handleSelect(result[activeIndex]);
+                      } else if (onButtonClick) {
+                        onButtonClick();
+                      }
+                    } else if (e.key === "Escape") {
+                      reset();
+                    }
+                  }
+                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
+                },
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
               }
-            )
-          ] })
-        ] });
-      }
-      case "avatar": {
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", width: "100%" }, children: [
-          /* @__PURE__ */ jsx(
-            SkeletonLoaderItem,
+            );
+          },
+          children: resultTemplate ? resultTemplate : (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("table", { className: SearchBox_default.suggestionTable, children: /* @__PURE__ */ jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsx(
+            "tr",
             {
-              width: 48,
-              height: 48,
-              radius: "50%",
-              variant,
-              speedSec,
-              ariaLabel: "Loading avatar"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
-            line("40%", 14),
-            line("25%", 12)
-          ] })
-        ] });
-      }
-      case "text": {
-        return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(rows) });
-      }
-      case "table": {
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-          tableHeaderRow(),
-          Array.from({ length: rows }).map((_, r) => tableBodyRow(r))
-        ] });
-      }
-      case "filterbar": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              flexWrap: "wrap",
-              width: "100%"
+              onClick: () => handleSelect(item),
+              role: "button",
+              tabIndex: 0,
+              className: `${SearchBox_default.suggestionRow}${index === activeIndex ? ` ${SearchBox_default.suggestionRowActive}` : ""}`,
+              children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+                const raw = item[key];
+                const cell = raw != null ? String(raw) : "";
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: SearchBox_default.suggestionCell,
+                    style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
+                    children: cell
+                  },
+                  key
+                );
+              })
             },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(columns) }),
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 240,
-                  height: 30,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading"
-                }
-              )
-            ]
-          }
-        );
+            index
+          )) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsx("div", { className: SearchBox_default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key)) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: SearchBox_default.resultContainer, children: noResultText })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: internalInputRef,
+        icon: showInputIcon ? /* @__PURE__ */ jsx(Search, {}) : void 0,
+        minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+        fullWidth,
+        inputSize,
+        variant,
+        onClear: handleClear,
+        onButtonClick,
+        buttonLabel,
+        buttonIcon: trailingButtonIcon,
+        ...inputProps,
+        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
       }
-      case "inputFieldList": {
-        return inputFieldList(rows);
+    );
+  }, [
+    rest,
+    draft,
+    handleChange,
+    handleClear,
+    displayPopover,
+    inputWidth,
+    inputSize,
+    variant,
+    popoverMinWidth,
+    resultTemplate,
+    result,
+    searchQuery,
+    loading,
+    initialTemplate,
+    noResultText,
+    resultKeys,
+    handleSelect,
+    activeIndex,
+    onButtonClick,
+    buttonLabel,
+    buttonIcon,
+    fullWidth
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...fullWidth ? { width: "100%" } : void 0,
+        ...maxWidth !== void 0 ? { maxWidth } : void 0
+      },
+      children: inputField
+    }
+  );
+});
+var THEME_VARIANTS = ["light", "dark", "system"];
+var STORAGE_KEY = "dbc_theme";
+function isThemeVariant(x) {
+  return !!x && THEME_VARIANTS.includes(x);
+}
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function persistTheme(id) {
+  try {
+    localStorage.setItem(STORAGE_KEY, id);
+  } catch {
+    console.error("Failed to access localStorage");
+  }
+  try {
+    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
+      id
+    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
+  } catch {
+    console.error("Failed to set theme cookie");
+  }
+}
+function getTheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyTheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+function useTheme(initialTheme = "system") {
+  const [theme, setTheme] = useState(null);
+  useEffect(() => {
+    const themeFromDataAttributes = getTheme();
+    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+    const fromCookie = getCookie(STORAGE_KEY);
+    if (isThemeVariant(fromCookie)) {
+      resolved = fromCookie;
+    } else {
+      try {
+        const fromStorage = localStorage.getItem(STORAGE_KEY);
+        if (isThemeVariant(fromStorage)) resolved = fromStorage;
+      } catch {
+        console.error("Failed to access localStorage");
+      }
+    }
+    applyTheme(resolved);
+    setTheme(resolved);
+    persistTheme(resolved);
+  }, [initialTheme]);
+  const switchTheme = useCallback((id) => {
+    applyTheme(id);
+    setTheme(id);
+    persistTheme(id);
+    return id;
+  }, []);
+  return { theme, switchTheme };
+}
+
+// src/components/panel/Panel.module.css
+var Panel_default = {
+  container: "Panel_container",
+  header: "Panel_header",
+  content: "Panel_content",
+  sm: "Panel_sm"
+};
+function Panel({
+  header,
+  subheader,
+  headerIcon,
+  headerAddition,
+  children,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: `${Panel_default.container} ${size ? Panel_default[size] : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: Panel_default.header, children: /* @__PURE__ */ jsx(
+      Headline,
+      {
+        disableMargin: true,
+        size: size === "sm" ? 4 : 3,
+        icon: headerIcon,
+        addition: headerAddition,
+        subheader,
+        severity,
+        children: header
       }
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsx(
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: Panel_default.content, children })
+  ] });
+}
+
+// src/components/card/Card.module.css
+var Card_default = {
+  outerContainer: "Card_outerContainer",
+  container: "Card_container",
+  variantDefault: "Card_variantDefault",
+  variantSubtle: "Card_variantSubtle",
+  sm: "Card_sm",
+  md: "Card_md",
+  content: "Card_content",
+  lg: "Card_lg",
+  inner: "Card_inner",
+  innerImgLeft: "Card_innerImgLeft",
+  innerImgRight: "Card_innerImgRight",
+  innerImgTop: "Card_innerImgTop",
+  media: "Card_media",
+  header: "Card_header",
+  headerMeta: "Card_headerMeta",
+  body: "Card_body",
+  actions: "Card_actions",
+  section: "Card_section",
+  sectionDivider: "Card_sectionDivider",
+  sectionTitle: "Card_sectionTitle",
+  loadingList: "Card_loadingList",
+  loadingRow: "Card_loadingRow"
+};
+
+// src/components/card/components/CardMeta.module.css
+var CardMeta_default = {
+  grid: "CardMeta_grid",
+  cols1: "CardMeta_cols1",
+  cols2: "CardMeta_cols2",
+  cols3: "CardMeta_cols3",
+  row: "CardMeta_row",
+  label: "CardMeta_label",
+  value: "CardMeta_value",
+  valueBold: "CardMeta_valueBold",
+  nowrap: "CardMeta_nowrap"
+};
+function getColsClass(columns) {
+  switch (columns) {
+    case 1:
+      return CardMeta_default.cols1;
+    case 3:
+      return CardMeta_default.cols3;
+    case 2:
+    default:
+      return CardMeta_default.cols2;
+  }
+}
+function CardMeta({
+  columns = 2,
+  className,
+  children,
+  ...rest
+}) {
+  const colsClass = getColsClass(columns);
+  return /* @__PURE__ */ jsx("dl", { ...rest, className: [CardMeta_default.grid, colsClass, className].filter(Boolean).join(" "), children });
+}
+function CardMetaRow({
+  label,
+  value,
+  className,
+  nowrapValue,
+  labelWidth,
+  boldValue = false
+}) {
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "status",
-      "aria-label": "Loading content",
-      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
-      children: getSkeletonItems()
+      className: [CardMeta_default.row, className].filter(Boolean).join(" "),
+      style: labelWidth ? { ["--label-width"]: labelWidth } : void 0,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: CardMeta_default.label, children: label }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: [
+              CardMeta_default.value,
+              !boldValue ? CardMeta_default.valueRegular : CardMeta_default.valueBold,
+              nowrapValue ? CardMeta_default.nowrap : ""
+            ].filter(Boolean).join(" "),
+            children: value
+          }
+        )
+      ]
     }
   );
 }
+function getGapShare(width) {
+  switch (width) {
+    case 25:
+      return "calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)";
+    case 33:
+      return "calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)";
+    case 50:
+      return "calc(var(--card-container-gap, var(--spacing-md)) / 2)";
+    case 66:
+      return "calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)";
+    case 75:
+      return "calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)";
+    case 100:
+    default:
+      return "0px";
+  }
+}
+function getInnerPlacementClass(imgPlacement, s) {
+  switch (imgPlacement) {
+    case "top":
+      return s.innerImgTop;
+    case "right":
+      return s.innerImgRight;
+    case "left":
+    default:
+      return s.innerImgLeft;
+  }
+}
+function getVariantClass(variant, s) {
+  switch (variant) {
+    case "subtle":
+      return s.variantSubtle;
+    case "default":
+    default:
+      return s.variantDefault;
+  }
+}
+function CardImpl({
+  title,
+  subheader,
+  loading = false,
+  variant = "default",
+  size = "md",
+  headerMarker = true,
+  headerIcon,
+  headerAddition,
+  severity,
+  image,
+  imgPlacement = "left",
+  mediaWidth,
+  actions,
+  headerMeta,
+  sectionTitle,
+  showSectionDivider = false,
+  children,
+  link,
+  width,
+  headlineSize = 4
+}) {
+  const outerStyle = width ? {
+    ["--width"]: `${width}%`,
+    ["--gap-share"]: getGapShare(width)
+  } : void 0;
+  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
+  const innerPlacementClass = getInnerPlacementClass(imgPlacement, Card_default);
+  const variantClass = getVariantClass(variant, Card_default);
+  const hasHeader = !!title || !!headerMeta;
+  const showSection = !loading && (showSectionDivider || !!sectionTitle);
+  const showBody = !loading && !!children;
+  const showActions = !loading && !!actions;
+  const inner = /* @__PURE__ */ jsxs("div", { className: `${Card_default.inner} ${innerPlacementClass}`, children: [
+    image ? /* @__PURE__ */ jsx("div", { className: Card_default.media, style: mediaStyle, children: image }) : null,
+    /* @__PURE__ */ jsxs("div", { className: Card_default.content, children: [
+      hasHeader ? /* @__PURE__ */ jsxs("header", { className: Card_default.header, children: [
+        title ? /* @__PURE__ */ jsx(
+          Headline,
+          {
+            severity,
+            marker: headerMarker,
+            icon: headerIcon,
+            addition: headerAddition,
+            subheader,
+            size: headlineSize,
+            weight: 500,
+            disableMargin: true,
+            children: title
+          }
+        ) : null,
+        headerMeta ? /* @__PURE__ */ jsx("div", { className: Card_default.headerMeta, children: headerMeta }) : null
+      ] }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: Card_default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: Card_default.loadingRow, children: [
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
+        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
+      ] }, index)) }) : null,
+      showSection ? /* @__PURE__ */ jsxs("div", { className: Card_default.section, children: [
+        showSectionDivider ? /* @__PURE__ */ jsx("div", { className: Card_default.sectionDivider }) : null,
+        sectionTitle ? /* @__PURE__ */ jsx("div", { className: Card_default.sectionTitle, children: sectionTitle }) : null
+      ] }) : null,
+      showBody ? /* @__PURE__ */ jsx("div", { className: Card_default.body, children }) : null,
+      showActions ? /* @__PURE__ */ jsx("div", { className: Card_default.actions, children: actions }) : null
+    ] })
+  ] });
+  const cardContent = link ? /* @__PURE__ */ jsx(Hyperlink, { children: link }) : inner;
+  return /* @__PURE__ */ jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${Card_default.container} ${variantClass}`, children: cardContent }) });
+}
+var Card = Object.assign(CardImpl, {
+  Meta: CardMeta,
+  MetaRow: CardMetaRow
+});
+
+// src/components/card-container/CardContainer.module.css
+var CardContainer_default = {
+  wrapper: "CardContainer_wrapper",
+  container: "CardContainer_container"};
+function CardContainer({
+  children,
+  headline,
+  subheader,
+  expand,
+  severity,
+  displayHeaderMarker
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: CardContainer_default.wrapper, children: [
+    headline && /* @__PURE__ */ jsx(
+      Headline,
+      {
+        marker: displayHeaderMarker,
+        severity,
+        disableMargin: true,
+        subheader,
+        children: headline
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: CardContainer_default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
+  ] });
+}
 
 // src/components/page/Page.module.css
 var Page_default = {
@@ -3607,7 +3691,8 @@ function Page({
   disableTopPadding = true,
   maxWidth,
   containScrolling = false,
-  children
+  children,
+  loading = false
 }) {
   const maxWidthClass = maxWidth ? Page_default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
   const hasHeadline = Boolean(header || subheader || headerAddition);
@@ -3631,7 +3716,7 @@ function Page({
             }
           ) : null
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: `${Page_default.content} ${disableContentBox ? Page_default.disableContentBox : ""}`, children })
+        /* @__PURE__ */ jsx("div", { className: `${Page_default.content} ${disableContentBox ? Page_default.disableContentBox : ""}`, children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children })
       ]
     }
   );
@@ -4394,24 +4479,10 @@ function TableHeader({
     }
   );
 }
-function getColumnWidth(column) {
-  if (typeof column.width === "number" && column.width < 150) {
-    return "100%";
-  }
-  if (typeof column.width === "string" && column.width.endsWith("px")) {
-    const px = parseInt(column.width, 10);
-    if (!isNaN(px) && px < 150) {
-      return "100%";
-    }
-  }
-  const percent = Math.floor(Math.random() * (90 - 50 + 1)) + 50;
-  return `${percent}%`;
-}
 function TableLoadingBody({ rows, columns, hasSelection }) {
-  const widths = Array.from({ length: rows }, () => columns.map(getColumnWidth));
   return /* @__PURE__ */ jsx("tbody", { className: Table_default.body, children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: Table_default.row, children: [
     hasSelection ? /* @__PURE__ */ jsx("td", { className: cx3(Table_default.cell, Table_default.selectionCell), children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: 20 }) }) }) : null,
-    columns.map((column, columnIndex) => {
+    columns.map((column) => {
       var _a;
       return /* @__PURE__ */ jsx(
         "td",
@@ -4423,7 +4494,7 @@ function TableLoadingBody({ rows, columns, hasSelection }) {
           ),
           "data-align": (_a = column.align) != null ? _a : "left",
           "data-divider": column.divider,
-          children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 16, width: widths[rowIndex][columnIndex] }) }) })
+          children: /* @__PURE__ */ jsx("div", { className: Table_default.cellContent, children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }) })
         },
         column.id
       );
@@ -4626,6 +4697,14 @@ function Table({
   );
 }
 
+// src/constants/chart-colors.ts
+var ChartSemanticColorVar = {
+  primary: "var(--color-chart-primary)",
+  success: "var(--color-chart-success)",
+  warning: "var(--color-chart-warning)",
+  error: "var(--color-chart-error)"
+};
+
 // src/components/forms/text-area/Textarea.module.css
 var Textarea_default = {
   container: "Textarea_container",
@@ -12638,4 +12717,4 @@ function Alert({
   );
 }
 
-export { Accordion, Alert, AppHeader, AttributeChip, Avatar, Breadcrumbs, Button, ButtonSelect, Card, CardContainer, Checkbox, CheckboxGroup, Chip, ChipMultiToggle, Circle, CodeBlock, CollapsibleHeadline, CopyButton, DateTimePicker, Divider, FadeOverlay, FilterField, Grid, GridItem, Headline, Hyperlink, Icon, Input, InputContainer, IntervalSelect, JsonViewer, LayoutFooter, Menu, MetaBar, Modal, ModalProvider, MultiSelect, NUMBER_OPERATORS, NavBar, Page, PageLayout, Pagination, Panel, Popover, RadioButton, RadioButtonGroup, SearchBox, SegmentedProgressBar, Select, SeverityIcon, SidePanel, Sidebar, SkeletonLoader, SkeletonLoaderItem, SplitButton, SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary, Stack, StatePage, StickyFooterLayout, Table, Tabs, Textarea, ThemeButton, ThemeMenuSection, Toast, ToastProvider, Tooltip, TooltipContext, TooltipProvider, Typeahead, UserDisplay, formatDate, nestedFiltering, useDeviceSize, useModal, useOptionalToast, usePagination, useSidePanel, useSorting, useTableData, useTableSelection, useTheme, useTimeDuration, useToast, useTooltipTrigger, useViewportFill };
+export { Accordion, Alert, AppHeader, AttributeChip, Avatar, Breadcrumbs, Button, ButtonSelect, Card, CardContainer, ChartSemanticColorVar, Checkbox, CheckboxGroup, Chip, ChipMultiToggle, Circle, CodeBlock, CollapsibleHeadline, CopyButton, DateTimePicker, Divider, FadeOverlay, FilterField, Grid, GridItem, Headline, Hyperlink, Icon, Input, InputContainer, IntervalSelect, JsonViewer, LayoutFooter, Menu, MetaBar, Modal, ModalProvider, MultiSelect, NUMBER_OPERATORS, NavBar, Page, PageLayout, Pagination, Panel, Popover, RadioButton, RadioButtonGroup, SearchBox, SegmentedProgressBar, Select, SeverityIcon, SidePanel, Sidebar, SkeletonLoader, SkeletonLoaderItem, SplitButton, SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary, Stack, StatePage, StickyFooterLayout, Table, Tabs, Textarea, ThemeButton, ThemeMenuSection, Toast, ToastProvider, Tooltip, TooltipContext, TooltipProvider, Typeahead, UserDisplay, formatDate, nestedFiltering, useDeviceSize, useModal, useOptionalToast, usePagination, useSidePanel, useSorting, useTableData, useTableSelection, useTheme, useTimeDuration, useToast, useTooltipTrigger, useViewportFill };