@postenbring/hedwig-react 0.0.64 → 0.0.66

package/dist/index.js

@@ -71,6 +71,8 @@ __export(src_exports, {
   DescriptionList: () => DescriptionList,
   ErrorMessage: () => ErrorMessage,
   Fieldset: () => Fieldset,
+  Footer: () => FooterComponent,
+  HStack: () => HStack,
   Input: () => Input,
   Link: () => Link,
   LinkList: () => LinkList,
@@ -85,9 +87,14 @@ __export(src_exports, {
   Select: () => Select,
   ShowMoreButton: () => ShowMoreButton,
   Skeleton: () => Skeleton,
+  Stack: () => Stack,
   StepIndicator: () => StepIndicator,
   StyledHtml: () => StyledHtml,
   Tabs: () => TabsComponent,
+  TabsContent: () => TabsContent,
+  TabsContents: () => TabsContents,
+  TabsList: () => TabsList,
+  TabsTab: () => TabsTab,
   Text: () => Text,
   TextBody: () => TextBody,
   TextBodySmall: () => TextBodySmall,
@@ -104,9 +111,13 @@ __export(src_exports, {
   TextTechnicalTitle: () => TextTechnicalTitle,
   Textarea: () => Textarea,
   UnorderedList: () => UnorderedList,
+  VStack: () => VStack,
   WarningBadge: () => WarningBadge,
   WarningBanner: () => WarningBanner,
-  WhiteBadge: () => WhiteBadge
+  WhiteBadge: () => WhiteBadge,
+  useFieldsetContext: () => useFieldsetContext,
+  useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext,
+  useRadioGroupContext: () => useRadioGroupContext
 });
 module.exports = __toCommonJS(src_exports);
 var import_dist = require("@postenbring/hedwig-css/dist/index.css");
@@ -173,13 +184,8 @@ var AccordionItem = (0, import_react3.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname2.clsx)(
-          "hds-accordion-item",
-          {
-            "hds-accordion-item__expanded": open
-          },
-          className
-        ),
+        "data-state": open ? "open" : "closed",
+        className: (0, import_typed_classname2.clsx)("hds-accordion-item", className),
         ref,
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
       })
@@ -194,23 +200,20 @@ var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname")
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var AccordionHeader = (0, import_react4.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "button", children, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "onClick"]);
-  const itemContext = (0, import_react4.useContext)(AccordionItemContext);
-  if (itemContext === null) {
+  const context = (0, import_react4.useContext)(AccordionItemContext);
+  if (context === null) {
     return null;
   }
   const expandOrCollapse = (e) => {
-    itemContext.setOpen(!itemContext.open);
+    context.setOpen(!context.open);
     onClick && onClick(e);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
-      "aria-expanded": itemContext.open,
-      className: (0, import_typed_classname3.clsx)(
-        "hds-accordion-item-header",
-        { "hds-accordion-item-header--open": itemContext.open },
-        className
-      ),
+      "aria-expanded": context.open,
+      "data-state": context.open ? "open" : "closed",
+      className: (0, import_typed_classname3.clsx)("hds-accordion-item-header", className),
       onClick: expandOrCollapse,
       ref,
       type: "button",
@@ -233,16 +236,12 @@ var AccordionContent = (0, import_react5.forwardRef)((_a, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Component,
     __spreadProps(__spreadValues({
-      "aria-hidden": !context.open
+      "aria-hidden": !context.open,
+      "data-state": context.open ? "open" : "closed",
+      inert: context.open ? void 0 : "true",
+      className: (0, import_typed_classname4.clsx)("hds-accordion-item-content", className),
+      ref
     }, rest), {
-      className: (0, import_typed_classname4.clsx)(
-        "hds-accordion-item-content",
-        {
-          "hds-accordion-item-content--closed": !context.open
-        },
-        className
-      ),
-      ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_typed_classname4.clsx)("hds-accordion-item-content-inner"), children })
     })
   );
@@ -630,6 +629,8 @@ function ErrorMessage({ children, id, className }) {
 
 // src/form/fieldset/fieldset.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var FieldsetContext = (0, import_react9.createContext)({ hasError: false });
+var useFieldsetContext = () => (0, import_react9.useContext)(FieldsetContext);
 var Fieldset = (0, import_react9.forwardRef)(function Fieldset2(_a, ref) {
   var _b = _a, {
     className,
@@ -670,7 +671,7 @@ var Fieldset = (0, import_react9.forwardRef)(function Fieldset2(_a, ref) {
             children: legend
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_typed_classname12.clsx)("hds-fieldset__input-wrapper"), children }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
       ]
     })
@@ -839,28 +840,56 @@ var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname"
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Checkbox = (0, import_react14.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { variant = "plain", hasError, title, children, className } = _b, rest = __objRest(_b, ["variant", "hasError", "title", "children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "div",
-      {
-        className: (0, import_typed_classname17.clsx)(
-          "hds-checkbox",
-          {
-            [`hds-checkbox--${variant}`]: variant === "bounding-box",
-            "hds-checkbox--error": hasError
-          },
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", __spreadProps(__spreadValues({}, rest), { "aria-invalid": hasError ? true : void 0, ref, type: "checkbox" })),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
-            title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
-          ] }),
-          title ? children : null
-        ]
-      }
-    );
+    var _b = _a, {
+      variant = "plain",
+      hasError: hasErrorProp,
+      errorMessage,
+      title,
+      children,
+      className
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "hasError",
+      "errorMessage",
+      "title",
+      "children",
+      "className"
+    ]);
+    const errorMessageId = (0, import_react14.useId)();
+    const { hasError: hasFieldsetError } = useFieldsetContext();
+    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: (0, import_typed_classname17.clsx)("hds-checkbox-wrapper"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          className: (0, import_typed_classname17.clsx)(
+            "hds-checkbox",
+            {
+              [`hds-checkbox--${variant}`]: variant === "bounding-box",
+              "hds-checkbox--error": hasError
+            },
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                "input",
+                __spreadProps(__spreadValues({}, rest), {
+                  "aria-invalid": hasError ? true : void 0,
+                  "aria-describedby": errorMessage ? errorMessageId : void 0,
+                  ref,
+                  type: "checkbox"
+                })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
+              title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
+            ] }),
+            title ? children : null
+          ]
+        }
+      ),
+      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage }) : null
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -917,8 +946,15 @@ var Radiobutton = (0, import_react16.forwardRef)(
       "children",
       "className"
     ]);
-    const _a2 = useRadioGroupContext(), { value: selectedValue, hasError: hasErrorContext } = _a2, context = __objRest(_a2, ["value", "hasError"]);
-    const hasError = hasErrorContext || hasErrorProp;
+    const _a2 = useRadioGroupContext(), {
+      value: selectedValue,
+      hasError: hasRadioGroupError
+    } = _a2, context = __objRest(_a2, [
+      "value",
+      "hasError"
+    ]);
+    const { hasError: hasFieldsetError } = useFieldsetContext();
+    const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
@@ -952,17 +988,161 @@ var Radiobutton = (0, import_react16.forwardRef)(
 );
 Radiobutton.displayName = "Radiobutton";
 
-// src/layout/container/container.tsx
-var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
+// src/footer/footer.tsx
 var import_react17 = require("react");
+var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/list/link-list.tsx
+var React3 = require("react");
+var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
+
+// src/list/list.tsx
+var React2 = require("react");
+var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Container = (0, import_react17.forwardRef)(
+function BaseList(_a) {
+  var _b = _a, {
+    as: ListTag = "ul",
+    children,
+    size = "medium",
+    className
+  } = _b, rest = __objRest(_b, [
+    "as",
+    "children",
+    "size",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ListTag, __spreadProps(__spreadValues({ className: (0, import_typed_classname19.clsx)("hds-list", `hds-list--${size}`, className) }, rest), { children }));
+}
+function UnorderedList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
+}
+function OrderedList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
+}
+BaseList.displayName = "BaseList";
+OrderedList.displayName = "OrderedList";
+UnorderedList.displayName = "UnorderedList";
+
+// src/list/link-list.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function LinkList(_a) {
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UnorderedList, __spreadValues({ className: (0, import_typed_classname20.clsx)("hds-list--link-list", className) }, rest));
+}
+LinkList.displayName = "LinkList";
+
+// src/footer/footer.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Footer = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
+    const Component = asChild ? import_react_slot.Slot : "footer";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname21.clsx)(
+          `hds-footer`,
+          variant === "slim" && "hds-footer--slim",
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Footer.displayName = "Footer";
+var FooterButtonLink = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? import_react_slot.Slot : "a";
+    return (
+      // @ts-expect-error -- It's ok, types are a bit off
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        PrimaryButton,
+        __spreadProps(__spreadValues({
+          as: Component,
+          fill: "outline",
+          className: (0, import_typed_classname21.clsx)(className),
+          ref
+        }, rest), {
+          children
+        })
+      )
+    );
+  }
+);
+FooterButtonLink.displayName = "FooterButton";
+var FooterLogo = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname21.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
+  }
+);
+FooterLogo.displayName = "Footer.Logo";
+var FooterLinkSections = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      AccordionComponent,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname21.clsx)("hds-footer__link-sections", className),
+        ref
+      }, rest), {
+        children
+      })
+    ) });
+  }
+);
+FooterLinkSections.displayName = "Footer.LinkSections";
+var FooterLinkSection = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
+    const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LinkList, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        AccordionComponent.Item,
+        __spreadProps(__spreadValues({
+          className: (0, import_typed_classname21.clsx)(`hds-footer__link-section`, className),
+          ref
+        }, rest), {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AccordionComponent.Header, { children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AccordionComponent.Content, { children: linkListChildren })
+          ]
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_typed_classname21.clsx)(`hds-footer__link-section`, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { children: heading }),
+        linkListChildren
+      ] })
+    ] });
+  }
+);
+FooterLinkSection.displayName = "Footer.LinkSection";
+
+// src/footer/index.tsx
+var FooterComponent = Footer;
+FooterComponent.Logo = FooterLogo;
+FooterComponent.ButtonLink = FooterButtonLink;
+FooterComponent.LinkSections = FooterLinkSections;
+FooterComponent.LinkSection = FooterLinkSection;
+
+// src/layout/container/container.tsx
+var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
+var import_react18 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Container = (0, import_react18.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, children, variant } = _b, rest = __objRest(_b, ["as", "className", "children", "variant"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname19.clsx)(
+        className: (0, import_typed_classname22.clsx)(
           "hds-container",
           { "hds-container--slim": variant === "slim" },
           className
@@ -975,18 +1155,72 @@ var Container = (0, import_react17.forwardRef)(
 );
 Container.displayName = "Container";
 
-// src/link/link.tsx
+// src/layout/stack/stack.tsx
 var React4 = require("react");
-var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
-var import_react18 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Link = (0, import_react18.forwardRef)(
+var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
+var import_react19 = require("react");
+var import_react_slot2 = require("@radix-ui/react-slot");
+
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/responsive.ts
+function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
+  if (!inputValues)
+    return {};
+  if (typeof inputValues !== "object") {
+    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(inputValues)) {
+    result[`${variable}-${key}`] = valueTransformer(value);
+  }
+  return result;
+}
+
+// src/layout/stack/stack.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Stack = (0, import_react19.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    const Component = asChild ? import_react_slot2.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, 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_runtime24.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname23.clsx)("hds-stack", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Stack.displayName = "Stack";
+var HStack = (0, import_react19.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+});
+HStack.displayName = "HStack";
+var VStack = (0, import_react19.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+});
+VStack.displayName = "VStack";
+
+// src/link/link.tsx
+var React5 = require("react");
+var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
+var import_react20 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Link = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname20.clsx)(
+        className: (0, import_typed_classname24.clsx)(
           "hds-link",
           variant !== "underline" && `hds-link--${variant}`,
           size !== "medium" && `hds-link--${size}`,
@@ -1001,59 +1235,21 @@ var Link = (0, import_react18.forwardRef)(
 );
 Link.displayName = "Link";
 
-// src/list/list.tsx
-var React5 = require("react");
-var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function BaseList(_a) {
-  var _b = _a, {
-    as: ListTag = "ul",
-    children,
-    size = "medium",
-    className
-  } = _b, rest = __objRest(_b, [
-    "as",
-    "children",
-    "size",
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ListTag, __spreadProps(__spreadValues({ className: (0, import_typed_classname21.clsx)("hds-list", `hds-list--${size}`, className) }, rest), { children }));
-}
-function UnorderedList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
-}
-function OrderedList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
-}
-BaseList.displayName = "BaseList";
-OrderedList.displayName = "OrderedList";
-UnorderedList.displayName = "UnorderedList";
-
-// src/list/link-list.tsx
-var React6 = require("react");
-var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function LinkList(_a) {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UnorderedList, __spreadValues({ className: (0, import_typed_classname22.clsx)("hds-list--link-list", className) }, rest));
-}
-LinkList.displayName = "LinkList";
-
 // src/message/message.tsx
-var import_react19 = require("react");
-var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Message = (0, import_react19.forwardRef)(
+var import_react21 = require("react");
+var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+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_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       Box,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname23.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        className: (0, import_typed_classname25.clsx)(`hds-message`, `hds-message--${variant}`, className),
         ref
       }, rest), {
         children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_typed_classname23.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: (0, import_typed_classname25.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
         ]
       })
@@ -1061,26 +1257,26 @@ var Message = (0, import_react19.forwardRef)(
   }
 );
 Message.displayName = "Message";
-var MessageTitle = (0, import_react19.forwardRef)(
+var MessageTitle = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname23.clsx)("hds-message__title", className),
+        className: (0, import_typed_classname25.clsx)("hds-message__title", className),
         ref
       }, rest)
     );
   }
 );
 MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react19.forwardRef)(
+var MessageDescription = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname23.clsx)("hds-message__description", className),
+        className: (0, import_typed_classname25.clsx)("hds-message__description", className),
         ref
       }, rest)
     );
@@ -1094,14 +1290,14 @@ MessageComponent.Title = MessageTitle;
 MessageComponent.Description = MessageDescription;
 
 // src/modal/modal.tsx
-var import_react21 = require("react");
-var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
+var import_react23 = require("react");
+var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/utils.ts
-var React8 = __toESM(require("react"));
-var import_react20 = require("react");
+var React7 = __toESM(require("react"));
+var import_react22 = require("react");
 function useMergeRefs(refs) {
-  return React8.useMemo(() => {
+  return React7.useMemo(() => {
     if (refs.every((ref) => ref === null)) {
       return null;
     }
@@ -1117,16 +1313,16 @@ function useMergeRefs(refs) {
   }, refs);
 }
 function useResize(ref) {
-  const [width, setWidth] = (0, import_react20.useState)(0);
-  const [height, setHeight] = (0, import_react20.useState)(0);
-  const handleResize = (0, import_react20.useCallback)(() => {
+  const [width, setWidth] = (0, import_react22.useState)(0);
+  const [height, setHeight] = (0, import_react22.useState)(0);
+  const handleResize = (0, import_react22.useCallback)(() => {
     var _a, _b, _c, _d;
     if ((ref == null ? void 0 : ref.current) !== null) {
       setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
       setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
     }
   }, [ref]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     window.addEventListener("load", handleResize);
     window.addEventListener("resize", handleResize);
     return () => {
@@ -1134,18 +1330,18 @@ function useResize(ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [ref, handleResize]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     handleResize();
   }, []);
   return { width, height };
 }
 
 // src/modal/modal.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Modal = (0, import_react21.forwardRef)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Modal = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = (0, import_react21.useRef)(null);
+    const modalRef = (0, import_react23.useRef)(null);
     const mergedRef = useMergeRefs([modalRef, ref]);
     function onCloseButtonClick() {
       var _a2;
@@ -1153,7 +1349,7 @@ var Modal = (0, import_react21.forwardRef)(
       return false;
     }
     useScrollLock(modalRef, "hds-modal-scroll-lock");
-    (0, import_react21.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (modalRef.current && open !== void 0) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
@@ -1168,11 +1364,11 @@ var Modal = (0, import_react21.forwardRef)(
       }
       onClick == null ? void 0 : onClick(e);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Box,
       __spreadProps(__spreadValues({
         as: "dialog",
-        className: (0, import_typed_classname24.clsx)("hds-modal", className),
+        className: (0, import_typed_classname26.clsx)("hds-modal", className),
         closeable: true,
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
@@ -1185,39 +1381,39 @@ var Modal = (0, import_react21.forwardRef)(
   }
 );
 Modal.displayName = "Modal";
-var ModalHeader = (0, import_react21.forwardRef)(
+var ModalHeader = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "h1", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname24.clsx)("hds-modal__header", className),
+        className: (0, import_typed_classname26.clsx)("hds-modal__header", className),
         ref
       }, rest)
     );
   }
 );
 ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react21.forwardRef)(
+var ModalContent = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname24.clsx)("hds-modal__content", className),
+        className: (0, import_typed_classname26.clsx)("hds-modal__content", className),
         ref
       }, rest)
     );
   }
 );
 ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react21.forwardRef)(
+var ModalFooter = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "footer", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname24.clsx)("hds-modal__footer", className),
+        className: (0, import_typed_classname26.clsx)("hds-modal__footer", className),
         ref
       }, rest)
     );
@@ -1225,7 +1421,7 @@ var ModalFooter = (0, import_react21.forwardRef)(
 );
 ModalFooter.displayName = "Modal.Footer";
 function useScrollLock(modalRef, bodyClass) {
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!modalRef.current)
       return;
     if (modalRef.current.open)
@@ -1255,17 +1451,17 @@ ModalComponent.Content = ModalContent;
 ModalComponent.Footer = ModalFooter;
 
 // src/navbar/navbar.tsx
-var import_react22 = require("react");
-var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Navbar = (0, import_react22.forwardRef)(
+var import_react24 = require("react");
+var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Navbar = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "header",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname25.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        className: (0, import_typed_classname27.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
       }, rest), {
         children
@@ -1274,22 +1470,22 @@ var Navbar = (0, import_react22.forwardRef)(
   }
 );
 Navbar.displayName = "Navbar";
-var NavbarLogo = (0, import_react22.forwardRef)(
+var NavbarLogo = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Component, __spreadValues({ className: (0, import_typed_classname25.clsx)("hds-navbar__logo", className), ref }, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Component, __spreadValues({ className: (0, import_typed_classname27.clsx)("hds-navbar__logo", className), ref }, rest));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
-var NavbarLogoAndServiceText = (0, import_react22.forwardRef)(
+var NavbarLogoAndServiceText = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
-    const Component = asChild ? import_react_slot.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    const Component = asChild ? import_react_slot3.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname25.clsx)(
+        className: (0, import_typed_classname27.clsx)(
           "hds-navbar__logo-and-service-text",
           `hds-navbar__logo-and-service-text--${variant}`,
           className
@@ -1301,10 +1497,10 @@ var NavbarLogoAndServiceText = (0, import_react22.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarButton = (0, import_react22.forwardRef)(
+var NavbarButton = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname25.clsx)("hds-navbar__button", className), ref }, rest), { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname27.clsx)("hds-navbar__button", className), ref }, rest), { children: [
       children,
       " ",
       icon
@@ -1312,12 +1508,12 @@ var NavbarButton = (0, import_react22.forwardRef)(
   }
 );
 NavbarButton.displayName = "Navbar.Button";
-var NavbarNavigation = (0, import_react22.forwardRef)((_a, ref) => {
+var NavbarNavigation = (0, import_react24.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Component,
     __spreadValues({
-      className: (0, import_typed_classname25.clsx)("hds-navbar__navigation", className),
+      className: (0, import_typed_classname27.clsx)("hds-navbar__navigation", className),
       ref
     }, rest)
   );
@@ -1325,15 +1521,15 @@ var NavbarNavigation = (0, import_react22.forwardRef)((_a, ref) => {
 NavbarNavigation.displayName = "Navbar.Navigation";
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_client = require("react-dom/client");
-var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
 
 // src/navbar/icons.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { "aria-hidden": true, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { "aria-hidden": true, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "path",
     {
       d: "M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z",
@@ -1342,7 +1538,7 @@ function CloseIcon() {
   ) });
 }
 function MenuIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { role: "img", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { role: "img", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "path",
     {
       d: "M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z",
@@ -1352,27 +1548,28 @@ function MenuIcon() {
 }
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var navbarContext = (0, import_react23.createContext)([
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var expandableMenuContext = (0, import_react25.createContext)([
   false,
   () => {
   }
 ]);
+var useNavbarExpendableMenuContext = () => (0, import_react25.useContext)(expandableMenuContext);
 function NavbarExpandableMenu({ children }) {
-  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [open, setOpen] = (0, import_react25.useState)(false);
   const toggleOpen = () => {
     const nextOpenState = !open;
     setOpen(nextOpenState);
     if (nextOpenState) {
       window.scrollTo(0, 0);
-      document.body.classList.add((0, import_typed_classname26.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.add((0, import_typed_classname28.clsx)("hds-navbar-scroll-lock"));
     } else {
-      document.body.classList.remove((0, import_typed_classname26.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.remove((0, import_typed_classname28.clsx)("hds-navbar-scroll-lock"));
     }
   };
-  const navbarElement = document.getElementsByClassName((0, import_typed_classname26.clsx)("hds-navbar"))[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(navbarContext.Provider, { value: [open, toggleOpen], children: [
-    open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
+  const navbarElement = document.getElementsByClassName((0, import_typed_classname28.clsx)("hds-navbar"))[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
+    open ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_focus_trap_react.default, { containerElements: [navbarElement] }) : null,
     children
   ] });
 }
@@ -1397,12 +1594,12 @@ function RenderButton(_a) {
     "toggleOpen",
     "width"
   ]);
-  const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuIcon, {});
+  const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuIcon, {});
   const style = width ? { width } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname26.clsx)("hds-navbar__button", className),
+      className: (0, import_typed_classname28.clsx)("hds-navbar__button", className),
       onClick: toggleOpen,
       ref: ref != null ? ref : innerRef,
       style,
@@ -1410,14 +1607,14 @@ function RenderButton(_a) {
       type: "button"
     }, rest), {
       children: [
-        text,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname28.clsx)("hds-navbar__button-responsive-text"), children: text }),
         " ",
         icon
       ]
     })
   );
 }
-var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
+var NavbarExpandableMenuTrigger = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -1432,9 +1629,9 @@ var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
       "whenOpenHelperTitle",
       "className"
     ]);
-    const [open, toggleOpen] = (0, import_react23.useContext)(navbarContext);
-    const [width, setWidth] = (0, import_react23.useState)(0);
-    const measureButtonRef = (0, import_react23.useRef)(null);
+    const [open, toggleOpen] = useNavbarExpendableMenuContext();
+    const [width, setWidth] = (0, import_react25.useState)(0);
+    const measureButtonRef = (0, import_react25.useRef)(null);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const measureButton = (element, callback) => {
@@ -1452,9 +1649,9 @@ var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
       };
       setTimeout(getWidth, 0);
     };
-    (0, import_react23.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       measureButton(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           RenderButton,
           __spreadValues({
             className: className ? className : "",
@@ -1465,7 +1662,7 @@ var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
         ),
         (closedWidth) => {
           measureButton(
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               RenderButton,
               __spreadValues({
                 className: className ? className : "",
@@ -1482,7 +1679,7 @@ var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
         }
       );
     }, [className, rest, title, whenClosedText, whenOpenText]);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RenderButton,
       __spreadValues({
         className: className ? className : "",
@@ -1497,16 +1694,17 @@ var NavbarExpandableMenuTrigger = (0, import_react23.forwardRef)(
   }
 );
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
-var NavbarExpandableMenuContent = (0, import_react23.forwardRef)((_a, ref) => {
+var NavbarExpandableMenuContent = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
-  const [open] = (0, import_react23.useContext)(navbarContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const [open] = useNavbarExpendableMenuContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname26.clsx)("hds-navbar__expandable-menu-content", className),
+      className: (0, import_typed_classname28.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed",
+      inert: open ? void 0 : "true",
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_typed_classname26.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: (0, import_typed_classname28.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
@@ -1524,15 +1722,15 @@ NavbarComponent.Button = NavbarButton;
 NavbarComponent.Navigation = NavbarNavigation;
 
 // src/utilities/auto-animate-height.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var animationDurationToValue = {
   quick: 100,
   normal: 300,
   slow: 700
 };
-var AutoAnimateHeight = (0, import_react24.forwardRef)(
+var AutoAnimateHeight = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -1547,13 +1745,13 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       "animationDuration",
       "animationEasing"
     ]);
-    const timeoutRef = (0, import_react24.useRef)(null);
-    const measurementRef = (0, import_react24.useRef)(null);
-    const [height, setHeight] = (0, import_react24.useState)(void 0);
-    const [clonedChildren, setClonedChildren] = (0, import_react24.useState)(
-      () => (0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {})
+    const timeoutRef = (0, import_react26.useRef)(null);
+    const measurementRef = (0, import_react26.useRef)(null);
+    const [height, setHeight] = (0, import_react26.useState)(void 0);
+    const [clonedChildren, setClonedChildren] = (0, import_react26.useState)(
+      () => (0, import_react26.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children }), {})
     );
-    (0, import_react24.useEffect)(() => {
+    (0, import_react26.useEffect)(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
         if (timeoutRef.current) {
@@ -1565,16 +1763,16 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
               setHeight(newHeight);
             });
             timeoutRef.current = setTimeout(() => {
-              setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
+              setClonedChildren((0, import_react26.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children }), {}));
             }, animationDurationToValue[animationDuration]);
           });
         } else {
           setHeight(newHeight);
-          setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
+          setClonedChildren((0, import_react26.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children }), {}));
         }
       }
     }, [children]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       Component,
       __spreadProps(__spreadValues({
         ref,
@@ -1588,7 +1786,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
         }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -1609,17 +1807,17 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
 AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/show-more/show-more.tsx
-var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
-var import_react25 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react25.forwardRef)(
+var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react27 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var ShowMoreButton = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname27.clsx)(
+        className: (0, import_typed_classname29.clsx)(
           "hds-show-more",
           variant === "show-more-show-less" && "hds-show-more--show-less",
           className
@@ -1629,7 +1827,7 @@ var ShowMoreButton = (0, import_react25.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -1638,16 +1836,16 @@ var ShowMoreButton = (0, import_react25.forwardRef)(
 ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
-var React11 = require("react");
-var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
-var import_react26 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Skeleton = (0, import_react26.forwardRef)(
+var React10 = require("react");
+var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
+var import_react28 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Skeleton = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
       children,
-      animation,
+      animation = true,
       variant = "text",
       width,
       height,
@@ -1663,10 +1861,10 @@ var Skeleton = (0, import_react26.forwardRef)(
       "className",
       "style"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname28.clsx)(
+        className: (0, import_typed_classname30.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
           !animation && `hds-skeleton--no-animation`,
@@ -1684,10 +1882,10 @@ var Skeleton = (0, import_react26.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
-var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
-var import_react27 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react27.forwardRef)(
+var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
+var import_react29 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -1706,27 +1904,27 @@ var StepIndicator = (0, import_react27.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname29.clsx)("hds-step-indicator", className),
+        className: (0, import_typed_classname31.clsx)("hds-step-indicator", className),
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_typed_classname31.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_typed_classname31.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "div",
             {
-              className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
+              className: (0, import_typed_classname31.clsx)("hds-step-indicator__step"),
               "data-state": getStepState(i + 1, activeStep)
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TitleComponent, { className: (0, import_typed_classname31.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -1750,16 +1948,16 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react28 = require("react");
-var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react28.forwardRef)(
+var import_react30 = require("react");
+var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname30.clsx)(
+        className: (0, import_typed_classname32.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
           darkmode && "hds-styled-html--darkmode",
@@ -1775,56 +1973,80 @@ var StyledHtml = (0, import_react28.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/tabs/tabs.tsx
-var import_react30 = require("react");
-var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
+var import_react32 = require("react");
+var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
-var import_react29 = require("react");
-var TabsContext = (0, import_react29.createContext)({
-  mounted: false,
-  activeTabId: void 0,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
-  toggleActiveTabId: (tabId) => {
+var import_react31 = require("react");
+var TabsContext = (0, import_react31.createContext)(null);
+function useTabsContext() {
+  const context = (0, import_react31.useContext)(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
+    );
   }
-});
+  return context;
+}
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Tabs = (0, import_react30.forwardRef)(
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Tabs = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react30.useState)(defaultTab);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      TabsContext.Provider,
-      {
-        value: { activeTabId, toggleActiveTabId: setActiveTabId, mounted: true },
-        children
-      }
-    ) }));
+    const [activeTabId, setActiveTabId] = (0, import_react32.useState)(defaultTab);
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
-var import_react31 = require("react");
-var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function TabsList(_a) {
   var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
-  const tabsListRef = (0, import_react31.useRef)(null);
+  const { activeTabId } = useTabsContext();
+  const tabsListRef = (0, import_react33.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
   const { innerWidth } = window;
   const wideEnough = innerWidth >= tabsWidth;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  const previousTabId = (0, import_react33.useRef)(activeTabId);
+  (0, import_react33.useEffect)(() => {
+    const tabList = tabsListRef.current;
+    const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
+    if (!activeTab || !tabList)
+      return;
+    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
+    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
+    const height = offsetHeight / containerHeight;
+    const width = offsetWidth / containerWidth;
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
+    tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
+    if (previousTabId.current !== activeTabId) {
+      tabsListRef.current.style.setProperty(
+        "--_hds-tabs-marker-animated-color",
+        "var(--_hds-tabs-marker-color)"
+      );
+      tabsListRef.current.style.setProperty(
+        "--_hds-tabs-marker-border-fallback-color",
+        "transparent"
+      );
+    }
+    previousTabId.current = activeTabId;
+  }, [activeTabId, innerWidth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname32.clsx)(
-        "hds-tabs--list",
+      className: (0, import_typed_classname34.clsx)(
+        "hds-tabs__list",
         direction === "horizontal" ? {
-          [`hds-tabs--list-horizontal`]: wideEnough,
-          "hds-tabs--list-vertical": !wideEnough
+          "hds-tabs__list--horizontal": wideEnough,
+          "hds-tabs__list--vertical": !wideEnough
         } : {
-          "hds-tabs--list-vertical": true
+          "hds-tabs__list--vertical": true
         },
         className
       ),
@@ -1836,24 +2058,21 @@ function TabsList(_a) {
   );
 }
 TabsList.displayName = "Tabs.List";
-var Tab = (0, import_react31.forwardRef)(
+var TabsTab = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
-    const context = (0, import_react31.useContext)(TabsContext);
-    if (!context.mounted) {
-      throw new Error("Context required. Did you use <TabContent/> outside of <Tabs/>?");
-    }
+    const context = useTabsContext();
     const toggleTab = (e) => {
       e.preventDefault();
       context.toggleActiveTabId(tabId);
       onClick && onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname32.clsx)(
-          "hds-tabs--tab",
-          { "hds-tabs--tab-active": context.activeTabId === tabId },
+        className: (0, import_typed_classname34.clsx)(
+          "hds-tabs__tab",
+          { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
         ),
         "data-tabid": tabId,
@@ -1866,26 +2085,23 @@ var Tab = (0, import_react31.forwardRef)(
     );
   }
 );
-Tab.displayName = "Tabs.Tab";
+TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
-var import_react32 = require("react");
-var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function TabsContents(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-tabs--contents") }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)("hds-tabs__contents") }, rest), { children }));
 }
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react32.forwardRef)(
+var TabsContent = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
-    const context = (0, import_react32.useContext)(TabsContext);
-    if (!context.mounted) {
-      throw new Error("Context required. Did you use <Tabs.Content /> outside of <Tabs/>?");
-    }
+    const context = useTabsContext();
     if (context.activeTabId === forTabId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -1895,14 +2111,14 @@ TabsContent.displayName = "Tabs.Content";
 // src/tabs/index.tsx
 var TabsComponent = Tabs;
 TabsComponent.List = TabsList;
-TabsComponent.Tab = Tab;
+TabsComponent.Tab = TabsTab;
 TabsComponent.Contents = TabsContents;
 TabsComponent.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react33 = require("react");
-var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -1918,7 +2134,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react33.forwardRef)(
+var Text = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as,
@@ -1937,10 +2153,10 @@ var Text = (0, import_react33.forwardRef)(
     ]);
     const Component = as != null ? as : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname34.clsx)(
+        className: (0, import_typed_classname36.clsx)(
           `hds-text-${variant}`,
           sizeModifier && `hds-text--${sizeModifier}`,
           spacing && "hds-text--spacing",
@@ -1956,7 +2172,7 @@ var Text = (0, import_react33.forwardRef)(
 Text.displayName = "Text";
 
 // src/text/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TextH1Display = textVariant("h1-display", "TextH1Display");
 var TextH1 = textVariant("h1", "TextH1");
 var TextH2 = textVariant("h2", "TextH2");
@@ -1987,28 +2203,28 @@ var variantToHtmlTag = {
 };
 function textVariant(variant, displayName) {
   function WrappedText(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
   }
   WrappedText.displayName = displayName;
   return WrappedText;
 }
 
 // src/warning-banner/warning-banner.tsx
-var import_react34 = require("react");
-var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react34.forwardRef)(
+var import_react36 = require("react");
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname35.clsx)("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(WarningBannerDescription, { children: description }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname37.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WarningBannerDescription, { children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react34.forwardRef)(
+var WarningBannerTitle = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant,
@@ -2021,12 +2237,12 @@ var WarningBannerTitle = (0, import_react34.forwardRef)(
       "children",
       "className"
     ]);
-    const [open, setOpen] = (0, import_react34.useState)(false);
+    const [open, setOpen] = (0, import_react36.useState)(false);
     if (variant === "expandable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         Component,
         __spreadProps(__spreadValues({
-          className: (0, import_typed_classname35.clsx)(
+          className: (0, import_typed_classname37.clsx)(
             "hds-warning-banner__title",
             "hds-warning-banner__title-trigger",
             { "hds-warning-banner--closed": !open },
@@ -2038,14 +2254,14 @@ var WarningBannerTitle = (0, import_react34.forwardRef)(
           ref,
           type: "button"
         }, rest), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children })
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname35.clsx)("hds-warning-banner__title", className),
+        className: (0, import_typed_classname37.clsx)("hds-warning-banner__title", className),
         ref
       }, rest), {
         children
@@ -2054,13 +2270,13 @@ var WarningBannerTitle = (0, import_react34.forwardRef)(
   }
 );
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react34.forwardRef)(
+var WarningBannerDescription = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname35.clsx)("hds-warning-banner__description", className),
+        className: (0, import_typed_classname37.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );
@@ -2081,6 +2297,8 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   DescriptionList,
   ErrorMessage,
   Fieldset,
+  Footer,
+  HStack,
   Input,
   Link,
   LinkList,
@@ -2095,9 +2313,14 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Select,
   ShowMoreButton,
   Skeleton,
+  Stack,
   StepIndicator,
   StyledHtml,
   Tabs,
+  TabsContent,
+  TabsContents,
+  TabsList,
+  TabsTab,
   Text,
   TextBody,
   TextBodySmall,
@@ -2114,8 +2337,12 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   TextTechnicalTitle,
   Textarea,
   UnorderedList,
+  VStack,
   WarningBadge,
   WarningBanner,
-  WhiteBadge
+  WhiteBadge,
+  useFieldsetContext,
+  useNavbarExpendableMenuContext,
+  useRadioGroupContext
 });
 //# sourceMappingURL=index.js.map