@postenbring/hedwig-react 0.0.56 → 0.0.58

package/dist/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/skeleton/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\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;;;ACCA,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/index.ts","../../src/skeleton/skeleton.tsx"],"sourcesContent":["export { Skeleton } from \"./skeleton\";\nexport type * from \"./skeleton\";\n","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;;;ACCA,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":[]}

package/dist/skeleton/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-JTZPQHKD.mjs";
 import {
   Skeleton
-} from "../chunk-EJJIKLGC.mjs";
+} from "../chunk-44X6U32G.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Skeleton

package/dist/skeleton/skeleton.js

@@ -52,7 +52,7 @@ __export(skeleton_exports, {
   Skeleton: () => Skeleton
 });
 module.exports = __toCommonJS(skeleton_exports);
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Skeleton = (0, import_react.forwardRef)(

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/index.mjs\";\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;AACA,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  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;AACA,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":[]}

package/dist/skeleton/skeleton.mjs

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "../chunk-EJJIKLGC.mjs";
+} from "../chunk-44X6U32G.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Skeleton

package/dist/step-indicator/index.js

@@ -54,7 +54,7 @@ __export(step_indicator_exports, {
 module.exports = __toCommonJS(step_indicator_exports);
 
 // src/step-indicator/step-indicator.tsx
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 function StepIndicator(_a) {
   var _b = _a, {

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/index.mjs\";\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\";\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":[]}

package/dist/step-indicator/index.mjs

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

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

@@ -52,7 +52,7 @@ __export(step_indicator_exports, {
   StepIndicator: () => StepIndicator
 });
 module.exports = __toCommonJS(step_indicator_exports);
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 function StepIndicator(_a) {
   var _b = _a, {

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/index.mjs\";\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\";\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":[]}

package/dist/step-indicator/step-indicator.mjs

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

package/dist/styled-html/index.js

@@ -55,7 +55,7 @@ module.exports = __toCommonJS(styled_html_exports);
 
 // src/styled-html/styled-html.tsx
 var import_react = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 var StyledHtml = (0, import_react.forwardRef)(
   (_a, ref) => {

package/dist/styled-html/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styled-html/index.ts","../../src/styled-html/styled-html.tsx"],"sourcesContent":["export { StyledHtml } from \"./styled-html\";\nexport type * from \"./styled-html\";\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface StyledHtmlProps {\n  children?: React.ReactNode;\n  size?: \"default\" | \"small\";\n  darkmode?: boolean;\n}\n\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * ```tsx\n * <StyledHtml>\n *   <h1>Heading 1</h1>\n *   <h2>Heading 2</h2>\n *   <a href=\"https://www.postenbring.no\">Postenbring</a>\n *   <ul>\n *    <li>Hei</li>\n *    <li>Hallo</li>\n *    <li>Hello</li>\n *   </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml: OverridableComponent<StyledHtmlProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", children, size, darkmode = false, className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\n          `hds-styled-html`,\n          size === \"small\" && \"hds-styled-html--small\",\n          darkmode && \"hds-styled-html--darkmode\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAClC,6BAAqB;AAiCf;AAHC,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAAiF,QAAQ;AAAzF,iBAAE,MAAI,YAAY,OAAO,UAAU,MAAM,WAAW,OAAO,UAhC9D,IAgCG,IAAyE,iBAAzE,IAAyE,CAAvE,MAAuB,YAAU,QAAM,YAAkB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../src/styled-html/index.ts","../../src/styled-html/styled-html.tsx"],"sourcesContent":["export { StyledHtml } from \"./styled-html\";\nexport type * from \"./styled-html\";\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface StyledHtmlProps {\n  children?: React.ReactNode;\n  size?: \"default\" | \"small\";\n  darkmode?: boolean;\n}\n\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * ```tsx\n * <StyledHtml>\n *   <h1>Heading 1</h1>\n *   <h2>Heading 2</h2>\n *   <a href=\"https://www.postenbring.no\">Postenbring</a>\n *   <ul>\n *    <li>Hei</li>\n *    <li>Hallo</li>\n *    <li>Hello</li>\n *   </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml: OverridableComponent<StyledHtmlProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", children, size, darkmode = false, className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\n          `hds-styled-html`,\n          size === \"small\" && \"hds-styled-html--small\",\n          darkmode && \"hds-styled-html--darkmode\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAClC,6BAAqB;AAiCf;AAHC,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAAiF,QAAQ;AAAzF,iBAAE,MAAI,YAAY,OAAO,UAAU,MAAM,WAAW,OAAO,UAhC9D,IAgCG,IAAyE,iBAAzE,IAAyE,CAAvE,MAAuB,YAAU,QAAM,YAAkB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/styled-html/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-JKCVB5TR.mjs";
 import {
   StyledHtml
-} from "../chunk-J6ES2LO5.mjs";
+} from "../chunk-S5RB7KLJ.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   StyledHtml

package/dist/styled-html/styled-html.js

@@ -53,7 +53,7 @@ __export(styled_html_exports, {
 });
 module.exports = __toCommonJS(styled_html_exports);
 var import_react = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 var StyledHtml = (0, import_react.forwardRef)(
   (_a, ref) => {

package/dist/styled-html/styled-html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styled-html/styled-html.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface StyledHtmlProps {\n  children?: React.ReactNode;\n  size?: \"default\" | \"small\";\n  darkmode?: boolean;\n}\n\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * ```tsx\n * <StyledHtml>\n *   <h1>Heading 1</h1>\n *   <h2>Heading 2</h2>\n *   <a href=\"https://www.postenbring.no\">Postenbring</a>\n *   <ul>\n *    <li>Hei</li>\n *    <li>Hallo</li>\n *    <li>Hello</li>\n *   </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml: OverridableComponent<StyledHtmlProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", children, size, darkmode = false, className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\n          `hds-styled-html`,\n          size === \"small\" && \"hds-styled-html--small\",\n          darkmode && \"hds-styled-html--darkmode\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,6BAAqB;AAiCf;AAHC,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAAiF,QAAQ;AAAzF,iBAAE,MAAI,YAAY,OAAO,UAAU,MAAM,WAAW,OAAO,UAhC9D,IAgCG,IAAyE,iBAAzE,IAAyE,CAAvE,MAAuB,YAAU,QAAM,YAAkB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../src/styled-html/styled-html.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface StyledHtmlProps {\n  children?: React.ReactNode;\n  size?: \"default\" | \"small\";\n  darkmode?: boolean;\n}\n\n/**\n * A component for displaying dynamic content that you want to apply hedwig styling to.\n * the styling depends on the semantic html elements you use inside the component.\n *\n * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.\n *\n * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.\n *\n * ```tsx\n * <StyledHtml>\n *   <h1>Heading 1</h1>\n *   <h2>Heading 2</h2>\n *   <a href=\"https://www.postenbring.no\">Postenbring</a>\n *   <ul>\n *    <li>Hei</li>\n *    <li>Hallo</li>\n *    <li>Hello</li>\n *   </ul>\n * </StyledHtml>\n * ```\n */\nexport const StyledHtml: OverridableComponent<StyledHtmlProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", children, size, darkmode = false, className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\n          `hds-styled-html`,\n          size === \"small\" && \"hds-styled-html--small\",\n          darkmode && \"hds-styled-html--darkmode\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStyledHtml.displayName = \"StyledHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,6BAAqB;AAiCf;AAHC,IAAM,iBAAoE;AAAA,EAC/E,CAAC,IAAiF,QAAQ;AAAzF,iBAAE,MAAI,YAAY,OAAO,UAAU,MAAM,WAAW,OAAO,UAhC9D,IAgCG,IAAyE,iBAAzE,IAAyE,CAAvE,MAAuB,YAAU,QAAM,YAAkB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,SAAS,WAAW;AAAA,UACpB,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/styled-html/styled-html.mjs

@@ -1,6 +1,6 @@
 import {
   StyledHtml
-} from "../chunk-J6ES2LO5.mjs";
+} from "../chunk-S5RB7KLJ.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   StyledHtml

package/dist/tabs/index.js

@@ -65,7 +65,7 @@ module.exports = __toCommonJS(tabs_exports);
 
 // src/tabs/tabs.tsx
 var import_react2 = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
 var import_react = require("react");
@@ -96,7 +96,7 @@ Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
 var import_react4 = require("react");
-var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/utils.ts
 var React = __toESM(require("react"));
@@ -188,7 +188,7 @@ Tab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
 var import_react5 = require("react");
-var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function TabsContents(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, Tab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = Tab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider\n          value={{ activeTabId, toggleActiveTabId: setActiveTabId, mounted: true }}\n        >\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useContext, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs--list\",\n        direction === \"horizontal\"\n          ? {\n              [`hds-tabs--list-horizontal`]: wideEnough,\n              \"hds-tabs--list-vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs--list-vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <TabContent/> outside of <Tabs/>?\");\n    }\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs--tab\",\n          { \"hds-tabs--tab-active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs--contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <Tabs.Content /> outside of <Tabs/>?\");\n    }\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, Tab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof Tab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = Tab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider\n          value={{ activeTabId, toggleActiveTabId: setActiveTabId, mounted: true }}\n        >\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useContext, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs--list\",\n        direction === \"horizontal\"\n          ? {\n              [`hds-tabs--list-horizontal`]: wideEnough,\n              \"hds-tabs--list-vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs--list-vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <TabContent/> outside of <Tabs/>?\");\n    }\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs--tab\",\n          { \"hds-tabs--tab-active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs--contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <Tabs.Content /> outside of <Tabs/>?\");\n    }\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/tabs/index.mjs

@@ -1,9 +1,9 @@
 import {
   TabsComponent
-} from "../chunk-52XZAPT6.mjs";
-import "../chunk-DVFL3S5W.mjs";
-import "../chunk-C3HIZBXH.mjs";
-import "../chunk-WXU2FTGO.mjs";
+} from "../chunk-CA226LBE.mjs";
+import "../chunk-MBBFU4IR.mjs";
+import "../chunk-EJADADIY.mjs";
+import "../chunk-XVZ44NGD.mjs";
 import "../chunk-WCA2WPFS.mjs";
 import "../chunk-33JD5XDW.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/tabs/tabs-content.js

@@ -54,7 +54,7 @@ __export(tabs_content_exports, {
 });
 module.exports = __toCommonJS(tabs_content_exports);
 var import_react2 = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
 var import_react = require("react");

package/dist/tabs/tabs-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs-content.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs--contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <Tabs.Content /> outside of <Tabs/>?\");\n    }\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAuC;AACvC,6BAAqB;;;ACFrB,mBAA8B;AAQvB,IAAM,kBAAc,4BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;ADHG;AAFG,SAAS,aAAa,IAAyC;AAAzC,eAAE,WAV/B,IAU6B,IAAe,iBAAf,IAAe,CAAb;AAC7B,SACE,4CAAC,sCAAI,eAAW,6BAAK,oBAAoB,KAAO,OAA/C,EACE,WACH;AAEJ;AACA,aAAa,cAAc;AAWpB,IAAM,kBAAmE;AAAA,EAC9E,CAAC,IAAwD,QAAQ;AAAhE,iBAAE,MAAI,YAAY,OAAO,UAAU,SA7BtC,IA6BG,IAAgD,iBAAhD,IAAgD,CAA9C,MAAuB,YAAU;AAClC,UAAM,cAAU,0BAAW,WAAW;AACtC,QAAI,CAAC,QAAQ,SAAS;AACpB,YAAM,IAAI,MAAM,oEAAoE;AAAA,IACtF;AACA,QAAI,QAAQ,gBAAgB,UAAU;AACpC,aACE,4CAAC,4CAAc,OAAd,EAAoB,KAClB,WACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACF;AAEA,YAAY,cAAc;","names":["import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs-content.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs--contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <Tabs.Content /> outside of <Tabs/>?\");\n    }\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAuC;AACvC,6BAAqB;;;ACFrB,mBAA8B;AAQvB,IAAM,kBAAc,4BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;ADHG;AAFG,SAAS,aAAa,IAAyC;AAAzC,eAAE,WAV/B,IAU6B,IAAe,iBAAf,IAAe,CAAb;AAC7B,SACE,4CAAC,sCAAI,eAAW,6BAAK,oBAAoB,KAAO,OAA/C,EACE,WACH;AAEJ;AACA,aAAa,cAAc;AAWpB,IAAM,kBAAmE;AAAA,EAC9E,CAAC,IAAwD,QAAQ;AAAhE,iBAAE,MAAI,YAAY,OAAO,UAAU,SA7BtC,IA6BG,IAAgD,iBAAhD,IAAgD,CAA9C,MAAuB,YAAU;AAClC,UAAM,cAAU,0BAAW,WAAW;AACtC,QAAI,CAAC,QAAQ,SAAS;AACpB,YAAM,IAAI,MAAM,oEAAoE;AAAA,IACtF;AACA,QAAI,QAAQ,gBAAgB,UAAU;AACpC,aACE,4CAAC,4CAAc,OAAd,EAAoB,KAClB,WACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACF;AAEA,YAAY,cAAc;","names":["import_react"]}

package/dist/tabs/tabs-content.mjs

@@ -1,7 +1,7 @@
 import {
   TabsContent,
   TabsContents
-} from "../chunk-C3HIZBXH.mjs";
+} from "../chunk-EJADADIY.mjs";
 import "../chunk-33JD5XDW.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/tabs/tabs-list.js

@@ -64,7 +64,7 @@ __export(tabs_list_exports, {
 });
 module.exports = __toCommonJS(tabs_list_exports);
 var import_react3 = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/utils.ts
 var React = __toESM(require("react"));

package/dist/tabs/tabs-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useContext, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs--list\",\n        direction === \"horizontal\"\n          ? {\n              [`hds-tabs--list-horizontal`]: wideEnough,\n              \"hds-tabs--list-vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs--list-vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <TabContent/> outside of <Tabs/>?\");\n    }\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs--tab\",\n          { \"hds-tabs--tab-active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAA+C;AAC/C,6BAAqB;;;ACDrB,YAAuB;AACvB,mBAAiD;AA6C1C,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AApDzC;AAqDI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;;;ACvEA,IAAAC,gBAA8B;AAQvB,IAAM,kBAAc,6BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;AFOG;AANG,SAAS,SAAS,IAA0E;AAA1E,eAAE,YAAU,YAAY,cAAc,UAhB/D,IAgByB,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AAC7D,QAAM,kBAAc,sBAAuB,IAAI;AAC/C,QAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAClD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,cAAc;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,cAAc,eACV;AAAA,UACE,CAAC,2BAA2B,GAAG;AAAA,UAC/B,2BAA2B,CAAC;AAAA,QAC9B,IACA;AAAA,UACE,2BAA2B;AAAA,QAC7B;AAAA,QACJ;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,OACD,OAfL;AAAA,MAiBE;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAWhB,IAAM,UAAyD;AAAA,EACpE,CAAC,IAA4E,QAAQ;AAApF,iBAAE,MAAI,YAAY,UAAU,UAAU,OAAO,WAAW,QAxD3D,IAwDG,IAAoE,iBAApE,IAAoE,CAAlE,MAA0B,YAAU,SAAO,aAAW;AACvD,UAAM,cAAU,0BAAW,WAAW;AACtC,QAAI,CAAC,QAAQ,SAAS;AACpB,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AACA,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,iBAAW,QAAQ,CAAC;AAAA,IACtB;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,EAAE,wBAAwB,QAAQ,gBAAgB,MAAM;AAAA,UACxD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,SACD,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;","names":["import_react","import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useContext, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { TabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabProps> | ReactElement<TabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs--list\",\n        direction === \"horizontal\"\n          ? {\n              [`hds-tabs--list-horizontal`]: wideEnough,\n              \"hds-tabs--list-vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs--list-vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const Tab: OverridableComponent<TabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useContext(TabsContext);\n    if (!context.mounted) {\n      throw new Error(\"Context required. Did you use <TabContent/> outside of <Tabs/>?\");\n    }\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs--tab\",\n          { \"hds-tabs--tab-active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAA+C;AAC/C,6BAAqB;;;ACDrB,YAAuB;AACvB,mBAAiD;AA6C1C,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AApDzC;AAqDI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;;;ACvEA,IAAAC,gBAA8B;AAQvB,IAAM,kBAAc,6BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;AFOG;AANG,SAAS,SAAS,IAA0E;AAA1E,eAAE,YAAU,YAAY,cAAc,UAhB/D,IAgByB,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AAC7D,QAAM,kBAAc,sBAAuB,IAAI;AAC/C,QAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAClD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,cAAc;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,cAAc,eACV;AAAA,UACE,CAAC,2BAA2B,GAAG;AAAA,UAC/B,2BAA2B,CAAC;AAAA,QAC9B,IACA;AAAA,UACE,2BAA2B;AAAA,QAC7B;AAAA,QACJ;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,OACD,OAfL;AAAA,MAiBE;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAWhB,IAAM,UAAyD;AAAA,EACpE,CAAC,IAA4E,QAAQ;AAApF,iBAAE,MAAI,YAAY,UAAU,UAAU,OAAO,WAAW,QAxD3D,IAwDG,IAAoE,iBAApE,IAAoE,CAAlE,MAA0B,YAAU,SAAO,aAAW;AACvD,UAAM,cAAU,0BAAW,WAAW;AACtC,QAAI,CAAC,QAAQ,SAAS;AACpB,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AACA,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,iBAAW,QAAQ,CAAC;AAAA,IACtB;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,EAAE,wBAAwB,QAAQ,gBAAgB,MAAM;AAAA,UACxD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,SACD,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;","names":["import_react","import_react"]}

package/dist/tabs/tabs-list.mjs

@@ -1,7 +1,7 @@
 import {
   Tab,
   TabsList
-} from "../chunk-WXU2FTGO.mjs";
+} from "../chunk-XVZ44NGD.mjs";
 import "../chunk-WCA2WPFS.mjs";
 import "../chunk-33JD5XDW.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/tabs/tabs.js

@@ -53,7 +53,7 @@ __export(tabs_exports, {
 });
 module.exports = __toCommonJS(tabs_exports);
 var import_react2 = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
 var import_react = require("react");

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider\n          value={{ activeTabId, toggleActiveTabId: setActiveTabId, mounted: true }}\n        >\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAqC;AACrC,6BAAqB;;;ACFrB,mBAA8B;AAQvB,IAAM,kBAAc,4BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;ADOO;AALD,IAAM,WAAwD;AAAA,EACnE,CAAC,IAA0D,QAAQ;AAAlE,iBAAE,MAAI,YAAY,OAAO,YAAY,SAlBxC,IAkBG,IAAkD,iBAAlD,IAAkD,CAAhD,MAAuB,cAAY;AACpC,UAAM,CAAC,aAAa,cAAc,QAAI,wBAAiB,UAAU;AACjE,WACE,4CAAC,0CAAU,eAAW,6BAAK,UAAU,GAAG,OAAc,OAArD,EACC;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,OAAO,EAAE,aAAa,mBAAmB,gBAAgB,SAAS,KAAK;AAAA,QAEtE;AAAA;AAAA,IACH,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs.tsx","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider\n          value={{ activeTabId, toggleActiveTabId: setActiveTabId, mounted: true }}\n        >\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext } from \"react\";\n\nexport interface TabsContextProps {\n  mounted: boolean;\n  activeTabId?: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps>({\n  mounted: false,\n  activeTabId: undefined,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling\n  toggleActiveTabId: (tabId: string) => {\n    // default\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAqC;AACrC,6BAAqB;;;ACFrB,mBAA8B;AAQvB,IAAM,kBAAc,4BAAgC;AAAA,EACzD,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,mBAAmB,CAAC,UAAkB;AAAA,EAEtC;AACF,CAAC;;;ADOO;AALD,IAAM,WAAwD;AAAA,EACnE,CAAC,IAA0D,QAAQ;AAAlE,iBAAE,MAAI,YAAY,OAAO,YAAY,SAlBxC,IAkBG,IAAkD,iBAAlD,IAAkD,CAAhD,MAAuB,cAAY;AACpC,UAAM,CAAC,aAAa,cAAc,QAAI,wBAAiB,UAAU;AACjE,WACE,4CAAC,0CAAU,eAAW,6BAAK,UAAU,GAAG,OAAc,OAArD,EACC;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,OAAO,EAAE,aAAa,mBAAmB,gBAAgB,SAAS,KAAK;AAAA,QAEtE;AAAA;AAAA,IACH,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["import_react"]}

package/dist/tabs/tabs.mjs

@@ -1,6 +1,6 @@
 import {
   Tabs
-} from "../chunk-DVFL3S5W.mjs";
+} from "../chunk-MBBFU4IR.mjs";
 import "../chunk-33JD5XDW.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/text/index.js

@@ -68,7 +68,7 @@ module.exports = __toCommonJS(text_exports);
 
 // src/text/text.tsx
 var import_react = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",

package/dist/text/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/text/index.tsx","../../src/text/text.tsx"],"sourcesContent":["import type { TextProps } from \"./text\";\nimport { Text } from \"./text\";\n\nexport { Text };\nexport type * from \"./text\";\n\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1Display = textVariant(\"h1-display\", \"TextH1Display\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1 = textVariant(\"h1\", \"TextH1\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH2 = textVariant(\"h2\", \"TextH2\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3 = textVariant(\"h3\", \"TextH3\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3Title = textVariant(\"h3-title\", \"TextH3Title\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBody = textVariant(\"body\", \"TextBody\"); // Less weird\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodyTitle = textVariant(\"body-title\", \"TextBodyTitle\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmall = textVariant(\"body-small\", \"TextBodySmall\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmallTitle = textVariant(\"body-small-title\", \"TextBodySmallTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnical = textVariant(\"technical\", \"TextTechnical\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnicalTitle = textVariant(\"technical-title\", \"TextTechnicalTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaption = textVariant(\"caption\", \"TextCaption\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaptionTitle = textVariant(\"caption-title\", \"TextCaptionTitle\");\n\nconst variantToHtmlTag = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n} as const;\n\nfunction textVariant(\n  variant: TextProps[\"variant\"],\n  displayName: string,\n): React.FunctionComponent<Omit<TextProps, \"variant\">> {\n  function WrappedText(props: Omit<TextProps, \"variant\">) {\n    return <Text variant={variant} as={variantToHtmlTag[variant ?? \"body\"]} {...props} />;\n  }\n  WrappedText.displayName = displayName;\n\n  return WrappedText;\n}\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;;;ADyBR,IAAAA,sBAAA;AA/GJ,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,cAAc,YAAY,YAAY,aAAa;AAQzD,IAAM,WAAW,YAAY,QAAQ,UAAU;AAQ/C,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,qBAAqB,YAAY,oBAAoB,oBAAoB;AAM/E,IAAM,gBAAgB,YAAY,aAAa,eAAe;AAM9D,IAAM,qBAAqB,YAAY,mBAAmB,oBAAoB;AAM9E,IAAM,cAAc,YAAY,WAAW,aAAa;AAMxD,IAAM,mBAAmB,YAAY,iBAAiB,kBAAkB;AAE/E,IAAM,mBAAmB;AAAA,EACvB,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAEA,SAAS,YACP,SACA,aACqD;AACrD,WAAS,YAAY,OAAmC;AACtD,WAAO,6CAAC,uBAAK,SAAkB,IAAI,iBAAiB,4BAAW,MAAM,KAAO,MAAO;AAAA,EACrF;AACA,cAAY,cAAc;AAE1B,SAAO;AACT;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../src/text/index.tsx","../../src/text/text.tsx"],"sourcesContent":["import type { TextProps } from \"./text\";\nimport { Text } from \"./text\";\n\nexport { Text };\nexport type * from \"./text\";\n\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1Display = textVariant(\"h1-display\", \"TextH1Display\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH1 = textVariant(\"h1\", \"TextH1\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH2 = textVariant(\"h2\", \"TextH2\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3 = textVariant(\"h3\", \"TextH3\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextH3Title = textVariant(\"h3-title\", \"TextH3Title\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBody = textVariant(\"body\", \"TextBody\"); // Less weird\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodyTitle = textVariant(\"body-title\", \"TextBodyTitle\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmall = textVariant(\"body-small\", \"TextBodySmall\");\n/**\n * # 🚨 Unstable alternative\n *\n * named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextBodySmallTitle = textVariant(\"body-small-title\", \"TextBodySmallTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnical = textVariant(\"technical\", \"TextTechnical\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextTechnicalTitle = textVariant(\"technical-title\", \"TextTechnicalTitle\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaption = textVariant(\"caption\", \"TextCaption\");\n/**\n * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix\n *\n * ## Alias to @see Text\n */\nexport const TextCaptionTitle = textVariant(\"caption-title\", \"TextCaptionTitle\");\n\nconst variantToHtmlTag = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n} as const;\n\nfunction textVariant(\n  variant: TextProps[\"variant\"],\n  displayName: string,\n): React.FunctionComponent<Omit<TextProps, \"variant\">> {\n  function WrappedText(props: Omit<TextProps, \"variant\">) {\n    return <Text variant={variant} as={variantToHtmlTag[variant ?? \"body\"]} {...props} />;\n  }\n  WrappedText.displayName = displayName;\n\n  return WrappedText;\n}\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;;;ADyBR,IAAAA,sBAAA;AA/GJ,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,SAAS,YAAY,MAAM,QAAQ;AAQzC,IAAM,cAAc,YAAY,YAAY,aAAa;AAQzD,IAAM,WAAW,YAAY,QAAQ,UAAU;AAQ/C,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,gBAAgB,YAAY,cAAc,eAAe;AAQ/D,IAAM,qBAAqB,YAAY,oBAAoB,oBAAoB;AAM/E,IAAM,gBAAgB,YAAY,aAAa,eAAe;AAM9D,IAAM,qBAAqB,YAAY,mBAAmB,oBAAoB;AAM9E,IAAM,cAAc,YAAY,WAAW,aAAa;AAMxD,IAAM,mBAAmB,YAAY,iBAAiB,kBAAkB;AAE/E,IAAM,mBAAmB;AAAA,EACvB,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAEA,SAAS,YACP,SACA,aACqD;AACrD,WAAS,YAAY,OAAmC;AACtD,WAAO,6CAAC,uBAAK,SAAkB,IAAI,iBAAiB,4BAAW,MAAM,KAAO,MAAO;AAAA,EACrF;AACA,cAAY,cAAc;AAE1B,SAAO;AACT;","names":["import_jsx_runtime"]}

package/dist/text/index.mjs

@@ -12,10 +12,10 @@ import {
   TextH3Title,
   TextTechnical,
   TextTechnicalTitle
-} from "../chunk-V4NGQVBQ.mjs";
+} from "../chunk-FYNTNGIY.mjs";
 import {
   Text
-} from "../chunk-LYRXA4WS.mjs";
+} from "../chunk-57SSGJ4X.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Text,

package/dist/text/text.js

@@ -53,7 +53,7 @@ __export(text_exports, {
 });
 module.exports = __toCommonJS(text_exports);
 var import_react = require("react");
-var import_typed_classname = require("@postenbring/hedwig-css/typed-classname/index.mjs");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultHTMLTag = {
   "h1-display": "h1",

package/dist/text/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/text/text.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
+{"version":3,"sources":["../../src/text/text.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface HeadingProps {\n  variant: \"h1-display\" | \"h1\" | \"h2\" | \"h3\" | \"h3-title\";\n  as: React.ElementType;\n}\ninterface ParagraphProps {\n  variant?:\n    | \"body\"\n    | \"body-title\"\n    | \"body-small\"\n    | \"body-small-title\"\n    | \"technical\"\n    | \"technical-title\"\n    | \"caption\"\n    | \"caption-title\";\n}\n\nexport type TextProps = (HeadingProps | ParagraphProps) & {\n  children: React.ReactNode;\n\n  /**\n   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.\n   *\n   * But you can lock it to either the min or the max size.\n   */\n  size?: \"min\" | \"max\" | \"fluid\";\n\n  /**\n   * 🚧 Experimental spacing\n   */\n  _unstableSpacing?: boolean;\n};\n\nconst defaultHTMLTag: Record<NonNullable<TextProps[\"variant\"]>, `h${1 | 2 | 3}` | \"p\"> = {\n  \"h1-display\": \"h1\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  \"h3-title\": \"h3\",\n  body: \"p\",\n  \"body-title\": \"p\",\n  \"body-small\": \"p\",\n  \"body-small-title\": \"p\",\n  technical: \"p\",\n  \"technical-title\": \"p\",\n  caption: \"p\",\n  \"caption-title\": \"p\",\n};\n\n/**\n * Text component\n *\n * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.\n *\n * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`\n *\n * @example\n * ```tsx\n * <Text variant=\"h1-display\" as=\"h1\">Hello world</Text>\n * <Text variant=\"body\">\n *   This is a body text\n * </Text>\n * ```\n */\nexport const Text: OverridableComponent<TextProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as,\n      variant = \"body\",\n      size = \"fluid\",\n      _unstableSpacing: spacing,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = as ?? defaultHTMLTag[variant];\n    const sizeModifier =\n      size !== \"fluid\" && variant !== \"caption\" && variant !== \"caption-title\" && size;\n    return (\n      <Component\n        className={clsx(\n          `hds-text-${variant}`,\n          sizeModifier && `hds-text--${sizeModifier}`,\n          spacing && \"hds-text--spacing\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nText.displayName = \"Text\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,6BAAqB;AAmFf;AAhDN,IAAM,iBAAmF;AAAA,EACvF,cAAc;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,iBAAiB;AACnB;AAiBO,IAAM,WAAwD;AAAA,EACnE,CACE,IASA,QACG;AAVH,iBACE;AAAA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IA3EN,IAqEI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,kBAAM,eAAe,OAAO;AAC9C,UAAM,eACJ,SAAS,WAAW,YAAY,aAAa,YAAY,mBAAmB;AAC9E,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,gBAAgB,aAAa,YAAY;AAAA,UACzC,WAAW;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/text/text.mjs

@@ -1,6 +1,6 @@
 import {
   Text
-} from "../chunk-LYRXA4WS.mjs";
+} from "../chunk-57SSGJ4X.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Text