@postenbring/hedwig-react 0.0.61 → 0.0.63

package/dist/_tsup-dts-rollup.d.mts

@@ -1325,7 +1325,7 @@ export declare const ShowMore: Story_23;
  * }
  * ```
  */
-declare function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps): JSX_2.Element;
+declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
 export { ShowMoreButton }
 export { ShowMoreButton as ShowMoreButton_alias_1 }
 export { ShowMoreButton as ShowMoreButton_alias_2 }
@@ -1410,7 +1410,7 @@ export declare const Solid: Story_17;
  *
  * It does not handle step content or navigation, only the visual indication of the active step.
  */
-declare function StepIndicator({ activeStep, totalSteps, className, label, lang, title, titleAs: TitleComponent, ...rest }: StepIndicatorProps & TitleProps): JSX_2.Element;
+declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
 export { StepIndicator }
 export { StepIndicator as StepIndicator_alias_1 }
 export { StepIndicator as StepIndicator_alias_2 }

package/dist/_tsup-dts-rollup.d.ts

@@ -1325,7 +1325,7 @@ export declare const ShowMore: Story_23;
  * }
  * ```
  */
-declare function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps): JSX_2.Element;
+declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
 export { ShowMoreButton }
 export { ShowMoreButton as ShowMoreButton_alias_1 }
 export { ShowMoreButton as ShowMoreButton_alias_2 }
@@ -1410,7 +1410,7 @@ export declare const Solid: Story_17;
  *
  * It does not handle step content or navigation, only the visual indication of the active step.
  */
-declare function StepIndicator({ activeStep, totalSteps, className, label, lang, title, titleAs: TitleComponent, ...rest }: StepIndicatorProps & TitleProps): JSX_2.Element;
+declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
 export { StepIndicator }
 export { StepIndicator as StepIndicator_alias_1 }
 export { StepIndicator as StepIndicator_alias_2 }

package/dist/chunk-5UJ3LEKK.mjs

@@ -0,0 +1,76 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/step-indicator/step-indicator.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      activeStep,
+      totalSteps,
+      className,
+      label,
+      lang = "en",
+      title,
+      titleAs: TitleComponent
+    } = _b, rest = __objRest(_b, [
+      "activeStep",
+      "totalSteps",
+      "className",
+      "label",
+      "lang",
+      "title",
+      "titleAs"
+    ]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ jsx("span", { className: clsx("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ jsx("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: clsx("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ jsx(TitleComponent, { className: clsx("hds-step-indicator__title"), children: title }) : null
+        ]
+      })
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
+var stepLabelTranslations = {
+  no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
+  en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
+  da: (activeStep, totalSteps) => `trin ${activeStep} af ${totalSteps}`,
+  sv: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`
+};
+function getStepState(renderedStep, activeStep) {
+  if (renderedStep < activeStep) {
+    return "previous";
+  }
+  if (renderedStep === activeStep) {
+    return "active";
+  }
+  return "next";
+}
+
+export {
+  StepIndicator
+};
+//# sourceMappingURL=chunk-5UJ3LEKK.mjs.map

package/dist/chunk-5UJ3LEKK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n  | {\n      /**\n       * Optional title of the active step to be shown underneath the step indicator\n       *\n       * Use `titleAs` to set the correct heading level\n       */\n      title: React.ReactNode;\n      titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    }\n  | {\n      title?: undefined;\n      titleAs?: undefined;\n    };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /*\n   * 1-indexed number of the active step\n   */\n  activeStep: number;\n\n  /**\n   * 1-indexed number of steps\n   */\n  totalSteps: number;\n\n  /**\n   * Label on the left side above the steps\n   */\n  label: React.ReactNode;\n\n  /**\n   * Language for the \"step x of y\" label, default is \"en\"\n   */\n  lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n  (\n    {\n      activeStep,\n      totalSteps,\n      className,\n      label,\n      lang = \"en\",\n      title,\n      titleAs: TitleComponent,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\"hds-step-indicator\", className as undefined)}\n        lang={lang}\n        {...rest}\n      >\n        <div className={clsx(\"hds-step-indicator__header\")}>\n          <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n          <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n        </div>\n\n        <div className={clsx(\"hds-step-indicator__steps\")}>\n          {Array.from({ length: totalSteps }, (_, i) => (\n            <div\n              className={clsx(\"hds-step-indicator__step\")}\n              data-state={getStepState(i + 1, activeStep)}\n              key={i}\n            />\n          ))}\n        </div>\n\n        {title ? (\n          <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n        ) : null}\n      </div>\n    );\n  },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n  \"no\" | \"en\" | \"da\" | \"sv\",\n  (activeStep: number, totalSteps: number) => string\n> = {\n  no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n  en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n  da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n  sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n  if (renderedStep < activeStep) {\n    return \"previous\";\n  }\n  if (renderedStep === activeStep) {\n    return \"active\";\n  }\n  return \"next\";\n}\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAiEnB,SACE,KADF;AArBD,IAAM,gBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,+BAAC,SAAI,WAAW,KAAK,4BAA4B,GAC/C;AAAA,gCAAC,UAAK,WAAW,KAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,oBAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,oBAAC,SAAI,WAAW,KAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,oBAAC,kBAAe,WAAW,KAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}

package/dist/{chunk-2LKUHKL4.mjs → chunk-Q6REETZD.mjs}

@@ -28,6 +28,7 @@ var AutoAnimateHeight = forwardRef(
       "animationDuration",
       "animationEasing"
     ]);
+    const timeoutRef = useRef(null);
     const measurementRef = useRef(null);
     const [height, setHeight] = useState(void 0);
     const [clonedChildren, setClonedChildren] = useState(
@@ -36,13 +37,18 @@ var AutoAnimateHeight = forwardRef(
     useEffect(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         if (newHeight < (height != null ? height : 0)) {
-          flushSync(() => {
-            setHeight(newHeight);
-          });
           setTimeout(() => {
-            setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
-          }, animationDurationToValue[animationDuration]);
+            flushSync(() => {
+              setHeight(newHeight);
+            });
+            timeoutRef.current = setTimeout(() => {
+              setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
+            }, animationDurationToValue[animationDuration]);
+          });
         } else {
           setHeight(newHeight);
           setClonedChildren(cloneElement(/* @__PURE__ */ jsx(Fragment, { children }), {}));
@@ -85,4 +91,4 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 export {
   AutoAnimateHeight
 };
-//# sourceMappingURL=chunk-2LKUHKL4.mjs.map
+//# sourceMappingURL=chunk-Q6REETZD.mjs.map

package/dist/chunk-Q6REETZD.mjs.map

@@ -0,0 +1 @@
+{"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            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;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;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-ZDPU3N54.mjs

@@ -0,0 +1,39 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/show-more/show-more.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ShowMoreButton = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx(
+          "hds-show-more",
+          variant === "show-more-show-less" && "hds-show-more--show-less",
+          className
+        ),
+        "data-state": expanded ? "expanded" : void 0,
+        type: "button"
+      }, rest), {
+        children: [
+          text,
+          /* @__PURE__ */ jsx("span", { className: clsx("hds-show-more__icon") })
+        ]
+      })
+    );
+  }
+);
+ShowMoreButton.displayName = "ShowMoreButton";
+
+export {
+  ShowMoreButton
+};
+//# sourceMappingURL=chunk-ZDPU3N54.mjs.map

package/dist/chunk-ZDPU3N54.mjs.map

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

package/dist/index-no-css.js

@@ -1516,6 +1516,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       "animationDuration",
       "animationEasing"
     ]);
+    const timeoutRef = (0, import_react24.useRef)(null);
     const measurementRef = (0, import_react24.useRef)(null);
     const [height, setHeight] = (0, import_react24.useState)(void 0);
     const [clonedChildren, setClonedChildren] = (0, import_react24.useState)(
@@ -1524,13 +1525,18 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
     (0, import_react24.useEffect)(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         if (newHeight < (height != null ? height : 0)) {
-          (0, import_react_dom.flushSync)(() => {
-            setHeight(newHeight);
-          });
           setTimeout(() => {
-            setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
-          }, animationDurationToValue[animationDuration]);
+            (0, import_react_dom.flushSync)(() => {
+              setHeight(newHeight);
+            });
+            timeoutRef.current = setTimeout(() => {
+              setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
+            }, animationDurationToValue[animationDuration]);
+          });
         } else {
           setHeight(newHeight);
           setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
@@ -1572,34 +1578,39 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/show-more/show-more.tsx
 var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
+var import_react25 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function ShowMoreButton(_a) {
-  var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_typed_classname27.clsx)(
-        "hds-show-more",
-        variant === "show-more-show-less" && "hds-show-more--show-less",
-        className
-      ),
-      "data-state": expanded ? "expanded" : void 0,
-      type: "button"
-    }, rest), {
-      children: [
-        text,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
-      ]
-    })
-  );
-}
+var ShowMoreButton = (0, import_react25.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname27.clsx)(
+          "hds-show-more",
+          variant === "show-more-show-less" && "hds-show-more--show-less",
+          className
+        ),
+        "data-state": expanded ? "expanded" : void 0,
+        type: "button"
+      }, rest), {
+        children: [
+          text,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
+        ]
+      })
+    );
+  }
+);
+ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
 var React11 = require("react");
 var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Skeleton = (0, import_react25.forwardRef)(
+var Skeleton = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -1619,41 +1630,54 @@ Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react27 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function StepIndicator(_a) {
-  var _b = _a, {
-    activeStep,
-    totalSteps,
-    className,
-    label,
-    lang = "en",
-    title,
-    titleAs: TitleComponent
-  } = _b, rest = __objRest(_b, [
-    "activeStep",
-    "totalSteps",
-    "className",
-    "label",
-    "lang",
-    "title",
-    "titleAs"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname29.clsx)("hds-step-indicator", className), lang }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var StepIndicator = (0, import_react27.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      activeStep,
+      totalSteps,
+      className,
+      label,
+      lang = "en",
+      title,
+      titleAs: TitleComponent
+    } = _b, rest = __objRest(_b, [
+      "activeStep",
+      "totalSteps",
+      "className",
+      "label",
+      "lang",
+      "title",
+      "titleAs"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
-      {
-        className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
-        "data-state": getStepState(i + 1, activeStep)
-      },
-      i
-    )) }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
-  ] }));
-}
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname29.clsx)("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "div",
+            {
+              className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
+        ]
+      })
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
 var stepLabelTranslations = {
   no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
   en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
@@ -1671,10 +1695,10 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react26.forwardRef)(
+var StyledHtml = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -1696,12 +1720,12 @@ var StyledHtml = (0, import_react26.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/tabs/tabs.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
-var import_react27 = require("react");
-var TabsContext = (0, import_react27.createContext)({
+var import_react29 = require("react");
+var TabsContext = (0, import_react29.createContext)({
   mounted: false,
   activeTabId: void 0,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
@@ -1711,10 +1735,10 @@ var TabsContext = (0, import_react27.createContext)({
 
 // src/tabs/tabs.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Tabs = (0, import_react28.forwardRef)(
+var Tabs = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react28.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react30.useState)(defaultTab);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TabsContext.Provider,
       {
@@ -1727,12 +1751,12 @@ var Tabs = (0, import_react28.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function TabsList(_a) {
   var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
-  const tabsListRef = (0, import_react29.useRef)(null);
+  const tabsListRef = (0, import_react31.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
   const { innerWidth } = window;
   const wideEnough = innerWidth >= tabsWidth;
@@ -1757,10 +1781,10 @@ function TabsList(_a) {
   );
 }
 TabsList.displayName = "Tabs.List";
-var Tab = (0, import_react29.forwardRef)(
+var Tab = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
-    const context = (0, import_react29.useContext)(TabsContext);
+    const context = (0, import_react31.useContext)(TabsContext);
     if (!context.mounted) {
       throw new Error("Context required. Did you use <TabContent/> outside of <Tabs/>?");
     }
@@ -1790,7 +1814,7 @@ var Tab = (0, import_react29.forwardRef)(
 Tab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function TabsContents(_a) {
@@ -1798,10 +1822,10 @@ function TabsContents(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-tabs--contents") }, rest), { children }));
 }
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react30.forwardRef)(
+var TabsContent = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
-    const context = (0, import_react30.useContext)(TabsContext);
+    const context = (0, import_react32.useContext)(TabsContext);
     if (!context.mounted) {
       throw new Error("Context required. Did you use <Tabs.Content /> outside of <Tabs/>?");
     }
@@ -1821,7 +1845,7 @@ TabsComponent.Contents = TabsContents;
 TabsComponent.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var defaultHTMLTag = {
@@ -1839,7 +1863,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react31.forwardRef)(
+var Text = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as,
@@ -1915,10 +1939,10 @@ function textVariant(variant, displayName) {
 }
 
 // src/warning-banner/warning-banner.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react32.forwardRef)(
+var WarningBanner = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
@@ -1929,7 +1953,7 @@ var WarningBanner = (0, import_react32.forwardRef)(
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react32.forwardRef)(
+var WarningBannerTitle = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant,
@@ -1942,7 +1966,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
       "children",
       "className"
     ]);
-    const [open, setOpen] = (0, import_react32.useState)(false);
+    const [open, setOpen] = (0, import_react34.useState)(false);
     if (variant === "expandable") {
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Component,
@@ -1975,7 +1999,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
   }
 );
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react32.forwardRef)(
+var WarningBannerDescription = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(