@postenbring/hedwig-react 0.0.76 → 0.0.77

package/dist/badge/index.d.ts

@@ -1,5 +1,6 @@
-export { Badge_alias_3 as Badge } from '../_tsup-dts-rollup';
+export { Badge_alias_2 as Badge } from '../_tsup-dts-rollup';
 export { DarkBadge_alias_3 as DarkBadge } from '../_tsup-dts-rollup';
 export { WarningBadge_alias_3 as WarningBadge } from '../_tsup-dts-rollup';
 export { WhiteBadge_alias_3 as WhiteBadge } from '../_tsup-dts-rollup';
 export { BadgeProps_alias_3 as BadgeProps } from '../_tsup-dts-rollup';
+export { LighterBadge_alias_3 as LighterBadge } from '../_tsup-dts-rollup';

package/dist/badge/index.js

@@ -49,7 +49,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/badge/index.tsx
 var badge_exports = {};
 __export(badge_exports, {
-  Badge: () => Badge,
+  Badge: () => LighterBadge,
   DarkBadge: () => DarkBadge,
   WarningBadge: () => WarningBadge,
   WhiteBadge: () => WhiteBadge
@@ -57,24 +57,17 @@ __export(badge_exports, {
 module.exports = __toCommonJS(badge_exports);
 
 // src/badge/badge.tsx
-var React = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function BaseBadge(_a) {
-  var _b = _a, {
-    children,
-    variant,
-    size = "small",
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "variant",
-    "size",
-    "className"
-  ]);
+var Badge = (0, import_react.forwardRef)((_a, ref) => {
+  var _b = _a, { children, asChild, variant, size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
+  const Component = asChild ? import_react_slot.Slot : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
+    Component,
     __spreadProps(__spreadValues({
+      ref,
       className: (0, import_typed_classname.clsx)(
         "hds-badge",
         `hds-badge--${size}`,
@@ -85,23 +78,23 @@ function BaseBadge(_a) {
       children
     })
   );
-}
-BaseBadge.displayName = "BaseBadge";
-function Badge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "lighter" }));
-}
+});
 Badge.displayName = "Badge";
-function DarkBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "dark" }));
-}
+var LighterBadge = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "lighter" }));
+});
+LighterBadge.displayName = "LighterBadge";
+var DarkBadge = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "dark" }));
+});
 DarkBadge.displayName = "DarkBadge";
-function WhiteBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "white" }));
-}
+var WhiteBadge = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "white" }));
+});
 WhiteBadge.displayName = "WhiteBadge";
-function WarningBadge(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseBadge, __spreadProps(__spreadValues({}, props), { variant: "warning" }));
-}
+var WarningBadge = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "warning" }));
+});
 WarningBadge.displayName = "WarningBadge";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/badge/index.tsx","../../src/badge/badge.tsx"],"sourcesContent":["export { Badge, DarkBadge, WarningBadge, WhiteBadge } from \"./badge\";\n\nexport type * from \"./badge\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {\n  /**\n   * Font size of the badge\n   */\n  size?: \"small\" | \"smaller\";\n\n  children: React.ReactNode;\n}\n\nfunction BaseBadge({\n  children,\n  variant,\n  size = \"small\",\n  className,\n  ...rest\n}: BadgeProps & { variant: \"lighter\" | \"dark\" | \"white\" | \"warning\" }) {\n  return (\n    <span\n      className={clsx(\n        \"hds-badge\",\n        `hds-badge--${size}`,\n        `hds-badge--${variant}`,\n        className as undefined,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n\nBaseBadge.displayName = \"BaseBadge\";\n\nexport function Badge(props: BadgeProps) {\n  return <BaseBadge {...props} variant=\"lighter\" />;\n}\n\nBadge.displayName = \"Badge\";\n\nexport function DarkBadge(props: BadgeProps) {\n  return <BaseBadge {...props} variant=\"dark\" />;\n}\n\nDarkBadge.displayName = \"DarkBadge\";\n\nexport function WhiteBadge(props: BadgeProps) {\n  return <BaseBadge {...props} variant=\"white\" />;\n}\n\nWhiteBadge.displayName = \"WhiteBadge\";\n\nexport function WarningBadge(props: BadgeProps) {\n  return <BaseBadge {...props} variant=\"warning\" />;\n}\n\nWarningBadge.displayName = \"WarningBadge\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AAmBjB;AARJ,SAAS,UAAU,IAMoD;AANpD,eACjB;AAAA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EAhBF,IAYmB,IAKd,iBALc,IAKd;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,cAAc,OAAO;AAAA,QACrB;AAAA,MACF;AAAA,OACI,OAPL;AAAA,MASE;AAAA;AAAA,EACH;AAEJ;AAEA,UAAU,cAAc;AAEjB,SAAS,MAAM,OAAmB;AACvC,SAAO,4CAAC,4CAAc,QAAd,EAAqB,SAAQ,YAAU;AACjD;AAEA,MAAM,cAAc;AAEb,SAAS,UAAU,OAAmB;AAC3C,SAAO,4CAAC,4CAAc,QAAd,EAAqB,SAAQ,SAAO;AAC9C;AAEA,UAAU,cAAc;AAEjB,SAAS,WAAW,OAAmB;AAC5C,SAAO,4CAAC,4CAAc,QAAd,EAAqB,SAAQ,UAAQ;AAC/C;AAEA,WAAW,cAAc;AAElB,SAAS,aAAa,OAAmB;AAC9C,SAAO,4CAAC,4CAAc,QAAd,EAAqB,SAAQ,YAAU;AACjD;AAEA,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../src/badge/index.tsx","../../src/badge/badge.tsx"],"sourcesContent":["export { LighterBadge as Badge, DarkBadge, WarningBadge, WhiteBadge } from \"./badge\";\n\nexport type * from \"./badge\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\n\nexport interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n\n  /**\n   * Font size of the badge\n   *\n   * @default \"small\"\n   */\n  size?: \"small\" | \"smaller\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nconst Badge = forwardRef<\n  HTMLSpanElement,\n  BadgeProps & { variant: \"lighter\" | \"dark\" | \"white\" | \"warning\" }\n>(({ children, asChild, variant, size = \"small\", className, ...rest }, ref) => {\n  const Component = asChild ? Slot : \"span\";\n  return (\n    <Component\n      ref={ref}\n      className={clsx(\n        \"hds-badge\",\n        `hds-badge--${size}`,\n        `hds-badge--${variant}`,\n        className as undefined,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n});\nBadge.displayName = \"Badge\";\n\nexport const LighterBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  return <Badge {...props} ref={ref} variant=\"lighter\" />;\n});\nLighterBadge.displayName = \"LighterBadge\";\n\nexport const DarkBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  return <Badge {...props} ref={ref} variant=\"dark\" />;\n});\nDarkBadge.displayName = \"DarkBadge\";\n\nexport const WhiteBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  return <Badge {...props} ref={ref} variant=\"white\" />;\n});\nWhiteBadge.displayName = \"WhiteBadge\";\n\nexport const WarningBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  return <Badge {...props} ref={ref} variant=\"warning\" />;\n});\nWarningBadge.displayName = \"WarningBadge\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AACrB,wBAAqB;AACrB,mBAA2B;AA0BvB;AANJ,IAAM,YAAQ,yBAGZ,CAAC,IAAoE,QAAQ;AAA5E,eAAE,YAAU,SAAS,SAAS,OAAO,SAAS,UAzBjD,IAyBG,IAA4D,iBAA5D,IAA4D,CAA1D,YAAU,WAAS,WAAS,QAAgB;AAC/C,QAAM,YAAY,UAAU,yBAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA,cAAc,IAAI;AAAA,QAClB,cAAc,OAAO;AAAA,QACrB;AAAA,MACF;AAAA,OACI,OARL;AAAA,MAUE;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,MAAM,cAAc;AAEb,IAAM,mBAAe,yBAAwC,CAAC,OAAO,QAAQ;AAClF,SAAO,4CAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,YAAU;AACvD,CAAC;AACD,aAAa,cAAc;AAEpB,IAAM,gBAAY,yBAAwC,CAAC,OAAO,QAAQ;AAC/E,SAAO,4CAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,SAAO;AACpD,CAAC;AACD,UAAU,cAAc;AAEjB,IAAM,iBAAa,yBAAwC,CAAC,OAAO,QAAQ;AAChF,SAAO,4CAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,UAAQ;AACrD,CAAC;AACD,WAAW,cAAc;AAElB,IAAM,mBAAe,yBAAwC,CAAC,OAAO,QAAQ;AAClF,SAAO,4CAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,YAAU;AACvD,CAAC;AACD,aAAa,cAAc;","names":[]}

package/dist/badge/index.mjs

@@ -1,13 +1,13 @@
 import "../chunk-K6PP3ACJ.mjs";
 import {
-  Badge,
   DarkBadge,
+  LighterBadge,
   WarningBadge,
   WhiteBadge
-} from "../chunk-W3D4VR4Y.mjs";
+} from "../chunk-P6KBFRF4.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  Badge,
+  LighterBadge as Badge,
   DarkBadge,
   WarningBadge,
   WhiteBadge

package/dist/box/box.js

@@ -55,11 +55,12 @@ __export(box_exports, {
 module.exports = __toCommonJS(box_exports);
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Box = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      asChild,
       variant,
       closeable = false,
       onClose: onCloseProp,
@@ -68,7 +69,7 @@ var Box = (0, import_react.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "variant",
       "closeable",
       "onClose",
@@ -89,6 +90,7 @@ var Box = (0, import_react.forwardRef)(
       }
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
+    const Component = asChild ? import_react_slot.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       __spreadProps(__spreadValues({
@@ -102,7 +104,7 @@ var Box = (0, import_react.forwardRef)(
       }, rest), {
         children: [
           closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
         ]
       })
     );

package/dist/box/box.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/box.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAClD,6BAAqB;AAmEf;AA9BC,IAAM,UAAsD;AAAA,EACjE,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UACzE;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxFL,IAwFG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../src/box/box.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAkF1B;AA/BC,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA/DN,IAuDI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxGL,IAwGG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/box/box.mjs

@@ -1,7 +1,7 @@
 import {
   Box,
   BoxCloseButton
-} from "../chunk-EGXM575K.mjs";
+} from "../chunk-ENKVTAJB.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Box,

package/dist/box/index.js

@@ -57,11 +57,12 @@ module.exports = __toCommonJS(box_exports);
 // src/box/box.tsx
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Box = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      asChild,
       variant,
       closeable = false,
       onClose: onCloseProp,
@@ -70,7 +71,7 @@ var Box = (0, import_react.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "variant",
       "closeable",
       "onClose",
@@ -91,6 +92,7 @@ var Box = (0, import_react.forwardRef)(
       }
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
+    const Component = asChild ? import_react_slot.Slot : "div";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       __spreadProps(__spreadValues({
@@ -104,7 +106,7 @@ var Box = (0, import_react.forwardRef)(
       }, rest), {
         children: [
           closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          children
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
         ]
       })
     );

package/dist/box/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/box/index.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkD;AAClD,6BAAqB;AAmEf;AA9BC,IAAM,UAAsD;AAAA,EACjE,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UACzE;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxFL,IAwFG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;ADjG7B,IAAM,eAAe;AAGrB,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../src/box/index.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAkF1B;AA/BC,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA/DN,IAuDI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxGL,IAwGG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;ADjH7B,IAAM,eAAe;AAGrB,aAAa,cAAc;","names":[]}

package/dist/box/index.mjs

@@ -1,9 +1,9 @@
 import {
   BoxComponent
-} from "../chunk-NMMFIRLZ.mjs";
+} from "../chunk-3NL3TOZF.mjs";
 import {
   BoxCloseButton
-} from "../chunk-EGXM575K.mjs";
+} from "../chunk-ENKVTAJB.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   BoxComponent as Box,

package/dist/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * **Usage**\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  ({ olProps, children, ...rest }, ref) => {\n    return (\n      <nav ref={ref} {...rest}>\n        <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n          {children}\n        </ol>\n      </nav>\n    );\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmF;AACnF,6BAAqB;AAsCb;AAJD,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SApCd,IAoCG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,WACE,4CAAC,sCAAI,OAAc,OAAlB,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}
+{"version":3,"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * @example\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  ({ olProps, children, ...rest }, ref) => {\n    return (\n      <nav ref={ref} {...rest}>\n        <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n          {children}\n        </ol>\n      </nav>\n    );\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmF;AACnF,6BAAqB;AAsCb;AAJD,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SApCd,IAoCG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,WACE,4CAAC,sCAAI,OAAc,OAAlB,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/breadcrumbs/breadcrumbs.mjs

@@ -1,6 +1,6 @@
 import {
   Breadcrumbs
-} from "../chunk-GGEQEVZ4.mjs";
+} from "../chunk-YSFZCRWS.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Breadcrumbs

package/dist/breadcrumbs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/breadcrumbs/index.tsx","../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["export { Breadcrumbs } from \"./breadcrumbs\";\n\nexport type * from \"./breadcrumbs\";\n","import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * **Usage**\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  ({ olProps, children, ...rest }, ref) => {\n    return (\n      <nav ref={ref} {...rest}>\n        <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n          {children}\n        </ol>\n      </nav>\n    );\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAmF;AACnF,6BAAqB;AAsCb;AAJD,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SApCd,IAoCG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,WACE,4CAAC,sCAAI,OAAc,OAAlB,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}
+{"version":3,"sources":["../../src/breadcrumbs/index.tsx","../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["export { Breadcrumbs } from \"./breadcrumbs\";\n\nexport type * from \"./breadcrumbs\";\n","import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * @example\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(\n  ({ olProps, children, ...rest }, ref) => {\n    return (\n      <nav ref={ref} {...rest}>\n        <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n          {children}\n        </ol>\n      </nav>\n    );\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAmF;AACnF,6BAAqB;AAsCb;AAJD,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAgC,QAAQ;AAAxC,iBAAE,WAAS,SApCd,IAoCG,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACV,WACE,4CAAC,sCAAI,OAAc,OAAlB,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/breadcrumbs/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-ISAHCU7C.mjs";
 import {
   Breadcrumbs
-} from "../chunk-GGEQEVZ4.mjs";
+} from "../chunk-YSFZCRWS.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Breadcrumbs

package/dist/button/button.d.mts

@@ -1,4 +1,3 @@
 export { ButtonProps_alias_2 as ButtonProps } from '../_tsup-dts-rollup';
-export { BaseButton_alias_2 as BaseButton } from '../_tsup-dts-rollup';
 export { PrimaryButton_alias_2 as PrimaryButton } from '../_tsup-dts-rollup';
 export { SecondaryButton_alias_2 as SecondaryButton } from '../_tsup-dts-rollup';

package/dist/button/button.d.ts

@@ -1,4 +1,3 @@
 export { ButtonProps_alias_2 as ButtonProps } from '../_tsup-dts-rollup';
-export { BaseButton_alias_2 as BaseButton } from '../_tsup-dts-rollup';
 export { PrimaryButton_alias_2 as PrimaryButton } from '../_tsup-dts-rollup';
 export { SecondaryButton_alias_2 as SecondaryButton } from '../_tsup-dts-rollup';

package/dist/button/button.js

@@ -49,18 +49,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/button/button.tsx
 var button_exports = {};
 __export(button_exports, {
-  BaseButton: () => BaseButton,
   PrimaryButton: () => PrimaryButton,
   SecondaryButton: () => SecondaryButton
 });
 module.exports = __toCommonJS(button_exports);
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
-var BaseButton = (0, import_react.forwardRef)(
+var Button = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "button",
+      asChild,
       children,
       variant,
       size = "medium",
@@ -69,7 +69,7 @@ var BaseButton = (0, import_react.forwardRef)(
       icon,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "children",
       "variant",
       "size",
@@ -78,7 +78,8 @@ var BaseButton = (0, import_react.forwardRef)(
       "icon",
       "className"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    const Component = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)(
@@ -89,36 +90,28 @@ var BaseButton = (0, import_react.forwardRef)(
             [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
-            "hds-button--icon-only": icon && !children
+            "hds-button--icon-only": icon
           },
           className
         ),
         ref
       }, rest), {
-        children: [
-          icon && !children ? icon : null,
-          children
-        ]
+        children
       })
     );
   }
 );
-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" }));
-  }
-);
+Button.displayName = "Button";
+var PrimaryButton = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
+});
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = (0, import_react.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
-  }
-);
+var SecondaryButton = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, __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
 });

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * The background fill of the button\n   */\n  fill?: \"contained\" | \"outline\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Use an icon inside the button\n   */\n  icon?: React.ReactNode;\n\n  children?: React.ReactNode;\n}\n\nexport const BaseButton: OverridableComponent<\n  ButtonProps & { variant: \"primary\" | \"secondary\" },\n  HTMLButtonElement\n> = forwardRef(\n  (\n    {\n      as: Component = \"button\",\n      children,\n      variant,\n      size = \"medium\",\n      fullWidth = false,\n      fill = \"contained\",\n      icon,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          {\n            [`hds-button--${variant}`]: fill === \"contained\",\n            [`hds-button--outline-${variant}`]: fill === \"outline\",\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--icon-only\": icon && !children,\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {icon && !children ? icon : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBaseButton.displayName = \"BaseButton\";\n\n/**\n * ## TODO\n *\n * - [x] Handle links that looks like buttons\n * - [ ] Revisit how to handle outline\n * - [ ] Figure out outline-white\n */\n\nexport const PrimaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAC3B,6BAAqB;AA+Cf;AAnBC,IAAM,iBAGT;AAAA,EACF,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IA1CN,IAkCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB;AAAA,YACE,CAAC,eAAe,OAAO,EAAE,GAAG,SAAS;AAAA,YACrC,CAAC,uBAAuB,OAAO,EAAE,GAAG,SAAS;AAAA,YAC7C,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,QAAQ,CAAC;AAAA,UACpC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA,kBAAQ,CAAC,WAAW,OAAO;AAAA,UAC3B;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAUlB,IAAM,oBAAsE;AAAA,EACjF,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,YAAU;AAAA,EAC5D;AACF;AAEA,cAAc,cAAc;AAErB,IAAM,sBAAwE;AAAA,EACnF,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,cAAY;AAAA,EAC9D;AACF;AAEA,gBAAgB,cAAc;","names":[]}
+{"version":3,"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * The background fill of the button\n   *\n   * @default \"contained\"\n   */\n  fill?: \"contained\" | \"outline\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Use the button as an icon button\n   *\n   * Render the icon in `children`\n   */\n  icon?: boolean;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: \"primary\" | \"secondary\" }>(\n  (\n    {\n      asChild,\n      children,\n      variant,\n      size = \"medium\",\n      fullWidth = false,\n      fill = \"contained\",\n      icon,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"button\";\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          {\n            [`hds-button--${variant}`]: fill === \"contained\",\n            [`hds-button--outline-${variant}`]: fill === \"outline\",\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--icon-only\": icon,\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"primary\" />;\n});\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"secondary\" />;\n});\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAC3B,6BAAqB;AACrB,wBAAqB;AAqDf;AAjBN,IAAM,aAAS;AAAA,EACb,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB;AAAA,YACE,CAAC,eAAe,OAAO,EAAE,GAAG,SAAS;AAAA,YACrC,CAAC,uBAAuB,OAAO,EAAE,GAAG,SAAS;AAAA,YAC7C,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB;AAAA,UAC3B;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAEd,IAAM,oBAAgB,yBAA2C,CAAC,OAAO,QAAQ;AACtF,SAAO,4CAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,YAAU;AACxD,CAAC;AACD,cAAc,cAAc;AAErB,IAAM,sBAAkB,yBAA2C,CAAC,OAAO,QAAQ;AACxF,SAAO,4CAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,cAAY;AAC1D,CAAC;AACD,gBAAgB,cAAc;","names":[]}

package/dist/button/button.mjs

@@ -1,11 +1,9 @@
 import {
-  BaseButton,
   PrimaryButton,
   SecondaryButton
-} from "../chunk-BWFFP6BB.mjs";
+} from "../chunk-KEKPEN2C.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  BaseButton,
   PrimaryButton,
   SecondaryButton
 };

package/dist/button/index.d.mts

@@ -1,4 +1,3 @@
 export { PrimaryButton_alias_3 as PrimaryButton } from '../_tsup-dts-rollup';
 export { SecondaryButton_alias_3 as SecondaryButton } from '../_tsup-dts-rollup';
 export { ButtonProps_alias_3 as ButtonProps } from '../_tsup-dts-rollup';
-export { BaseButton_alias_3 as BaseButton } from '../_tsup-dts-rollup';

package/dist/button/index.d.ts

@@ -1,4 +1,3 @@
 export { PrimaryButton_alias_3 as PrimaryButton } from '../_tsup-dts-rollup';
 export { SecondaryButton_alias_3 as SecondaryButton } from '../_tsup-dts-rollup';
 export { ButtonProps_alias_3 as ButtonProps } from '../_tsup-dts-rollup';
-export { BaseButton_alias_3 as BaseButton } from '../_tsup-dts-rollup';

package/dist/button/index.js

@@ -57,11 +57,12 @@ module.exports = __toCommonJS(button_exports);
 // src/button/button.tsx
 var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
-var BaseButton = (0, import_react.forwardRef)(
+var Button = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "button",
+      asChild,
       children,
       variant,
       size = "medium",
@@ -70,7 +71,7 @@ var BaseButton = (0, import_react.forwardRef)(
       icon,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "children",
       "variant",
       "size",
@@ -79,7 +80,8 @@ var BaseButton = (0, import_react.forwardRef)(
       "icon",
       "className"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    const Component = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)(
@@ -90,32 +92,25 @@ var BaseButton = (0, import_react.forwardRef)(
             [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
-            "hds-button--icon-only": icon && !children
+            "hds-button--icon-only": icon
           },
           className
         ),
         ref
       }, rest), {
-        children: [
-          icon && !children ? icon : null,
-          children
-        ]
+        children
       })
     );
   }
 );
-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" }));
-  }
-);
+Button.displayName = "Button";
+var PrimaryButton = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
+});
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = (0, import_react.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
-  }
-);
+var SecondaryButton = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+});
 SecondaryButton.displayName = "SecondaryButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/button/index.tsx","../../src/button/button.tsx"],"sourcesContent":["export { PrimaryButton, SecondaryButton } from \"./button\";\n\nexport type * from \"./button\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * The background fill of the button\n   */\n  fill?: \"contained\" | \"outline\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Use an icon inside the button\n   */\n  icon?: React.ReactNode;\n\n  children?: React.ReactNode;\n}\n\nexport const BaseButton: OverridableComponent<\n  ButtonProps & { variant: \"primary\" | \"secondary\" },\n  HTMLButtonElement\n> = forwardRef(\n  (\n    {\n      as: Component = \"button\",\n      children,\n      variant,\n      size = \"medium\",\n      fullWidth = false,\n      fill = \"contained\",\n      icon,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          {\n            [`hds-button--${variant}`]: fill === \"contained\",\n            [`hds-button--outline-${variant}`]: fill === \"outline\",\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--icon-only\": icon && !children,\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {icon && !children ? icon : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBaseButton.displayName = \"BaseButton\";\n\n/**\n * ## TODO\n *\n * - [x] Handle links that looks like buttons\n * - [ ] Revisit how to handle outline\n * - [ ] Figure out outline-white\n */\n\nexport const PrimaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,6BAAqB;AA+Cf;AAnBC,IAAM,iBAGT;AAAA,EACF,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IA1CN,IAkCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB;AAAA,YACE,CAAC,eAAe,OAAO,EAAE,GAAG,SAAS;AAAA,YACrC,CAAC,uBAAuB,OAAO,EAAE,GAAG,SAAS;AAAA,YAC7C,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,QAAQ,CAAC;AAAA,UACpC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA,kBAAQ,CAAC,WAAW,OAAO;AAAA,UAC3B;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAUlB,IAAM,oBAAsE;AAAA,EACjF,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,YAAU;AAAA,EAC5D;AACF;AAEA,cAAc,cAAc;AAErB,IAAM,sBAAwE;AAAA,EACnF,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,cAAY;AAAA,EAC9D;AACF;AAEA,gBAAgB,cAAc;","names":[]}
+{"version":3,"sources":["../../src/button/index.tsx","../../src/button/button.tsx"],"sourcesContent":["export { PrimaryButton, SecondaryButton } from \"./button\";\n\nexport type * from \"./button\";\n","import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * The background fill of the button\n   *\n   * @default \"contained\"\n   */\n  fill?: \"contained\" | \"outline\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Use the button as an icon button\n   *\n   * Render the icon in `children`\n   */\n  icon?: boolean;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: \"primary\" | \"secondary\" }>(\n  (\n    {\n      asChild,\n      children,\n      variant,\n      size = \"medium\",\n      fullWidth = false,\n      fill = \"contained\",\n      icon,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"button\";\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          {\n            [`hds-button--${variant}`]: fill === \"contained\",\n            [`hds-button--outline-${variant}`]: fill === \"outline\",\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--icon-only\": icon,\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"primary\" />;\n});\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  return <Button {...props} ref={ref} variant=\"secondary\" />;\n});\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,6BAAqB;AACrB,wBAAqB;AAqDf;AAjBN,IAAM,aAAS;AAAA,EACb,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,yBAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB;AAAA,YACE,CAAC,eAAe,OAAO,EAAE,GAAG,SAAS;AAAA,YACrC,CAAC,uBAAuB,OAAO,EAAE,GAAG,SAAS;AAAA,YAC7C,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB;AAAA,UAC3B;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAEd,IAAM,oBAAgB,yBAA2C,CAAC,OAAO,QAAQ;AACtF,SAAO,4CAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,YAAU;AACxD,CAAC;AACD,cAAc,cAAc;AAErB,IAAM,sBAAkB,yBAA2C,CAAC,OAAO,QAAQ;AACxF,SAAO,4CAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,cAAY;AAC1D,CAAC;AACD,gBAAgB,cAAc;","names":[]}

package/dist/button/index.mjs

@@ -2,7 +2,7 @@ import "../chunk-HT2EIJAD.mjs";
 import {
   PrimaryButton,
   SecondaryButton
-} from "../chunk-BWFFP6BB.mjs";
+} from "../chunk-KEKPEN2C.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   PrimaryButton,

package/dist/card/card.d.mts

@@ -1,5 +1,5 @@
 export { CardBaseProps_alias_2 as CardBaseProps } from '../_tsup-dts-rollup';
-export { Card_alias_3 as Card } from '../_tsup-dts-rollup';
+export { Card_alias_2 as Card } from '../_tsup-dts-rollup';
 export { CardMedia_alias_2 as CardMedia } from '../_tsup-dts-rollup';
 export { CardImageMediaProps_alias_2 as CardImageMediaProps } from '../_tsup-dts-rollup';
 export { CardMediaImg_alias_2 as CardMediaImg } from '../_tsup-dts-rollup';

package/dist/card/card.d.ts

@@ -1,5 +1,5 @@
 export { CardBaseProps_alias_2 as CardBaseProps } from '../_tsup-dts-rollup';
-export { Card_alias_3 as Card } from '../_tsup-dts-rollup';
+export { Card_alias_2 as Card } from '../_tsup-dts-rollup';
 export { CardMedia_alias_2 as CardMedia } from '../_tsup-dts-rollup';
 export { CardImageMediaProps_alias_2 as CardImageMediaProps } from '../_tsup-dts-rollup';
 export { CardMediaImg_alias_2 as CardMediaImg } from '../_tsup-dts-rollup';