@dbcdk/react-components 0.0.98 → 0.0.102

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React20 from 'react';
-import React20__default, { forwardRef, createContext, useId, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useContext, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import * as React19 from 'react';
+import React19__default, { forwardRef, createContext, useId, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useContext, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LoaderCircle, Search, X, ChevronLeft, ChevronRight, Clock, Calendar, ChevronUp, ChevronDown, Check, Building2, CircleAlert, Info, CircleX, CircleCheck, Menu as Menu$1, ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, Square, TextWrap, Palette, Copy, Monitor, Sun, Moon, ArrowUp, ArrowDown, Settings2 } from 'lucide-react';
 import { createPortal } from 'react-dom';
@@ -405,7 +405,6 @@ var Button_default = {
   rounded: "Button_rounded",
   link: "Button_link",
   icon: "Button_icon",
-  xs: "Button_xs",
   sm: "Button_sm",
   lg: "Button_lg",
   fullWidth: "Button_fullWidth",
@@ -416,7 +415,8 @@ var Button_default = {
   active: "Button_active",
   success: "Button_success",
   danger: "Button_danger",
-  inline: "Button_inline"
+  inline: "Button_inline",
+  xs: "Button_xs"
 };
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -430,7 +430,7 @@ function mergeRefs(...refs) {
     }
   };
 }
-var Button = React20.forwardRef(function Button2({
+var Button = React19.forwardRef(function Button2({
   variant = "outlined",
   shape = "default",
   size = "md",
@@ -459,8 +459,8 @@ var Button = React20.forwardRef(function Button2({
     userClassName
   );
   const tooltipEnabled = Boolean(tooltip);
-  const childRef = isLink && React20.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
-  const mergedRef = React20.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const childRef = isLink && React19.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
+  const mergedRef = React19.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
   const { triggerProps, id: tooltipId } = useTooltipTrigger({
     content: tooltipEnabled ? tooltip : null,
     placement: tooltipPlacement,
@@ -477,7 +477,7 @@ var Button = React20.forwardRef(function Button2({
     loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
   ] });
   let buttonEl;
-  if (isLink && React20.isValidElement(children)) {
+  if (isLink && React19.isValidElement(children)) {
     const childClassName = typeof children.props.className === "string" ? children.props.className : "";
     const { disabled, onClick, ...linkButtonProps } = buttonProps;
     const handleClick = (e) => {
@@ -487,7 +487,7 @@ var Button = React20.forwardRef(function Button2({
       }
       onClick == null ? void 0 : onClick(e);
     };
-    buttonEl = React20.cloneElement(children, {
+    buttonEl = React19.cloneElement(children, {
       ...linkButtonProps,
       ref: mergedRef,
       className: cx(childClassName, computedClassName, Button_default.buttonLink),
@@ -783,7 +783,8 @@ function Headline({
   icon,
   tone,
   variant,
-  allowWrap = true
+  allowWrap = true,
+  id
 }) {
   const Tag = `h${size}`;
   const containerClassName = [Headline_default.headlineContainer, tone ? Headline_default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
@@ -799,6 +800,7 @@ function Headline({
       /* @__PURE__ */ jsxs(
         Tag,
         {
+          id,
           style: {
             "--font-weight": weight,
             "--marker-color": severity ? SeverityBgColor[severity] : void 0
@@ -1054,7 +1056,7 @@ var Popover = forwardRef(function Popover2({
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "dbc-muted-text", size: 20 });
-  const setOverlayRef = React20.useCallback(
+  const setOverlayRef = React19.useCallback(
     (node) => {
       assignRef(overlayRef, node);
     },
@@ -1238,12 +1240,12 @@ function Avatar({
     "--text": SeverityTextColor[color],
     "--size": fullWidth ? "100%" : sizes[size]
   };
-  const pathId = React20.useId();
+  const pathId = React19.useId();
   const renderImage = () => {
     if (image) {
-      if (React20.isValidElement(image)) {
+      if (React19.isValidElement(image)) {
         const mergedClass = [image.props.className, Avatar_default.image].filter(Boolean).join(" ");
-        return React20.cloneElement(image, { className: mergedClass });
+        return React19.cloneElement(image, { className: mergedClass });
       }
       return /* @__PURE__ */ jsx("span", { className: Avatar_default.imageSlot, children: image });
     }
@@ -1566,9 +1568,9 @@ var INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }
-var MenuBase = React20.forwardRef(
+var MenuBase = React19.forwardRef(
   ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
-    const internalRef = React20.useRef(null);
+    const internalRef = React19.useRef(null);
     const handleKeyDown = (e) => {
       const ul = internalRef.current;
       if (!ul) return;
@@ -1611,16 +1613,16 @@ var MenuBase = React20.forwardRef(
   }
 );
 MenuBase.displayName = "Menu";
-var isInteractiveEl = (el) => React20.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
+var isInteractiveEl = (el) => React19.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
 function applyMenuItemPropsToElement(child, opts) {
   var _a, _b, _c, _d;
   const { active, selected, disabled, role, tabIndex = 0, className } = opts;
   const childClass = [Menu_default.item, active ? Menu_default.active : "", selected ? Menu_default.selected : ""].filter(Boolean).join(" ");
-  const nextImmediate = React20.cloneElement(child, {
+  const nextImmediate = React19.cloneElement(child, {
     className: [child.props.className, Menu_default.interactiveChild, className].filter(Boolean).join(" ")
   });
   if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
-    return React20.cloneElement(child, {
+    return React19.cloneElement(child, {
       role: (_a = child.props.role) != null ? _a : role,
       tabIndex: (_b = child.props.tabIndex) != null ? _b : tabIndex,
       "aria-selected": selected || void 0,
@@ -1629,7 +1631,7 @@ function applyMenuItemPropsToElement(child, opts) {
       ...child.type === "button" ? { disabled } : {}
     });
   }
-  return React20.cloneElement(nextImmediate, {
+  return React19.cloneElement(nextImmediate, {
     role: (_c = nextImmediate.props.role) != null ? _c : role,
     tabIndex: (_d = nextImmediate.props.tabIndex) != null ? _d : tabIndex,
     "aria-selected": selected || void 0,
@@ -1638,7 +1640,7 @@ function applyMenuItemPropsToElement(child, opts) {
     disabled
   });
 }
-var MenuItem = React20.forwardRef(
+var MenuItem = React19.forwardRef(
   ({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
     const resolvedRole = itemRole != null ? itemRole : "menuitem";
     const isBordered = variant === "bordered";
@@ -1676,7 +1678,7 @@ var MenuItem = React20.forwardRef(
   }
 );
 MenuItem.displayName = "Menu.Item";
-var MenuCheckItem = React20.forwardRef(
+var MenuCheckItem = React19.forwardRef(
   ({
     label,
     checked,
@@ -1742,7 +1744,7 @@ var MenuCheckItem = React20.forwardRef(
   }
 );
 MenuCheckItem.displayName = "Menu.CheckItem";
-var MenuRadioItem = React20.forwardRef(
+var MenuRadioItem = React19.forwardRef(
   ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
     return /* @__PURE__ */ jsx(
       "li",
@@ -1782,7 +1784,7 @@ var MenuRadioItem = React20.forwardRef(
   }
 );
 MenuRadioItem.displayName = "Menu.RadioItem";
-var MenuSeparator = React20.forwardRef(
+var MenuSeparator = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "li",
     {
@@ -1794,7 +1796,7 @@ var MenuSeparator = React20.forwardRef(
   )
 );
 MenuSeparator.displayName = "Menu.Separator";
-var MenuHeader = React20.forwardRef(
+var MenuHeader = React19.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
     "li",
     {
@@ -2510,7 +2512,7 @@ function Tabs({
       "div",
       {
         className: [Tabs_default.headerContainer, disableTopPadding ? Tabs_default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${Tabs_default.tabs} ${Tabs_default[variant]} ${panelStyle ? Tabs_default.panelStyle : ""}`, children: [
@@ -2762,12 +2764,12 @@ function Hyperlink(props) {
     inline ? "" : Hyperlink_default.block
   );
   if (asChild) {
-    const child = React20.Children.only(children);
-    if (!React20.isValidElement(child)) {
+    const child = React19.Children.only(children);
+    if (!React19.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, {
+    return React19.cloneElement(child, {
       ...childProps,
       ...rest,
       className: cx2(childProps.className, linkClassName),
@@ -2802,15 +2804,15 @@ function Hyperlink(props) {
   );
 }
 
-// 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"};
+// src/components/page-layout/components/footer/Footer.module.css
+var Footer_default = {
+  footer: "Footer_footer",
+  inner: "Footer_inner",
+  brand: "Footer_brand",
+  logoRow: "Footer_logoRow",
+  meta: "Footer_meta",
+  part: "Footer_part",
+  links: "Footer_links"};
 var DEFAULT_META_PARTS = [
   "Tempovej 7-11",
   "DK-2750 Ballerup",
@@ -2822,23 +2824,23 @@ var DEFAULT_LINKS = [
     label: "Kundeservice",
     href: "https://kundeservice.dbc.dk",
     external: true
-  },
-  {
-    label: "Cookies",
-    href: "/cookies"
   }
 ];
-function LayoutFooter({
+function Footer({
   links = DEFAULT_LINKS,
   metaParts = DEFAULT_META_PARTS,
+  version,
   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)) })
+  const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
+    (part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
+  ) : metaParts;
+  return /* @__PURE__ */ jsx("footer", { className: Footer_default.footer, children: /* @__PURE__ */ jsxs("div", { className: Footer_default.inner, children: [
+    /* @__PURE__ */ jsxs("div", { className: Footer_default.brand, children: [
+      /* @__PURE__ */ jsx("div", { className: Footer_default.logoRow, children: /* @__PURE__ */ jsx(Logo, {}) }),
+      /* @__PURE__ */ jsx("address", { className: Footer_default.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsx("span", { className: Footer_default.part, children: part }, part)) })
     ] }),
-    /* @__PURE__ */ jsxs("nav", { className: LayoutFooter_default.links, "aria-label": "Footer navigation", children: [
+    /* @__PURE__ */ jsxs("nav", { className: Footer_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,
@@ -3156,14 +3158,14 @@ var SearchBox = forwardRef(function SearchBoxInner({
       return () => window.removeEventListener("keydown", handleKeyDown);
     }
   }, [enableHotkey]);
-  const handleChange = React20__default.useCallback(
+  const handleChange = React19__default.useCallback(
     (e) => {
       setDraft(e.target.value);
       onChange == null ? void 0 : onChange(e);
     },
     [onChange]
   );
-  const handleSelect = React20__default.useCallback(
+  const handleSelect = React19__default.useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
       reset();
@@ -3177,7 +3179,7 @@ var SearchBox = forwardRef(function SearchBoxInner({
     setActiveIndex(null);
     (_a = popoverRef.current) == null ? void 0 : _a.close();
   }
-  const handleClear = React20__default.useCallback(() => {
+  const handleClear = React19__default.useCallback(() => {
     var _a;
     reset();
     onSearch == null ? void 0 : onSearch("");
@@ -3428,6 +3430,10 @@ function Panel({
 var Card_default = {
   outerContainer: "Card_outerContainer",
   container: "Card_container",
+  elevationNone: "Card_elevationNone",
+  elevationXs: "Card_elevationXs",
+  elevationSm: "Card_elevationSm",
+  elevationMd: "Card_elevationMd",
   variantDefault: "Card_variantDefault",
   variantSubtle: "Card_variantSubtle",
   sm: "Card_sm",
@@ -3555,6 +3561,7 @@ function CardImpl({
   loading = false,
   variant = "default",
   size = "md",
+  elevation = "sm",
   headerMarker = true,
   headerIcon,
   headerAddition,
@@ -3571,6 +3578,7 @@ function CardImpl({
   width,
   headlineSize = 4
 }) {
+  var _a;
   const outerStyle = width ? {
     ["--width"]: `${width}%`,
     ["--gap-share"]: getGapShare(width)
@@ -3578,6 +3586,7 @@ function CardImpl({
   const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
   const innerPlacementClass = getInnerPlacementClass(imgPlacement, Card_default);
   const variantClass = getVariantClass(variant, Card_default);
+  const elevationClass = (_a = Card_default[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : Card_default.elevationSm;
   const hasHeader = !!title || !!headerMeta;
   const showSection = !loading && (showSectionDivider || !!sectionTitle);
   const showBody = !loading && !!children;
@@ -3615,7 +3624,7 @@ function CardImpl({
     ] })
   ] });
   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 }) });
+  return /* @__PURE__ */ jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsx("div", { className: `${Card_default.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
 }
 var Card = Object.assign(CardImpl, {
   Meta: CardMeta,
@@ -3661,7 +3670,8 @@ var Page_default = {
   disableTopPadding: "Page_disableTopPadding",
   headerMain: "Page_headerMain",
   content: "Page_content",
-  disableContentBox: "Page_disableContentBox"
+  contentLoading: "Page_contentLoading",
+  contentBox: "Page_contentBox"
 };
 
 // src/components/breadcrumbs/Breadcrumbs.module.css
@@ -3688,12 +3698,14 @@ function Page({
   headerAddition,
   breadcrumbs,
   disableContentBox,
+  contentBox = false,
   disableTopPadding = true,
   maxWidth,
   containScrolling = false,
   children,
   loading = false
 }) {
+  const showContentBox = contentBox && !disableContentBox;
   const maxWidthClass = maxWidth ? Page_default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
   const hasHeadline = Boolean(header || subheader || headerAddition);
   return /* @__PURE__ */ jsxs(
@@ -3707,7 +3719,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 2,
+              size: 1,
               severity,
               icon: headerIcon,
               subheader,
@@ -3716,7 +3728,13 @@ function Page({
             }
           ) : null
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: `${Page_default.content} ${disableContentBox ? Page_default.disableContentBox : ""}`, children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${showContentBox ? Page_default.contentBox : ""}`,
+            children: loading ? /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
+          }
+        )
       ]
     }
   );
@@ -4285,7 +4303,7 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          const allowOverflow = column.allowOverflow;
+          column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsx(
             "td",
@@ -4305,7 +4323,7 @@ function TableRow({
                   className: Table_default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: allowWrap || allowOverflow ? cellValue : /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
                 }
               )
             },
@@ -5150,7 +5168,7 @@ function SidebarItemContent({
   const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
   const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
   const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments(label, highlightTerms).map(
-    (segment, index) => segment.matched ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx(React20__default.Fragment, { children: segment.text }, `${segment.text}-${index}`)
+    (segment, index) => segment.matched ? /* @__PURE__ */ jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx(React19__default.Fragment, { children: segment.text }, `${segment.text}-${index}`)
   ) : label;
   return /* @__PURE__ */ jsxs(
     "span",
@@ -5366,7 +5384,7 @@ var SidenavFiltering = ({
     wrapItemText,
     setWrapItemText
   } = useSidebar();
-  const searchBoxRef = React20__default.useRef(null);
+  const searchBoxRef = React19__default.useRef(null);
   const handleSearch = (value) => {
     setActiveQuery == null ? void 0 : setActiveQuery(value);
   };
@@ -6293,12 +6311,12 @@ function Typeahead({
   const [query, setQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
   const [hideSelectedHighlight, setHideSelectedHighlight] = useState(false);
-  const clearJustClearedAfterEventCycle = React20.useCallback(() => {
+  const clearJustClearedAfterEventCycle = React19.useCallback(() => {
     requestAnimationFrame(() => {
       justClearedRef.current = false;
     });
   }, []);
-  const getSelectedValueChipLabel = React20.useCallback(
+  const getSelectedValueChipLabel = React19.useCallback(
     (option) => {
       switch (multiSelectedValueChipContent) {
         case "value":
@@ -6325,7 +6343,7 @@ function Typeahead({
       );
     }
   }
-  const commitSelection = React20.useCallback(
+  const commitSelection = React19.useCallback(
     (option) => {
       var _a2, _b2;
       locallyClearedRef.current = false;
@@ -6450,7 +6468,7 @@ function Typeahead({
       setInputValue((_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "");
     }
   }, [selectedOption, mode]);
-  const getSelectedIndex = React20.useCallback(
+  const getSelectedIndex = React19.useCallback(
     (items) => {
       if (items.length === 0) return -1;
       if (locallyClearedRef.current) return 0;
@@ -6478,7 +6496,7 @@ function Typeahead({
     const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
     (_b2 = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b2.call(activeEl, { block: "nearest" });
   }, [open, activeIndex, filteredOptions, listboxId]);
-  const getFocusableElements = React20.useCallback(() => {
+  const getFocusableElements = React19.useCallback(() => {
     const selector = [
       "a[href]",
       "button:not([disabled])",
@@ -6502,12 +6520,12 @@ function Typeahead({
     }
     return focusables;
   }, []);
-  const isFocusWithinTypeahead = React20.useCallback((target) => {
+  const isFocusWithinTypeahead = React19.useCallback((target) => {
     var _a2, _b2;
     if (!(target instanceof Node)) return false;
     return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target)));
   }, []);
-  const handleTabKeyDown = React20.useCallback(
+  const handleTabKeyDown = React19.useCallback(
     (event) => {
       var _a2, _b2, _c;
       if (event.key !== "Tab" || !open) return;
@@ -6581,23 +6599,23 @@ function Typeahead({
     setOpen(false);
     setActiveIndex(-1);
   };
-  const openWithAllOptions = React20.useCallback(() => {
+  const openWithAllOptions = React19.useCallback(() => {
     if (justClearedRef.current) return;
     setQuery("");
     setOpen(true);
     setActiveIndex(getSelectedIndex(options));
   }, [getSelectedIndex, options]);
-  const openWithCurrentFilter = React20.useCallback(() => {
+  const openWithCurrentFilter = React19.useCallback(() => {
     if (justClearedRef.current) return;
     setOpen(true);
     setActiveIndex(getSelectedIndex(filteredOptions));
   }, [getSelectedIndex, filteredOptions]);
-  const prepareSingleSearchInput = React20.useCallback(() => {
+  const prepareSingleSearchInput = React19.useCallback(() => {
     if (mode !== "single" || !selectedOption || justClearedRef.current) return;
     setInputValue("");
     setQuery("");
   }, [mode, selectedOption]);
-  const handleOpen = React20.useCallback(() => {
+  const handleOpen = React19.useCallback(() => {
     if (justClearedRef.current) return;
     if (mode === "single" && selectedOption && !locallyClearedRef.current) {
       prepareSingleSearchInput();
@@ -6606,7 +6624,7 @@ function Typeahead({
     }
     openWithCurrentFilter();
   }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
-  const handleTriggerMouseDown = React20.useCallback(
+  const handleTriggerMouseDown = React19.useCallback(
     (e) => {
       var _a2;
       inputPropsOnMouseDown == null ? void 0 : inputPropsOnMouseDown(e);
@@ -6647,7 +6665,7 @@ function Typeahead({
       filteredOptions
     ]
   );
-  const handleChevronMouseDown = React20.useCallback(
+  const handleChevronMouseDown = React19.useCallback(
     (e) => {
       var _a2, _b2;
       e.preventDefault();
@@ -7538,6 +7556,14 @@ var SegmentedProgressBar_default = {
   progressCenterLabel: "SegmentedProgressBar_progressCenterLabel",
   emptySegments: "SegmentedProgressBar_emptySegments"
 };
+var sizeTokenMap = {
+  "2xs": "var(--component-size-2xs)",
+  xxs: "var(--component-size-xxs)",
+  xs: "var(--component-size-xs)",
+  sm: "var(--component-size-sm)",
+  md: "var(--component-size-md)",
+  lg: "var(--component-size-lg)"
+};
 function SegmentWithTooltip({
   seg,
   index,
@@ -7577,9 +7603,9 @@ var SegmentedProgressBar = ({
   segments,
   total,
   showRemainder = true,
-  remainderSeverity = "neutral",
+  remainderSeverity = "missing",
   centerLabel,
-  height,
+  size = "sm",
   rounded = true,
   trackColor,
   tooltipPlacement = "top",
@@ -7617,7 +7643,8 @@ var SegmentedProgressBar = ({
           className: SegmentedProgressBar_default.progressBar,
           "data-rounded": rounded ? "true" : "false",
           style: {
-            height: height ? `${height}px` : "24px",
+            ["--progress-height"]: sizeTokenMap[size],
+            height: sizeTokenMap[size],
             background: trackColor != null ? trackColor : "var(--color-bg-surface-subtle)"
           },
           children: [
@@ -8498,7 +8525,7 @@ function Modal({
         tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs("div", { className: Modal_default.header, children: [
-            header && /* @__PURE__ */ jsx(Headline, { severity, size: 3, disableMargin: true, subheader, children: header }),
+            header && /* @__PURE__ */ jsx(Headline, { severity, size: 2, disableMargin: true, subheader, children: header }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -8810,7 +8837,7 @@ function AttributeChip({
     /* @__PURE__ */ jsx("span", { className: AttributeChip_default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
   ] });
 }
-var SplitPaneContext = React20__default.createContext(null);
+var SplitPaneContext = React19__default.createContext(null);
 function clamp3(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
@@ -8837,7 +8864,7 @@ function removeStoredSize(key) {
   }
 }
 function useSplitPaneContext() {
-  const ctx = React20__default.useContext(SplitPaneContext);
+  const ctx = React19__default.useContext(SplitPaneContext);
   if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
   return ctx;
 }
@@ -10312,7 +10339,7 @@ function ChipMultiToggle({
   type = "rounded",
   dataCy
 }) {
-  const selectedSet = React20__default.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedSet = React19__default.useMemo(() => new Set(selectedValues), [selectedValues]);
   const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
   const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
   const toggleValue = (value) => {
@@ -10661,7 +10688,7 @@ function SidePanel({
                 /* @__PURE__ */ jsx(
                   Headline,
                   {
-                    size: 3,
+                    size: 2,
                     disableMargin: true,
                     severity,
                     marker: showHeaderMarker,
@@ -11021,6 +11048,7 @@ function IntervalSelect({
 // src/components/accordion/Accordion.module.css
 var Accordion_default = {
   container: "Accordion_container",
+  outlined: "Accordion_outlined",
   sm: "Accordion_sm",
   md: "Accordion_md",
   lg: "Accordion_lg"
@@ -11037,7 +11065,8 @@ var AccordionRow_default = {
   panel: "AccordionRow_panel",
   animate: "AccordionRow_animate",
   noAnimate: "AccordionRow_noAnimate",
-  content: "AccordionRow_content"
+  content: "AccordionRow_content",
+  item: "AccordionRow_item"
 };
 function useCollapsibleHeight(isOpen, shouldAnimate) {
   const innerRef = useRef(null);
@@ -11080,7 +11109,9 @@ function AccordionRow({
   item,
   isOpen,
   onToggle,
-  shouldAnimate = true
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default"
 }) {
   const isDisabled = !!item.disabled;
   const buttonId = `${uid}-acc-btn-${index}`;
@@ -11108,8 +11139,8 @@ function AccordionRow({
                   Headline,
                   {
                     disableMargin: true,
-                    size: 4,
-                    weight: 500,
+                    size: headlineSize,
+                    weight: variant === "outlined" ? 400 : 500,
                     severity: item.severity,
                     subheader: item.subheader,
                     allowWrap: isOpen,
@@ -11148,6 +11179,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
+  variant = "default",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
@@ -11157,9 +11189,9 @@ function Accordion({
 }) {
   const uid = useId();
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
-  const hasMountedRef = useRef(false);
+  const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
-    hasMountedRef.current = true;
+    setHasMounted(true);
   }, []);
   const [internalSingle, setInternalSingle] = useState(
     mode === "single" ? defaultOpenIndex : null
@@ -11205,18 +11237,26 @@ function Accordion({
     if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
     else commit([...currentOpenIndexes, index]);
   }
-  return /* @__PURE__ */ jsx("div", { className: `${Accordion_default.container} ${Accordion_default[size]}`, children: items.map((item, i) => /* @__PURE__ */ jsx(
-    AccordionRow,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      uid,
-      index: i,
-      item,
-      isOpen: openSet.has(i),
-      onToggle: toggle,
-      shouldAnimate: hasMountedRef.current
-    },
-    i
-  )) });
+      className: [Accordion_default.container, Accordion_default[size], variant !== "default" ? Accordion_default[variant] : ""].filter(Boolean).join(" "),
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        AccordionRow,
+        {
+          uid,
+          index: i,
+          item,
+          isOpen: openSet.has(i),
+          onToggle: toggle,
+          shouldAnimate: hasMounted,
+          headlineSize: size === "sm" ? 4 : 3,
+          variant
+        },
+        i
+      ))
+    }
+  );
 }
 var EmptyIllustration = () => /* @__PURE__ */ jsxs(
   "svg",
@@ -12717,4 +12757,46 @@ function Alert({
   );
 }
 
-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 };
+// src/components/inline-status/InlineStatus.module.css
+var InlineStatus_default = {
+  container: "InlineStatus_container",
+  fullWidth: "InlineStatus_fullWidth",
+  leading: "InlineStatus_leading",
+  body: "InlineStatus_body",
+  sm: "InlineStatus_sm",
+  md: "InlineStatus_md",
+  neutral: "InlineStatus_neutral",
+  success: "InlineStatus_success",
+  warning: "InlineStatus_warning",
+  error: "InlineStatus_error",
+  info: "InlineStatus_info",
+  brand: "InlineStatus_brand"
+};
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        InlineStatus_default.container,
+        InlineStatus_default[severity],
+        InlineStatus_default[size],
+        fullWidth ? InlineStatus_default.fullWidth : "",
+        hasLeading ? InlineStatus_default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsx("span", { className: InlineStatus_default.body, children })
+      ]
+    }
+  );
+}
+
+export { Accordion, Alert, AppHeader, AttributeChip, Avatar, Breadcrumbs, Button, ButtonSelect, Card, CardContainer, ChartSemanticColorVar, Checkbox, CheckboxGroup, Chip, ChipMultiToggle, Circle, CodeBlock, CollapsibleHeadline, CopyButton, DateTimePicker, Divider, FadeOverlay, FilterField, Footer, Grid, GridItem, Headline, Hyperlink, Icon, InlineStatus, Input, InputContainer, IntervalSelect, JsonViewer, 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 };