@postenbring/hedwig-react 0.0.76 → 0.0.77

package/dist/{chunk-A47QULAK.mjs → chunk-JF3HBGAA.mjs}

@@ -5,14 +5,15 @@ import {
 } from "./chunk-R4SQKVDQ.mjs";
 
 // src/skeleton/skeleton.tsx
-import "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var Skeleton = forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      as: Tag = "div",
+      asChild,
       children,
       animation = true,
       variant = "text",
@@ -22,6 +23,7 @@ var Skeleton = forwardRef(
       style
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "children",
       "animation",
       "variant",
@@ -30,9 +32,10 @@ var Skeleton = forwardRef(
       "className",
       "style"
     ]);
+    const Component = asChild ? Slot : Tag;
     return /* @__PURE__ */ jsx(
       Component,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         className: clsx(
           "hds-skeleton",
           `hds-skeleton--${variant}`,
@@ -40,9 +43,10 @@ var Skeleton = forwardRef(
           className
         ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
-        ref,
         "aria-hidden": true
-      }, rest), {
+      }, { inert: "true" }), {
+        ref
+      }), rest), {
         children
       })
     );
@@ -53,4 +57,4 @@ Skeleton.displayName = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-A47QULAK.mjs.map
+//# sourceMappingURL=chunk-JF3HBGAA.mjs.map

package/dist/chunk-JF3HBGAA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n\n  /**\n   * Convienence prop to change the rendered element.\n   *\n   * Use {@link SkeletonProps.asChild} if you need more control of the rendered element.\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      as: Tag = \"div\",\n      asChild,\n      children,\n      animation = true,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : Tag;\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        aria-hidden\n        {...{ inert: \"true\" }}\n        ref={ref as any}\n        {...(rest as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA0FrB;AAlBC,IAAM,WAAW;AAAA,EACtB,CACE,IAYA,QACG;AAbH,iBACE;AAAA,UAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAxFN,IA+EI,IAUK,iBAVL,IAUK;AAAA,MATH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC,eAAW;AAAA,SACP,EAAE,OAAO,OAAO,IATrB;AAAA,QAUC;AAAA,UACK,OAXN;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/{chunk-KTRIVJM3.mjs → chunk-JL4PLDXN.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-TNU64NUN.mjs";
+} from "./chunk-P6WIBHQH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -34,4 +34,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-KTRIVJM3.mjs.map
+//# sourceMappingURL=chunk-JL4PLDXN.mjs.map

package/dist/{chunk-UXJIK76H.mjs → chunk-K3CBNVXC.mjs}

@@ -1,6 +1,6 @@
 import {
   useMergeRefs
-} from "./chunk-JXA3B33M.mjs";
+} from "./chunk-DEX36MFK.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -13,14 +13,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var AutoAnimateHeight = forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
       children,
       style,
       animationDuration = "quick",
       animationEasing = "normal",
       onTransitionEnd
     } = _b, rest = __objRest(_b, [
-      "as",
       "children",
       "style",
       "animationDuration",
@@ -77,7 +75,7 @@ var AutoAnimateHeight = forwardRef(
       };
     }, [children]);
     return /* @__PURE__ */ jsxs(
-      Component,
+      "div",
       __spreadProps(__spreadValues({
         ref: mergedRef,
         onTransitionEnd,
@@ -115,4 +113,4 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 export {
   AutoAnimateHeight
 };
-//# sourceMappingURL=chunk-UXJIK76H.mjs.map
+//# sourceMappingURL=chunk-K3CBNVXC.mjs.map

package/dist/chunk-K3CBNVXC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Callback fired when animiation transition ends\n   * Use this to do effects after resizing is done, e.g. scrolling to the element\n   * using `element.scrollIntoView()`\n   */\n  onTransitionEnd?: () => void;\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight = forwardRef<HTMLDivElement, AutoAnimateHeightProps>(\n  (\n    {\n      children,\n      style,\n      animationDuration = \"quick\",\n      animationEasing = \"normal\",\n      onTransitionEnd,\n      ...rest\n    },\n    ref,\n  ) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([rootRef, ref]);\n    const measurementRef = useRef<HTMLDivElement>(null);\n    const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(\n      undefined,\n    );\n    const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n      cloneElement(<>{children}</>, {}),\n    );\n\n    useEffect(() => {\n      if (!rootRef.current) return;\n      if (!measurementRef.current) return;\n      if (document.body.scrollHeight === 0) return;\n      const currentMeasurement = measurementRef.current;\n      const { height: newHeight } = currentMeasurement.getBoundingClientRect();\n\n      // Listen for resize events on the measurement element\n      // Keep the children in sync with the height\n      // But don't animate it.\n      let previouslyObservedHeight = newHeight;\n      const resizeObserver = new ResizeObserver(() => {\n        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();\n        if (resizedHeight === previouslyObservedHeight) return;\n        previouslyObservedHeight = resizedHeight;\n        setHeight({ height: resizedHeight, shouldAnimate: false });\n      });\n      resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions\n\n      // Set the new height when children changes\n      setHeight({ height: newHeight, shouldAnimate: true });\n\n      // Update children\n      const nextClonedChildren = cloneElement(<>{children}</>, {});\n\n      // When increasing in height update immediately so the new content is shown during the animation\n      if (newHeight >= (height?.height ?? 0)) {\n        setClonedChildren(nextClonedChildren);\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n\n      // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content\n      const currentRoot = rootRef.current;\n      function onTransitionEndHandler(e: TransitionEvent) {\n        if (e.propertyName !== \"height\") return;\n        setClonedChildren(nextClonedChildren);\n      }\n      currentRoot.addEventListener(\"transitionend\", onTransitionEndHandler);\n      return () => {\n        resizeObserver.disconnect();\n        currentRoot.removeEventListener(\"transitionend\", onTransitionEndHandler);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        onTransitionEnd={onTransitionEnd}\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,\n          transitionProperty: height?.shouldAnimate ? \"height\" : \"none\",\n          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n          willChange: \"height\",\n          ...style,\n        }}\n        {...rest}\n      >\n        <div\n          aria-hidden\n          ref={measurementRef}\n          style={{\n            position: \"absolute\",\n            visibility: \"hidden\",\n          }}\n        >\n          {children}\n        </div>\n        {clonedChildren}\n      </div>\n    );\n  },\n);\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AAuDnD,wBAoDb,YApDa;AAnBZ,IAAM,oBAAoB;AAAA,EAC/B,CACE,IAQA,QACG;AATH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB;AAAA,IA3CN,IAsCI,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AA3CN,QAAAA,KAAAC;AAgDI,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,YAAY,aAAa,CAAC,SAAS,GAAG,CAAC;AAC7C,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AAEA,cAAU,MAAM;AA1DpB,UAAAD;AA2DM,UAAI,CAAC,QAAQ;AAAS;AACtB,UAAI,CAAC,eAAe;AAAS;AAC7B,UAAI,SAAS,KAAK,iBAAiB;AAAG;AACtC,YAAM,qBAAqB,eAAe;AAC1C,YAAM,EAAE,QAAQ,UAAU,IAAI,mBAAmB,sBAAsB;AAKvE,UAAI,2BAA2B;AAC/B,YAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB,sBAAsB;AAC3E,YAAI,kBAAkB;AAA0B;AAChD,mCAA2B;AAC3B,kBAAU,EAAE,QAAQ,eAAe,eAAe,MAAM,CAAC;AAAA,MAC3D,CAAC;AACD,qBAAe,QAAQ,kBAAkB;AAGzC,gBAAU,EAAE,QAAQ,WAAW,eAAe,KAAK,CAAC;AAGpD,YAAM,qBAAqB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAG3D,UAAI,eAAcA,MAAA,iCAAQ,WAAR,OAAAA,MAAkB,IAAI;AACtC,0BAAkB,kBAAkB;AACpC,eAAO,MAAM;AACX,yBAAe,WAAW;AAAA,QAC5B;AAAA,MACF;AAGA,YAAM,cAAc,QAAQ;AAC5B,eAAS,uBAAuB,GAAoB;AAClD,YAAI,EAAE,iBAAiB;AAAU;AACjC,0BAAkB,kBAAkB;AAAA,MACtC;AACA,kBAAY,iBAAiB,iBAAiB,sBAAsB;AACpE,aAAO,MAAM;AACX,uBAAe,WAAW;AAC1B,oBAAY,oBAAoB,iBAAiB,sBAAsB;AAAA,MACzE;AAAA,IAGF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAQC,MAAA,iCAAQ,WAAR,OAAAA,OAAkBD,MAAA,eAAe,YAAf,gBAAAA,IAAwB,wBAAwB;AAAA,UAC1E,qBAAoB,iCAAQ,iBAAgB,WAAW;AAAA,UACvD,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,UAC7E,YAAY;AAAA,WACT;AAAA,SAED,OAbL;AAAA,QAeC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;","names":["_a","_b"]}

package/dist/{chunk-BWFFP6BB.mjs → chunk-KEKPEN2C.mjs}

@@ -7,11 +7,12 @@ import {
 // src/button/button.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BaseButton = forwardRef(
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Button = forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "button",
+      asChild,
       children,
       variant,
       size = "medium",
@@ -20,7 +21,7 @@ var BaseButton = forwardRef(
       icon,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "children",
       "variant",
       "size",
@@ -29,7 +30,8 @@ var BaseButton = forwardRef(
       "icon",
       "className"
     ]);
-    return /* @__PURE__ */ jsxs(
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
         className: clsx(
@@ -40,37 +42,29 @@ var BaseButton = 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 = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
-  }
-);
+Button.displayName = "Button";
+var PrimaryButton = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
+});
 PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(BaseButton, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
-  }
-);
+var SecondaryButton = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
+});
 SecondaryButton.displayName = "SecondaryButton";
 
 export {
-  BaseButton,
   PrimaryButton,
   SecondaryButton
 };
-//# sourceMappingURL=chunk-BWFFP6BB.mjs.map
+//# sourceMappingURL=chunk-KEKPEN2C.mjs.map

package/dist/chunk-KEKPEN2C.mjs.map

@@ -0,0 +1 @@
+{"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,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAqDf;AAjBN,IAAM,SAAS;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,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;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,gBAAgB,WAA2C,CAAC,OAAO,QAAQ;AACtF,SAAO,oBAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,YAAU;AACxD,CAAC;AACD,cAAc,cAAc;AAErB,IAAM,kBAAkB,WAA2C,CAAC,OAAO,QAAQ;AACxF,SAAO,oBAAC,yCAAW,QAAX,EAAkB,KAAU,SAAQ,cAAY;AAC1D,CAAC;AACD,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-VRIY65P5.mjs → chunk-KPGSRU4I.mjs}

@@ -10,9 +10,9 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx } from "react/jsx-runtime";
 var Accordion = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, className, indent = true } = _b, rest = __objRest(_b, ["as", "children", "className", "indent"]);
+    var _b = _a, { children, className, indent = true } = _b, rest = __objRest(_b, ["children", "className", "indent"]);
     return /* @__PURE__ */ jsx(
-      Component,
+      "div",
       __spreadProps(__spreadValues({}, rest), {
         className: clsx(
           "hds-accordion",
@@ -30,4 +30,4 @@ Accordion.displayName = "Accordion";
 export {
   Accordion
 };
-//# sourceMappingURL=chunk-VRIY65P5.mjs.map
+//# sourceMappingURL=chunk-KPGSRU4I.mjs.map

package/dist/chunk-KPGSRU4I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { AccordionItemProps } from \"./accordion-item\";\n\nexport interface AccordionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Accepts type of <AccordionItem/>\n   */\n  children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n  /**\n   * Adds padding to the left of the accordion\n   */\n  indent?: boolean;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  ({ children, className, indent = true, ...rest }, ref) => {\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          \"hds-accordion\",\n          !indent && \"hds-accordion--no-indent\",\n          className as undefined,\n        )}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n"],"mappings":";;;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAkBf;AAHC,IAAM,YAAY;AAAA,EACvB,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,YAAU,WAAW,SAAS,KAlBnC,IAkBG,IAAyC,iBAAzC,IAAyC,CAAvC,YAAU,aAAW;AACtB,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,CAAC,UAAU;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/{chunk-CSAEHQ4R.mjs → chunk-LTTJWLS7.mjs}

@@ -4,7 +4,7 @@ import {
   FooterLinkSection,
   FooterLinkSections,
   FooterLogo
-} from "./chunk-S3BGPCLK.mjs";
+} from "./chunk-HFXVRPBA.mjs";
 
 // src/footer/index.tsx
 var FooterComponent = Footer;
@@ -16,4 +16,4 @@ FooterComponent.LinkSection = FooterLinkSection;
 export {
   FooterComponent
 };
-//# sourceMappingURL=chunk-CSAEHQ4R.mjs.map
+//# sourceMappingURL=chunk-LTTJWLS7.mjs.map

package/dist/{chunk-5QL53TR2.mjs → chunk-MJ2DZH3N.mjs}

@@ -8,10 +8,12 @@ import {
 import "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var Link = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "a", children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["as", "children", "variant", "size", "className"]);
+    var _b = _a, { asChild, children, variant = "underline", size = "medium", className } = _b, rest = __objRest(_b, ["asChild", "children", "variant", "size", "className"]);
+    const Component = asChild ? Slot : "a";
     return /* @__PURE__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
@@ -33,4 +35,4 @@ Link.displayName = "Link";
 export {
   Link
 };
-//# sourceMappingURL=chunk-5QL53TR2.mjs.map
+//# sourceMappingURL=chunk-MJ2DZH3N.mjs.map

package/dist/chunk-MJ2DZH3N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/link/link.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\";\n\n  /**\n   * Font size of the link\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  children: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ asChild, children, variant = \"underline\", size = \"medium\", className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"medium\" && `hds-link--${size}`,\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AA2Bf;AAJC,IAAM,OAAO;AAAA,EAClB,CAAC,IAAmF,QAAQ;AAA3F,iBAAE,WAAS,UAAU,UAAU,aAAa,OAAO,UAAU,UA3BhE,IA2BG,IAA2E,iBAA3E,IAA2E,CAAzE,WAAS,YAAU,WAAuB,QAAiB;AAC5D,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,eAAe,aAAa,OAAO;AAAA,UAC/C,SAAS,YAAY,aAAa,IAAI;AAAA,UACtC;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/{chunk-DFH4YKQA.mjs → chunk-NAIBK23T.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-TNU64NUN.mjs";
+} from "./chunk-P6WIBHQH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -33,4 +33,4 @@ Select.displayName = "Select";
 export {
   Select
 };
-//# sourceMappingURL=chunk-DFH4YKQA.mjs.map
+//# sourceMappingURL=chunk-NAIBK23T.mjs.map

package/dist/chunk-P6KBFRF4.mjs

@@ -0,0 +1,54 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/badge/badge.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Badge = forwardRef((_a, ref) => {
+  var _b = _a, { children, asChild, variant, size = "small", className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "size", "className"]);
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    __spreadProps(__spreadValues({
+      ref,
+      className: clsx(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className
+      )
+    }, rest), {
+      children
+    })
+  );
+});
+Badge.displayName = "Badge";
+var LighterBadge = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "lighter" }));
+});
+LighterBadge.displayName = "LighterBadge";
+var DarkBadge = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "dark" }));
+});
+DarkBadge.displayName = "DarkBadge";
+var WhiteBadge = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "white" }));
+});
+WhiteBadge.displayName = "WhiteBadge";
+var WarningBadge = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Badge, __spreadProps(__spreadValues({}, props), { ref, variant: "warning" }));
+});
+WarningBadge.displayName = "WarningBadge";
+
+export {
+  LighterBadge,
+  DarkBadge,
+  WhiteBadge,
+  WarningBadge
+};
+//# sourceMappingURL=chunk-P6KBFRF4.mjs.map

package/dist/chunk-P6KBFRF4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/badge.tsx"],"sourcesContent":["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,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA0BvB;AANJ,IAAM,QAAQ,WAGZ,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,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;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,eAAe,WAAwC,CAAC,OAAO,QAAQ;AAClF,SAAO,oBAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,YAAU;AACvD,CAAC;AACD,aAAa,cAAc;AAEpB,IAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAC/E,SAAO,oBAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,SAAO;AACpD,CAAC;AACD,UAAU,cAAc;AAEjB,IAAM,aAAa,WAAwC,CAAC,OAAO,QAAQ;AAChF,SAAO,oBAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,UAAQ;AACrD,CAAC;AACD,WAAW,cAAc;AAElB,IAAM,eAAe,WAAwC,CAAC,OAAO,QAAQ;AAClF,SAAO,oBAAC,wCAAU,QAAV,EAAiB,KAAU,SAAQ,YAAU;AACvD,CAAC;AACD,aAAa,cAAc;","names":[]}

package/dist/{chunk-TNU64NUN.mjs → chunk-P6WIBHQH.mjs}

@@ -1,6 +1,6 @@
 import {
   ErrorMessage
-} from "./chunk-IL7576PP.mjs";
+} from "./chunk-DFU2THGC.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -99,4 +99,4 @@ var InputGroup = forwardRef(function InputGroup2(_a, ref) {
 export {
   InputGroup
 };
-//# sourceMappingURL=chunk-TNU64NUN.mjs.map
+//# sourceMappingURL=chunk-P6WIBHQH.mjs.map

package/dist/{chunk-E2RTLHMZ.mjs → chunk-PLXB3TNA.mjs}

@@ -1,6 +1,6 @@
 import {
   BoxComponent
-} from "./chunk-NMMFIRLZ.mjs";
+} from "./chunk-3NL3TOZF.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -51,4 +51,4 @@ HelpText.displayName = "HelpText";
 export {
   HelpText
 };
-//# sourceMappingURL=chunk-E2RTLHMZ.mjs.map
+//# sourceMappingURL=chunk-PLXB3TNA.mjs.map

package/dist/chunk-PLXB3TNA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/help-text/help-text.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Box } from \"../box\";\n\ninterface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement> {\n  className?: string;\n\n  /**\n   * The content of the help text, often a word or phrase that could use some explanation\n   */\n  children: React.ReactNode;\n\n  /**\n   * The help text that will be shown when the user clicks the trigger\n   */\n  helpText: React.ReactNode;\n\n  /**\n   * The title of the help text. Used by screen readers and if the user hover over the help text\n   */\n  title?: string;\n\n  /**\n   * Props for the `Box` that contains the help text\n   */\n  boxProps?: React.ComponentProps<typeof Box>;\n\n  /**\n   * The side of the trigger the popover should be attached to\n   *\n   * @default \"top\"\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /**\n   * The alignment of the popover content\n   *\n   * @default \"start\"\n   */\n  align?: \"center\" | \"end\" | \"start\";\n}\n\n/**\n * Show a help text for a word or phrase when clicked\n *\n * Useful for providing explanations for domain-specific terms, acronyms or phrases that could do with further elaboration\n *\n * @example\n * ```tsx\n * <p>\n *   En annen avgjørende faktor for avgifter er om nettbutikken er registrert i{\" \"}\n *   <HelpText helpText={`VOEC er en forkortelse for \"VAT on E-commerce\" (mva. på e-handel).`}>\n *    VOEC\n *   </HelpText>\n * </p>\n * ```\n */\nexport const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(\n  (\n    { children, className, helpText, title, side = \"top\", align = \"start\", boxProps, ...rest },\n    ref,\n  ) => {\n    return (\n      // NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)\n      // In the future we can use the native popover api, but as of writing, though all browsers support it\n      // it's not far enough back to be used in production\n      // https://caniuse.com/mdn-html_elements_input_popovertarget\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button\n            ref={ref}\n            className={clsx(\"hds-help-text-button\", className as undefined)}\n            title={title}\n            type=\"button\"\n            {...rest}\n          >\n            {children}\n          </button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content asChild side={side} align={align}>\n            <Box\n              {...boxProps}\n              className={clsx(\"hds-help-text-box\", boxProps?.className as undefined)}\n            >\n              <Popover.Close asChild>\n                <Box.CloseButton />\n              </Popover.Close>\n              {helpText}\n            </Box>\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    );\n  },\n);\nHelpText.displayName = \"HelpText\";\n"],"mappings":";;;;;;;;;;AAAA,YAAY,aAAa;AACzB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAoEjB,cAYE,YAZF;AAZH,IAAM,WAAW;AAAA,EACtB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,WAAW,UAAU,OAAO,OAAO,OAAO,QAAQ,SAAS,SA5D3E,IA4DI,IAAoF,iBAApF,IAAoF,CAAlF,YAAU,aAAW,YAAU,SAAO,QAAc,SAAiB;AAGvE;AAAA;AAAA;AAAA;AAAA;AAAA,MAKE,qBAAS,cAAR,EACC;AAAA,4BAAS,iBAAR,EAAgB,SAAO,MACtB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,KAAK,wBAAwB,SAAsB;AAAA,YAC9D;AAAA,YACA,MAAK;AAAA,aACD,OALL;AAAA,YAOE;AAAA;AAAA,QACH,GACF;AAAA,QACA,oBAAS,gBAAR,EACC,8BAAS,iBAAR,EAAgB,SAAO,MAAC,MAAY,OACnC;AAAA,UAAC;AAAA,2CACK,WADL;AAAA,YAEC,WAAW,KAAK,qBAAqB,qCAAU,SAAsB;AAAA,YAErE;AAAA,kCAAS,eAAR,EAAc,SAAO,MACpB,8BAAC,aAAI,aAAJ,EAAgB,GACnB;AAAA,cACC;AAAA;AAAA;AAAA,QACH,GACF,GACF;AAAA,SACF;AAAA;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-PT5H3QV6.mjs

@@ -0,0 +1,29 @@
+import {
+  Card,
+  CardBody,
+  CardBodyAction,
+  CardBodyActionArrow,
+  CardBodyDescription,
+  CardBodyHeader,
+  CardBodyHeaderOverline,
+  CardBodyHeaderTitle,
+  CardMedia,
+  CardMediaImg
+} from "./chunk-CIHZDFSQ.mjs";
+
+// src/card/index.tsx
+var CardComponent = Card;
+CardComponent.Media = CardMedia;
+CardComponent.MediaImg = CardMediaImg;
+CardComponent.Body = CardBody;
+CardComponent.BodyHeader = CardBodyHeader;
+CardComponent.BodyHeaderOverline = CardBodyHeaderOverline;
+CardComponent.BodyHeaderTitle = CardBodyHeaderTitle;
+CardComponent.BodyDescription = CardBodyDescription;
+CardComponent.BodyAction = CardBodyAction;
+CardComponent.BodyActionArrow = CardBodyActionArrow;
+
+export {
+  CardComponent
+};
+//# sourceMappingURL=chunk-PT5H3QV6.mjs.map

package/dist/chunk-PT5H3QV6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/index.tsx"],"sourcesContent":["import {\n  Card,\n  CardMedia,\n  CardMediaImg,\n  CardBody,\n  CardBodyHeader,\n  CardBodyHeaderOverline,\n  CardBodyHeaderTitle,\n  CardBodyDescription,\n  CardBodyAction,\n  CardBodyActionArrow,\n} from \"./card\";\n\nconst CardComponent = Card as typeof Card & {\n  Media: typeof CardMedia;\n  MediaImg: typeof CardMediaImg;\n  Body: typeof CardBody;\n  BodyHeader: typeof CardBodyHeader;\n  BodyHeaderOverline: typeof CardBodyHeaderOverline;\n  BodyHeaderTitle: typeof CardBodyHeaderTitle;\n  BodyDescription: typeof CardBodyDescription;\n  BodyAction: typeof CardBodyAction;\n  BodyActionArrow: typeof CardBodyActionArrow;\n};\nCardComponent.Media = CardMedia;\nCardComponent.MediaImg = CardMediaImg;\nCardComponent.Body = CardBody;\nCardComponent.BodyHeader = CardBodyHeader;\nCardComponent.BodyHeaderOverline = CardBodyHeaderOverline;\nCardComponent.BodyHeaderTitle = CardBodyHeaderTitle;\nCardComponent.BodyDescription = CardBodyDescription;\nCardComponent.BodyAction = CardBodyAction;\nCardComponent.BodyActionArrow = CardBodyActionArrow;\n\nexport {\n  CardComponent as Card,\n  CardMedia,\n  CardMediaImg,\n  CardBody,\n  CardBodyHeader,\n  CardBodyHeaderOverline,\n  CardBodyHeaderTitle,\n  CardBodyDescription,\n  CardBodyAction,\n  CardBodyActionArrow,\n};\n\nexport type * from \"./card\";\n"],"mappings":";;;;;;;;;;;;;;AAaA,IAAM,gBAAgB;AAWtB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,aAAa;AAC3B,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,aAAa;AAC3B,cAAc,kBAAkB;","names":[]}

package/dist/{chunk-5YMUST7H.mjs → chunk-QY2K3GWU.mjs}

@@ -1,9 +1,9 @@
 import {
   InputGroup
-} from "./chunk-TNU64NUN.mjs";
+} from "./chunk-P6WIBHQH.mjs";
 import {
   useMergeRefs
-} from "./chunk-JXA3B33M.mjs";
+} from "./chunk-DEX36MFK.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -83,4 +83,4 @@ DatePicker.displayName = "DatePicker";
 export {
   DatePicker
 };
-//# sourceMappingURL=chunk-5YMUST7H.mjs.map
+//# sourceMappingURL=chunk-QY2K3GWU.mjs.map

package/dist/{chunk-6NGF7FFY.mjs → chunk-RYM3LM7K.mjs}

@@ -1,6 +1,6 @@
 import {
   Fieldset
-} from "./chunk-DM4PJFLG.mjs";
+} from "./chunk-6N4TGRZB.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -31,4 +31,4 @@ export {
   useRadioGroupContext,
   RadioGroup
 };
-//# sourceMappingURL=chunk-6NGF7FFY.mjs.map
+//# sourceMappingURL=chunk-RYM3LM7K.mjs.map

package/dist/{chunk-ME66RUR6.mjs → chunk-TQDUBRCZ.mjs}

@@ -1,6 +1,6 @@
 import {
   Box
-} from "./chunk-EGXM575K.mjs";
+} from "./chunk-ENKVTAJB.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -10,6 +10,7 @@ import {
 // src/message/message.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Message = forwardRef(
   (_a, ref) => {
@@ -31,7 +32,8 @@ var Message = forwardRef(
 Message.displayName = "Message";
 var MessageTitle = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Component,
       __spreadValues({
@@ -44,7 +46,8 @@ var MessageTitle = forwardRef(
 MessageTitle.displayName = "Message.Title";
 var MessageDescription = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Component,
       __spreadValues({
@@ -61,4 +64,4 @@ export {
   MessageTitle,
   MessageDescription
 };
-//# sourceMappingURL=chunk-ME66RUR6.mjs.map
+//# sourceMappingURL=chunk-TQDUBRCZ.mjs.map

package/dist/chunk-TQDUBRCZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/message/message.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\nMessage.displayName = \"Message\";\n\ninterface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\ninterface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAoBf,SAMI,KANJ;AAHC,IAAM,UAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cApBrD,IAoBG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,oBAAC,SAAI,WAAW,KAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAUf,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAhDd,IAgDG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAtEd,IAsEG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;","names":[]}

package/dist/{chunk-ZDPU3N54.mjs → chunk-UB2R7TCG.mjs}

@@ -36,4 +36,4 @@ ShowMoreButton.displayName = "ShowMoreButton";
 export {
   ShowMoreButton
 };
-//# sourceMappingURL=chunk-ZDPU3N54.mjs.map
+//# sourceMappingURL=chunk-UB2R7TCG.mjs.map

package/dist/chunk-UB2R7TCG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * @example\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA+CrB,SAYE,KAZF;AAHC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA9C9B,IA8CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,oBAAC,UAAK,WAAW,KAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/{chunk-RHCMBJOT.mjs → chunk-UMYOYHUI.mjs}

@@ -1,9 +1,9 @@
 import {
   useFieldsetContext
-} from "./chunk-DM4PJFLG.mjs";
+} from "./chunk-6N4TGRZB.mjs";
 import {
   ErrorMessage
-} from "./chunk-IL7576PP.mjs";
+} from "./chunk-DFU2THGC.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -73,4 +73,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-RHCMBJOT.mjs.map
+//# sourceMappingURL=chunk-UMYOYHUI.mjs.map

package/dist/{chunk-I6GDRDYD.mjs → chunk-USXU6ULZ.mjs}

@@ -6,11 +6,13 @@ import {
 
 // src/layout/container/container.tsx
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var Container = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", className, children, variant } = _b, rest = __objRest(_b, ["as", "className", "children", "variant"]);
+    var _b = _a, { as: Tag = "div", asChild, className, children, variant } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children", "variant"]);
+    const Component = asChild ? Slot : Tag;
     return /* @__PURE__ */ jsx(
       Component,
       __spreadProps(__spreadValues({}, rest), {
@@ -30,4 +32,4 @@ Container.displayName = "Container";
 export {
   Container
 };
-//# sourceMappingURL=chunk-I6GDRDYD.mjs.map
+//# sourceMappingURL=chunk-USXU6ULZ.mjs.map

package/dist/chunk-USXU6ULZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/container/container.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"slim\";\n  children: ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n\n  /**\n   * Convienence prop to change the rendered element.\n   *\n   * Use {@link ContainerProps.asChild} if you need more control of the rendered element.\n   */\n  as?: \"div\" | \"section\" | \"aside\" | \"main\" | \"article\" | \"header\" | \"footer\";\n}\n\n/**\n * Container is a layout component that is used to wrap content.\n * It ensures a max-width and minimum spacing on the sides.\n */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  ({ as: Tag = \"div\", asChild, className, children, variant, ...rest }, ref) => {\n    const Component = asChild ? Slot : Tag;\n    return (\n      <Component\n        {...rest}\n        className={clsx(\n          \"hds-container\",\n          { \"hds-container--slim\": variant === \"slim\" },\n          className as undefined,\n        )}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nContainer.displayName = \"Container\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AAErB,SAAS,kBAAkB;AA6BrB;AAJC,IAAM,YAAY;AAAA,EACvB,CAAC,IAAqE,QAAQ;AAA7E,iBAAE,MAAI,MAAM,OAAO,SAAS,WAAW,UAAU,QA7BpD,IA6BG,IAA6D,iBAA7D,IAA6D,CAA3D,MAAiB,WAAS,aAAW,YAAU;AAChD,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,EAAE,uBAAuB,YAAY,OAAO;AAAA,UAC5C;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}

package/dist/{chunk-MGUYIOP2.mjs → chunk-W2MRIP5P.mjs}

@@ -23,4 +23,4 @@ export {
   CloseIcon,
   MenuIcon
 };
-//# sourceMappingURL=chunk-MGUYIOP2.mjs.map
+//# sourceMappingURL=chunk-W2MRIP5P.mjs.map

package/dist/chunk-W2MRIP5P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/icons.tsx"],"sourcesContent":["export function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport function MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n"],"mappings":";AAGM;AAHC,SAAS,YAAY;AAC1B,SACE,oBAAC,SAAI,eAAW,MAAC,SAAQ,eAAc,OAAM,8BAC3C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,SAAS,WAAW;AACzB,SACE,oBAAC,SAAI,MAAK,OAAM,SAAQ,eAAc,OAAM,8BAC1C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}