@postenbring/hedwig-react 0.0.76 → 0.0.77

package/dist/chunk-CSXSUQ2M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-4GSNPCNT.mjs → chunk-CYEYGPRH.mjs}

@@ -3,7 +3,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader
-} from "./chunk-MKC7HZCM.mjs";
+} from "./chunk-XUWZ4HGD.mjs";
 
 // src/modal/index.tsx
 var ModalComponent = Modal;
@@ -14,4 +14,4 @@ ModalComponent.Footer = ModalFooter;
 export {
   ModalComponent
 };
-//# sourceMappingURL=chunk-4GSNPCNT.mjs.map
+//# sourceMappingURL=chunk-CYEYGPRH.mjs.map

package/dist/{chunk-E2AG5TUR.mjs → chunk-DCCQXWD6.mjs}

@@ -1,14 +1,14 @@
 import {
   TabsList,
   TabsTab
-} from "./chunk-SRLRTLHS.mjs";
+} from "./chunk-7JDEN3T6.mjs";
 import {
   Tabs
-} from "./chunk-XVFQWVHO.mjs";
+} from "./chunk-3MQKXNZ6.mjs";
 import {
   TabsContent,
   TabsContents
-} from "./chunk-UWTGHSWT.mjs";
+} from "./chunk-CCVZAHYA.mjs";
 
 // src/tabs/index.tsx
 var TabsComponent = Tabs;
@@ -20,4 +20,4 @@ TabsComponent.Content = TabsContent;
 export {
   TabsComponent
 };
-//# sourceMappingURL=chunk-E2AG5TUR.mjs.map
+//# sourceMappingURL=chunk-DCCQXWD6.mjs.map

package/dist/{chunk-JXA3B33M.mjs → chunk-DEX36MFK.mjs}

@@ -89,4 +89,4 @@ export {
   focusTrap,
   releaseFocusTrap
 };
-//# sourceMappingURL=chunk-JXA3B33M.mjs.map
+//# sourceMappingURL=chunk-DEX36MFK.mjs.map

package/dist/chunk-DEX36MFK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nexport function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,aAAa,WAAW,gBAAgB;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,eAAe,YAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,YAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS;AAAM,WAAO,MAAM;AAAA,IAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS;AAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY;AAAI;AACpB,UAAI,EAAE,mBAAmB;AAAc;AACvC,UAAI,QAAQ,aAAa,OAAO;AAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKO,SAAS,iBAAiB,eAAsC;AACrE,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;","names":[]}

package/dist/chunk-DFU2THGC.mjs

@@ -0,0 +1,31 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/form/error-message/error-message.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var ErrorMessage = forwardRef(
+  (_a) => {
+    var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        "aria-live": "assertive",
+        className: clsx("hds-error-message", className),
+        id
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+ErrorMessage.displayName = "ErrorMessage";
+
+export {
+  ErrorMessage
+};
+//# sourceMappingURL=chunk-DFU2THGC.mjs.map

package/dist/chunk-DFU2THGC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/form/error-message/error-message.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAWrC;AAHC,IAAM,eAAe;AAAA,EAC1B,CAAC,OAAyC;AAAzC,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,KAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/{chunk-EGXM575K.mjs → chunk-ENKVTAJB.mjs}

@@ -7,11 +7,12 @@ import {
 // src/box/box.tsx
 import { forwardRef, useCallback, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Box = forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      as: Component = "div",
+      asChild,
       variant,
       closeable = false,
       onClose: onCloseProp,
@@ -20,7 +21,7 @@ var Box = forwardRef(
       children,
       className
     } = _b, rest = __objRest(_b, [
-      "as",
+      "asChild",
       "variant",
       "closeable",
       "onClose",
@@ -41,6 +42,7 @@ var Box = forwardRef(
       }
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
+    const Component = asChild ? Slot : "div";
     return /* @__PURE__ */ jsxs(
       Component,
       __spreadProps(__spreadValues({
@@ -54,7 +56,7 @@ var Box = forwardRef(
       }, rest), {
         children: [
           closeable ? /* @__PURE__ */ jsx(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
-          children
+          /* @__PURE__ */ jsx(Slottable, { children })
         ]
       })
     );
@@ -80,4 +82,4 @@ export {
   Box,
   BoxCloseButton
 };
-//# sourceMappingURL=chunk-EGXM575K.mjs.map
+//# sourceMappingURL=chunk-ENKVTAJB.mjs.map

package/dist/chunk-ENKVTAJB.mjs.map

@@ -0,0 +1 @@
+{"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,SAAS,YAAY,aAAa,gBAAgB;AAClD,SAAS,YAAY;AACrB,SAAS,MAAM,iBAAiB;AAkF1B,SAUe,KAVf;AA/BC,IAAM,MAAM;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,IAAI,SAAS,KAAK;AACpD,UAAM,UAAU,YAAY,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,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;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,oBAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,oBAAC,aAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxGL,IAwGG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}

package/dist/{chunk-25R7DBK6.mjs → chunk-ES6ISHOV.mjs}

@@ -56,4 +56,4 @@ export {
   Grid,
   GridItem
 };
-//# sourceMappingURL=chunk-25R7DBK6.mjs.map
+//# sourceMappingURL=chunk-ES6ISHOV.mjs.map

package/dist/chunk-ES6ISHOV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/grid/grid.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<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\n/**\n * A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * @example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGrid.displayName = \"Grid\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAuFrB;AAfC,IAAM,OAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,KA5E5E,IA4EI,IAAiF,iBAAjF,IAAiF,CAA/E,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe,OAAK,QAAM;AAGxE,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA6B,8FAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,WAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAzIxD,IAyIG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,QAA6B,iDAC9B,SACA,mBAAmB,wBAAwB,IAAI,IAC/C,mBAAmB,0BAA0B,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/{chunk-PYR6QEIS.mjs → chunk-FCPQXZQV.mjs}

@@ -1,10 +1,10 @@
 import {
   CloseIcon,
   MenuIcon
-} from "./chunk-MGUYIOP2.mjs";
+} from "./chunk-W2MRIP5P.mjs";
 import {
   focusTrap
-} from "./chunk-JXA3B33M.mjs";
+} from "./chunk-DEX36MFK.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -68,7 +68,7 @@ function RenderButton(_a) {
   return /* @__PURE__ */ jsxs(
     "button",
     __spreadProps(__spreadValues({
-      className: clsx("hds-navbar__button", className),
+      className: clsx("hds-navbar__item", className),
       onClick: toggleOpen,
       ref: ref != null ? ref : innerRef,
       style,
@@ -76,7 +76,7 @@ function RenderButton(_a) {
       type: "button"
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: clsx("hds-navbar__button-responsive-text"), children: text }),
+        /* @__PURE__ */ jsx("span", { className: clsx("hds-navbar__item-responsive-text"), children: text }),
         " ",
         icon
       ]
@@ -162,22 +162,22 @@ var NavbarExpandableMenuTrigger = forwardRef(
     );
   }
 );
-NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenu.Trigger";
+NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
 var NavbarExpandableMenuContent = forwardRef((_a, ref) => {
-  var _b = _a, { as: Component = "section", children, className } = _b, rest = __objRest(_b, ["as", "children", "className"]);
+  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   const [open] = useNavbarExpendableMenuContext();
   return /* @__PURE__ */ jsx(
-    Component,
-    __spreadProps(__spreadValues({}, rest), {
+    "section",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       className: clsx("hds-navbar__expandable-menu-content", className),
-      "data-state": open ? "open" : "closed",
-      inert: open ? void 0 : "true",
+      "data-state": open ? "open" : "closed"
+    }), { inert: open ? "true" : void 0 }), {
       ref,
       children: /* @__PURE__ */ jsx("div", { className: clsx("hds-navbar__expandable-menu-content-inner"), children })
     })
   );
 });
-NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenu.Content";
+NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
 
 export {
   useNavbarExpendableMenuContext,
@@ -185,4 +185,4 @@ export {
   NavbarExpandableMenuTrigger,
   NavbarExpandableMenuContent
 };
-//# sourceMappingURL=chunk-PYR6QEIS.mjs.map
+//# sourceMappingURL=chunk-FCPQXZQV.mjs.map

package/dist/chunk-FCPQXZQV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  function toggleOpen() {\n    setOpen((prev) => !prev);\n  }\n\n  useEffect(() => {\n    if (open) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n      const releaseFocusTrap = focusTrap(\n        document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n      );\n\n      return () => {\n        document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n        releaseFocusTrap();\n      };\n    }\n  }, [open]);\n\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__item\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__item-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n  HTMLDivElement,\n  NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <section\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      {...{ inert: open ? \"true\" : undefined }}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </section>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n"],"mappings":"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","names":["_a","_b"]}

package/dist/{chunk-57SSGJ4X.mjs → chunk-GGQB2WWD.mjs}

@@ -7,6 +7,7 @@ import {
 // src/text/text.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var defaultHTMLTag = {
   "h1-display": "h1",
@@ -26,7 +27,8 @@ var defaultHTMLTag = {
 var Text = forwardRef(
   (_a, ref) => {
     var _b = _a, {
-      as,
+      as: Tag,
+      asChild,
       variant = "body",
       size = "fluid",
       _unstableSpacing: spacing,
@@ -34,13 +36,14 @@ var Text = forwardRef(
       className
     } = _b, rest = __objRest(_b, [
       "as",
+      "asChild",
       "variant",
       "size",
       "_unstableSpacing",
       "children",
       "className"
     ]);
-    const Component = as != null ? as : defaultHTMLTag[variant];
+    const Component = asChild ? Slot : Tag != null ? Tag : defaultHTMLTag[variant];
     const sizeModifier = size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
     return /* @__PURE__ */ jsx(
       Component,
@@ -63,4 +66,4 @@ Text.displayName = "Text";
 export {
   Text
 };
-//# sourceMappingURL=chunk-57SSGJ4X.mjs.map
+//# sourceMappingURL=chunk-GGQB2WWD.mjs.map

package/dist/chunk-GGQB2WWD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/text.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 React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype HeadingProps =\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      asChild: true;\n      as?: never;\n    }\n  | {\n      variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n      as: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n      asChild?: never;\n    };\n\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   *\n   * @default \"fluid\"\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\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 TextProps.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  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n} & (HeadingProps | ParagraphProps) &\n  React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.\n *\n * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLParagraphElement | HTMLHeadingElement, TextProps>(\n  (\n    {\n      as: Tag,\n      asChild,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : Tag ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref as any}\n        {...(rest as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;AAGA,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AA4Gf;AAjDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,OAAO;AAAA,EAClB,CACE,IAUA,QACG;AAXH,iBACE;AAAA,UAAI;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IAxGN,IAiGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO,oBAAO,eAAe,OAAO;AAChE,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACK,OARN;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/chunk-GSJPTZT3.mjs

@@ -0,0 +1,121 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/navbar/navbar.tsx
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var Navbar = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
+    const Component = asChild ? Slot : "header";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        className: clsx("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+var NavbarLogo = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ className: clsx(`hds-navbar__logo`, className), ref }, rest), { children }));
+  }
+);
+NavbarLogo.displayName = "Navbar.Logo";
+var NavbarLogoAndServiceText = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
+var NavbarItemIcon = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx(Slot, __spreadProps(__spreadValues({ className: clsx("hds-navbar__item-icon", className), ref }, rest), { children }));
+  }
+);
+NavbarItemIcon.displayName = "Navbar.ItemIcon";
+var NavbarItem = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ className: clsx("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarItem.displayName = "Navbar.Item";
+var NavbarButtonItem = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        className: clsx("hds-navbar__item", className),
+        ref,
+        type: "button"
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarButtonItem.displayName = "Navbar.ButtonItem";
+var NavbarLinkItem = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
+    const Component = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ className: clsx("hds-navbar__item", className), ref }, rest), { children }));
+  }
+);
+NavbarLinkItem.displayName = "Navbar.LinkItem";
+var NavbarNavigation = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadValues({
+        className: clsx("hds-navbar__navigation", className),
+        ref
+      }, rest)
+    );
+  }
+);
+NavbarNavigation.displayName = "Navbar.Navigation";
+
+export {
+  Navbar,
+  NavbarLogo,
+  NavbarLogoAndServiceText,
+  NavbarItemIcon,
+  NavbarItem,
+  NavbarButtonItem,
+  NavbarLinkItem,
+  NavbarNavigation
+};
+//# sourceMappingURL=chunk-GSJPTZT3.mjs.map

package/dist/chunk-GSJPTZT3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Navbar variant\n   *\n   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n   *\n   * For internal services or flagship services use the `service` should be used\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"service\";\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/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ asChild, children, className, variant, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"header\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\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/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The text display next to the logo\n   */\n  children: React.ReactNode;\n\n  /**\n   * The text variant\n   *\n   * Use `service` for internal applications\n   *\n   * Use `flagship` for public facing applications\n   */\n  variant: \"service\" | \"flagship\";\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/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n  ({ children, asChild, variant, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          \"hds-navbar__logo-and-service-text\",\n          `hds-navbar__logo-and-service-text--${variant}`,\n          className as undefined,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Slot>\n    );\n  },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\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/**\n * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\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}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"button\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__item\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\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 NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\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}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n"],"mappings":"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","names":[]}

package/dist/{chunk-S3BGPCLK.mjs → chunk-HFXVRPBA.mjs}

@@ -1,12 +1,12 @@
 import {
   LinkList
-} from "./chunk-GJDRW6PA.mjs";
+} from "./chunk-COEZA7WA.mjs";
 import {
   PrimaryButton
-} from "./chunk-BWFFP6BB.mjs";
+} from "./chunk-KEKPEN2C.mjs";
 import {
   AccordionComponent
-} from "./chunk-XYIY6FHW.mjs";
+} from "./chunk-ZMLHJZQK.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -38,27 +38,6 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Footer";
-var FooterButtonLink = forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
-    const Component = asChild ? Slot : "a";
-    return (
-      // @ts-expect-error -- It's ok, types are a bit off
-      /* @__PURE__ */ jsx(
-        PrimaryButton,
-        __spreadProps(__spreadValues({
-          as: Component,
-          fill: "outline",
-          className: clsx(className),
-          ref
-        }, rest), {
-          children
-        })
-      )
-    );
-  }
-);
-FooterButtonLink.displayName = "FooterButton";
 var FooterLogo = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
@@ -67,6 +46,14 @@ var FooterLogo = forwardRef(
   }
 );
 FooterLogo.displayName = "Footer.Logo";
+var FooterButtonLink = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
+    const Component = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(PrimaryButton, { asChild: true, fill: "outline", className: clsx(className), children: /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+  }
+);
+FooterButtonLink.displayName = "FooterButton";
 var FooterLinkSections = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
@@ -110,9 +97,9 @@ FooterLinkSection.displayName = "Footer.LinkSection";
 
 export {
   Footer,
-  FooterButtonLink,
   FooterLogo,
+  FooterButtonLink,
   FooterLinkSections,
   FooterLinkSection
 };
-//# sourceMappingURL=chunk-S3BGPCLK.mjs.map
+//# sourceMappingURL=chunk-HFXVRPBA.mjs.map

package/dist/chunk-HFXVRPBA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/footer/footer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Accordion } from \"../accordion\";\nimport { LinkList } from \"../list/link-list\";\nimport { PrimaryButton } from \"../button\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer variant\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"slim\";\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/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Footer = forwardRef<HTMLDivElement, FooterProps>(\n  ({ children, className, variant, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\n    return (\n      <Component\n        className={clsx(\n          `hds-footer`,\n          variant === \"slim\" && \"hds-footer--slim\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nFooter.displayName = \"Footer\";\n\ninterface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {\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/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nFooterLogo.displayName = \"Footer.Logo\";\n\nexport interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\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/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <PrimaryButton asChild fill=\"outline\" className={clsx(className as undefined)}>\n        <Component ref={ref} {...rest}>\n          {children}\n        </Component>\n      </PrimaryButton>\n    );\n  },\n);\nFooterButtonLink.displayName = \"FooterButton\";\n\ninterface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];\n}\n\n/**\n * Responsive sections of links. Will become an accordion on mobile.\n *\n * Use with {@link FooterLinkSection} for each section.\n */\nexport const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <>\n        {/* Mobile and Desktop. The accordion styling gets removed on desktop */}\n        <Accordion\n          className={clsx(\"hds-footer__link-sections\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {/* @ts-expect-error -- It's ok */}\n          {children}\n        </Accordion>\n      </>\n    );\n  },\n);\nFooterLinkSections.displayName = \"Footer.LinkSections\";\n\ninterface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {\n  heading: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(\n  ({ heading, children, className, ...rest }, ref) => {\n    // @ts-expect-error -- It's ok\n    const linkListChildren = <LinkList>{children}</LinkList>;\n    return (\n      <>\n        {/* Mobile */}\n        <Accordion.Item\n          className={clsx(`hds-footer__link-section`, className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          <Accordion.Header>{heading}</Accordion.Header>\n          <Accordion.Content>{linkListChildren}</Accordion.Content>\n        </Accordion.Item>\n\n        {/* Desktop */}\n        <div className={clsx(`hds-footer__link-section`, className as undefined)}>\n          <h2>{heading}</h2>\n          {linkListChildren}\n        </div>\n      </>\n    );\n  },\n);\nFooterLinkSection.displayName = \"Footer.LinkSection\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,kBAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AA4Bf,SAgFA,UAhFA,KA4GE,YA5GF;AAJC,IAAM,SAAS;AAAA,EACpB,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,WAAW,SAAS,QA3BnC,IA2BG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,aAAW,WAAS;AAC/B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAgBd,IAAM,aAAa;AAAA,EACxB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QA7D1B,IA6DG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,OAArF,EACE,WACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAclB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QArF1B,IAqFG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,iBAAc,SAAO,MAAC,MAAK,WAAU,WAAW,KAAK,SAAsB,GAC1E,8BAAC,0CAAU,OAAc,OAAxB,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAWxB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UA5Gf,IA4GG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,gCAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE;AAAA,SACI,OAHL;AAAA,QAME;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAO1B,IAAM,oBAAoB;AAAA,EAC/B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,WAAS,UAAU,UApIxB,IAoIG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AAEpB,UAAM,mBAAmB,oBAAC,YAAU,UAAS;AAC7C,WACE,iCAEE;AAAA;AAAA,QAAC,mBAAU;AAAA,QAAV;AAAA,UACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,UAClE;AAAA,WACI,OAHL;AAAA,UAKC;AAAA,gCAAC,mBAAU,QAAV,EAAkB,mBAAQ;AAAA,YAC3B,oBAAC,mBAAU,SAAV,EAAmB,4BAAiB;AAAA;AAAA;AAAA,MACvC;AAAA,MAGA,qBAAC,SAAI,WAAW,KAAK,4BAA4B,SAAsB,GACrE;AAAA,4BAAC,QAAI,mBAAQ;AAAA,QACZ;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;","names":[]}

package/dist/{chunk-Z753E3XF.mjs → chunk-HMATZX4A.mjs}

@@ -30,4 +30,4 @@ DescriptionList.displayName = "DescriptionList";
 export {
   DescriptionList
 };
-//# sourceMappingURL=chunk-Z753E3XF.mjs.map
+//# sourceMappingURL=chunk-HMATZX4A.mjs.map

package/dist/chunk-HMATZX4A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  /**\n   * Either `dt`, `dl`, or `div` elements\n   */\n  children?: ReactNode;\n  /**\n   * Direction of the description list\n   */\n  variant?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * Uses the HTML5 `<dl>` element\n *\n * Pass in corresponding `<dt>` and `<dd>` elements as children\n *\n * ```tsx\n * <DescriptionList>\n *   <dt>Vekt</dt>\n *   <dd>12 kg</dd>\n *   <dt>Antall kolli</dt>\n *   <dd>2</dd>\n * </DescriptionList>\n * ```\n *\n * Optionally wrap them in `<div>` elements as allowed by the HTML5 spec\n *\n * ```tsx\n * <DescriptionList>\n *   <div>\n *     <dt>Vekt</dt>\n *     <dd>12 kg</dd>\n *   </div>\n *   <div>\n *     <dt>Antall kolli</dt>\n *     <dd>2</dd>\n *   </div>\n * </DescriptionList>\n * ```\n */\nexport const DescriptionList = forwardRef<HTMLDListElement, DescriptionListProps>(\n  ({ variant = \"vertical\", className, ...rest }, ref) => {\n    return (\n      <dl\n        ref={ref}\n        className={clsx(\n          \"hds-description-list\",\n          {\n            \"hds-description-list--horizontal\": variant === \"horizontal\",\n          },\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nDescriptionList.displayName = \"DescriptionList\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAuD;AAChE,SAAS,YAAY;AA6Cf;AAHC,IAAM,kBAAkB;AAAA,EAC7B,CAAC,IAA8C,QAAQ;AAAtD,iBAAE,YAAU,YAAY,UA5C3B,IA4CG,IAAsC,iBAAtC,IAAsC,CAApC,WAAsB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,oCAAoC,YAAY;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-S5RB7KLJ.mjs → chunk-I3ZIMS72.mjs}

@@ -7,10 +7,12 @@ import {
 // src/styled-html/styled-html.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var StyledHtml = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
+    var _b = _a, { asChild, children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["asChild", "children", "size", "darkmode", "className"]);
+    const Component = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
@@ -32,4 +34,4 @@ StyledHtml.displayName = "StyledHtml";
 export {
   StyledHtml
 };
-//# sourceMappingURL=chunk-S5RB7KLJ.mjs.map
+//# sourceMappingURL=chunk-I3ZIMS72.mjs.map

package/dist/chunk-I3ZIMS72.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styled-html/styled-html.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  size?: \"default\" | \"small\";\n  darkmode?: 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\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * @example\n * ```tsx\n * <StyledHtml>\n *   <h1>Heading 1</h1>\n *   <h2>Heading 2</h2>\n *   <a href=\"https://www.postenbring.no\">Postenbring</a>\n *   <ul>\n *    <li>Hei</li>\n *    <li>Hallo</li>\n *    <li>Hello</li>\n *   </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml = forwardRef<HTMLDivElement, StyledHtmlProps>(\n  ({ asChild, children, size, darkmode = false, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\n          `hds-styled-html`,\n          size === \"small\" && \"hds-styled-html--small\",\n          darkmode && \"hds-styled-html--darkmode\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAyCf;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAAmE,QAAQ;AAA3E,iBAAE,WAAS,UAAU,MAAM,WAAW,OAAO,UAxChD,IAwCG,IAA2D,iBAA3D,IAA2D,CAAzD,WAAS,YAAU,QAAM,YAAkB;AAC5C,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/{chunk-EJ7ANN7M.mjs → chunk-IKJJWKXM.mjs}

@@ -2,7 +2,7 @@ import {
   Message,
   MessageDescription,
   MessageTitle
-} from "./chunk-ME66RUR6.mjs";
+} from "./chunk-TQDUBRCZ.mjs";
 
 // src/message/index.tsx
 var MessageComponent = Message;
@@ -12,4 +12,4 @@ MessageComponent.Description = MessageDescription;
 export {
   MessageComponent
 };
-//# sourceMappingURL=chunk-EJ7ANN7M.mjs.map
+//# sourceMappingURL=chunk-IKJJWKXM.mjs.map