@postenbring/hedwig-react - npm Package Compare versions

Comparing version 0.0.0-WE96Ccxa-accordion-component-20231127085047 to 0.0.0-WE96Ccxa-accordion-icon-20231129140714

dist/accordion/accordion-item-content.js

@@ -56,3 +56,2 @@ "use strict";
 var import_react2 = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -83,6 +82,6 @@
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_clsx.clsx)(
-        (0, import_typed_classname.t)("hds-accordion-item-content"),
+      className: (0, import_typed_classname.clsx)(
+        "hds-accordion-item-content",
         {
-          [(0, import_typed_classname.t)(`hds-accordion-item-content--closed`)]: !context.open
+          "hds-accordion-item-content--closed": !context.open
         },
@@ -89,0 +88,0 @@ className

dist/accordion/accordion-item-trigger.js

@@ -57,3 +57,2 @@ "use strict";
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-var import_clsx = require("clsx");
 
@@ -74,8 +73,2 @@ // src/accordion/context.ts
 var import_jsx_runtime = require("react/jsx-runtime");
-function FaArrowDownButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "v " });
-}
-function FaArrowUpButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "^ " });
-}
 var AccordionTrigger = (0, import_react2.forwardRef)((_a, ref) => {
@@ -91,14 +84,34 @@ var _b = _a, { as: Component = "button", children, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "onClick"]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
       "aria-expanded": itemContext.open,
-      className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-accordion-item-trigger"), className),
+      className: (0, import_typed_classname.clsx)(
+        "hds-accordion-item-trigger",
+        { "hds-accordion-item-trigger--open": itemContext.open },
+        className
+      ),
       onClick: expandOrCollapse,
       ref,
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-accordion-item-trigger--icon")), children: itemContext.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaArrowUpButNotReally, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaArrowDownButNotReally, {}) }),
-        children
-      ] })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-accordion-item-trigger--icon"), children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("g", { className: "hds-accordion-item-trigger--icon-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("span", { children })
+      ]
     })
@@ -105,0 +118,0 @@ );

dist/accordion/accordion-item.js

@@ -56,3 +56,2 @@ "use strict";
 var import_react2 = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -100,6 +99,6 @@
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_clsx.clsx)(
-          (0, import_typed_classname.t)("hds-accordion-item"),
+        className: (0, import_typed_classname.clsx)(
+          "hds-accordion-item",
           {
-            [(0, import_typed_classname.t)(`hds-accordion-item__expanded`)]: open
+            "hds-accordion-item__expanded": open
           },
@@ -106,0 +105,0 @@ className

dist/accordion/accordion.js

@@ -56,3 +56,2 @@ "use strict";
 var import_react2 = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -87,3 +86,3 @@
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-accordion"), className), ref, children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname.clsx)("hds-accordion", className), ref, children })) });
   }
@@ -90,0 +89,0 @@ );

dist/accordion/index.js

@@ -58,10 +58,9 @@ "use strict";
 module.exports = __toCommonJS(accordion_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_accordion = require("@postenbring/hedwig-css/dist/accordion/accordion.css");
+var import_accordion = require("@postenbring/hedwig-css/dist/accordion.css");
 
 // src/accordion/accordion.tsx
 var import_react2 = require("react");
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -96,3 +95,3 @@
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_clsx.clsx)((0, import_typed_classname.t)("hds-accordion"), className), ref, children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: { variant, openItems, toggleOpenItem, mounted: true }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, __spreadProps(__spreadValues({}, rest), { className: (0, import_typed_classname.clsx)("hds-accordion", className), ref, children })) });
   }
@@ -104,3 +103,2 @@ );
 var import_react3 = require("react");
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -134,6 +132,6 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_clsx2.clsx)(
-          (0, import_typed_classname2.t)("hds-accordion-item"),
+        className: (0, import_typed_classname2.clsx)(
+          "hds-accordion-item",
           {
-            [(0, import_typed_classname2.t)(`hds-accordion-item__expanded`)]: open
+            "hds-accordion-item__expanded": open
           },
@@ -153,10 +151,3 @@ className
 var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-var import_clsx3 = require("clsx");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FaArrowDownButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "v " });
-}
-function FaArrowUpButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "^ " });
-}
 var AccordionTrigger = (0, import_react4.forwardRef)((_a, ref) => {
@@ -172,14 +163,34 @@ var _b = _a, { as: Component = "button", children, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "onClick"]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
       "aria-expanded": itemContext.open,
-      className: (0, import_clsx3.clsx)((0, import_typed_classname3.t)("hds-accordion-item-trigger"), className),
+      className: (0, import_typed_classname3.clsx)(
+        "hds-accordion-item-trigger",
+        { "hds-accordion-item-trigger--open": itemContext.open },
+        className
+      ),
       onClick: expandOrCollapse,
       ref,
       type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx3.clsx)((0, import_typed_classname3.t)("hds-accordion-item-trigger--icon")), children: itemContext.open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FaArrowUpButNotReally, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FaArrowDownButNotReally, {}) }),
-        children
-      ] })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_typed_classname3.clsx)("hds-accordion-item-trigger--icon"), children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("g", { className: "hds-accordion-item-trigger--icon-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("span", { children })
+      ]
     })
@@ -192,3 +203,2 @@ );
 var import_react5 = require("react");
-var import_clsx4 = require("clsx");
 var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -205,6 +215,6 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_clsx4.clsx)(
-        (0, import_typed_classname4.t)("hds-accordion-item-content"),
+      className: (0, import_typed_classname4.clsx)(
+        "hds-accordion-item-content",
         {
-          [(0, import_typed_classname4.t)(`hds-accordion-item-content--closed`)]: !context.open
+          "hds-accordion-item-content--closed": !context.open
         },
@@ -211,0 +221,0 @@ className

dist/badge/badge.js

@@ -58,3 +58,2 @@ "use strict";
 module.exports = __toCommonJS(badge_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -66,7 +65,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
@@ -76,3 +77,8 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     __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), {
@@ -79,0 +85,0 @@ children

dist/badge/index.js

@@ -58,9 +58,8 @@ "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");
@@ -72,7 +71,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
@@ -82,3 +83,8 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     __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), {
@@ -85,0 +91,0 @@ children

dist/box/box.d.ts

@@ -8,6 +8,6 @@ import * as React$1 from 'react';
     /**
-     * If `true`, the close button will be hidden.
+     * If `true`, a close button will be shown.
      * Use when you want to control the close button using the BoxCloseButton component.
      */
-    hideCloseButton?: boolean;
+    closeable?: boolean;
     /**
@@ -14,0 +14,0 @@ * Callback fired when the component requests to be closed.

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.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,3 +0,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
+import 'react';
 
@@ -18,21 +18,21 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     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,49 +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");
 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"
-  ]);
-  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
-    })
-  );
-}
+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
+        ]
+      })
+    );
+  }
+);
 BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, 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,55 +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");
 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"
-  ]);
-  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
-    })
-  );
-}
+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
+        ]
+      })
+    );
+  }
+);
 BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, 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,2 +0,2 @@
-export { ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
+export { BaseButton, ButtonProps, PrimaryButton, SecondaryButton } from './button/button.js';
 export { Link, LinkProps } from './link/link.js';
@@ -8,3 +8,3 @@ export { Badge, BadgeProps, DarkBadge, WarningBadge, WhiteBadge } from './badge/badge.js';
 export { Box, BoxCloseButton, BoxCloseButtonProps, BoxProps } from './box/box.js';
-export { Message, MessageProps } from './message/message.js';
+export { Message } from './message/index.js';
 export { Accordion, AccordionProps } from './accordion/accordion.js';
@@ -14,4 +14,5 @@ export { AccordionItem, AccordionItemChildrenType, AccordionItemProps } from './accordion/accordion-item.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';
-import './utils-BfZsjuFH.js';

dist/index.js

@@ -57,2 +57,3 @@ "use strict";
   Badge: () => Badge,
+  BaseButton: () => BaseButton,
   Box: () => Box,
@@ -66,3 +67,5 @@ BoxCloseButton: () => BoxCloseButton,
   LinkList: () => LinkList,
-  Message: () => Message,
+  Message: () => MessageComponent,
+  MessageDescription: () => MessageDescription,
+  MessageTitle: () => MessageTitle,
   OrderedList: () => OrderedList,
@@ -78,98 +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");
 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"
-  ]);
-  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
-    })
-  );
-}
+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
+        ]
+      })
+    );
+  }
+);
 BaseButton.displayName = "BaseButton";
-function PrimaryButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { variant: "primary" }));
-}
+var PrimaryButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, 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"
-  ]);
-  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");
@@ -181,7 +195,9 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
     variant,
-    size = "small"
+    size = "small",
+    className
   } = _b, rest = __objRest(_b, [
     "children",
     "variant",
-    "size"
+    "size",
+    "className"
   ]);
@@ -191,3 +207,8 @@ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     __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), {
@@ -217,10 +238,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_list2 = 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");
@@ -237,9 +257,19 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
+  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)
@@ -253,3 +283,2 @@ );
 // src/list/list.tsx
-var import_clsx5 = require("clsx");
 var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -262,3 +291,4 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -268,3 +298,4 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
@@ -274,5 +305,10 @@ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     __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), {
@@ -301,14 +337,12 @@ children
 // 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_runtime7 = require("react/jsx-runtime");
-var Box = (0, import_react.forwardRef)(
+var Box = (0, import_react3.forwardRef)(
   (_a, ref) => {
@@ -318,3 +352,3 @@ var _b = _a, {
       variant = "light-grey",
-      hideCloseButton,
+      closeable = false,
       onClose: onCloseProp,
@@ -328,3 +362,3 @@ closed: closedProp,
       "variant",
-      "hideCloseButton",
+      "closeable",
       "onClose",
@@ -336,4 +370,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) {
@@ -352,6 +386,6 @@ const result = onCloseProp();
       __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
@@ -362,3 +396,3 @@ ),
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)),
+          closeable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
           children
@@ -371,3 +405,3 @@ ]
 Box.displayName = "Box";
-var BoxCloseButton = (0, import_react.forwardRef)(
+var BoxCloseButton = (0, import_react3.forwardRef)(
   (_a, ref) => {
@@ -378,3 +412,3 @@ var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
       __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,
@@ -389,14 +423,13 @@ 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_runtime8 = require("react/jsx-runtime");
-var Message = (0, import_react2.forwardRef)(
+var Message = (0, import_react4.forwardRef)(
   (_a, ref) => {
@@ -407,7 +440,7 @@ var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
       __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_runtime8.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
@@ -420,17 +453,49 @@ ]
 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-tokens/tokens-output/css/fonts.css");
-var import_tokens7 = require("@postenbring/hedwig-tokens/tokens-output/css/tokens.css");
+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/accordion.css");
+var import_accordion = require("@postenbring/hedwig-css/dist/accordion.css");
 
 // src/accordion/accordion.tsx
-var import_react4 = require("react");
-var import_clsx8 = require("clsx");
+var import_react6 = require("react");
 var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
 
 // src/accordion/context.ts
-var import_react3 = require("react");
-var AccordionContext = (0, import_react3.createContext)({
+var import_react5 = require("react");
+var AccordionContext = (0, import_react5.createContext)({
   variant: "multiple",
@@ -443,10 +508,10 @@ mounted: false,
 });
-var AccordionItemContext = (0, import_react3.createContext)(null);
+var AccordionItemContext = (0, import_react5.createContext)(null);
 
 // src/accordion/accordion.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Accordion = (0, import_react4.forwardRef)(
+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_react4.useState)([]);
+    const [openItems, setOpenItems] = (0, import_react6.useState)([]);
     const toggleOpenItem = (itemId) => {
@@ -461,3 +526,3 @@ if (variant === "single") {
     };
-    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_clsx8.clsx)((0, import_typed_classname8.t)("hds-accordion"), className), ref, children })) });
+    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 })) });
   }
@@ -468,12 +533,11 @@ );
 // src/accordion/accordion-item.tsx
-var import_react5 = require("react");
-var import_clsx9 = require("clsx");
+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_react5.forwardRef)(
+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_react5.useContext)(AccordionContext);
-    const [open, setOpen] = (0, import_react5.useState)(false);
-    const accordionItemId = (0, import_react5.useId)();
+    const context = (0, import_react7.useContext)(AccordionContext);
+    const [open, setOpen] = (0, import_react7.useState)(false);
+    const accordionItemId = (0, import_react7.useId)();
     const handleOpen = () => {
@@ -488,3 +552,3 @@ setOpen(!open);
     }
-    (0, import_react5.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (context.variant === "multiple") {
@@ -500,6 +564,6 @@ return;
       __spreadProps(__spreadValues({}, rest), {
-        className: (0, import_clsx9.clsx)(
-          (0, import_typed_classname9.t)("hds-accordion-item"),
+        className: (0, import_typed_classname9.clsx)(
+          "hds-accordion-item",
           {
-            [(0, import_typed_classname9.t)(`hds-accordion-item__expanded`)]: open
+            "hds-accordion-item__expanded": open
           },
@@ -517,15 +581,8 @@ className
 // src/accordion/accordion-item-trigger.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_typed_classname10 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
-var import_clsx10 = require("clsx");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function FaArrowDownButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "v " });
-}
-function FaArrowUpButNotReally() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "^ " });
-}
-var AccordionTrigger = (0, import_react6.forwardRef)((_a, ref) => {
+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_react6.useContext)(AccordionItemContext);
+  const itemContext = (0, import_react8.useContext)(AccordionItemContext);
   if (itemContext === null) {
@@ -538,14 +595,34 @@ return null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     Component,
     __spreadProps(__spreadValues({}, rest), {
       "aria-expanded": itemContext.open,
-      className: (0, import_clsx10.clsx)((0, import_typed_classname10.t)("hds-accordion-item-trigger"), className),
+      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.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_clsx10.clsx)((0, import_typed_classname10.t)("hds-accordion-item-trigger--icon")), children: itemContext.open ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaArrowUpButNotReally, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaArrowDownButNotReally, {}) }),
-        children
-      ] })
+      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 })
+      ]
     })
@@ -557,9 +634,8 @@ );
 // src/accordion/accordion-item-content.tsx
-var import_react7 = require("react");
-var import_clsx11 = require("clsx");
+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_react7.forwardRef)((_a, ref) => {
+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_react7.useContext)(AccordionItemContext);
+  const context = (0, import_react9.useContext)(AccordionItemContext);
   if (context === null) {
@@ -571,6 +647,6 @@ return null;
     __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_clsx11.clsx)(
-        (0, import_typed_classname11.t)("hds-accordion-item-content"),
+      className: (0, import_typed_classname11.clsx)(
+        "hds-accordion-item-content",
         {
-          [(0, import_typed_classname11.t)(`hds-accordion-item-content--closed`)]: !context.open
+          "hds-accordion-item-content--closed": !context.open
         },
@@ -592,2 +668,3 @@ className
   Badge,
+  BaseButton,
   Box,
@@ -602,2 +679,4 @@ BoxCloseButton,
   Message,
+  MessageDescription,
+  MessageTitle,
   OrderedList,
@@ -604,0 +683,0 @@ PrimaryButton,

dist/input/input.d.ts

@@ -11,4 +11,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 }
-declare function Input({ variant, errorMessage, labelProps, label, id, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ variant, errorMessage, labelProps, label, id, className, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 export { Input, type InputProps };

dist/input/input.js

@@ -66,3 +66,3 @@ "use strict";
 var React = __toESM(require("react"));
-var import_clsx = require("clsx");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -75,3 +75,4 @@ function Input(_a) {
     label,
-    id
+    id,
+    className
   } = _b, rest = __objRest(_b, [
@@ -82,3 +83,4 @@ "variant",
     "label",
-    "id"
+    "id",
+    "className"
   ]);
@@ -90,6 +92,10 @@ const errorMessageId = React.useId();
     {
-      className: (0, import_clsx.clsx)("hds-input", {
-        [`hds-input--${variant}`]: variant,
-        "hds-input--error": errorMessage
-      }),
+      className: (0, import_typed_classname.clsx)(
+        "hds-input",
+        {
+          [`hds-input--${variant}`]: variant,
+          "hds-input--error": errorMessage
+        },
+        className
+      ),
       children: [
@@ -96,0 +102,0 @@ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", __spreadProps(__spreadValues({ className: "hds-input__label" }, labelProps), { htmlFor: id || inputId, children: label })),

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,37 +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");
+var import_react = require("react");
 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"
-  ]);
-  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
-    })
-  );
-}
+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
+      })
+    );
+  }
+);
 Link.displayName = "Link";
@@ -92,0 +85,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/link/link.d.ts

@@ -1,3 +0,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { O as OverridableComponent } from '../utils-BfZsjuFH.js';
 
@@ -16,12 +16,4 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 }
-/**
- * ## 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,31 +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");
+var import_react = require("react");
 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"
-  ]);
-  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
-    })
-  );
-}
+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
+      })
+    );
+  }
+);
 Link.displayName = "Link";
@@ -86,0 +79,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/list/description-list.d.ts

@@ -27,3 +27,3 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 }
-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,3 +58,2 @@ "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");
@@ -71,9 +70,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
+  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)
@@ -80,0 +89,0 @@ );

dist/list/index.js

@@ -60,10 +60,9 @@ "use strict";
 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_list2 = 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");
@@ -80,9 +79,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function DescriptionList(_a) {
-  var _b = _a, { variant = "vertical" } = _b, rest = __objRest(_b, ["variant"]);
+  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)
@@ -96,3 +105,2 @@ );
 // src/list/list.tsx
-var import_clsx2 = require("clsx");
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -105,3 +113,4 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -111,3 +120,4 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
@@ -117,5 +127,10 @@ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     __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), {
@@ -122,0 +137,0 @@ children

dist/list/link-list.js

@@ -57,3 +57,2 @@ "use strict";
 // src/list/list.tsx
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -66,3 +65,4 @@ var import_jsx_runtime = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -72,3 +72,4 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
@@ -78,5 +79,10 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     __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), {
@@ -83,0 +89,0 @@ children

dist/list/list.js

@@ -56,3 +56,2 @@ "use strict";
 module.exports = __toCommonJS(list_exports);
-var import_clsx = require("clsx");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
@@ -65,3 +64,4 @@ var import_jsx_runtime = require("react/jsx-runtime");
     listStyle = "inherit",
-    size = "medium"
+    size = "medium",
+    className
   } = _b, rest = __objRest(_b, [
@@ -71,3 +71,4 @@ "as",
     "listStyle",
-    "size"
+    "size",
+    "className"
   ]);
@@ -77,5 +78,10 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     __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), {
@@ -82,0 +88,0 @@ children

dist/message/index.d.ts

@@ -1,4 +0,16 @@
-export { Message, MessageProps } from './message.js';
-import 'react';
+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

@@ -15,3 +15,5 @@ import React__default from 'react';
 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-WE96Ccxa-accordion-component-20231127085047",
+  "version": "0.0.0-WE96Ccxa-accordion-icon-20231129140714",
   "main": "./dist/index.js",
@@ -18,9 +18,7 @@ "module": "./dist/index.mjs",
     "typescript": "^5.2.2",
-    "eslint-config-custom": "0.0.0-WE96Ccxa-accordion-component-20231127085047",
+    "eslint-config-custom": "0.0.1",
     "hedwig-tsconfig": "0.0.0"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
-    "@postenbring/hedwig-css": "0.0.0-WE96Ccxa-accordion-component-20231127085047",
-    "@postenbring/hedwig-tokens": "0.0.0-WE96Ccxa-accordion-component-20231127085047"
+    "@postenbring/hedwig-css": "0.0.0-WE96Ccxa-accordion-icon-20231129140714"
   },
@@ -27,0 +25,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

188785

increased by13.35%

Dependency count

1

decreased by-66.67%

Number of package files

113

increased by4.63%

Lines of code

4652

increased by12.34%

Dependency changes

• + Added@postenbring/hedwig-css@0.0.0-WE96Ccxa-accordion-icon-20231129140714(transitive)

• + Added@postenbring/hedwig-tokens@0.0.3(transitive)

• - Removed@postenbring/hedwig-tokens@0.0.0-WE96Ccxa-accordion-component-20231127085047

• - Removedclsx@^2.0.0

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

• - Removed@postenbring/hedwig-css@0.0.0-WE96Ccxa-accordion-component-20231127085047(transitive)

• - Removed@postenbring/hedwig-tokens@0.0.0-WE96Ccxa-accordion-component-20231127085047(transitive)

• Updated@postenbring/hedwig-css@0.0.0-WE96Ccxa-accordion-icon-20231129140714