@postenbring/hedwig-react 0.0.81 → 0.0.83

package/dist/index.js

@@ -59,16 +59,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
-  Accordion: () => AccordionComponent,
+  Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionHeader: () => AccordionHeader,
   AccordionItem: () => AccordionItem,
   AutoAnimateHeight: () => AutoAnimateHeight,
   Badge: () => LighterBadge,
-  Box: () => BoxComponent,
+  Box: () => Box,
   BoxCloseButton: () => BoxCloseButton,
   Breadcrumbs: () => Breadcrumbs,
-  Card: () => CardComponent,
+  Card: () => Card,
   CardBody: () => CardBody,
   CardBodyAction: () => CardBodyAction,
   CardBodyActionArrow: () => CardBodyActionArrow,
@@ -85,26 +85,26 @@ __export(src_exports, {
   DescriptionList: () => DescriptionList,
   ErrorMessage: () => ErrorMessage,
   Fieldset: () => Fieldset,
-  Footer: () => FooterComponent,
+  Footer: () => Footer,
   FooterButtonLink: () => FooterButtonLink,
   FooterLinkSection: () => FooterLinkSection,
   FooterLinkSections: () => FooterLinkSections,
   FooterLogo: () => FooterLogo,
-  Grid: () => GridComponent,
+  Grid: () => Grid,
   GridItem: () => GridItem,
   HStack: () => HStack,
   HelpText: () => HelpText,
   Input: () => Input,
   Link: () => Link,
   LinkList: () => LinkList,
-  Message: () => MessageComponent,
+  Message: () => Message,
   MessageDescription: () => MessageDescription,
   MessageTitle: () => MessageTitle,
-  Modal: () => ModalComponent,
+  Modal: () => Modal,
   ModalContent: () => ModalContent,
   ModalFooter: () => ModalFooter,
   ModalHeader: () => ModalHeader,
-  Navbar: () => NavbarComponent,
+  Navbar: () => Navbar,
   NavbarButtonItem: () => NavbarButtonItem,
   NavbarExpandableMenu: () => NavbarExpandableMenu,
   NavbarExpandableMenuContent: () => NavbarExpandableMenuContent,
@@ -127,7 +127,7 @@ __export(src_exports, {
   StepIndicator: () => StepIndicator,
   StyledHtml: () => StyledHtml,
   Table: () => Table,
-  Tabs: () => TabsComponent,
+  Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsContents: () => TabsContents,
   TabsList: () => TabsList,
@@ -139,50 +139,35 @@ __export(src_exports, {
   WarningBadge: () => WarningBadge,
   WarningBanner: () => WarningBanner,
   WhiteBadge: () => WhiteBadge,
+  focusTrap: () => focusTrap,
   useFieldsetContext: () => useFieldsetContext,
+  useHydrated: () => useHydrated,
+  useMergeRefs: () => useMergeRefs,
   useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext,
-  useRadioGroupContext: () => useRadioGroupContext
+  useRadioGroupContext: () => useRadioGroupContext,
+  useResize: () => useResize
 });
 module.exports = __toCommonJS(src_exports);
 var import_dist = require("@postenbring/hedwig-css/dist/index.css");
 
 // src/accordion/accordion.tsx
-var import_react = require("react");
-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, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname.clsx)(
-          "hds-accordion",
-          !indent && "hds-accordion--no-indent",
-          className
-        ),
-        ref,
-        children
-      })
-    );
-  }
-);
-Accordion.displayName = "Accordion";
+var import_react5 = require("react");
+var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/accordion/accordion-item.tsx
-var import_react3 = require("react");
-var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
+var import_react2 = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/accordion/context.ts
-var import_react2 = require("react");
-var AccordionItemContext = (0, import_react2.createContext)(null);
+var import_react = require("react");
+var AccordionItemContext = (0, import_react.createContext)(null);
 
 // src/accordion/accordion-item.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var AccordionItem = (0, import_react3.forwardRef)(
+var import_jsx_runtime = require("react/jsx-runtime");
+var AccordionItem = (0, import_react2.forwardRef)(
   (_a, ref) => {
     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 [innerOpen, setInnerOpen] = (0, import_react2.useState)(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
       if (outerOpen !== void 0) {
@@ -191,13 +176,13 @@ var AccordionItem = (0, import_react3.forwardRef)(
         setInnerOpen(!open);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       __spreadProps(__spreadValues({}, rest), {
         "data-state": open ? "open" : "closed",
-        className: (0, import_typed_classname2.clsx)("hds-accordion-item", className),
+        className: (0, import_typed_classname.clsx)("hds-accordion-item", className),
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
       })
     );
   }
@@ -205,13 +190,13 @@ var AccordionItem = (0, import_react3.forwardRef)(
 AccordionItem.displayName = "Accordion.Item";
 
 // src/accordion/accordion-header.tsx
-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)(
+var import_react3 = require("react");
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AccordionHeader = (0, import_react3.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, onClick } = _b, rest = __objRest(_b, ["children", "className", "onClick"]);
-    const context = (0, import_react4.useContext)(AccordionItemContext);
+    const context = (0, import_react3.useContext)(AccordionItemContext);
     if (context === null) {
       return null;
     }
@@ -219,16 +204,16 @@ var AccordionHeader = (0, import_react4.forwardRef)(
       context.setOpen(!context.open);
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.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),
+        className: (0, import_typed_classname2.clsx)("hds-accordion-item-header", className),
         onClick: expandOrCollapse,
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
       })
     );
   }
@@ -236,37 +221,55 @@ var AccordionHeader = (0, import_react4.forwardRef)(
 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)(
+var import_react4 = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AccordionContent = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    const context = (0, import_react5.useContext)(AccordionItemContext);
+    const context = (0, import_react4.useContext)(AccordionItemContext);
     if (context === null) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       __spreadProps(__spreadValues(__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),
+        className: (0, import_typed_classname3.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 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-content-inner"), children })
       })
     );
   }
 );
 AccordionContent.displayName = "Accordion.Content";
 
-// src/accordion/index.tsx
-var AccordionComponent = Accordion;
-AccordionComponent.Item = AccordionItem;
-AccordionComponent.Header = AccordionHeader;
-AccordionComponent.Content = AccordionContent;
+// src/accordion/accordion.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Accordion = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname4.clsx)(
+          "hds-accordion",
+          !indent && "hds-accordion--no-indent",
+          className
+        ),
+        ref,
+        children
+      })
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
 
 // src/badge/badge.tsx
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
@@ -314,6 +317,20 @@ 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 BoxCloseButton = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "Box.CloseButton";
 var Box = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -368,24 +385,7 @@ var Box = (0, import_react7.forwardRef)(
   }
 );
 Box.displayName = "Box";
-var BoxCloseButton = (0, import_react7.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "button",
-      __spreadValues({
-        className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
-        ref,
-        type: "button"
-      }, rest)
-    );
-  }
-);
-BoxCloseButton.displayName = "Box.CloseButton";
-
-// src/box/index.tsx
-var BoxComponent = Box;
-BoxComponent.CloseButton = BoxCloseButton;
+Box.CloseButton = BoxCloseButton;
 
 // src/breadcrumbs/breadcrumbs.tsx
 var import_react8 = require("react");
@@ -463,12 +463,6 @@ 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_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_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
@@ -586,18 +580,23 @@ var CardBodyActionArrow = (0, import_react10.forwardRef)(
   }
 );
 CardBodyActionArrow.displayName = "Card.BodyActionArrow";
-
-// src/card/index.tsx
-var CardComponent = Card;
-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;
+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";
+Card.Media = CardMedia;
+Card.MediaImg = CardMediaImg;
+Card.Body = CardBody;
+Card.BodyHeader = CardBodyHeader;
+Card.BodyHeaderOverline = CardBodyHeaderOverline;
+Card.BodyHeaderTitle = CardBodyHeaderTitle;
+Card.BodyDescription = CardBodyDescription;
+Card.BodyAction = CardBodyAction;
+Card.BodyActionArrow = CardBodyActionArrow;
 
 // src/description-list/description-list.tsx
 var import_react11 = require("react");
@@ -853,7 +852,7 @@ var InputGroup = (0, import_react15.forwardRef)(function InputGroup2(_a, ref) {
   );
 });
 
-// src/utils.ts
+// src/utils/utils.ts
 var React = __toESM(require("react"));
 var import_react16 = require("react");
 function useMergeRefs(refs) {
@@ -1228,26 +1227,6 @@ LinkList.displayName = "LinkList";
 
 // src/footer/footer.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-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_slot5.Slot : "footer";
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      Component,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname22.clsx)(
-          `hds-footer`,
-          variant === "slim" && "hds-footer--slim",
-          className
-        ),
-        ref
-      }, rest), {
-        children
-      })
-    );
-  }
-);
-Footer.displayName = "Footer";
 var FooterLogo = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
@@ -1268,7 +1247,7 @@ 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)(
-      AccordionComponent,
+      Accordion,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname22.clsx)("hds-footer__link-sections", className),
         ref
@@ -1285,14 +1264,14 @@ var FooterLinkSection = (0, import_react25.forwardRef)(
     const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LinkList, { children });
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-        AccordionComponent.Item,
+        Accordion.Item,
         __spreadProps(__spreadValues({
           className: (0, import_typed_classname22.clsx)(`hds-footer__link-section`, className),
           ref
         }, rest), {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionComponent.Header, { children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionComponent.Content, { children: linkListChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Accordion.Header, { children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Accordion.Content, { children: linkListChildren })
           ]
         })
       ),
@@ -1304,13 +1283,30 @@ var FooterLinkSection = (0, import_react25.forwardRef)(
   }
 );
 FooterLinkSection.displayName = "Footer.LinkSection";
-
-// src/footer/index.tsx
-var FooterComponent = Footer;
-FooterComponent.Logo = FooterLogo;
-FooterComponent.ButtonLink = FooterButtonLink;
-FooterComponent.LinkSections = FooterLinkSections;
-FooterComponent.LinkSection = FooterLinkSection;
+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_slot5.Slot : "footer";
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname22.clsx)(
+          `hds-footer`,
+          variant === "slim" && "hds-footer--slim",
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Footer.displayName = "Footer";
+Footer.Logo = FooterLogo;
+Footer.ButtonLink = FooterButtonLink;
+Footer.LinkSections = FooterLinkSections;
+Footer.LinkSection = FooterLinkSection;
 
 // src/help-text/help-text.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
@@ -1338,11 +1334,11 @@ var HelpText = (0, import_react26.forwardRef)(
           })
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popover.Content, { asChild: true, side, align, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-          BoxComponent,
+          Box,
           __spreadProps(__spreadValues({}, boxProps), {
             className: (0, import_typed_classname23.clsx)("hds-help-text-box", boxProps == null ? void 0 : boxProps.className),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BoxComponent.CloseButton, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box.CloseButton, {}) }),
               helpText
             ]
           })
@@ -1404,16 +1400,16 @@ function getSpacingVariable(size) {
 
 // src/layout/grid/grid.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Grid = (0, import_react28.forwardRef)(
+var GridItem = (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"]);
+    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_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"));
+    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,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname25.clsx)("hds-grid", className),
+        className: (0, import_typed_classname25.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -1421,17 +1417,17 @@ var Grid = (0, import_react28.forwardRef)(
     );
   }
 );
-Grid.displayName = "Grid";
-var GridItem = (0, import_react28.forwardRef)(
+GridItem.displayName = "Grid.Item";
+var Grid = (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"]);
+    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_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"));
+    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,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname25.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname25.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -1439,11 +1435,8 @@ var GridItem = (0, import_react28.forwardRef)(
     );
   }
 );
-GridItem.displayName = "Grid.Item";
-
-// src/layout/grid/index.tsx
-var GridComponent = Grid;
-GridComponent.Item = GridItem;
+Grid.displayName = "Grid";
+Grid.Item = GridItem;
 
 // src/layout/stack/stack.tsx
 var React2 = require("react");
@@ -1535,6 +1528,34 @@ 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 MessageTitle = (0, import_react31.forwardRef)(
+  (_a, ref) => {
+    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({
+        className: (0, import_typed_classname28.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "Message.Title";
+var MessageDescription = (0, import_react31.forwardRef)(
+  (_a, ref) => {
+    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({
+        className: (0, import_typed_classname28.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "Message.Description";
 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"]);
@@ -1553,45 +1574,56 @@ var Message = (0, import_react31.forwardRef)(
   }
 );
 Message.displayName = "Message";
-var MessageTitle = (0, import_react31.forwardRef)(
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
+
+// src/modal/modal.tsx
+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 ModalHeader = (0, import_react32.forwardRef)(
   (_a, ref) => {
     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)(
+    const Component = asChild ? import_react_slot11.Slot : "h1";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-message__title", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal__header", className),
         ref
       }, rest)
     );
   }
 );
-MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react31.forwardRef)(
+ModalHeader.displayName = "Modal.Header";
+var ModalContent = (0, import_react32.forwardRef)(
   (_a, ref) => {
     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)(
+    const Component = asChild ? import_react_slot11.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-message__description", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal__content", className),
         ref
       }, rest)
     );
   }
 );
-MessageDescription.displayName = "Message.Description";
-
-// src/message/index.tsx
-var MessageComponent = Message;
-MessageComponent.Title = MessageTitle;
-MessageComponent.Description = MessageDescription;
-
-// src/modal/modal.tsx
-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");
+ModalContent.displayName = "Modal.Content";
+var ModalFooter = (0, import_react32.forwardRef)(
+  (_a, ref) => {
+    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({
+        className: (0, import_typed_classname29.clsx)("hds-modal__footer", className),
+        ref
+      }, rest)
+    );
+  }
+);
+ModalFooter.displayName = "Modal.Footer";
 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"]);
@@ -1633,48 +1665,9 @@ var Modal = (0, import_react32.forwardRef)(
   }
 );
 Modal.displayName = "Modal";
-var ModalHeader = (0, import_react32.forwardRef)(
-  (_a, ref) => {
-    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({
-        className: (0, import_typed_classname29.clsx)("hds-modal__header", className),
-        ref
-      }, rest)
-    );
-  }
-);
-ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react32.forwardRef)(
-  (_a, ref) => {
-    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({
-        className: (0, import_typed_classname29.clsx)("hds-modal__content", className),
-        ref
-      }, rest)
-    );
-  }
-);
-ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react32.forwardRef)(
-  (_a, ref) => {
-    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({
-        className: (0, import_typed_classname29.clsx)("hds-modal__footer", className),
-        ref
-      }, rest)
-    );
-  }
-);
-ModalFooter.displayName = "Modal.Footer";
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
   (0, import_react32.useEffect)(() => {
     if (!modalRef.current)
@@ -1699,124 +1692,19 @@ function useScrollLock(modalRef, bodyClass) {
   }, [bodyClass, modalRef]);
 }
 
-// src/modal/index.tsx
-var ModalComponent = Modal;
-ModalComponent.Header = ModalHeader;
-ModalComponent.Content = ModalContent;
-ModalComponent.Footer = ModalFooter;
-
 // src/navbar/navbar.tsx
-var import_react33 = require("react");
-var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
+var import_react34 = require("react");
+var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot12 = require("@radix-ui/react-slot");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Navbar = (0, import_react33.forwardRef)(
-  (_a, ref) => {
-    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)(
-      Component,
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname30.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
-        ref
-      }, rest), {
-        children
-      })
-    );
-  }
-);
-Navbar.displayName = "Navbar";
-var NavbarLogo = (0, import_react33.forwardRef)(
-  (_a, ref) => {
-    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_react33.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
-    const Component = asChild ? import_react_slot12.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      Component,
-      __spreadProps(__spreadValues({
-        ref,
-        className: (0, import_typed_classname30.clsx)(
-          "hds-navbar__logo-and-service-text",
-          `hds-navbar__logo-and-service-text--${variant}`,
-          className
-        )
-      }, rest), {
-        children
-      })
-    );
-  }
-);
-NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarItemIcon = (0, import_react33.forwardRef)(
-  (_a, ref) => {
-    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)
-    );
-  }
-);
-NavbarNavigation.displayName = "Navbar.Navigation";
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react34 = require("react");
-var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
+var import_react33 = require("react");
+var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/navbar/icons.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -1825,7 +1713,7 @@ function CloseIcon() {
   ) });
 }
 function MenuIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -1835,35 +1723,35 @@ function MenuIcon() {
 }
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var expandableMenuContext = (0, import_react34.createContext)([
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var expandableMenuContext = (0, import_react33.createContext)([
   false,
   () => {
   }
 ]);
-var useNavbarExpendableMenuContext = () => (0, import_react34.useContext)(expandableMenuContext);
+var useNavbarExpendableMenuContext = () => (0, import_react33.useContext)(expandableMenuContext);
 function NavbarExpandableMenu({ children }) {
-  const [open, setOpen] = (0, import_react34.useState)(false);
+  const [open, setOpen] = (0, import_react33.useState)(false);
   function toggleOpen() {
     setOpen((prev) => !prev);
   }
-  (0, import_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
-      document.body.classList.add((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.add((0, import_typed_classname30.clsx)("hds-navbar-scroll-lock"));
       const releaseFocusTrap2 = focusTrap(
-        document.getElementsByClassName((0, import_typed_classname31.clsx)("hds-navbar"))[0]
+        document.getElementsByClassName((0, import_typed_classname30.clsx)("hds-navbar"))[0]
       );
       return () => {
-        document.body.classList.remove((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
+        document.body.classList.remove((0, import_typed_classname30.clsx)("hds-navbar-scroll-lock"));
         releaseFocusTrap2();
       };
     }
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
+var NavbarExpandableMenuTrigger = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -1881,9 +1769,9 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
       "className"
     ]);
     const [open, toggleOpen] = useNavbarExpendableMenuContext();
-    const [textWidth, setTextWidth] = (0, import_react34.useState)(void 0);
-    const measurementId = (0, import_react34.useId)();
-    (0, import_react34.useEffect)(() => {
+    const [textWidth, setTextWidth] = (0, import_react33.useState)(void 0);
+    const measurementId = (0, import_react33.useId)();
+    (0, import_react33.useEffect)(() => {
       var _a2, _b2, _c, _d;
       const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
       const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
@@ -1891,11 +1779,11 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
     }, [measurementId]);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
-    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname31.clsx)("hds-navbar__item", className),
+        className: (0, import_typed_classname30.clsx)("hds-navbar__item", className),
         onClick: toggleOpen,
         ref,
         title,
@@ -1903,7 +1791,7 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
         style: __spreadValues({ position: "relative" }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               id: `${measurementId}-when-closed`,
@@ -1917,7 +1805,7 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
               children: whenOpenText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               id: `${measurementId}-when-open`,
@@ -1931,51 +1819,149 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
               children: whenClosedText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               style: { width: textWidth, whiteSpace: "nowrap" },
-              className: (0, import_typed_classname31.clsx)("hds-navbar__item-responsive-text"),
+              className: (0, import_typed_classname30.clsx)("hds-navbar__item-responsive-text"),
               children: text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
         ]
       })
     );
   }
 );
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
-var NavbarExpandableMenuContent = (0, import_react34.forwardRef)((_a, ref) => {
+var NavbarExpandableMenuContent = (0, import_react33.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const [open] = useNavbarExpendableMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content", className),
+      className: (0, import_typed_classname30.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
     }), { inert: open ? void 0 : "true" }), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname30.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
 NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 
-// src/navbar/index.tsx
-var NavbarComponent = Navbar;
-NavbarComponent.Logo = NavbarLogo;
-NavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;
-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
+// src/navbar/navbar.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var NavbarLogo = (0, import_react34.forwardRef)(
+  (_a, ref) => {
+    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_runtime33.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
+  }
+);
+NavbarLogo.displayName = "Navbar.Logo";
+var NavbarLogoAndServiceText = (0, import_react34.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
+    const Component = asChild ? import_react_slot12.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname31.clsx)(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
+var NavbarItemIcon = (0, import_react34.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_slot12.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
+  }
+);
+NavbarItemIcon.displayName = "Navbar.ItemIcon";
+var NavbarItem = (0, import_react34.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_runtime33.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarItem.displayName = "Navbar.Item";
+var NavbarButtonItem = (0, import_react34.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_runtime33.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname31.clsx)("hds-navbar__item", className),
+        ref,
+        type: "button"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarButtonItem.displayName = "Navbar.ButtonItem";
+var NavbarLinkItem = (0, import_react34.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_runtime33.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarLinkItem.displayName = "Navbar.LinkItem";
+var NavbarNavigation = (0, import_react34.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_runtime33.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname31.clsx)("hds-navbar__navigation", className),
+        ref
+      }, rest)
+    );
+  }
+);
+NavbarNavigation.displayName = "Navbar.Navigation";
+var Navbar = (0, import_react34.forwardRef)(
+  (_a, ref) => {
+    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_runtime33.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname31.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+Navbar.Logo = NavbarLogo;
+Navbar.LogoAndServiceText = NavbarLogoAndServiceText;
+Navbar.ExpandableMenu = NavbarExpandableMenu;
+Navbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
+Navbar.ExpandableMenuContent = NavbarExpandableMenuContent;
+Navbar.Item = NavbarItem;
+Navbar.ButtonItem = NavbarButtonItem;
+Navbar.LinkItem = NavbarLinkItem;
+Navbar.ItemIcon = NavbarItemIcon;
+Navbar.Navigation = NavbarNavigation;
+
+// src/utils/auto-animate-height.tsx
 var import_react35 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var AutoAnimateHeight = (0, import_react35.forwardRef)(
@@ -2287,9 +2273,9 @@ var Table = (0, import_react40.forwardRef)(
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react42 = require("react");
-var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot15 = require("@radix-ui/react-slot");
+var import_react44 = require("react");
+var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot16 = require("@radix-ui/react-slot");
 
 // src/tabs/context.ts
 var import_react41 = require("react");
@@ -2304,17 +2290,31 @@ function useTabsContext() {
   return context;
 }
 
-// src/tabs/tabs.tsx
+// src/tabs/tabs-content.tsx
+var import_react42 = require("react");
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot15 = require("@radix-ui/react-slot");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var Tabs = (0, import_react42.forwardRef)(
+var TabsContents = (0, import_react42.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react42.useState)(defaultTab);
+    var _b = _a, { asChild, children } = _b, rest = __objRest(_b, ["asChild", "children"]);
     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 }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname37.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
-Tabs.displayName = "Tabs";
+TabsContents.displayName = "Tabs.Contents";
+var TabsContent = (0, import_react42.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
+    const context = useTabsContext();
+    const Component = asChild ? import_react_slot15.Slot : "div";
+    if (context.activeTabId === forTabId) {
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+    }
+    return null;
+  }
+);
+TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
 var import_react43 = require("react");
@@ -2408,38 +2408,21 @@ var TabsTab = (0, import_react43.forwardRef)(
 );
 TabsTab.displayName = "Tabs.Tab";
 
-// src/tabs/tabs-content.tsx
-var import_react44 = require("react");
-var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
-var import_react_slot16 = require("@radix-ui/react-slot");
+// src/tabs/tabs.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var TabsContents = (0, import_react44.forwardRef)(
+var Tabs = (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_react44.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { asChild, forTabId, children } = _b, rest = __objRest(_b, ["asChild", "forTabId", "children"]);
-    const context = useTabsContext();
+    var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
+    const [activeTabId, setActiveTabId] = (0, import_react44.useState)(defaultTab);
     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 }));
-    }
-    return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname39.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
-TabsContent.displayName = "Tabs.Content";
-
-// src/tabs/index.tsx
-var TabsComponent = Tabs;
-TabsComponent.List = TabsList;
-TabsComponent.Tab = TabsTab;
-TabsComponent.Contents = TabsContents;
-TabsComponent.Content = TabsContent;
+Tabs.displayName = "Tabs";
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Contents = TabsContents;
+Tabs.Content = TabsContent;
 
 // src/text/text.tsx
 var import_react45 = require("react");
@@ -2508,7 +2491,7 @@ 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_runtime44.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname41.clsx)("hds-warning-banner", className), ref, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Box, __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
     ] }));
@@ -2642,8 +2625,12 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   WarningBadge,
   WarningBanner,
   WhiteBadge,
+  focusTrap,
   useFieldsetContext,
+  useHydrated,
+  useMergeRefs,
   useNavbarExpendableMenuContext,
-  useRadioGroupContext
+  useRadioGroupContext,
+  useResize
 });
 //# sourceMappingURL=index.js.map