@mattilsynet/design 0.4.0 → 0.5.0

package/mtds/alert/alert.d.ts

@@ -1,6 +1,8 @@
 import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
-export type AlertProps<As extends React.ElementType = "output"> = PolymorphicComponentPropWithRef<As>;
+export type AlertProps<As extends React.ElementType = "output"> = PolymorphicComponentPropWithRef<As, {
+    "data-color"?: "info" | "success" | "warning" | "danger";
+}>;
 type AlertComponent = <As extends React.ElementType = "output">(props: AlertProps<As>) => JSX.Element;
 export declare const Alert: AlertComponent;
 export {};

package/mtds/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../designsystem/alert/alert.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 AlertProps<As extends React.ElementType = \"output\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AlertComponent = <As extends React.ElementType = \"output\">(\n\tprops: AlertProps<As>,\n) => JSX.Element;\n\nexport const Alert: AlertComponent = forwardRef<null>(function Alert<\n\tAs extends React.ElementType = \"output\",\n>({ as, className, ...rest }: AlertProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"output\";\n\n\tif (!rest.role && Tag !== \"output\") Object.assign(rest, { role: \"alert\" }); // Ensure role is set to 'alert' if not <output>\n\n\treturn <Tag className={clsx(styles.alert, className)} ref={ref} {...rest} />;\n}) as AlertComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Alert","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAea,MAAAA,IAAwBC,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAEd,SAAA,CAACE,EAAK,QAAQE,MAAQ,YAAiB,OAAA,OAAOF,GAAM,EAAE,MAAM,QAAA,CAAS,GAElE,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC;"}
+{"version":3,"file":"alert.js","sources":["../../designsystem/alert/alert.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 AlertProps<As extends React.ElementType = \"output\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-color\"?: \"info\" | \"success\" | \"warning\" | \"danger\";\n\t\t}\n\t>;\n\ntype AlertComponent = <As extends React.ElementType = \"output\">(\n\tprops: AlertProps<As>,\n) => JSX.Element;\n\nexport const Alert: AlertComponent = forwardRef<null>(function Alert<\n\tAs extends React.ElementType = \"output\",\n>({ as, className, ...rest }: AlertProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"output\";\n\n\tif (!rest.role && Tag !== \"output\") Object.assign(rest, { role: \"alert\" }); // Ensure role is set to 'alert' if not <output>\n\n\treturn <Tag className={clsx(styles.alert, className)} ref={ref} {...rest} />;\n}) as AlertComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Alert","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAoBa,MAAAA,IAAwBC,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAEd,SAAA,CAACE,EAAK,QAAQE,MAAQ,YAAiB,OAAA,OAAOF,GAAM,EAAE,MAAM,QAAA,CAAS,GAElE,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC;"}

package/mtds/alert/alert.stories.d.ts

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

package/mtds/avatar/avatar.stories.d.ts

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

package/mtds/badge/badge.d.ts

@@ -1,2 +1,6 @@
-export type BadgeProps = React.ComponentPropsWithoutRef<"span">;
-export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & {
+    "data-badge"?: string | number;
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    "data-badge"?: string | number;
+} & React.RefAttributes<HTMLSpanElement>>;

package/mtds/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../designsystem/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type BadgeProps = React.ComponentPropsWithoutRef<\"span\">;\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <span className={clsx(styles.badge, className)} ref={ref} {...rest} />;\n});\n"],"names":["Badge","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMa,MAAAA,IAAQC,EAAwC,SAC5D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC;"}
+{"version":3,"file":"badge.js","sources":["../../designsystem/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type BadgeProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-badge\"?: string | number;\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <span className={clsx(styles.badge, className)} ref={ref} {...rest} />;\n});\n"],"names":["Badge","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQa,MAAAA,IAAQC,EAAwC,SAC5D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC;"}

package/mtds/badge/badge.stories.d.ts

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

package/mtds/breadcrumbs/breadcrumbs.js

@@ -1,29 +1,24 @@
-import { jsx as f } from "react/jsx-runtime";
-import { clsx as b } from "../external/clsx/dist/clsx.js";
-import { forwardRef as p, useRef as A, useImperativeHandle as a, useEffect as s } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as f } from "../external/clsx/dist/clsx.js";
+import { forwardRef as i, useRef as u, useImperativeHandle as p, useEffect as b } from "react";
 import d from "../styles.module.css.js";
-const E = p(
-  function({ as: i, className: u, ...o }, c) {
-    const t = A(null), l = i || "nav";
-    return a(c, () => t.current), s(() => {
-      if (t.current instanceof HTMLElement) {
-        const e = t.current.querySelectorAll("li > :is(a,button)"), n = e[e.length - 1];
-        for (const r of e)
-          r[r === n ? "setAttribute" : "removeAttribute"]("aria-current", "page");
+import { attr as g } from "../utils.js";
+const E = i(
+  function({ as: o, className: a, ...t }, s) {
+    const r = u(null), c = o || "nav";
+    return p(s, () => r.current), b(() => {
+      if (r.current instanceof HTMLElement) {
+        const e = r.current.querySelectorAll("li > :is(a,button)"), l = e[e.length - 1];
+        for (const n of e)
+          g(n, "aria-current", n === l ? "page" : null);
       }
-    }), a(c, () => t.current), s(() => {
-      if (t.current instanceof HTMLElement) {
-        const e = t.current.querySelectorAll("li > :is(a,button)"), n = e[e.length - 1];
-        for (const r of e)
-          r[r === n ? "setAttribute" : "removeAttribute"]("aria-current", "page");
-      }
-    }), /* @__PURE__ */ f(
-      l,
+    }), /* @__PURE__ */ m(
+      c,
       {
-        "aria-label": o["aria-label"] || "Du er her:",
-        className: b(d.breadcrumbs, u),
-        ref: t,
-        ...o
+        "aria-label": t["aria-label"] || "Du er her:",
+        className: f(d.breadcrumbs, a),
+        ref: r,
+        ...t
       }
     );
   }

package/mtds/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../designsystem/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n\ttype JSX,\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type BreadcrumbsProps<As extends React.ElementType = \"nav\"> =\n\tPolymorphicComponentPropWithRef<As, { \"aria-label\"?: string }>;\n\ntype BreadcrumbsComponent = <As extends React.ElementType = \"nav\">(\n\tprops: BreadcrumbsProps<As>,\n) => JSX.Element;\n\nexport const Breadcrumbs: BreadcrumbsComponent = forwardRef<null>(\n\tfunction Breadcrumbs<As extends React.ElementType = \"nav\">(\n\t\t{ as, className, ...rest }: BreadcrumbsProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst innerRef = useRef<As>(null);\n\t\tconst Tag = as || \"nav\";\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as As); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current instanceof HTMLElement) {\n\t\t\t\tconst items = innerRef.current.querySelectorAll(\"li > :is(a,button)\");\n\t\t\t\tconst last = items[items.length - 1];\n\n\t\t\t\tfor (const item of items) {\n\t\t\t\t\tconst action = item === last ? \"setAttribute\" : \"removeAttribute\";\n\t\t\t\t\titem[action](\"aria-current\", \"page\");\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tuseImperativeHandle(ref, () => innerRef.current as As); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current instanceof HTMLElement) {\n\t\t\t\tconst items = innerRef.current.querySelectorAll(\"li > :is(a,button)\");\n\t\t\t\tconst last = items[items.length - 1];\n\n\t\t\t\tfor (const item of items) {\n\t\t\t\t\tconst action = item === last ? \"setAttribute\" : \"removeAttribute\";\n\t\t\t\t\titem[action](\"aria-current\", \"page\");\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Du er her:\"}\n\t\t\t\tclassName={clsx(styles.breadcrumbs, className)}\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n) as BreadcrumbsComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Breadcrumbs","forwardRef","as","className","rest","ref","innerRef","useRef","Tag","useImperativeHandle","useEffect","items","last","item","jsx","clsx","styles"],"mappings":";;;;AAqBO,MAAMA,IAAoCC;AAAA,EAChD,SACC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,KACpBC,GACC;AACK,UAAAC,IAAWC,EAAW,IAAI,GAC1BC,IAAMN,KAAM;AAEE,WAAAO,EAAAJ,GAAK,MAAMC,EAAS,OAAa,GACrDI,EAAU,MAAM;AACX,UAAAJ,EAAS,mBAAmB,aAAa;AAC5C,cAAMK,IAAQL,EAAS,QAAQ,iBAAiB,oBAAoB,GAC9DM,IAAOD,EAAMA,EAAM,SAAS,CAAC;AAEnC,mBAAWE,KAAQF;AAEb,UAAAE,EADUA,MAASD,IAAO,iBAAiB,iBACrC,EAAE,gBAAgB,MAAM;AAAA,MACpC;AAAA,IACD,CACA,GACmBH,EAAAJ,GAAK,MAAMC,EAAS,OAAa,GACrDI,EAAU,MAAM;AACX,UAAAJ,EAAS,mBAAmB,aAAa;AAC5C,cAAMK,IAAQL,EAAS,QAAQ,iBAAiB,oBAAoB,GAC9DM,IAAOD,EAAMA,EAAM,SAAS,CAAC;AAEnC,mBAAWE,KAAQF;AAEb,UAAAE,EADUA,MAASD,IAAO,iBAAiB,iBACrC,EAAE,gBAAgB,MAAM;AAAA,MACpC;AAAA,IACD,CACA,GAGA,gBAAAE;AAAA,MAACN;AAAA,MAAA;AAAA,QACA,cAAYJ,EAAK,YAAY,KAAK;AAAA,QAClC,WAAWW,EAAKC,EAAO,aAAab,CAAS;AAAA,QAC7C,KAAKG;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../designsystem/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n\ttype JSX,\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { attr } from \"../utils\";\n\nexport type BreadcrumbsProps<As extends React.ElementType = \"nav\"> =\n\tPolymorphicComponentPropWithRef<As, { \"aria-label\"?: string }>;\n\ntype BreadcrumbsComponent = <As extends React.ElementType = \"nav\">(\n\tprops: BreadcrumbsProps<As>,\n) => JSX.Element;\n\nexport const Breadcrumbs: BreadcrumbsComponent = forwardRef<null>(\n\tfunction Breadcrumbs<As extends React.ElementType = \"nav\">(\n\t\t{ as, className, ...rest }: BreadcrumbsProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst innerRef = useRef<As>(null);\n\t\tconst Tag = as || \"nav\";\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as As); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current instanceof HTMLElement) {\n\t\t\t\tconst items = innerRef.current.querySelectorAll(\"li > :is(a,button)\");\n\t\t\t\tconst last = items[items.length - 1];\n\n\t\t\t\tfor (const item of items)\n\t\t\t\t\tattr(item, \"aria-current\", item === last ? \"page\" : null);\n\t\t\t}\n\t\t});\n\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\taria-label={rest[\"aria-label\"] || \"Du er her:\"}\n\t\t\t\tclassName={clsx(styles.breadcrumbs, className)}\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n) as BreadcrumbsComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Breadcrumbs","forwardRef","as","className","rest","ref","innerRef","useRef","Tag","useImperativeHandle","useEffect","items","last","item","attr","jsx","clsx","styles"],"mappings":";;;;;AAsBO,MAAMA,IAAoCC;AAAA,EAChD,SACC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,KACpBC,GACC;AACK,UAAAC,IAAWC,EAAW,IAAI,GAC1BC,IAAMN,KAAM;AAEE,WAAAO,EAAAJ,GAAK,MAAMC,EAAS,OAAa,GACrDI,EAAU,MAAM;AACX,UAAAJ,EAAS,mBAAmB,aAAa;AAC5C,cAAMK,IAAQL,EAAS,QAAQ,iBAAiB,oBAAoB,GAC9DM,IAAOD,EAAMA,EAAM,SAAS,CAAC;AAEnC,mBAAWE,KAAQF;AAClB,UAAAG,EAAKD,GAAM,gBAAgBA,MAASD,IAAO,SAAS,IAAI;AAAA,MAAA;AAAA,IAC1D,CACA,GAGA,gBAAAG;AAAA,MAACP;AAAA,MAAA;AAAA,QACA,cAAYJ,EAAK,YAAY,KAAK;AAAA,QAClC,WAAWY,EAAKC,EAAO,aAAad,CAAS;AAAA,QAC7C,KAAKG;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}

package/mtds/breadcrumbs/breadcrumbs.stories.d.ts

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

package/mtds/button/button.d.ts

@@ -1,6 +1,10 @@
 import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 type ButtonBaseProps<Href> = {
+    "data-arrow"?: "left" | "right" | true;
+    "data-color"?: "accent" | "danger";
+    "data-nowrap"?: boolean;
+    "data-variant"?: "primary" | "secondary" | "tertiary";
     href?: Href;
 };
 export type ButtonProps<Href, As extends React.ElementType = Href extends string ? "a" : "button"> = PolymorphicComponentPropWithRef<As, ButtonBaseProps<Href>>;

package/mtds/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../designsystem/button/button.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\ntype ButtonBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type ButtonProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n> = PolymorphicComponentPropWithRef<As, ButtonBaseProps<Href>>;\n\ntype ButtonComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\tprops: ButtonProps<Href, As>,\n) => JSX.Element;\n\nexport const Button: ButtonComponent = forwardRef<null>(function Button<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>({ as, className, ...rest }: ButtonProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"button\");\n\n\treturn <Tag className={clsx(styles.button, className)} ref={ref} {...rest} />;\n}) as ButtonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Button","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAwBa,MAAAA,IAA0BC,EAAiB,SAGtD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAA0BC,GAA0B;AAC9E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,QAAQN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC;"}
+{"version":3,"file":"button.js","sources":["../../designsystem/button/button.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\ntype ButtonBaseProps<Href> = {\n\t\"data-arrow\"?: \"left\" | \"right\" | true;\n\t\"data-color\"?: \"accent\" | \"danger\";\n\t\"data-nowrap\"?: boolean;\n\t\"data-variant\"?: \"primary\" | \"secondary\" | \"tertiary\";\n\thref?: Href;\n};\n\nexport type ButtonProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n> = PolymorphicComponentPropWithRef<As, ButtonBaseProps<Href>>;\n\ntype ButtonComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>(\n\tprops: ButtonProps<Href, As>,\n) => JSX.Element;\n\nexport const Button: ButtonComponent = forwardRef<null>(function Button<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"button\",\n>({ as, className, ...rest }: ButtonProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"button\");\n\n\treturn <Tag className={clsx(styles.button, className)} ref={ref} {...rest} />;\n}) as ButtonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Button","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AA4Ba,MAAAA,IAA0BC,EAAiB,SAGtD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAA0BC,GAA0B;AAC9E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,QAAQN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC;"}

package/mtds/button/button.stories.d.ts

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

package/mtds/card/card.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
@@ -12,6 +12,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
-export declare const Sizes: Story;
 export declare const AsLink: Story;
 export declare const Tableish: Story;

package/mtds/chip/chip.d.ts

@@ -1,2 +1,10 @@
-export type ChipProps = React.ComponentPropsWithoutRef<"label">;
-export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+import { JSX } from 'react';
+import { PolymorphicComponentPropWithRef } from '../react-types';
+type ChipBaseProps<Removable> = {
+    href?: Removable;
+    "data-removable"?: boolean;
+};
+export type ChipProps<Removable, As extends React.ElementType = Removable extends true ? "button" : "label"> = PolymorphicComponentPropWithRef<As, ChipBaseProps<Removable>>;
+type ChipComponent = <Removable, As extends React.ElementType = Removable extends true ? "button" : "label">(props: ChipProps<Removable, As>) => JSX.Element;
+export declare const Chip: ChipComponent;
+export {};

package/mtds/chip/chip.js

@@ -1,11 +1,12 @@
-import { jsx as t } from "react/jsx-runtime";
-import { clsx as i } from "../external/clsx/dist/clsx.js";
-import { forwardRef as p } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as p } from "../external/clsx/dist/clsx.js";
+import { forwardRef as e } from "react";
 import f from "../styles.module.css.js";
-const n = p(function({ className: r, ...o }, m) {
-  return /* @__PURE__ */ t("label", { className: i(f.chip, r), ref: m, ...o });
+const h = e(function({ as: r, className: t, ...o }, m) {
+  const a = r || (o["data-removable"] ? "button" : "label");
+  return /* @__PURE__ */ i(a, { className: p(f.chip, t), ref: m, ...o });
 });
 export {
-  n as Chip
+  h as Chip
 };
 //# sourceMappingURL=chip.js.map

package/mtds/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../designsystem/chip/chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type ChipProps = React.ComponentPropsWithoutRef<\"label\">;\n\nexport const Chip = forwardRef<HTMLLabelElement, ChipProps>(function Chip(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <label className={clsx(styles.chip, className)} ref={ref} {...rest} />;\n});\n"],"names":["Chip","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMa,MAAAA,IAAOC,EAAwC,SAC3D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWC,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../designsystem/chip/chip.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\ntype ChipBaseProps<Removable> = {\n\thref?: Removable;\n\t\"data-removable\"?: boolean;\n};\n\nexport type ChipProps<\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n> = PolymorphicComponentPropWithRef<As, ChipBaseProps<Removable>>;\n\ntype ChipComponent = <\n\tRemovable,\n\tAs extends React.ElementType = Removable extends true ? \"button\" : \"label\",\n>(\n\tprops: ChipProps<Removable, As>,\n) => JSX.Element;\n\nexport const Chip: ChipComponent = forwardRef<null>(function Chip<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: ChipProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest[\"data-removable\"] ? \"button\" : \"label\");\n\n\treturn <Tag className={clsx(styles.chip, className)} ref={ref} {...rest} />;\n}) as ChipComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Chip","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAyBa,MAAAA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,gBAAgB,IAAI,WAAW;AAEhD,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}

package/mtds/chip/chip.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
@@ -10,3 +10,4 @@ type Story = StoryObj<typeof meta>;
 export declare const React: Story;
 export declare const Radio: Story;
 export declare const Checkbox: Story;
+export declare const Removable: Story;

package/mtds/dialog/dialog.d.ts

@@ -1,6 +1,8 @@
 export type DialogProps = React.ComponentPropsWithoutRef<"dialog"> & {
+    "data-closedby"?: "any" | "closerequest";
     modal: boolean;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & {
+    "data-closedby"?: "any" | "closerequest";
     modal: boolean;
 } & React.RefAttributes<HTMLDialogElement>>;

package/mtds/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../designsystem/dialog/dialog.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DialogProps = React.ComponentPropsWithoutRef<\"dialog\"> & {\n\tmodal: boolean;\n};\n\nexport const Dialog = forwardRef<HTMLDialogElement, DialogProps>(\n\tfunction Dialog({ className, open, modal, ...rest }, ref) {\n\t\tconst innerRef = useRef<HTMLDialogElement>(null);\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as HTMLDialogElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst action = open ? (modal ? \"showModal\" : \"show\") : \"close\";\n\t\t\tinnerRef.current?.[action]();\n\t\t}, [open, modal]);\n\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclassName={clsx(styles.dialog, className)}\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Dialog","forwardRef","className","open","modal","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","action","_a","jsx","clsx","styles"],"mappings":";;;;AAQO,MAAMA,IAASC;AAAA,EACrB,SAAgB,EAAE,WAAAC,GAAW,MAAAC,GAAM,OAAAC,GAAO,GAAGC,EAAK,GAAGC,GAAK;AACnD,UAAAC,IAAWC,EAA0B,IAAI;AAE3B,WAAAC,EAAAH,GAAK,MAAMC,EAAS,OAA4B,GACpEG,EAAU,MAAM;;AACf,YAAMC,IAASR,IAAQC,IAAQ,cAAc,SAAU;AAC9C,OAAAQ,IAAAL,EAAA,YAAA,QAAAK,EAAUD;AAAA,IAAQ,GACzB,CAACR,GAAMC,CAAK,CAAC,GAGf,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,QAAQb,CAAS;AAAA,QACxC,KAAKK;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"dialog.js","sources":["../../designsystem/dialog/dialog.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DialogProps = React.ComponentPropsWithoutRef<\"dialog\"> & {\n\t\"data-closedby\"?: \"any\" | \"closerequest\";\n\tmodal: boolean;\n};\n\nexport const Dialog = forwardRef<HTMLDialogElement, DialogProps>(\n\tfunction Dialog({ className, open, modal, ...rest }, ref) {\n\t\tconst innerRef = useRef<HTMLDialogElement>(null);\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as HTMLDialogElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst action = open ? (modal ? \"showModal\" : \"show\") : \"close\";\n\t\t\tinnerRef.current?.[action]();\n\t\t}, [open, modal]);\n\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclassName={clsx(styles.dialog, className)}\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Dialog","forwardRef","className","open","modal","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","action","_a","jsx","clsx","styles"],"mappings":";;;;AASO,MAAMA,IAASC;AAAA,EACrB,SAAgB,EAAE,WAAAC,GAAW,MAAAC,GAAM,OAAAC,GAAO,GAAGC,EAAK,GAAGC,GAAK;AACnD,UAAAC,IAAWC,EAA0B,IAAI;AAE3B,WAAAC,EAAAH,GAAK,MAAMC,EAAS,OAA4B,GACpEG,EAAU,MAAM;;AACf,YAAMC,IAASR,IAAQC,IAAQ,cAAc,SAAU;AAC9C,OAAAQ,IAAAL,EAAA,YAAA,QAAAK,EAAUD;AAAA,IAAQ,GACzB,CAACR,GAAMC,CAAK,CAAC,GAGf,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,QAAQb,CAAS;AAAA,QACxC,KAAKK;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}

package/mtds/divider/divider.d.ts

@@ -1,2 +1,6 @@
-export type DividerProps = React.ComponentPropsWithoutRef<"hr">;
-export declare const Divider: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export type DividerProps = React.ComponentPropsWithoutRef<"hr"> & {
+    "data-gap"?: "none" | "xs" | "sm" | "md" | "lg" | false;
+};
+export declare const Divider: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    "data-gap"?: "none" | "xs" | "sm" | "md" | "lg" | false;
+} & React.RefAttributes<HTMLHRElement>>;

package/mtds/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../designsystem/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DividerProps = React.ComponentPropsWithoutRef<\"hr\">;\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn (\n\t\t// biome-ignore lint/a11y/noAriaHiddenOnFocusable: This is a decorative element\n\t\t<hr\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={clsx(styles.divider, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n"],"names":["Divider","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMa,MAAAA,IAAUC,EAAwC,SAC9D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACD;AAAA;AAAA,IAEC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,EAAKC,EAAO,SAASL,CAAS;AAAA,QACzC,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP,CAAC;"}
+{"version":3,"file":"divider.js","sources":["../../designsystem/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DividerProps = React.ComponentPropsWithoutRef<\"hr\"> & {\n\t\"data-gap\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | false;\n};\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn (\n\t\t// biome-ignore lint/a11y/noAriaHiddenOnFocusable: This is a decorative element\n\t\t<hr\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={clsx(styles.divider, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n"],"names":["Divider","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQa,MAAAA,IAAUC,EAAwC,SAC9D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACD;AAAA;AAAA,IAEC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,EAAKC,EAAO,SAASL,CAAS;AAAA,QACzC,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP,CAAC;"}

package/mtds/errorsummary/errorsummary.js

@@ -1,30 +1,27 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as u } from "../external/clsx/dist/clsx.js";
-import { forwardRef as c, useRef as a, useImperativeHandle as s, useEffect as i } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { clsx as n } from "../external/clsx/dist/clsx.js";
+import { forwardRef as i, useRef as a, useImperativeHandle as u, useEffect as c } from "react";
 import l from "../styles.module.css.js";
-const b = c(
-  function({ className: o, ...f }, n) {
-    const e = a(null);
-    return s(n, () => e.current), i(() => {
+import { attr as p } from "../utils.js";
+const v = i(
+  function({ className: o, ...m }, s) {
+    const r = a(null);
+    return u(s, () => r.current), c(() => {
       var t;
-      const r = (t = e.current) == null ? void 0 : t.firstElementChild;
-      r instanceof HTMLHeadingElement && (r.setAttribute("tabindex", "-1"), r.focus());
-    }, []), s(n, () => e.current), i(() => {
-      var t;
-      const r = (t = e.current) == null ? void 0 : t.firstElementChild;
-      r instanceof HTMLHeadingElement && (r.setAttribute("tabindex", "-1"), r.focus());
-    }, []), /* @__PURE__ */ m(
+      const e = (t = r.current) == null ? void 0 : t.firstElementChild;
+      e instanceof HTMLHeadingElement && (p(e, "tabindex", "-1"), e.focus());
+    }, []), /* @__PURE__ */ f(
       "div",
       {
-        className: u(l.errorsummary, o),
+        className: n(l.errorsummary, o),
         role: "alert",
-        ref: e,
-        ...f
+        ref: r,
+        ...m
       }
     );
   }
 );
 export {
-  b as Errorsummary
+  v as Errorsummary
 };
 //# sourceMappingURL=errorsummary.js.map

package/mtds/errorsummary/errorsummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"errorsummary.js","sources":["../../designsystem/errorsummary/errorsummary.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type ErrorsummaryProps = React.ComponentPropsWithoutRef<\"div\">;\n\nexport const Errorsummary = forwardRef<HTMLDivElement, ErrorsummaryProps>(\n\tfunction Errorsummary({ className, ...rest }, ref) {\n\t\tconst innerRef = useRef<HTMLDivElement>(null);\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as HTMLDivElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst first = innerRef.current?.firstElementChild;\n\n\t\t\tif (first instanceof HTMLHeadingElement) {\n\t\t\t\tfirst.setAttribute(\"tabindex\", \"-1\");\n\t\t\t\tfirst.focus(); // Autofocus first heading\n\t\t\t}\n\t\t}, []);\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as HTMLDivElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst first = innerRef.current?.firstElementChild;\n\n\t\t\tif (first instanceof HTMLHeadingElement) {\n\t\t\t\tfirst.setAttribute(\"tabindex\", \"-1\");\n\t\t\t\tfirst.focus(); // Autofocus first heading\n\t\t\t}\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={clsx(styles.errorsummary, className)}\n\t\t\t\trole=\"alert\"\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Errorsummary","forwardRef","className","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","first","_a","jsx","clsx","styles"],"mappings":";;;;AAMO,MAAMA,IAAeC;AAAA,EAC3B,SAAsB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC5C,UAAAC,IAAWC,EAAuB,IAAI;AAExB,WAAAC,EAAAH,GAAK,MAAMC,EAAS,OAAyB,GACjEG,EAAU,MAAM;;AACT,YAAAC,KAAQC,IAAAL,EAAS,YAAT,gBAAAK,EAAkB;AAEhC,MAAID,aAAiB,uBACdA,EAAA,aAAa,YAAY,IAAI,GACnCA,EAAM,MAAM;AAAA,IAEd,GAAG,EAAE,GAEeF,EAAAH,GAAK,MAAMC,EAAS,OAAyB,GACjEG,EAAU,MAAM;;AACT,YAAAC,KAAQC,IAAAL,EAAS,YAAT,gBAAAK,EAAkB;AAEhC,MAAID,aAAiB,uBACdA,EAAA,aAAa,YAAY,IAAI,GACnCA,EAAM,MAAM;AAAA,IAEd,GAAG,EAAE,GAGJ,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,cAAcX,CAAS;AAAA,QAC9C,MAAK;AAAA,QACL,KAAKG;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"errorsummary.js","sources":["../../designsystem/errorsummary/errorsummary.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { attr } from \"../utils\";\n\nexport type ErrorsummaryProps = React.ComponentPropsWithoutRef<\"div\">;\n\nexport const Errorsummary = forwardRef<HTMLDivElement, ErrorsummaryProps>(\n\tfunction Errorsummary({ className, ...rest }, ref) {\n\t\tconst innerRef = useRef<HTMLDivElement>(null);\n\n\t\tuseImperativeHandle(ref, () => innerRef.current as HTMLDivElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst first = innerRef.current?.firstElementChild;\n\n\t\t\tif (first instanceof HTMLHeadingElement) {\n\t\t\t\tattr(first, \"tabindex\", \"-1\");\n\t\t\t\tfirst.focus(); // Autofocus first heading\n\t\t\t}\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={clsx(styles.errorsummary, className)}\n\t\t\t\trole=\"alert\"\n\t\t\t\tref={innerRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Errorsummary","forwardRef","className","rest","ref","innerRef","useRef","useImperativeHandle","useEffect","first","_a","attr","jsx","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,IAAeC;AAAA,EAC3B,SAAsB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC5C,UAAAC,IAAWC,EAAuB,IAAI;AAExB,WAAAC,EAAAH,GAAK,MAAMC,EAAS,OAAyB,GACjEG,EAAU,MAAM;;AACT,YAAAC,KAAQC,IAAAL,EAAS,YAAT,gBAAAK,EAAkB;AAEhC,MAAID,aAAiB,uBACfE,EAAAF,GAAO,YAAY,IAAI,GAC5BA,EAAM,MAAM;AAAA,IAEd,GAAG,EAAE,GAGJ,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,cAAcZ,CAAS;AAAA,QAC9C,MAAK;AAAA,QACL,KAAKG;AAAA,QACJ,GAAGF;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;"}

package/mtds/errorsummary/errorsummary.stories.d.ts

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

package/mtds/field/field-observer.js

@@ -1,45 +1,48 @@
 import m from "../styles.module.css.js";
-import { onMutation as v, on as u, QUICK_EVENT as p, isInputLike as b, attr as r, off as d, useId as a } from "../utils.js";
-const c = m.field.split(" ")[0], T = "--mtds-text-count-over", _ = "--mtds-text-count-under", g = m.validation.split(" "), y = g[0];
-function P(t) {
-  for (const e of t) {
-    const i = [], s = [];
-    let o = null, l = !0;
-    for (const n of e.getElementsByTagName("*"))
-      n instanceof HTMLLabelElement ? i.push(n) : b(n) ? o = n : n.classList.contains(y) ? (l = n.getAttribute("data-color") === "success", s.unshift(a(n))) : n instanceof HTMLParagraphElement && s.push(a(n));
+import { onMutation as v, on as d, QUICK_EVENT as p, isInputLike as S, attr as l, off as u, useId as r } from "../utils.js";
+const c = m.field.split(" ")[0], _ = "--mtds-text-count-over", y = "--mtds-text-count-under", I = m.validation.split(" "), P = I[0];
+function x(t) {
+  for (const n of t) {
+    const s = [], i = [];
+    let o = null, a = !0;
+    for (const e of n.getElementsByTagName("*"))
+      e instanceof HTMLLabelElement ? s.push(e) : S(e) ? o = e : e.classList.contains(P) ? (a = l(e, "data-color") === "success", i.unshift(r(e))) : e instanceof HTMLParagraphElement && i.push(r(e));
     if (o) {
-      for (const n of i) n.htmlFor = a(o);
-      I(o), r(o, "aria-describedby", s.join(" ")), r(o, "aria-invalid", `${!l}`);
+      for (const e of s) e.htmlFor = r(o);
+      b(o), l(o, "aria-describedby", i.join(" ")), l(o, "aria-invalid", `${!a}`);
     }
   }
 }
-function S({ target: t }) {
-  b(t) && I(t);
+function E({ target: t }) {
+  S(t) && b(t);
 }
-function I(t) {
-  var s, o;
-  const e = t == null ? void 0 : t.nextElementSibling, i = e == null ? void 0 : e.getAttribute("data-count");
-  if (e && i) {
-    const l = Number(i) - t.value.length, n = l < 0, h = e.getAttribute("aria-live") === "polite", f = window.getComputedStyle(e || t), C = ((s = f.getPropertyValue(T)) == null ? void 0 : s.slice(1, -1)) || "", L = ((o = f.getPropertyValue(_)) == null ? void 0 : o.slice(1, -1)) || "";
-    if (h !== n) {
-      r(e, "aria-live", n ? "polite" : "off");
-      for (const A of g) e.classList.toggle(A, n);
+function b(t) {
+  var i, o;
+  const n = t == null ? void 0 : t.nextElementSibling, s = n && l(n, "data-count");
+  if (n && s) {
+    const a = Number(s) - t.value.length, e = a < 0, h = l(n, "aria-live") === "polite", f = window.getComputedStyle(n || t), C = ((i = f.getPropertyValue(_)) == null ? void 0 : i.slice(1, -1)) || "", L = ((o = f.getPropertyValue(y)) == null ? void 0 : o.slice(1, -1)) || "";
+    if (h !== e) {
+      l(n, "aria-live", e ? "polite" : "off");
+      for (const T of I) n.classList.toggle(T, e);
     }
-    e.textContent = (n ? C : L).replace("%d", `${Math.abs(l)}`);
+    n.textContent = (e ? C : L).replace(
+      "%d",
+      `${Math.abs(a)}`
+    );
   }
 }
-function E(t) {
-  var e, i;
-  (i = (e = t.target) == null ? void 0 : e.closest) != null && i.call(e, `.${c}`) && t.preventDefault();
-}
-function R(t) {
-  v(t, c, P), u(t, "input", S, p), u(t, "invalid", E, !0);
+function g(t) {
+  var n, s;
+  (s = (n = t.target) == null ? void 0 : n.closest) != null && s.call(n, `.${c}`) && t.preventDefault();
 }
 function V(t) {
-  v(t, c, !1), d(t, "input", S, p), d(t, "invalid", E, !0);
+  v(t, c, x), d(t, "input", E, p), d(t, "invalid", g, !0);
+}
+function A(t) {
+  v(t, c, !1), u(t, "input", E, p), u(t, "invalid", g, !0);
 }
 export {
-  R as observe,
-  V as unobserve
+  V as observe,
+  A as unobserve
 };
 //# sourceMappingURL=field-observer.js.map

package/mtds/field/field-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, attr, isInputLike, off, on, onMutation, useId } from '../utils';\n\nconst CSS_FIELD = styles.field.split(' ')[0];\nconst CSS_PROPERTY_OVER = '--mtds-text-count-over';\nconst CSS_PROPERTY_UNDER = '--mtds-text-count-under';\nconst CSS_VALIDATIONS = styles.validation.split(' ');\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n  for(const field of fields) {\n    const labels: HTMLLabelElement[] = [];\n    const descs: string[] = [];\n    let input: HTMLInputElement | null = null;\n    let valid = true;\n\n    for (const el of field.getElementsByTagName('*')) {\n      if (el instanceof HTMLLabelElement) labels.push(el);\n      else if (isInputLike(el)) input = el;\n      else if (el.classList.contains(CSS_VALIDATION)) { // Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n        valid = el.getAttribute('data-color') === 'success';\n        descs.unshift(useId(el));\n      } else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n    }\n\n    if (input) {\n      for (const label of labels) label.htmlFor = useId(input);\n      renderCounter(input);\n      attr(input, 'aria-describedby', descs.join(' '));\n      attr(input, 'aria-invalid', `${!valid}`);\n    }\n  }\n}\nfunction handleInput({ target }: Event) {\n  if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n  const el = input?.nextElementSibling;\n  const limit = el?.getAttribute('data-count');\n  \n  if (el && limit) {\n    const remainder = Number(limit) - input.value.length;\n    const nextInvalid = remainder < 0;\n    const prevInvalid = el.getAttribute('aria-live') === 'polite';\n    const style = window.getComputedStyle(el || input);\n    const over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || ''; // slice to trim quotes\n    const under = style.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || ''; // slice to trim quotes\n\n    if (prevInvalid !== nextInvalid) {\n      attr(el, 'aria-live', nextInvalid ? 'polite' : 'off');\n      for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n    }\n    el.textContent = (nextInvalid ? over : under).replace('%d', `${Math.abs(remainder)}`);\n  }\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n  if ((event.target as Element)?.closest?.(`.${CSS_FIELD}`)) event.preventDefault();\n}\n\nexport function observe (el: Element) {\n  onMutation(el, CSS_FIELD, renderAria);\n  on(el, 'input', handleInput, QUICK_EVENT);\n  on(el, 'invalid', handleInvalid, true); // Use capture as invalid does noe buttle\n}\n\nexport function unobserve (el: Element) {\n  onMutation(el, CSS_FIELD, false);\n  off(el, 'input', handleInput, QUICK_EVENT);\n  off(el, 'invalid', handleInvalid, true);\n}\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","renderAria","fields","field","labels","descs","input","valid","el","isInputLike","useId","label","renderCounter","attr","handleInput","target","limit","remainder","nextInvalid","prevInvalid","style","over","_a","under","_b","css","handleInvalid","event","observe","onMutation","on","QUICK_EVENT","unobserve","off"],"mappings":";;AAGA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAoB,0BACpBC,IAAqB,2BACrBC,IAAkBH,EAAO,WAAW,MAAM,GAAG,GAC7CI,IAAiBD,EAAgB,CAAC;AAExC,SAASE,EAAWC,GAAmC;AACrD,aAAUC,KAASD,GAAQ;AACzB,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAiC,MACjCC,IAAQ;AAEZ,eAAWC,KAAML,EAAM,qBAAqB,GAAG;AAC7C,MAAIK,aAAc,mBAAyBJ,EAAA,KAAKI,CAAE,IACzCC,EAAYD,CAAE,IAAWF,IAAAE,IACzBA,EAAG,UAAU,SAASR,CAAc,KACnCO,IAAAC,EAAG,aAAa,YAAY,MAAM,WACpCH,EAAA,QAAQK,EAAMF,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKE,EAAMF,CAAE,CAAC;AAGrE,QAAIF,GAAO;AACT,iBAAWK,KAASP,EAAc,CAAAO,EAAA,UAAUD,EAAMJ,CAAK;AACvD,MAAAM,EAAcN,CAAK,GACnBO,EAAKP,GAAO,oBAAoBD,EAAM,KAAK,GAAG,CAAC,GAC/CQ,EAAKP,GAAO,gBAAgB,GAAG,CAACC,CAAK,EAAE;AAAA,IAAA;AAAA,EACzC;AAEJ;AACA,SAASO,EAAY,EAAE,QAAAC,KAAiB;AACtC,EAAIN,EAAYM,CAAM,KAAGH,EAAcG,CAAM;AAC/C;AAEA,SAASH,EAAcN,GAAyB;;AAC9C,QAAME,IAAKF,KAAA,gBAAAA,EAAO,oBACZU,IAAQR,KAAA,gBAAAA,EAAI,aAAa;AAE/B,MAAIA,KAAMQ,GAAO;AACf,UAAMC,IAAY,OAAOD,CAAK,IAAIV,EAAM,MAAM,QACxCY,IAAcD,IAAY,GAC1BE,IAAcX,EAAG,aAAa,WAAW,MAAM,UAC/CY,IAAQ,OAAO,iBAAiBZ,KAAMF,CAAK,GAC3Ce,MAAOC,IAAAF,EAAM,iBAAiBvB,CAAiB,MAAxC,gBAAAyB,EAA2C,MAAM,GAAG,QAAO,IAClEC,MAAQC,IAAAJ,EAAM,iBAAiBtB,CAAkB,MAAzC,gBAAA0B,EAA4C,MAAM,GAAG,QAAO;AAE1E,QAAIL,MAAgBD,GAAa;AAC/B,MAAAL,EAAKL,GAAI,aAAaU,IAAc,WAAW,KAAK;AACpD,iBAAWO,KAAO1B,EAAiB,CAAAS,EAAG,UAAU,OAAOiB,GAAKP,CAAW;AAAA,IAAA;AAEtE,IAAAV,EAAA,eAAeU,IAAcG,IAAOE,GAAO,QAAQ,MAAM,GAAG,KAAK,IAAIN,CAAS,CAAC,EAAE;AAAA,EAAA;AAExF;AAGA,SAASS,EAAcC,GAAc;;AAC9B,GAAAH,KAAAF,IAAAK,EAAM,WAAN,gBAAAL,EAA0B,YAA1B,QAAAE,EAAA,KAAAF,GAAoC,IAAI3B,CAAS,SAAW,eAAe;AAClF;AAEO,SAASiC,EAASpB,GAAa;AACzB,EAAAqB,EAAArB,GAAIb,GAAWM,CAAU,GACjC6B,EAAAtB,GAAI,SAASM,GAAaiB,CAAW,GACrCD,EAAAtB,GAAI,WAAWkB,GAAe,EAAI;AACvC;AAEO,SAASM,EAAWxB,GAAa;AAC3B,EAAAqB,EAAArB,GAAIb,GAAW,EAAK,GAC3BsC,EAAAzB,GAAI,SAASM,GAAaiB,CAAW,GACrCE,EAAAzB,GAAI,WAAWkB,GAAe,EAAI;AACxC;"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n  QUICK_EVENT,\n  attr,\n  isInputLike,\n  off,\n  on,\n  onMutation,\n  useId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction renderAria(fields: HTMLCollectionOf<Element>) {\n  for (const field of fields) {\n    const labels: HTMLLabelElement[] = [];\n    const descs: string[] = [];\n    let input: HTMLInputElement | null = null;\n    let valid = true;\n\n    for (const el of field.getElementsByTagName(\"*\")) {\n      if (el instanceof HTMLLabelElement) labels.push(el);\n      else if (isInputLike(el)) input = el;\n      else if (el.classList.contains(CSS_VALIDATION)) {\n        // Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n        valid = attr(el, \"data-color\") === \"success\";\n        descs.unshift(useId(el));\n      } else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n    }\n\n    if (input) {\n      for (const label of labels) label.htmlFor = useId(input);\n      renderCounter(input);\n      attr(input, \"aria-describedby\", descs.join(\" \"));\n      attr(input, \"aria-invalid\", `${!valid}`);\n    }\n  }\n}\nfunction handleInput({ target }: Event) {\n  if (isInputLike(target)) renderCounter(target);\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n  const el = input?.nextElementSibling;\n  const limit = el && attr(el, \"data-count\");\n\n  if (el && limit) {\n    const remainder = Number(limit) - input.value.length;\n    const nextInvalid = remainder < 0;\n    const prevInvalid = attr(el, \"aria-live\") === \"polite\";\n    const style = window.getComputedStyle(el || input);\n    const over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n    const under =\n      style.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n    if (prevInvalid !== nextInvalid) {\n      attr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n      for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n    }\n    el.textContent = (nextInvalid ? over : under).replace(\n      \"%d\",\n      `${Math.abs(remainder)}`\n    );\n  }\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n  if ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n    event.preventDefault();\n}\n\nexport function observe(el: Element) {\n  onMutation(el, CSS_FIELD, renderAria);\n  on(el, \"input\", handleInput, QUICK_EVENT);\n  on(el, \"invalid\", handleInvalid, true); // Use capture as invalid does noe buttle\n}\n\nexport function unobserve(el: Element) {\n  onMutation(el, CSS_FIELD, false);\n  off(el, \"input\", handleInput, QUICK_EVENT);\n  off(el, \"invalid\", handleInvalid, true);\n}\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","renderAria","fields","field","labels","descs","input","valid","el","isInputLike","attr","useId","label","renderCounter","handleInput","target","limit","remainder","nextInvalid","prevInvalid","style","over","_a","under","_b","css","handleInvalid","event","observe","onMutation","on","QUICK_EVENT","unobserve","off"],"mappings":";;AAWA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,IAAoB,0BACpBC,IAAqB,2BACrBC,IAAkBH,EAAO,WAAW,MAAM,GAAG,GAC7CI,IAAiBD,EAAgB,CAAC;AAExC,SAASE,EAAWC,GAAmC;AACrD,aAAWC,KAASD,GAAQ;AAC1B,UAAME,IAA6B,CAAC,GAC9BC,IAAkB,CAAC;AACzB,QAAIC,IAAiC,MACjCC,IAAQ;AAEZ,eAAWC,KAAML,EAAM,qBAAqB,GAAG;AAC7C,MAAIK,aAAc,mBAAyBJ,EAAA,KAAKI,CAAE,IACzCC,EAAYD,CAAE,IAAWF,IAAAE,IACzBA,EAAG,UAAU,SAASR,CAAc,KAEnCO,IAAAG,EAAKF,GAAI,YAAY,MAAM,WAC7BH,EAAA,QAAQM,EAAMH,CAAE,CAAC,KACdA,aAAc,0BAA4B,KAAKG,EAAMH,CAAE,CAAC;AAGrE,QAAIF,GAAO;AACT,iBAAWM,KAASR,EAAc,CAAAQ,EAAA,UAAUD,EAAML,CAAK;AACvD,MAAAO,EAAcP,CAAK,GACnBI,EAAKJ,GAAO,oBAAoBD,EAAM,KAAK,GAAG,CAAC,GAC/CK,EAAKJ,GAAO,gBAAgB,GAAG,CAACC,CAAK,EAAE;AAAA,IAAA;AAAA,EACzC;AAEJ;AACA,SAASO,EAAY,EAAE,QAAAC,KAAiB;AACtC,EAAIN,EAAYM,CAAM,KAAGF,EAAcE,CAAM;AAC/C;AAEA,SAASF,EAAcP,GAAyB;;AAC9C,QAAME,IAAKF,KAAA,gBAAAA,EAAO,oBACZU,IAAQR,KAAME,EAAKF,GAAI,YAAY;AAEzC,MAAIA,KAAMQ,GAAO;AACf,UAAMC,IAAY,OAAOD,CAAK,IAAIV,EAAM,MAAM,QACxCY,IAAcD,IAAY,GAC1BE,IAAcT,EAAKF,GAAI,WAAW,MAAM,UACxCY,IAAQ,OAAO,iBAAiBZ,KAAMF,CAAK,GAC3Ce,MAAOC,IAAAF,EAAM,iBAAiBvB,CAAiB,MAAxC,gBAAAyB,EAA2C,MAAM,GAAG,QAAO,IAClEC,MACJC,IAAAJ,EAAM,iBAAiBtB,CAAkB,MAAzC,gBAAA0B,EAA4C,MAAM,GAAG,QAAO;AAE9D,QAAIL,MAAgBD,GAAa;AAC/B,MAAAR,EAAKF,GAAI,aAAaU,IAAc,WAAW,KAAK;AACpD,iBAAWO,KAAO1B,EAAiB,CAAAS,EAAG,UAAU,OAAOiB,GAAKP,CAAW;AAAA,IAAA;AAEtE,IAAAV,EAAA,eAAeU,IAAcG,IAAOE,GAAO;AAAA,MAC5C;AAAA,MACA,GAAG,KAAK,IAAIN,CAAS,CAAC;AAAA,IACxB;AAAA,EAAA;AAEJ;AAGA,SAASS,EAAcC,GAAc;;AACnC,GAAKH,KAAAF,IAAAK,EAAM,WAAN,gBAAAL,EAA0B,YAA1B,QAAAE,EAAA,KAAAF,GAAoC,IAAI3B,CAAS,OACpDgC,EAAM,eAAe;AACzB;AAEO,SAASC,EAAQpB,GAAa;AACxB,EAAAqB,EAAArB,GAAIb,GAAWM,CAAU,GACjC6B,EAAAtB,GAAI,SAASM,GAAaiB,CAAW,GACrCD,EAAAtB,GAAI,WAAWkB,GAAe,EAAI;AACvC;AAEO,SAASM,EAAUxB,GAAa;AAC1B,EAAAqB,EAAArB,GAAIb,GAAW,EAAK,GAC3BsC,EAAAzB,GAAI,SAASM,GAAaiB,CAAW,GACrCE,EAAAzB,GAAI,WAAWkB,GAAe,EAAI;AACxC;"}

package/mtds/field/field.stories.d.ts

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

package/mtds/fieldset/fieldset-observer.js

@@ -1,18 +1,17 @@
 import n from "../styles.module.css.js";
-import { onMutation as a, useId as l, attr as e, isInputLike as c } from "../utils.js";
-const r = n.fieldset.split(" ")[0], p = n.validation.split(" ")[0];
+import { onMutation as a, useId as f, attr as e, isInputLike as c } from "../utils.js";
+const l = n.fieldset.split(" ")[0], p = n.validation.split(" ")[0];
 function d(s) {
-  for (const f of s) {
+  for (const r of s) {
     const i = [];
-    let o = "";
-    for (const t of f.getElementsByTagName("*"))
-      t.classList.contains(p) ? o = l(t) : c(t) && i.push(t);
-    if (o)
-      for (const t of i)
-        e(t, "aria-describedby", o), e(t, "aria-invalid", "true");
+    let o = null;
+    for (const t of r.getElementsByTagName("*"))
+      t.classList.contains(p) ? o = f(t) : c(t) && i.push(t);
+    for (const t of i)
+      e(t, "aria-describedby", o), e(t, "aria-invalid", `${!!o}`);
   }
 }
-const I = (s) => a(s, r, d), v = (s) => a(s, r, !1);
+const I = (s) => a(s, l, d), v = (s) => a(s, l, !1);
 export {
   I as observe,
   v as unobserve

package/mtds/fieldset/fieldset-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { attr, isInputLike, onMutation, useId } from '../utils';\nconst CSS_FIELDSET = styles.fieldset.split(' ')[0];\nconst CSS_VALIDATION = styles.validation.split(' ')[0];\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n  for(const fieldset of fieldsets) {\n    const inputs: HTMLInputElement[] = [];\n    let validationId = '';\n\n    for (const el of fieldset.getElementsByTagName('*')) {\n      if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n      else if (isInputLike(el)) inputs.push(el);\n    }\n\n    if (validationId) \n      for(const input of inputs) {\n        attr(input, 'aria-describedby', validationId);\n        attr(input, 'aria-invalid', 'true');\n      }\n  }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_FIELDSET, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_FIELDSET, false);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","process","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","attr","observe","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAErD,SAASE,EAAQC,GAAsC;AACrD,aAAUC,KAAYD,GAAW;AAC/B,UAAME,IAA6B,CAAC;AACpC,QAAIC,IAAe;AAEnB,eAAWC,KAAMH,EAAS,qBAAqB,GAAG;AAChD,MAAIG,EAAG,UAAU,SAASN,CAAc,IAAGK,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGtC,QAAAD;AACF,iBAAUI,KAASL;AACZ,QAAAM,EAAAD,GAAO,oBAAoBJ,CAAY,GACvCK,EAAAD,GAAO,gBAAgB,MAAM;AAAA,EACpC;AAEN;AAEO,MAAME,IAAU,CAACL,MAAgBM,EAAWN,GAAIR,GAAcG,CAAO,GAC/DY,IAAY,CAACP,MAAgBM,EAAWN,GAAIR,GAAc,EAAK;"}
+{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isInputLike, onMutation, useId } from \"../utils\";\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\n\nfunction process(fieldsets: HTMLCollectionOf<Element>) {\n  for (const fieldset of fieldsets) {\n    const inputs: HTMLInputElement[] = [];\n    let validationId: string | null = null;\n\n    for (const el of fieldset.getElementsByTagName(\"*\")) {\n      if (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n      else if (isInputLike(el)) inputs.push(el);\n    }\n\n    for (const input of inputs) {\n      attr(input, \"aria-describedby\", validationId);\n      attr(input, \"aria-invalid\", `${!!validationId}`);\n    }\n  }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_FIELDSET, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_FIELDSET, false);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","process","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","attr","observe","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAErD,SAASE,EAAQC,GAAsC;AACrD,aAAWC,KAAYD,GAAW;AAChC,UAAME,IAA6B,CAAC;AACpC,QAAIC,IAA8B;AAElC,eAAWC,KAAMH,EAAS,qBAAqB,GAAG;AAChD,MAAIG,EAAG,UAAU,SAASN,CAAc,IAAGK,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAG1C,eAAWG,KAASL;AACb,MAAAM,EAAAD,GAAO,oBAAoBJ,CAAY,GAC5CK,EAAKD,GAAO,gBAAgB,GAAG,CAAC,CAACJ,CAAY,EAAE;AAAA,EACjD;AAEJ;AAEO,MAAMM,IAAU,CAACL,MAAgBM,EAAWN,GAAIR,GAAcG,CAAO,GAC/DY,IAAY,CAACP,MAAgBM,EAAWN,GAAIR,GAAc,EAAK;"}

package/mtds/heading/heading.d.ts

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

package/mtds/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../designsystem/heading/heading.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 HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<As>;\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"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAea,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;"}
+{"version":3,"file":"heading.js","sources":["../../designsystem/heading/heading.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 HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\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"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAoBa,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;"}

package/mtds/heading/heading.stories.d.ts

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

package/mtds/index.d.ts

@@ -5,6 +5,7 @@ badge: string;
 breadcrumbs: string;
 button: string;
 card: string;
+group: string;
 chip: string;
 details: string;
 dialog: string;