@postenbring/hedwig-react 0.0.71 → 0.0.73

package/dist/index.js

@@ -89,6 +89,7 @@ __export(src_exports, {
   Grid: () => GridComponent,
   GridItem: () => GridItem,
   HStack: () => HStack,
+  HelpText: () => HelpText,
   Input: () => Input,
   Link: () => Link,
   LinkList: () => LinkList,
@@ -115,6 +116,7 @@ __export(src_exports, {
   Stack: () => Stack,
   StepIndicator: () => StepIndicator,
   StyledHtml: () => StyledHtml,
+  Table: () => Table,
   Tabs: () => TabsComponent,
   TabsContent: () => TabsContent,
   TabsContents: () => TabsContents,
@@ -403,20 +405,23 @@ BoxCloseButton.displayName = "Box.CloseButton";
 var BoxComponent = Box;
 BoxComponent.CloseButton = BoxCloseButton;
 
-// src/breadcrumb/breadcrumb.tsx
+// src/breadcrumbs/breadcrumbs.tsx
+var import_react7 = require("react");
 var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Breadcrumbs(_a) {
-  var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname7.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
-}
+var Breadcrumbs = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", __spreadProps(__spreadValues({}, olProps), { className: (0, import_typed_classname7.clsx)("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
+  }
+);
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/button/button.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var BaseButton = (0, import_react7.forwardRef)(
+var BaseButton = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "button",
@@ -437,9 +442,6 @@ var BaseButton = (0, import_react7.forwardRef)(
       "icon",
       "className"
     ]);
-    if (fill === "outlined") {
-      console.warn("The `fill` value `outlined` is deprecated, use `fill='outline'` instead");
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       Component,
       __spreadProps(__spreadValues({
@@ -448,7 +450,7 @@ var BaseButton = (0, import_react7.forwardRef)(
           `hds-button--${size}`,
           {
             [`hds-button--${variant}`]: fill === "contained",
-            [`hds-button--outline-${variant}`]: fill === "outline" || fill === "outlined",
+            [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
             "hds-button--icon-only": icon && !children
@@ -466,13 +468,13 @@ var BaseButton = (0, import_react7.forwardRef)(
   }
 );
 BaseButton.displayName = "BaseButton";
-var PrimaryButton = (0, import_react7.forwardRef)(
+var PrimaryButton = (0, import_react8.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
 );
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = (0, import_react7.forwardRef)(
+var SecondaryButton = (0, import_react8.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
   }
@@ -480,22 +482,22 @@ var SecondaryButton = (0, import_react7.forwardRef)(
 SecondaryButton.displayName = "SecondaryButton";
 
 // src/card/card.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Card = (0, import_react8.forwardRef)((_a, ref) => {
+var Card = (0, import_react9.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "section", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card", className), ref, children }));
 });
 Card.displayName = "Card";
-var CardMedia = (0, import_react8.forwardRef)(
+var CardMedia = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card__media", className), ref, children }));
   }
 );
 CardMedia.displayName = "Card.Media";
-var CardMediaImg = (0, import_react8.forwardRef)(
+var CardMediaImg = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "img", className } = _b, rest = __objRest(_b, ["as", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -508,14 +510,14 @@ var CardMediaImg = (0, import_react8.forwardRef)(
   }
 );
 CardMediaImg.displayName = "Card.Media.Img";
-var CardBody = (0, import_react8.forwardRef)(
+var CardBody = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname9.clsx)("hds-card__body", className), ref, children }));
   }
 );
 CardBody.displayName = "Card.Body";
-var CardBodyHeader = (0, import_react8.forwardRef)((_a, ref) => {
+var CardBodyHeader = (0, import_react9.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component, className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
@@ -527,7 +529,7 @@ var CardBodyHeader = (0, import_react8.forwardRef)((_a, ref) => {
   );
 });
 CardBodyHeader.displayName = "Card.Body.Header";
-var CardBodyHeaderOverline = (0, import_react8.forwardRef)((_a, ref) => {
+var CardBodyHeaderOverline = (0, import_react9.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "span", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
@@ -539,7 +541,7 @@ var CardBodyHeaderOverline = (0, import_react8.forwardRef)((_a, ref) => {
   );
 });
 CardBodyHeaderOverline.displayName = "Card.Body.Header.Overline";
-var CardBodyHeaderTitle = (0, import_react8.forwardRef)((_a, ref) => {
+var CardBodyHeaderTitle = (0, import_react9.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component, className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
@@ -551,7 +553,7 @@ var CardBodyHeaderTitle = (0, import_react8.forwardRef)((_a, ref) => {
   );
 });
 CardBodyHeaderTitle.displayName = "Card.Body.Header.Title";
-var CardBodyDescription = (0, import_react8.forwardRef)(
+var CardBodyDescription = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -565,7 +567,7 @@ var CardBodyDescription = (0, import_react8.forwardRef)(
   }
 );
 CardBodyDescription.displayName = "Card.Body.Description";
-var CardBodyAction = (0, import_react8.forwardRef)(
+var CardBodyAction = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, children } = _b, rest = __objRest(_b, ["as", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -579,7 +581,7 @@ var CardBodyAction = (0, import_react8.forwardRef)(
   }
 );
 CardBodyAction.displayName = "Card.Body.Action";
-var CardBodyActionArrow = (0, import_react8.forwardRef)((_a, ref) => {
+var CardBodyActionArrow = (0, import_react9.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "span", className } = _b, rest = __objRest(_b, ["as", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
@@ -608,33 +610,31 @@ CardComponent.Media = CardMediaComponent;
 CardComponent.Body = CardBodyComponent;
 
 // src/description-list/description-list.tsx
+var import_react10 = require("react");
 var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function DescriptionList(_a) {
-  var _b = _a, {
-    variant = "vertical",
-    className
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "dl",
-    __spreadValues({
-      className: (0, import_typed_classname10.clsx)(
-        "hds-description-list",
-        {
-          "hds-description-list--horizontal": variant === "horizontal"
-        },
-        className
-      )
-    }, rest)
-  );
-}
+var DescriptionList = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { variant = "vertical", className } = _b, rest = __objRest(_b, ["variant", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "dl",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname10.clsx)(
+          "hds-description-list",
+          {
+            "hds-description-list--horizontal": variant === "horizontal"
+          },
+          className
+        )
+      }, rest)
+    );
+  }
+);
 DescriptionList.displayName = "DescriptionList";
 
 // src/form/checkbox/checkbox.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/error-message/error-message.tsx
@@ -653,12 +653,12 @@ function ErrorMessage({ children, id, className }) {
 }
 
 // src/form/fieldset/fieldset.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldsetContext = (0, import_react9.createContext)({ hasError: false });
-var useFieldsetContext = () => (0, import_react9.useContext)(FieldsetContext);
-var Fieldset = (0, import_react9.forwardRef)(function Fieldset2(_a, ref) {
+var FieldsetContext = (0, import_react11.createContext)({ hasError: false });
+var useFieldsetContext = () => (0, import_react11.useContext)(FieldsetContext);
+var Fieldset = (0, import_react11.forwardRef)(function Fieldset2(_a, ref) {
   var _b = _a, {
     className,
     style,
@@ -675,7 +675,7 @@ var Fieldset = (0, import_react9.forwardRef)(function Fieldset2(_a, ref) {
     "legend",
     "children"
   ]);
-  const errorMessageId = (0, import_react9.useId)();
+  const errorMessageId = (0, import_react11.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "fieldset",
     __spreadProps(__spreadValues({
@@ -707,7 +707,7 @@ var Fieldset = (0, import_react9.forwardRef)(function Fieldset2(_a, ref) {
 
 // src/form/checkbox/checkbox.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = (0, import_react10.forwardRef)(
+var Checkbox = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "plain",
@@ -724,7 +724,7 @@ var Checkbox = (0, import_react10.forwardRef)(
       "children",
       "className"
     ]);
-    const errorMessageId = (0, import_react10.useId)();
+    const errorMessageId = (0, import_react12.useId)();
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_typed_classname13.clsx)("hds-checkbox-wrapper"), children: [
@@ -764,14 +764,14 @@ var Checkbox = (0, import_react10.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/form/date-picker/date-picker.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_typed_classname15 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/input-group/input-group.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_typed_classname14 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputGroup = (0, import_react11.forwardRef)(function InputGroup2(_a, ref) {
+var InputGroup = (0, import_react13.forwardRef)(function InputGroup2(_a, ref) {
   var _b = _a, {
     id,
     className,
@@ -796,8 +796,8 @@ var InputGroup = (0, import_react11.forwardRef)(function InputGroup2(_a, ref) {
     "readOnly",
     "children"
   ]);
-  const errorMessageId = (0, import_react11.useId)();
-  const inputId = (0, import_react11.useId)();
+  const errorMessageId = (0, import_react13.useId)();
+  const inputId = (0, import_react13.useId)();
   const renderInput = () => {
     var _a2;
     const inputProps = {
@@ -809,11 +809,11 @@ var InputGroup = (0, import_react11.forwardRef)(function InputGroup2(_a, ref) {
     if (typeof children === "function") {
       return children(inputProps);
     }
-    const input = import_react11.Children.toArray(children)[0];
-    if (!(0, import_react11.isValidElement)(input)) {
+    const input = import_react13.Children.toArray(children)[0];
+    if (!(0, import_react13.isValidElement)(input)) {
       return;
     }
-    return (0, import_react11.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
+    return (0, import_react13.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
       className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
     }));
   };
@@ -858,7 +858,7 @@ var InputGroup = (0, import_react11.forwardRef)(function InputGroup2(_a, ref) {
 
 // src/utils.ts
 var React2 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useMergeRefs(refs) {
   return React2.useMemo(() => {
     if (refs.every((ref) => ref === null)) {
@@ -876,16 +876,16 @@ function useMergeRefs(refs) {
   }, refs);
 }
 function useResize(ref) {
-  const [width, setWidth] = (0, import_react12.useState)(0);
-  const [height, setHeight] = (0, import_react12.useState)(0);
-  const handleResize = (0, import_react12.useCallback)(() => {
+  const [width, setWidth] = (0, import_react14.useState)(0);
+  const [height, setHeight] = (0, import_react14.useState)(0);
+  const handleResize = (0, import_react14.useCallback)(() => {
     var _a, _b, _c, _d;
     if ((ref == null ? void 0 : ref.current) !== null) {
       setWidth((_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0);
       setHeight((_d = (_c = ref == null ? void 0 : ref.current) == null ? void 0 : _c.offsetHeight) != null ? _d : 0);
     }
   }, [ref]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     window.addEventListener("load", handleResize);
     window.addEventListener("resize", handleResize);
     return () => {
@@ -893,7 +893,7 @@ function useResize(ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [ref, handleResize]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     handleResize();
   }, []);
   return { width, height };
@@ -912,7 +912,7 @@ function useHydrated() {
 
 // src/form/date-picker/date-picker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DatePicker = (0, import_react13.forwardRef)(function DatePicker2(_a, ref) {
+var DatePicker = (0, import_react15.forwardRef)(function DatePicker2(_a, ref) {
   var _b = _a, {
     className,
     variant,
@@ -936,7 +936,7 @@ var DatePicker = (0, import_react13.forwardRef)(function DatePicker2(_a, ref) {
     "readOnly",
     "calendarButtonTitle"
   ]);
-  const inputRef = (0, import_react13.useRef)(null);
+  const inputRef = (0, import_react15.useRef)(null);
   const mergedRef = useMergeRefs([inputRef, ref]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     InputGroup,
@@ -979,10 +979,10 @@ var DatePicker = (0, import_react13.forwardRef)(function DatePicker2(_a, ref) {
 DatePicker.displayName = "DatePicker";
 
 // src/form/input/input.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_typed_classname16 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Input = (0, import_react14.forwardRef)(function Input2(_a, ref) {
+var Input = (0, import_react16.forwardRef)(function Input2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputGroup,
@@ -1003,20 +1003,20 @@ var Input = (0, import_react14.forwardRef)(function Input2(_a, ref) {
 Input.displayName = "Input";
 
 // src/form/radiobutton/radiobutton.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_typed_classname17 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radiobutton/radiogroup.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react15.createContext)({
+var RadioGroupContext = (0, import_react17.createContext)({
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react15.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react15.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react17.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react17.forwardRef)(function RadioGroup2(_a, ref) {
   var _b = _a, { name, value, errorMessage, onChange, children } = _b, rest = __objRest(_b, ["name", "value", "errorMessage", "onChange", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
@@ -1035,7 +1035,7 @@ var isChecked = ({
     return value === selectedValue;
   return void 0;
 };
-var Radiobutton = (0, import_react16.forwardRef)(
+var Radiobutton = (0, import_react18.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -1097,10 +1097,10 @@ var Radiobutton = (0, import_react16.forwardRef)(
 Radiobutton.displayName = "Radiobutton";
 
 // src/form/select/select.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_typed_classname18 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Select = (0, import_react17.forwardRef)(function Select2(_a, ref) {
+var Select = (0, import_react19.forwardRef)(function Select2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, children } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     InputGroup,
@@ -1120,10 +1120,10 @@ var Select = (0, import_react17.forwardRef)(function Select2(_a, ref) {
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_typed_classname19 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Textarea = (0, import_react18.forwardRef)(function Textarea2(_a, ref) {
+var Textarea = (0, import_react20.forwardRef)(function Textarea2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     InputGroup,
@@ -1144,7 +1144,7 @@ var Textarea = (0, import_react18.forwardRef)(function Textarea2(_a, ref) {
 Textarea.displayName = "Textarea";
 
 // src/footer/footer.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_typed_classname22 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
 
@@ -1190,7 +1190,7 @@ LinkList.displayName = "LinkList";
 
 // src/footer/footer.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Footer = (0, import_react19.forwardRef)(
+var Footer = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant, asChild } = _b, rest = __objRest(_b, ["children", "className", "variant", "asChild"]);
     const Component = asChild ? import_react_slot.Slot : "footer";
@@ -1210,7 +1210,7 @@ var Footer = (0, import_react19.forwardRef)(
   }
 );
 Footer.displayName = "Footer";
-var FooterButtonLink = (0, import_react19.forwardRef)(
+var FooterButtonLink = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot.Slot : "a";
@@ -1231,7 +1231,7 @@ var FooterButtonLink = (0, import_react19.forwardRef)(
   }
 );
 FooterButtonLink.displayName = "FooterButton";
-var FooterLogo = (0, import_react19.forwardRef)(
+var FooterLogo = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot.Slot : "div";
@@ -1239,7 +1239,7 @@ var FooterLogo = (0, import_react19.forwardRef)(
   }
 );
 FooterLogo.displayName = "Footer.Logo";
-var FooterLinkSections = (0, import_react19.forwardRef)(
+var FooterLinkSections = (0, import_react21.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)(
@@ -1254,7 +1254,7 @@ var FooterLinkSections = (0, import_react19.forwardRef)(
   }
 );
 FooterLinkSections.displayName = "Footer.LinkSections";
-var FooterLinkSection = (0, import_react19.forwardRef)(
+var FooterLinkSection = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, { heading, children, className } = _b, rest = __objRest(_b, ["heading", "children", "className"]);
     const linkListChildren = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LinkList, { children });
@@ -1287,17 +1287,58 @@ FooterComponent.ButtonLink = FooterButtonLink;
 FooterComponent.LinkSections = FooterLinkSections;
 FooterComponent.LinkSection = FooterLinkSection;
 
-// src/layout/container/container.tsx
+// src/help-text/help-text.tsx
+var Popover = __toESM(require("@radix-ui/react-popover"));
 var import_typed_classname23 = require("@postenbring/hedwig-css/typed-classname");
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Container = (0, import_react20.forwardRef)(
+var HelpText = (0, import_react22.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, helpText, title, side = "top", align = "start", boxProps } = _b, rest = __objRest(_b, ["children", "className", "helpText", "title", "side", "align", "boxProps"]);
+    return (
+      // NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)
+      // In the future we can use the native popover api, but as of writing, though all browsers support it
+      // it's not far enough back to be used in production
+      // https://caniuse.com/mdn-html_elements_input_popovertarget
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Popover.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "button",
+          __spreadProps(__spreadValues({
+            ref,
+            className: (0, import_typed_classname23.clsx)("hds-help-text-button", className),
+            title,
+            type: "button"
+          }, rest), {
+            children
+          })
+        ) }),
+        /* @__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,
+          __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, {}) }),
+              helpText
+            ]
+          })
+        ) }) })
+      ] })
+    );
+  }
+);
+HelpText.displayName = "HelpText";
+
+// src/layout/container/container.tsx
+var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
+var import_react23 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Container = (0, import_react23.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className, children, variant } = _b, rest = __objRest(_b, ["as", "className", "children", "variant"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Component,
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_typed_classname23.clsx)(
+        className: (0, import_typed_classname24.clsx)(
           "hds-container",
           { "hds-container--slim": variant === "slim" },
           className
@@ -1311,9 +1352,9 @@ var Container = (0, import_react20.forwardRef)(
 Container.displayName = "Container";
 
 // src/layout/grid/grid.tsx
-var import_typed_classname24 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react21 = require("react");
+var import_react24 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
@@ -1335,17 +1376,17 @@ function getSpacingVariable(size) {
 }
 
 // src/layout/grid/grid.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Grid = (0, import_react21.forwardRef)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Grid = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_slot2.Slot : "div";
     const 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_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname24.clsx)("hds-grid", className),
+        className: (0, import_typed_classname25.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -1354,16 +1395,16 @@ var Grid = (0, import_react21.forwardRef)(
   }
 );
 Grid.displayName = "Grid";
-var GridItem = (0, import_react21.forwardRef)(
+var GridItem = (0, import_react24.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
     const Component = asChild ? import_react_slot2.Slot : "div";
     const 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_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname24.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname25.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -1379,11 +1420,11 @@ GridComponent.Item = GridItem;
 
 // src/layout/stack/stack.tsx
 var React5 = require("react");
-var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
-var import_react22 = require("react");
+var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
+var import_react25 = require("react");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Stack = (0, import_react22.forwardRef)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Stack = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -1412,11 +1453,11 @@ var Stack = (0, import_react22.forwardRef)(
     ]);
     const Component = asChild ? import_react_slot3.Slot : "div";
     const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-stack-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname25.clsx)("hds-stack", className),
+        className: (0, import_typed_classname26.clsx)("hds-stack", className),
         ref
       }, rest), {
         children
@@ -1425,27 +1466,27 @@ var Stack = (0, import_react22.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react22.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react25.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react22.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react25.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 
 // src/link/link.tsx
 var React6 = require("react");
-var import_typed_classname26 = require("@postenbring/hedwig-css/typed-classname");
-var import_react23 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Link = (0, import_react23.forwardRef)(
+var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
+var import_react26 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Link = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname26.clsx)(
+        className: (0, import_typed_classname27.clsx)(
           "hds-link",
           variant !== "underline" && `hds-link--${variant}`,
           size !== "medium" && `hds-link--${size}`,
@@ -1461,20 +1502,20 @@ var Link = (0, import_react23.forwardRef)(
 Link.displayName = "Link";
 
 // src/message/message.tsx
-var import_react24 = require("react");
-var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Message = (0, import_react24.forwardRef)(
+var import_react27 = require("react");
+var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Message = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       Box,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname27.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        className: (0, import_typed_classname28.clsx)(`hds-message`, `hds-message--${variant}`, className),
         ref
       }, rest), {
         children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_typed_classname27.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: (0, import_typed_classname28.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
         ]
       })
@@ -1482,26 +1523,26 @@ var Message = (0, import_react24.forwardRef)(
   }
 );
 Message.displayName = "Message";
-var MessageTitle = (0, import_react24.forwardRef)(
+var MessageTitle = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname27.clsx)("hds-message__title", className),
+        className: (0, import_typed_classname28.clsx)("hds-message__title", className),
         ref
       }, rest)
     );
   }
 );
 MessageTitle.displayName = "Message.Title";
-var MessageDescription = (0, import_react24.forwardRef)(
+var MessageDescription = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname27.clsx)("hds-message__description", className),
+        className: (0, import_typed_classname28.clsx)("hds-message__description", className),
         ref
       }, rest)
     );
@@ -1515,13 +1556,13 @@ MessageComponent.Title = MessageTitle;
 MessageComponent.Description = MessageDescription;
 
 // src/modal/modal.tsx
-var import_react25 = require("react");
-var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Modal = (0, import_react25.forwardRef)(
+var import_react28 = require("react");
+var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Modal = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = (0, import_react25.useRef)(null);
+    const modalRef = (0, import_react28.useRef)(null);
     const mergedRef = useMergeRefs([modalRef, ref]);
     function onCloseButtonClick() {
       var _a2;
@@ -1529,7 +1570,7 @@ var Modal = (0, import_react25.forwardRef)(
       return false;
     }
     useScrollLock(modalRef, "hds-modal-scroll-lock");
-    (0, import_react25.useEffect)(() => {
+    (0, import_react28.useEffect)(() => {
       if (modalRef.current && open !== void 0) {
         if (open && !modalRef.current.open) {
           modalRef.current.showModal();
@@ -1544,11 +1585,11 @@ var Modal = (0, import_react25.forwardRef)(
       }
       onClick == null ? void 0 : onClick(e);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Box,
       __spreadProps(__spreadValues({
         as: "dialog",
-        className: (0, import_typed_classname28.clsx)("hds-modal", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal", className),
         closeable: true,
         onClick: onDialogClick,
         onClose: onCloseButtonClick,
@@ -1561,39 +1602,39 @@ var Modal = (0, import_react25.forwardRef)(
   }
 );
 Modal.displayName = "Modal";
-var ModalHeader = (0, import_react25.forwardRef)(
+var ModalHeader = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "h1", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-modal__header", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal__header", className),
         ref
       }, rest)
     );
   }
 );
 ModalHeader.displayName = "Modal.Header";
-var ModalContent = (0, import_react25.forwardRef)(
+var ModalContent = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-modal__content", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal__content", className),
         ref
       }, rest)
     );
   }
 );
 ModalContent.displayName = "Modal.Content";
-var ModalFooter = (0, import_react25.forwardRef)(
+var ModalFooter = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "footer", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-modal__footer", className),
+        className: (0, import_typed_classname29.clsx)("hds-modal__footer", className),
         ref
       }, rest)
     );
@@ -1601,7 +1642,7 @@ var ModalFooter = (0, import_react25.forwardRef)(
 );
 ModalFooter.displayName = "Modal.Footer";
 function useScrollLock(modalRef, bodyClass) {
-  (0, import_react25.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!modalRef.current)
       return;
     if (modalRef.current.open)
@@ -1631,17 +1672,17 @@ ModalComponent.Content = ModalContent;
 ModalComponent.Footer = ModalFooter;
 
 // src/navbar/navbar.tsx
-var import_react26 = require("react");
-var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react29 = require("react");
+var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Navbar = (0, import_react26.forwardRef)(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Navbar = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "header",
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname29.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        className: (0, import_typed_classname30.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
         ref
       }, rest), {
         children
@@ -1650,22 +1691,22 @@ var Navbar = (0, import_react26.forwardRef)(
   }
 );
 Navbar.displayName = "Navbar";
-var NavbarLogo = (0, import_react26.forwardRef)(
+var NavbarLogo = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, __spreadValues({ className: (0, import_typed_classname29.clsx)("hds-navbar__logo", className), ref }, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Component, __spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__logo", className), ref }, rest));
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
-var NavbarLogoAndServiceText = (0, import_react26.forwardRef)(
+var NavbarLogoAndServiceText = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
     const Component = asChild ? import_react_slot4.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname29.clsx)(
+        className: (0, import_typed_classname30.clsx)(
           "hds-navbar__logo-and-service-text",
           `hds-navbar__logo-and-service-text--${variant}`,
           className
@@ -1677,10 +1718,10 @@ var NavbarLogoAndServiceText = (0, import_react26.forwardRef)(
   }
 );
 NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
-var NavbarButton = (0, import_react26.forwardRef)(
+var NavbarButton = (0, import_react29.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname29.clsx)("hds-navbar__button", className), ref }, rest), { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname30.clsx)("hds-navbar__button", className), ref }, rest), { children: [
       children,
       " ",
       icon
@@ -1688,12 +1729,12 @@ var NavbarButton = (0, import_react26.forwardRef)(
   }
 );
 NavbarButton.displayName = "Navbar.Button";
-var NavbarNavigation = (0, import_react26.forwardRef)((_a, ref) => {
+var NavbarNavigation = (0, import_react29.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "div", className } = _b, rest = __objRest(_b, ["as", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Component,
     __spreadValues({
-      className: (0, import_typed_classname29.clsx)("hds-navbar__navigation", className),
+      className: (0, import_typed_classname30.clsx)("hds-navbar__navigation", className),
       ref
     }, rest)
   );
@@ -1701,15 +1742,15 @@ var NavbarNavigation = (0, import_react26.forwardRef)((_a, ref) => {
 NavbarNavigation.displayName = "Navbar.Navigation";
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_react27 = require("react");
+var import_react30 = require("react");
 var import_client = require("react-dom/client");
-var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
 
 // src/navbar/icons.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { "aria-hidden": true, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "path",
     {
       d: "M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z",
@@ -1718,7 +1759,7 @@ function CloseIcon() {
   ) });
 }
 function MenuIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { role: "img", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { role: "img", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "path",
     {
       d: "M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z",
@@ -1728,32 +1769,32 @@ function MenuIcon() {
 }
 
 // src/navbar/navbar-expandable-menu.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var expandableMenuContext = (0, import_react27.createContext)([
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var expandableMenuContext = (0, import_react30.createContext)([
   false,
   () => {
   }
 ]);
-var useNavbarExpendableMenuContext = () => (0, import_react27.useContext)(expandableMenuContext);
+var useNavbarExpendableMenuContext = () => (0, import_react30.useContext)(expandableMenuContext);
 function NavbarExpandableMenu({ children }) {
-  const [open, setOpen] = (0, import_react27.useState)(false);
+  const [open, setOpen] = (0, import_react30.useState)(false);
   const isClientSide = useHydrated();
   const toggleOpen = () => {
     const nextOpenState = !open;
     setOpen(nextOpenState);
     if (nextOpenState) {
       window.scrollTo(0, 0);
-      document.body.classList.add((0, import_typed_classname30.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.add((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
     } else {
-      document.body.classList.remove((0, import_typed_classname30.clsx)("hds-navbar-scroll-lock"));
+      document.body.classList.remove((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
-    open && isClientSide ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
+    open && isClientSide ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_focus_trap_react.default,
       {
         containerElements: [
-          document.getElementsByClassName((0, import_typed_classname30.clsx)("hds-navbar"))[0]
+          document.getElementsByClassName((0, import_typed_classname31.clsx)("hds-navbar"))[0]
         ]
       }
     ) : null,
@@ -1781,12 +1822,12 @@ function RenderButton(_a) {
     "toggleOpen",
     "width"
   ]);
-  const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuIcon, {});
+  const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
   const style = width ? { width } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname30.clsx)("hds-navbar__button", className),
+      className: (0, import_typed_classname31.clsx)("hds-navbar__button", className),
       onClick: toggleOpen,
       ref: ref != null ? ref : innerRef,
       style,
@@ -1794,14 +1835,14 @@ function RenderButton(_a) {
       type: "button"
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname30.clsx)("hds-navbar__button-responsive-text"), children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-navbar__button-responsive-text"), children: text }),
         " ",
         icon
       ]
     })
   );
 }
-var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
+var NavbarExpandableMenuTrigger = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       whenClosedText,
@@ -1817,8 +1858,8 @@ var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
       "className"
     ]);
     const [open, toggleOpen] = useNavbarExpendableMenuContext();
-    const [width, setWidth] = (0, import_react27.useState)(0);
-    const measureButtonRef = (0, import_react27.useRef)(null);
+    const [width, setWidth] = (0, import_react30.useState)(0);
+    const measureButtonRef = (0, import_react30.useRef)(null);
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const measureButton = (element, callback) => {
@@ -1836,9 +1877,9 @@ var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
       };
       setTimeout(getWidth, 0);
     };
-    (0, import_react27.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       measureButton(
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RenderButton,
           __spreadValues({
             className: className ? className : "",
@@ -1849,7 +1890,7 @@ var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
         ),
         (closedWidth) => {
           measureButton(
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               RenderButton,
               __spreadValues({
                 className: className ? className : "",
@@ -1866,7 +1907,7 @@ var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
         }
       );
     }, [className, rest, title, whenClosedText, whenOpenText]);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       RenderButton,
       __spreadValues({
         className: className ? className : "",
@@ -1881,17 +1922,17 @@ var NavbarExpandableMenuTrigger = (0, import_react27.forwardRef)(
   }
 );
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
-var NavbarExpandableMenuContent = (0, import_react27.forwardRef)((_a, ref) => {
+var NavbarExpandableMenuContent = (0, import_react30.forwardRef)((_a, ref) => {
   var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
   const [open] = useNavbarExpendableMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_typed_classname30.clsx)("hds-navbar__expandable-menu-content", className),
+      className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed",
       inert: open ? void 0 : "true",
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname30.clsx)("hds-navbar__expandable-menu-content-inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
@@ -1909,71 +1950,91 @@ NavbarComponent.Button = NavbarButton;
 NavbarComponent.Navigation = NavbarNavigation;
 
 // src/utilities/auto-animate-height.tsx
-var import_react28 = require("react");
-var import_react_dom = require("react-dom");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var animationDurationToValue = {
-  quick: 100,
-  normal: 300,
-  slow: 700
-};
-var AutoAnimateHeight = (0, import_react28.forwardRef)(
+var import_react31 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var AutoAnimateHeight = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
       children,
       style,
       animationDuration = "quick",
-      animationEasing = "normal"
+      animationEasing = "normal",
+      onTransitionEnd
     } = _b, rest = __objRest(_b, [
       "as",
       "children",
       "style",
       "animationDuration",
-      "animationEasing"
+      "animationEasing",
+      "onTransitionEnd"
     ]);
-    const timeoutRef = (0, import_react28.useRef)(null);
-    const measurementRef = (0, import_react28.useRef)(null);
-    const [height, setHeight] = (0, import_react28.useState)(void 0);
-    const [clonedChildren, setClonedChildren] = (0, import_react28.useState)(
-      () => (0, import_react28.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children }), {})
+    var _a2, _b2;
+    const rootRef = (0, import_react31.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react31.useRef)(null);
+    const [height, setHeight] = (0, import_react31.useState)(
+      void 0
     );
-    (0, import_react28.useEffect)(() => {
-      if (measurementRef.current) {
-        const { height: newHeight } = measurementRef.current.getBoundingClientRect();
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (newHeight < (height != null ? height : 0)) {
-          setTimeout(() => {
-            (0, import_react_dom.flushSync)(() => {
-              setHeight(newHeight);
-            });
-            timeoutRef.current = setTimeout(() => {
-              setClonedChildren((0, import_react28.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children }), {}));
-            }, animationDurationToValue[animationDuration]);
-          });
-        } else {
-          setHeight(newHeight);
-          setClonedChildren((0, import_react28.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children }), {}));
-        }
+    const [clonedChildren, setClonedChildren] = (0, import_react31.useState)(
+      () => (0, import_react31.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children }), {})
+    );
+    (0, import_react31.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_react31.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_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Component,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
+        onTransitionEnd,
         style: __spreadValues({
           position: "relative",
           overflow: "hidden",
-          height,
-          transitionProperty: "height",
+          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})`
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height"
         }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -1994,17 +2055,17 @@ var AutoAnimateHeight = (0, import_react28.forwardRef)(
 AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/show-more/show-more.tsx
-var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
-var import_react29 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ShowMoreButton = (0, import_react29.forwardRef)(
+var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
+var import_react32 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ShowMoreButton = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname31.clsx)(
+        className: (0, import_typed_classname32.clsx)(
           "hds-show-more",
           variant === "show-more-show-less" && "hds-show-more--show-less",
           className
@@ -2014,7 +2075,7 @@ var ShowMoreButton = (0, import_react29.forwardRef)(
       }, rest), {
         children: [
           text,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-show-more__icon") })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: (0, import_typed_classname32.clsx)("hds-show-more__icon") })
         ]
       })
     );
@@ -2024,10 +2085,10 @@ ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
 var React10 = require("react");
-var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
-var import_react30 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Skeleton = (0, import_react30.forwardRef)(
+var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
+var import_react33 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Skeleton = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
@@ -2048,10 +2109,10 @@ var Skeleton = (0, import_react30.forwardRef)(
       "className",
       "style"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname32.clsx)(
+        className: (0, import_typed_classname33.clsx)(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
           !animation && `hds-skeleton--no-animation`,
@@ -2069,10 +2130,10 @@ var Skeleton = (0, import_react30.forwardRef)(
 Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
-var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
-var import_react31 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var StepIndicator = (0, import_react31.forwardRef)(
+var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
+var import_react34 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var StepIndicator = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       activeStep,
@@ -2091,27 +2152,27 @@ var StepIndicator = (0, import_react31.forwardRef)(
       "title",
       "titleAs"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: (0, import_typed_classname33.clsx)("hds-step-indicator", className),
+        className: (0, import_typed_classname34.clsx)("hds-step-indicator", className),
         lang
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_typed_classname33.clsx)("hds-step-indicator__header"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: (0, import_typed_classname33.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.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.jsx)("div", { className: (0, import_typed_classname33.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__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)(
             "div",
             {
-              className: (0, import_typed_classname33.clsx)("hds-step-indicator__step"),
+              className: (0, import_typed_classname34.clsx)("hds-step-indicator__step"),
               "data-state": getStepState(i + 1, activeStep)
             },
             i
           )) }),
-          title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TitleComponent, { className: (0, import_typed_classname33.clsx)("hds-step-indicator__title"), children: title }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TitleComponent, { className: (0, import_typed_classname34.clsx)("hds-step-indicator__title"), children: title }) : null
         ]
       })
     );
@@ -2135,16 +2196,16 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react32 = require("react");
-var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react32.forwardRef)(
+var import_react35 = require("react");
+var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var StyledHtml = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname34.clsx)(
+        className: (0, import_typed_classname35.clsx)(
           `hds-styled-html`,
           size === "small" && "hds-styled-html--small",
           darkmode && "hds-styled-html--darkmode",
@@ -2159,15 +2220,50 @@ var StyledHtml = (0, import_react32.forwardRef)(
 );
 StyledHtml.displayName = "StyledHtml";
 
+// src/table/table.tsx
+var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
+var import_react36 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Table = (0, import_react36.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
+    const descriptionId = (0, import_react36.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({
+          "aria-describedby": description ? descriptionId : void 0,
+          ref,
+          className: (0, import_typed_classname36.clsx)(
+            "hds-table",
+            {
+              "hds-table--compressed": size === "compressed",
+              "hds-table--mobile-compressed": size === "mobile-compressed"
+            },
+            className
+          )
+        }, rest), {
+          children: [
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime39.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
+    ] });
+  }
+);
+Table.displayName = "Table";
+
 // src/tabs/tabs.tsx
-var import_react34 = require("react");
-var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
+var import_react38 = require("react");
+var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
-var import_react33 = require("react");
-var TabsContext = (0, import_react33.createContext)(null);
+var import_react37 = require("react");
+var TabsContext = (0, import_react37.createContext)(null);
 function useTabsContext() {
-  const context = (0, import_react33.useContext)(TabsContext);
+  const context = (0, import_react37.useContext)(TabsContext);
   if (!context) {
     throw new Error(
       "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?"
@@ -2177,30 +2273,30 @@ function useTabsContext() {
 }
 
 // src/tabs/tabs.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var Tabs = (0, import_react34.forwardRef)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Tabs = (0, import_react38.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react34.useState)(defaultTab);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname35.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
+    const [activeTabId, setActiveTabId] = (0, import_react38.useState)(defaultTab);
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname37.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TabsContext.Provider, { value: { activeTabId, toggleActiveTabId: setActiveTabId }, children }) }));
   }
 );
 Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
-var import_react35 = require("react");
-var import_typed_classname36 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function TabsList(_a) {
   var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
   const { activeTabId } = useTabsContext();
-  const tabsListRef = (0, import_react35.useRef)(null);
+  const tabsListRef = (0, import_react39.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
   const isClientSide = useHydrated();
   const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
   const wideEnough = innerWidth >= tabsWidth;
-  const previousTabId = (0, import_react35.useRef)(activeTabId);
-  (0, import_react35.useEffect)(() => {
+  const previousTabId = (0, import_react39.useRef)(activeTabId);
+  (0, import_react39.useEffect)(() => {
     const tabList = tabsListRef.current;
     const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
     if (!activeTab || !tabList)
@@ -2225,10 +2321,10 @@ function TabsList(_a) {
     }
     previousTabId.current = activeTabId;
   }, [activeTabId, innerWidth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname36.clsx)(
+      className: (0, import_typed_classname38.clsx)(
         "hds-tabs__list",
         direction === "horizontal" ? {
           "hds-tabs__list--horizontal": wideEnough,
@@ -2246,7 +2342,7 @@ function TabsList(_a) {
   );
 }
 TabsList.displayName = "Tabs.List";
-var TabsTab = (0, import_react35.forwardRef)(
+var TabsTab = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
     const context = useTabsContext();
@@ -2255,10 +2351,10 @@ var TabsTab = (0, import_react35.forwardRef)(
       context.toggleActiveTabId(tabId);
       onClick && onClick(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname36.clsx)(
+        className: (0, import_typed_classname38.clsx)(
           "hds-tabs__tab",
           { "hds-tabs__tab--active": context.activeTabId === tabId },
           className
@@ -2276,20 +2372,20 @@ var TabsTab = (0, import_react35.forwardRef)(
 TabsTab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
-var import_react36 = require("react");
-var import_typed_classname37 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function TabsContents(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname37.clsx)("hds-tabs__contents") }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname39.clsx)("hds-tabs__contents") }, rest), { children }));
 }
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react36.forwardRef)(
+var TabsContent = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
     const context = useTabsContext();
     if (context.activeTabId === forTabId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadProps(__spreadValues({}, rest), { ref, children }));
     }
     return null;
   }
@@ -2304,9 +2400,9 @@ TabsComponent.Contents = TabsContents;
 TabsComponent.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react37 = require("react");
-var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_react41 = require("react");
+var import_typed_classname40 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",
   h1: "h1",
@@ -2322,7 +2418,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react37.forwardRef)(
+var Text = (0, import_react41.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as,
@@ -2341,10 +2437,10 @@ var Text = (0, import_react37.forwardRef)(
     ]);
     const Component = as != null ? as : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname38.clsx)(
+        className: (0, import_typed_classname40.clsx)(
           `hds-text-${variant}`,
           sizeModifier && `hds-text--${sizeModifier}`,
           spacing && "hds-text--spacing",
@@ -2360,7 +2456,7 @@ var Text = (0, import_react37.forwardRef)(
 Text.displayName = "Text";
 
 // src/text/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TextH1Display = textVariant("h1-display", "TextH1Display");
 var TextH1 = textVariant("h1", "TextH1");
 var TextH2 = textVariant("h2", "TextH2");
@@ -2391,28 +2487,28 @@ var variantToHtmlTag = {
 };
 function textVariant(variant, displayName) {
   function WrappedText(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, __spreadValues({ variant, as: variantToHtmlTag[variant != null ? variant : "body"] }, props));
   }
   WrappedText.displayName = displayName;
   return WrappedText;
 }
 
 // src/warning-banner/warning-banner.tsx
-var import_react38 = require("react");
-var import_typed_classname39 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react38.forwardRef)(
+var import_react42 = require("react");
+var import_typed_classname41 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var WarningBanner = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname39.clsx)("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
-      expandable ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WarningBannerDescription, { children: description }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(BoxComponent, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname41.clsx)("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(WarningBannerDescription, { children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react38.forwardRef)(
+var WarningBannerTitle = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant,
@@ -2425,12 +2521,12 @@ var WarningBannerTitle = (0, import_react38.forwardRef)(
       "children",
       "className"
     ]);
-    const [open, setOpen] = (0, import_react38.useState)(false);
+    const [open, setOpen] = (0, import_react42.useState)(false);
     if (variant === "expandable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Component,
         __spreadProps(__spreadValues({
-          className: (0, import_typed_classname39.clsx)(
+          className: (0, import_typed_classname41.clsx)(
             "hds-warning-banner__title",
             "hds-warning-banner__title-trigger",
             { "hds-warning-banner--closed": !open },
@@ -2442,14 +2538,14 @@ var WarningBannerTitle = (0, import_react38.forwardRef)(
           ref,
           type: "button"
         }, rest), {
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children })
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname39.clsx)("hds-warning-banner__title", className),
+        className: (0, import_typed_classname41.clsx)("hds-warning-banner__title", className),
         ref
       }, rest), {
         children
@@ -2458,13 +2554,13 @@ var WarningBannerTitle = (0, import_react38.forwardRef)(
   }
 );
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react38.forwardRef)(
+var WarningBannerDescription = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Component,
       __spreadValues({
-        className: (0, import_typed_classname39.clsx)("hds-warning-banner__description", className),
+        className: (0, import_typed_classname41.clsx)("hds-warning-banner__description", className),
         ref
       }, rest)
     );
@@ -2503,6 +2599,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Grid,
   GridItem,
   HStack,
+  HelpText,
   Input,
   Link,
   LinkList,
@@ -2529,6 +2626,7 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
   Stack,
   StepIndicator,
   StyledHtml,
+  Table,
   Tabs,
   TabsContent,
   TabsContents,