@postenbring/hedwig-react 0.0.71 → 0.0.73

package/dist/utilities/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/utilities/index.ts
@@ -54,67 +64,109 @@ __export(utilities_exports, {
 module.exports = __toCommonJS(utilities_exports);
 
 // src/utilities/auto-animate-height.tsx
+var import_react2 = require("react");
+
+// src/utils.ts
+var React = __toESM(require("react"));
 var import_react = require("react");
-var import_react_dom = require("react-dom");
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
+    }
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
+
+// src/utilities/auto-animate-height.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var animationDurationToValue = {
-  quick: 100,
-  normal: 300,
-  slow: 700
-};
-var AutoAnimateHeight = (0, import_react.forwardRef)(
+var AutoAnimateHeight = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
       children,
       style,
       animationDuration = "quick",
-      animationEasing = "normal"
+      animationEasing = "normal",
+      onTransitionEnd
     } = _b, rest = __objRest(_b, [
       "as",
       "children",
       "style",
       "animationDuration",
-      "animationEasing"
+      "animationEasing",
+      "onTransitionEnd"
     ]);
-    const timeoutRef = (0, import_react.useRef)(null);
-    const measurementRef = (0, import_react.useRef)(null);
-    const [height, setHeight] = (0, import_react.useState)(void 0);
-    const [clonedChildren, setClonedChildren] = (0, import_react.useState)(
-      () => (0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {})
+    var _a2, _b2;
+    const rootRef = (0, import_react2.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react2.useRef)(null);
+    const [height, setHeight] = (0, import_react2.useState)(
+      void 0
     );
-    (0, import_react.useEffect)(() => {
-      if (measurementRef.current) {
-        const { height: newHeight } = measurementRef.current.getBoundingClientRect();
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (newHeight < (height != null ? height : 0)) {
-          setTimeout(() => {
-            (0, import_react_dom.flushSync)(() => {
-              setHeight(newHeight);
-            });
-            timeoutRef.current = setTimeout(() => {
-              setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
-            }, animationDurationToValue[animationDuration]);
-          });
-        } else {
-          setHeight(newHeight);
-          setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
-        }
+    const [clonedChildren, setClonedChildren] = (0, import_react2.useState)(
+      () => (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {})
+    );
+    (0, import_react2.useEffect)(() => {
+      var _a3;
+      if (!rootRef.current)
+        return;
+      if (!measurementRef.current)
+        return;
+      if (document.body.scrollHeight === 0)
+        return;
+      const currentMeasurement = measurementRef.current;
+      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
+      let previouslyObservedHeight = newHeight;
+      const resizeObserver = new ResizeObserver(() => {
+        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
+        if (resizedHeight === previouslyObservedHeight)
+          return;
+        previouslyObservedHeight = resizedHeight;
+        setHeight({ height: resizedHeight, shouldAnimate: false });
+      });
+      resizeObserver.observe(currentMeasurement);
+      setHeight({ height: newHeight, shouldAnimate: true });
+      const nextClonedChildren = (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {});
+      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
+        setClonedChildren(nextClonedChildren);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      const currentRoot = rootRef.current;
+      function onTransitionEndHandler(e) {
+        if (e.propertyName !== "height")
+          return;
+        setClonedChildren(nextClonedChildren);
       }
+      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
+      return () => {
+        resizeObserver.disconnect();
+        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
+      };
     }, [children]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
+        onTransitionEnd,
         style: __spreadValues({
           position: "relative",
           overflow: "hidden",
-          height,
-          transitionProperty: "height",
+          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
+          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
           transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
-          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height"
         }, style)
       }, rest), {
         children: [

package/dist/utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utilities/index.ts","../../src/utilities/auto-animate-height.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\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   * 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: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\n        children,\n        style,\n        animationDuration = \"quick\",\n        animationEasing = \"normal\",\n        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            position: \"relative\",\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\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        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAXL;AAAA,QAaC;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;AACF,kBAAkB,cAAc;","names":[]}
+{"version":3,"sources":["../../src/utilities/index.ts","../../src/utilities/auto-animate-height.tsx","../../src/utils.ts"],"sourcesContent":["export { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs, type OverridableComponent } from \"../utils\";\n\nexport interface AutoAnimateHeightProps {\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: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\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        <Component\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        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\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"],"mappings":"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","names":["import_react","_a","_b"]}

package/dist/utilities/index.mjs

@@ -1,7 +1,8 @@
 import "../chunk-DZNH5JHY.mjs";
 import {
   AutoAnimateHeight
-} from "../chunk-AKYK3XFN.mjs";
+} from "../chunk-HSIL53A5.mjs";
+import "../chunk-ZL56N4UK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   AutoAnimateHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,14 +13,14 @@
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "7.43.1",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^8.0.1",
     "typescript": "^5.4.5",
-    "hedwig-tsconfig": "0.0.0",
-    "eslint-config-custom": "0.0.1"
+    "eslint-config-custom": "0.0.1",
+    "hedwig-tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
@@ -29,9 +29,10 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-slot": "1.0.2",
     "focus-trap-react": "10.2.3",
-    "@postenbring/hedwig-css": "0.0.62"
+    "@postenbring/hedwig-css": "0.0.64"
   },
   "publishConfig": {
     "access": "public"

package/dist/breadcrumb/breadcrumb.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * **Usage**\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport function Breadcrumbs({ olProps, children, ...rest }: BreadcrumbsProps) {\n  return (\n    <nav {...rest}>\n      <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n        {children}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAAqB;AAqCf;AAHC,SAAS,YAAY,IAAkD;AAAlD,eAAE,WAAS,SAnCvC,IAmC4B,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACrC,SACE,4CAAC,wCAAQ,OAAR,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/breadcrumb/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/breadcrumb/index.tsx","../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["export { Breadcrumbs } from \"./breadcrumb\";\n\nexport type * from \"./breadcrumb\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * **Usage**\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport function Breadcrumbs({ olProps, children, ...rest }: BreadcrumbsProps) {\n  return (\n    <nav {...rest}>\n      <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n        {children}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,6BAAqB;AAqCf;AAHC,SAAS,YAAY,IAAkD;AAAlD,eAAE,WAAS,SAnCvC,IAmC4B,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACrC,SACE,4CAAC,wCAAQ,OAAR,EACC,sDAAC,uCAAO,UAAP,EAAgB,eAAW,6BAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/breadcrumb/index.mjs

@@ -1,9 +0,0 @@
-import "../chunk-ZOCMUEOX.mjs";
-import {
-  Breadcrumbs
-} from "../chunk-YKDKFWP2.mjs";
-import "../chunk-R4SQKVDQ.mjs";
-export {
-  Breadcrumbs
-};
-//# sourceMappingURL=index.mjs.map

package/dist/chunk-AKYK3XFN.mjs

@@ -1,95 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-R4SQKVDQ.mjs";
-
-// src/utilities/auto-animate-height.tsx
-import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var animationDurationToValue = {
-  quick: 100,
-  normal: 300,
-  slow: 700
-};
-var AutoAnimateHeight = forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      as: Component = "div",
-      children,
-      style,
-      animationDuration = "quick",
-      animationEasing = "normal"
-    } = _b, rest = __objRest(_b, [
-      "as",
-      "children",
-      "style",
-      "animationDuration",
-      "animationEasing"
-    ]);
-    const timeoutRef = useRef(null);
-    const measurementRef = useRef(null);
-    const [height, setHeight] = useState(void 0);
-    const [clonedChildren, setClonedChildren] = useState(
-      () => cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {})
-    );
-    useEffect(() => {
-      if (measurementRef.current) {
-        const { height: newHeight } = measurementRef.current.getBoundingClientRect();
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (newHeight < (height != null ? height : 0)) {
-          setTimeout(() => {
-            flushSync(() => {
-              setHeight(newHeight);
-            });
-            timeoutRef.current = setTimeout(() => {
-              setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
-            }, animationDurationToValue[animationDuration]);
-          });
-        } else {
-          setHeight(newHeight);
-          setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
-        }
-      }
-    }, [children]);
-    return /* @__PURE__ */ jsxs(
-      Component,
-      __spreadProps(__spreadValues({
-        ref,
-        style: __spreadValues({
-          position: "relative",
-          overflow: "hidden",
-          height,
-          transitionProperty: "height",
-          transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
-          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`
-        }, style)
-      }, rest), {
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-hidden": true,
-              ref: measurementRef,
-              style: {
-                position: "absolute",
-                visibility: "hidden"
-              },
-              children
-            }
-          ),
-          clonedChildren
-        ]
-      })
-    );
-  }
-);
-AutoAnimateHeight.displayName = "AutoAnimateHeight";
-
-export {
-  AutoAnimateHeight
-};
-//# sourceMappingURL=chunk-AKYK3XFN.mjs.map

package/dist/chunk-AKYK3XFN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\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   * 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: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\n        children,\n        style,\n        animationDuration = \"quick\",\n        animationEasing = \"normal\",\n        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            position: \"relative\",\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\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        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AACtE,SAAS,iBAAiB;AAoDL,wBA6Bb,YA7Ba;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,oBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,OAA8B,IAAI;AACrD,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,cAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,sBAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,gCAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,4BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAXL;AAAA,QAaC;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;AACF,kBAAkB,cAAc;","names":[]}

package/dist/chunk-OUHO4LGN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface ButtonPropsInternal extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Use an icon inside the button\n   */\n  icon?: React.ReactNode;\n\n  children?: React.ReactNode;\n}\n\nexport type ButtonProps = ButtonPropsInternal &\n  (\n    | {\n        /**\n         * The background fill of the button\n         */\n        fill?: \"contained\" | \"outline\";\n      }\n    | {\n        /**\n         * @deprecated use `fill='outline'` instead\n         */\n        fill?: \"outlined\";\n      }\n  );\n\nexport const BaseButton: OverridableComponent<\n  ButtonProps & { variant: \"primary\" | \"secondary\" },\n  HTMLButtonElement\n> = forwardRef(\n  (\n    {\n      as: Component = \"button\",\n      children,\n      variant,\n      size = \"medium\",\n      fullWidth = false,\n      fill = \"contained\",\n      icon,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    // TODO: Remove deprecated fill value name at some point\n    // Deprecated at 10. march 2024\n    if (fill === \"outlined\") {\n      // eslint-disable-next-line no-console -- Deprecation warning\n      console.warn(\"The `fill` value `outlined` is deprecated, use `fill='outline'` instead\");\n    }\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          {\n            [`hds-button--${variant}`]: fill === \"contained\",\n            [`hds-button--outline-${variant}`]: fill === \"outline\" || fill === \"outlined\",\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--icon-only\": icon && !children,\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {icon && !children ? icon : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBaseButton.displayName = \"BaseButton\";\n\n/**\n * ## TODO\n *\n * - [x] Handle links that looks like buttons\n * - [ ] Revisit how to handle outline\n * - [ ] Figure out outline-white\n */\n\nexport const PrimaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"primary\" />;\n  },\n);\n\nPrimaryButton.displayName = \"PrimaryButton\";\n\nexport const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(\n  (props, ref) => {\n    return <BaseButton {...props} ref={ref} variant=\"secondary\" />;\n  },\n);\n\nSecondaryButton.displayName = \"SecondaryButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAgEf,SAkCK,KAlCL;AAzBC,IAAM,aAGT;AAAA,EACF,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IArDN,IA6CI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAOF,QAAI,SAAS,YAAY;AAEvB,cAAQ,KAAK,yEAAyE;AAAA,IACxF;AACA,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,SAAS;AAAA,YACnE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,QAAQ,CAAC;AAAA,UACpC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAdL;AAAA,QAgBE;AAAA,kBAAQ,CAAC,WAAW,OAAO;AAAA,UAC3B;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAUlB,IAAM,gBAAsE;AAAA,EACjF,CAAC,OAAO,QAAQ;AACd,WAAO,oBAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,YAAU;AAAA,EAC5D;AACF;AAEA,cAAc,cAAc;AAErB,IAAM,kBAAwE;AAAA,EACnF,CAAC,OAAO,QAAQ;AACd,WAAO,oBAAC,6CAAe,QAAf,EAAsB,KAAU,SAAQ,cAAY;AAAA,EAC9D;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-XMB45ILT.mjs

@@ -1,35 +0,0 @@
-import {
-  __objRest,
-  __spreadValues
-} from "./chunk-R4SQKVDQ.mjs";
-
-// src/description-list/description-list.tsx
-import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { jsx } from "react/jsx-runtime";
-function DescriptionList(_a) {
-  var _b = _a, {
-    variant = "vertical",
-    className
-  } = _b, rest = __objRest(_b, [
-    "variant",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(
-    "dl",
-    __spreadValues({
-      className: clsx(
-        "hds-description-list",
-        {
-          "hds-description-list--horizontal": variant === "horizontal"
-        },
-        className
-      )
-    }, rest)
-  );
-}
-DescriptionList.displayName = "DescriptionList";
-
-export {
-  DescriptionList
-};
-//# sourceMappingURL=chunk-XMB45ILT.mjs.map

package/dist/chunk-XMB45ILT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  /**\n   * Either `DescriptionDetails` or `DescriptionTerm` 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 function DescriptionList({\n  variant = \"vertical\",\n  className,\n  ...rest\n}: DescriptionListProps) {\n  return (\n    <dl\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}\nDescriptionList.displayName = \"DescriptionList\";\n"],"mappings":";;;;;;AACA,SAAS,YAAY;AAgDjB;AANG,SAAS,gBAAgB,IAIP;AAJO,eAC9B;AAAA,cAAU;AAAA,IACV;AAAA,EA7CF,IA2CgC,IAG3B,iBAH2B,IAG3B;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,oCAAoC,YAAY;AAAA,QAClD;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AACA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-YKDKFWP2.mjs

@@ -1,19 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-R4SQKVDQ.mjs";
-
-// src/breadcrumb/breadcrumb.tsx
-import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { jsx } from "react/jsx-runtime";
-function Breadcrumbs(_a) {
-  var _b = _a, { olProps, children } = _b, rest = __objRest(_b, ["olProps", "children"]);
-  return /* @__PURE__ */ jsx("nav", __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsx("ol", __spreadProps(__spreadValues({}, olProps), { className: clsx("hds-breadcrumbs", olProps == null ? void 0 : olProps.className), children })) }));
-}
-Breadcrumbs.displayName = "Breadcrumbs";
-
-export {
-  Breadcrumbs
-};
-//# sourceMappingURL=chunk-YKDKFWP2.mjs.map

package/dist/chunk-YKDKFWP2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {\n  children: ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];\n\n  /**\n   * Props passed to the `ol` html element\n   */\n  olProps?: HTMLAttributes<HTMLElement>;\n}\n\n/**\n * A breadcrumbs navigation menu\n *\n * **Usage**\n *\n * ```tsx\n * <Breadcrumbs data-testid=\"breadcrumbs\">\n *   <li><Link href=\"../\">Previous page</Link></li>\n *   <li aria-current=\"page\">Current page</li>\n * </Breadcrumbs>\n * ```\n *\n * Outputs this html structure\n *\n * ```html\n * <nav data-testid=\"breadcrumbs\">\n *   <ol>\n *     <li><a href=\"../\">Previous page</a></li>\n *     <li aria-current=\"page\">Current page</li>\n *   </ol>\n * </nav>\n * ```\n */\nexport function Breadcrumbs({ olProps, children, ...rest }: BreadcrumbsProps) {\n  return (\n    <nav {...rest}>\n      <ol {...olProps} className={clsx(\"hds-breadcrumbs\", olProps?.className as undefined)}>\n        {children}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"mappings":";;;;;;;AACA,SAAS,YAAY;AAqCf;AAHC,SAAS,YAAY,IAAkD;AAAlD,eAAE,WAAS,SAnCvC,IAmC4B,IAAwB,iBAAxB,IAAwB,CAAtB,WAAS;AACrC,SACE,oBAAC,wCAAQ,OAAR,EACC,8BAAC,uCAAO,UAAP,EAAgB,WAAW,KAAK,mBAAmB,mCAAS,SAAsB,GAChF,WACH,IACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-YWNVB7TY.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-YWNVB7TY.mjs.map

package/dist/chunk-ZOCMUEOX.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-ZOCMUEOX.mjs.map

package/dist/{breadcrumb/breadcrumb.d.mts → breadcrumbs/breadcrumbs.d.mts}

@@ -1,2 +1,2 @@
-export { Breadcrumbs_alias_2 as Breadcrumbs } from '../_tsup-dts-rollup';
 export { BreadcrumbsProps_alias_2 as BreadcrumbsProps } from '../_tsup-dts-rollup';
+export { Breadcrumbs_alias_2 as Breadcrumbs } from '../_tsup-dts-rollup';

package/dist/{breadcrumb/breadcrumb.d.ts → breadcrumbs/breadcrumbs.d.ts}

@@ -1,2 +1,2 @@
-export { Breadcrumbs_alias_2 as Breadcrumbs } from '../_tsup-dts-rollup';
 export { BreadcrumbsProps_alias_2 as BreadcrumbsProps } from '../_tsup-dts-rollup';
+export { Breadcrumbs_alias_2 as Breadcrumbs } from '../_tsup-dts-rollup';