@postenbring/hedwig-react 1.2.2 → 1.3.0

package/dist/index.mjs

@@ -1,27 +1,23 @@
-import "./chunk-3D2MWIEX.mjs";
-import {
-  WarningBanner
-} from "./chunk-EMQB6JIS.mjs";
 import "./chunk-CSXSUQ2M.mjs";
 import {
   Text
 } from "./chunk-DMOMTRIY.mjs";
-import "./chunk-CYDWEPFL.mjs";
+import "./chunk-3D2MWIEX.mjs";
 import {
-  AutoAnimateHeight
-} from "./chunk-KCEWKQ4W.mjs";
+  WarningBanner
+} from "./chunk-EMQB6JIS.mjs";
 import "./chunk-7YWW46R3.mjs";
 import {
   Tabs
-} from "./chunk-Z2TMKU5V.mjs";
-import {
-  TabsList,
-  TabsTab
-} from "./chunk-J5SCUELT.mjs";
+} from "./chunk-KNGG6M2I.mjs";
 import {
   TabsContent,
   TabsContents
 } from "./chunk-35QRZSEV.mjs";
+import {
+  TabsList,
+  TabsTab
+} from "./chunk-J5SCUELT.mjs";
 import "./chunk-KQITCS3U.mjs";
 import "./chunk-AJFQHFQT.mjs";
 import {
@@ -65,16 +61,6 @@ import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton
 } from "./chunk-WLESNP6Z.mjs";
-import "./chunk-XLLYMQLW.mjs";
-import {
-  Link
-} from "./chunk-VYS2QNTL.mjs";
-import "./chunk-RC76SXBP.mjs";
-import {
-  Message,
-  MessageDescription,
-  MessageTitle
-} from "./chunk-TWUAXAMR.mjs";
 import "./chunk-FYFJ75NX.mjs";
 import {
   Modal,
@@ -83,46 +69,62 @@ import {
   ModalHeader
 } from "./chunk-6VKQ6IRG.mjs";
 import "./chunk-HQVL3ZJ2.mjs";
-import "./chunk-XFKD6EEJ.mjs";
+import "./chunk-IJSEJZ3W.mjs";
+import "./chunk-AGZHQDCQ.mjs";
+import {
+  Textarea
+} from "./chunk-JEAGKB4V.mjs";
 import "./chunk-XAFNJELJ.mjs";
 import {
   RadioButton
-} from "./chunk-UL2V2Z5B.mjs";
+} from "./chunk-HEDGKRGC.mjs";
 import {
   RadioGroup,
   useRadioGroupContext
-} from "./chunk-YS7HBWOI.mjs";
+} from "./chunk-E6OOFTRQ.mjs";
 import "./chunk-BYEJZSG5.mjs";
 import {
   Select
-} from "./chunk-6BXKRPR3.mjs";
-import "./chunk-AGZHQDCQ.mjs";
+} from "./chunk-AXEAIXG7.mjs";
+import "./chunk-KPPLVGZ3.mjs";
 import {
-  Textarea
-} from "./chunk-NIYDN3Y3.mjs";
+  ErrorSummary
+} from "./chunk-VU2GCAM4.mjs";
+import "./chunk-CKAL5ZJZ.mjs";
 import "./chunk-7LPYJC6S.mjs";
 import {
   Input
-} from "./chunk-S3QSGJX2.mjs";
+} from "./chunk-ITLZQ47H.mjs";
 import "./chunk-YJOOSTJC.mjs";
 import {
   Checkbox
-} from "./chunk-QRGGURVO.mjs";
+} from "./chunk-BO3EWZGA.mjs";
 import "./chunk-LMF3QGSF.mjs";
 import {
   Fieldset,
   useFieldsetContext
-} from "./chunk-JQGB77SS.mjs";
+} from "./chunk-Z2ZPTZ6F.mjs";
 import "./chunk-TDLSHJ4Z.mjs";
 import {
   DatePicker
-} from "./chunk-WUPLEZEY.mjs";
+} from "./chunk-GVO57ZWU.mjs";
 import "./chunk-Y5SUMFYJ.mjs";
-import "./chunk-5UGT7L7R.mjs";
+import "./chunk-XZ43OSZ5.mjs";
 import "./chunk-NSLSA7F7.mjs";
 import {
   ErrorMessage
-} from "./chunk-CC5QWW52.mjs";
+} from "./chunk-LHIG6RW7.mjs";
+import "./chunk-CYDWEPFL.mjs";
+import {
+  AutoAnimateHeight
+} from "./chunk-KCEWKQ4W.mjs";
+import "./chunk-6QV3OV66.mjs";
+import "./chunk-RC76SXBP.mjs";
+import {
+  Message,
+  MessageDescription,
+  MessageTitle
+} from "./chunk-BYFBK3J7.mjs";
 import {
   focusTrap,
   useHydrated,
@@ -134,6 +136,9 @@ import {
   HelpText
 } from "./chunk-YZDURLEY.mjs";
 import "./chunk-BVG5VSZK.mjs";
+import {
+  Container
+} from "./chunk-4QZR2H72.mjs";
 import "./chunk-G65EYZFQ.mjs";
 import {
   Grid,
@@ -145,12 +150,12 @@ import {
   Stack,
   VStack
 } from "./chunk-FUIKSOJF.mjs";
-import {
-  Container
-} from "./chunk-4QZR2H72.mjs";
 import "./chunk-7ROE6ADK.mjs";
 import "./chunk-NE6W2PCD.mjs";
-import "./chunk-6QV3OV66.mjs";
+import "./chunk-XLLYMQLW.mjs";
+import {
+  Link
+} from "./chunk-VYS2QNTL.mjs";
 import "./chunk-ARHJZUZG.mjs";
 import {
   Card,
@@ -178,7 +183,7 @@ import {
   FooterLinkSection,
   FooterLinkSections,
   FooterLogo
-} from "./chunk-ROQH67YP.mjs";
+} from "./chunk-6DWIJEHQ.mjs";
 import {
   LinkList
 } from "./chunk-Z2ZCM4BE.mjs";
@@ -207,10 +212,10 @@ import {
 import "./chunk-ZKMFJZSH.mjs";
 import {
   Accordion
-} from "./chunk-CXX4SXJG.mjs";
+} from "./chunk-CKG2XRMX.mjs";
 import {
   AccordionContent
-} from "./chunk-JZXZYEPG.mjs";
+} from "./chunk-5FWY7FIX.mjs";
 import {
   AccordionHeader
 } from "./chunk-MYVC3HMO.mjs";
@@ -249,6 +254,7 @@ export {
   DatePicker,
   DescriptionList,
   ErrorMessage,
+  ErrorSummary,
   Fieldset,
   Figure,
   Footer,

package/dist/layout/index.mjs

@@ -1,4 +1,7 @@
 import "../chunk-BVG5VSZK.mjs";
+import {
+  Container
+} from "../chunk-4QZR2H72.mjs";
 import "../chunk-G65EYZFQ.mjs";
 import {
   Grid,
@@ -10,9 +13,6 @@ import {
   Stack,
   VStack
 } from "../chunk-FUIKSOJF.mjs";
-import {
-  Container
-} from "../chunk-4QZR2H72.mjs";
 import "../chunk-7ROE6ADK.mjs";
 import "../chunk-NE6W2PCD.mjs";
 import "../chunk-YOSPWY5K.mjs";

package/dist/message/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["export { Message, MessageTitle, MessageDescription } from \"./message\";\nexport type * from \"./message\";\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\ninterface 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\ninterface 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA2B;AAC3B,IAAAC,0BAAqB;AACrB,IAAAC,qBAAqB;;;ACFrB,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAM1B;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;;;ADpGZ,IAAAC,sBAAA;AAJC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,yBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UApCd,IAoCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAgB1B,IAAM,cAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cAhErD,IAgEG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,6CAAC,SAAI,eAAW,8BAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["export { Message, MessageTitle, MessageDescription } from \"./message\";\nexport type * from \"./message\";\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"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}

package/dist/message/index.mjs

@@ -3,7 +3,7 @@ import {
   Message,
   MessageDescription,
   MessageTitle
-} from "../chunk-TWUAXAMR.mjs";
+} from "../chunk-BYFBK3J7.mjs";
 import "../chunk-3OGHJOJF.mjs";
 import "../chunk-YOSPWY5K.mjs";
 export {

package/dist/message/message.d.ts

@@ -1,6 +1,6 @@
 import { forwardRef } from "react";
 import { type BoxProps } from "../box/box";
-interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      *
@@ -9,7 +9,7 @@ interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     asChild?: boolean;
 }
 export declare const MessageTitle: import("react").ForwardRefExoticComponent<MessageTitleProps & import("react").RefAttributes<HTMLParagraphElement>>;
-interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      *

package/dist/message/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/message/message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAC5E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,YAAY,oHAWxB,CAAC;AAGF,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,0HAW9B,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,CACvB;IACE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,GACC,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAiBf,WAAW,CAAC;AAGjB,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,GAAG;IAC/E,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,WAAW,EAAE,OAAO,kBAAkB,CAAC;CACxC,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../src/message/message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACnF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,YAAY,oHAWxB,CAAC;AAGF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,kBAAkB,0HAW9B,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,CACvB;IACE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,GACC,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,OAAO,EAiBf,WAAW,CAAC;AAGjB,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,GAAG;IAC/E,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,WAAW,EAAE,OAAO,kBAAkB,CAAC;CACxC,CAAC"}

package/dist/message/message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["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\ninterface 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\ninterface 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA2B;AAC3B,IAAAC,0BAAqB;AACrB,IAAAC,qBAAqB;;;ACFrB,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAM1B;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;;;ADpGZ,IAAAC,sBAAA;AAJC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,yBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UApCd,IAoCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,0BAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAgB1B,IAAM,cAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cAhErD,IAgEG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,6CAAC,SAAI,eAAW,8BAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["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"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_jsx_runtime"]}

package/dist/message/message.mjs

@@ -2,7 +2,7 @@ import {
   Message,
   MessageDescription,
   MessageTitle
-} from "../chunk-TWUAXAMR.mjs";
+} from "../chunk-BYFBK3J7.mjs";
 import "../chunk-3OGHJOJF.mjs";
 import "../chunk-YOSPWY5K.mjs";
 export {

package/dist/tabs/index.mjs

@@ -1,15 +1,15 @@
 import "../chunk-7YWW46R3.mjs";
 import {
   Tabs
-} from "../chunk-Z2TMKU5V.mjs";
-import {
-  TabsList,
-  TabsTab
-} from "../chunk-J5SCUELT.mjs";
+} from "../chunk-KNGG6M2I.mjs";
 import {
   TabsContent,
   TabsContents
 } from "../chunk-35QRZSEV.mjs";
+import {
+  TabsList,
+  TabsTab
+} from "../chunk-J5SCUELT.mjs";
 import "../chunk-KQITCS3U.mjs";
 import "../chunk-ILFK3VKS.mjs";
 import "../chunk-YOSPWY5K.mjs";

package/dist/tabs/tabs.mjs

@@ -1,8 +1,8 @@
 import {
   Tabs
-} from "../chunk-Z2TMKU5V.mjs";
-import "../chunk-J5SCUELT.mjs";
+} from "../chunk-KNGG6M2I.mjs";
 import "../chunk-35QRZSEV.mjs";
+import "../chunk-J5SCUELT.mjs";
 import "../chunk-KQITCS3U.mjs";
 import "../chunk-ILFK3VKS.mjs";
 import "../chunk-YOSPWY5K.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,7 @@
   ],
   "devDependencies": {
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
     "tsup": "^8.3.0",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@radix-ui/react-popover": "1.1.2",
     "@radix-ui/react-slot": "1.1.0",
-    "@postenbring/hedwig-css": "1.2.1"
+    "@postenbring/hedwig-css": "1.3.0"
   },
   "publishConfig": {
     "access": "public"

package/src/accordion/accordion-content.tsx

@@ -16,7 +16,6 @@ export const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps
     return (
       <div
         id={context.contentId}
-        aria-hidden={!context.open}
         data-state={context.open ? "open" : "closed"}
         {...{ inert: context.open ? undefined : "true" }}
         className={clsx("hds-accordion-item-content", className as undefined)}

package/src/form/checkbox/checkbox.tsx

@@ -1,12 +1,13 @@
 import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { ErrorMessage } from "../error-message";
+import { ErrorMessage, type ErrorMessageProps } from "../error-message";
 import { useFieldsetContext } from "../fieldset";
 
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue"> & {
   children: ReactNode;
   variant?: "plain" | "bounding-box";
   title?: string;
+  errorMessageProps?: Partial<ErrorMessageProps>;
 } & (
     | {
         /**
@@ -38,6 +39,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       variant = "plain",
       hasError: hasErrorProp,
       errorMessage,
+      errorMessageProps,
       title,
       children,
       className,
@@ -74,7 +76,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           </label>
           {title ? children : null}
         </div>
-        <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>
+        <ErrorMessage id={errorMessageId} {...errorMessageProps}>
+          {errorMessage}
+        </ErrorMessage>
       </div>
     );
   },

package/src/form/error-message/error-message.tsx

@@ -11,7 +11,7 @@ export const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(
   ({ children, id, className, ...rest }, ref) => {
     return (
       <div
-        aria-live="assertive"
+        aria-live="polite"
         className={clsx("hds-error-message", className as undefined)}
         id={id}
         ref={ref}

package/src/form/error-summary/error-summary.stories.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { ErrorSummary } from ".";
+
+const meta: Meta<typeof ErrorSummary> = {
+  title: "Form/Error Summary",
+  component: ErrorSummary,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ErrorSummary>;
+
+export const Preview: Story = {
+  tags: ["!dev"],
+  args: {
+    children: (
+      <>
+        <ErrorSummary.Heading as="h2">
+          To continue please correct the following issues
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href="#firstname">First name is required</ErrorSummary.Item>
+          <ErrorSummary.Item href="#surname">Surname is required</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </>
+    ),
+  },
+};

package/src/form/error-summary/error-summary.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useEffect, useRef } from "react";
+import { Message, type MessageProps, type MessageTitleProps } from "../../message";
+import { UnorderedList, type ListProps } from "../../list";
+import { Link } from "../../link";
+import { useMergeRefs } from "../../utils";
+import { focusWithLegendOrLabelInViewport } from "./focus";
+
+interface ErrorSummaryHeadingPropsAutoFocus {
+  /**
+   * The heading will be focused when the component mounts
+   *
+   * On following errornous form submissions you should manually focus the heading
+   * e.g. by passing a ref and calling `ref.current.focus()`
+   *
+   * @default true
+   */
+  autoFocus?: boolean;
+}
+
+interface ErrorSummaryHeadingPropsAs {
+  /**
+   * A heading level must be selected, or optionally opting out for a different element
+   *
+   * Use {@link ErrorSummaryHeadingPropsAsChild.asChild} if you need more control of the rendered element.
+   */
+  as: "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+  asChild?: never;
+}
+
+interface ErrorSummaryHeadingPropsAsChild {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   */
+  asChild: true;
+  as?: never;
+}
+
+export type ErrorSummaryHeadingProps = MessageTitleProps &
+  ErrorSummaryHeadingPropsAutoFocus &
+  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);
+
+export const ErrorSummaryHeading = forwardRef<
+  HTMLParagraphElement,
+  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)
+>(({ children, as: Tag, autoFocus = true, ...rest }, ref) => {
+  const focusRef = useRef<HTMLElement>(null);
+  const mergedRef = useMergeRefs([focusRef, ref]);
+
+  useEffect(() => {
+    /**
+     * Hack: Safari 18 on mac at the time of writing
+     * does not correctly focus it with VoiceOver without the timeout
+     */
+    setTimeout(() => {
+      if (focusRef.current && autoFocus) {
+        focusRef.current.focus();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on initial render
+  }, []);
+
+  return (
+    <Message.Title ref={mergedRef} tabIndex={-1} asChild {...rest}>
+      {Tag ? <Tag>{children}</Tag> : children}
+    </Message.Title>
+  );
+});
+ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
+
+export interface ErrorSummaryListProps extends ListProps {
+  /**
+   * Sets the size of the items (font)
+   *
+   * @default "small"
+   */
+  size?: ListProps["size"];
+}
+export const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(
+  ({ children, style: _style, size = "small", ...rest }, ref) => {
+    const style = {
+      // Match the link `solid` style, which black underline
+      "--_hds-list-marker-color": "var(--hds-ui-colors-black)",
+      ..._style,
+    };
+    return (
+      <Message.Description asChild>
+        <UnorderedList size={size} ref={ref} style={style} {...rest}>
+          {children}
+        </UnorderedList>
+      </Message.Description>
+    );
+  },
+);
+ErrorSummaryList.displayName = "ErrorSummary.List";
+
+export interface ErrorSummaryItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * A hash link to the element that the error message refers to
+   *
+   * Must start with "#" as it's passed to the `href` attribute of an anchor element
+   *
+   * @example "#email"
+   */
+  href: `#${string}`;
+
+  /**
+   * Extra props to pass to the link element
+   */
+  linkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+export const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>(
+  ({ children, href, linkProps, ...rest }, ref) => {
+    function onClick(e: React.MouseEvent<HTMLAnchorElement>) {
+      linkProps?.onClick?.(e);
+      if (focusWithLegendOrLabelInViewport(href.replace("#", ""))) {
+        e.preventDefault();
+      }
+    }
+
+    return (
+      <li ref={ref} {...rest}>
+        <Link size="small" href={href} variant="solid" {...linkProps} onClick={onClick}>
+          {children}
+        </Link>
+      </li>
+    );
+  },
+);
+ErrorSummaryItem.displayName = "ErrorSummary.Item";
+
+export type ErrorSummaryProps = Omit<MessageProps, "variant" | "icon" | "iconClassName">;
+
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <Message variant="warning" ref={ref} {...rest}>
+        {children}
+      </Message>
+    );
+  },
+) as ErrorSummaryType;
+ErrorSummary.displayName = "ErrorSummary";
+
+type ErrorSummaryType = ReturnType<typeof forwardRef<HTMLDivElement, ErrorSummaryProps>> & {
+  Heading: typeof ErrorSummaryHeading;
+  List: typeof ErrorSummaryList;
+  Item: typeof ErrorSummaryItem;
+};
+ErrorSummary.Heading = ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Item = ErrorSummaryItem;