@postenbring/hedwig-react - npm Package Compare versions

Comparing version 0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004 to 0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115

dist/badge/badge.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
-interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLSpanElement>, "className" | "style"> {
+interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
     /**
@@ -6,0 +6,0 @@ * Font size of the badge

dist/badge/badge.js

@@ -58,16 +58,3 @@ "use strict";
 module.exports = __toCommonJS(badge_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
-  }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/badge/badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -78,13 +65,19 @@ function BaseBadge(_a) {
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-badge"), (0, import_typed_classname.t)(`hds-badge--${size}`), (0, import_typed_classname.t)(`hds-badge--${variant}`))
+      className: (0, import_typed_classname.clsx)(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className
+      )
     }, rest), {
@@ -91,0 +84,0 @@ children

dist/badge/index.js

@@ -58,22 +58,9 @@ "use strict";
 module.exports = __toCommonJS(badge_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_badge = require("@postenbring/hedwig-css/dist/badge/badge.css");
+var import_badge = require("@postenbring/hedwig-css/dist/badge.css");
 
 // src/badge/badge.tsx
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
-  }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/badge/badge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -84,13 +71,19 @@ function BaseBadge(_a) {
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-badge"), (0, import_typed_classname.t)(`hds-badge--${size}`), (0, import_typed_classname.t)(`hds-badge--${variant}`))
+      className: (0, import_typed_classname.clsx)(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className
+      )
     }, rest), {
@@ -97,0 +90,0 @@ children

dist/box/box.d.ts

@@ -1,2 +0,36 @@
-import 'react';
-export { a as Box, c as BoxCloseButton, b as BoxCloseButtonProps, B as BoxProps } from '../index-OpbVH1tp.js';
+import * as React$1 from 'react';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
+
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "light-grey" | "lighter" | "white" | "warning";
+    children: React.ReactNode;
+    /**
+     * If `true`, a close button will be shown.
+     * Use when you want to control the close button using the BoxCloseButton component.
+     */
+    closeable?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     * If not set, the component will be closed without any user interaction.
+     *
+     * If set, and the handler returns non-true value, the component will not be closed.
+     * Use this if you want to control the closing of the component, using the `closed` prop
+     *
+     * If set, and the handler returns the true, the component will be closed.
+     * Use this with `window.confirm()` to ask the user to confirm closing the component.
+     */
+    onClose?: () => boolean | unknown;
+    /**
+     * If `true`, the box will be closed and hidden from view
+     */
+    closed?: boolean;
+    /**
+     * Props applied to the close button element.
+     */
+    closeButtonProps?: BoxCloseButtonProps;
+}
+declare const Box: OverridableComponent<BoxProps, HTMLDivElement>;
+type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
+declare const BoxCloseButton: React$1.ForwardRefExoticComponent<BoxCloseButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+export { Box, BoxCloseButton, type BoxCloseButtonProps, type BoxProps };

dist/box/box.js

@@ -57,3 +57,2 @@ "use strict";
 var import_react = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -66,3 +65,3 @@ var import_jsx_runtime = require("react/jsx-runtime");
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -76,3 +75,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -99,6 +98,6 @@ "closed",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx.clsx)(
-          (0, import_typed_classname.t)("hds-box"),
-          (0, import_typed_classname.t)(`hds-box--${variant}`),
-          { [(0, import_typed_classname.t)("hds-box--closed")]: closed },
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
           className
@@ -109,3 +108,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -124,3 +123,3 @@ ]
       __spreadValues({
-        className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-box__close-button"), className),
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
         ref,
@@ -127,0 +126,0 @@ type: "button"

dist/box/index.d.ts

@@ -1,2 +0,3 @@
-export { a as Box, c as BoxCloseButton, b as BoxCloseButtonProps, B as BoxProps } from '../index-OpbVH1tp.js';
+export { Box, BoxCloseButton, BoxCloseButtonProps, BoxProps } from './box.js';
 import 'react';
+import '../utils-BfZsjuFH.js';

dist/box/index.js

@@ -56,11 +56,9 @@ "use strict";
 module.exports = __toCommonJS(box_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_box = require("@postenbring/hedwig-css/dist/box/box.css");
-var import_message = require("@postenbring/hedwig-css/dist/message/message.css");
+var import_box = require("@postenbring/hedwig-css/dist/box.css");
 
 // src/box/box.tsx
 var import_react = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -73,3 +71,3 @@ var import_jsx_runtime = require("react/jsx-runtime");
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -83,3 +81,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -106,6 +104,6 @@ "closed",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx.clsx)(
-          (0, import_typed_classname.t)("hds-box"),
-          (0, import_typed_classname.t)(`hds-box--${variant}`),
-          { [(0, import_typed_classname.t)("hds-box--closed")]: closed },
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
           className
@@ -116,3 +114,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -131,3 +129,3 @@ ]
       __spreadValues({
-        className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-box__close-button"), className),
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
         ref,
@@ -134,0 +132,0 @@ type: "button"

dist/button/button.d.ts

@@ -1,5 +0,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
+import 'react';
 
-interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style"> {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
@@ -18,21 +18,21 @@ * The height, font size and padding of the button
     fill?: "contained" | "outlined";
-    children: React.ReactNode;
-    buttonRef?: React.ForwardedRef<HTMLButtonElement>;
+    /**
+     * Use an icon inside the button
+     */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
 }
+declare const BaseButton: OverridableComponent<ButtonProps & {
+    variant: "primary" | "secondary";
+}, HTMLButtonElement>;
 /**
  * ## TODO
  *
- * - [ ] Handle links that looks like buttons
+ * - [x] Handle links that looks like buttons
  * - [ ] Revisit how to handle outline
  * - [ ] Figure out outline-white
  */
-declare function PrimaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace PrimaryButton {
-    var displayName: string;
-}
-declare function SecondaryButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
-declare namespace SecondaryButton {
-    var displayName: string;
-}
+declare const PrimaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
+declare const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
 
-export { type ButtonProps, PrimaryButton, SecondaryButton };
+export { BaseButton, type ButtonProps, PrimaryButton, SecondaryButton };

dist/button/button.js

@@ -52,2 +52,3 @@ "use strict";
 __export(button_exports, {
+  BaseButton: () => BaseButton,
   PrimaryButton: () => PrimaryButton,
@@ -57,62 +58,69 @@ SecondaryButton: () => SecondaryButton
 module.exports = __toCommonJS(button_exports);
-var import_clsx = require("clsx");
+var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "variant",
+      "size",
+      "fullWidth",
+      "fill",
+      "icon",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outlined",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon && !children
+          },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          icon && !children ? icon : null,
+          children
+        ]
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
+);
+BaseButton.displayName = "BaseButton";
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
-}
-
-// src/button/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function BaseButton(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "medium",
-    fullWidth = false,
-    fill = "contained",
-    buttonRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "fullWidth",
-    "fill",
-    "buttonRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-button"), (0, import_typed_classname.t)(`hds-button--${size}`), {
-        [(0, import_typed_classname.t)(`hds-button--${variant}`)]: fill === "contained",
-        [(0, import_typed_classname.t)(`hds-button--outline-${variant}`)]: fill === "outlined",
-        [(0, import_typed_classname.t)("hds-button--full")]: fullWidth === true,
-        [(0, import_typed_classname.t)("hds-button--mobile-full")]: fullWidth === "mobile"
-      }),
-      ref: buttonRef
-    }, rest), {
-      children
-    })
-  );
-}
-BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+);
 PrimaryButton.displayName = "PrimaryButton";
-function SecondaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
-}
+var SecondaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+  }
+);
 SecondaryButton.displayName = "SecondaryButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseButton,
   PrimaryButton,
   SecondaryButton
 });

dist/button/index.d.ts

@@ -1,3 +0,3 @@
-export { ButtonProps, PrimaryButton, SecondaryButton } from './button.js';
-import 'react/jsx-runtime';
+export { BaseButton, ButtonProps, PrimaryButton, SecondaryButton } from './button.js';
+import '../utils-BfZsjuFH.js';
 import 'react';

dist/button/index.js

@@ -52,2 +52,3 @@ "use strict";
 __export(button_exports, {
+  BaseButton: () => BaseButton,
   PrimaryButton: () => PrimaryButton,
@@ -57,68 +58,75 @@ SecondaryButton: () => SecondaryButton
 module.exports = __toCommonJS(button_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
+var import_button = require("@postenbring/hedwig-css/dist/button.css");
 
 // src/button/button.tsx
-var import_clsx = require("clsx");
+var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "variant",
+      "size",
+      "fullWidth",
+      "fill",
+      "icon",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outlined",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon && !children
+          },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          icon && !children ? icon : null,
+          children
+        ]
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
+);
+BaseButton.displayName = "BaseButton";
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
-}
-
-// src/button/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function BaseButton(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "medium",
-    fullWidth = false,
-    fill = "contained",
-    buttonRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "fullWidth",
-    "fill",
-    "buttonRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-button"), (0, import_typed_classname.t)(`hds-button--${size}`), {
-        [(0, import_typed_classname.t)(`hds-button--${variant}`)]: fill === "contained",
-        [(0, import_typed_classname.t)(`hds-button--outline-${variant}`)]: fill === "outlined",
-        [(0, import_typed_classname.t)("hds-button--full")]: fullWidth === true,
-        [(0, import_typed_classname.t)("hds-button--mobile-full")]: fullWidth === "mobile"
-      }),
-      ref: buttonRef
-    }, rest), {
-      children
-    })
-  );
-}
-BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+);
 PrimaryButton.displayName = "PrimaryButton";
-function SecondaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
-}
+var SecondaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+  }
+);
 SecondaryButton.displayName = "SecondaryButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseButton,
   PrimaryButton,
   SecondaryButton
 });

dist/index.d.ts

@@ -1,9 +0,16 @@
-export { ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
+export { BaseButton, ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
 export { Link, LinkProps } from './link/link.js';
 export { Badge, BadgeProps, DarkBadge, WarningBadge, WhiteBadge } from './badge/badge.js';
 export { DescriptionDetails, DescriptionDetailsProps, default as DescriptionList, DescriptionListProps, DescriptionTerm, DescriptionTermProps } from './list/description-list.js';
-export { ListItem, ListItemProps, ListProps, OrderedList, UnorderedList } from './list/list.js';
-export { a as Box, c as BoxCloseButton, b as BoxCloseButtonProps, B as BoxProps } from './index-OpbVH1tp.js';
-export { Message, MessageProps } from './message/message.js';
+export { ListProps, OrderedList, UnorderedList } from './list/list.js';
+export { LinkList, LinkListProps } from './list/link-list.js';
+export { Box, BoxCloseButton, BoxCloseButtonProps, BoxProps } from './box/box.js';
+export { Message } from './message/index.js';
+export { Accordion, AccordionProps } from './accordion/accordion.js';
+export { AccordionItem, AccordionItemChildrenType, AccordionItemProps } from './accordion/accordion-item.js';
+export { AccordionTrigger, AccordionTriggerProps } from './accordion/accordion-item-trigger.js';
+export { AccordionContent, AccordionContentProps } from './accordion/accordion-item-content.js';
+export { MessageDescription, MessageTitle } from './message/message.js';
+import './utils-BfZsjuFH.js';
+import 'react';
 import 'react/jsx-runtime';
-import 'react';

dist/index.js

@@ -52,3 +52,8 @@ "use strict";
 __export(src_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
   Badge: () => Badge,
+  BaseButton: () => BaseButton,
   Box: () => Box,
@@ -61,4 +66,6 @@ BoxCloseButton: () => BoxCloseButton,
   Link: () => Link,
-  ListItem: () => ListItem,
-  Message: () => Message,
+  LinkList: () => LinkList,
+  Message: () => MessageComponent,
+  MessageDescription: () => MessageDescription,
+  MessageTitle: () => MessageTitle,
   OrderedList: () => OrderedList,
@@ -74,112 +81,109 @@ PrimaryButton: () => PrimaryButton,
 // src/button/index.tsx
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_button = require("@postenbring/hedwig-css/dist/button/button.css");
+var import_button = require("@postenbring/hedwig-css/dist/button.css");
 
 // src/button/button.tsx
-var import_clsx = require("clsx");
+var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BaseButton = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      as: Component = "button",
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "variant",
+      "size",
+      "fullWidth",
+      "fill",
+      "icon",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outlined",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon && !children
+          },
+          className
+        ),
+        ref
+      }, rest), {
+        children: [
+          icon && !children ? icon : null,
+          children
+        ]
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
+);
+BaseButton.displayName = "BaseButton";
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
   }
-}
-
-// src/button/button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function BaseButton(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "medium",
-    fullWidth = false,
-    fill = "contained",
-    buttonRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "fullWidth",
-    "fill",
-    "buttonRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-button"), (0, import_typed_classname.t)(`hds-button--${size}`), {
-        [(0, import_typed_classname.t)(`hds-button--${variant}`)]: fill === "contained",
-        [(0, import_typed_classname.t)(`hds-button--outline-${variant}`)]: fill === "outlined",
-        [(0, import_typed_classname.t)("hds-button--full")]: fullWidth === true,
-        [(0, import_typed_classname.t)("hds-button--mobile-full")]: fullWidth === "mobile"
-      }),
-      ref: buttonRef
-    }, rest), {
-      children
-    })
-  );
-}
-BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+);
 PrimaryButton.displayName = "PrimaryButton";
-function SecondaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "secondary" }));
-}
+var SecondaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+  }
+);
 SecondaryButton.displayName = "SecondaryButton";
 
 // src/link/index.tsx
-var import_fonts2 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens2 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts2 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens2 = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base2 = require("@postenbring/hedwig-css/dist/base.css");
-var import_link = require("@postenbring/hedwig-css/dist/link/link.css");
+var import_link = require("@postenbring/hedwig-css/dist/link.css");
 
 // src/link/link.tsx
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Link(_a) {
-  var _b = _a, {
-    children,
-    variant = "underline",
-    size = "medium",
-    anchorRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "anchorRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "a",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx2.clsx)(
-        (0, import_typed_classname2.t)("hds-link"),
-        variant !== "underline" && (0, import_typed_classname2.t)(`hds-link--${variant}`),
-        size !== "medium" && (0, import_typed_classname2.t)(`hds-link--${size}`)
-      ),
-      ref: anchorRef
-    }, rest), {
-      children
-    })
-  );
-}
+var Link = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname2.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
 Link.displayName = "Link";
 
 // src/badge/index.tsx
-var import_fonts3 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens3 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts3 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens3 = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base3 = require("@postenbring/hedwig-css/dist/base.css");
-var import_badge = require("@postenbring/hedwig-css/dist/badge/badge.css");
+var import_badge = require("@postenbring/hedwig-css/dist/badge.css");
 
 // src/badge/badge.tsx
-var import_clsx3 = require("clsx");
 var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -191,13 +195,19 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({
-      className: (0, import_clsx3.clsx)((0, import_typed_classname3.t)("hds-badge"), (0, import_typed_classname3.t)(`hds-badge--${size}`), (0, import_typed_classname3.t)(`hds-badge--${variant}`))
+      className: (0, import_typed_classname3.clsx)(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className
+      )
     }, rest), {
@@ -227,10 +237,9 @@ children
 // src/list/index.tsx
-var import_fonts4 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens4 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts4 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens4 = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base4 = require("@postenbring/hedwig-css/dist/base.css");
-var import_description_list = require("@postenbring/hedwig-css/dist/list/description-list.css");
-var import_list = require("@postenbring/hedwig-css/dist/list/list.css");
+var import_description_list = require("@postenbring/hedwig-css/dist/description-list.css");
+var import_list2 = require("@postenbring/hedwig-css/dist/list.css");
 
 // src/list/description-list.tsx
-var import_clsx4 = require("clsx");
 var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -240,3 +249,2 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", __spreadProps(__spreadValues({}, rest), { children }));
@@ -246,14 +254,22 @@ }
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", __spreadProps(__spreadValues({}, rest), { children }));
 }
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
-  warnForStyleOverrides(rest);
+  var _b = _a, {
+    variant = "vertical",
+    className
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "dl",
     __spreadValues({
-      className: (0, import_clsx4.clsx)((0, import_typed_classname4.t)("hds-description-list"), {
-        [(0, import_typed_classname4.t)("hds-description-list--horizontal")]: variant === "horizontal"
-      })
+      className: (0, import_typed_classname4.clsx)(
+        "hds-description-list",
+        {
+          "hds-description-list--horizontal": variant === "horizontal"
+        },
+        className
+      )
     }, rest)
@@ -267,3 +283,2 @@ );
 // src/list/list.tsx
-var import_clsx5 = require("clsx");
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -276,3 +291,4 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -282,11 +298,16 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     ListTag,
     __spreadProps(__spreadValues({
-      className: (0, import_clsx5.clsx)((0, import_typed_classname5.t)("hds-list"), (0, import_typed_classname5.t)(`hds-list--${size}`), {
-        [(0, import_typed_classname5.t)(`hds-list--style-hidden`)]: listStyle === "no-bullets"
-      })
+      className: (0, import_typed_classname5.clsx)(
+        "hds-list",
+        `hds-list--${size}`,
+        {
+          "hds-list--style-hidden": listStyle === "no-bullets"
+        },
+        className
+      )
     }, rest), {
@@ -297,7 +318,2 @@ children
 }
-function ListItem(_a) {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", __spreadProps(__spreadValues({}, rest), { children }));
-}
 function UnorderedList(props) {
@@ -309,3 +325,2 @@ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
 }
-ListItem.displayName = "ListItem";
 BaseList.displayName = "BaseList";
@@ -315,15 +330,20 @@ OrderedList.displayName = "UnorderedList";
 
+// src/list/link-list.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LinkList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UnorderedList, __spreadProps(__spreadValues({ listStyle: "no-bullets" }, props), { children: props.children }));
+}
+LinkList.displayName = "LinkList";
+
 // src/box/index.tsx
-var import_fonts5 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens5 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts5 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens5 = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base5 = require("@postenbring/hedwig-css/dist/base.css");
-var import_box = require("@postenbring/hedwig-css/dist/box/box.css");
-var import_message = require("@postenbring/hedwig-css/dist/message/message.css");
+var import_box = require("@postenbring/hedwig-css/dist/box.css");
 
 // src/box/box.tsx
-var import_react = require("react");
-var import_clsx6 = require("clsx");
+var import_react3 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Box = (0, import_react.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Box = (0, import_react3.forwardRef)(
   (_a, ref) => {
@@ -333,3 +353,3 @@ var _b = _a, {
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -343,3 +363,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -351,4 +371,4 @@ "closed",
     ]);
-    const [closedState, setClosedState] = (0, import_react.useState)(false);
-    const onClose = (0, import_react.useCallback)(() => {
+    const [closedState, setClosedState] = (0, import_react3.useState)(false);
+    const onClose = (0, import_react3.useCallback)(() => {
       if (onCloseProp) {
@@ -364,9 +384,9 @@ const result = onCloseProp();
     const closed = closedProp != null ? closedProp : closedState;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_clsx6.clsx)(
-          (0, import_typed_classname6.t)("hds-box"),
-          (0, import_typed_classname6.t)(`hds-box--${variant}`),
-          { [(0, import_typed_classname6.t)("hds-box--closed")]: closed },
+        className: (0, import_typed_classname6.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
           className
@@ -377,3 +397,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -386,9 +406,9 @@ ]
 Box.displayName = "Box";
-var BoxCloseButton = (0, import_react.forwardRef)(
+var BoxCloseButton = (0, import_react3.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       __spreadValues({
-        className: (0, import_clsx6.clsx)((0, import_typed_classname6.t)("hds-box__close-button"), className),
+        className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
         ref,
@@ -403,24 +423,23 @@ type: "button"
 // src/message/index.tsx
-var import_fonts6 = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens6 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts6 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens6 = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base6 = require("@postenbring/hedwig-css/dist/base.css");
-var import_box3 = require("@postenbring/hedwig-css/dist/box/box.css");
-var import_message2 = require("@postenbring/hedwig-css/dist/message/message.css");
+var import_box3 = require("@postenbring/hedwig-css/dist/box.css");
+var import_message = require("@postenbring/hedwig-css/dist/message.css");
 
 // src/message/message.tsx
-var import_react2 = require("react");
-var import_clsx7 = require("clsx");
+var import_react4 = require("react");
 var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Message = (0, import_react2.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Message = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       Box,
       __spreadProps(__spreadValues({
-        className: (0, import_clsx7.clsx)((0, import_typed_classname7.t)(`hds-message`), (0, import_typed_classname7.t)(`hds-message--${variant}`), className),
+        className: (0, import_typed_classname7.clsx)(`hds-message`, `hds-message--${variant}`, className),
         ref
       }, rest), {
         children: [
-          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx7.clsx)((0, import_typed_classname7.t)("hds-message--neutral__icon"), iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_typed_classname7.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
@@ -433,5 +452,208 @@ ]
 Message.displayName = "Message";
+var MessageTitle = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname7.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "MessageTitle";
+var MessageDescription = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname7.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "MessageDescription";
+
+// src/message/index.tsx
+var MessageComponent = Message;
+MessageComponent.Title = MessageTitle;
+MessageComponent.Description = MessageDescription;
+MessageComponent.Title.displayName = "Message";
+MessageComponent.Description.displayName = "Message";
+
+// src/accordion/index.tsx
+var import_fonts7 = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens7 = require("@postenbring/hedwig-css/dist/tokens.css");
+var import_base7 = require("@postenbring/hedwig-css/dist/base.css");
+var import_accordion = require("@postenbring/hedwig-css/dist/accordion.css");
+
+// src/accordion/accordion.tsx
+var import_react6 = require("react");
+var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+
+// src/accordion/context.ts
+var import_react5 = require("react");
+var AccordionContext = (0, import_react5.createContext)({
+  variant: "multiple",
+  mounted: false,
+  openItems: [],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
+  toggleOpenItem: (id) => {
+  }
+});
+var AccordionItemContext = (0, import_react5.createContext)(null);
+
+// src/accordion/accordion.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Accordion = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", children, className, variant = "multiple" } = _b, rest = __objRest(_b, ["as", "children", "className", "variant"]);
+    const [openItems, setOpenItems] = (0, import_react6.useState)([]);
+    const toggleOpenItem = (itemId) => {
+      if (variant === "single") {
+        setOpenItems([itemId]);
+      } else {
+        setOpenItems(
+          openItems.includes(itemId) ? openItems.filter((id) => id !== itemId) : [...openItems, itemId]
+        );
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname8.clsx)("hds-accordion", className), ref, children })) });
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/accordion/accordion-item.tsx
+var import_react7 = require("react");
+var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var AccordionItem = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+    const context = (0, import_react7.useContext)(AccordionContext);
+    const [open, setOpen] = (0, import_react7.useState)(false);
+    const accordionItemId = (0, import_react7.useId)();
+    const handleOpen = () => {
+      setOpen(!open);
+      if (context.variant === "single") {
+        context.toggleOpenItem(accordionItemId);
+      }
+    };
+    if (!context.mounted) {
+      throw new Error("Context required. Did you use <AccordionItem/> outside of <Accordion/>?");
+    }
+    (0, import_react7.useEffect)(() => {
+      if (context.variant === "multiple") {
+        return;
+      }
+      if (open && !context.openItems.includes(accordionItemId)) {
+        setOpen(false);
+      }
+    }, [context.openItems]);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Component,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_typed_classname9.clsx)(
+          "hds-accordion-item",
+          {
+            "hds-accordion-item__expanded": open
+          },
+          className
+        ),
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+      })
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+
+// src/accordion/accordion-item-trigger.tsx
+var import_react8 = require("react");
+var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var AccordionTrigger = (0, import_react8.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Component = "button", children, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "onClick"]);
+  const itemContext = (0, import_react8.useContext)(AccordionItemContext);
+  if (itemContext === null) {
+    return null;
+  }
+  const expandOrCollapse = (e) => {
+    itemContext.setOpen(!itemContext.open);
+    onClick && onClick(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      "aria-expanded": itemContext.open,
+      className: (0, import_typed_classname10.clsx)(
+        "hds-accordion-item-trigger",
+        { "hds-accordion-item-trigger--open": itemContext.open },
+        className
+      ),
+      onClick: expandOrCollapse,
+      ref,
+      type: "button",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: (0, import_typed_classname10.clsx)("hds-accordion-item-trigger--icon"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "svg",
+          {
+            fill: "none",
+            height: "24",
+            viewBox: "0 0 24 24",
+            width: "24",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { className: "hds-accordion-item-trigger--icon-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "path",
+              {
+                className: "hds-accordion-item-trigger--icon-chevron_down",
+                d: "M19.6289 9.15625L18.9609 8.45312C18.7852 8.27734 18.5039 8.27734 18.3633 8.45312L12 14.8164L5.60156 8.45312C5.46094 8.27734 5.17969 8.27734 5.00391 8.45312L4.33594 9.15625C4.16016 9.29688 4.16016 9.57812 4.33594 9.75391L11.6836 17.1016C11.8594 17.2773 12.1055 17.2773 12.2812 17.1016L19.6289 9.75391C19.8047 9.57812 19.8047 9.29688 19.6289 9.15625Z"
+              }
+            ) })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children })
+      ]
+    })
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// src/accordion/accordion-item-content.tsx
+var import_react9 = require("react");
+var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AccordionContent = (0, import_react9.forwardRef)((_a, ref) => {
+  var _b = _a, { as: Component = "div", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+  const context = (0, import_react9.useContext)(AccordionItemContext);
+  if (context === null) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    Component,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_typed_classname11.clsx)(
+        "hds-accordion-item-content",
+        {
+          "hds-accordion-item-content--closed": !context.open
+        },
+        className
+      ),
+      ref,
+      children
+    })
+  );
+});
+AccordionContent.displayName = "AccordionContent";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Badge,
+  BaseButton,
   Box,
@@ -444,4 +666,6 @@ BoxCloseButton,
   Link,
-  ListItem,
+  LinkList,
   Message,
+  MessageDescription,
+  MessageTitle,
   OrderedList,
@@ -448,0 +672,0 @@ PrimaryButton,

dist/link/index.d.ts

 export { Link, LinkProps } from './link.js';
-import 'react/jsx-runtime';
 import 'react';
+import '../utils-BfZsjuFH.js';

dist/link/index.js

@@ -55,50 +55,30 @@ "use strict";
 module.exports = __toCommonJS(link_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_link = require("@postenbring/hedwig-css/dist/link/link.css");
+var import_link = require("@postenbring/hedwig-css/dist/link.css");
 
 // src/link/link.tsx
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/link/link.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Link(_a) {
-  var _b = _a, {
-    children,
-    variant = "underline",
-    size = "medium",
-    anchorRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "anchorRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)(
-        (0, import_typed_classname.t)("hds-link"),
-        variant !== "underline" && (0, import_typed_classname.t)(`hds-link--${variant}`),
-        size !== "medium" && (0, import_typed_classname.t)(`hds-link--${size}`)
-      ),
-      ref: anchorRef
-    }, rest), {
-      children
-    })
-  );
-}
+);
 Link.displayName = "Link";
@@ -105,0 +85,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/link/link.d.ts

@@ -1,5 +0,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
 
-interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "style"> {
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
@@ -16,12 +16,4 @@ * The visual style of the link
 }
-/**
- * ## TODO
- *
- * - [ ] Handle button styling
- */
-declare function Link({ children, variant, size, anchorRef, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
-declare namespace Link {
-    var displayName: string;
-}
+declare const Link: OverridableComponent<LinkProps, HTMLAnchorElement>;
 
 export { Link, type LinkProps };

dist/link/link.js

@@ -55,44 +55,24 @@ "use strict";
 module.exports = __toCommonJS(link_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname.clsx)(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className
+        ),
+        ref
+      }, rest), {
+        children
+      })
+    );
   }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/link/link.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Link(_a) {
-  var _b = _a, {
-    children,
-    variant = "underline",
-    size = "medium",
-    anchorRef
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "anchorRef"
-  ]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)(
-        (0, import_typed_classname.t)("hds-link"),
-        variant !== "underline" && (0, import_typed_classname.t)(`hds-link--${variant}`),
-        size !== "medium" && (0, import_typed_classname.t)(`hds-link--${size}`)
-      ),
-      ref: anchorRef
-    }, rest), {
-      children
-    })
-  );
-}
+);
 Link.displayName = "Link";
@@ -99,0 +79,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/list/description-list.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default, { ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 type DescriptionDetailsProps = DLDTProps;
 type DescriptionTermProps = DLDTProps;
-interface DLDTProps extends Omit<React__default.HTMLAttributes<HTMLBaseElement>, "className" | "style"> {
+interface DLDTProps extends HTMLAttributes<HTMLBaseElement> {
     children: ReactNode;
 }
-interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDListElement>, "className" | "style"> {
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     /**
@@ -27,3 +27,3 @@ * Either `DescriptionDetails` or `DescriptionTerm` elements
 }
-declare function DescriptionList({ variant, ...rest }: DescriptionListProps): react_jsx_runtime.JSX.Element;
+declare function DescriptionList({ variant, className, ...rest }: DescriptionListProps): react_jsx_runtime.JSX.Element;
 declare namespace DescriptionList {
@@ -30,0 +30,0 @@ var displayName: string;

dist/list/description-list.js

@@ -58,20 +58,6 @@ "use strict";
 module.exports = __toCommonJS(description_list_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
-  }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/list/description-list.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function DescriptionDetails(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", __spreadProps(__spreadValues({}, rest), { children }));
@@ -81,14 +67,22 @@ }
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", __spreadProps(__spreadValues({}, rest), { children }));
 }
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
-  warnForStyleOverrides(rest);
+  var _b = _a, {
+    variant = "vertical",
+    className
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "dl",
     __spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-description-list"), {
-        [(0, import_typed_classname.t)("hds-description-list--horizontal")]: variant === "horizontal"
-      })
+      className: (0, import_typed_classname.clsx)(
+        "hds-description-list",
+        {
+          "hds-description-list--horizontal": variant === "horizontal"
+        },
+        className
+      )
     }, rest)
@@ -95,0 +89,0 @@ );

dist/list/index.d.ts

 export { DescriptionDetails, DescriptionDetailsProps, default as DescriptionList, DescriptionListProps, DescriptionTerm, DescriptionTermProps } from './description-list.js';
-export { ListItem, ListItemProps, ListProps, OrderedList, UnorderedList } from './list.js';
+export { ListProps, OrderedList, UnorderedList } from './list.js';
+export { LinkList, LinkListProps } from './link-list.js';
 import 'react/jsx-runtime';
 import 'react';

dist/list/index.js

@@ -55,3 +55,3 @@ "use strict";
   DescriptionTerm: () => DescriptionTerm,
-  ListItem: () => ListItem,
+  LinkList: () => LinkList,
   OrderedList: () => OrderedList,
@@ -61,27 +61,13 @@ UnorderedList: () => UnorderedList
 module.exports = __toCommonJS(list_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_description_list = require("@postenbring/hedwig-css/dist/list/description-list.css");
-var import_list = require("@postenbring/hedwig-css/dist/list/list.css");
+var import_description_list = require("@postenbring/hedwig-css/dist/description-list.css");
+var import_list2 = require("@postenbring/hedwig-css/dist/list.css");
 
 // src/list/description-list.tsx
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
-  }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/list/description-list.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function DescriptionDetails(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", __spreadProps(__spreadValues({}, rest), { children }));
@@ -91,14 +77,22 @@ }
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", __spreadProps(__spreadValues({}, rest), { children }));
 }
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
-  warnForStyleOverrides(rest);
+  var _b = _a, {
+    variant = "vertical",
+    className
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "dl",
     __spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-description-list"), {
-        [(0, import_typed_classname.t)("hds-description-list--horizontal")]: variant === "horizontal"
-      })
+      className: (0, import_typed_classname.clsx)(
+        "hds-description-list",
+        {
+          "hds-description-list--horizontal": variant === "horizontal"
+        },
+        className
+      )
     }, rest)
@@ -112,3 +106,2 @@ );
 // src/list/list.tsx
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -121,3 +114,4 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -127,11 +121,16 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     ListTag,
     __spreadProps(__spreadValues({
-      className: (0, import_clsx2.clsx)((0, import_typed_classname2.t)("hds-list"), (0, import_typed_classname2.t)(`hds-list--${size}`), {
-        [(0, import_typed_classname2.t)(`hds-list--style-hidden`)]: listStyle === "no-bullets"
-      })
+      className: (0, import_typed_classname2.clsx)(
+        "hds-list",
+        `hds-list--${size}`,
+        {
+          "hds-list--style-hidden": listStyle === "no-bullets"
+        },
+        className
+      )
     }, rest), {
@@ -142,7 +141,2 @@ children
 }
-function ListItem(_a) {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", __spreadProps(__spreadValues({}, rest), { children }));
-}
 function UnorderedList(props) {
@@ -154,6 +148,12 @@ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
 }
-ListItem.displayName = "ListItem";
 BaseList.displayName = "BaseList";
 OrderedList.displayName = "UnorderedList";
 UnorderedList.displayName = "UnorderedList";
+
+// src/list/link-list.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function LinkList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UnorderedList, __spreadProps(__spreadValues({ listStyle: "no-bullets" }, props), { children: props.children }));
+}
+LinkList.displayName = "LinkList";
 // Annotate the CommonJS export names for ESM import in node:
@@ -164,5 +164,5 @@ 0 && (module.exports = {
   DescriptionTerm,
-  ListItem,
+  LinkList,
   OrderedList,
   UnorderedList
 });

dist/list/list.d.ts

@@ -5,7 +5,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface ListItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "className" | "style"> {
-    children: React.ReactNode;
-}
-interface ListProps extends Omit<HTMLAttributes<HTMLOListElement | HTMLUListElement>, "className" | "style"> {
-    children: React.ReactElement<ListItemProps> | React.ReactElement<ListItemProps>[];
+interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
+    children: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];
     /**
@@ -20,6 +17,2 @@ * Inherit list styles or do not show these
 }
-declare function ListItem({ children, ...rest }: ListItemProps): react_jsx_runtime.JSX.Element;
-declare namespace ListItem {
-    var displayName: string;
-}
 declare function UnorderedList(props: ListProps): react_jsx_runtime.JSX.Element;
@@ -34,2 +27,2 @@ declare namespace UnorderedList {
 
-export { ListItem, type ListItemProps, type ListProps, OrderedList, UnorderedList };
+export { type ListProps, OrderedList, UnorderedList };

dist/list/list.js

@@ -52,3 +52,2 @@ "use strict";
 __export(list_exports, {
-  ListItem: () => ListItem,
   OrderedList: () => OrderedList,
@@ -58,16 +57,3 @@ UnorderedList: () => UnorderedList
 module.exports = __toCommonJS(list_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-
-// src/utils.ts
-function warnForStyleOverrides(props) {
-  if (props.className) {
-    console.warn("Overriding styles are not premited");
-  }
-  if (props.styles) {
-    console.warn("Overriding styles are not premited");
-  }
-}
-
-// src/list/list.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -79,3 +65,4 @@ function BaseList(_a) {
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -85,11 +72,16 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
-  warnForStyleOverrides(rest);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     ListTag,
     __spreadProps(__spreadValues({
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-list"), (0, import_typed_classname.t)(`hds-list--${size}`), {
-        [(0, import_typed_classname.t)(`hds-list--style-hidden`)]: listStyle === "no-bullets"
-      })
+      className: (0, import_typed_classname.clsx)(
+        "hds-list",
+        `hds-list--${size}`,
+        {
+          "hds-list--style-hidden": listStyle === "no-bullets"
+        },
+        className
+      )
     }, rest), {
@@ -100,7 +92,2 @@ children
 }
-function ListItem(_a) {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  warnForStyleOverrides(rest);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", __spreadProps(__spreadValues({}, rest), { children }));
-}
 function UnorderedList(props) {
@@ -112,3 +99,2 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseList, __spreadProps(__spreadValues({ as: "ul" }, props), { children: props.children }));
 }
-ListItem.displayName = "ListItem";
 BaseList.displayName = "BaseList";
@@ -119,5 +105,4 @@ OrderedList.displayName = "UnorderedList";
 0 && (module.exports = {
-  ListItem,
   OrderedList,
   UnorderedList
 });

dist/message/index.d.ts

@@ -1,3 +0,16 @@
-export { Message, MessageProps } from './message.js';
-import 'react';
-import '../index-OpbVH1tp.js';
+import * as React from 'react';
+import { MessageProps, MessageTitle, MessageDescription } from './message.js';
+import '../utils-BfZsjuFH.js';
+import '../box/box.js';
+
+declare const MessageComponent: {
+    (props: MessageProps & React.RefAttributes<HTMLDivElement>): React.ReactNode;
+    <As extends React.ElementType>(props: {
+        as?: As | undefined;
+    } & MessageProps & Omit<React.ComponentPropsWithRef<As>, "slot" | "style" | "title" | "icon" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "onClose" | "closeable" | "closed" | "closeButtonProps" | "iconClassName">): React.ReactNode;
+} & Pick<React.FC, "displayName"> & {
+    Title: typeof MessageTitle;
+    Description: typeof MessageDescription;
+};
+
+export { MessageComponent as Message, MessageDescription, MessageTitle };

dist/message/index.js

@@ -52,14 +52,15 @@ "use strict";
 __export(message_exports, {
-  Message: () => Message
+  Message: () => MessageComponent,
+  MessageDescription: () => MessageDescription,
+  MessageTitle: () => MessageTitle
 });
 module.exports = __toCommonJS(message_exports);
-var import_fonts = require("@postenbring/hedwig-tokens/tokens-output/css/fonts.css");
-var import_tokens = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+var import_fonts = require("@postenbring/hedwig-css/dist/fonts.css");
+var import_tokens = require("@postenbring/hedwig-css/dist/tokens.css");
 var import_base = require("@postenbring/hedwig-css/dist/base.css");
-var import_box2 = require("@postenbring/hedwig-css/dist/box/box.css");
-var import_message = require("@postenbring/hedwig-css/dist/message/message.css");
+var import_box2 = require("@postenbring/hedwig-css/dist/box.css");
+var import_message = require("@postenbring/hedwig-css/dist/message.css");
 
 // src/message/message.tsx
 var import_react2 = require("react");
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -69,3 +70,2 @@
 var import_react = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -78,3 +78,3 @@ var import_jsx_runtime = require("react/jsx-runtime");
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -88,3 +88,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -111,6 +111,6 @@ "closed",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx.clsx)(
-          (0, import_typed_classname.t)("hds-box"),
-          (0, import_typed_classname.t)(`hds-box--${variant}`),
-          { [(0, import_typed_classname.t)("hds-box--closed")]: closed },
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
           className
@@ -121,3 +121,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -136,3 +136,3 @@ ]
       __spreadValues({
-        className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-box__close-button"), className),
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
         ref,
@@ -154,7 +154,7 @@ type: "button"
       __spreadProps(__spreadValues({
-        className: (0, import_clsx2.clsx)((0, import_typed_classname2.t)(`hds-message`), (0, import_typed_classname2.t)(`hds-message--${variant}`), className),
+        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_clsx2.clsx)((0, import_typed_classname2.t)("hds-message--neutral__icon"), iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
@@ -167,5 +167,40 @@ ]
 Message.displayName = "Message";
+var MessageTitle = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "MessageTitle";
+var MessageDescription = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "MessageDescription";
+
+// src/message/index.tsx
+var MessageComponent = Message;
+MessageComponent.Title = MessageTitle;
+MessageComponent.Description = MessageDescription;
+MessageComponent.Title.displayName = "Message";
+MessageComponent.Description.displayName = "Message";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Message
+  Message,
+  MessageDescription,
+  MessageTitle
 });

dist/message/message.d.ts

 import React__default from 'react';
-import { B as BoxProps, O as OverridableComponent } from '../index-OpbVH1tp.js';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
+import { BoxProps } from '../box/box.js';
 
@@ -14,3 +15,5 @@ type MessageProps = ({
 declare const Message: OverridableComponent<MessageProps, HTMLDivElement>;
+declare const MessageTitle: OverridableComponent<object, HTMLParagraphElement>;
+declare const MessageDescription: OverridableComponent<object, HTMLParagraphElement>;
 
-export { Message, type MessageProps };
+export { Message, MessageDescription, type MessageProps, MessageTitle };

dist/message/message.js

@@ -52,7 +52,8 @@ "use strict";
 __export(message_exports, {
-  Message: () => Message
+  Message: () => Message,
+  MessageDescription: () => MessageDescription,
+  MessageTitle: () => MessageTitle
 });
 module.exports = __toCommonJS(message_exports);
 var import_react2 = require("react");
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -62,3 +63,2 @@
 var import_react = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -71,3 +71,3 @@ var import_jsx_runtime = require("react/jsx-runtime");
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -81,3 +81,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -104,6 +104,6 @@ "closed",
       __spreadProps(__spreadValues({
-        className: (0, import_clsx.clsx)(
-          (0, import_typed_classname.t)("hds-box"),
-          (0, import_typed_classname.t)(`hds-box--${variant}`),
-          { [(0, import_typed_classname.t)("hds-box--closed")]: closed },
+        className: (0, import_typed_classname.clsx)(
+          "hds-box",
+          `hds-box--${variant}`,
+          { "hds-box--closed": closed },
           className
@@ -114,3 +114,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -129,3 +129,3 @@ ]
       __spreadValues({
-        className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-box__close-button"), className),
+        className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
         ref,
@@ -147,7 +147,7 @@ type: "button"
       __spreadProps(__spreadValues({
-        className: (0, import_clsx2.clsx)((0, import_typed_classname2.t)(`hds-message`), (0, import_typed_classname2.t)(`hds-message--${variant}`), className),
+        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_clsx2.clsx)((0, import_typed_classname2.t)("hds-message--neutral__icon"), iconClassName), children: icon }),
+          variant === "neutral" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-message--neutral__icon", iconClassName), children: icon }),
           children
@@ -160,5 +160,33 @@ ]
 Message.displayName = "Message";
+var MessageTitle = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__title", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageTitle.displayName = "MessageTitle";
+var MessageDescription = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadValues({
+        className: (0, import_typed_classname2.clsx)("hds-message__description", className),
+        ref
+      }, rest)
+    );
+  }
+);
+MessageDescription.displayName = "MessageDescription";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Message
+  Message,
+  MessageDescription,
+  MessageTitle
 });

package.json

 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004",
+  "version": "0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115",
   "main": "./dist/index.js",
@@ -13,14 +13,12 @@ "module": "./dist/index.mjs",
   "devDependencies": {
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.15",
     "react": "^18.2.0",
-    "tsup": "^7.3.0",
+    "tsup": "^8.0.1",
     "typescript": "^5.2.2",
-    "eslint-config-custom": "0.0.0",
+    "eslint-config-custom": "0.0.1",
     "hedwig-tsconfig": "0.0.0"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
-    "@postenbring/hedwig-css": "0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004",
-    "@postenbring/hedwig-tokens": "0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004"
+    "@postenbring/hedwig-css": "0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115"
   },
@@ -27,0 +25,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

188811

increased by69.8%

Dependency count

1

decreased by-66.67%

Number of package files

113

increased by54.79%

Lines of code

4652

increased by59.7%

Dependency changes

• + Added@postenbring/hedwig-css@0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115(transitive)

• + Added@postenbring/hedwig-tokens@0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115(transitive)

• - Removed@postenbring/hedwig-tokens@0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004

• - Removedclsx@^2.0.0

• - Removed@parcel/watcher-linux-x64-glibc@2.5.0(transitive)

• - Removed@postenbring/hedwig-css@0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004(transitive)

• - Removed@postenbring/hedwig-tokens@0.0.0-pnpm-workspaces-3bjFMRX6-20231123125004(transitive)

• Updated@postenbring/hedwig-css@0.0.0-posten-css-theme-as-default-jFY3YE3E-20231130120115