@postenbring/hedwig-react 1.2.1 → 1.3.0

package/dist/form/index.js

@@ -62,6 +62,7 @@ __export(form_exports, {
   Checkbox: () => Checkbox,
   DatePicker: () => DatePicker,
   ErrorMessage: () => ErrorMessage,
+  ErrorSummary: () => ErrorSummary,
   Fieldset: () => Fieldset,
   Input: () => Input,
   RadioButton: () => RadioButton,
@@ -87,7 +88,7 @@ var ErrorMessage = (0, import_react.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       __spreadProps(__spreadValues({
-        "aria-live": "assertive",
+        "aria-live": "polite",
         className: (0, import_typed_classname.clsx)("hds-error-message", className),
         id,
         ref
@@ -110,6 +111,7 @@ var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
     className,
     style,
     errorMessage,
+    errorMessageProps,
     legendProps: _c = {}
   } = _b, _d = _c, { size: legendSize = "default", className: legendClassName } = _d, legendProps = __objRest(_d, ["size", "className"]), _e = _b, {
     legend,
@@ -118,6 +120,7 @@ var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
     "className",
     "style",
     "errorMessage",
+    "errorMessageProps",
     "legendProps",
     "legend",
     "children"
@@ -146,7 +149,7 @@ var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
           })
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
@@ -160,6 +163,7 @@ var Checkbox = (0, import_react3.forwardRef)(
       variant = "plain",
       hasError: hasErrorProp,
       errorMessage,
+      errorMessageProps,
       title,
       children,
       className
@@ -167,6 +171,7 @@ var Checkbox = (0, import_react3.forwardRef)(
       "variant",
       "hasError",
       "errorMessage",
+      "errorMessageProps",
       "title",
       "children",
       "className"
@@ -204,7 +209,7 @@ var Checkbox = (0, import_react3.forwardRef)(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
     ] });
   }
 );
@@ -225,6 +230,7 @@ var InputGroup = (0, import_react4.forwardRef)(function InputGroup2(_a, ref) {
     style,
     variant = "default",
     errorMessage,
+    errorMessageProps,
     labelProps: _c = {}
   } = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
     label,
@@ -237,6 +243,7 @@ var InputGroup = (0, import_react4.forwardRef)(function InputGroup2(_a, ref) {
     "style",
     "variant",
     "errorMessage",
+    "errorMessageProps",
     "labelProps",
     "label",
     "disabled",
@@ -297,7 +304,7 @@ var InputGroup = (0, import_react4.forwardRef)(function InputGroup2(_a, ref) {
             children: renderInput()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, __spreadProps(__spreadValues({ id: errorMessageId }, errorMessageProps), { children: errorMessage }))
       ]
     })
   );
@@ -391,16 +398,302 @@ var DatePicker = (0, import_react6.forwardRef)(function DatePicker2(_a, ref) {
 });
 DatePicker.displayName = "DatePicker";
 
-// src/form/input/input.tsx
+// src/form/error-summary/error-summary.tsx
+var import_react11 = require("react");
+
+// src/message/message.tsx
+var import_react8 = require("react");
+var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot2 = require("@radix-ui/react-slot");
+
+// src/box/box.tsx
 var import_react7 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Input = (0, import_react7.forwardRef)(function Input2(_a, ref) {
+var BoxCloseButton = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "Box.CloseButton";
+var Box = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      asChild,
+      variant,
+      closeable = false,
+      onClose: onCloseProp,
+      closed: closedProp,
+      closeButtonProps,
+      children,
+      className
+    } = _b, rest = __objRest(_b, [
+      "asChild",
+      "variant",
+      "closeable",
+      "onClose",
+      "closed",
+      "closeButtonProps",
+      "children",
+      "className"
+    ]);
+    const [closedState, setClosedState] = (0, import_react7.useState)(false);
+    const onClose = (0, import_react7.useCallback)(() => {
+      if (onCloseProp) {
+        const result = onCloseProp();
+        if (result === true) {
+          setClosedState(true);
+        }
+      } else {
+        setClosedState(true);
+      }
+    }, []);
+    const closed = closedProp != null ? closedProp : closedState;
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname6.clsx)(
+          "hds-box",
+          variant && `hds-box--${variant}`,
+          { "hds-box--closed": closed },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_slot.Slottable, { children })
+        ]
+      })
+    );
+  }
+);
+Box.displayName = "Box";
+Box.CloseButton = BoxCloseButton;
+
+// src/message/message.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MessageTitle = (0, import_react8.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot2.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname7.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "Message.Title";
+var MessageDescription = (0, import_react8.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? import_react_slot2.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname7.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "Message.Description";
+var Message = (0, import_react8.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_runtime7.jsxs)(
+      Box,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname7.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_typed_classname7.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
+
+// src/list/list.tsx
+var import_react9 = require("react");
+var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var UnorderedList = (0, import_react9.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "ul",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname8.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+UnorderedList.displayName = "UnorderedList";
+var OrderedList = (0, import_react9.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "ol",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname8.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+OrderedList.displayName = "OrderedList";
+
+// src/link/link.tsx
+var React2 = require("react");
+var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
+var import_react10 = require("react");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Link = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "className"]);
+    const Component = asChild ? import_react_slot3.Slot : "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname9.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/form/error-summary/focus.ts
+function focusWithLegendOrLabelInViewport(id) {
+  var _a;
+  const input = document.getElementById(id);
+  if (!input) {
+    return false;
+  }
+  const legendOrLabel = (_a = maybeLegendForInput(input)) != null ? _a : labelForInput(input);
+  if (!legendOrLabel) {
+    return false;
+  }
+  legendOrLabel.scrollIntoView();
+  input.focus({ preventScroll: true });
+  return true;
+}
+function maybeLegendForInput(input) {
+  const fieldset = input.closest("fieldset");
+  if (!fieldset) {
+    return null;
+  }
+  const legend = fieldset.querySelector("legend");
+  if (!legend) {
+    return null;
+  }
+  if (input instanceof HTMLInputElement && (input.type === "checkbox" || input.type === "radio")) {
+    return legend;
+  }
+  const legendTop = legend.getBoundingClientRect().top;
+  const inputRect = input.getBoundingClientRect();
+  if (inputRect.height && window.innerHeight) {
+    const inputBottom = inputRect.top + inputRect.height;
+    if (inputBottom - legendTop < window.innerHeight / 2) {
+      return legend;
+    }
+  }
+}
+function labelForInput(input) {
+  var _a;
+  return (_a = document.querySelector(`label[for='${input.getAttribute("id")}']`)) != null ? _a : input.closest("label");
+}
+
+// src/form/error-summary/error-summary.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ErrorSummaryHeading = (0, import_react11.forwardRef)((_a, ref) => {
+  var _b = _a, { children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["children", "as", "autoFocus"]);
+  const focusRef = (0, import_react11.useRef)(null);
+  const mergedRef = useMergeRefs([focusRef, ref]);
+  (0, import_react11.useEffect)(() => {
+    setTimeout(() => {
+      if (focusRef.current && autoFocus) {
+        focusRef.current.focus();
+      }
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Message.Title, __spreadProps(__spreadValues({ ref: mergedRef, tabIndex: -1, asChild: true }, rest), { children: Tag ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tag, { children }) : children }));
+});
+ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
+var ErrorSummaryList = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, style: _style, size = "small" } = _b, rest = __objRest(_b, ["children", "style", "size"]);
+    const style = __spreadValues({
+      // Match the link `solid` style, which black underline
+      "--_hds-list-marker-color": "var(--hds-ui-colors-black)"
+    }, _style);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
+  }
+);
+ErrorSummaryList.displayName = "ErrorSummary.List";
+var ErrorSummaryItem = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, href, linkProps } = _b, rest = __objRest(_b, ["children", "href", "linkProps"]);
+    function onClick(e) {
+      var _a2;
+      (_a2 = linkProps == null ? void 0 : linkProps.onClick) == null ? void 0 : _a2.call(linkProps, e);
+      if (focusWithLegendOrLabelInViewport(href.replace("#", ""))) {
+        e.preventDefault();
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
+  }
+);
+ErrorSummaryItem.displayName = "ErrorSummary.Item";
+var ErrorSummary = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Message, __spreadProps(__spreadValues({ variant: "warning", ref }, rest), { children }));
+  }
+);
+ErrorSummary.displayName = "ErrorSummary";
+ErrorSummary.Heading = ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Item = ErrorSummaryItem;
+
+// src/form/input/input.tsx
+var import_react12 = require("react");
+var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Input = (0, import_react12.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_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname6.clsx)("hds-input", className),
+      className: (0, import_typed_classname10.clsx)("hds-input", className),
       disabled,
       errorMessage,
       id,
@@ -409,35 +702,35 @@ var Input = (0, import_react7.forwardRef)(function Input2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
 Input.displayName = "Input";
 
 // src/form/radio-button/radio-button.tsx
-var import_react9 = require("react");
-var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
+var import_react14 = require("react");
+var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radio-button/radio-group.tsx
-var import_react8 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react8.createContext)({
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react13.createContext)({
   name: void 0,
   hasError: false,
   onChange: () => {
     return void 0;
   }
 });
-var useRadioGroupContext = () => (0, import_react8.useContext)(RadioGroupContext);
-var RadioGroup = (0, import_react8.forwardRef)(function RadioGroup2(_a, ref) {
+var useRadioGroupContext = () => (0, import_react13.useContext)(RadioGroupContext);
+var RadioGroup = (0, import_react13.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_runtime7.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
 RadioGroup.displayName = "RadioGroup";
 
 // src/form/radio-button/radio-button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var isChecked = ({
   checked,
   selectedValue,
@@ -447,7 +740,7 @@ var isChecked = ({
   if (typeof selectedValue !== "undefined") return value === selectedValue;
   return void 0;
 };
-var RadioButton = (0, import_react9.forwardRef)(
+var RadioButton = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -475,10 +768,10 @@ var RadioButton = (0, import_react9.forwardRef)(
     ]);
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
-        className: (0, import_typed_classname7.clsx)(
+        className: (0, import_typed_classname11.clsx)(
           "hds-radio-button",
           {
             [`hds-radio-button--${variant}`]: variant === "bounding-box",
@@ -487,8 +780,8 @@ var RadioButton = (0, import_react9.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "input",
               __spreadProps(__spreadValues(__spreadValues({}, context), rest), {
                 checked: isChecked({ checked, selectedValue, value }),
@@ -497,8 +790,8 @@ var RadioButton = (0, import_react9.forwardRef)(
                 type: "radio"
               })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
-            title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "hds-radio-button__checkmark" }),
+            title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "hds-radio-button__title", children: title }) : children
           ] }),
           title ? children : null
         ]
@@ -509,15 +802,15 @@ var RadioButton = (0, import_react9.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // src/form/select/select.tsx
-var import_react10 = require("react");
-var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
+var import_react15 = require("react");
+var import_typed_classname12 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Select = (0, import_react15.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_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname8.clsx)("hds-select", className),
+      className: (0, import_typed_classname12.clsx)("hds-select", className),
       disabled,
       errorMessage,
       id,
@@ -525,22 +818,22 @@ var Select = (0, import_react10.forwardRef)(function Select2(_a, ref) {
       labelProps,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
     }
   );
 });
 Select.displayName = "Select";
 
 // src/form/textarea/textarea.tsx
-var import_react11 = require("react");
-var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Textarea = (0, import_react11.forwardRef)(function Textarea2(_a, ref) {
+var import_react16 = require("react");
+var import_typed_classname13 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Textarea = (0, import_react16.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_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname9.clsx)("hds-textarea", className),
+      className: (0, import_typed_classname13.clsx)("hds-textarea", className),
       disabled,
       errorMessage,
       id,
@@ -549,7 +842,7 @@ var Textarea = (0, import_react11.forwardRef)(function Textarea2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
@@ -559,6 +852,7 @@ Textarea.displayName = "Textarea";
   Checkbox,
   DatePicker,
   ErrorMessage,
+  ErrorSummary,
   Fieldset,
   Input,
   RadioButton,