@postenbring/hedwig-react 0.0.76 → 0.0.78

package/dist/index.js

@@ -64,14 +64,18 @@ __export(src_exports, {
   AccordionHeader: () => AccordionHeader,
   AccordionItem: () => AccordionItem,
   AutoAnimateHeight: () => AutoAnimateHeight,
-  Badge: () => Badge,
+  Badge: () => LighterBadge,
   Box: () => BoxComponent,
   BoxCloseButton: () => BoxCloseButton,
   Breadcrumbs: () => Breadcrumbs,
   Card: () => CardComponent,
   CardBody: () => CardBody,
+  CardBodyAction: () => CardBodyAction,
+  CardBodyActionArrow: () => CardBodyActionArrow,
+  CardBodyDescription: () => CardBodyDescription,
   CardBodyHeader: () => CardBodyHeader,
   CardBodyHeaderOverline: () => CardBodyHeaderOverline,
+  CardBodyHeaderTitle: () => CardBodyHeaderTitle,
   CardMedia: () => CardMedia,
   CardMediaImg: () => CardMediaImg,
   Checkbox: () => Checkbox,
@@ -101,7 +105,13 @@ __export(src_exports, {
   ModalFooter: () => ModalFooter,
   ModalHeader: () => ModalHeader,
   Navbar: () => NavbarComponent,
-  NavbarButton: () => NavbarButton,
+  NavbarButtonItem: () => NavbarButtonItem,
+  NavbarExpandableMenu: () => NavbarExpandableMenu,
+  NavbarExpandableMenuContent: () => NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger: () => NavbarExpandableMenuTrigger,
+  NavbarItem: () => NavbarItem,
+  NavbarItemIcon: () => NavbarItemIcon,
+  NavbarLinkItem: () => NavbarLinkItem,
   NavbarLogo: () => NavbarLogo,
   NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
   NavbarNavigation: () => NavbarNavigation,
@@ -123,19 +133,6 @@ __export(src_exports, {
   TabsList: () => TabsList,
   TabsTab: () => TabsTab,
   Text: () => Text,
-  TextBody: () => TextBody,
-  TextBodySmall: () => TextBodySmall,
-  TextBodySmallTitle: () => TextBodySmallTitle,
-  TextBodyTitle: () => TextBodyTitle,
-  TextCaption: () => TextCaption,
-  TextCaptionTitle: () => TextCaptionTitle,
-  TextH1: () => TextH1,
-  TextH1Display: () => TextH1Display,
-  TextH2: () => TextH2,
-  TextH3: () => TextH3,
-  TextH3Title: () => TextH3Title,
-  TextTechnical: () => TextTechnical,
-  TextTechnicalTitle: () => TextTechnicalTitle,
   Textarea: () => Textarea,
   UnorderedList: () => UnorderedList,
   VStack: () => VStack,
@@ -155,9 +152,9 @@ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Accordion = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, className, indent = true } = _b, rest = __objRest(_b, ["as", "children", "className", "indent"]);
+    var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Component,
+      "div",
       __spreadProps(__spreadValues({}, rest), {
         className: (0, import_typed_classname.clsx)(
           "hds-accordion",
@@ -184,21 +181,7 @@ var AccordionItemContext = (0, import_react2.createContext)(null);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AccordionItem = (0, import_react3.forwardRef)(
   (_a, ref) => {
-    var _b = _a, {
-      as: Component = "div",
-      children,
-      defaultOpen,
-      open: outerOpen,
-      onOpenChange,
-      className
-    } = _b, rest = __objRest(_b, [
-      "as",
-      "children",
-      "defaultOpen",
-      "open",
-      "onOpenChange",
-      "className"
-    ]);
+    var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
     const [innerOpen, setInnerOpen] = (0, import_react3.useState)(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
@@ -209,7 +192,7 @@ var AccordionItem = (0, import_react3.forwardRef)(
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Component,
+      "div",
       __spreadProps(__spreadValues({}, rest), {
         "data-state": open ? "open" : "closed",
         className: (0, import_typed_classname2.clsx)("hds-accordion-item", className),
@@ -225,54 +208,58 @@ AccordionItem.displayName = "Accordion.Item";
 var import_react4 = require("react");
 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 context = (0, import_react4.useContext)(AccordionItemContext);
-  if (context === null) {
-    return null;
+var AccordionHeader = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, onClick } = _b, rest = __objRest(_b, ["children", "className", "onClick"]);
+    const context = (0, import_react4.useContext)(AccordionItemContext);
+    if (context === null) {
+      return null;
+    }
+    const expandOrCollapse = (e) => {
+      context.setOpen(!context.open);
+      onClick == null ? void 0 : onClick(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      __spreadProps(__spreadValues({}, rest), {
+        "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",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children })
+      })
+    );
   }
-  const expandOrCollapse = (e) => {
-    context.setOpen(!context.open);
-    onClick && onClick(e);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
-      "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",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children })
-    })
-  );
-});
+);
 AccordionHeader.displayName = "Accordion.Header";
 
 // src/accordion/accordion-content.tsx
 var import_react5 = require("react");
 var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var AccordionContent = (0, import_react5.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
-  const context = (0, import_react5.useContext)(AccordionItemContext);
-  if (context === null) {
-    return null;
+var AccordionContent = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    const context = (0, import_react5.useContext)(AccordionItemContext);
+    if (context === null) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        "aria-hidden": !context.open,
+        "data-state": context.open ? "open" : "closed"
+      }, { inert: context.open ? "true" : void 0 }), {
+        className: (0, import_typed_classname4.clsx)("hds-accordion-item-content", className),
+        ref
+      }), rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_typed_classname4.clsx)("hds-accordion-item-content-inner"), children })
+      })
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Component,
-    __spreadProps(__spreadValues({
-      "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), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_typed_classname4.clsx)("hds-accordion-item-content-inner"), children })
-    })
-  );
-});
+);
 AccordionContent.displayName = "Accordion.Content";
 
 // src/accordion/index.tsx
@@ -282,24 +269,17 @@ AccordionComponent.Header = AccordionHeader;
 AccordionComponent.Content = AccordionContent;
 
 // src/badge/badge.tsx
-var React = require("react");
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function BaseBadge(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "small",
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "className"
-  ]);
+var Badge = (0, import_react6.forwardRef)((_a, ref) => {
+  var _b = _a, { children, asChild, variant, size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
+  const Component = asChild ? import_react_slot.Slot : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "span",
+    Component,
     __spreadProps(__spreadValues({
+      ref,
       className: (0, import_typed_classname5.clsx)(
         "hds-badge",
         `hds-badge--${size}`,
@@ -310,33 +290,34 @@ function BaseBadge(_a) {
       children
     })
   );
-}
-BaseBadge.displayName = "BaseBadge";
-function Badge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "lighter" }));
-}
+});
 Badge.displayName = "Badge";
-function DarkBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "dark" }));
-}
+var LighterBadge = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "lighter" }));
+});
+LighterBadge.displayName = "LighterBadge";
+var DarkBadge = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "dark" }));
+});
 DarkBadge.displayName = "DarkBadge";
-function WhiteBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "white" }));
-}
+var WhiteBadge = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "white" }));
+});
 WhiteBadge.displayName = "WhiteBadge";
-function WarningBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "warning" }));
-}
+var WarningBadge = (0, import_react6.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "warning" }));
+});
 WarningBadge.displayName = "WarningBadge";
 
 // src/box/box.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot2 = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Box = (0, import_react6.forwardRef)(
+var Box = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      asChild,
       variant,
       closeable = false,
       onClose: onCloseProp,
@@ -345,7 +326,7 @@ var Box = (0, import_react6.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "variant",
       "closeable",
       "onClose",
@@ -354,8 +335,8 @@ var Box = (0, import_react6.forwardRef)(
       "children",
       "className"
     ]);
-    const [closedState, setClosedState] = (0, import_react6.useState)(false);
-    const onClose = (0, import_react6.useCallback)(() => {
+    const [closedState, setClosedState] = (0, import_react7.useState)(false);
+    const onClose = (0, import_react7.useCallback)(() => {
       if (onCloseProp) {
         const result = onCloseProp();
         if (result === true) {
@@ -366,6 +347,7 @@ var Box = (0, import_react6.forwardRef)(
       }
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
+    const Component = asChild ? import_react_slot2.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Component,
       __spreadProps(__spreadValues({
@@ -379,14 +361,14 @@ var Box = (0, import_react6.forwardRef)(
       }, rest), {
         children: [
           closeable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot2.Slottable, { children })
         ]
       })
     );
   }
 );
 Box.displayName = "Box";
-var BoxCloseButton = (0, import_react6.forwardRef)(
+var BoxCloseButton = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -406,10 +388,10 @@ var BoxComponent = Box;
 BoxComponent.CloseButton = BoxCloseButton;
 
 // src/breadcrumbs/breadcrumbs.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react7.forwardRef)(
+var Breadcrumbs = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname7.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
@@ -418,13 +400,14 @@ var Breadcrumbs = (0, import_react7.forwardRef)(
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/button/button.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var BaseButton = (0, import_react8.forwardRef)(
+var Button = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "button",
+      asChild,
       children,
       variant,
       size = "medium",
@@ -433,7 +416,7 @@ var BaseButton = (0, import_react8.forwardRef)(
       icon,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "children",
       "variant",
       "size",
@@ -442,7 +425,8 @@ var BaseButton = (0, import_react8.forwardRef)(
       "icon",
       "className"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    const Component = asChild ? import_react_slot3.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname8.clsx)(
@@ -453,53 +437,50 @@ var BaseButton = (0, import_react8.forwardRef)(
             [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
-            "hds-button--icon-only": icon && !children
+            "hds-button--icon-only": icon
           },
           className
         ),
         ref
       }, rest), {
-        children: [
-          icon && !children ? icon : null,
-          children
-        ]
+        children
       })
     );
   }
 );
-BaseButton.displayName = "BaseButton";
-var PrimaryButton = (0, import_react8.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
-  }
-);
+Button.displayName = "Button";
+var PrimaryButton = (0, import_react9.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
+});
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = (0, import_react8.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
-  }
-);
+var SecondaryButton = (0, import_react9.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+});
 SecondaryButton.displayName = "SecondaryButton";
 
 // src/card/card.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Card = (0, import_react9.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "section", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+var Card = (0, import_react10.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
+  const Component = asChild ? import_react_slot4.Slot : Tag;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card", className), ref, children }));
 });
 Card.displayName = "Card";
-var CardMedia = (0, import_react9.forwardRef)(
+var CardMedia = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card__media", className), ref, children }));
   }
 );
 CardMedia.displayName = "Card.Media";
-var CardMediaImg = (0, import_react9.forwardRef)(
+var CardMediaImg = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "img", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot4.Slot : "img";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
@@ -509,16 +490,18 @@ var CardMediaImg = (0, import_react9.forwardRef)(
     );
   }
 );
-CardMediaImg.displayName = "Card.Media.Img";
-var CardBody = (0, import_react9.forwardRef)(
+CardMediaImg.displayName = "Card.MediaImg";
+var CardBody = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card__body", className), ref, children }));
   }
 );
 CardBody.displayName = "Card.Body";
-var CardBodyHeader = (0, import_react9.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component, className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+var CardBodyHeader = (0, import_react10.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Tag, asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
+  const Component = asChild ? import_react_slot4.Slot : Tag;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
@@ -528,34 +511,41 @@ var CardBodyHeader = (0, import_react9.forwardRef)((_a, ref) => {
     })
   );
 });
-CardBodyHeader.displayName = "Card.Body.Header";
-var CardBodyHeaderOverline = (0, import_react9.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "span", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname9.clsx)("hds-card__body-header-overline", className),
-      ref,
-      children
-    })
-  );
-});
-CardBodyHeaderOverline.displayName = "Card.Body.Header.Overline";
-var CardBodyHeaderTitle = (0, import_react9.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component, className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname9.clsx)("hds-card__body-header-title", className),
-      ref,
-      children
-    })
-  );
-});
-CardBodyHeaderTitle.displayName = "Card.Body.Header.Title";
-var CardBodyDescription = (0, import_react9.forwardRef)(
+CardBodyHeader.displayName = "Card.BodyHeader";
+var CardBodyHeaderOverline = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "span";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname9.clsx)("hds-card__body-header-overline", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
+var CardBodyHeaderTitle = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname9.clsx)("hds-card__body-header-title", className),
+        ref,
+        children
+      })
+    );
+  }
+);
+CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
+var CardBodyDescription = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "p";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
@@ -566,10 +556,11 @@ var CardBodyDescription = (0, import_react9.forwardRef)(
     );
   }
 );
-CardBodyDescription.displayName = "Card.Body.Description";
-var CardBodyAction = (0, import_react9.forwardRef)(
+CardBodyDescription.displayName = "Card.BodyDescription";
+var CardBodyAction = (0, import_react10.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
+    var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
+    const Component = asChild ? import_react_slot4.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
@@ -580,40 +571,39 @@ var CardBodyAction = (0, import_react9.forwardRef)(
     );
   }
 );
-CardBodyAction.displayName = "Card.Body.Action";
-var CardBodyActionArrow = (0, import_react9.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "span", className } = _b, rest = __objRest(_b, ["as", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname9.clsx)("hds-card__body-action-arrow", className),
-      ref
-    })
-  );
-});
-CardBodyActionArrow.displayName = "Card.Body.Action.Arrow";
+CardBodyAction.displayName = "Card.BodyAction";
+var CardBodyActionArrow = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot4.Slot : "span";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname9.clsx)("hds-card__body-action-arrow", className),
+        ref
+      })
+    );
+  }
+);
+CardBodyActionArrow.displayName = "Card.BodyActionArrow";
 
 // src/card/index.tsx
-var CardMediaComponent = CardMedia;
-CardMediaComponent.Img = CardMediaImg;
-var CardBodyHeaderComponent = CardBodyHeader;
-CardBodyHeaderComponent.Overline = CardBodyHeaderOverline;
-CardBodyHeaderComponent.Title = CardBodyHeaderTitle;
-var CardBodyActionComponent = CardBodyAction;
-CardBodyActionComponent.Arrow = CardBodyActionArrow;
-var CardBodyComponent = CardBody;
-CardBodyComponent.Header = CardBodyHeaderComponent;
-CardBodyComponent.Description = CardBodyDescription;
-CardBodyComponent.Action = CardBodyActionComponent;
 var CardComponent = Card;
-CardComponent.Media = CardMediaComponent;
-CardComponent.Body = CardBodyComponent;
+CardComponent.Media = CardMedia;
+CardComponent.MediaImg = CardMediaImg;
+CardComponent.Body = CardBody;
+CardComponent.BodyHeader = CardBodyHeader;
+CardComponent.BodyHeaderOverline = CardBodyHeaderOverline;
+CardComponent.BodyHeaderTitle = CardBodyHeaderTitle;
+CardComponent.BodyDescription = CardBodyDescription;
+CardComponent.BodyAction = CardBodyAction;
+CardComponent.BodyActionArrow = CardBodyActionArrow;
 
 // src/description-list/description-list.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var DescriptionList = (0, import_react10.forwardRef)(
+var DescriptionList = (0, import_react11.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant = "vertical", className } = _b, rest = __objRest(_b, ["variant", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -634,31 +624,37 @@ var DescriptionList = (0, import_react10.forwardRef)(
 DescriptionList.displayName = "DescriptionList";
 
 // src/form/checkbox/checkbox.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/error-message/error-message.tsx
 var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function ErrorMessage({ children, id, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "div",
-    {
-      "aria-live": "assertive",
-      className: (0, import_typed_classname11.clsx)("hds-error-message", className),
-      id,
-      children
-    }
-  );
-}
+var ErrorMessage = (0, import_react12.forwardRef)(
+  (_a) => {
+    var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        "aria-live": "assertive",
+        className: (0, import_typed_classname11.clsx)("hds-error-message", className),
+        id
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+ErrorMessage.displayName = "ErrorMessage";
 
 // src/form/fieldset/fieldset.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldsetContext = (0, import_react11.createContext)({ hasError: false });
-var useFieldsetContext = () => (0, import_react11.useContext)(FieldsetContext);
-var Fieldset = (0, import_react11.forwardRef)(function Fieldset2(_a, ref) {
+var FieldsetContext = (0, import_react13.createContext)({ hasError: false });
+var useFieldsetContext = () => (0, import_react13.useContext)(FieldsetContext);
+var Fieldset = (0, import_react13.forwardRef)(function Fieldset2(_a, ref) {
   var _b = _a, {
     className,
     style,
@@ -675,7 +671,7 @@ var Fieldset = (0, import_react11.forwardRef)(function Fieldset2(_a, ref) {
     "legend",
     "children"
   ]);
-  const errorMessageId = (0, import_react11.useId)();
+  const errorMessageId = (0, import_react13.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "fieldset",
     __spreadProps(__spreadValues({
@@ -707,7 +703,7 @@ var Fieldset = (0, import_react11.forwardRef)(function Fieldset2(_a, ref) {
 
 // src/form/checkbox/checkbox.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = (0, import_react12.forwardRef)(
+var Checkbox = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "plain",
@@ -724,7 +720,7 @@ var Checkbox = (0, import_react12.forwardRef)(
       "children",
       "className"
     ]);
-    const errorMessageId = (0, import_react12.useId)();
+    const errorMessageId = (0, import_react14.useId)();
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_typed_classname13.clsx)("hds-checkbox-wrapper"), children: [
@@ -764,14 +760,14 @@ var Checkbox = (0, import_react12.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/form/date-picker/date-picker.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/input-group/input-group.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputGroup = (0, import_react13.forwardRef)(function InputGroup2(_a, ref) {
+var InputGroup = (0, import_react15.forwardRef)(function InputGroup2(_a, ref) {
   var _b = _a, {
     id,
     className,
@@ -796,8 +792,8 @@ var InputGroup = (0, import_react13.forwardRef)(function InputGroup2(_a, ref) {
     "readOnly",
     "children"
   ]);
-  const errorMessageId = (0, import_react13.useId)();
-  const inputId = (0, import_react13.useId)();
+  const errorMessageId = (0, import_react15.useId)();
+  const inputId = (0, import_react15.useId)();
   const renderInput = () => {
     var _a2;
     const inputProps = {
@@ -809,11 +805,11 @@ var InputGroup = (0, import_react13.forwardRef)(function InputGroup2(_a, ref) {
     if (typeof children === "function") {
       return children(inputProps);
     }
-    const input = import_react13.Children.toArray(children)[0];
-    if (!(0, import_react13.isValidElement)(input)) {
+    const input = import_react15.Children.toArray(children)[0];
+    if (!(0, import_react15.isValidElement)(input)) {
       return;
     }
-    return (0, import_react13.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
+    return (0, import_react15.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
       className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
     }));
   };
@@ -857,10 +853,10 @@ var InputGroup = (0, import_react13.forwardRef)(function InputGroup2(_a, ref) {
 });
 
 // src/utils.ts
-var React2 = __toESM(require("react"));
-var import_react14 = require("react");
+var React = __toESM(require("react"));
+var import_react16 = require("react");
 function useMergeRefs(refs) {
-  return React2.useMemo(() => {
+  return React.useMemo(() => {
     if (refs.every((ref) => ref === null)) {
       return null;
     }
@@ -876,16 +872,16 @@ function useMergeRefs(refs) {
   }, refs);
 }
 function useResize(ref) {
-  const [width, setWidth] = (0, import_react14.useState)(0);
-  const [height, setHeight] = (0, import_react14.useState)(0);
-  const handleResize = (0, import_react14.useCallback)(() => {
+  const [width, setWidth] = (0, import_react16.useState)(0);
+  const [height, setHeight] = (0, import_react16.useState)(0);
+  const handleResize = (0, import_react16.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_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     window.addEventListener("load", handleResize);
     window.addEventListener("resize", handleResize);
     return () => {
@@ -893,7 +889,7 @@ function useResize(ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [ref, handleResize]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     handleResize();
   }, []);
   return { width, height };
@@ -903,7 +899,7 @@ function subscribe() {
   };
 }
 function useHydrated() {
-  return React2.useSyncExternalStore(
+  return React.useSyncExternalStore(
     subscribe,
     () => true,
     () => false
@@ -942,7 +938,7 @@ function releaseFocusTrap(inertElements) {
 
 // src/form/date-picker/date-picker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DatePicker = (0, import_react15.forwardRef)(function DatePicker2(_a, ref) {
+var DatePicker = (0, import_react17.forwardRef)(function DatePicker2(_a, ref) {
   var _b = _a, {
     className,
     variant,
@@ -966,7 +962,7 @@ var DatePicker = (0, import_react15.forwardRef)(function DatePicker2(_a, ref) {
     "readOnly",
     "calendarButtonTitle"
   ]);
-  const inputRef = (0, import_react15.useRef)(null);
+  const inputRef = (0, import_react17.useRef)(null);
   const mergedRef = useMergeRefs([inputRef, ref]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     InputGroup,
@@ -1009,10 +1005,10 @@ var DatePicker = (0, import_react15.forwardRef)(function DatePicker2(_a, ref) {
 DatePicker.displayName = "DatePicker";
 
 // src/form/input/input.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Input = (0, import_react16.forwardRef)(function Input2(_a, ref) {
+var Input = (0, import_react18.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_runtime16.jsx)(
     InputGroup,
@@ -1033,20 +1029,20 @@ var Input = (0, import_react16.forwardRef)(function Input2(_a, ref) {
 Input.displayName = "Input";
 
 // src/form/radiobutton/radiobutton.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radiobutton/radiogroup.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react17.createContext)({
+var RadioGroupContext = (0, import_react19.createContext)({
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react17.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react17.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react19.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react19.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_runtime17.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
@@ -1065,7 +1061,7 @@ var isChecked = ({
     return value === selectedValue;
   return void 0;
 };
-var Radiobutton = (0, import_react18.forwardRef)(
+var Radiobutton = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -1127,10 +1123,10 @@ var Radiobutton = (0, import_react18.forwardRef)(
 Radiobutton.displayName = "Radiobutton";
 
 // src/form/select/select.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Select = (0, import_react19.forwardRef)(function Select2(_a, ref) {
+var Select = (0, import_react21.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_runtime19.jsx)(
     InputGroup,
@@ -1150,10 +1146,10 @@ var Select = (0, import_react19.forwardRef)(function Select2(_a, ref) {
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Textarea = (0, import_react20.forwardRef)(function Textarea2(_a, ref) {
+var Textarea = (0, import_react22.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_runtime20.jsx)(
     InputGroup,
@@ -1174,56 +1170,67 @@ var Textarea = (0, import_react20.forwardRef)(function Textarea2(_a, ref) {
 Textarea.displayName = "Textarea";
 
 // src/footer/footer.tsx
-var import_react21 = require("react");
+var import_react25 = require("react");
 var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot = require("@radix-ui/react-slot");
+var import_react_slot5 = require("@radix-ui/react-slot");
 
 // src/list/link-list.tsx
-var React4 = require("react");
 var import_typed_classname21 = require("@postenbring/hedwig-css/typed-classname");
+var import_react24 = require("react");
 
 // src/list/list.tsx
-var React3 = require("react");
+var import_react23 = require("react");
 var import_typed_classname20 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime21 = 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_runtime21.jsx)(ListTag, __spreadProps(__spreadValues({ className: (0, import_typed_classname20.clsx)("hds-list", `hds-list--${size}`, className) }, rest), { children }));
-}
-function UnorderedList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
-}
-function OrderedList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ol" }, props), { children: props.children }));
-}
-BaseList.displayName = "BaseList";
-OrderedList.displayName = "OrderedList";
+var UnorderedList = (0, import_react23.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "ul",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname20.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
 UnorderedList.displayName = "UnorderedList";
+var OrderedList = (0, import_react23.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "ol",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname20.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+OrderedList.displayName = "OrderedList";
 
 // src/list/link-list.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function LinkList(_a) {
-  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UnorderedList, __spreadValues({ className: (0, import_typed_classname21.clsx)("hds-list--link-list", className) }, rest));
-}
+var LinkList = (0, import_react24.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      UnorderedList,
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname21.clsx)("hds-list--link-list", className)
+      }, rest)
+    );
+  }
+);
 LinkList.displayName = "LinkList";
 
 // src/footer/footer.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Footer = (0, import_react21.forwardRef)(
+var Footer = (0, import_react25.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";
+    const Component = asChild ? import_react_slot5.Slot : "footer";
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Component,
       __spreadProps(__spreadValues({
@@ -1240,36 +1247,23 @@ var Footer = (0, import_react21.forwardRef)(
   }
 );
 Footer.displayName = "Footer";
-var FooterButtonLink = (0, import_react21.forwardRef)(
+var FooterLogo = (0, import_react25.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_runtime23.jsx)(
-        PrimaryButton,
-        __spreadProps(__spreadValues({
-          as: Component,
-          fill: "outline",
-          className: (0, import_typed_classname22.clsx)(className),
-          ref
-        }, rest), {
-          children
-        })
-      )
-    );
+    const Component = asChild ? import_react_slot5.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname22.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
   }
 );
-FooterButtonLink.displayName = "FooterButton";
-var FooterLogo = (0, import_react21.forwardRef)(
+FooterLogo.displayName = "Footer.Logo";
+var FooterButtonLink = (0, import_react25.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_runtime23.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname22.clsx)(`hds-footer__logo`, className), ref }, rest), { children }));
+    const Component = asChild ? import_react_slot5.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PrimaryButton, { asChild: true, fill: "outline", className: (0, import_typed_classname22.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
-FooterLogo.displayName = "Footer.Logo";
-var FooterLinkSections = (0, import_react21.forwardRef)(
+FooterButtonLink.displayName = "FooterButton";
+var FooterLinkSections = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -1284,7 +1278,7 @@ var FooterLinkSections = (0, import_react21.forwardRef)(
   }
 );
 FooterLinkSections.displayName = "Footer.LinkSections";
-var FooterLinkSection = (0, import_react21.forwardRef)(
+var FooterLinkSection = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
     const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LinkList, { children });
@@ -1320,9 +1314,9 @@ FooterComponent.LinkSection = FooterLinkSection;
 // src/help-text/help-text.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
 var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
-var import_react22 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var HelpText = (0, import_react22.forwardRef)(
+var HelpText = (0, import_react26.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 (
@@ -1360,11 +1354,13 @@ HelpText.displayName = "HelpText";
 
 // src/layout/container/container.tsx
 var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
-var import_react23 = require("react");
+var import_react_slot6 = require("@radix-ui/react-slot");
+var import_react27 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Container = (0, import_react23.forwardRef)(
+var Container = (0, import_react27.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className, children, variant } = _b, rest = __objRest(_b, ["as", "className", "children", "variant"]);
+    var _b = _a, { as: Tag = "div", asChild, className, children, variant } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant"]);
+    const Component = asChild ? import_react_slot6.Slot : Tag;
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
@@ -1383,8 +1379,8 @@ Container.displayName = "Container";
 
 // src/layout/grid/grid.tsx
 var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react24 = require("react");
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_react28 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -1407,10 +1403,10 @@ function getSpacingVariable(size) {
 
 // src/layout/grid/grid.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Grid = (0, import_react24.forwardRef)(
+var Grid = (0, import_react28.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_slot2.Slot : "div";
+    const Component = asChild ? import_react_slot7.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_runtime26.jsx)(
       Component,
@@ -1425,10 +1421,10 @@ var Grid = (0, import_react24.forwardRef)(
   }
 );
 Grid.displayName = "Grid";
-var GridItem = (0, import_react24.forwardRef)(
+var GridItem = (0, import_react28.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_slot2.Slot : "div";
+    const Component = asChild ? import_react_slot7.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_runtime26.jsx)(
       Component,
@@ -1449,12 +1445,12 @@ var GridComponent = Grid;
 GridComponent.Item = GridItem;
 
 // src/layout/stack/stack.tsx
-var React5 = require("react");
+var React2 = require("react");
 var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
-var import_react25 = require("react");
-var import_react_slot3 = require("@radix-ui/react-slot");
+var import_react29 = require("react");
+var import_react_slot8 = require("@radix-ui/react-slot");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Stack = (0, import_react25.forwardRef)(
+var Stack = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1481,7 +1477,7 @@ var Stack = (0, import_react25.forwardRef)(
       "align",
       "justify"
     ]);
-    const Component = asChild ? import_react_slot3.Slot : "div";
+    const Component = asChild ? import_react_slot8.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_runtime27.jsx)(
       Component,
@@ -1496,23 +1492,25 @@ var Stack = (0, import_react25.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react25.forwardRef)((props, ref) => {
+var HStack = (0, import_react29.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react25.forwardRef)((props, ref) => {
+var VStack = (0, import_react29.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 
 // src/link/link.tsx
-var React6 = require("react");
+var React3 = require("react");
 var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
-var import_react26 = require("react");
+var import_react30 = require("react");
+var import_react_slot9 = require("@radix-ui/react-slot");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Link = (0, import_react26.forwardRef)(
+var Link = (0, import_react30.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
+    var _b = _a, { asChild, children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "className"]);
+    const Component = asChild ? import_react_slot9.Slot : "a";
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Component,
       __spreadProps(__spreadValues({
@@ -1532,10 +1530,11 @@ var Link = (0, import_react26.forwardRef)(
 Link.displayName = "Link";
 
 // src/message/message.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot10 = require("@radix-ui/react-slot");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Message = (0, import_react27.forwardRef)(
+var Message = (0, import_react31.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_runtime29.jsxs)(
@@ -1553,9 +1552,10 @@ var Message = (0, import_react27.forwardRef)(
   }
 );
 Message.displayName = "Message";
-var MessageTitle = (0, import_react27.forwardRef)(
+var MessageTitle = (0, import_react31.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot10.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Component,
       __spreadValues({
@@ -1566,9 +1566,10 @@ var MessageTitle = (0, import_react27.forwardRef)(
   }
 );
 MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react27.forwardRef)(
+var MessageDescription = (0, import_react31.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot10.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Component,
       __spreadValues({
@@ -1586,13 +1587,14 @@ MessageComponent.Title = MessageTitle;
 MessageComponent.Description = MessageDescription;
 
 // src/modal/modal.tsx
-var import_react28 = require("react");
+var import_react32 = require("react");
 var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot11 = require("@radix-ui/react-slot");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Modal = (0, import_react28.forwardRef)(
+var Modal = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = (0, import_react28.useRef)(null);
+    const modalRef = (0, import_react32.useRef)(null);
     const mergedRef = useMergeRefs([modalRef, ref]);
     function onCloseButtonClick() {
       var _a2;
@@ -1600,7 +1602,7 @@ var Modal = (0, import_react28.forwardRef)(
       return false;
     }
     useScrollLock(modalRef, "hds-modal-scroll-lock");
-    (0, import_react28.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       if (modalRef.current && open !== void 0) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
@@ -1617,24 +1619,23 @@ var Modal = (0, import_react28.forwardRef)(
     }
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Box,
-      __spreadProps(__spreadValues({
-        as: "dialog",
+      {
+        asChild: true,
         className: (0, import_typed_classname29.clsx)("hds-modal", className),
         closeable: true,
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
-        ref: mergedRef,
-        variant: "white"
-      }, rest), {
-        children
-      })
+        variant: "white",
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
+      }
     );
   }
 );
 Modal.displayName = "Modal";
-var ModalHeader = (0, import_react28.forwardRef)(
+var ModalHeader = (0, import_react32.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "h1", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot11.Slot : "h1";
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
@@ -1645,9 +1646,10 @@ var ModalHeader = (0, import_react28.forwardRef)(
   }
 );
 ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react28.forwardRef)(
+var ModalContent = (0, import_react32.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot11.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
@@ -1658,9 +1660,10 @@ var ModalContent = (0, import_react28.forwardRef)(
   }
 );
 ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react28.forwardRef)(
+var ModalFooter = (0, import_react32.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "footer", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot11.Slot : "footer";
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
@@ -1672,7 +1675,7 @@ var ModalFooter = (0, import_react28.forwardRef)(
 );
 ModalFooter.displayName = "Modal.Footer";
 function useScrollLock(modalRef, bodyClass) {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!modalRef.current)
       return;
     if (modalRef.current.open)
@@ -1702,15 +1705,16 @@ ModalComponent.Content = ModalContent;
 ModalComponent.Footer = ModalFooter;
 
 // src/navbar/navbar.tsx
-var import_react29 = require("react");
+var import_react33 = require("react");
 var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot4 = require("@radix-ui/react-slot");
+var import_react_slot12 = require("@radix-ui/react-slot");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Navbar = (0, import_react29.forwardRef)(
+var Navbar = (0, import_react33.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
+    const Component = asChild ? import_react_slot12.Slot : "header";
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "header",
+      Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname30.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
@@ -1721,17 +1725,18 @@ var Navbar = (0, import_react29.forwardRef)(
   }
 );
 Navbar.displayName = "Navbar";
-var NavbarLogo = (0, import_react29.forwardRef)(
+var NavbarLogo = (0, import_react33.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__logo", className), ref }, rest));
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? import_react_slot12.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
-var NavbarLogoAndServiceText = (0, import_react29.forwardRef)(
+var NavbarLogoAndServiceText = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
-    const Component = asChild ? import_react_slot4.Slot : "div";
+    const Component = asChild ? import_react_slot12.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       __spreadProps(__spreadValues({
@@ -1748,31 +1753,63 @@ var NavbarLogoAndServiceText = (0, import_react29.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarButton = (0, import_react29.forwardRef)(
+var NavbarItemIcon = (0, import_react33.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_runtime31.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__button", className), ref }, rest), { children: [
-      children,
-      " ",
-      icon
-    ] }));
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_slot12.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
+  }
+);
+NavbarItemIcon.displayName = "Navbar.ItemIcon";
+var NavbarItem = (0, import_react33.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot12.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarItem.displayName = "Navbar.Item";
+var NavbarButtonItem = (0, import_react33.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot12.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname30.clsx)("hds-navbar__item", className),
+        ref,
+        type: "button"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarButtonItem.displayName = "Navbar.ButtonItem";
+var NavbarLinkItem = (0, import_react33.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? import_react_slot12.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarLinkItem.displayName = "Navbar.LinkItem";
+var NavbarNavigation = (0, import_react33.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot12.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname30.clsx)("hds-navbar__navigation", className),
+        ref
+      }, rest)
+    );
   }
 );
-NavbarButton.displayName = "Navbar.Button";
-var NavbarNavigation = (0, import_react29.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    Component,
-    __spreadValues({
-      className: (0, import_typed_classname30.clsx)("hds-navbar__navigation", className),
-      ref
-    }, rest)
-  );
-});
 NavbarNavigation.displayName = "Navbar.Navigation";
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 var import_client = require("react-dom/client");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 
@@ -1799,18 +1836,18 @@ function MenuIcon() {
 
 // src/navbar/navbar-expandable-menu.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var expandableMenuContext = (0, import_react30.createContext)([
+var expandableMenuContext = (0, import_react34.createContext)([
   false,
   () => {
   }
 ]);
-var useNavbarExpendableMenuContext = () => (0, import_react30.useContext)(expandableMenuContext);
+var useNavbarExpendableMenuContext = () => (0, import_react34.useContext)(expandableMenuContext);
 function NavbarExpandableMenu({ children }) {
-  const [open, setOpen] = (0, import_react30.useState)(false);
+  const [open, setOpen] = (0, import_react34.useState)(false);
   function toggleOpen() {
     setOpen((prev) => !prev);
   }
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
       document.body.classList.add((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
@@ -1826,47 +1863,32 @@ function NavbarExpandableMenu({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-function RenderButton(_a) {
-  var _b = _a, {
-    className,
-    innerRef,
-    open = false,
-    ref,
-    text,
-    title,
-    toggleOpen,
-    width
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "innerRef",
-    "open",
-    "ref",
-    "text",
-    "title",
-    "toggleOpen",
-    "width"
-  ]);
-  const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
-  const style = width ? { width } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_typed_classname31.clsx)("hds-navbar__button", className),
-      onClick: toggleOpen,
-      ref: ref != null ? ref : innerRef,
-      style,
-      title,
-      type: "button"
-    }, rest), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-navbar__button-responsive-text"), children: text }),
-        " ",
-        icon
-      ]
-    })
-  );
-}
-var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
+var RenderButton = (0, import_react34.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className, innerRef, open = false, text, title, toggleOpen, width } = _b, rest = __objRest(_b, ["className", "innerRef", "open", "text", "title", "toggleOpen", "width"]);
+    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
+    const style = width ? { width } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname31.clsx)("hds-navbar__item", className),
+        onClick: toggleOpen,
+        ref: ref != null ? ref : innerRef,
+        style,
+        title,
+        type: "button"
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-navbar__item-responsive-text"), children: text }),
+          " ",
+          icon
+        ]
+      })
+    );
+  }
+);
+RenderButton.displayName = "Navbar.RenderButton";
+var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -1882,8 +1904,8 @@ var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
       "className"
     ]);
     const [open, toggleOpen] = useNavbarExpendableMenuContext();
-    const [width, setWidth] = (0, import_react30.useState)(0);
-    const measureButtonRef = (0, import_react30.useRef)(null);
+    const [width, setWidth] = (0, import_react34.useState)(0);
+    const measureButtonRef = (0, import_react34.useRef)(null);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const measureButton = (element, callback) => {
@@ -1901,12 +1923,12 @@ var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
       };
       setTimeout(getWidth, 0);
     };
-    (0, import_react30.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       measureButton(
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RenderButton,
           __spreadValues({
-            className: className ? className : "",
+            className,
             innerRef: measureButtonRef,
             text: whenClosedText,
             title
@@ -1917,7 +1939,7 @@ var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               RenderButton,
               __spreadValues({
-                className: className ? className : "",
+                className,
                 innerRef: measureButtonRef,
                 open: true,
                 text: whenOpenText,
@@ -1934,7 +1956,7 @@ var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       RenderButton,
       __spreadValues({
-        className: className ? className : "",
+        className,
         open,
         ref,
         text,
@@ -1945,48 +1967,48 @@ var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
     );
   }
 );
-NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
-var NavbarExpandableMenuContent = (0, import_react30.forwardRef)((_a, ref) => {
-  var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
+var NavbarExpandableMenuContent = (0, import_react34.forwardRef)((_a, ref) => {
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const [open] = useNavbarExpendableMenuContext();
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
+    "section",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content", className),
-      "data-state": open ? "open" : "closed",
-      inert: open ? void 0 : "true",
+      "data-state": open ? "open" : "closed"
+    }), { inert: open ? "true" : void 0 }), {
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
-NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenu.Content";
+NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 
 // src/navbar/index.tsx
-var NavbarExpandableMenuComponent = NavbarExpandableMenu;
-NavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;
-NavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;
 var NavbarComponent = Navbar;
 NavbarComponent.Logo = NavbarLogo;
 NavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;
-NavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;
-NavbarComponent.Button = NavbarButton;
+NavbarComponent.ExpandableMenu = NavbarExpandableMenu;
+NavbarComponent.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
+NavbarComponent.ExpandableMenuContent = NavbarExpandableMenuContent;
+NavbarComponent.Item = NavbarItem;
+NavbarComponent.ButtonItem = NavbarButtonItem;
+NavbarComponent.LinkItem = NavbarLinkItem;
+NavbarComponent.ItemIcon = NavbarItemIcon;
 NavbarComponent.Navigation = NavbarNavigation;
 
 // src/utilities/auto-animate-height.tsx
-var import_react31 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var AutoAnimateHeight = (0, import_react31.forwardRef)(
+var AutoAnimateHeight = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
       children,
       style,
       animationDuration = "quick",
       animationEasing = "normal",
       onTransitionEnd
     } = _b, rest = __objRest(_b, [
-      "as",
       "children",
       "style",
       "animationDuration",
@@ -1994,16 +2016,16 @@ var AutoAnimateHeight = (0, import_react31.forwardRef)(
       "onTransitionEnd"
     ]);
     var _a2, _b2;
-    const rootRef = (0, import_react31.useRef)(null);
+    const rootRef = (0, import_react35.useRef)(null);
     const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react31.useRef)(null);
-    const [height, setHeight] = (0, import_react31.useState)(
+    const measurementRef = (0, import_react35.useRef)(null);
+    const [height, setHeight] = (0, import_react35.useState)(
       void 0
     );
-    const [clonedChildren, setClonedChildren] = (0, import_react31.useState)(
-      () => (0, import_react31.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {})
+    const [clonedChildren, setClonedChildren] = (0, import_react35.useState)(
+      () => (0, import_react35.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {})
     );
-    (0, import_react31.useEffect)(() => {
+    (0, import_react35.useEffect)(() => {
       var _a3;
       if (!rootRef.current)
         return;
@@ -2023,7 +2045,7 @@ var AutoAnimateHeight = (0, import_react31.forwardRef)(
       });
       resizeObserver.observe(currentMeasurement);
       setHeight({ height: newHeight, shouldAnimate: true });
-      const nextClonedChildren = (0, import_react31.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {});
+      const nextClonedChildren = (0, import_react35.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {});
       if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
         setClonedChildren(nextClonedChildren);
         return () => {
@@ -2043,7 +2065,7 @@ var AutoAnimateHeight = (0, import_react31.forwardRef)(
       };
     }, [children]);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      Component,
+      "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
         onTransitionEnd,
@@ -2080,9 +2102,9 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/show-more/show-more.tsx
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
-var import_react32 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react32.forwardRef)(
+var ShowMoreButton = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -2108,14 +2130,15 @@ var ShowMoreButton = (0, import_react32.forwardRef)(
 ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
-var React10 = require("react");
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
-var import_react33 = require("react");
+var import_react_slot13 = require("@radix-ui/react-slot");
+var import_react37 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var Skeleton = (0, import_react33.forwardRef)(
+var Skeleton = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      as: Tag = "div",
+      asChild,
       children,
       animation = true,
       variant = "text",
@@ -2125,6 +2148,7 @@ var Skeleton = (0, import_react33.forwardRef)(
       style
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "children",
       "animation",
       "variant",
@@ -2133,9 +2157,10 @@ var Skeleton = (0, import_react33.forwardRef)(
       "className",
       "style"
     ]);
+    const Component = asChild ? import_react_slot13.Slot : Tag;
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Component,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         className: (0, import_typed_classname33.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
@@ -2143,9 +2168,10 @@ var Skeleton = (0, import_react33.forwardRef)(
           className
         ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
-        ref,
         "aria-hidden": true
-      }, rest), {
+      }, { inert: "true" }), {
+        ref
+      }), rest), {
         children
       })
     );
@@ -2155,9 +2181,9 @@ Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_react34 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react34.forwardRef)(
+var StepIndicator = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2220,12 +2246,14 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react35 = require("react");
+var import_react39 = require("react");
 var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot14 = require("@radix-ui/react-slot");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react35.forwardRef)(
+var StyledHtml = (0, import_react39.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
+    var _b = _a, { asChild, children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "darkmode", "className"]);
+    const Component = asChild ? import_react_slot14.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadProps(__spreadValues({
@@ -2246,12 +2274,12 @@ StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
 var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
-var import_react36 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Table = (0, import_react36.forwardRef)(
+var Table = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
-    const descriptionId = (0, import_react36.useId)();
+    const descriptionId = (0, import_react40.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "table",
@@ -2280,14 +2308,15 @@ var Table = (0, import_react36.forwardRef)(
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react38 = require("react");
+var import_react42 = require("react");
 var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot15 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
-var import_react37 = require("react");
-var TabsContext = (0, import_react37.createContext)(null);
+var import_react41 = require("react");
+var TabsContext = (0, import_react41.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react37.useContext)(TabsContext);
+  const context = (0, import_react41.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2298,85 +2327,88 @@ function useTabsContext() {
 
 // src/tabs/tabs.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var Tabs = (0, import_react38.forwardRef)(
+var Tabs = (0, import_react42.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react38.useState)(defaultTab);
+    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
+    const [activeTabId, setActiveTabId] = (0, import_react42.useState)(defaultTab);
+    const Component = asChild ? import_react_slot15.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname37.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
-var import_react39 = require("react");
+var import_react43 = require("react");
 var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-function TabsList(_a) {
-  var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
-  const { activeTabId } = useTabsContext();
-  const tabsListRef = (0, import_react39.useRef)(null);
-  const { width: tabsWidth } = useResize(tabsListRef);
-  const isClientSide = useHydrated();
-  const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
-  const wideEnough = innerWidth >= tabsWidth;
-  const previousTabId = (0, import_react39.useRef)(activeTabId);
-  (0, import_react39.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_runtime41.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      className: (0, import_typed_classname38.clsx)(
-        "hds-tabs__list",
-        direction === "horizontal" ? {
-          "hds-tabs__list--horizontal": wideEnough,
-          "hds-tabs__list--vertical": !wideEnough
-        } : {
-          "hds-tabs__list--vertical": true
-        },
-        className
-      ),
-      ref: tabsListRef,
-      role: "tablist"
-    }, rest), {
-      children
-    })
-  );
-}
+var TabsList = (0, import_react43.forwardRef)(
+  (_a) => {
+    var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
+    const { activeTabId } = useTabsContext();
+    const tabsListRef = (0, import_react43.useRef)(null);
+    const { width: tabsWidth } = useResize(tabsListRef);
+    const isClientSide = useHydrated();
+    const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
+    const wideEnough = innerWidth >= tabsWidth;
+    const previousTabId = (0, import_react43.useRef)(activeTabId);
+    (0, import_react43.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_runtime41.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname38.clsx)(
+          "hds-tabs__list",
+          direction === "horizontal" ? {
+            "hds-tabs__list--horizontal": wideEnough,
+            "hds-tabs__list--vertical": !wideEnough
+          } : {
+            "hds-tabs__list--vertical": true
+          },
+          className
+        ),
+        ref: tabsListRef,
+        role: "tablist"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react39.forwardRef)(
+var TabsTab = (0, import_react43.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
+    var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
     const toggleTab = (e) => {
       e.preventDefault();
       context.toggleActiveTabId(tabId);
-      onClick && onClick(e);
+      onClick == null ? void 0 : onClick(e);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      Component,
+      "button",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname38.clsx)(
           "hds-tabs__tab",
@@ -2386,6 +2418,7 @@ var TabsTab = (0, import_react39.forwardRef)(
         "data-tabid": tabId,
         onClick: toggleTab,
         ref,
+        type: "button",
         role: "tab"
       }, rest), {
         children
@@ -2396,18 +2429,23 @@ var TabsTab = (0, import_react39.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
-var import_react40 = require("react");
+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");
-function TabsContents(_a) {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname39.clsx)("hds-tabs__contents") }, rest), { children }));
-}
+var TabsContents = (0, import_react44.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
+    const Component = asChild ? import_react_slot16.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname39.clsx)("hds-tabs__contents") }, rest), { children }));
+  }
+);
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react40.forwardRef)(
+var TabsContent = (0, import_react44.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
+    var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
     const context = useTabsContext();
+    const Component = asChild ? import_react_slot16.Slot : "div";
     if (context.activeTabId === forTabId) {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
@@ -2424,8 +2462,9 @@ TabsComponent.Contents = TabsContents;
 TabsComponent.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react41 = require("react");
+var import_react45 = require("react");
 var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot17 = require("@radix-ui/react-slot");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
@@ -2442,10 +2481,11 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react41.forwardRef)(
+var Text = (0, import_react45.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as,
+      as: Tag,
+      asChild,
       variant = "body",
       size = "fluid",
       _unstableSpacing: spacing,
@@ -2453,13 +2493,14 @@ var Text = (0, import_react41.forwardRef)(
       className
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "variant",
       "size",
       "_unstableSpacing",
       "children",
       "className"
     ]);
-    const Component = as != null ? as : defaultHTMLTag[variant];
+    const Component = asChild ? import_react_slot17.Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Component,
@@ -2479,110 +2520,58 @@ var Text = (0, import_react41.forwardRef)(
 );
 Text.displayName = "Text";
 
-// src/text/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var TextH1Display = textVariant("h1-display", "TextH1Display");
-var TextH1 = textVariant("h1", "TextH1");
-var TextH2 = textVariant("h2", "TextH2");
-var TextH3 = textVariant("h3", "TextH3");
-var TextH3Title = textVariant("h3-title", "TextH3Title");
-var TextBody = textVariant("body", "TextBody");
-var TextBodyTitle = textVariant("body-title", "TextBodyTitle");
-var TextBodySmall = textVariant("body-small", "TextBodySmall");
-var TextBodySmallTitle = textVariant("body-small-title", "TextBodySmallTitle");
-var TextTechnical = textVariant("technical", "TextTechnical");
-var TextTechnicalTitle = textVariant("technical-title", "TextTechnicalTitle");
-var TextCaption = textVariant("caption", "TextCaption");
-var TextCaptionTitle = textVariant("caption-title", "TextCaptionTitle");
-var variantToHtmlTag = {
-  "h1-display": "h1",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  "h3-title": "h3",
-  body: "p",
-  "body-title": "p",
-  "body-small": "p",
-  "body-small-title": "p",
-  technical: "p",
-  "technical-title": "p",
-  caption: "p",
-  "caption-title": "p"
-};
-function textVariant(variant, displayName) {
-  function WrappedText(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
-  }
-  WrappedText.displayName = displayName;
-  return WrappedText;
-}
-
 // src/warning-banner/warning-banner.tsx
-var import_react42 = require("react");
+var import_react46 = require("react");
 var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react42.forwardRef)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname41.clsx)("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WarningBannerDescription, { children: description }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname41.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WarningBannerDescription, { children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react42.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      variant,
-      as: Component = variant === "expandable" ? "button" : "p",
-      children,
-      className
-    } = _b, rest = __objRest(_b, [
-      "variant",
-      "as",
-      "children",
-      "className"
-    ]);
-    const [open, setOpen] = (0, import_react42.useState)(false);
-    if (variant === "expandable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        Component,
-        __spreadProps(__spreadValues({
-          className: (0, import_typed_classname41.clsx)(
-            "hds-warning-banner__title",
-            "hds-warning-banner__title-trigger",
-            { "hds-warning-banner--closed": !open },
-            className
-          ),
-          onClick: () => {
-            setOpen(!open);
-          },
-          ref,
-          type: "button"
-        }, rest), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children })
-        })
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      Component,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname41.clsx)("hds-warning-banner__title", className),
-        ref
-      }, rest), {
-        children
+var WarningBannerTitle = (0, import_react46.forwardRef)((_a, ref) => {
+  var _b = _a, { variant, children, className } = _b, rest = __objRest(_b, ["variant", "children", "className"]);
+  const [open, setOpen] = (0, import_react46.useState)(false);
+  if (variant === "expandable") {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "button",
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname41.clsx)(
+          "hds-warning-banner__title",
+          "hds-warning-banner__title-trigger",
+          { "hds-warning-banner--closed": !open },
+          className
+        ),
+        onClick: () => {
+          setOpen((prev) => !prev);
+        },
+        ref,
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children })
       })
     );
   }
-);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "p",
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_typed_classname41.clsx)("hds-warning-banner__title", className),
+      ref,
+      children
+    })
+  );
+});
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react42.forwardRef)(
+var WarningBannerDescription = (0, import_react46.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      Component,
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "p",
       __spreadValues({
         className: (0, import_typed_classname41.clsx)("hds-warning-banner__description", className),
         ref
@@ -2604,8 +2593,12 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Breadcrumbs,
   Card,
   CardBody,
+  CardBodyAction,
+  CardBodyActionArrow,
+  CardBodyDescription,
   CardBodyHeader,
   CardBodyHeaderOverline,
+  CardBodyHeaderTitle,
   CardMedia,
   CardMediaImg,
   Checkbox,
@@ -2635,7 +2628,13 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   ModalFooter,
   ModalHeader,
   Navbar,
-  NavbarButton,
+  NavbarButtonItem,
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger,
+  NavbarItem,
+  NavbarItemIcon,
+  NavbarLinkItem,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation,
@@ -2657,19 +2656,6 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   TabsList,
   TabsTab,
   Text,
-  TextBody,
-  TextBodySmall,
-  TextBodySmallTitle,
-  TextBodyTitle,
-  TextCaption,
-  TextCaptionTitle,
-  TextH1,
-  TextH1Display,
-  TextH2,
-  TextH3,
-  TextH3Title,
-  TextTechnical,
-  TextTechnicalTitle,
   Textarea,
   UnorderedList,
   VStack,