@postenbring/hedwig-react 0.0.62 → 0.0.64

package/dist/skeleton/skeleton.js

@@ -58,11 +58,34 @@ var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Skeleton = (0, import_react.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"]);
+    var _b = _a, {
+      as: Component = "div",
+      children,
+      animation,
+      variant = "text",
+      width,
+      height,
+      className,
+      style
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "animation",
+      "variant",
+      "width",
+      "height",
+      "className",
+      "style"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname.clsx)("hds-skeleton", `hds-skeleton--${variant}`, className),
+        className: (0, import_typed_classname.clsx)(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className
+        ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         ref,
         "aria-hidden": true

package/dist/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    { as: Component = \"div\", children, variant = \"text\", width, height, className, style, ...rest },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\"hds-skeleton\", `hds-skeleton--${variant}`, className as undefined)}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAyDrB;AANC,IAAM,eAAgE;AAAA,EAC3E,CACE,IACA,QACG;AAFH,iBAAE,MAAI,YAAY,OAAO,UAAU,UAAU,QAAQ,OAAO,QAAQ,WAAW,MAvDnF,IAuDI,IAAyF,iBAAzF,IAAyF,CAAvF,MAAuB,YAAU,WAAkB,SAAO,UAAQ,aAAW;AAG/E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,gBAAgB,iBAAiB,OAAO,IAAI,SAAsB;AAAA,QAClF,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      children,\n      animation,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AA2ErB;AAhBC,IAAM,eAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/skeleton/skeleton.mjs

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "../chunk-OYJQ5MAS.mjs";
+} from "../chunk-BYDSISQZ.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Skeleton

package/dist/step-indicator/index.js

@@ -55,41 +55,54 @@ module.exports = __toCommonJS(step_indicator_exports);
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react = require("react");
 var import_jsx_runtime = 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_runtime.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-step-indicator", className), lang }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var StepIndicator = (0, import_react.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_runtime.jsxs)(
       "div",
-      {
-        className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
-        "data-state": getStepState(i + 1, activeStep)
-      },
-      i
-    )) }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_classname.clsx)("hds-step-indicator__title"), children: title }) : null
-  ] }));
-}
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname.clsx)("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_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}`,

package/dist/step-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/step-indicator/index.ts","../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["export { StepIndicator } from \"./step-indicator\";\nexport type * from \"./step-indicator\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\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 function StepIndicator({\n  activeStep,\n  totalSteps,\n  className,\n  label,\n  lang = \"en\",\n  title,\n  titleAs: TitleComponent,\n  ...rest\n}: StepIndicatorProps & TitleProps) {\n  return (\n    <div className={clsx(\"hds-step-indicator\", className as undefined)} lang={lang} {...rest}>\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\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;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AAwDf;AAZC,SAAS,cAAc,IASM;AATN,eAC5B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,EAnDX,IA4C8B,IAQzB,iBARyB,IAQzB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,6CAAC,sCAAI,eAAW,6BAAK,sBAAsB,SAAsB,GAAG,QAAgB,OAAnF,EACC;AAAA,iDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,kDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,MAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,OAC7D;AAAA,IAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,0BAA0B;AAAA,QAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,MACrC;AAAA,IACP,CACD,GACH;AAAA,IAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA,MACN;AAEJ;AAKA,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":[]}
+{"version":3,"sources":["../../src/step-indicator/index.ts","../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["export { StepIndicator } from \"./step-indicator\";\nexport type * from \"./step-indicator\";\n","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;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AACrB,mBAA2B;AAiEnB;AArBD,IAAM,oBAAgB;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,eAAW,6BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,uDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,wDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,6BAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,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/step-indicator/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-TJH5QJMS.mjs";
 import {
   StepIndicator
-} from "../chunk-NIRIPLQ5.mjs";
+} from "../chunk-5UJ3LEKK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   StepIndicator

package/dist/step-indicator/step-indicator.js

@@ -53,41 +53,54 @@ __export(step_indicator_exports, {
 });
 module.exports = __toCommonJS(step_indicator_exports);
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react = require("react");
 var import_jsx_runtime = 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_runtime.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname.clsx)("hds-step-indicator", className), lang }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var StepIndicator = (0, import_react.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_runtime.jsxs)(
       "div",
-      {
-        className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
-        "data-state": getStepState(i + 1, activeStep)
-      },
-      i
-    )) }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_classname.clsx)("hds-step-indicator__title"), children: title }) : null
-  ] }));
-}
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname.clsx)("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_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}`,

package/dist/step-indicator/step-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\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 function StepIndicator({\n  activeStep,\n  totalSteps,\n  className,\n  label,\n  lang = \"en\",\n  title,\n  titleAs: TitleComponent,\n  ...rest\n}: StepIndicatorProps & TitleProps) {\n  return (\n    <div className={clsx(\"hds-step-indicator\", className as undefined)} lang={lang} {...rest}>\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\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;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AAwDf;AAZC,SAAS,cAAc,IASM;AATN,eAC5B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,EAnDX,IA4C8B,IAQzB,iBARyB,IAQzB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,6CAAC,sCAAI,eAAW,6BAAK,sBAAsB,SAAsB,GAAG,QAAgB,OAAnF,EACC;AAAA,iDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,kDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,MAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,OAC7D;AAAA,IAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,0BAA0B;AAAA,QAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,MACrC;AAAA,IACP,CACD,GACH;AAAA,IAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA,MACN;AAEJ;AAKA,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":[]}
+{"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;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAA2B;AAiEnB;AArBD,IAAM,oBAAgB;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,eAAW,6BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,uDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,wDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,6BAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,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/step-indicator/step-indicator.mjs

@@ -1,6 +1,6 @@
 import {
   StepIndicator
-} from "../chunk-NIRIPLQ5.mjs";
+} from "../chunk-5UJ3LEKK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   StepIndicator

package/dist/utilities/auto-animate-height.js

@@ -107,6 +107,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
       __spreadProps(__spreadValues({
         ref,
         style: __spreadValues({
+          position: "relative",
           overflow: "hidden",
           height,
           transitionProperty: "height",

package/dist/utilities/auto-animate-height.js.map

@@ -1 +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;AAAA;AAAA;AAAA;AAAA;AAAA,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;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":[]}
+{"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;AAAA;AAAA;AAAA;AAAA;AAAA,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":[]}

package/dist/utilities/auto-animate-height.mjs

@@ -1,6 +1,6 @@
 import {
   AutoAnimateHeight
-} from "../chunk-Q6REETZD.mjs";
+} from "../chunk-AKYK3XFN.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   AutoAnimateHeight

package/dist/utilities/index.js

@@ -109,6 +109,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
       __spreadProps(__spreadValues({
         ref,
         style: __spreadValues({
+          position: "relative",
           overflow: "hidden",
           height,
           transitionProperty: "height",

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            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;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":[]}
+{"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":[]}

package/dist/utilities/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,14 +13,14 @@
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "7.43.0",
-    "@types/react": "^18.2.69",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^8.0.1",
     "typescript": "^5.4.3",
-    "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,8 +29,9 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "1.0.2",
     "focus-trap-react": "10.2.3",
-    "@postenbring/hedwig-css": "0.0.54"
+    "@postenbring/hedwig-css": "0.0.55"
   },
   "publishConfig": {
     "access": "public"

package/dist/chunk-JMDXW2ML.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/navbar/navbar.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <header className={clsx(\"hds-navbar\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </header>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\n// Navbar logo\ninterface NavbarLogoProps {\n  children?: never;\n}\nexport const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__logo\", className as undefined)} ref={ref} {...rest} />\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\n// Navbar button\ninterface NavbarButtonProps {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\nexport const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"button\", children, icon, className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__button\", className as undefined)} ref={ref} {...rest}>\n        {children} {icon}\n      </Component>\n    );\n  },\n);\nNavbarButton.displayName = \"Navbar.Button\";\n\ninterface NavbarNavigationProps {\n  children: React.ReactNode;\n}\nexport const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement> =\n  forwardRef(({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  });\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n"],"mappings":";;;;;;;AAAA,SAAgB,kBAAuC;AACvD,SAAS,YAAY;AAYf,cA6BA,YA7BA;AAHC,IAAM,SAAS;AAAA,EACpB,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAXf,IAWG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,oBAAC,yCAAO,WAAW,KAAK,cAAc,SAAsB,GAAG,OAAc,OAA5E,EACE,WACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAMd,IAAM,aAAoE;AAAA,EAC/E,CAAC,IAA+C,QAAQ;AAAvD,iBAAE,MAAI,YAAY,OAAO,UA1B5B,IA0BG,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACxB,WACE,oBAAC,4BAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,KAAM;AAAA,EAEhG;AACF;AACA,WAAW,cAAc;AAOlB,IAAM,eAAqE;AAAA,EAChF,CAAC,IAAkE,QAAQ;AAA1E,iBAAE,MAAI,YAAY,UAAU,UAAU,MAAM,UAxC/C,IAwCG,IAA0D,iBAA1D,IAA0D,CAAxD,MAA0B,YAAU,QAAM;AAC3C,WACE,qBAAC,0CAAU,WAAW,KAAK,sBAAsB,SAAsB,GAAG,OAAc,OAAvF,EACE;AAAA;AAAA,MAAS;AAAA,MAAE;AAAA,QACd;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAKpB,IAAM,mBACX,WAAW,CAAC,IAA+C,QAAQ;AAAvD,eAAE,MAAI,YAAY,OAAO,UAtDvC,IAsDc,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,0BAA0B,SAAsB;AAAA,MAChE;AAAA,OACI;AAAA,EACN;AAEJ,CAAC;AACH,iBAAiB,cAAc;","names":[]}

package/dist/chunk-NIRIPLQ5.mjs

@@ -1,63 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-R4SQKVDQ.mjs";
-
-// src/step-indicator/step-indicator.tsx
-import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { jsx, jsxs } from "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__ */ jsxs("div", __spreadProps(__spreadValues({ 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
-  ] }));
-}
-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-NIRIPLQ5.mjs.map

package/dist/chunk-NIRIPLQ5.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\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 function StepIndicator({\n  activeStep,\n  totalSteps,\n  className,\n  label,\n  lang = \"en\",\n  title,\n  titleAs: TitleComponent,\n  ...rest\n}: StepIndicatorProps & TitleProps) {\n  return (\n    <div className={clsx(\"hds-step-indicator\", className as undefined)} lang={lang} {...rest}>\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\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;AAwDf,SACE,KADF;AAZC,SAAS,cAAc,IASM;AATN,eAC5B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,SAAS;AAAA,EAnDX,IA4C8B,IAQzB,iBARyB,IAQzB;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,qBAAC,sCAAI,WAAW,KAAK,sBAAsB,SAAsB,GAAG,QAAgB,OAAnF,EACC;AAAA,yBAAC,SAAI,WAAW,KAAK,4BAA4B,GAC/C;AAAA,0BAAC,UAAK,WAAW,KAAK,gCAAgC,GAAI,iBAAM;AAAA,MAChE,oBAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,OAC7D;AAAA,IAEA,oBAAC,SAAI,WAAW,KAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,0BAA0B;AAAA,QAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,MACrC;AAAA,IACP,CACD,GACH;AAAA,IAEC,QACC,oBAAC,kBAAe,WAAW,KAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA,MACN;AAEJ;AAKA,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-OYJQ5MAS.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    { as: Component = \"div\", children, variant = \"text\", width, height, className, style, ...rest },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\"hds-skeleton\", `hds-skeleton--${variant}`, className as undefined)}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAyDrB;AANC,IAAM,WAAgE;AAAA,EAC3E,CACE,IACA,QACG;AAFH,iBAAE,MAAI,YAAY,OAAO,UAAU,UAAU,QAAQ,OAAO,QAAQ,WAAW,MAvDnF,IAuDI,IAAyF,iBAAzF,IAAyF,CAAvF,MAAuB,YAAU,WAAkB,SAAO,UAAQ,aAAW;AAG/E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,gBAAgB,iBAAiB,OAAO,IAAI,SAAsB;AAAA,QAClF,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-VKRPPQ6F.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/navbar/index.tsx"],"sourcesContent":["import { Navbar, NavbarLogo, NavbarButton, NavbarNavigation } from \"./navbar\";\nimport {\n  NavbarExpandableMenu,\n  NavbarExpandableMenuTrigger,\n  NavbarExpandableMenuContent,\n} from \"./navbar-expandable-menu\";\n\nconst NavbarExpandableMenuComponent = NavbarExpandableMenu as typeof NavbarExpandableMenu & {\n  Trigger: typeof NavbarExpandableMenuTrigger;\n  Content: typeof NavbarExpandableMenuContent;\n};\nNavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;\nNavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;\n\nconst NavbarComponent = Navbar as typeof Navbar & {\n  Logo: typeof NavbarLogo;\n  ExpandableMenu: typeof NavbarExpandableMenuComponent;\n  Button: typeof NavbarButton;\n  Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\nNavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;\nNavbarComponent.Button = NavbarButton;\nNavbarComponent.Navigation = NavbarNavigation;\n\nexport { NavbarComponent as Navbar };\nexport type * from \"./navbar\";\n"],"mappings":";;;;;;;;;;;;;AAOA,IAAM,gCAAgC;AAItC,8BAA8B,UAAU;AACxC,8BAA8B,UAAU;AAExC,IAAM,kBAAkB;AAMxB,gBAAgB,OAAO;AACvB,gBAAgB,iBAAiB;AACjC,gBAAgB,SAAS;AACzB,gBAAgB,aAAa;","names":[]}

package/dist/chunk-W47NV442.mjs

@@ -1,34 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-R4SQKVDQ.mjs";
-
-// src/show-more/show-more.tsx
-import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ShowMoreButton(_a) {
-  var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-  return /* @__PURE__ */ jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      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") })
-      ]
-    })
-  );
-}
-
-export {
-  ShowMoreButton
-};
-//# sourceMappingURL=chunk-W47NV442.mjs.map

package/dist/chunk-W47NV442.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\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 function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps) {\n  return (\n    <button\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"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AA+CjB,SAWE,KAXF;AAFG,SAAS,eAAe,IAAgE;AAAhE,eAAE,QAAM,SAAS,UAAU,UA7C1D,IA6C+B,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,yBAAyB;AAAA,QACrC;AAAA,MACF;AAAA,MACA,cAAY,WAAW,aAAa;AAAA,MACpC,MAAK;AAAA,OACD,OARL;AAAA,MAUE;AAAA;AAAA,QACD,oBAAC,UAAK,WAAW,KAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,EAChD;AAEJ;","names":[]}