@postenbring/hedwig-react 0.0.83 → 0.0.84

package/dist/index.js

@@ -64,10 +64,11 @@ __export(src_exports, {
   AccordionHeader: () => AccordionHeader,
   AccordionItem: () => AccordionItem,
   AutoAnimateHeight: () => AutoAnimateHeight,
-  Badge: () => LighterBadge,
+  Badge: () => Badge,
   Box: () => Box,
   BoxCloseButton: () => BoxCloseButton,
   Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
   Card: () => Card,
   CardBody: () => CardBody,
   CardBodyAction: () => CardBodyAction,
@@ -80,7 +81,6 @@ __export(src_exports, {
   CardMediaImg: () => CardMediaImg,
   Checkbox: () => Checkbox,
   Container: () => Container,
-  DarkBadge: () => DarkBadge,
   DatePicker: () => DatePicker,
   DescriptionList: () => DescriptionList,
   ErrorMessage: () => ErrorMessage,
@@ -116,10 +116,8 @@ __export(src_exports, {
   NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
   NavbarNavigation: () => NavbarNavigation,
   OrderedList: () => OrderedList,
-  PrimaryButton: () => PrimaryButton,
   RadioGroup: () => RadioGroup,
   Radiobutton: () => Radiobutton,
-  SecondaryButton: () => SecondaryButton,
   Select: () => Select,
   ShowMoreButton: () => ShowMoreButton,
   Skeleton: () => Skeleton,
@@ -136,9 +134,7 @@ __export(src_exports, {
   Textarea: () => Textarea,
   UnorderedList: () => UnorderedList,
   VStack: () => VStack,
-  WarningBadge: () => WarningBadge,
   WarningBanner: () => WarningBanner,
-  WhiteBadge: () => WhiteBadge,
   focusTrap: () => focusTrap,
   useFieldsetContext: () => useFieldsetContext,
   useHydrated: () => useHydrated,
@@ -167,6 +163,7 @@ 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 contentId = (0, import_react2.useId)();
     const [innerOpen, setInnerOpen] = (0, import_react2.useState)(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
@@ -182,7 +179,7 @@ var AccordionItem = (0, import_react2.forwardRef)(
         "data-state": open ? "open" : "closed",
         className: (0, import_typed_classname.clsx)("hds-accordion-item", className),
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { contentId, open, setOpen: handleOpen }, children })
       })
     );
   }
@@ -208,6 +205,7 @@ var AccordionHeader = (0, import_react3.forwardRef)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": context.open,
+        "aria-controls": context.contentId,
         "data-state": context.open ? "open" : "closed",
         className: (0, import_typed_classname2.clsx)("hds-accordion-item-header", className),
         onClick: expandOrCollapse,
@@ -234,6 +232,7 @@ var AccordionContent = (0, import_react4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        id: context.contentId,
         "aria-hidden": !context.open,
         "data-state": context.open ? "open" : "closed"
       }, { inert: context.open ? void 0 : "true" }), {
@@ -276,41 +275,27 @@ 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");
-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)(
-    Component,
-    __spreadProps(__spreadValues({
-      ref,
-      className: (0, import_typed_classname5.clsx)(
-        "hds-badge",
-        `hds-badge--${size}`,
-        `hds-badge--${variant}`,
-        className
-      )
-    }, rest), {
-      children
-    })
-  );
-});
+var Badge = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant = "lighter", 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)(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname5.clsx)(
+          "hds-badge",
+          `hds-badge--${size}`,
+          `hds-badge--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
 Badge.displayName = "Badge";
-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";
-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";
-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_react7 = require("react");
@@ -409,10 +394,9 @@ var Button = (0, import_react9.forwardRef)(
     var _b = _a, {
       asChild,
       children,
-      variant,
+      variant = "primary",
       size = "medium",
       fullWidth = false,
-      fill = "contained",
       icon,
       className
     } = _b, rest = __objRest(_b, [
@@ -421,7 +405,6 @@ var Button = (0, import_react9.forwardRef)(
       "variant",
       "size",
       "fullWidth",
-      "fill",
       "icon",
       "className"
     ]);
@@ -432,9 +415,8 @@ var Button = (0, import_react9.forwardRef)(
         className: (0, import_typed_classname8.clsx)(
           "hds-button",
           `hds-button--${size}`,
+          `hds-button--${variant}`,
           {
-            [`hds-button--${variant}`]: fill === "contained",
-            [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
             "hds-button--icon-only": icon
@@ -449,14 +431,6 @@ var Button = (0, import_react9.forwardRef)(
   }
 );
 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_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_react10 = require("react");
@@ -1239,7 +1213,7 @@ 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_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 })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { asChild: true, variant: "primary-outline", className: (0, import_typed_classname22.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
@@ -1724,17 +1698,17 @@ function MenuIcon() {
 
 // src/navbar/navbar-expandable-menu.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var expandableMenuContext = (0, import_react33.createContext)([
-  false,
-  () => {
+var ExpandableMenuContext = (0, import_react33.createContext)(null);
+var useNavbarExpendableMenuContext = () => {
+  const value = (0, import_react33.useContext)(ExpandableMenuContext);
+  if (value === null) {
+    throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
   }
-]);
-var useNavbarExpendableMenuContext = () => (0, import_react33.useContext)(expandableMenuContext);
+  return value;
+};
 function NavbarExpandableMenu({ children }) {
+  const contentId = (0, import_react33.useId)();
   const [open, setOpen] = (0, import_react33.useState)(false);
-  function toggleOpen() {
-    setOpen((prev) => !prev);
-  }
   (0, import_react33.useEffect)(() => {
     if (open) {
       window.scrollTo(0, 0);
@@ -1748,7 +1722,7 @@ function NavbarExpandableMenu({ children }) {
       };
     }
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
 var NavbarExpandableMenuTrigger = (0, import_react33.forwardRef)(
@@ -1768,7 +1742,7 @@ var NavbarExpandableMenuTrigger = (0, import_react33.forwardRef)(
       "style",
       "className"
     ]);
-    const [open, toggleOpen] = useNavbarExpendableMenuContext();
+    const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
     const [textWidth, setTextWidth] = (0, import_react33.useState)(void 0);
     const measurementId = (0, import_react33.useId)();
     (0, import_react33.useEffect)(() => {
@@ -1780,9 +1754,14 @@ var NavbarExpandableMenuTrigger = (0, import_react33.forwardRef)(
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuIcon, {});
+    function toggleOpen() {
+      setOpen(!open);
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       __spreadProps(__spreadValues({
+        "aria-expanded": open,
+        "aria-controls": contentId,
         className: (0, import_typed_classname30.clsx)("hds-navbar__item", className),
         onClick: toggleOpen,
         ref,
@@ -1836,10 +1815,11 @@ var NavbarExpandableMenuTrigger = (0, import_react33.forwardRef)(
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
 var NavbarExpandableMenuContent = (0, import_react33.forwardRef)((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  const [open] = useNavbarExpendableMenuContext();
+  const { contentId, open } = useNavbarExpendableMenuContext();
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+      id: contentId,
       className: (0, import_typed_classname30.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
     }), { inert: open ? void 0 : "true" }), {
@@ -1961,118 +1941,14 @@ 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)(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      style,
-      animationDuration = "quick",
-      animationEasing = "normal",
-      onTransitionEnd
-    } = _b, rest = __objRest(_b, [
-      "children",
-      "style",
-      "animationDuration",
-      "animationEasing",
-      "onTransitionEnd"
-    ]);
-    var _a2, _b2;
-    const rootRef = (0, import_react35.useRef)(null);
-    const mergedRef = useMergeRefs([rootRef, ref]);
-    const measurementRef = (0, import_react35.useRef)(null);
-    const [height, setHeight] = (0, import_react35.useState)(
-      void 0
-    );
-    const [clonedChildren, setClonedChildren] = (0, import_react35.useState)(
-      () => (0, import_react35.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {})
-    );
-    (0, import_react35.useEffect)(() => {
-      var _a3;
-      if (!rootRef.current)
-        return;
-      if (!measurementRef.current)
-        return;
-      if (document.body.scrollHeight === 0)
-        return;
-      const currentMeasurement = measurementRef.current;
-      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
-      let previouslyObservedHeight = newHeight;
-      const resizeObserver = new ResizeObserver(() => {
-        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
-        if (resizedHeight === previouslyObservedHeight)
-          return;
-        previouslyObservedHeight = resizedHeight;
-        setHeight({ height: resizedHeight, shouldAnimate: false });
-      });
-      resizeObserver.observe(currentMeasurement);
-      setHeight({ height: newHeight, shouldAnimate: true });
-      const nextClonedChildren = (0, import_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 () => {
-          resizeObserver.disconnect();
-        };
-      }
-      const currentRoot = rootRef.current;
-      function onTransitionEndHandler(e) {
-        if (e.propertyName !== "height")
-          return;
-        setClonedChildren(nextClonedChildren);
-      }
-      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
-      return () => {
-        resizeObserver.disconnect();
-        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
-      };
-    }, [children]);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: mergedRef,
-        onTransitionEnd,
-        style: __spreadValues({
-          position: "relative",
-          overflow: "hidden",
-          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
-          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
-          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
-          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
-          willChange: "height"
-        }, style)
-      }, rest), {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              ref: measurementRef,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none"
-              },
-              children
-            }
-          ),
-          clonedChildren
-        ]
-      })
-    );
-  }
-);
-AutoAnimateHeight.displayName = "AutoAnimateHeight";
-
 // src/show-more/show-more.tsx
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
-var import_react36 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react36.forwardRef)(
+var import_react35 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ShowMoreButton = (0, import_react35.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
@@ -2086,7 +1962,7 @@ var ShowMoreButton = (0, import_react36.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: (0, import_typed_classname32.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: (0, import_typed_classname32.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -2097,9 +1973,9 @@ ShowMoreButton.displayName = "ShowMoreButton";
 // src/skeleton/skeleton.tsx
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 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_react37.forwardRef)(
+var import_react36 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Skeleton = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag = "div",
@@ -2123,7 +1999,7 @@ var Skeleton = (0, import_react37.forwardRef)(
       "style"
     ]);
     const Component = asChild ? import_react_slot13.Slot : Tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Component,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         className: (0, import_typed_classname33.clsx)(
@@ -2146,9 +2022,9 @@ Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_react38 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react38.forwardRef)(
+var import_react37 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2167,7 +2043,7 @@ var StepIndicator = (0, import_react38.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -2175,11 +2051,11 @@ var StepIndicator = (0, import_react38.forwardRef)(
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__left-label"), children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: (0, import_typed_classname34.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: (0, import_typed_classname34.clsx)("hds-step-indicator__step"),
@@ -2187,7 +2063,7 @@ var StepIndicator = (0, import_react38.forwardRef)(
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TitleComponent, { className: (0, import_typed_classname34.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TitleComponent, { className: (0, import_typed_classname34.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2211,15 +2087,15 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react39 = require("react");
+var import_react38 = 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_react39.forwardRef)(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react38.forwardRef)(
   (_a, ref) => {
     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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname35.clsx)(
@@ -2239,14 +2115,14 @@ StyledHtml.displayName = "StyledHtml";
 
 // src/table/table.tsx
 var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
-var import_react40 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var Table = (0, import_react40.forwardRef)(
+var import_react39 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Table = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
-    const descriptionId = (0, import_react40.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    const descriptionId = (0, import_react39.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "table",
         __spreadProps(__spreadValues({
           "aria-describedby": description ? descriptionId : void 0,
@@ -2261,27 +2137,27 @@ var Table = (0, import_react40.forwardRef)(
           )
         }, rest), {
           children: [
-            caption ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("caption", { children: caption }) : null,
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("caption", { children: caption }) : null,
             children
           ]
         })
       ),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: (0, import_typed_classname36.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+      description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: (0, import_typed_classname36.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
     ] });
   }
 );
 Table.displayName = "Table";
 
 // src/tabs/tabs.tsx
-var import_react44 = require("react");
+var import_react43 = 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");
-var TabsContext = (0, import_react41.createContext)(null);
+var import_react40 = require("react");
+var TabsContext = (0, import_react40.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react41.useContext)(TabsContext);
+  const context = (0, import_react40.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2291,25 +2167,25 @@ function useTabsContext() {
 }
 
 // src/tabs/tabs-content.tsx
-var import_react42 = require("react");
+var import_react41 = 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 TabsContents = (0, import_react42.forwardRef)(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var TabsContents = (0, import_react41.forwardRef)(
   (_a, ref) => {
     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({ ref, className: (0, import_typed_classname37.clsx)("hds-tabs__contents") }, rest), { children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({ ref, className: (0, import_typed_classname37.clsx)("hds-tabs__contents") }, rest), { children }));
   }
 );
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react42.forwardRef)(
+var TabsContent = (0, import_react41.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 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -2317,21 +2193,21 @@ var TabsContent = (0, import_react42.forwardRef)(
 TabsContent.displayName = "Tabs.Content";
 
 // src/tabs/tabs-list.tsx
-var import_react43 = require("react");
+var import_react42 = require("react");
 var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var TabsList = (0, import_react43.forwardRef)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TabsList = (0, import_react42.forwardRef)(
   (_a, ref) => {
     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 tabsListRef = (0, import_react42.useRef)(null);
     const mergedRef = useMergeRefs([tabsListRef, ref]);
     const { width: tabsWidth } = useResize(tabsListRef);
     const isClientSide = useHydrated();
     const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
     const wideEnough = innerWidth >= tabsWidth;
-    const previousTabId = (0, import_react43.useRef)(activeTabId);
-    (0, import_react43.useEffect)(() => {
+    const previousTabId = (0, import_react42.useRef)(activeTabId);
+    (0, import_react42.useEffect)(() => {
       const tabList = tabsListRef.current;
       const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
       if (!activeTab || !tabList)
@@ -2356,7 +2232,7 @@ var TabsList = (0, import_react43.forwardRef)(
       }
       previousTabId.current = activeTabId;
     }, [activeTabId, innerWidth]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname38.clsx)(
@@ -2378,7 +2254,7 @@ var TabsList = (0, import_react43.forwardRef)(
   }
 );
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react43.forwardRef)(
+var TabsTab = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
@@ -2387,7 +2263,7 @@ var TabsTab = (0, import_react43.forwardRef)(
       context.toggleActiveTabId(tabId);
       onClick == null ? void 0 : onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "button",
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname38.clsx)(
@@ -2409,13 +2285,13 @@ var TabsTab = (0, import_react43.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var Tabs = (0, import_react44.forwardRef)(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Tabs = (0, import_react43.forwardRef)(
   (_a, ref) => {
     var _b = _a, { asChild, defaultTab, children } = _b, rest = __objRest(_b, ["asChild", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react44.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react43.useState)(defaultTab);
     const Component = asChild ? import_react_slot16.Slot : "div";
-    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 }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname39.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
@@ -2425,10 +2301,10 @@ Tabs.Contents = TabsContents;
 Tabs.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react45 = require("react");
+var import_react44 = 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 import_jsx_runtime42 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -2444,7 +2320,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react45.forwardRef)(
+var Text = (0, import_react44.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Tag,
@@ -2465,7 +2341,7 @@ var Text = (0, import_react45.forwardRef)(
     ]);
     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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname40.clsx)(
@@ -2483,6 +2359,110 @@ var Text = (0, import_react45.forwardRef)(
 );
 Text.displayName = "Text";
 
+// src/utils/auto-animate-height.tsx
+var import_react45 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var AutoAnimateHeight = (0, import_react45.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      style,
+      animationDuration = "quick",
+      animationEasing = "normal",
+      onTransitionEnd
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "style",
+      "animationDuration",
+      "animationEasing",
+      "onTransitionEnd"
+    ]);
+    var _a2, _b2;
+    const rootRef = (0, import_react45.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react45.useRef)(null);
+    const [height, setHeight] = (0, import_react45.useState)(
+      void 0
+    );
+    const [clonedChildren, setClonedChildren] = (0, import_react45.useState)(
+      () => (0, import_react45.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children }), {})
+    );
+    (0, import_react45.useEffect)(() => {
+      var _a3;
+      if (!rootRef.current)
+        return;
+      if (!measurementRef.current)
+        return;
+      if (document.body.scrollHeight === 0)
+        return;
+      const currentMeasurement = measurementRef.current;
+      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
+      let previouslyObservedHeight = newHeight;
+      const resizeObserver = new ResizeObserver(() => {
+        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
+        if (resizedHeight === previouslyObservedHeight)
+          return;
+        previouslyObservedHeight = resizedHeight;
+        setHeight({ height: resizedHeight, shouldAnimate: false });
+      });
+      resizeObserver.observe(currentMeasurement);
+      setHeight({ height: newHeight, shouldAnimate: true });
+      const nextClonedChildren = (0, import_react45.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children }), {});
+      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
+        setClonedChildren(nextClonedChildren);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      const currentRoot = rootRef.current;
+      function onTransitionEndHandler(e) {
+        if (e.propertyName !== "height")
+          return;
+        setClonedChildren(nextClonedChildren);
+      }
+      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
+      return () => {
+        resizeObserver.disconnect();
+        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
+      };
+    }, [children]);
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: mergedRef,
+        onTransitionEnd,
+        style: __spreadValues({
+          position: "relative",
+          overflow: "hidden",
+          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
+          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
+          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height"
+        }, style)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              ref: measurementRef,
+              style: {
+                position: "absolute",
+                visibility: "hidden",
+                pointerEvents: "none"
+              },
+              children
+            }
+          ),
+          clonedChildren
+        ]
+      })
+    );
+  }
+);
+AutoAnimateHeight.displayName = "AutoAnimateHeight";
+
 // src/warning-banner/warning-banner.tsx
 var import_react46 = require("react");
 var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
@@ -2490,25 +2470,35 @@ 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 descriptionId = (0, import_react46.useId)();
     const expandable = !!description;
-    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
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", __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",
+          descriptionId,
+          children: title
+        }
+      ),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
 var WarningBannerTitle = (0, import_react46.forwardRef)((_a, ref) => {
-  var _b = _a, { variant, children, className } = _b, rest = __objRest(_b, ["variant", "children", "className"]);
+  var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
   const [open, setOpen] = (0, import_react46.useState)(false);
   if (variant === "expandable") {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
+        "aria-expanded": open,
+        "aria-controls": descriptionId,
+        "data-state": open ? "open" : "closed",
         className: (0, import_typed_classname41.clsx)(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
-          { "hds-warning-banner--closed": !open },
           className
         ),
         onClick: () => {
@@ -2516,7 +2506,7 @@ var WarningBannerTitle = (0, import_react46.forwardRef)((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children })
       })
     );
   }
@@ -2532,10 +2522,11 @@ var WarningBannerTitle = (0, import_react46.forwardRef)((_a, ref) => {
 WarningBannerTitle.displayName = "WarningBannerTitle";
 var WarningBannerDescription = (0, import_react46.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "p",
       __spreadValues({
+        id,
         className: (0, import_typed_classname41.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
@@ -2554,6 +2545,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Box,
   BoxCloseButton,
   Breadcrumbs,
+  Button,
   Card,
   CardBody,
   CardBodyAction,
@@ -2566,7 +2558,6 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   CardMediaImg,
   Checkbox,
   Container,
-  DarkBadge,
   DatePicker,
   DescriptionList,
   ErrorMessage,
@@ -2602,10 +2593,8 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   NavbarLogoAndServiceText,
   NavbarNavigation,
   OrderedList,
-  PrimaryButton,
   RadioGroup,
   Radiobutton,
-  SecondaryButton,
   Select,
   ShowMoreButton,
   Skeleton,
@@ -2622,9 +2611,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Textarea,
   UnorderedList,
   VStack,
-  WarningBadge,
   WarningBanner,
-  WhiteBadge,
   focusTrap,
   useFieldsetContext,
   useHydrated,