@postenbring/hedwig-react 1.2.1 → 1.3.0

package/dist/index.js

@@ -85,6 +85,7 @@ __export(src_exports, {
   DatePicker: () => DatePicker,
   DescriptionList: () => DescriptionList,
   ErrorMessage: () => ErrorMessage,
+  ErrorSummary: () => ErrorSummary,
   Fieldset: () => Fieldset,
   Figure: () => Figure,
   Footer: () => Footer,
@@ -235,7 +236,6 @@ var AccordionContent = (0, import_react4.forwardRef)(
       "div",
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         id: context.contentId,
-        "aria-hidden": !context.open,
         "data-state": context.open ? "open" : "closed"
       }, { inert: context.open ? void 0 : "true" }), {
         className: (0, import_typed_classname3.clsx)("hds-accordion-item-content", className),
@@ -652,7 +652,7 @@ var ErrorMessage = (0, import_react14.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       __spreadProps(__spreadValues({
-        "aria-live": "assertive",
+        "aria-live": "polite",
         className: (0, import_typed_classname13.clsx)("hds-error-message", className),
         id,
         ref
@@ -675,6 +675,7 @@ var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
     className,
     style,
     errorMessage,
+    errorMessageProps,
     legendProps: _c = {}
   } = _b, _d = _c, { size: legendSize = "default", className: legendClassName } = _d, legendProps = __objRest(_d, ["size", "className"]), _e = _b, {
     legend,
@@ -683,6 +684,7 @@ var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
     "className",
     "style",
     "errorMessage",
+    "errorMessageProps",
     "legendProps",
     "legend",
     "children"
@@ -711,7 +713,7 @@ var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
           })
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
@@ -725,6 +727,7 @@ var Checkbox = (0, import_react16.forwardRef)(
       variant = "plain",
       hasError: hasErrorProp,
       errorMessage,
+      errorMessageProps,
       title,
       children,
       className
@@ -732,6 +735,7 @@ var Checkbox = (0, import_react16.forwardRef)(
       "variant",
       "hasError",
       "errorMessage",
+      "errorMessageProps",
       "title",
       "children",
       "className"
@@ -769,7 +773,7 @@ var Checkbox = (0, import_react16.forwardRef)(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
     ] });
   }
 );
@@ -790,6 +794,7 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
     style,
     variant = "default",
     errorMessage,
+    errorMessageProps,
     labelProps: _c = {}
   } = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
     label,
@@ -802,6 +807,7 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
     "style",
     "variant",
     "errorMessage",
+    "errorMessageProps",
     "labelProps",
     "label",
     "disabled",
@@ -862,7 +868,7 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
             children: renderInput()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
@@ -1015,16 +1021,342 @@ var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
 });
 DatePicker.displayName = "DatePicker";
 
-// src/form/input/input.tsx
+// src/form/error-summary/error-summary.tsx
+var import_react25 = require("react");
+
+// src/message/message.tsx
 var import_react20 = require("react");
 var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot7 = require("@radix-ui/react-slot");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Input = (0, import_react20.forwardRef)(function Input2(_a, ref) {
+var MessageTitle = (0, import_react20.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot7.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname18.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "Message.Title";
+var MessageDescription = (0, import_react20.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot7.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname18.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "Message.Description";
+var Message = (0, import_react20.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_runtime18.jsxs)(
+      Box,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname18.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: (0, import_typed_classname18.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
+
+// src/list/list.tsx
+var import_react21 = require("react");
+var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var UnorderedList = (0, import_react21.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "ul",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname19.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+UnorderedList.displayName = "UnorderedList";
+var OrderedList = (0, import_react21.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "ol",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname19.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+OrderedList.displayName = "OrderedList";
+
+// src/list/link-list.tsx
+var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
+var import_react22 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var LinkList = (0, import_react22.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      UnorderedList,
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname20.clsx)("hds-list--link-list", className)
+      }, rest)
+    );
+  }
+);
+LinkList.displayName = "LinkList";
+
+// src/link/link.tsx
+var React2 = require("react");
+var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
+var import_react23 = require("react");
+var import_react_slot8 = require("@radix-ui/react-slot");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Link = (0, import_react23.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "className"]);
+    const Component = asChild ? import_react_slot8.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname21.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/utils/auto-animate-height.tsx
+var import_react24 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var AutoAnimateHeight = (0, import_react24.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_react24.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react24.useRef)(null);
+    const [height, setHeight] = (0, import_react24.useState)(
+      void 0
+    );
+    const [clonedChildren, setClonedChildren] = (0, import_react24.useState)(
+      () => (0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children }), {})
+    );
+    (0, import_react24.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_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.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_runtime22.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_runtime22.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;
+  const input = document.getElementById(id);
+  if (!input) {
+    return false;
+  }
+  const legendOrLabel = (_a = maybeLegendForInput(input)) != null ? _a : labelForInput(input);
+  if (!legendOrLabel) {
+    return false;
+  }
+  legendOrLabel.scrollIntoView();
+  input.focus({ preventScroll: true });
+  return true;
+}
+function maybeLegendForInput(input) {
+  const fieldset = input.closest("fieldset");
+  if (!fieldset) {
+    return null;
+  }
+  const legend = fieldset.querySelector("legend");
+  if (!legend) {
+    return null;
+  }
+  if (input instanceof HTMLInputElement && (input.type === "checkbox" || input.type === "radio")) {
+    return legend;
+  }
+  const legendTop = legend.getBoundingClientRect().top;
+  const inputRect = input.getBoundingClientRect();
+  if (inputRect.height && window.innerHeight) {
+    const inputBottom = inputRect.top + inputRect.height;
+    if (inputBottom - legendTop < window.innerHeight / 2) {
+      return legend;
+    }
+  }
+}
+function labelForInput(input) {
+  var _a;
+  return (_a = document.querySelector(`label[for='${input.getAttribute("id")}']`)) != null ? _a : input.closest("label");
+}
+
+// src/form/error-summary/error-summary.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ErrorSummaryHeading = (0, import_react25.forwardRef)((_a, ref) => {
+  var _b = _a, { children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["children", "as", "autoFocus"]);
+  const focusRef = (0, import_react25.useRef)(null);
+  const mergedRef = useMergeRefs([focusRef, ref]);
+  (0, import_react25.useEffect)(() => {
+    setTimeout(() => {
+      if (focusRef.current && autoFocus) {
+        focusRef.current.focus();
+      }
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message.Title, __spreadProps(__spreadValues({ ref: mergedRef, tabIndex: -1, asChild: true }, rest), { children: Tag ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tag, { children }) : children }));
+});
+ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
+var ErrorSummaryList = (0, import_react25.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_runtime23.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
+  }
+);
+ErrorSummaryList.displayName = "ErrorSummary.List";
+var ErrorSummaryItem = (0, import_react25.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, href, linkProps } = _b, rest = __objRest(_b, ["children", "href", "linkProps"]);
+    function onClick(e) {
+      var _a2;
+      (_a2 = linkProps == null ? void 0 : linkProps.onClick) == null ? void 0 : _a2.call(linkProps, e);
+      if (focusWithLegendOrLabelInViewport(href.replace("#", ""))) {
+        e.preventDefault();
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
+  }
+);
+ErrorSummaryItem.displayName = "ErrorSummary.Item";
+var ErrorSummary = (0, import_react25.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message, __spreadProps(__spreadValues({ variant: "warning", ref }, rest), { children }));
+  }
+);
+ErrorSummary.displayName = "ErrorSummary";
+ErrorSummary.Heading = ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Item = ErrorSummaryItem;
+
+// src/form/input/input.tsx
+var import_react26 = require("react");
+var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Input = (0, import_react26.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_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname18.clsx)("hds-input", className),
+      className: (0, import_typed_classname22.clsx)("hds-input", className),
       disabled,
       errorMessage,
       id,
@@ -1033,35 +1365,35 @@ var Input = (0, import_react20.forwardRef)(function Input2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Input.displayName = "Input";
 
 // src/form/radio-button/radio-button.tsx
-var import_react22 = require("react");
-var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
+var import_react28 = require("react");
+var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radio-button/radio-group.tsx
-var import_react21 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react21.createContext)({
+var import_react27 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react27.createContext)({
   name: void 0,
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react21.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react21.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react27.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react27.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_runtime19.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
 RadioGroup.displayName = "RadioGroup";
 
 // src/form/radio-button/radio-button.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var isChecked = ({
   checked,
   selectedValue,
@@ -1071,7 +1403,7 @@ var isChecked = ({
   if (typeof selectedValue !== "undefined") return value === selectedValue;
   return void 0;
 };
-var RadioButton = (0, import_react22.forwardRef)(
+var RadioButton = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -1099,10 +1431,10 @@ var RadioButton = (0, import_react22.forwardRef)(
     ]);
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
       {
-        className: (0, import_typed_classname19.clsx)(
+        className: (0, import_typed_classname23.clsx)(
           "hds-radio-button",
           {
             [`hds-radio-button--${variant}`]: variant === "bounding-box",
@@ -1111,8 +1443,8 @@ var RadioButton = (0, import_react22.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "input",
               __spreadProps(__spreadValues(__spreadValues({}, context), rest), {
                 checked: isChecked({ checked, selectedValue, value }),
@@ -1121,8 +1453,8 @@ var RadioButton = (0, import_react22.forwardRef)(
                 type: "radio"
               })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
-            title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
+            title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
           ] }),
           title ? children : null
         ]
@@ -1133,15 +1465,15 @@ var RadioButton = (0, import_react22.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // src/form/select/select.tsx
-var import_react23 = require("react");
-var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Select = (0, import_react23.forwardRef)(function Select2(_a, ref) {
+var import_react29 = require("react");
+var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Select = (0, import_react29.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_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname20.clsx)("hds-select", className),
+      className: (0, import_typed_classname24.clsx)("hds-select", className),
       disabled,
       errorMessage,
       id,
@@ -1149,22 +1481,22 @@ var Select = (0, import_react23.forwardRef)(function Select2(_a, ref) {
       labelProps,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
     }
   );
 });
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_react24 = require("react");
-var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Textarea = (0, import_react24.forwardRef)(function Textarea2(_a, ref) {
+var import_react30 = require("react");
+var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Textarea = (0, import_react30.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_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname21.clsx)("hds-textarea", className),
+      className: (0, import_typed_classname25.clsx)("hds-textarea", className),
       disabled,
       errorMessage,
       id,
@@ -1173,93 +1505,40 @@ var Textarea = (0, import_react24.forwardRef)(function Textarea2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Textarea.displayName = "Textarea";
 
 // src/footer/footer.tsx
-var import_react27 = require("react");
-var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot7 = require("@radix-ui/react-slot");
-
-// src/list/link-list.tsx
-var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
-var import_react26 = require("react");
-
-// src/list/list.tsx
-var import_react25 = require("react");
-var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var UnorderedList = (0, import_react25.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "ul",
-      __spreadValues({
-        ref,
-        className: (0, import_typed_classname22.clsx)("hds-list", `hds-list--${size}`, className)
-      }, rest)
-    );
-  }
-);
-UnorderedList.displayName = "UnorderedList";
-var OrderedList = (0, import_react25.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "ol",
-      __spreadValues({
-        ref,
-        className: (0, import_typed_classname22.clsx)("hds-list", `hds-list--${size}`, className)
-      }, rest)
-    );
-  }
-);
-OrderedList.displayName = "OrderedList";
-
-// src/list/link-list.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var LinkList = (0, import_react26.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      UnorderedList,
-      __spreadValues({
-        ref,
-        className: (0, import_typed_classname23.clsx)("hds-list--link-list", className)
-      }, rest)
-    );
-  }
-);
-LinkList.displayName = "LinkList";
-
-// src/footer/footer.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var FooterLogo = (0, import_react27.forwardRef)(
+var import_react31 = require("react");
+var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot9 = require("@radix-ui/react-slot");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var FooterLogo = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
-    const Component = asChild ? import_react_slot7.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname24.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
+    const Component = asChild ? import_react_slot9.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname26.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
   }
 );
 FooterLogo.displayName = "Footer.Logo";
-var FooterButtonLink = (0, import_react27.forwardRef)(
+var FooterButtonLink = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
-    const Component = asChild ? import_react_slot7.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { asChild: true, variant: "primary-outline", className: (0, import_typed_classname24.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    const Component = asChild ? import_react_slot9.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { asChild: true, variant: "primary-outline", className: (0, import_typed_classname26.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
-var FooterLinkSections = (0, import_react27.forwardRef)(
+var FooterLinkSections = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Accordion,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname24.clsx)("hds-footer__link-sections", className),
+        className: (0, import_typed_classname26.clsx)("hds-footer__link-sections", className),
         ref
       }, rest), {
         children
@@ -1268,39 +1547,39 @@ var FooterLinkSections = (0, import_react27.forwardRef)(
   }
 );
 FooterLinkSections.displayName = "Footer.LinkSections";
-var FooterLinkSection = (0, import_react27.forwardRef)(
+var FooterLinkSection = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
-    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LinkList, { children });
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkList, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         Accordion.Item,
         __spreadProps(__spreadValues({
-          className: (0, import_typed_classname24.clsx)(`hds-footer__link-section`, className),
+          className: (0, import_typed_classname26.clsx)(`hds-footer__link-section`, className),
           ref
         }, rest), {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Accordion.Header, { children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Accordion.Content, { children: linkListChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Accordion.Header, { children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Accordion.Content, { children: linkListChildren })
           ]
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: (0, import_typed_classname24.clsx)(`hds-footer__link-section`, className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_typed_classname26.clsx)(`hds-footer__link-section`, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { children: heading }),
         linkListChildren
       ] })
     ] });
   }
 );
 FooterLinkSection.displayName = "Footer.LinkSection";
-var Footer = (0, import_react27.forwardRef)(
+var Footer = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
-    const Component = asChild ? import_react_slot7.Slot : "footer";
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    const Component = asChild ? import_react_slot9.Slot : "footer";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname24.clsx)(
+        className: (0, import_typed_classname26.clsx)(
           `hds-footer`,
           variant === "slim" && "hds-footer--slim",
           className
@@ -1320,10 +1599,10 @@ Footer.LinkSection = FooterLinkSection;
 
 // src/help-text/help-text.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
-var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
-var import_react28 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var HelpText = (0, import_react28.forwardRef)(
+var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
+var import_react32 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var HelpText = (0, import_react32.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 (
@@ -1331,24 +1610,24 @@ var HelpText = (0, import_react28.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_runtime26.jsxs)(Popover.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Popover.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "button",
           __spreadProps(__spreadValues({
             ref,
-            className: (0, import_typed_classname25.clsx)("hds-help-text-button", className),
+            className: (0, import_typed_classname27.clsx)("hds-help-text-button", className),
             title,
             type: "button"
           }, rest), {
             children
           })
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           Box,
           __spreadProps(__spreadValues({}, boxProps), {
-            className: (0, import_typed_classname25.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
+            className: (0, import_typed_classname27.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box.CloseButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box.CloseButton, {}) }),
               helpText
             ]
           })
@@ -1360,18 +1639,18 @@ var HelpText = (0, import_react28.forwardRef)(
 HelpText.displayName = "HelpText";
 
 // src/layout/container/container.tsx
-var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot8 = require("@radix-ui/react-slot");
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Container = (0, import_react29.forwardRef)(
+var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot10 = require("@radix-ui/react-slot");
+var import_react33 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Container = (0, import_react33.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_slot8.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    const Component = asChild ? import_react_slot10.Slot : Tag;
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname26.clsx)(
+        className: (0, import_typed_classname28.clsx)(
           "hds-container",
           { "hds-container--slim": variant === "slim" },
           className
@@ -1385,9 +1664,9 @@ var Container = (0, import_react29.forwardRef)(
 Container.displayName = "Container";
 
 // src/layout/grid/grid.tsx
-var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot9 = require("@radix-ui/react-slot");
-var import_react30 = require("react");
+var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot11 = require("@radix-ui/react-slot");
+var import_react34 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -1408,17 +1687,17 @@ function getSpacingVariable(size) {
 }
 
 // src/layout/grid/grid.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var GridItem = (0, import_react30.forwardRef)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var GridItem = (0, import_react34.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_slot9.Slot : "div";
+    const Component = asChild ? import_react_slot11.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_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname27.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname29.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -1427,16 +1706,16 @@ var GridItem = (0, import_react30.forwardRef)(
   }
 );
 GridItem.displayName = "Grid.Item";
-var Grid = (0, import_react30.forwardRef)(
+var Grid = (0, import_react34.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_slot9.Slot : "div";
+    const Component = asChild ? import_react_slot11.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_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname27.clsx)("hds-grid", className),
+        className: (0, import_typed_classname29.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -1448,12 +1727,12 @@ Grid.displayName = "Grid";
 Grid.Item = GridItem;
 
 // src/layout/stack/stack.tsx
-var React2 = require("react");
-var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
-var import_react31 = require("react");
-var import_react_slot10 = require("@radix-ui/react-slot");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Stack = (0, import_react31.forwardRef)(
+var React3 = require("react");
+var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
+var import_react35 = require("react");
+var import_react_slot12 = require("@radix-ui/react-slot");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Stack = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1480,13 +1759,13 @@ var Stack = (0, import_react31.forwardRef)(
       "align",
       "justify"
     ]);
-    const Component = asChild ? import_react_slot10.Slot : "div";
+    const Component = asChild ? import_react_slot12.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_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname28.clsx)("hds-stack", className),
+        className: (0, import_typed_classname30.clsx)("hds-stack", className),
         ref
       }, rest), {
         children
@@ -1495,107 +1774,25 @@ var Stack = (0, import_react31.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react31.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react35.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react31.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react35.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 
-// src/link/link.tsx
-var React3 = require("react");
-var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
-var import_react32 = require("react");
-var import_react_slot11 = require("@radix-ui/react-slot");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Link = (0, import_react32.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "className"]);
-    const Component = asChild ? import_react_slot11.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Component,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname29.clsx)(
-          "hds-link",
-          variant !== "underline" && `hds-link--${variant}`,
-          size !== "medium" && `hds-link--${size}`,
-          className
-        ),
-        ref
-      }, rest), {
-        children
-      })
-    );
-  }
-);
-Link.displayName = "Link";
-
-// src/message/message.tsx
-var import_react33 = require("react");
-var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot12 = require("@radix-ui/react-slot");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var MessageTitle = (0, import_react33.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot12.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      Component,
-      __spreadValues({
-        className: (0, import_typed_classname30.clsx)("hds-message__title", className),
-        ref
-      }, rest)
-    );
-  }
-);
-MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react33.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
-    const Component = asChild ? import_react_slot12.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      Component,
-      __spreadValues({
-        className: (0, import_typed_classname30.clsx)("hds-message__description", className),
-        ref
-      }, rest)
-    );
-  }
-);
-MessageDescription.displayName = "Message.Description";
-var Message = (0, import_react33.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_runtime31.jsxs)(
-      Box,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname30.clsx)(`hds-message`, `hds-message--${variant}`, className),
-        ref
-      }, rest), {
-        children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: (0, import_typed_classname30.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
-          children
-        ]
-      })
-    );
-  }
-);
-Message.displayName = "Message";
-Message.Title = MessageTitle;
-Message.Description = MessageDescription;
-
 // src/modal/modal.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot13 = require("@radix-ui/react-slot");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ModalHeader = (0, import_react34.forwardRef)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ModalHeader = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
     const Component = asChild ? import_react_slot13.Slot : "h1";
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Component,
       __spreadValues({
         className: (0, import_typed_classname31.clsx)("hds-modal__header", className),
@@ -1605,11 +1802,11 @@ var ModalHeader = (0, import_react34.forwardRef)(
   }
 );
 ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react34.forwardRef)(
+var ModalContent = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
     const Component = asChild ? import_react_slot13.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Component,
       __spreadValues({
         className: (0, import_typed_classname31.clsx)("hds-modal__content", className),
@@ -1619,11 +1816,11 @@ var ModalContent = (0, import_react34.forwardRef)(
   }
 );
 ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react34.forwardRef)(
+var ModalFooter = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
     const Component = asChild ? import_react_slot13.Slot : "footer";
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Component,
       __spreadValues({
         className: (0, import_typed_classname31.clsx)("hds-modal__footer", className),
@@ -1633,10 +1830,10 @@ var ModalFooter = (0, import_react34.forwardRef)(
   }
 );
 ModalFooter.displayName = "Modal.Footer";
-var Modal = (0, import_react34.forwardRef)(
+var Modal = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = (0, import_react34.useRef)(null);
+    const modalRef = (0, import_react36.useRef)(null);
     const mergedRef = useMergeRefs([modalRef, ref]);
     function onCloseButtonClick() {
       var _a2;
@@ -1644,7 +1841,7 @@ var Modal = (0, import_react34.forwardRef)(
       return false;
     }
     useScrollLock(modalRef, "hds-modal-scroll-lock");
-    (0, import_react34.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       if (modalRef.current && open !== void 0) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
@@ -1659,7 +1856,7 @@ var Modal = (0, import_react34.forwardRef)(
       }
       onClick == null ? void 0 : onClick(e);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Box,
       {
         asChild: true,
@@ -1668,7 +1865,7 @@ var Modal = (0, import_react34.forwardRef)(
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
         variant: "white",
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
       }
     );
   }
@@ -1678,7 +1875,7 @@ Modal.Header = ModalHeader;
 Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!modalRef.current) return;
     if (modalRef.current.open) document.body.classList.add(bodyClass);
     const observer = new MutationObserver(() => {
@@ -1698,18 +1895,18 @@ function useScrollLock(modalRef, bodyClass) {
 }
 
 // src/navbar/navbar.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot14 = require("@radix-ui/react-slot");
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/navbar/icons.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "path",
     {
       d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
@@ -1718,7 +1915,7 @@ function CloseIcon() {
   ) });
 }
 function MenuIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -1728,19 +1925,19 @@ function MenuIcon() {
 }
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ExpandableMenuContext = (0, import_react35.createContext)(null);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ExpandableMenuContext = (0, import_react37.createContext)(null);
 var useNavbarExpendableMenuContext = () => {
-  const value = (0, import_react35.useContext)(ExpandableMenuContext);
+  const value = (0, import_react37.useContext)(ExpandableMenuContext);
   if (value === null) {
     throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
   }
   return value;
 };
 function NavbarExpandableMenu({ children }) {
-  const contentId = (0, import_react35.useId)();
-  const [open, setOpen] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const contentId = (0, import_react37.useId)();
+  const [open, setOpen] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
       document.body.classList.add((0, import_typed_classname32.clsx)("hds-navbar-scroll-lock"));
@@ -1753,10 +1950,10 @@ function NavbarExpandableMenu({ children }) {
       };
     }
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
+var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -1774,9 +1971,9 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
       "className"
     ]);
     const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
-    const [textWidth, setTextWidth] = (0, import_react35.useState)(void 0);
-    const measurementId = (0, import_react35.useId)();
-    (0, import_react35.useEffect)(() => {
+    const [textWidth, setTextWidth] = (0, import_react37.useState)(void 0);
+    const measurementId = (0, import_react37.useId)();
+    (0, import_react37.useEffect)(() => {
       var _a2, _b2, _c, _d;
       const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
       const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
@@ -1784,11 +1981,11 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
     }, [measurementId]);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
-    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MenuIcon, {});
+    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenuIcon, {});
     function toggleOpen() {
       setOpen(!open);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         "aria-expanded": open,
@@ -1801,7 +1998,7 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
         style: __spreadValues({ position: "relative" }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "span",
             {
               id: `${measurementId}-when-closed`,
@@ -1815,7 +2012,7 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
               children: whenOpenText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "span",
             {
               id: `${measurementId}-when-open`,
@@ -1829,7 +2026,7 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
               children: whenClosedText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "span",
             {
               style: { width: textWidth, whiteSpace: "nowrap" },
@@ -1837,17 +2034,17 @@ var NavbarExpandableMenuTrigger = (0, import_react35.forwardRef)(
               children: text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
         ]
       })
     );
   }
 );
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
-var NavbarExpandableMenuContent = (0, import_react35.forwardRef)((_a, ref) => {
+var NavbarExpandableMenuContent = (0, import_react37.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const { contentId, open } = useNavbarExpendableMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       id: contentId,
@@ -1855,27 +2052,27 @@ var NavbarExpandableMenuContent = (0, import_react35.forwardRef)((_a, ref) => {
       "data-state": open ? "open" : "closed"
     }), { inert: open ? void 0 : "true" }), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_typed_classname32.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: (0, import_typed_classname32.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
 NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 
 // src/navbar/navbar.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var NavbarLogo = (0, import_react36.forwardRef)(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var NavbarLogo = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot14.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
-var NavbarLogoAndServiceText = (0, import_react36.forwardRef)(
+var NavbarLogoAndServiceText = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
     const Component = asChild ? import_react_slot14.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -1891,26 +2088,26 @@ var NavbarLogoAndServiceText = (0, import_react36.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarItemIcon = (0, import_react36.forwardRef)(
+var NavbarItemIcon = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_slot14.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_slot14.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
   }
 );
 NavbarItemIcon.displayName = "Navbar.ItemIcon";
-var NavbarItem = (0, import_react36.forwardRef)(
+var NavbarItem = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
     const Component = asChild ? import_react_slot14.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarItem.displayName = "Navbar.Item";
-var NavbarButtonItem = (0, import_react36.forwardRef)(
+var NavbarButtonItem = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
     const Component = asChild ? import_react_slot14.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname33.clsx)("hds-navbar__item", className),
@@ -1923,19 +2120,19 @@ var NavbarButtonItem = (0, import_react36.forwardRef)(
   }
 );
 NavbarButtonItem.displayName = "Navbar.ButtonItem";
-var NavbarLinkItem = (0, import_react36.forwardRef)(
+var NavbarLinkItem = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
     const Component = asChild ? import_react_slot14.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarLinkItem.displayName = "Navbar.LinkItem";
-var NavbarNavigation = (0, import_react36.forwardRef)(
+var NavbarNavigation = (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";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadValues({
         className: (0, import_typed_classname33.clsx)("hds-navbar__navigation", className),
@@ -1945,11 +2142,11 @@ var NavbarNavigation = (0, import_react36.forwardRef)(
   }
 );
 NavbarNavigation.displayName = "Navbar.Navigation";
-var Navbar = (0, import_react36.forwardRef)(
+var Navbar = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
     const Component = asChild ? import_react_slot14.Slot : "header";
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname33.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
@@ -1974,12 +2171,12 @@ Navbar.Navigation = NavbarNavigation;
 
 // src/show-more/show-more.tsx
 var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_react37 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react37.forwardRef)(
+var import_react39 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var ShowMoreButton = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
@@ -1993,7 +2190,7 @@ var ShowMoreButton = (0, import_react37.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: (0, import_typed_classname34.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: (0, import_typed_classname34.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -2004,9 +2201,9 @@ ShowMoreButton.displayName = "ShowMoreButton";
 // src/skeleton/skeleton.tsx
 var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot15 = require("@radix-ui/react-slot");
-var import_react38 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Skeleton = (0, import_react38.forwardRef)(
+var import_react40 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Skeleton = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag = "div",
@@ -2030,7 +2227,7 @@ var Skeleton = (0, import_react38.forwardRef)(
       "style"
     ]);
     const Component = asChild ? import_react_slot15.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         className: (0, import_typed_classname35.clsx)(
@@ -2052,14 +2249,14 @@ var Skeleton = (0, import_react38.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/spinner/spinner.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Spinner = (0, import_react39.forwardRef)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Spinner = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size = "medium", title = "", delay = false, className, style: _style } = _b, rest = __objRest(_b, ["size", "title", "delay", "className", "style"]);
     const style = __spreadValues(__spreadValues({}, _style), typeof delay === "string" && { "--hds-spinner-delay": delay });
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       __spreadValues({
         title,
@@ -2079,9 +2276,9 @@ Spinner.displayName = "Spinner";
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
-var import_react40 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react40.forwardRef)(
+var import_react42 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2100,7 +2297,7 @@ var StepIndicator = (0, import_react40.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -2108,11 +2305,11 @@ var StepIndicator = (0, import_react40.forwardRef)(
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__left-label"), children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: (0, import_typed_classname37.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "div",
             {
               className: (0, import_typed_classname37.clsx)("hds-step-indicator__step"),
@@ -2120,7 +2317,7 @@ var StepIndicator = (0, import_react40.forwardRef)(
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TitleComponent, { className: (0, import_typed_classname37.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TitleComponent, { className: (0, import_typed_classname37.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2144,15 +2341,15 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot16 = require("@radix-ui/react-slot");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react41.forwardRef)(
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react43.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_slot16.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname38.clsx)(
@@ -2172,14 +2369,14 @@ StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
 var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
-var import_react42 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Table = (0, import_react42.forwardRef)(
+var import_react44 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Table = (0, import_react44.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
-    const descriptionId = (0, import_react42.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    const descriptionId = (0, import_react44.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "table",
         __spreadProps(__spreadValues({
           "aria-describedby": description ? descriptionId : void 0,
@@ -2194,27 +2391,27 @@ var Table = (0, import_react42.forwardRef)(
           )
         }, rest), {
           children: [
-            caption ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { children: caption }) : null,
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { children: caption }) : null,
             children
           ]
         })
       ),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: (0, import_typed_classname39.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: (0, import_typed_classname39.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
     ] });
   }
 );
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot18 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
-var import_react43 = require("react");
-var TabsContext = (0, import_react43.createContext)(null);
+var import_react45 = require("react");
+var TabsContext = (0, import_react45.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react43.useContext)(TabsContext);
+  const context = (0, import_react45.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2224,25 +2421,25 @@ function useTabsContext() {
 }
 
 // src/tabs/tabs-content.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot17 = require("@radix-ui/react-slot");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var TabsContents = (0, import_react44.forwardRef)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TabsContents = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
     const Component = asChild ? import_react_slot17.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname40.clsx)("hds-tabs__contents") }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname40.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react44.forwardRef)(
+var TabsContent = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
     const context = useTabsContext();
     const Component = asChild ? import_react_slot17.Slot : "div";
     if (context.activeTabId === forTabId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -2250,21 +2447,21 @@ var TabsContent = (0, import_react44.forwardRef)(
 TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var TabsList = (0, import_react45.forwardRef)(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var TabsList = (0, import_react47.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
     const { activeTabId } = useTabsContext();
-    const tabsListRef = (0, import_react45.useRef)(null);
+    const tabsListRef = (0, import_react47.useRef)(null);
     const mergedRef = useMergeRefs([tabsListRef, ref]);
     const { width: tabsWidth } = useResize(tabsListRef);
     const isClientSide = useHydrated();
     const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
     const wideEnough = innerWidth >= tabsWidth;
-    const previousTabId = (0, import_react45.useRef)(activeTabId);
-    (0, import_react45.useEffect)(() => {
+    const previousTabId = (0, import_react47.useRef)(activeTabId);
+    (0, import_react47.useEffect)(() => {
       const tabList = tabsListRef.current;
       const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
       if (!activeTab || !tabList) return;
@@ -2288,7 +2485,7 @@ var TabsList = (0, import_react45.forwardRef)(
       }
       previousTabId.current = activeTabId;
     }, [activeTabId, innerWidth]);
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname41.clsx)(
@@ -2310,7 +2507,7 @@ var TabsList = (0, import_react45.forwardRef)(
   }
 );
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react45.forwardRef)(
+var TabsTab = (0, import_react47.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
@@ -2319,7 +2516,7 @@ var TabsTab = (0, import_react45.forwardRef)(
       context.toggleActiveTabId(tabId);
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "button",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname41.clsx)(
@@ -2341,13 +2538,13 @@ var TabsTab = (0, import_react45.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var Tabs = (0, import_react46.forwardRef)(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Tabs = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react46.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react48.useState)(defaultTab);
     const Component = asChild ? import_react_slot18.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname42.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname42.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -2357,10 +2554,10 @@ Tabs.Contents = TabsContents;
 Tabs.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot19 = require("@radix-ui/react-slot");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -2376,7 +2573,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react47.forwardRef)(
+var Text = (0, import_react49.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag,
@@ -2397,7 +2594,7 @@ var Text = (0, import_react47.forwardRef)(
     ]);
     const Component = asChild ? import_react_slot19.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname43.clsx)(
@@ -2415,116 +2612,17 @@ var Text = (0, import_react47.forwardRef)(
 );
 Text.displayName = "Text";
 
-// src/utils/auto-animate-height.tsx
-var import_react48 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var AutoAnimateHeight = (0, import_react48.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_react48.useRef)(null);
-    const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react48.useRef)(null);
-    const [height, setHeight] = (0, import_react48.useState)(
-      void 0
-    );
-    const [clonedChildren, setClonedChildren] = (0, import_react48.useState)(
-      () => (0, import_react48.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children }), {})
-    );
-    (0, import_react48.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_react48.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.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_runtime46.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_runtime46.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              ref: measurementRef,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none"
-              },
-              children
-            }
-          ),
-          clonedChildren
-        ]
-      })
-    );
-  }
-);
-AutoAnimateHeight.displayName = "AutoAnimateHeight";
-
 // src/warning-banner/warning-banner.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react49.forwardRef)(
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react50.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
-    const descriptionId = (0, import_react49.useId)();
+    const descriptionId = (0, import_react50.useId)();
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname44.clsx)("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname44.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         WarningBannerTitle,
         {
           variant: expandable ? "expandable" : "default",
@@ -2532,16 +2630,16 @@ var WarningBanner = (0, import_react49.forwardRef)(
           children: title
         }
       ),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react49.forwardRef)((_a, ref) => {
+var WarningBannerTitle = (0, import_react50.forwardRef)((_a, ref) => {
   var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
-  const [open, setOpen] = (0, import_react49.useState)(false);
+  const [open, setOpen] = (0, import_react50.useState)(false);
   if (variant === "expandable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": open,
@@ -2557,11 +2655,11 @@ var WarningBannerTitle = (0, import_react49.forwardRef)((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children })
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "p",
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname44.clsx)("hds-warning-banner__title", className),
@@ -2571,10 +2669,10 @@ var WarningBannerTitle = (0, import_react49.forwardRef)((_a, ref) => {
   );
 });
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react49.forwardRef)(
+var WarningBannerDescription = (0, import_react50.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "p",
       __spreadValues({
         id,
@@ -2613,6 +2711,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   DatePicker,
   DescriptionList,
   ErrorMessage,
+  ErrorSummary,
   Fieldset,
   Figure,
   Footer,