@postenbring/hedwig-react 2.2.0 → 2.2.1

package/dist/index.js

@@ -144,6 +144,7 @@ __export(index_exports, {
   VStack: () => VStack,
   WarningBanner: () => WarningBanner,
   focusTrap: () => focusTrap,
+  inertPropValue: () => inertPropValue,
   useFieldsetContext: () => useFieldsetContext,
   useHydrated: () => useHydrated,
   useMergeRefs: () => useMergeRefs,
@@ -154,7 +155,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/accordion/accordion.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/accordion/accordion-item.tsx
@@ -226,26 +227,208 @@ var AccordionHeader = (0, import_react3.forwardRef)(
 AccordionHeader.displayName = "Accordion.Header";
 
 // src/accordion/accordion-content.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+
+// src/utils/utils.ts
+var React = __toESM(require("react"));
+var import_react4 = require("react");
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
+    }
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
+function useResize(ref) {
+  const [width, setWidth] = (0, import_react4.useState)(0);
+  const [height, setHeight] = (0, import_react4.useState)(0);
+  const handleResize = (0, import_react4.useCallback)(() => {
+    var _a, _b, _c, _d;
+    if ((ref == null ? void 0 : ref.current) !== null) {
+      setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
+      setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
+    }
+  }, [ref]);
+  (0, import_react4.useEffect)(() => {
+    window.addEventListener("load", handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("load", handleResize);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref, handleResize]);
+  (0, import_react4.useEffect)(() => {
+    handleResize();
+  }, []);
+  return { width, height };
+}
+function subscribe() {
+  return () => {
+  };
+}
+function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function focusTrap(element) {
+  var _a, _b;
+  if (element === document.body) return () => {
+  };
+  let inertElements = [];
+  for (let el = element; el; el = el.parentElement) {
+    if (el === document.body) break;
+    for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
+      if (sibling === el) continue;
+      if (!(sibling instanceof HTMLElement)) continue;
+      if (sibling.hasAttribute("inert")) continue;
+      sibling.setAttribute("inert", "true");
+      inertElements.push(sibling);
+    }
+  }
+  return () => {
+    releaseFocusTrap(inertElements);
+    inertElements = [];
+  };
+}
+function releaseFocusTrap(inertElements) {
+  for (const el of inertElements) {
+    el.removeAttribute("inert");
+  }
+}
+var inertBooleanSupported = Number(import_react4.version.split(".")[0]) >= 19;
+var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
+
+// src/utils/auto-animate-height.tsx
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var AccordionContent = (0, import_react4.forwardRef)(
+var AutoAnimateHeight = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      style,
+      animationDuration = "quick",
+      animationEasing = "normal",
+      onTransitionEnd
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "style",
+      "animationDuration",
+      "animationEasing",
+      "onTransitionEnd"
+    ]);
+    var _a2, _b2;
+    const rootRef = (0, import_react5.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react5.useRef)(null);
+    const [height, setHeight] = (0, import_react5.useState)(
+      void 0
+    );
+    const [clonedChildren, setClonedChildren] = (0, import_react5.useState)(
+      () => (0, import_react5.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }), {})
+    );
+    (0, import_react5.useEffect)(() => {
+      var _a3;
+      if (!rootRef.current) return;
+      if (!measurementRef.current) return;
+      if (document.body.scrollHeight === 0) return;
+      const currentMeasurement = measurementRef.current;
+      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
+      let previouslyObservedHeight = newHeight;
+      const resizeObserver = new ResizeObserver(() => {
+        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
+        if (resizedHeight === previouslyObservedHeight) return;
+        previouslyObservedHeight = resizedHeight;
+        setHeight({ height: resizedHeight, shouldAnimate: false });
+      });
+      resizeObserver.observe(currentMeasurement);
+      setHeight({ height: newHeight, shouldAnimate: true });
+      const nextClonedChildren = (0, import_react5.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }), {});
+      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
+        setClonedChildren(nextClonedChildren);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      const currentRoot = rootRef.current;
+      function onTransitionEndHandler(e) {
+        if (e.propertyName !== "height") return;
+        setClonedChildren(nextClonedChildren);
+      }
+      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
+      return () => {
+        resizeObserver.disconnect();
+        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
+      };
+    }, [children]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        onTransitionEnd,
+        style: __spreadValues({
+          position: "relative",
+          overflow: "hidden",
+          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
+          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
+          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height"
+        }, style)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              ref: measurementRef,
+              style: {
+                position: "absolute",
+                visibility: "hidden",
+                pointerEvents: "none"
+              },
+              children
+            }
+          ),
+          clonedChildren
+        ]
+      })
+    );
+  }
+);
+AutoAnimateHeight.displayName = "AutoAnimateHeight";
+
+// src/accordion/accordion-content.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AccordionContent = (0, import_react6.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    const context = (0, import_react4.useContext)(AccordionItemContext);
+    const context = (0, import_react6.useContext)(AccordionItemContext);
     if (context === null) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         id: context.contentId,
         "data-state": context.open ? "open" : "closed"
-      }, { inert: context.open ? void 0 : "true" }), {
+      }, { inert: inertPropValue(!context.open) }), {
         className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
         ref
       }), rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-content-inner"), children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-content-inner"), children })
       })
     );
   }
@@ -253,11 +436,11 @@ var AccordionContent = (0, import_react4.forwardRef)(
 AccordionContent.displayName = "Accordion.Content";
 
 // src/accordion/accordion.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Accordion = (0, import_react5.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Accordion = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname4.clsx)(
@@ -277,19 +460,19 @@ Accordion.Header = AccordionHeader;
 Accordion.Content = AccordionContent;
 
 // src/alert/alert.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot2 = require("@radix-ui/react-slot");
 
 // src/box/box.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var BoxCloseButton = (0, import_react6.forwardRef)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BoxCloseButton = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       __spreadValues({
         className: (0, import_typed_classname5.clsx)("hds-box__close-button", className),
@@ -300,7 +483,7 @@ var BoxCloseButton = (0, import_react6.forwardRef)(
   }
 );
 BoxCloseButton.displayName = "Box.CloseButton";
-var Box = (0, import_react6.forwardRef)(
+var Box = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       asChild,
@@ -321,8 +504,8 @@ var Box = (0, import_react6.forwardRef)(
       "children",
       "className"
     ]);
-    const [closedState, setClosedState] = (0, import_react6.useState)(false);
-    const onClose = (0, import_react6.useCallback)(() => {
+    const [closedState, setClosedState] = (0, import_react8.useState)(false);
+    const onClose = (0, import_react8.useCallback)(() => {
       if (onCloseProp) {
         const result = onCloseProp();
         if (result === true) {
@@ -334,7 +517,7 @@ var Box = (0, import_react6.forwardRef)(
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
     const Component = asChild ? import_react_slot.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname5.clsx)(
@@ -346,8 +529,8 @@ var Box = (0, import_react6.forwardRef)(
         ref
       }, rest), {
         children: [
-          closeable ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_slot.Slottable, { children })
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { children })
         ]
       })
     );
@@ -357,20 +540,20 @@ Box.displayName = "Box";
 Box.CloseButton = BoxCloseButton;
 
 // src/alert/alert.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AlertTitle = (0, import_react7.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AlertTitle = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
     const Component = asChild ? import_react_slot2.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component, __spreadValues({ className: (0, import_typed_classname6.clsx)("hds-alert__title", className), ref }, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Component, __spreadValues({ className: (0, import_typed_classname6.clsx)("hds-alert__title", className), ref }, rest));
   }
 );
 AlertTitle.displayName = "Alert.Title";
-var AlertDescription = (0, import_react7.forwardRef)(
+var AlertDescription = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
     const Component = asChild ? import_react_slot2.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Component,
       __spreadValues({
         className: (0, import_typed_classname6.clsx)("hds-alert__description", className),
@@ -380,17 +563,17 @@ var AlertDescription = (0, import_react7.forwardRef)(
   }
 );
 AlertDescription.displayName = "Alert.Description";
-var Alert = (0, import_react7.forwardRef)(
+var Alert = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Box,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname6.clsx)(`hds-alert`, `hds-alert--${variant}`, className),
         ref
       }, rest), {
         children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_typed_classname6.clsx)("hds-alert--neutral__icon", iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_typed_classname6.clsx)("hds-alert--neutral__icon", iconClassName), children: icon }),
           children
         ]
       })
@@ -404,13 +587,13 @@ Alert.Description = AlertDescription;
 // src/badge/badge.tsx
 var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Badge = (0, import_react8.forwardRef)(
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Badge = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant = "lighter", size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
     const Component = asChild ? import_react_slot3.Slot : "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -431,13 +614,13 @@ Badge.displayName = "Badge";
 // src/blockquote/blockquote.tsx
 var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Blockquote = (0, import_react9.forwardRef)(
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Blockquote = (0, import_react11.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, variant } = _b, rest = __objRest(_b, ["children", "asChild", "className", "variant"]);
     const Component = asChild ? import_react_slot4.Slot : "blockquote";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -455,23 +638,23 @@ var Blockquote = (0, import_react9.forwardRef)(
 Blockquote.displayName = "Blockquote";
 
 // src/breadcrumbs/breadcrumbs.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react10.forwardRef)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Breadcrumbs = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname9.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname9.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/button/button.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot5 = require("@radix-ui/react-slot");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Button = (0, import_react11.forwardRef)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Button = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       asChild,
@@ -491,7 +674,7 @@ var Button = (0, import_react11.forwardRef)(
       "className"
     ]);
     const Component = asChild ? import_react_slot5.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname10.clsx)(
@@ -517,14 +700,14 @@ var Button = (0, import_react11.forwardRef)(
 Button.displayName = "Button";
 
 // src/button-list/button-list.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ButtonList = (0, import_react12.forwardRef)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ButtonList = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant = "default", className, children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
     const Component = "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname11.clsx)("hds-button-list", `hds-button-list--${variant}`, className),
@@ -538,23 +721,23 @@ var ButtonList = (0, import_react12.forwardRef)(
 ButtonList.displayName = "ButtonList";
 
 // src/card/card.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot6 = require("@radix-ui/react-slot");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CardMedia = (0, import_react13.forwardRef)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CardMedia = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__media", className), ref, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__media", className), ref, children }));
   }
 );
 CardMedia.displayName = "Card.Media";
-var CardMediaImg = (0, import_react13.forwardRef)(
+var CardMediaImg = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, variant, className } = _b, rest = __objRest(_b, ["asChild", "variant", "className"]);
     const Component = asChild ? import_react_slot6.Slot : "img";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)(
@@ -568,18 +751,18 @@ var CardMediaImg = (0, import_react13.forwardRef)(
   }
 );
 CardMediaImg.displayName = "Card.MediaImg";
-var CardBody = (0, import_react13.forwardRef)(
+var CardBody = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__body", className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__centerbody", className), children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname12.clsx)("hds-card__body", className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__centerbody", className), children }) }));
   }
 );
 CardBody.displayName = "Card.Body";
-var CardBodyHeader = (0, import_react13.forwardRef)((_a, ref) => {
+var CardBodyHeader = (0, import_react15.forwardRef)((_a, ref) => {
   var _b = _a, { as: Tag, asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
   const Component = asChild ? import_react_slot6.Slot : Tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname12.clsx)("hds-card__body-header", className),
@@ -589,11 +772,11 @@ var CardBodyHeader = (0, import_react13.forwardRef)((_a, ref) => {
   );
 });
 CardBodyHeader.displayName = "Card.BodyHeader";
-var CardBodyHeaderOverline = (0, import_react13.forwardRef)(
+var CardBodyHeaderOverline = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)("hds-card__body-header-overline", className),
@@ -604,11 +787,11 @@ var CardBodyHeaderOverline = (0, import_react13.forwardRef)(
   }
 );
 CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
-var CardBodyHeaderTitle = (0, import_react13.forwardRef)(
+var CardBodyHeaderTitle = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)("hds-card__body-header-title", className),
@@ -619,11 +802,11 @@ var CardBodyHeaderTitle = (0, import_react13.forwardRef)(
   }
 );
 CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
-var CardBodyDescription = (0, import_react13.forwardRef)(
+var CardBodyDescription = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "p";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)("hds-card__body-description", className),
@@ -634,11 +817,11 @@ var CardBodyDescription = (0, import_react13.forwardRef)(
   }
 );
 CardBodyDescription.displayName = "Card.BodyDescription";
-var CardBodyAction = (0, import_react13.forwardRef)(
+var CardBodyAction = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)("hds-card__body-action", className),
@@ -649,11 +832,11 @@ var CardBodyAction = (0, import_react13.forwardRef)(
   }
 );
 CardBodyAction.displayName = "Card.BodyAction";
-var CardBodyActionRow = (0, import_react13.forwardRef)(
+var CardBodyActionRow = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot6.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)("hds-card__body-action-row", className),
@@ -664,11 +847,11 @@ var CardBodyActionRow = (0, import_react13.forwardRef)(
   }
 );
 CardBodyActionRow.displayName = "Card.BodyActionRow";
-var CardBodyActionArrow = (0, import_react13.forwardRef)(
+var CardBodyActionArrow = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
     const Component = asChild ? import_react_slot6.Slot : "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)(
@@ -682,7 +865,7 @@ var CardBodyActionArrow = (0, import_react13.forwardRef)(
   }
 );
 CardBodyActionArrow.displayName = "Card.BodyActionArrow";
-var Card = (0, import_react13.forwardRef)(
+var Card = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag = "section",
@@ -703,7 +886,7 @@ var Card = (0, import_react13.forwardRef)(
     ]);
     const Component = asChild ? import_react_slot6.Slot : Tag;
     const effectiveColor = variant === "focus" && !color ? "darker" : color;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname12.clsx)(
@@ -719,7 +902,7 @@ var Card = (0, import_react13.forwardRef)(
           className
         ),
         ref,
-        children: variant === "full-width" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__layoutwrapper", className), children }) : children
+        children: variant === "full-width" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-card__layoutwrapper", className), children }) : children
       })
     );
   }
@@ -737,13 +920,13 @@ Card.BodyActionRow = CardBodyActionRow;
 Card.BodyActionArrow = CardBodyActionArrow;
 
 // src/description-list/description-list.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DescriptionList = (0, import_react14.forwardRef)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DescriptionList = (0, import_react16.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant = "vertical", className } = _b, rest = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "dl",
       __spreadValues({
         ref,
@@ -763,29 +946,29 @@ DescriptionList.displayName = "DescriptionList";
 // src/figure/figure.tsx
 var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot7 = require("@radix-ui/react-slot");
-var import_react15 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Figure = (0, import_react15.forwardRef)(
+var import_react17 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Figure = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className } = _b, rest = __objRest(_b, ["children", "asChild", "className"]);
     const Component = asChild ? import_react_slot7.Slot : "figure";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname14.clsx)("hds-figure", className) }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname14.clsx)("hds-figure", className) }, rest), { children }));
   }
 );
 Figure.displayName = "Figure";
 
 // src/form/checkbox/checkbox.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/error-message/error-message.tsx
 var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
-var import_react16 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ErrorMessage = (0, import_react16.forwardRef)(
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ErrorMessage = (0, import_react18.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "polite",
@@ -801,12 +984,12 @@ var ErrorMessage = (0, import_react16.forwardRef)(
 ErrorMessage.displayName = "ErrorMessage";
 
 // src/form/fieldset/fieldset.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var FieldsetContext = (0, import_react17.createContext)({ hasError: false });
-var useFieldsetContext = () => (0, import_react17.useContext)(FieldsetContext);
-var Fieldset = (0, import_react17.forwardRef)(function Fieldset2(_a, ref) {
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FieldsetContext = (0, import_react19.createContext)({ hasError: false });
+var useFieldsetContext = () => (0, import_react19.useContext)(FieldsetContext);
+var Fieldset = (0, import_react19.forwardRef)(function Fieldset2(_a, ref) {
   var _b = _a, {
     className,
     style,
@@ -825,8 +1008,8 @@ var Fieldset = (0, import_react17.forwardRef)(function Fieldset2(_a, ref) {
     "legend",
     "children"
   ]);
-  const errorMessageId = (0, import_react17.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const errorMessageId = (0, import_react19.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "fieldset",
     __spreadProps(__spreadValues({
       "aria-describedby": errorMessage ? errorMessageId : void 0,
@@ -836,7 +1019,7 @@ var Fieldset = (0, import_react17.forwardRef)(function Fieldset2(_a, ref) {
       style
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "legend",
           __spreadProps(__spreadValues({
             className: (0, import_typed_classname16.clsx)(
@@ -848,16 +1031,16 @@ var Fieldset = (0, import_react17.forwardRef)(function Fieldset2(_a, ref) {
             children: legend
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
 });
 
 // src/form/checkbox/checkbox.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Checkbox = (0, import_react18.forwardRef)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Checkbox = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "plain",
@@ -876,11 +1059,11 @@ var Checkbox = (0, import_react18.forwardRef)(
       "children",
       "className"
     ]);
-    const errorMessageId = (0, import_react18.useId)();
+    const errorMessageId = (0, import_react20.useId)();
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_typed_classname17.clsx)("hds-checkbox-wrapper"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_typed_classname17.clsx)("hds-checkbox-wrapper"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "div",
         {
           className: (0, import_typed_classname17.clsx)(
@@ -892,8 +1075,8 @@ var Checkbox = (0, import_react18.forwardRef)(
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "input",
                 __spreadProps(__spreadValues({}, rest), {
                   "aria-invalid": hasError ? true : void 0,
@@ -902,28 +1085,28 @@ var Checkbox = (0, import_react18.forwardRef)(
                   type: "checkbox"
                 })
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
-              title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
+              title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
             ] }),
             title ? children : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/form/date-picker/date-picker.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/input-group/input-group.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var InputGroup = (0, import_react21.forwardRef)(function InputGroup2(_a, ref) {
   var _b = _a, {
     id,
     className,
@@ -950,8 +1133,8 @@ var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
     "readOnly",
     "children"
   ]);
-  const errorMessageId = (0, import_react19.useId)();
-  const inputId = (0, import_react19.useId)();
+  const errorMessageId = (0, import_react21.useId)();
+  const inputId = (0, import_react21.useId)();
   const renderInput = () => {
     var _a2;
     const inputProps = {
@@ -963,15 +1146,15 @@ var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
     if (typeof children === "function") {
       return children(inputProps);
     }
-    const input = import_react19.Children.toArray(children)[0];
-    if (!(0, import_react19.isValidElement)(input)) {
+    const input = import_react21.Children.toArray(children)[0];
+    if (!(0, import_react21.isValidElement)(input)) {
       return;
     }
-    return (0, import_react19.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
+    return (0, import_react21.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
       className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
     }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       className: (0, import_typed_classname18.clsx)(
@@ -986,7 +1169,7 @@ var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
       style
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "label",
           __spreadProps(__spreadValues({
             className: (0, import_typed_classname18.clsx)("hds-input-group__label", labelClassName)
@@ -995,7 +1178,7 @@ var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
             children: label
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             className: (0, import_typed_classname18.clsx)("hds-input-group__input-wrapper"),
@@ -1004,94 +1187,15 @@ var InputGroup = (0, import_react19.forwardRef)(function InputGroup2(_a, ref) {
             children: renderInput()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
 });
 
-// src/utils/utils.ts
-var React2 = __toESM(require("react"));
-var import_react20 = require("react");
-function useMergeRefs(refs) {
-  return React2.useMemo(() => {
-    if (refs.every((ref) => ref === null)) {
-      return null;
-    }
-    return (value) => {
-      refs.forEach((ref) => {
-        if (typeof ref === "function") {
-          ref(value);
-        } else if (ref !== null) {
-          ref.current = value;
-        }
-      });
-    };
-  }, refs);
-}
-function useResize(ref) {
-  const [width, setWidth] = (0, import_react20.useState)(0);
-  const [height, setHeight] = (0, import_react20.useState)(0);
-  const handleResize = (0, import_react20.useCallback)(() => {
-    var _a, _b, _c, _d;
-    if ((ref == null ? void 0 : ref.current) !== null) {
-      setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
-      setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
-    }
-  }, [ref]);
-  (0, import_react20.useEffect)(() => {
-    window.addEventListener("load", handleResize);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("load", handleResize);
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [ref, handleResize]);
-  (0, import_react20.useEffect)(() => {
-    handleResize();
-  }, []);
-  return { width, height };
-}
-function subscribe() {
-  return () => {
-  };
-}
-function useHydrated() {
-  return React2.useSyncExternalStore(
-    subscribe,
-    () => true,
-    () => false
-  );
-}
-function focusTrap(element) {
-  var _a, _b;
-  if (element === document.body) return () => {
-  };
-  let inertElements = [];
-  for (let el = element; el; el = el.parentElement) {
-    if (el === document.body) break;
-    for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
-      if (sibling === el) continue;
-      if (!(sibling instanceof HTMLElement)) continue;
-      if (sibling.hasAttribute("inert")) continue;
-      sibling.setAttribute("inert", "true");
-      inertElements.push(sibling);
-    }
-  }
-  return () => {
-    releaseFocusTrap(inertElements);
-    inertElements = [];
-  };
-}
-function releaseFocusTrap(inertElements) {
-  for (const el of inertElements) {
-    el.removeAttribute("inert");
-  }
-}
-
 // src/form/date-picker/date-picker.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var DatePicker = (0, import_react21.forwardRef)(function DatePicker2(_a, ref) {
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DatePicker = (0, import_react22.forwardRef)(function DatePicker2(_a, ref) {
   var _b = _a, {
     className,
     variant,
@@ -1115,9 +1219,9 @@ var DatePicker = (0, import_react21.forwardRef)(function DatePicker2(_a, ref) {
     "readOnly",
     "calendarButtonTitle"
   ]);
-  const inputRef = (0, import_react21.useRef)(null);
+  const inputRef = (0, import_react22.useRef)(null);
   const mergedRef = useMergeRefs([inputRef, ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     InputGroup,
     {
       className: (0, import_typed_classname19.clsx)("hds-date-picker", className),
@@ -1129,8 +1233,8 @@ var DatePicker = (0, import_react21.forwardRef)(function DatePicker2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           __spreadProps(__spreadValues(__spreadValues({}, rest), inputProps), {
             disabled,
@@ -1139,7 +1243,7 @@ var DatePicker = (0, import_react21.forwardRef)(function DatePicker2(_a, ref) {
             type: "date"
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             className: (0, import_typed_classname19.clsx)("hds-date-picker__calendar-button"),
@@ -1158,65 +1262,13 @@ var DatePicker = (0, import_react21.forwardRef)(function DatePicker2(_a, ref) {
 DatePicker.displayName = "DatePicker";
 
 // src/form/error-summary/error-summary.tsx
-var import_react27 = require("react");
-
-// src/message/message.tsx
-var import_react22 = require("react");
-var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot8 = require("@radix-ui/react-slot");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var MessageTitle = (0, import_react22.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot8.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Component,
-      __spreadValues({
-        className: (0, import_typed_classname20.clsx)("hds-message__title", className),
-        ref
-      }, rest)
-    );
-  }
-);
-MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react22.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot8.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Component,
-      __spreadValues({
-        className: (0, import_typed_classname20.clsx)("hds-message__description", className),
-        ref
-      }, rest)
-    );
-  }
-);
-MessageDescription.displayName = "Message.Description";
-var Message = (0, import_react22.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      Box,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname20.clsx)(`hds-message`, `hds-message--${variant}`, className),
-        ref
-      }, rest), {
-        children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: (0, import_typed_classname20.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
-          children
-        ]
-      })
-    );
-  }
-);
-Message.displayName = "Message";
-Message.Title = MessageTitle;
-Message.Description = MessageDescription;
+var import_react26 = require("react");
+var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot9 = require("@radix-ui/react-slot");
 
 // src/list/list.tsx
 var import_react23 = require("react");
-var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var UnorderedList = (0, import_react23.forwardRef)(
   (_a, ref) => {
@@ -1225,7 +1277,7 @@ var UnorderedList = (0, import_react23.forwardRef)(
       "ul",
       __spreadValues({
         ref,
-        className: (0, import_typed_classname21.clsx)(
+        className: (0, import_typed_classname20.clsx)(
           "hds-list",
           size !== "default" && `hds-list--${size}`,
           className
@@ -1242,7 +1294,7 @@ var OrderedList = (0, import_react23.forwardRef)(
       "ol",
       __spreadValues({
         ref,
-        className: (0, import_typed_classname21.clsx)(
+        className: (0, import_typed_classname20.clsx)(
           "hds-list",
           size !== "default" && `hds-list--${size}`,
           className
@@ -1254,7 +1306,7 @@ var OrderedList = (0, import_react23.forwardRef)(
 OrderedList.displayName = "OrderedList";
 
 // src/list/link-list.tsx
-var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
 var import_react24 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var LinkList = (0, import_react24.forwardRef)(
@@ -1264,7 +1316,7 @@ var LinkList = (0, import_react24.forwardRef)(
       UnorderedList,
       __spreadValues({
         ref,
-        className: (0, import_typed_classname22.clsx)("hds-list--link-list", className)
+        className: (0, import_typed_classname21.clsx)("hds-list--link-list", className)
       }, rest)
     );
   }
@@ -1273,18 +1325,18 @@ LinkList.displayName = "LinkList";
 
 // src/link/link.tsx
 var React3 = require("react");
-var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
 var import_react25 = require("react");
-var import_react_slot9 = require("@radix-ui/react-slot");
+var import_react_slot8 = require("@radix-ui/react-slot");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Link = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, variant = "underline", size = "default", icon, className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "icon", "className"]);
-    const Component = asChild ? import_react_slot9.Slot : "a";
+    const Component = asChild ? import_react_slot8.Slot : "a";
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname23.clsx)(
+        className: (0, import_typed_classname22.clsx)(
           "hds-link",
           variant !== "underline" && `hds-link--${variant}`,
           size !== "default" && `hds-link--${size}`,
@@ -1301,105 +1353,6 @@ var Link = (0, import_react25.forwardRef)(
 );
 Link.displayName = "Link";
 
-// src/utils/auto-animate-height.tsx
-var import_react26 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var AutoAnimateHeight = (0, import_react26.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      style,
-      animationDuration = "quick",
-      animationEasing = "normal",
-      onTransitionEnd
-    } = _b, rest = __objRest(_b, [
-      "children",
-      "style",
-      "animationDuration",
-      "animationEasing",
-      "onTransitionEnd"
-    ]);
-    var _a2, _b2;
-    const rootRef = (0, import_react26.useRef)(null);
-    const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react26.useRef)(null);
-    const [height, setHeight] = (0, import_react26.useState)(
-      void 0
-    );
-    const [clonedChildren, setClonedChildren] = (0, import_react26.useState)(
-      () => (0, import_react26.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children }), {})
-    );
-    (0, import_react26.useEffect)(() => {
-      var _a3;
-      if (!rootRef.current) return;
-      if (!measurementRef.current) return;
-      if (document.body.scrollHeight === 0) return;
-      const currentMeasurement = measurementRef.current;
-      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
-      let previouslyObservedHeight = newHeight;
-      const resizeObserver = new ResizeObserver(() => {
-        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
-        if (resizedHeight === previouslyObservedHeight) return;
-        previouslyObservedHeight = resizedHeight;
-        setHeight({ height: resizedHeight, shouldAnimate: false });
-      });
-      resizeObserver.observe(currentMeasurement);
-      setHeight({ height: newHeight, shouldAnimate: true });
-      const nextClonedChildren = (0, import_react26.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children }), {});
-      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
-        setClonedChildren(nextClonedChildren);
-        return () => {
-          resizeObserver.disconnect();
-        };
-      }
-      const currentRoot = rootRef.current;
-      function onTransitionEndHandler(e) {
-        if (e.propertyName !== "height") return;
-        setClonedChildren(nextClonedChildren);
-      }
-      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
-      return () => {
-        resizeObserver.disconnect();
-        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
-      };
-    }, [children]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: mergedRef,
-        onTransitionEnd,
-        style: __spreadValues({
-          position: "relative",
-          overflow: "hidden",
-          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
-          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
-          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
-          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
-          willChange: "height"
-        }, style)
-      }, rest), {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              ref: measurementRef,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none"
-              },
-              children
-            }
-          ),
-          clonedChildren
-        ]
-      })
-    );
-  }
-);
-AutoAnimateHeight.displayName = "AutoAnimateHeight";
-
 // src/form/error-summary/focus.ts
 function focusWithLegendOrLabelInViewport(id) {
   var _a;
@@ -1442,33 +1395,30 @@ function labelForInput(input) {
 }
 
 // src/form/error-summary/error-summary.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var ErrorSummaryHeading = (0, import_react27.forwardRef)((_a, ref) => {
-  var _b = _a, { children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["children", "as", "autoFocus"]);
-  const focusRef = (0, import_react27.useRef)(null);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ErrorSummaryHeading = (0, import_react26.forwardRef)((_a, ref) => {
+  var _b = _a, { asChild, children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["asChild", "children", "as", "autoFocus"]);
+  const focusRef = (0, import_react26.useRef)(null);
   const mergedRef = useMergeRefs([focusRef, ref]);
-  (0, import_react27.useEffect)(() => {
+  const Component = asChild ? import_react_slot9.Slot : Tag;
+  (0, import_react26.useEffect)(() => {
     setTimeout(() => {
       if (focusRef.current && autoFocus) {
         focusRef.current.focus();
       }
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Message.Title, __spreadProps(__spreadValues({ ref: mergedRef, tabIndex: -1, asChild: true }, rest), { children: Tag ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tag, { children }) : children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname23.clsx)(`hds-error-summary__title`), ref: mergedRef, tabIndex: -1 }, rest), { children }));
 });
 ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
-var ErrorSummaryList = (0, import_react27.forwardRef)(
+var ErrorSummaryList = (0, import_react26.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, style: _style, size = "small" } = _b, rest = __objRest(_b, ["children", "style", "size"]);
-    const style = __spreadValues({
-      // Match the link `solid` style, which black underline
-      "--_hds-list-marker-color": "var(--hds-ui-colors-black)"
-    }, _style);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
+    var _b = _a, { children, size = "small" } = _b, rest = __objRest(_b, ["children", "size"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref }, rest), { children }));
   }
 );
 ErrorSummaryList.displayName = "ErrorSummary.List";
-var ErrorSummaryItem = (0, import_react27.forwardRef)(
+var ErrorSummaryItem = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, href, linkProps } = _b, rest = __objRest(_b, ["children", "href", "linkProps"]);
     function onClick(e) {
@@ -1478,14 +1428,24 @@ var ErrorSummaryItem = (0, import_react27.forwardRef)(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname23.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      Link,
+      __spreadProps(__spreadValues({
+        size: "small",
+        href,
+        variant: "inverted-no-underline"
+      }, linkProps), {
+        onClick,
+        children
+      })
+    ) }));
   }
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";
-var ErrorSummary = (0, import_react27.forwardRef)(
+var ErrorSummary = (0, import_react26.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Message, __spreadProps(__spreadValues({ variant: "warning", ref }, rest), { children }));
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box, __spreadProps(__spreadValues({ ref }, rest), { className: (0, import_typed_classname23.clsx)(`hds-error-summary`, className), children }));
   }
 );
 ErrorSummary.displayName = "ErrorSummary";
@@ -1494,12 +1454,12 @@ ErrorSummary.List = ErrorSummaryList;
 ErrorSummary.Item = ErrorSummaryItem;
 
 // src/form/input/input.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Input = (0, import_react28.forwardRef)(function Input2(_a, ref) {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Input = (0, import_react27.forwardRef)(function Input2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     InputGroup,
     {
       className: (0, import_typed_classname24.clsx)("hds-input", className),
@@ -1511,35 +1471,35 @@ var Input = (0, import_react28.forwardRef)(function Input2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Input.displayName = "Input";
 
 // src/form/radio-button/radio-button.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radio-button/radio-group.tsx
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react29.createContext)({
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react28.createContext)({
   name: void 0,
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react29.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react29.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react28.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2(_a, ref) {
   var _b = _a, { name, value, errorMessage, onChange, children } = _b, rest = __objRest(_b, ["name", "value", "errorMessage", "onChange", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
 RadioGroup.displayName = "RadioGroup";
 
 // src/form/radio-button/radio-button.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var isChecked = ({
   checked,
   selectedValue,
@@ -1549,7 +1509,7 @@ var isChecked = ({
   if (typeof selectedValue !== "undefined") return value === selectedValue;
   return void 0;
 };
-var RadioButton = (0, import_react30.forwardRef)(
+var RadioButton = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -1577,7 +1537,7 @@ var RadioButton = (0, import_react30.forwardRef)(
     ]);
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
         className: (0, import_typed_classname25.clsx)(
@@ -1589,8 +1549,8 @@ var RadioButton = (0, import_react30.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               __spreadProps(__spreadValues(__spreadValues({}, context), rest), {
                 checked: isChecked({ checked, selectedValue, value }),
@@ -1599,8 +1559,8 @@ var RadioButton = (0, import_react30.forwardRef)(
                 type: "radio"
               })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
-            title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
+            title ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
           ] }),
           title ? children : null
         ]
@@ -1611,12 +1571,12 @@ var RadioButton = (0, import_react30.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // src/form/select/select.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Select = (0, import_react31.forwardRef)(function Select2(_a, ref) {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Select = (0, import_react30.forwardRef)(function Select2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, children } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     InputGroup,
     {
       className: (0, import_typed_classname26.clsx)("hds-select", className),
@@ -1627,19 +1587,19 @@ var Select = (0, import_react31.forwardRef)(function Select2(_a, ref) {
       labelProps,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
     }
   );
 });
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_react32 = require("react");
+var import_react31 = require("react");
 var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Textarea = (0, import_react32.forwardRef)(function Textarea2(_a, ref) {
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Textarea = (0, import_react31.forwardRef)(function Textarea2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     InputGroup,
     {
       className: (0, import_typed_classname27.clsx)("hds-textarea", className),
@@ -1651,37 +1611,37 @@ var Textarea = (0, import_react32.forwardRef)(function Textarea2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Textarea.displayName = "Textarea";
 
 // src/footer/footer.tsx
-var import_react33 = require("react");
+var import_react32 = require("react");
 var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot10 = require("@radix-ui/react-slot");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var FooterLogo = (0, import_react33.forwardRef)(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var FooterLogo = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot10.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname28.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname28.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
   }
 );
 FooterLogo.displayName = "Footer.Logo";
-var FooterButtonLink = (0, import_react33.forwardRef)(
+var FooterButtonLink = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot10.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { asChild: true, variant: "inverted", className: (0, import_typed_classname28.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { asChild: true, variant: "inverted", className: (0, import_typed_classname28.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
-var FooterLinkSections = (0, import_react33.forwardRef)(
+var FooterLinkSections = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Accordion,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname28.clsx)("hds-footer__link-sections", className),
@@ -1693,36 +1653,36 @@ var FooterLinkSections = (0, import_react33.forwardRef)(
   }
 );
 FooterLinkSections.displayName = "Footer.LinkSections";
-var FooterLinkSection = (0, import_react33.forwardRef)(
+var FooterLinkSection = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
-    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkList, { children });
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LinkList, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         Accordion.Item,
         __spreadProps(__spreadValues({
           className: (0, import_typed_classname28.clsx)(`hds-footer__link-section`, className),
           ref
         }, rest), {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Accordion.Header, { children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Accordion.Content, { children: linkListChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion.Header, { children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion.Content, { children: linkListChildren })
           ]
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_typed_classname28.clsx)(`hds-footer__link-section`, className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_typed_classname28.clsx)(`hds-footer__link-section`, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { children: heading }),
         linkListChildren
       ] })
     ] });
   }
 );
 FooterLinkSection.displayName = "Footer.LinkSection";
-var Footer = (0, import_react33.forwardRef)(
+var Footer = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
     const Component = asChild ? import_react_slot10.Slot : "footer";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname28.clsx)(
@@ -1746,9 +1706,9 @@ Footer.LinkSection = FooterLinkSection;
 // src/help-text/help-text.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
 var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
-var import_react34 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var HelpText = (0, import_react34.forwardRef)(
+var import_react33 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var HelpText = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, helpText, title, side = "top", align = "start", boxProps } = _b, rest = __objRest(_b, ["children", "className", "helpText", "title", "side", "align", "boxProps"]);
     return (
@@ -1756,8 +1716,8 @@ var HelpText = (0, import_react34.forwardRef)(
       // In the future we can use the native popover api, but as of writing, though all browsers support it
       // it's not far enough back to be used in production
       // https://caniuse.com/mdn-html_elements_input_popovertarget
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Popover.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           __spreadProps(__spreadValues({
             ref,
@@ -1768,12 +1728,12 @@ var HelpText = (0, import_react34.forwardRef)(
             children
           })
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Box,
           __spreadProps(__spreadValues({}, boxProps), {
             className: (0, import_typed_classname29.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box.CloseButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box.CloseButton, {}) }),
               helpText
             ]
           })
@@ -1787,13 +1747,13 @@ HelpText.displayName = "HelpText";
 // src/layout/container/container.tsx
 var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot11 = require("@radix-ui/react-slot");
-var import_react35 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Container = (0, import_react35.forwardRef)(
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Container = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Tag = "div", asChild, className, children, variant } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant"]);
     const Component = asChild ? import_react_slot11.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname30.clsx)(
@@ -1812,7 +1772,7 @@ Container.displayName = "Container";
 // src/layout/grid/grid.tsx
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot12 = require("@radix-ui/react-slot");
-var import_react36 = require("react");
+var import_react35 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -1833,13 +1793,13 @@ function getSpacingVariable(size) {
 }
 
 // src/layout/grid/grid.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var GridItem = (0, import_react36.forwardRef)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var GridItem = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
     const Component = asChild ? import_react_slot12.Slot : "div";
     const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
@@ -1852,12 +1812,12 @@ var GridItem = (0, import_react36.forwardRef)(
   }
 );
 GridItem.displayName = "Grid.Item";
-var Grid = (0, import_react36.forwardRef)(
+var Grid = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_slot12.Slot : "div";
     const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
@@ -1875,10 +1835,10 @@ Grid.Item = GridItem;
 // src/layout/stack/stack.tsx
 var React4 = require("react");
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
-var import_react37 = require("react");
+var import_react36 = require("react");
 var import_react_slot13 = require("@radix-ui/react-slot");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Stack = (0, import_react37.forwardRef)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Stack = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1907,7 +1867,7 @@ var Stack = (0, import_react37.forwardRef)(
     ]);
     const Component = asChild ? import_react_slot13.Slot : "div";
     const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
@@ -1920,28 +1880,82 @@ var Stack = (0, import_react37.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react37.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react36.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react37.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react36.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 
-// src/modal/modal.tsx
-var import_react38 = require("react");
+// src/message/message.tsx
+var import_react37 = require("react");
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot14 = require("@radix-ui/react-slot");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var MessageTitle = (0, import_react37.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot14.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname33.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "Message.Title";
+var MessageDescription = (0, import_react37.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot14.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname33.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "Message.Description";
+var Message = (0, import_react37.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      Box,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname33.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_typed_classname33.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
+
+// src/modal/modal.tsx
+var import_react38 = require("react");
+var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot15 = require("@radix-ui/react-slot");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ModalHeader = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot14.Slot : "h1";
+    const Component = asChild ? import_react_slot15.Slot : "h1";
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-modal__header", className),
+        className: (0, import_typed_classname34.clsx)("hds-modal__header", className),
         ref
       }, rest)
     );
@@ -1951,11 +1965,11 @@ ModalHeader.displayName = "Modal.Header";
 var ModalContent = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot14.Slot : "div";
+    const Component = asChild ? import_react_slot15.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-modal__content", className),
+        className: (0, import_typed_classname34.clsx)("hds-modal__content", className),
         ref
       }, rest)
     );
@@ -1965,11 +1979,11 @@ ModalContent.displayName = "Modal.Content";
 var ModalFooter = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot14.Slot : "footer";
+    const Component = asChild ? import_react_slot15.Slot : "footer";
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-modal__footer", className),
+        className: (0, import_typed_classname34.clsx)("hds-modal__footer", className),
         ref
       }, rest)
     );
@@ -2006,7 +2020,7 @@ var Modal = (0, import_react38.forwardRef)(
       Box,
       {
         asChild: true,
-        className: (0, import_typed_classname33.clsx)("hds-modal", className),
+        className: (0, import_typed_classname34.clsx)("hds-modal", className),
         closeable: true,
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
@@ -2042,12 +2056,12 @@ function useScrollLock(modalRef, bodyClass) {
 
 // src/navbar/navbar.tsx
 var import_react40 = require("react");
-var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot15 = require("@radix-ui/react-slot");
+var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot16 = require("@radix-ui/react-slot");
 
 // src/navbar/navbar-expandable-menu.tsx
 var import_react39 = require("react");
-var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/navbar/icons.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -2086,12 +2100,12 @@ function NavbarExpandableMenu({ children }) {
   (0, import_react39.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
-      document.body.classList.add((0, import_typed_classname34.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.add((0, import_typed_classname35.clsx)("hds-navbar-scroll-lock"));
       const releaseFocusTrap2 = focusTrap(
-        document.getElementsByClassName((0, import_typed_classname34.clsx)("hds-navbar"))[0]
+        document.getElementsByClassName((0, import_typed_classname35.clsx)("hds-navbar"))[0]
       );
       return () => {
-        document.body.classList.remove((0, import_typed_classname34.clsx)("hds-navbar-scroll-lock"));
+        document.body.classList.remove((0, import_typed_classname35.clsx)("hds-navbar-scroll-lock"));
         releaseFocusTrap2();
       };
     }
@@ -2125,7 +2139,7 @@ var NavbarExpandableMenuTrigger = (0, import_react39.forwardRef)(
       __spreadProps(__spreadValues({
         "aria-expanded": open,
         "aria-controls": contentId,
-        className: (0, import_typed_classname34.clsx)(
+        className: (0, import_typed_classname35.clsx)(
           "hds-navbar__item",
           className,
           open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
@@ -2138,8 +2152,8 @@ var NavbarExpandableMenuTrigger = (0, import_react39.forwardRef)(
       }, rest), {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "hds-navbar__item-responsive-text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname34.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname34.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname35.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname35.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuIcon, {}) })
         ]
@@ -2155,11 +2169,11 @@ var NavbarExpandableMenuContent = (0, import_react39.forwardRef)((_a, ref) => {
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       id: contentId,
-      className: (0, import_typed_classname34.clsx)("hds-navbar__expandable-menu-content", className),
+      className: (0, import_typed_classname35.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
-    }), { inert: open ? void 0 : "true" }), {
+    }), { inert: inertPropValue(!open) }), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_typed_classname34.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_typed_classname35.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
@@ -2170,20 +2184,20 @@ var import_jsx_runtime39 = require("react/jsx-runtime");
 var NavbarLogo = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
-    const Component = asChild ? import_react_slot15.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
+    const Component = asChild ? import_react_slot16.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname36.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
 var NavbarLogoAndServiceText = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
-    const Component = asChild ? import_react_slot15.Slot : "div";
+    const Component = asChild ? import_react_slot16.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname35.clsx)(
+        className: (0, import_typed_classname36.clsx)(
           "hds-navbar__logo-and-service-text",
           `hds-navbar__logo-and-service-text--${variant}`,
           className
@@ -2198,26 +2212,26 @@ NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
 var NavbarItemIcon = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_slot15.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_slot16.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname36.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
   }
 );
 NavbarItemIcon.displayName = "Navbar.ItemIcon";
 var NavbarItem = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
-    const Component = asChild ? import_react_slot15.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    const Component = asChild ? import_react_slot16.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname36.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarItem.displayName = "Navbar.Item";
 var NavbarButtonItem = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
-    const Component = asChild ? import_react_slot15.Slot : "button";
+    const Component = asChild ? import_react_slot16.Slot : "button";
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname35.clsx)("hds-navbar__item", className),
+        className: (0, import_typed_classname36.clsx)("hds-navbar__item", className),
         ref,
         type: "button"
       }, rest), {
@@ -2230,19 +2244,19 @@ NavbarButtonItem.displayName = "Navbar.ButtonItem";
 var NavbarLinkItem = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
-    const Component = asChild ? import_react_slot15.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    const Component = asChild ? import_react_slot16.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname36.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarLinkItem.displayName = "Navbar.LinkItem";
 var NavbarNavigation = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot15.Slot : "div";
+    const Component = asChild ? import_react_slot16.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname35.clsx)("hds-navbar__navigation", className),
+        className: (0, import_typed_classname36.clsx)("hds-navbar__navigation", className),
         ref
       }, rest)
     );
@@ -2252,11 +2266,11 @@ NavbarNavigation.displayName = "Navbar.Navigation";
 var Navbar = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
-    const Component = asChild ? import_react_slot15.Slot : "header";
+    const Component = asChild ? import_react_slot16.Slot : "header";
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname35.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        className: (0, import_typed_classname36.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
       }, rest), {
         children
@@ -2277,7 +2291,7 @@ Navbar.ItemIcon = NavbarItemIcon;
 Navbar.Navigation = NavbarNavigation;
 
 // src/show-more/show-more.tsx
-var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
 var import_react41 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ShowMoreButton = (0, import_react41.forwardRef)(
@@ -2287,7 +2301,7 @@ var ShowMoreButton = (0, import_react41.forwardRef)(
       "button",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname36.clsx)(
+        className: (0, import_typed_classname37.clsx)(
           "hds-show-more",
           variant === "show-more-show-less" && "hds-show-more--show-less",
           className
@@ -2297,7 +2311,7 @@ var ShowMoreButton = (0, import_react41.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: (0, import_typed_classname36.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: (0, import_typed_classname37.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -2306,8 +2320,8 @@ var ShowMoreButton = (0, import_react41.forwardRef)(
 ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
-var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot16 = require("@radix-ui/react-slot");
+var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot17 = require("@radix-ui/react-slot");
 var import_react42 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var Skeleton = (0, import_react42.forwardRef)(
@@ -2333,11 +2347,11 @@ var Skeleton = (0, import_react42.forwardRef)(
       "className",
       "style"
     ]);
-    const Component = asChild ? import_react_slot16.Slot : Tag;
+    const Component = asChild ? import_react_slot17.Slot : Tag;
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Component,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-        className: (0, import_typed_classname37.clsx)(
+        className: (0, import_typed_classname38.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
           !animation && `hds-skeleton--no-animation`,
@@ -2345,7 +2359,7 @@ var Skeleton = (0, import_react42.forwardRef)(
         ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         "aria-hidden": true
-      }, { inert: "true" }), {
+      }, { inert: inertPropValue(true) }), {
         ref
       }), rest), {
         children
@@ -2357,7 +2371,7 @@ Skeleton.displayName = "Skeleton";
 
 // src/spinner/spinner.tsx
 var import_react43 = require("react");
-var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var Spinner = (0, import_react43.forwardRef)(
   (_a, ref) => {
@@ -2368,7 +2382,7 @@ var Spinner = (0, import_react43.forwardRef)(
       __spreadValues({
         title,
         style,
-        className: (0, import_typed_classname38.clsx)(
+        className: (0, import_typed_classname39.clsx)(
           "hds-spinner",
           `hds-spinner--${size}`,
           delay && "hds-spinner--delay",
@@ -2382,7 +2396,7 @@ var Spinner = (0, import_react43.forwardRef)(
 Spinner.displayName = "Spinner";
 
 // src/step-indicator/step-indicator.tsx
-var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
 var import_react44 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var StepIndicator = (0, import_react44.forwardRef)(
@@ -2408,23 +2422,23 @@ var StepIndicator = (0, import_react44.forwardRef)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname39.clsx)("hds-step-indicator", className),
+        className: (0, import_typed_classname40.clsx)("hds-step-indicator", className),
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_typed_classname39.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_typed_classname39.clsx)("hds-step-indicator__left-label"), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_typed_classname40.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_typed_classname40.clsx)("hds-step-indicator__left-label"), children: label }),
             /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_typed_classname39.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_typed_classname40.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
-              className: (0, import_typed_classname39.clsx)("hds-step-indicator__step"),
+              className: (0, import_typed_classname40.clsx)("hds-step-indicator__step"),
               "data-state": getStepState(i + 1, activeStep)
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TitleComponent, { className: (0, import_typed_classname39.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TitleComponent, { className: (0, import_typed_classname40.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2449,17 +2463,17 @@ function getStepState(renderedStep, activeStep) {
 
 // src/styled-html/styled-html.tsx
 var import_react45 = require("react");
-var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot17 = require("@radix-ui/react-slot");
+var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot18 = require("@radix-ui/react-slot");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var StyledHtml = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, size, unstable_darkmode: darkmode = false, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "unstable_darkmode", "className"]);
-    const Component = asChild ? import_react_slot17.Slot : "div";
+    const Component = asChild ? import_react_slot18.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname40.clsx)(
+        className: (0, import_typed_classname41.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
           darkmode && "hds-styled-html--darkmode",
@@ -2475,7 +2489,7 @@ var StyledHtml = (0, import_react45.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
-var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
 var import_react46 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Table = (0, import_react46.forwardRef)(
@@ -2488,7 +2502,7 @@ var Table = (0, import_react46.forwardRef)(
         __spreadProps(__spreadValues({
           "aria-describedby": description ? descriptionId : void 0,
           ref,
-          className: (0, import_typed_classname41.clsx)(
+          className: (0, import_typed_classname42.clsx)(
             "hds-table",
             {
               "hds-table--compressed": size === "compressed",
@@ -2503,7 +2517,7 @@ var Table = (0, import_react46.forwardRef)(
           ]
         })
       ),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: (0, import_typed_classname41.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: (0, import_typed_classname42.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
     ] });
   }
 );
@@ -2511,8 +2525,8 @@ Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
 var import_react50 = require("react");
-var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot19 = require("@radix-ui/react-slot");
+var import_typed_classname45 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot20 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
 var import_react47 = require("react");
@@ -2529,14 +2543,14 @@ function useTabsContext() {
 
 // src/tabs/tabs-content.tsx
 var import_react48 = require("react");
-var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot18 = require("@radix-ui/react-slot");
+var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot19 = require("@radix-ui/react-slot");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var TabsContents = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
-    const Component = asChild ? import_react_slot18.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname42.clsx)("hds-tabs__contents") }, rest), { children }));
+    const Component = asChild ? import_react_slot19.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname43.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
 TabsContents.displayName = "Tabs.Contents";
@@ -2544,7 +2558,7 @@ var TabsContent = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
     const context = useTabsContext();
-    const Component = asChild ? import_react_slot18.Slot : "div";
+    const Component = asChild ? import_react_slot19.Slot : "div";
     if (context.activeTabId === forTabId) {
       return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
@@ -2555,7 +2569,7 @@ TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
 var import_react49 = require("react");
-var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TabsList = (0, import_react49.forwardRef)(
   (_a, ref) => {
@@ -2595,7 +2609,7 @@ var TabsList = (0, import_react49.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname43.clsx)(
+        className: (0, import_typed_classname44.clsx)(
           "hds-tabs__list",
           direction === "horizontal" ? {
             "hds-tabs__list--horizontal": wideEnough,
@@ -2626,7 +2640,7 @@ var TabsTab = (0, import_react49.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "button",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname43.clsx)(
+        className: (0, import_typed_classname44.clsx)(
           "hds-tabs__tab",
           { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
@@ -2650,8 +2664,8 @@ var Tabs = (0, import_react50.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
     const [activeTabId, setActiveTabId] = (0, import_react50.useState)(defaultTab);
-    const Component = asChild ? import_react_slot19.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname44.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
+    const Component = asChild ? import_react_slot20.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname45.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -2662,8 +2676,8 @@ Tabs.Content = TabsContent;
 
 // src/text/text.tsx
 var import_react51 = require("react");
-var import_typed_classname45 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot20 = require("@radix-ui/react-slot");
+var import_typed_classname46 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot21 = require("@radix-ui/react-slot");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
@@ -2699,12 +2713,12 @@ var Text = (0, import_react51.forwardRef)(
       "children",
       "className"
     ]);
-    const Component = asChild ? import_react_slot20.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
+    const Component = asChild ? import_react_slot21.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname45.clsx)(
+        className: (0, import_typed_classname46.clsx)(
           `hds-text-${variant}`,
           sizeModifier && `hds-text--${sizeModifier}`,
           spacing && "hds-text--spacing",
@@ -2721,14 +2735,14 @@ Text.displayName = "Text";
 
 // src/warning-banner/warning-banner.tsx
 var import_react52 = require("react");
-var import_typed_classname46 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname47 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var WarningBanner = (0, import_react52.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const descriptionId = (0, import_react52.useId)();
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname46.clsx)("hds-warning-banner", className), ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname47.clsx)("hds-warning-banner", className), ref, children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         WarningBannerTitle,
         {
@@ -2752,7 +2766,7 @@ var WarningBannerTitle = (0, import_react52.forwardRef)((_a, ref) => {
         "aria-expanded": open,
         "aria-controls": descriptionId,
         "data-state": open ? "open" : "closed",
-        className: (0, import_typed_classname46.clsx)(
+        className: (0, import_typed_classname47.clsx)(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
           className
@@ -2769,7 +2783,7 @@ var WarningBannerTitle = (0, import_react52.forwardRef)((_a, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "p",
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname46.clsx)("hds-warning-banner__title", className),
+      className: (0, import_typed_classname47.clsx)("hds-warning-banner__title", className),
       ref,
       children
     })
@@ -2783,7 +2797,7 @@ var WarningBannerDescription = (0, import_react52.forwardRef)(
       "p",
       __spreadValues({
         id,
-        className: (0, import_typed_classname46.clsx)("hds-warning-banner__description", className),
+        className: (0, import_typed_classname47.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );
@@ -2877,6 +2891,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   VStack,
   WarningBanner,
   focusTrap,
+  inertPropValue,
   useFieldsetContext,
   useHydrated,
   useMergeRefs,