@postenbring/hedwig-react 1.2.1 → 1.3.0

package/dist/form/error-summary/index.js

@@ -0,0 +1,375 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/form/error-summary/index.tsx
+var error_summary_exports = {};
+__export(error_summary_exports, {
+  ErrorSummary: () => ErrorSummary
+});
+module.exports = __toCommonJS(error_summary_exports);
+
+// src/form/error-summary/error-summary.tsx
+var import_react6 = require("react");
+
+// src/message/message.tsx
+var import_react2 = require("react");
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot2 = require("@radix-ui/react-slot");
+
+// src/box/box.tsx
+var import_react = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BoxCloseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      __spreadValues({
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
+        ref,
+        type: "button"
+      }, rest)
+    );
+  }
+);
+BoxCloseButton.displayName = "Box.CloseButton";
+var Box = (0, import_react.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_react.useState)(false);
+    const onClose = (0, import_react.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_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          variant && `hds-box--${variant}`,
+          { "hds-box--closed": closed },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
+        ]
+      })
+    );
+  }
+);
+Box.displayName = "Box";
+Box.CloseButton = BoxCloseButton;
+
+// src/message/message.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MessageTitle = (0, import_react2.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_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "Message.Title";
+var MessageDescription = (0, import_react2.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_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "Message.Description";
+var Message = (0, import_react2.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_runtime2.jsxs)(
+      Box,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname2.clsx)(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
+
+// src/list/list.tsx
+var import_react3 = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var UnorderedList = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "ul",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname3.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+UnorderedList.displayName = "UnorderedList";
+var OrderedList = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "medium", className } = _b, rest = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "ol",
+      __spreadValues({
+        ref,
+        className: (0, import_typed_classname3.clsx)("hds-list", `hds-list--${size}`, className)
+      }, rest)
+    );
+  }
+);
+OrderedList.displayName = "OrderedList";
+
+// src/link/link.tsx
+var React = require("react");
+var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
+var import_react4 = require("react");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Link = (0, import_react4.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_runtime4.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname4.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/utils/utils.ts
+var React2 = __toESM(require("react"));
+var import_react5 = require("react");
+function useMergeRefs(refs) {
+  return React2.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
+    }
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
+
+// 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_runtime5 = require("react/jsx-runtime");
+var ErrorSummaryHeading = (0, import_react6.forwardRef)((_a, ref) => {
+  var _b = _a, { children, as: Tag, autoFocus = true } = _b, rest = __objRest(_b, ["children", "as", "autoFocus"]);
+  const focusRef = (0, import_react6.useRef)(null);
+  const mergedRef = useMergeRefs([focusRef, ref]);
+  (0, import_react6.useEffect)(() => {
+    setTimeout(() => {
+      if (focusRef.current && autoFocus) {
+        focusRef.current.focus();
+      }
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message.Title, __spreadProps(__spreadValues({ ref: mergedRef, tabIndex: -1, asChild: true }, rest), { children: Tag ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, { children }) : children }));
+});
+ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
+var ErrorSummaryList = (0, import_react6.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_runtime5.jsx)(Message.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UnorderedList, __spreadProps(__spreadValues({ size, ref, style }, rest), { children })) });
+  }
+);
+ErrorSummaryList.displayName = "ErrorSummary.List";
+var ErrorSummaryItem = (0, import_react6.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_runtime5.jsx)("li", __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
+  }
+);
+ErrorSummaryItem.displayName = "ErrorSummary.Item";
+var ErrorSummary = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message, __spreadProps(__spreadValues({ variant: "warning", ref }, rest), { children }));
+  }
+);
+ErrorSummary.displayName = "ErrorSummary";
+ErrorSummary.Heading = ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Item = ErrorSummaryItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorSummary
+});
+//# sourceMappingURL=index.js.map

package/dist/form/error-summary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/form/error-summary/index.tsx","../../../src/form/error-summary/error-summary.tsx","../../../src/message/message.tsx","../../../src/box/box.tsx","../../../src/list/list.tsx","../../../src/link/link.tsx","../../../src/utils/utils.ts","../../../src/form/error-summary/focus.ts"],"sourcesContent":["export { ErrorSummary } from \"./error-summary\";\nexport type * from \"./error-summary\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { Message, type MessageProps, type MessageTitleProps } from \"../../message\";\nimport { UnorderedList, type ListProps } from \"../../list\";\nimport { Link } from \"../../link\";\nimport { useMergeRefs } from \"../../utils\";\nimport { focusWithLegendOrLabelInViewport } from \"./focus\";\n\ninterface ErrorSummaryHeadingPropsAutoFocus {\n  /**\n   * The heading will be focused when the component mounts\n   *\n   * On following errornous form submissions you should manually focus the heading\n   * e.g. by passing a ref and calling `ref.current.focus()`\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n}\n\ninterface ErrorSummaryHeadingPropsAs {\n  /**\n   * A heading level must be selected, or optionally opting out for a different element\n   *\n   * Use {@link ErrorSummaryHeadingPropsAsChild.asChild} if you need more control of the rendered element.\n   */\n  as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n  asChild?: never;\n}\n\ninterface ErrorSummaryHeadingPropsAsChild {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild: true;\n  as?: never;\n}\n\nexport type ErrorSummaryHeadingProps = MessageTitleProps &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n\n  useEffect(() => {\n    /**\n     * Hack: Safari 18 on mac at the time of writing\n     * does not correctly focus it with VoiceOver without the timeout\n     */\n    setTimeout(() => {\n      if (focusRef.current && autoFocus) {\n        focusRef.current.focus();\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on initial render\n  }, []);\n\n  return (\n    <Message.Title ref={mergedRef} tabIndex={-1} asChild {...rest}>\n      {Tag ? <Tag>{children}</Tag> : children}\n    </Message.Title>\n  );\n});\nErrorSummaryHeading.displayName = \"ErrorSummary.Heading\";\n\nexport interface ErrorSummaryListProps extends ListProps {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"small\"\n   */\n  size?: ListProps[\"size\"];\n}\nexport const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(\n  ({ children, style: _style, size = \"small\", ...rest }, ref) => {\n    const style = {\n      // Match the link `solid` style, which black underline\n      \"--_hds-list-marker-color\": \"var(--hds-ui-colors-black)\",\n      ..._style,\n    };\n    return (\n      <Message.Description asChild>\n        <UnorderedList size={size} ref={ref} style={style} {...rest}>\n          {children}\n        </UnorderedList>\n      </Message.Description>\n    );\n  },\n);\nErrorSummaryList.displayName = \"ErrorSummary.List\";\n\nexport interface ErrorSummaryItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  /**\n   * A hash link to the element that the error message refers to\n   *\n   * Must start with \"#\" as it's passed to the `href` attribute of an anchor element\n   *\n   * @example \"#email\"\n   */\n  href: `#${string}`;\n\n  /**\n   * Extra props to pass to the link element\n   */\n  linkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n}\nexport const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>(\n  ({ children, href, linkProps, ...rest }, ref) => {\n    function onClick(e: React.MouseEvent<HTMLAnchorElement>) {\n      linkProps?.onClick?.(e);\n      if (focusWithLegendOrLabelInViewport(href.replace(\"#\", \"\"))) {\n        e.preventDefault();\n      }\n    }\n\n    return (\n      <li ref={ref} {...rest}>\n        <Link size=\"small\" href={href} variant=\"solid\" {...linkProps} onClick={onClick}>\n          {children}\n        </Link>\n      </li>\n    );\n  },\n);\nErrorSummaryItem.displayName = \"ErrorSummary.Item\";\n\nexport type ErrorSummaryProps = Omit<MessageProps, \"variant\" | \"icon\" | \"iconClassName\">;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <Message variant=\"warning\" ref={ref} {...rest}>\n        {children}\n      </Message>\n    );\n  },\n) as ErrorSummaryType;\nErrorSummary.displayName = \"ErrorSummary\";\n\ntype ErrorSummaryType = ReturnType<typeof forwardRef<HTMLDivElement, ErrorSummaryProps>> & {\n  Heading: typeof ErrorSummaryHeading;\n  List: typeof ErrorSummaryList;\n  Item: typeof ErrorSummaryItem;\n};\nErrorSummary.Heading = ErrorSummaryHeading;\nErrorSummary.List = ErrorSummaryList;\nErrorSummary.Item = ErrorSummaryItem;\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\" | \"info\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n  Title: typeof MessageTitle;\n  Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\"hds-list\", `hds-list--${size}`, className as undefined)}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\"hds-list\", `hds-list--${size}`, className as undefined)}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\";\n\n  /**\n   * Font size of the link\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ asChild, children, variant = \"underline\", size = \"medium\", className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"medium\" && `hds-link--${size}`,\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n","/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n  const input = document.getElementById(id);\n  if (!input) {\n    return false;\n  }\n\n  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n  if (!legendOrLabel) {\n    return false;\n  }\n\n  legendOrLabel.scrollIntoView();\n  input.focus({ preventScroll: true });\n\n  return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n  const fieldset = input.closest(\"fieldset\");\n  if (!fieldset) {\n    return null;\n  }\n\n  const legend = fieldset.querySelector(\"legend\");\n  if (!legend) {\n    return null;\n  }\n\n  // If the input type is radio or checkbox, always use the legend if\n  // there is one.\n  if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n    return legend;\n  }\n\n  // For other input types, only scroll to the fieldset’s legend (instead\n  // of the label associated with the input) if the input would end up in\n  // the top half of the screen.\n  //\n  // This should avoid situations where the input either ends up off the\n  // screen, or obscured by a software keyboard.\n  const legendTop = legend.getBoundingClientRect().top;\n  const inputRect = input.getBoundingClientRect();\n\n  // If the browser doesn't support Element.getBoundingClientRect().height\n  // or window.innerHeight (like IE8), bail and just link to the label.\n  if (inputRect.height && window.innerHeight) {\n    const inputBottom = inputRect.top + inputRect.height;\n\n    if (inputBottom - legendTop < window.innerHeight / 2) {\n      return legend;\n    }\n  }\n}\n\nfunction labelForInput(input: HTMLElement) {\n  return (\n    document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n  );\n}\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react_slot","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime","React","import_react","import_jsx_runtime","_a"]}

package/dist/form/error-summary/index.mjs

@@ -0,0 +1,21 @@
+import "../../chunk-KPPLVGZ3.mjs";
+import {
+  ErrorSummary
+} from "../../chunk-VU2GCAM4.mjs";
+import "../../chunk-CKAL5ZJZ.mjs";
+import "../../chunk-CYDWEPFL.mjs";
+import "../../chunk-KCEWKQ4W.mjs";
+import "../../chunk-6QV3OV66.mjs";
+import "../../chunk-RC76SXBP.mjs";
+import "../../chunk-BYFBK3J7.mjs";
+import "../../chunk-ILFK3VKS.mjs";
+import "../../chunk-XLLYMQLW.mjs";
+import "../../chunk-VYS2QNTL.mjs";
+import "../../chunk-Z2ZCM4BE.mjs";
+import "../../chunk-LGEGXOPU.mjs";
+import "../../chunk-3OGHJOJF.mjs";
+import "../../chunk-YOSPWY5K.mjs";
+export {
+  ErrorSummary
+};
+//# sourceMappingURL=index.mjs.map

package/dist/form/error-summary/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form/fieldset/fieldset.d.ts

@@ -1,4 +1,5 @@
 import type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from "react";
+import { type ErrorMessageProps } from "../error-message";
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     className?: string;
     style?: CSSProperties;
@@ -14,6 +15,7 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
     };
     legend: ReactNode;
     children: ReactNode;
+    errorMessageProps?: Partial<ErrorMessageProps>;
 }
 export declare const useFieldsetContext: () => {
     hasError: boolean;

package/dist/form/fieldset/fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../src/form/fieldset/fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI9F,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE,CAAC;IAC1E,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID,eAAO,MAAM,kBAAkB;cAFmB,OAAO;CAEU,CAAC;AAEpE,eAAO,MAAM,QAAQ,+GAuCnB,CAAC"}
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../src/form/fieldset/fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;QAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;KAAE,CAAC;IAC1E,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAChD;AAID,eAAO,MAAM,kBAAkB;cAFmB,OAAO;CAEU,CAAC;AAEpE,eAAO,MAAM,QAAQ,+GA0CnB,CAAC"}

package/dist/form/fieldset/fieldset.js

@@ -66,7 +66,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
@@ -87,6 +87,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,
@@ -95,6 +96,7 @@ var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
     "className",
     "style",
     "errorMessage",
+    "errorMessageProps",
     "legendProps",
     "legend",
     "children"
@@ -123,7 +125,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 }))
       ]
     })
   );

package/dist/form/fieldset/fieldset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radio buttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA6D;AAE7D,IAAAC,0BAAqB;;;ACFrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ADevB,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_react","import_typed_classname","import_jsx_runtime","Fieldset"]}
+{"version":3,"sources":["../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage, type ErrorMessageProps } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radio buttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n  errorMessageProps?: Partial<ErrorMessageProps>;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    errorMessageProps,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId} {...errorMessageProps}>\n        {errorMessage}\n      </ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"polite\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA6D;AAE7D,IAAAC,0BAAqB;;;ACFrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ADiBvB,IAAAC,sBAAA;AApBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IAUA,KACA;AAXA,eAKe;AAAA,IAJb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA/BjG,IA0BE,IAKe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA/B5D,IA+BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAL/C,SAME;AAAA;AAAA,IACA;AAAA,EAjCJ,IA0BE,IAQK,iBARL,IAQK;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,6CAAa,IAAI,kBAAoB,oBAArC,EACE,yBACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["import_react","import_typed_classname","import_jsx_runtime","Fieldset"]}

package/dist/form/fieldset/fieldset.mjs

@@ -1,9 +1,9 @@
 import {
   Fieldset,
   useFieldsetContext
-} from "../../chunk-JQGB77SS.mjs";
+} from "../../chunk-Z2ZPTZ6F.mjs";
 import "../../chunk-NSLSA7F7.mjs";
-import "../../chunk-CC5QWW52.mjs";
+import "../../chunk-LHIG6RW7.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   Fieldset,

package/dist/form/fieldset/index.js

@@ -68,7 +68,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
@@ -89,6 +89,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,
@@ -97,6 +98,7 @@ var Fieldset = (0, import_react2.forwardRef)(function Fieldset2(_a, ref) {
     "className",
     "style",
     "errorMessage",
+    "errorMessageProps",
     "legendProps",
     "legend",
     "children"
@@ -125,7 +127,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 }))
       ]
     })
   );

package/dist/form/fieldset/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset, useFieldsetContext } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radio buttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6D;AAE7D,IAAAC,0BAAqB;;;ACFrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ADevB,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_react","import_typed_classname","import_jsx_runtime","Fieldset"]}
+{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset, useFieldsetContext } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage, type ErrorMessageProps } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radio buttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n  errorMessageProps?: Partial<ErrorMessageProps>;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    errorMessageProps,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId} {...errorMessageProps}>\n        {errorMessage}\n      </ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"polite\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA6D;AAE7D,IAAAC,0BAAqB;;;ACFrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ADiBvB,IAAAC,sBAAA;AApBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IAUA,KACA;AAXA,eAKe;AAAA,IAJb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA/BjG,IA0BE,IAKe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA/B5D,IA+BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAL/C,SAME;AAAA;AAAA,IACA;AAAA,EAjCJ,IA0BE,IAQK,iBARL,IAQK;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,6CAAa,IAAI,kBAAoB,oBAArC,EACE,yBACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["import_react","import_typed_classname","import_jsx_runtime","Fieldset"]}

package/dist/form/fieldset/index.mjs

@@ -2,9 +2,9 @@ import "../../chunk-LMF3QGSF.mjs";
 import {
   Fieldset,
   useFieldsetContext
-} from "../../chunk-JQGB77SS.mjs";
+} from "../../chunk-Z2ZPTZ6F.mjs";
 import "../../chunk-NSLSA7F7.mjs";
-import "../../chunk-CC5QWW52.mjs";
+import "../../chunk-LHIG6RW7.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   Fieldset,

package/dist/form/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./checkbox";
 export * from "./date-picker";
 export * from "./error-message";
+export * from "./error-summary";
 export * from "./fieldset";
 export * from "./input";
 export * from "./radio-button";

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}