@postenbring/hedwig-react 2.0.0 → 2.1.0

package/dist/index.js

@@ -70,6 +70,7 @@ __export(index_exports, {
   BoxCloseButton: () => BoxCloseButton,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  ButtonList: () => ButtonList,
   Card: () => Card,
   CardBody: () => CardBody,
   CardBodyAction: () => CardBodyAction,
@@ -462,27 +463,48 @@ var Button = (0, import_react10.forwardRef)(
 );
 Button.displayName = "Button";
 
-// src/card/card.tsx
+// src/button-list/button-list.tsx
 var import_react11 = require("react");
 var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot5 = require("@radix-ui/react-slot");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var CardMedia = (0, import_react11.forwardRef)(
+var ButtonList = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { variant = "default", className, children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
+    const Component = "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname10.clsx)("hds-button-list", `hds-button-list--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+ButtonList.displayName = "ButtonList";
+
+// src/card/card.tsx
+var import_react12 = require("react");
+var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot5 = require("@radix-ui/react-slot");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CardMedia = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname10.clsx)("hds-card__media", className), ref, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname11.clsx)("hds-card__media", className), ref, children }));
   }
 );
 CardMedia.displayName = "Card.Media";
-var CardMediaImg = (0, import_react11.forwardRef)(
+var CardMediaImg = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, variant, className } = _b, rest = __objRest(_b, ["asChild", "variant", "className"]);
     const Component = asChild ? import_react_slot5.Slot : "img";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)(
+        className: (0, import_typed_classname11.clsx)(
           "hds-card__media__img",
           { "hds-card__img__scale": variant === "scale" },
           className
@@ -493,35 +515,35 @@ var CardMediaImg = (0, import_react11.forwardRef)(
   }
 );
 CardMediaImg.displayName = "Card.MediaImg";
-var CardBody = (0, import_react11.forwardRef)(
+var CardBody = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname10.clsx)("hds-card__body", className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_typed_classname10.clsx)("hds-card__centerbody", className), children }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname11.clsx)("hds-card__body", className), ref, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_typed_classname11.clsx)("hds-card__centerbody", className), children }) }));
   }
 );
 CardBody.displayName = "Card.Body";
-var CardBodyHeader = (0, import_react11.forwardRef)((_a, ref) => {
+var CardBodyHeader = (0, import_react12.forwardRef)((_a, ref) => {
   var _b = _a, { as: Tag, asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
   const Component = asChild ? import_react_slot5.Slot : Tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname10.clsx)("hds-card__body-header", className),
+      className: (0, import_typed_classname11.clsx)("hds-card__body-header", className),
       ref,
       children
     })
   );
 });
 CardBodyHeader.displayName = "Card.BodyHeader";
-var CardBodyHeaderOverline = (0, import_react11.forwardRef)(
+var CardBodyHeaderOverline = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)("hds-card__body-header-overline", className),
+        className: (0, import_typed_classname11.clsx)("hds-card__body-header-overline", className),
         ref,
         children
       })
@@ -529,14 +551,14 @@ var CardBodyHeaderOverline = (0, import_react11.forwardRef)(
   }
 );
 CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
-var CardBodyHeaderTitle = (0, import_react11.forwardRef)(
+var CardBodyHeaderTitle = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)("hds-card__body-header-title", className),
+        className: (0, import_typed_classname11.clsx)("hds-card__body-header-title", className),
         ref,
         children
       })
@@ -544,14 +566,14 @@ var CardBodyHeaderTitle = (0, import_react11.forwardRef)(
   }
 );
 CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
-var CardBodyDescription = (0, import_react11.forwardRef)(
+var CardBodyDescription = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "p";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)("hds-card__body-description", className),
+        className: (0, import_typed_classname11.clsx)("hds-card__body-description", className),
         ref,
         children
       })
@@ -559,14 +581,14 @@ var CardBodyDescription = (0, import_react11.forwardRef)(
   }
 );
 CardBodyDescription.displayName = "Card.BodyDescription";
-var CardBodyAction = (0, import_react11.forwardRef)(
+var CardBodyAction = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)("hds-card__body-action", className),
+        className: (0, import_typed_classname11.clsx)("hds-card__body-action", className),
         ref,
         children
       })
@@ -574,14 +596,14 @@ var CardBodyAction = (0, import_react11.forwardRef)(
   }
 );
 CardBodyAction.displayName = "Card.BodyAction";
-var CardBodyActionRow = (0, import_react11.forwardRef)(
+var CardBodyActionRow = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
     const Component = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)("hds-card__body-action-row", className),
+        className: (0, import_typed_classname11.clsx)("hds-card__body-action-row", className),
         ref,
         children
       })
@@ -589,14 +611,14 @@ var CardBodyActionRow = (0, import_react11.forwardRef)(
   }
 );
 CardBodyActionRow.displayName = "Card.BodyActionRow";
-var CardBodyActionArrow = (0, import_react11.forwardRef)(
+var CardBodyActionArrow = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, direction } = _b, rest = __objRest(_b, ["asChild", "className", "direction"]);
     const Component = asChild ? import_react_slot5.Slot : "span";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)(
+        className: (0, import_typed_classname11.clsx)(
           "hds-card__body-action-arrow",
           { "hds-card__body-action-arrow-up-right": direction === "up-right" },
           className
@@ -607,15 +629,15 @@ var CardBodyActionArrow = (0, import_react11.forwardRef)(
   }
 );
 CardBodyActionArrow.displayName = "Card.BodyActionArrow";
-var Card = (0, import_react11.forwardRef)(
+var Card = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Tag = "section", asChild, className, children, variant, color, imagePosition } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant", "color", "imagePosition"]);
     const Component = asChild ? import_react_slot5.Slot : Tag;
     const effectiveColor = variant === "focus" && !color ? "darker" : color;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname10.clsx)(
+        className: (0, import_typed_classname11.clsx)(
           "hds-card",
           { "hds-card--full-width": variant === "full-width" },
           { "hds-card--miniature": variant === "miniature" },
@@ -627,7 +649,7 @@ var Card = (0, import_react11.forwardRef)(
           className
         ),
         ref,
-        children: variant === "full-width" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_typed_classname10.clsx)("hds-card__layoutwrapper", className), children }) : children
+        children: variant === "full-width" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_typed_classname11.clsx)("hds-card__layoutwrapper", className), children }) : children
       })
     );
   }
@@ -645,17 +667,17 @@ Card.BodyActionRow = CardBodyActionRow;
 Card.BodyActionArrow = CardBodyActionArrow;
 
 // src/description-list/description-list.tsx
-var import_react12 = require("react");
-var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var DescriptionList = (0, import_react12.forwardRef)(
+var import_react13 = require("react");
+var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DescriptionList = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant = "vertical", className } = _b, rest = __objRest(_b, ["variant", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "dl",
       __spreadValues({
         ref,
-        className: (0, import_typed_classname11.clsx)(
+        className: (0, import_typed_classname12.clsx)(
           "hds-description-list",
           {
             "hds-description-list--horizontal": variant === "horizontal"
@@ -669,35 +691,35 @@ var DescriptionList = (0, import_react12.forwardRef)(
 DescriptionList.displayName = "DescriptionList";
 
 // src/figure/figure.tsx
-var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot6 = require("@radix-ui/react-slot");
-var import_react13 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Figure = (0, import_react13.forwardRef)(
+var import_react14 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Figure = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className } = _b, rest = __objRest(_b, ["children", "asChild", "className"]);
     const Component = asChild ? import_react_slot6.Slot : "figure";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname12.clsx)("hds-figure", className) }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname13.clsx)("hds-figure", className) }, rest), { children }));
   }
 );
 Figure.displayName = "Figure";
 
 // src/form/checkbox/checkbox.tsx
-var import_react16 = require("react");
-var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
+var import_react17 = require("react");
+var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/error-message/error-message.tsx
-var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
-var import_react14 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ErrorMessage = (0, import_react14.forwardRef)(
+var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ErrorMessage = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "polite",
-        className: (0, import_typed_classname13.clsx)("hds-error-message", className),
+        className: (0, import_typed_classname14.clsx)("hds-error-message", className),
         id,
         ref
       }, rest), {
@@ -709,12 +731,12 @@ var ErrorMessage = (0, import_react14.forwardRef)(
 ErrorMessage.displayName = "ErrorMessage";
 
 // src/form/fieldset/fieldset.tsx
-var import_react15 = require("react");
-var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var FieldsetContext = (0, import_react15.createContext)({ hasError: false });
-var useFieldsetContext = () => (0, import_react15.useContext)(FieldsetContext);
-var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
+var import_react16 = require("react");
+var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FieldsetContext = (0, import_react16.createContext)({ hasError: false });
+var useFieldsetContext = () => (0, import_react16.useContext)(FieldsetContext);
+var Fieldset = (0, import_react16.forwardRef)(function Fieldset2(_a, ref) {
   var _b = _a, {
     className,
     style,
@@ -733,21 +755,21 @@ var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
     "legend",
     "children"
   ]);
-  const errorMessageId = (0, import_react15.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const errorMessageId = (0, import_react16.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "fieldset",
     __spreadProps(__spreadValues({
       "aria-describedby": errorMessage ? errorMessageId : void 0,
       "aria-invalid": errorMessage ? true : void 0,
-      className: (0, import_typed_classname14.clsx)("hds-fieldset", className),
+      className: (0, import_typed_classname15.clsx)("hds-fieldset", className),
       ref,
       style
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "legend",
           __spreadProps(__spreadValues({
-            className: (0, import_typed_classname14.clsx)(
+            className: (0, import_typed_classname15.clsx)(
               "hds-fieldset__legend",
               { [`hds-fieldset__legend--${legendSize}`]: legendSize },
               legendClassName
@@ -756,16 +778,16 @@ var Fieldset = (0, import_react15.forwardRef)(function Fieldset2(_a, ref) {
             children: legend
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
 });
 
 // src/form/checkbox/checkbox.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Checkbox = (0, import_react16.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Checkbox = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "plain",
@@ -784,14 +806,14 @@ var Checkbox = (0, import_react16.forwardRef)(
       "children",
       "className"
     ]);
-    const errorMessageId = (0, import_react16.useId)();
+    const errorMessageId = (0, import_react17.useId)();
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: (0, import_typed_classname15.clsx)("hds-checkbox-wrapper"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: (0, import_typed_classname16.clsx)("hds-checkbox-wrapper"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "div",
         {
-          className: (0, import_typed_classname15.clsx)(
+          className: (0, import_typed_classname16.clsx)(
             "hds-checkbox",
             {
               [`hds-checkbox--${variant}`]: variant === "bounding-box",
@@ -800,8 +822,8 @@ var Checkbox = (0, import_react16.forwardRef)(
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "input",
                 __spreadProps(__spreadValues({}, rest), {
                   "aria-invalid": hasError ? true : void 0,
@@ -810,28 +832,28 @@ var Checkbox = (0, import_react16.forwardRef)(
                   type: "checkbox"
                 })
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
-              title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
+              title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
             ] }),
             title ? children : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/form/date-picker/date-picker.tsx
-var import_react19 = require("react");
-var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
+var import_react20 = require("react");
+var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/input-group/input-group.tsx
-var import_react17 = require("react");
-var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
+var import_react18 = require("react");
+var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var InputGroup = (0, import_react18.forwardRef)(function InputGroup2(_a, ref) {
   var _b = _a, {
     id,
     className,
@@ -858,31 +880,31 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
     "readOnly",
     "children"
   ]);
-  const errorMessageId = (0, import_react17.useId)();
-  const inputId = (0, import_react17.useId)();
+  const errorMessageId = (0, import_react18.useId)();
+  const inputId = (0, import_react18.useId)();
   const renderInput = () => {
     var _a2;
     const inputProps = {
       "aria-describedby": errorMessage ? errorMessageId : void 0,
       "aria-invalid": errorMessage ? true : void 0,
       id: id != null ? id : inputId,
-      className: (0, import_typed_classname16.clsx)("hds-input-group__input")
+      className: (0, import_typed_classname17.clsx)("hds-input-group__input")
     };
     if (typeof children === "function") {
       return children(inputProps);
     }
-    const input = import_react17.Children.toArray(children)[0];
-    if (!(0, import_react17.isValidElement)(input)) {
+    const input = import_react18.Children.toArray(children)[0];
+    if (!(0, import_react18.isValidElement)(input)) {
       return;
     }
-    return (0, import_react17.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
+    return (0, import_react18.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
       className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
     }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname16.clsx)(
+      className: (0, import_typed_classname17.clsx)(
         "hds-input-group",
         {
           [`hds-input-group--${variant}`]: variant,
@@ -894,25 +916,25 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
       style
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "label",
           __spreadProps(__spreadValues({
-            className: (0, import_typed_classname16.clsx)("hds-input-group__label", labelClassName)
+            className: (0, import_typed_classname17.clsx)("hds-input-group__label", labelClassName)
           }, labelProps), {
             htmlFor: id != null ? id : inputId,
             children: label
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
-            className: (0, import_typed_classname16.clsx)("hds-input-group__input-wrapper"),
+            className: (0, import_typed_classname17.clsx)("hds-input-group__input-wrapper"),
             "data-disabled": disabled,
             "data-readonly": readOnly,
             children: renderInput()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
@@ -920,7 +942,7 @@ var InputGroup = (0, import_react17.forwardRef)(function InputGroup2(_a, ref) {
 
 // src/utils/utils.ts
 var React = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useMergeRefs(refs) {
   return React.useMemo(() => {
     if (refs.every((ref) => ref === null)) {
@@ -938,16 +960,16 @@ function useMergeRefs(refs) {
   }, refs);
 }
 function useResize(ref) {
-  const [width, setWidth] = (0, import_react18.useState)(0);
-  const [height, setHeight] = (0, import_react18.useState)(0);
-  const handleResize = (0, import_react18.useCallback)(() => {
+  const [width, setWidth] = (0, import_react19.useState)(0);
+  const [height, setHeight] = (0, import_react19.useState)(0);
+  const handleResize = (0, import_react19.useCallback)(() => {
     var _a, _b, _c, _d;
     if ((ref == null ? void 0 : ref.current) !== null) {
       setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
       setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
     }
   }, [ref]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     window.addEventListener("load", handleResize);
     window.addEventListener("resize", handleResize);
     return () => {
@@ -955,7 +977,7 @@ function useResize(ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [ref, handleResize]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     handleResize();
   }, []);
   return { width, height };
@@ -998,8 +1020,8 @@ function releaseFocusTrap(inertElements) {
 }
 
 // src/form/date-picker/date-picker.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DatePicker = (0, import_react20.forwardRef)(function DatePicker2(_a, ref) {
   var _b = _a, {
     className,
     variant,
@@ -1023,12 +1045,12 @@ var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
     "readOnly",
     "calendarButtonTitle"
   ]);
-  const inputRef = (0, import_react19.useRef)(null);
+  const inputRef = (0, import_react20.useRef)(null);
   const mergedRef = useMergeRefs([inputRef, ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname17.clsx)("hds-date-picker", className),
+      className: (0, import_typed_classname18.clsx)("hds-date-picker", className),
       disabled,
       errorMessage,
       id,
@@ -1037,8 +1059,8 @@ var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           __spreadProps(__spreadValues(__spreadValues({}, rest), inputProps), {
             disabled,
@@ -1047,10 +1069,10 @@ var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
             type: "date"
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
-            className: (0, import_typed_classname17.clsx)("hds-date-picker__calendar-button"),
+            className: (0, import_typed_classname18.clsx)("hds-date-picker__calendar-button"),
             type: "button",
             title: calendarButtonTitle,
             onClick: () => {
@@ -1066,52 +1088,52 @@ var DatePicker = (0, import_react19.forwardRef)(function DatePicker2(_a, ref) {
 DatePicker.displayName = "DatePicker";
 
 // src/form/error-summary/error-summary.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/message/message.tsx
-var import_react20 = require("react");
-var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
+var import_react21 = require("react");
+var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot7 = require("@radix-ui/react-slot");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var MessageTitle = (0, import_react20.forwardRef)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var MessageTitle = (0, import_react21.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname18.clsx)("hds-message__title", className),
+        className: (0, import_typed_classname19.clsx)("hds-message__title", className),
         ref
       }, rest)
     );
   }
 );
 MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react20.forwardRef)(
+var MessageDescription = (0, import_react21.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname18.clsx)("hds-message__description", className),
+        className: (0, import_typed_classname19.clsx)("hds-message__description", className),
         ref
       }, rest)
     );
   }
 );
 MessageDescription.displayName = "Message.Description";
-var Message = (0, import_react20.forwardRef)(
+var Message = (0, import_react21.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Box,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname18.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        className: (0, import_typed_classname19.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 }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_typed_classname19.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
         ]
       })
@@ -1123,30 +1145,30 @@ 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)(
+var import_react22 = require("react");
+var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var UnorderedList = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "ul",
       __spreadValues({
         ref,
-        className: (0, import_typed_classname19.clsx)("hds-list", `hds-list--${size}`, className)
+        className: (0, import_typed_classname20.clsx)("hds-list", `hds-list--${size}`, className)
       }, rest)
     );
   }
 );
 UnorderedList.displayName = "UnorderedList";
-var OrderedList = (0, import_react21.forwardRef)(
+var OrderedList = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "ol",
       __spreadValues({
         ref,
-        className: (0, import_typed_classname19.clsx)("hds-list", `hds-list--${size}`, className)
+        className: (0, import_typed_classname20.clsx)("hds-list", `hds-list--${size}`, className)
       }, rest)
     );
   }
@@ -1154,17 +1176,17 @@ var OrderedList = (0, import_react21.forwardRef)(
 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)(
+var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
+var import_react23 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var LinkList = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       UnorderedList,
       __spreadValues({
         ref,
-        className: (0, import_typed_classname20.clsx)("hds-list--link-list", className)
+        className: (0, import_typed_classname21.clsx)("hds-list--link-list", className)
       }, rest)
     );
   }
@@ -1173,18 +1195,18 @@ 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_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
+var import_react24 = 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)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Link = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, children, variant = "underline", size = "default", icon, className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "icon", "className"]);
     const Component = asChild ? import_react_slot8.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname21.clsx)(
+        className: (0, import_typed_classname22.clsx)(
           "hds-link",
           variant !== "underline" && `hds-link--${variant}`,
           size !== "default" && `hds-link--${size}`,
@@ -1202,9 +1224,9 @@ var Link = (0, import_react23.forwardRef)(
 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)(
+var import_react25 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var AutoAnimateHeight = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1220,16 +1242,16 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       "onTransitionEnd"
     ]);
     var _a2, _b2;
-    const rootRef = (0, import_react24.useRef)(null);
+    const rootRef = (0, import_react25.useRef)(null);
     const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react24.useRef)(null);
-    const [height, setHeight] = (0, import_react24.useState)(
+    const measurementRef = (0, import_react25.useRef)(null);
+    const [height, setHeight] = (0, import_react25.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 }), {})
+    const [clonedChildren, setClonedChildren] = (0, import_react25.useState)(
+      () => (0, import_react25.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children }), {})
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       var _a3;
       if (!rootRef.current) return;
       if (!measurementRef.current) return;
@@ -1245,7 +1267,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       });
       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 }), {});
+      const nextClonedChildren = (0, import_react25.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children }), {});
       if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
         setClonedChildren(nextClonedChildren);
         return () => {
@@ -1263,7 +1285,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
         currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
       };
     }, [children]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
@@ -1279,7 +1301,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
         }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -1342,33 +1364,33 @@ function labelForInput(input) {
 }
 
 // src/form/error-summary/error-summary.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ErrorSummaryHeading = (0, import_react25.forwardRef)((_a, ref) => {
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ErrorSummaryHeading = (0, import_react26.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 focusRef = (0, import_react26.useRef)(null);
   const mergedRef = useMergeRefs([focusRef, ref]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.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 }));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Message.Title, __spreadProps(__spreadValues({ ref: mergedRef, tabIndex: -1, asChild: true }, rest), { children: Tag ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tag, { children }) : children }));
 });
 ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
-var ErrorSummaryList = (0, import_react25.forwardRef)(
+var ErrorSummaryList = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, style: _style, size = "small" } = _b, rest = __objRest(_b, ["children", "style", "size"]);
     const style = __spreadValues({
       // Match the link `solid` style, which black underline
       "--_hds-list-marker-color": "var(--hds-ui-colors-black)"
     }, _style);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
   }
 );
 ErrorSummaryList.displayName = "ErrorSummary.List";
-var ErrorSummaryItem = (0, import_react25.forwardRef)(
+var ErrorSummaryItem = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, href, linkProps } = _b, rest = __objRest(_b, ["children", "href", "linkProps"]);
     function onClick(e) {
@@ -1378,14 +1400,14 @@ var ErrorSummaryItem = (0, import_react25.forwardRef)(
         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 })) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
   }
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";
-var ErrorSummary = (0, import_react25.forwardRef)(
+var ErrorSummary = (0, import_react26.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 }));
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Message, __spreadProps(__spreadValues({ variant: "warning", ref }, rest), { children }));
   }
 );
 ErrorSummary.displayName = "ErrorSummary";
@@ -1394,15 +1416,15 @@ 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 import_react27 = require("react");
+var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Input = (0, import_react27.forwardRef)(function Input2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname22.clsx)("hds-input", className),
+      className: (0, import_typed_classname23.clsx)("hds-input", className),
       disabled,
       errorMessage,
       id,
@@ -1411,35 +1433,35 @@ var Input = (0, import_react26.forwardRef)(function Input2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Input.displayName = "Input";
 
 // src/form/radio-button/radio-button.tsx
-var import_react28 = require("react");
-var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
+var import_react29 = require("react");
+var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radio-button/radio-group.tsx
-var import_react27 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react27.createContext)({
+var import_react28 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react28.createContext)({
   name: void 0,
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react27.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react27.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react28.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react28.forwardRef)(function RadioGroup2(_a, ref) {
   var _b = _a, { name, value, errorMessage, onChange, children } = _b, rest = __objRest(_b, ["name", "value", "errorMessage", "onChange", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_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 })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
 RadioGroup.displayName = "RadioGroup";
 
 // src/form/radio-button/radio-button.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var isChecked = ({
   checked,
   selectedValue,
@@ -1449,7 +1471,7 @@ var isChecked = ({
   if (typeof selectedValue !== "undefined") return value === selectedValue;
   return void 0;
 };
-var RadioButton = (0, import_react28.forwardRef)(
+var RadioButton = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -1477,10 +1499,10 @@ var RadioButton = (0, import_react28.forwardRef)(
     ]);
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
-        className: (0, import_typed_classname23.clsx)(
+        className: (0, import_typed_classname24.clsx)(
           "hds-radio-button",
           {
             [`hds-radio-button--${variant}`]: variant === "bounding-box",
@@ -1489,8 +1511,8 @@ var RadioButton = (0, import_react28.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               __spreadProps(__spreadValues(__spreadValues({}, context), rest), {
                 checked: isChecked({ checked, selectedValue, value }),
@@ -1499,8 +1521,8 @@ var RadioButton = (0, import_react28.forwardRef)(
                 type: "radio"
               })
             ),
-            /* @__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
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
+            title ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
           ] }),
           title ? children : null
         ]
@@ -1511,15 +1533,15 @@ var RadioButton = (0, import_react28.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // src/form/select/select.tsx
-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 import_react30 = require("react");
+var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Select = (0, import_react30.forwardRef)(function Select2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, children } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname24.clsx)("hds-select", className),
+      className: (0, import_typed_classname25.clsx)("hds-select", className),
       disabled,
       errorMessage,
       id,
@@ -1527,22 +1549,22 @@ var Select = (0, import_react29.forwardRef)(function Select2(_a, ref) {
       labelProps,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
     }
   );
 });
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_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 import_react31 = require("react");
+var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Textarea = (0, import_react31.forwardRef)(function Textarea2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname25.clsx)("hds-textarea", className),
+      className: (0, import_typed_classname26.clsx)("hds-textarea", className),
       disabled,
       errorMessage,
       id,
@@ -1551,40 +1573,40 @@ var Textarea = (0, import_react30.forwardRef)(function Textarea2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Textarea.displayName = "Textarea";
 
 // src/footer/footer.tsx
-var import_react31 = require("react");
-var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
+var import_react32 = require("react");
+var import_typed_classname27 = 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)(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var FooterLogo = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_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 }));
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname27.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
   }
 );
 FooterLogo.displayName = "Footer.Logo";
-var FooterButtonLink = (0, import_react31.forwardRef)(
+var FooterButtonLink = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot9.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { asChild: true, variant: "inverted", className: (0, import_typed_classname26.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { asChild: true, variant: "inverted", className: (0, import_typed_classname27.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
-var FooterLinkSections = (0, import_react31.forwardRef)(
+var FooterLinkSections = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Accordion,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname26.clsx)("hds-footer__link-sections", className),
+        className: (0, import_typed_classname27.clsx)("hds-footer__link-sections", className),
         ref
       }, rest), {
         children
@@ -1593,39 +1615,39 @@ var FooterLinkSections = (0, import_react31.forwardRef)(
   }
 );
 FooterLinkSections.displayName = "Footer.LinkSections";
-var FooterLinkSection = (0, import_react31.forwardRef)(
+var FooterLinkSection = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
-    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(LinkList, { children });
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LinkList, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         Accordion.Item,
         __spreadProps(__spreadValues({
-          className: (0, import_typed_classname26.clsx)(`hds-footer__link-section`, className),
+          className: (0, import_typed_classname27.clsx)(`hds-footer__link-section`, className),
           ref
         }, rest), {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Accordion.Header, { children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Accordion.Content, { children: linkListChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion.Header, { children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion.Content, { children: linkListChildren })
           ]
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_typed_classname26.clsx)(`hds-footer__link-section`, className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_typed_classname27.clsx)(`hds-footer__link-section`, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { children: heading }),
         linkListChildren
       ] })
     ] });
   }
 );
 FooterLinkSection.displayName = "Footer.LinkSection";
-var Footer = (0, import_react31.forwardRef)(
+var Footer = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
     const Component = asChild ? import_react_slot9.Slot : "footer";
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname26.clsx)(
+        className: (0, import_typed_classname27.clsx)(
           `hds-footer`,
           variant === "slim" && "hds-footer--slim",
           className
@@ -1645,10 +1667,10 @@ Footer.LinkSection = FooterLinkSection;
 
 // src/help-text/help-text.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
-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)(
+var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
+var import_react33 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var HelpText = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, helpText, title, side = "top", align = "start", boxProps } = _b, rest = __objRest(_b, ["children", "className", "helpText", "title", "side", "align", "boxProps"]);
     return (
@@ -1656,24 +1678,24 @@ var HelpText = (0, import_react32.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_runtime30.jsxs)(Popover.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "button",
           __spreadProps(__spreadValues({
             ref,
-            className: (0, import_typed_classname27.clsx)("hds-help-text-button", className),
+            className: (0, import_typed_classname28.clsx)("hds-help-text-button", className),
             title,
             type: "button"
           }, rest), {
             children
           })
         ) }),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           Box,
           __spreadProps(__spreadValues({}, boxProps), {
-            className: (0, import_typed_classname27.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
+            className: (0, import_typed_classname28.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Box.CloseButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box.CloseButton, {}) }),
               helpText
             ]
           })
@@ -1685,18 +1707,18 @@ var HelpText = (0, import_react32.forwardRef)(
 HelpText.displayName = "HelpText";
 
 // src/layout/container/container.tsx
-var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname29 = 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)(
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Container = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Tag = "div", asChild, className, children, variant } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant"]);
     const Component = asChild ? import_react_slot10.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname28.clsx)(
+        className: (0, import_typed_classname29.clsx)(
           "hds-container",
           { "hds-container--slim": variant === "slim" },
           className
@@ -1710,9 +1732,9 @@ var Container = (0, import_react33.forwardRef)(
 Container.displayName = "Container";
 
 // src/layout/grid/grid.tsx
-var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot11 = require("@radix-ui/react-slot");
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -1733,17 +1755,17 @@ function getSpacingVariable(size) {
 }
 
 // src/layout/grid/grid.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var GridItem = (0, import_react34.forwardRef)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var GridItem = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
     const Component = asChild ? import_react_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_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname29.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname30.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -1752,16 +1774,16 @@ var GridItem = (0, import_react34.forwardRef)(
   }
 );
 GridItem.displayName = "Grid.Item";
-var Grid = (0, import_react34.forwardRef)(
+var Grid = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_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_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname29.clsx)("hds-grid", className),
+        className: (0, import_typed_classname30.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -1774,11 +1796,11 @@ Grid.Item = GridItem;
 
 // src/layout/stack/stack.tsx
 var React3 = require("react");
-var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
-var import_react35 = require("react");
+var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
+var import_react36 = 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)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Stack = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1807,11 +1829,11 @@ var Stack = (0, import_react35.forwardRef)(
     ]);
     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_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname30.clsx)("hds-stack", className),
+        className: (0, import_typed_classname31.clsx)("hds-stack", className),
         ref
       }, rest), {
         children
@@ -1820,66 +1842,66 @@ var Stack = (0, import_react35.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react35.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react36.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react35.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react36.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 
 // src/modal/modal.tsx
-var import_react36 = require("react");
-var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
+var import_react37 = require("react");
+var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot13 = require("@radix-ui/react-slot");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ModalHeader = (0, import_react36.forwardRef)(
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ModalHeader = (0, import_react37.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_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname31.clsx)("hds-modal__header", className),
+        className: (0, import_typed_classname32.clsx)("hds-modal__header", className),
         ref
       }, rest)
     );
   }
 );
 ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react36.forwardRef)(
+var ModalContent = (0, import_react37.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_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname31.clsx)("hds-modal__content", className),
+        className: (0, import_typed_classname32.clsx)("hds-modal__content", className),
         ref
       }, rest)
     );
   }
 );
 ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react36.forwardRef)(
+var ModalFooter = (0, import_react37.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_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname31.clsx)("hds-modal__footer", className),
+        className: (0, import_typed_classname32.clsx)("hds-modal__footer", className),
         ref
       }, rest)
     );
   }
 );
 ModalFooter.displayName = "Modal.Footer";
-var Modal = (0, import_react36.forwardRef)(
+var Modal = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = (0, import_react36.useRef)(null);
+    const modalRef = (0, import_react37.useRef)(null);
     const mergedRef = useMergeRefs([modalRef, ref]);
     function onCloseButtonClick() {
       var _a2;
@@ -1887,7 +1909,7 @@ var Modal = (0, import_react36.forwardRef)(
       return false;
     }
     useScrollLock(modalRef, "hds-modal-scroll-lock");
-    (0, import_react36.useEffect)(() => {
+    (0, import_react37.useEffect)(() => {
       if (modalRef.current && open !== void 0) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
@@ -1902,16 +1924,16 @@ var Modal = (0, import_react36.forwardRef)(
       }
       onClick == null ? void 0 : onClick(e);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Box,
       {
         asChild: true,
-        className: (0, import_typed_classname31.clsx)("hds-modal", className),
+        className: (0, import_typed_classname32.clsx)("hds-modal", className),
         closeable: true,
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
         variant: "white",
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
       }
     );
   }
@@ -1921,7 +1943,7 @@ Modal.Header = ModalHeader;
 Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!modalRef.current) return;
     if (modalRef.current.open) document.body.classList.add(bodyClass);
     const observer = new MutationObserver(() => {
@@ -1941,18 +1963,18 @@ function useScrollLock(modalRef, bodyClass) {
 }
 
 // src/navbar/navbar.tsx
-var import_react38 = require("react");
-var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
+var import_react39 = require("react");
+var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot14 = require("@radix-ui/react-slot");
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react37 = require("react");
-var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
+var import_react38 = require("react");
+var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/navbar/icons.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function CloseIcon() {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.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",
@@ -1961,7 +1983,7 @@ function CloseIcon() {
   ) });
 }
 function MenuIcon() {
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -1971,35 +1993,35 @@ function MenuIcon() {
 }
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ExpandableMenuContext = (0, import_react37.createContext)(null);
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ExpandableMenuContext = (0, import_react38.createContext)(null);
 var useNavbarExpendableMenuContext = () => {
-  const value = (0, import_react37.useContext)(ExpandableMenuContext);
+  const value = (0, import_react38.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_react37.useId)();
-  const [open, setOpen] = (0, import_react37.useState)(false);
-  (0, import_react37.useEffect)(() => {
+  const contentId = (0, import_react38.useId)();
+  const [open, setOpen] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
-      document.body.classList.add((0, import_typed_classname32.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.add((0, import_typed_classname33.clsx)("hds-navbar-scroll-lock"));
       const releaseFocusTrap2 = focusTrap(
-        document.getElementsByClassName((0, import_typed_classname32.clsx)("hds-navbar"))[0]
+        document.getElementsByClassName((0, import_typed_classname33.clsx)("hds-navbar"))[0]
       );
       return () => {
-        document.body.classList.remove((0, import_typed_classname32.clsx)("hds-navbar-scroll-lock"));
+        document.body.classList.remove((0, import_typed_classname33.clsx)("hds-navbar-scroll-lock"));
         releaseFocusTrap2();
       };
     }
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
+var NavbarExpandableMenuTrigger = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -2017,9 +2039,9 @@ var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
       "className"
     ]);
     const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
-    const [textWidth, setTextWidth] = (0, import_react37.useState)(void 0);
-    const measurementId = (0, import_react37.useId)();
-    (0, import_react37.useEffect)(() => {
+    const [textWidth, setTextWidth] = (0, import_react38.useState)(void 0);
+    const measurementId = (0, import_react38.useId)();
+    (0, import_react38.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;
@@ -2027,16 +2049,16 @@ var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
     }, [measurementId]);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
-    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenuIcon, {});
+    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuIcon, {});
     function toggleOpen() {
       setOpen(!open);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         "aria-expanded": open,
         "aria-controls": contentId,
-        className: (0, import_typed_classname32.clsx)("hds-navbar__item", className),
+        className: (0, import_typed_classname33.clsx)("hds-navbar__item", className),
         onClick: toggleOpen,
         ref,
         title,
@@ -2044,7 +2066,7 @@ var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
         style: __spreadValues({ position: "relative" }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               id: `${measurementId}-when-closed`,
@@ -2058,7 +2080,7 @@ var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
               children: whenOpenText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               id: `${measurementId}-when-open`,
@@ -2072,57 +2094,57 @@ var NavbarExpandableMenuTrigger = (0, import_react37.forwardRef)(
               children: whenClosedText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               style: { width: textWidth, whiteSpace: "nowrap" },
-              className: (0, import_typed_classname32.clsx)("hds-navbar__item-responsive-text"),
+              className: (0, import_typed_classname33.clsx)("hds-navbar__item-responsive-text"),
               children: text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
         ]
       })
     );
   }
 );
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
-var NavbarExpandableMenuContent = (0, import_react37.forwardRef)((_a, ref) => {
+var NavbarExpandableMenuContent = (0, import_react38.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const { contentId, open } = useNavbarExpendableMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       id: contentId,
-      className: (0, import_typed_classname32.clsx)("hds-navbar__expandable-menu-content", className),
+      className: (0, import_typed_classname33.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
     }), { inert: open ? void 0 : "true" }), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: (0, import_typed_classname32.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_typed_classname33.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
 NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 
 // src/navbar/navbar.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var NavbarLogo = (0, import_react38.forwardRef)(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var NavbarLogo = (0, import_react39.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_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname34.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
-var NavbarLogoAndServiceText = (0, import_react38.forwardRef)(
+var NavbarLogoAndServiceText = (0, import_react39.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_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname33.clsx)(
+        className: (0, import_typed_classname34.clsx)(
           "hds-navbar__logo-and-service-text",
           `hds-navbar__logo-and-service-text--${variant}`,
           className
@@ -2134,29 +2156,29 @@ var NavbarLogoAndServiceText = (0, import_react38.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarItemIcon = (0, import_react38.forwardRef)(
+var NavbarItemIcon = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    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 }));
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_slot14.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname34.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
   }
 );
 NavbarItemIcon.displayName = "Navbar.ItemIcon";
-var NavbarItem = (0, import_react38.forwardRef)(
+var NavbarItem = (0, import_react39.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_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname34.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarItem.displayName = "Navbar.Item";
-var NavbarButtonItem = (0, import_react38.forwardRef)(
+var NavbarButtonItem = (0, import_react39.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_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-navbar__item", className),
+        className: (0, import_typed_classname34.clsx)("hds-navbar__item", className),
         ref,
         type: "button"
       }, rest), {
@@ -2166,36 +2188,36 @@ var NavbarButtonItem = (0, import_react38.forwardRef)(
   }
 );
 NavbarButtonItem.displayName = "Navbar.ButtonItem";
-var NavbarLinkItem = (0, import_react38.forwardRef)(
+var NavbarLinkItem = (0, import_react39.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_runtime37.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname34.clsx)("hds-navbar__item", className), ref }, rest), { children }));
   }
 );
 NavbarLinkItem.displayName = "Navbar.LinkItem";
-var NavbarNavigation = (0, import_react38.forwardRef)(
+var NavbarNavigation = (0, import_react39.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_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-navbar__navigation", className),
+        className: (0, import_typed_classname34.clsx)("hds-navbar__navigation", className),
         ref
       }, rest)
     );
   }
 );
 NavbarNavigation.displayName = "Navbar.Navigation";
-var Navbar = (0, import_react38.forwardRef)(
+var Navbar = (0, import_react39.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_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname33.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        className: (0, import_typed_classname34.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
       }, rest), {
         children
@@ -2216,17 +2238,17 @@ Navbar.ItemIcon = NavbarItemIcon;
 Navbar.Navigation = NavbarNavigation;
 
 // src/show-more/show-more.tsx
-var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_react39 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react39.forwardRef)(
+var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_react40 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ShowMoreButton = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname34.clsx)(
+        className: (0, import_typed_classname35.clsx)(
           "hds-show-more",
           variant === "show-more-show-less" && "hds-show-more--show-less",
           className
@@ -2236,7 +2258,7 @@ var ShowMoreButton = (0, import_react39.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: (0, import_typed_classname34.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_typed_classname35.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -2245,11 +2267,11 @@ var ShowMoreButton = (0, import_react39.forwardRef)(
 ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
-var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot15 = require("@radix-ui/react-slot");
-var import_react40 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var Skeleton = (0, import_react40.forwardRef)(
+var import_react41 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Skeleton = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag = "div",
@@ -2273,10 +2295,10 @@ var Skeleton = (0, import_react40.forwardRef)(
       "style"
     ]);
     const Component = asChild ? import_react_slot15.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Component,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-        className: (0, import_typed_classname35.clsx)(
+        className: (0, import_typed_classname36.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
           !animation && `hds-skeleton--no-animation`,
@@ -2295,19 +2317,19 @@ var Skeleton = (0, import_react40.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/spinner/spinner.tsx
-var import_react41 = require("react");
-var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Spinner = (0, import_react41.forwardRef)(
+var import_react42 = require("react");
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Spinner = (0, import_react42.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_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       __spreadValues({
         title,
         style,
-        className: (0, import_typed_classname36.clsx)(
+        className: (0, import_typed_classname37.clsx)(
           "hds-spinner",
           `hds-spinner--${size}`,
           delay && "hds-spinner--delay",
@@ -2321,10 +2343,10 @@ var Spinner = (0, import_react41.forwardRef)(
 Spinner.displayName = "Spinner";
 
 // src/step-indicator/step-indicator.tsx
-var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
-var import_react42 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react42.forwardRef)(
+var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
+var import_react43 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react43.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2343,27 +2365,27 @@ var StepIndicator = (0, import_react42.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname37.clsx)("hds-step-indicator", className),
+        className: (0, import_typed_classname38.clsx)("hds-step-indicator", className),
         lang
       }, rest), {
         children: [
-          /* @__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_runtime42.jsxs)("div", { className: (0, import_typed_classname38.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_typed_classname38.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_typed_classname38.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
-              className: (0, import_typed_classname37.clsx)("hds-step-indicator__step"),
+              className: (0, import_typed_classname38.clsx)("hds-step-indicator__step"),
               "data-state": getStepState(i + 1, activeStep)
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TitleComponent, { className: (0, import_typed_classname37.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TitleComponent, { className: (0, import_typed_classname38.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2387,18 +2409,18 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react43 = require("react");
-var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
+var import_react44 = require("react");
+var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot16 = require("@radix-ui/react-slot");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react43.forwardRef)(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react44.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_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname38.clsx)(
+        className: (0, import_typed_classname39.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
           darkmode && "hds-styled-html--darkmode",
@@ -2414,20 +2436,20 @@ var StyledHtml = (0, import_react43.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
-var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
-var import_react44 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Table = (0, import_react44.forwardRef)(
+var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
+var import_react45 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Table = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
-    const descriptionId = (0, import_react44.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    const descriptionId = (0, import_react45.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "table",
         __spreadProps(__spreadValues({
           "aria-describedby": description ? descriptionId : void 0,
           ref,
-          className: (0, import_typed_classname39.clsx)(
+          className: (0, import_typed_classname40.clsx)(
             "hds-table",
             {
               "hds-table--compressed": size === "compressed",
@@ -2437,27 +2459,27 @@ var Table = (0, import_react44.forwardRef)(
           )
         }, rest), {
           children: [
-            caption ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { children: caption }) : null,
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("caption", { children: caption }) : null,
             children
           ]
         })
       ),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: (0, import_typed_classname39.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: (0, import_typed_classname40.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
     ] });
   }
 );
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react48 = require("react");
-var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
+var import_react49 = require("react");
+var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot18 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
-var import_react45 = require("react");
-var TabsContext = (0, import_react45.createContext)(null);
+var import_react46 = require("react");
+var TabsContext = (0, import_react46.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react45.useContext)(TabsContext);
+  const context = (0, import_react46.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2467,25 +2489,25 @@ function useTabsContext() {
 }
 
 // src/tabs/tabs-content.tsx
-var import_react46 = require("react");
-var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
+var import_react47 = require("react");
+var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot17 = require("@radix-ui/react-slot");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var TabsContents = (0, import_react46.forwardRef)(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var TabsContents = (0, import_react47.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_runtime44.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname40.clsx)("hds-tabs__contents") }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname41.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react46.forwardRef)(
+var TabsContent = (0, import_react47.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_runtime44.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -2493,21 +2515,21 @@ var TabsContent = (0, import_react46.forwardRef)(
 TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
-var import_react47 = require("react");
-var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var TabsList = (0, import_react47.forwardRef)(
+var import_react48 = require("react");
+var import_typed_classname42 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var TabsList = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
     const { activeTabId } = useTabsContext();
-    const tabsListRef = (0, import_react47.useRef)(null);
+    const tabsListRef = (0, import_react48.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_react47.useRef)(activeTabId);
-    (0, import_react47.useEffect)(() => {
+    const previousTabId = (0, import_react48.useRef)(activeTabId);
+    (0, import_react48.useEffect)(() => {
       const tabList = tabsListRef.current;
       const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
       if (!activeTab || !tabList) return;
@@ -2531,10 +2553,10 @@ var TabsList = (0, import_react47.forwardRef)(
       }
       previousTabId.current = activeTabId;
     }, [activeTabId, innerWidth]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "div",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname41.clsx)(
+        className: (0, import_typed_classname42.clsx)(
           "hds-tabs__list",
           direction === "horizontal" ? {
             "hds-tabs__list--horizontal": wideEnough,
@@ -2553,7 +2575,7 @@ var TabsList = (0, import_react47.forwardRef)(
   }
 );
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react47.forwardRef)(
+var TabsTab = (0, import_react48.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
@@ -2562,10 +2584,10 @@ var TabsTab = (0, import_react47.forwardRef)(
       context.toggleActiveTabId(tabId);
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "button",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname41.clsx)(
+        className: (0, import_typed_classname42.clsx)(
           "hds-tabs__tab",
           { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
@@ -2584,13 +2606,13 @@ var TabsTab = (0, import_react47.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Tabs = (0, import_react48.forwardRef)(
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Tabs = (0, import_react49.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react48.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react49.useState)(defaultTab);
     const Component = asChild ? import_react_slot18.Slot : "div";
-    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 }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname43.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -2600,10 +2622,10 @@ Tabs.Contents = TabsContents;
 Tabs.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react49 = require("react");
-var import_typed_classname43 = require("@postenbring/hedwig-css/typed-classname");
+var import_react50 = require("react");
+var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot19 = require("@radix-ui/react-slot");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -2619,7 +2641,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react49.forwardRef)(
+var Text = (0, import_react50.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag,
@@ -2640,10 +2662,10 @@ var Text = (0, import_react49.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_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname43.clsx)(
+        className: (0, import_typed_classname44.clsx)(
           `hds-text-${variant}`,
           sizeModifier && `hds-text--${sizeModifier}`,
           spacing && "hds-text--spacing",
@@ -2659,16 +2681,16 @@ var Text = (0, import_react49.forwardRef)(
 Text.displayName = "Text";
 
 // src/warning-banner/warning-banner.tsx
-var import_react50 = require("react");
-var import_typed_classname44 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react50.forwardRef)(
+var import_react51 = require("react");
+var import_typed_classname45 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react51.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
-    const descriptionId = (0, import_react50.useId)();
+    const descriptionId = (0, import_react51.useId)();
     const expandable = !!description;
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname45.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         WarningBannerTitle,
         {
           variant: expandable ? "expandable" : "default",
@@ -2676,22 +2698,22 @@ var WarningBanner = (0, import_react50.forwardRef)(
           children: title
         }
       ),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react50.forwardRef)((_a, ref) => {
+var WarningBannerTitle = (0, import_react51.forwardRef)((_a, ref) => {
   var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
-  const [open, setOpen] = (0, import_react50.useState)(false);
+  const [open, setOpen] = (0, import_react51.useState)(false);
   if (variant === "expandable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": open,
         "aria-controls": descriptionId,
         "data-state": open ? "open" : "closed",
-        className: (0, import_typed_classname44.clsx)(
+        className: (0, import_typed_classname45.clsx)(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
           className
@@ -2701,28 +2723,28 @@ var WarningBannerTitle = (0, import_react50.forwardRef)((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children })
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "p",
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname44.clsx)("hds-warning-banner__title", className),
+      className: (0, import_typed_classname45.clsx)("hds-warning-banner__title", className),
       ref,
       children
     })
   );
 });
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react50.forwardRef)(
+var WarningBannerDescription = (0, import_react51.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "p",
       __spreadValues({
         id,
-        className: (0, import_typed_classname44.clsx)("hds-warning-banner__description", className),
+        className: (0, import_typed_classname45.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );
@@ -2742,6 +2764,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   BoxCloseButton,
   Breadcrumbs,
   Button,
+  ButtonList,
   Card,
   CardBody,
   CardBodyAction,