@mattilsynet/design 1.3.0 → 1.3.1

package/mtds/styles.json

@@ -1,41 +1,42 @@
 {
-  "alert": "_alert_1ib74_1 _ds-alert_1efle_1",
-  "app": "_app_1ib74_1",
-  "sticky": "_sticky_1ib74_1",
-  "avatar": "_avatar_1ib74_1 _ds-avatar_1efle_1",
-  "badge": "_badge_1ib74_1",
-  "breadcrumbs": "_breadcrumbs_1ib74_1 _ds-breadcrumbs_1efle_1",
-  "button": "_button_1ib74_1 _ds-button_1efle_1",
-  "card": "_card_1ib74_1",
-  "group": "_group_1ib74_1",
-  "chip": "_chip_1ib74_1 _ds-chip_1efle_1",
-  "details": "_details_1ib74_1 _ds-details_1efle_1",
-  "dialog": "_dialog_1ib74_1 _ds-dialog_1efle_1",
-  "divider": "_divider_1ib74_1",
-  "errorsummary": "_errorsummary_1ib74_1 _ds-error-summary_1efle_1",
-  "field": "_field_1ib74_1 _ds-field_1efle_1",
-  "affixes": "_affixes_1ib74_1 _ds-field-affixes_1efle_1",
-  "fieldset": "_fieldset_1ib74_1 _ds-fieldset_1efle_1",
-  "heading": "_heading_1ib74_1 _ds-heading_1efle_1",
-  "ingress": "_ingress_1ib74_1",
-  "muted": "_muted_1ib74_1",
-  "info": "_info_1ib74_1",
-  "prose": "_prose_1ib74_1",
-  "helptext": "_helptext_1ib74_1 _ds-focus_1efle_1",
-  "input": "_input_1ib74_1 _ds-input_1efle_1",
-  "grid": "_grid_1ib74_1",
-  "flex": "_flex_1ib74_1",
-  "link": "_link_1ib74_1",
-  "logo": "_logo_1ib74_1",
-  "pagination": "_pagination_1ib74_1 _ds-pagination_1efle_1",
-  "popover": "_popover_1ib74_1",
-  "progress": "_progress_1ib74_1",
-  "skeleton": "_skeleton_1ib74_1 _ds-skeleton_1efle_1",
-  "spinner": "_spinner_1ib74_1",
-  "table": "_table_1ib74_1 _ds-table_1efle_1",
-  "tabs": "_tabs_1ib74_1 _ds-tabs_1efle_1",
-  "tag": "_tag_1ib74_1 _ds-tag_1efle_1",
-  "togglegroup": "_togglegroup_1ib74_1",
-  "validation": "_validation_1ib74_1 _ds-validation-message_1efle_1",
-  "body": "_body_1ib74_150"
+  "alert": "_alert_ip922_1 _ds-alert_1efle_1",
+  "app": "_app_ip922_1",
+  "sticky": "_sticky_ip922_1",
+  "avatar": "_avatar_ip922_1 _ds-avatar_1efle_1",
+  "badge": "_badge_ip922_1",
+  "breadcrumbs": "_breadcrumbs_ip922_1 _ds-breadcrumbs_1efle_1",
+  "button": "_button_ip922_1 _ds-button_1efle_1",
+  "card": "_card_ip922_1",
+  "group": "_group_ip922_1",
+  "chip": "_chip_ip922_1 _ds-chip_1efle_1",
+  "details": "_details_ip922_1 _ds-details_1efle_1",
+  "dialog": "_dialog_ip922_1 _ds-dialog_1efle_1",
+  "divider": "_divider_ip922_1",
+  "errorsummary": "_errorsummary_ip922_1 _ds-error-summary_1efle_1",
+  "field": "_field_ip922_1 _ds-field_1efle_1",
+  "affixes": "_affixes_ip922_1 _ds-field-affixes_1efle_1",
+  "fieldset": "_fieldset_ip922_1 _ds-fieldset_1efle_1",
+  "heading": "_heading_ip922_1 _ds-heading_1efle_1",
+  "ingress": "_ingress_ip922_1",
+  "muted": "_muted_ip922_1",
+  "info": "_info_ip922_1",
+  "prose": "_prose_ip922_1",
+  "helptext": "_helptext_ip922_1 _ds-focus_1efle_1",
+  "input": "_input_ip922_1 _ds-input_1efle_1",
+  "grid": "_grid_ip922_1",
+  "flex": "_flex_ip922_1",
+  "link": "_link_ip922_1",
+  "logo": "_logo_ip922_1",
+  "pagination": "_pagination_ip922_1 _ds-pagination_1efle_1",
+  "popover": "_popover_ip922_1",
+  "progress": "_progress_ip922_1",
+  "skeleton": "_skeleton_ip922_1 _ds-skeleton_1efle_1",
+  "spinner": "_spinner_ip922_1",
+  "steps": "_steps_ip922_1",
+  "table": "_table_ip922_1 _ds-table_1efle_1",
+  "tabs": "_tabs_ip922_1 _ds-tabs_1efle_1",
+  "tag": "_tag_ip922_1 _ds-tag_1efle_1",
+  "togglegroup": "_togglegroup_ip922_1",
+  "validation": "_validation_ip922_1 _ds-validation-message_1efle_1",
+  "body": "_body_ip922_153"
 }

package/mtds/styles.module.css.js

@@ -1,4 +1,4 @@
-const _ = "_alert_1ib74_1 _ds-alert_1efle_1", e = "_app_1ib74_1", s = "_sticky_1ib74_1", t = "_avatar_1ib74_1 _ds-avatar_1efle_1", i = "_badge_1ib74_1", o = "_breadcrumbs_1ib74_1 _ds-breadcrumbs_1efle_1", n = "_button_1ib74_1 _ds-button_1efle_1", a = "_card_1ib74_1", l = "_group_1ib74_1", r = "_chip_1ib74_1 _ds-chip_1efle_1", d = "_details_1ib74_1 _ds-details_1efle_1", b = "_dialog_1ib74_1 _ds-dialog_1efle_1", c = "_divider_1ib74_1", p = "_errorsummary_1ib74_1 _ds-error-summary_1efle_1", f = "__errorsummary_1ib74_1", g = "_field_1ib74_1 _ds-field_1efle_1", u = "_affixes_1ib74_1 _ds-field-affixes_1efle_1", m = "_fieldset_1ib74_1 _ds-fieldset_1efle_1", k = "_heading_1ib74_1 _ds-heading_1efle_1", h = "_ingress_1ib74_1", v = "_muted_1ib74_1", y = "_info_1ib74_1", x = "_prose_1ib74_1", w = "_helptext_1ib74_1 _ds-focus_1efle_1", M = "_input_1ib74_1 _ds-input_1efle_1", S = "_grid_1ib74_1", j = "_flex_1ib74_1", q = "_link_1ib74_1", z = "_logo_1ib74_1", A = "_pagination_1ib74_1 _ds-pagination_1efle_1", B = "_popover_1ib74_1", C = "_progress_1ib74_1", D = "__indeterminate_1ib74_1", E = "_skeleton_1ib74_1 _ds-skeleton_1efle_1", F = "__skeleton_1ib74_1", G = "_spinner_1ib74_1", H = "_table_1ib74_1 _ds-table_1efle_1", I = "__scrollShadow_1ib74_1", J = "_tabs_1ib74_1 _ds-tabs_1efle_1", K = "__scrollMask_1ib74_1", L = "_tag_1ib74_1 _ds-tag_1efle_1", N = "_togglegroup_1ib74_1", O = "__tooltip_1ib74_1", P = "_validation_1ib74_1 _ds-validation-message_1efle_1", Q = "_body_1ib74_150", R = {
+const _ = "_alert_ip922_1 _ds-alert_1efle_1", e = "_app_ip922_1", s = "_sticky_ip922_1", t = "_avatar_ip922_1 _ds-avatar_1efle_1", i = "_badge_ip922_1", o = "_breadcrumbs_ip922_1 _ds-breadcrumbs_1efle_1", n = "_button_ip922_1 _ds-button_1efle_1", p = "_card_ip922_1", a = "_group_ip922_1", l = "_chip_ip922_1 _ds-chip_1efle_1", r = "_details_ip922_1 _ds-details_1efle_1", d = "_dialog_ip922_1 _ds-dialog_1efle_1", c = "_divider_ip922_1", f = "_errorsummary_ip922_1 _ds-error-summary_1efle_1", g = "__errorsummary_ip922_1", u = "_field_ip922_1 _ds-field_1efle_1", b = "_affixes_ip922_1 _ds-field-affixes_1efle_1", m = "_fieldset_ip922_1 _ds-fieldset_1efle_1", k = "_heading_ip922_1 _ds-heading_1efle_1", h = "_ingress_ip922_1", v = "_muted_ip922_1", y = "_info_ip922_1", x = "_prose_ip922_1", w = "_helptext_ip922_1 _ds-focus_1efle_1", M = "_input_ip922_1 _ds-input_1efle_1", S = "_grid_ip922_1", j = "_flex_ip922_1", q = "_link_ip922_1", z = "_logo_ip922_1", A = "_pagination_ip922_1 _ds-pagination_1efle_1", B = "_popover_ip922_1", C = "_progress_ip922_1", D = "__indeterminate_ip922_1", E = "_skeleton_ip922_1 _ds-skeleton_1efle_1", F = "__skeleton_ip922_1", G = "_spinner_ip922_1", H = "_steps_ip922_1", I = "_table_ip922_1 _ds-table_1efle_1", J = "__scrollShadow_ip922_1", K = "_tabs_ip922_1 _ds-tabs_1efle_1", L = "__scrollMask_ip922_1", N = "_tag_ip922_1 _ds-tag_1efle_1", O = "_togglegroup_ip922_1", P = "__tooltip_ip922_1", Q = "_validation_ip922_1 _ds-validation-message_1efle_1", R = "_body_ip922_153", T = {
   alert: _,
   app: e,
   sticky: s,
@@ -6,16 +6,16 @@ const _ = "_alert_1ib74_1 _ds-alert_1efle_1", e = "_app_1ib74_1", s = "_sticky_1
   badge: i,
   breadcrumbs: o,
   button: n,
-  card: a,
-  group: l,
-  chip: r,
-  details: d,
-  dialog: b,
+  card: p,
+  group: a,
+  chip: l,
+  details: r,
+  dialog: d,
   divider: c,
-  errorsummary: p,
-  _errorsummary: f,
-  field: g,
-  affixes: u,
+  errorsummary: f,
+  _errorsummary: g,
+  field: u,
+  affixes: b,
   fieldset: m,
   heading: k,
   ingress: h,
@@ -35,43 +35,44 @@ const _ = "_alert_1ib74_1 _ds-alert_1efle_1", e = "_app_1ib74_1", s = "_sticky_1
   skeleton: E,
   _skeleton: F,
   spinner: G,
-  table: H,
-  _scrollShadow: I,
-  tabs: J,
-  _scrollMask: K,
-  tag: L,
-  togglegroup: N,
-  _tooltip: O,
-  validation: P,
-  body: Q
+  steps: H,
+  table: I,
+  _scrollShadow: J,
+  tabs: K,
+  _scrollMask: L,
+  tag: N,
+  togglegroup: O,
+  _tooltip: P,
+  validation: Q,
+  body: R
 };
 export {
-  f as _errorsummary,
+  g as _errorsummary,
   D as _indeterminate,
-  K as _scrollMask,
-  I as _scrollShadow,
+  L as _scrollMask,
+  J as _scrollShadow,
   F as _skeleton,
-  O as _tooltip,
-  u as affixes,
+  P as _tooltip,
+  b as affixes,
   _ as alert,
   e as app,
   t as avatar,
   i as badge,
-  Q as body,
+  R as body,
   o as breadcrumbs,
   n as button,
-  a as card,
-  r as chip,
-  R as default,
-  d as details,
-  b as dialog,
+  p as card,
+  l as chip,
+  T as default,
+  r as details,
+  d as dialog,
   c as divider,
-  p as errorsummary,
-  g as field,
+  f as errorsummary,
+  u as field,
   m as fieldset,
   j as flex,
   S as grid,
-  l as group,
+  a as group,
   k as heading,
   w as helptext,
   y as info,
@@ -86,11 +87,12 @@ export {
   x as prose,
   E as skeleton,
   G as spinner,
+  H as steps,
   s as sticky,
-  H as table,
-  J as tabs,
-  L as tag,
-  N as togglegroup,
-  P as validation
+  I as table,
+  K as tabs,
+  N as tag,
+  O as togglegroup,
+  Q as validation
 };
 //# sourceMappingURL=styles.module.css.js.map

package/mtds/styles.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/mtds/table/table.stories.d.ts

@@ -1,7 +1,7 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/mtds/tabs/tabs.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
 };
@@ -7,3 +7,5 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
 export declare const Sizes: Story;
+export declare const WithCardPanels: Story;
+export declare const ReactWithCardPanels: Story;

package/mtds/tag/tag.stories.d.ts

@@ -1,7 +1,7 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/mtds/togglegroup/togglegroup.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
 };

package/mtds/tooltip/tooltip.stories.d.ts

@@ -1,7 +1,7 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/mtds/typography/typography.d.ts

@@ -3,6 +3,7 @@ import { PolymorphicComponentPropWithRef } from '../react-types';
 export type HeadingSizes = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type HeadingProps<As extends React.ElementType = "h2"> = PolymorphicComponentPropWithRef<As, {
     "data-size"?: HeadingSizes;
+    "data-justify"?: "start" | "center";
 }>;
 type HeadingComponent = <As extends React.ElementType = "h2">(props: HeadingProps<As>) => JSX.Element;
 export declare const Heading: HeadingComponent;

package/mtds/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-size\"?: HeadingSizes }>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype InfoComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Info: InfoComponent = forwardRef<null>(function Info<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: InfoProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn <Tag className={clsx(styles.info, className)} ref={ref} {...rest} />;\n}) as InfoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles","Muted","Ingress","Info"],"mappings":";;;;AAgBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC,EAHWJ,KAAM,MAGZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC,GASYK,IAAwBR,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAEhE,SAAA,gBAAAC,EADKJ,KAAM,SACN,EAAA,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GASYM,IAA4BT,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAGxE,SAAA,gBAAAC,EAFWJ,KAAM,QAEZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC,GASYO,IAAsBV,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAkBC,GAA0B;AAE/D,SAAA,gBAAAC,EADKJ,KAAM,QACN,EAAA,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}
+{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: HeadingSizes;\n\t\t\t\"data-justify\"?: \"start\" | \"center\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype InfoComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Info: InfoComponent = forwardRef<null>(function Info<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: InfoProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn <Tag className={clsx(styles.info, className)} ref={ref} {...rest} />;\n}) as InfoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles","Muted","Ingress","Info"],"mappings":";;;;AAsBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC,EAHWJ,KAAM,MAGZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC,GASYK,IAAwBR,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAEhE,SAAA,gBAAAC,EADKJ,KAAM,SACN,EAAA,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GASYM,IAA4BT,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAGxE,SAAA,gBAAAC,EAFWJ,KAAM,QAEZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC,GASYO,IAAsBV,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAkBC,GAA0B;AAE/D,SAAA,gBAAAC,EADKJ,KAAM,QACN,EAAA,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}

package/mtds/typography/typography.stories.d.ts

@@ -1,7 +1,7 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/mtds/validation/validation.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
@@ -44,15 +44,9 @@
 		"@digdir/designsystemet-css": "^1.0.6",
 		"@phosphor-icons/core": "^2.1.1",
 		"@phosphor-icons/react": "^2.1.8",
-		"@storybook/addon-essentials": "^8.6.14",
-		"@storybook/addon-mdx-gfm": "^8.6.14",
-		"@storybook/addon-storysource": "^8.6.14",
-		"@storybook/addon-themes": "^8.6.14",
-		"@storybook/blocks": "^8.6.14",
-		"@storybook/manager-api": "^8.6.14",
-		"@storybook/react": "^8.6.14",
-		"@storybook/react-vite": "^8.6.14",
-		"@storybook/theming": "^8.6.14",
+		"@storybook/addon-docs": "^9.0.6",
+		"@storybook/addon-themes": "^9.0.6",
+		"@storybook/react-vite": "^9.0.6",
 		"@tanstack/react-table": "^8.21.3",
 		"@types/node": "^22.15.19",
 		"@types/react": "^19.1.4",
@@ -63,18 +57,20 @@
 		"postcss-nesting": "^13.0.1",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
-		"storybook": "^8.6.14",
-		"svg2png-converter": "^1.0.2",
+		"storybook": "^9.0.6",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.5",
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"dependencies": {
-		"@u-elements/u-combobox": "^0.0.9",
-		"@u-elements/u-datalist": "^1.0.5",
+		"@u-elements/u-combobox": "^0.0.12",
+		"@u-elements/u-datalist": "^1.0.6",
 		"@u-elements/u-details": "^0.1.1",
 		"@u-elements/u-progress": "^0.0.5",
 		"@u-elements/u-tabs": "^0.0.9",
 		"clsx": "^2.1.1"
+	},
+	"overrides": {
+		"storybook": "$storybook"
 	}
 }