@mattilsynet/design 0.4.0 → 0.5.1

package/mtds/logo/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../designsystem/logo/logo.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 LogoBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type LogoProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n> = PolymorphicComponentPropWithRef<As, LogoBaseProps<Href>>;\n\ntype LogoComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>(\n\tprops: LogoProps<Href, As>,\n) => JSX.Element;\n\nexport const Logo: LogoComponent = forwardRef<null>(function Logo<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>({ as, className, ...rest }: LogoProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"span\");\n\n\treturn <Tag className={clsx(styles.logo, className)} ref={ref} {...rest} />;\n}) as LogoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Logo","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAwBa,MAAAA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}
+{"version":3,"file":"logo.js","sources":["../../designsystem/logo/logo.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 LogoBaseProps<Href> = {\n\t\"data-color\"?: \"orange\" | \"blue\";\n\thref?: Href;\n};\n\nexport type LogoProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n> = PolymorphicComponentPropWithRef<As, LogoBaseProps<Href>>;\n\ntype LogoComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>(\n\tprops: LogoProps<Href, As>,\n) => JSX.Element;\n\nexport const Logo: LogoComponent = forwardRef<null>(function Logo<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"span\",\n>({ as, className, ...rest }: LogoProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"span\");\n\n\treturn <Tag className={clsx(styles.logo, className)} ref={ref} {...rest} />;\n}) as LogoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Logo","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,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}

package/mtds/logo/logo.stories.d.ts

@@ -1,7 +1,10 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
@@ -9,5 +12,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
+export declare const WithSubbrand: Story;
+export declare const WithSubbrandEnglish: Story;
+export declare const WithAppIcon: Story;
+export declare const WithAppIconOrange: Story;
+export declare const WithAppIconBlue: Story;
 export declare const Sizes: Story;
-export declare const English: Story;

package/mtds/popover/popover-observer.js

@@ -1,25 +1,29 @@
 import m from "../styles.module.css.js";
-import { on as f, QUICK_EVENT as a, anchorPosition as l, attr as p, off as r } from "../utils.js";
+import { on as l, QUICK_EVENT as a, anchorPosition as p, attr as e, off as r } from "../utils.js";
+const d = m.popover.split(" ")[0];
 function k(o) {
-  f(o, "toggle", g, a), f(o, "click", v);
+  l(o, "toggle", g, a), l(o, "click", v);
 }
 function E(o) {
   r(o, "toggle", g, a), r(o, "click", v);
 }
-const d = m.popover.split(" ")[0];
-function g({ target: o, newState: t }) {
-  var n;
+function g({ target: o, newState: n }) {
+  var t;
   if (o instanceof HTMLElement && o.classList.contains(d)) {
-    const i = (n = o.getRootNode()) == null ? void 0 : n.querySelector(`[popovertarget="${o.id}"]`);
-    t === "closed" ? l(o, !1) : i && l(o, i, o.getAttribute("data-position") || "bottom");
+    const i = (t = o.getRootNode()) == null ? void 0 : t.querySelector(
+      `[popovertarget="${o.id}"]`
+    );
+    n === "closed" ? p(o, !1) : i && p(o, i, e(o, "data-position") || "bottom");
   }
 }
 function v({ target: o }) {
-  var n, i;
-  const t = (n = o == null ? void 0 : o.closest) == null ? void 0 : n.call(o, "a");
-  if (t) {
-    const e = t.getRootNode(), s = ((i = e.getElementById) == null ? void 0 : i.call(e, p(t, "popovertarget") || "")) || t.closest(`.${d}`), c = p(t, "popovertargetaction") || "toggle";
-    s == null || s.togglePopover(c === "show" || (c === "hide" ? !1 : void 0));
+  var t, i;
+  const n = (t = o == null ? void 0 : o.closest) == null ? void 0 : t.call(o, "a");
+  if (n) {
+    const s = n.getRootNode(), c = ((i = s.getElementById) == null ? void 0 : i.call(s, e(n, "popovertarget") || "")) || n.closest(`.${d}`), f = e(n, "popovertargetaction") || "toggle";
+    c == null || c.togglePopover(
+      f === "show" || (f === "hide" ? !1 : void 0)
+    );
   }
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { QUICK_EVENT, anchorPosition, attr, off, on } from '../utils';\n\nexport function observe(el: Node) {\n  on(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n  on(el, 'click', handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n}\nexport function unobserve(el: Node) {\n  off(el, 'toggle', handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n  off(el, 'click', handleLinkClick);\n}\n\nconst CSS_POPOVER = styles.popover.split(' ')[0];\n\nfunction handleToggle ({ target: el, newState }: Event & { newState?: string }){\n  if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n    const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(`[popovertarget=\"${el.id}\"]`);\n    \n    if (newState === 'closed') anchorPosition(el, false);\n    else if (anchor) anchorPosition(el, anchor, el.getAttribute('data-position') || 'bottom');\n  }\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick ({ target }: Event){\n  const link = (target as Element )?.closest?.('a');\n  if (link) {\n    const root = link.getRootNode() as ShadowRoot;\n    const target = root.getElementById?.(attr(link, 'popovertarget') || '') || link.closest(`.${CSS_POPOVER}`);\n    const action = attr(link, 'popovertargetaction') || 'toggle';\n\n    target?.togglePopover(action === 'show' || (action === 'hide' ? false : undefined));\n  }\n}"],"names":["observe","el","on","handleToggle","QUICK_EVENT","handleLinkClick","unobserve","off","CSS_POPOVER","styles","newState","anchor","_a","anchorPosition","target","link","root","_b","attr","action"],"mappings":";;AAGO,SAASA,EAAQC,GAAU;AAC7B,EAAAC,EAAAD,GAAI,UAAUE,GAAcC,CAAW,GACvCF,EAAAD,GAAI,SAASI,CAAe;AACjC;AACO,SAASC,EAAUL,GAAU;AAC9B,EAAAM,EAAAN,GAAI,UAAUE,GAAcC,CAAW,GACvCG,EAAAN,GAAI,SAASI,CAAe;AAClC;AAEA,MAAMG,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAE/C,SAASN,EAAc,EAAE,QAAQF,GAAI,UAAAS,KAA0C;;AAC7E,MAAIT,aAAc,eAAeA,EAAG,UAAU,SAASO,CAAW,GAAG;AAC7D,UAAAG,KAAUC,IAAAX,EAAG,kBAAH,gBAAAW,EAAiC,cAA2B,mBAAmBX,EAAG,EAAE;AAEpG,IAAIS,MAAa,WAAyBG,EAAAZ,GAAI,EAAK,IAC1CU,OAAuBV,GAAIU,GAAQV,EAAG,aAAa,eAAe,KAAK,QAAQ;AAAA,EAAA;AAE5F;AAKA,SAASI,EAAiB,EAAE,QAAAS,KAAgB;;AACpC,QAAAC,KAAQH,IAAAE,KAAA,gBAAAA,EAAqB,YAArB,gBAAAF,EAAA,KAAAE,GAA+B;AAC7C,MAAIC,GAAM;AACF,UAAAC,IAAOD,EAAK,YAAY,GACxBD,MAASG,IAAAD,EAAK,mBAAL,gBAAAC,EAAA,KAAAD,GAAsBE,EAAKH,GAAM,eAAe,KAAK,QAAOA,EAAK,QAAQ,IAAIP,CAAW,EAAE,GACnGW,IAASD,EAAKH,GAAM,qBAAqB,KAAK;AAEpDD,IAAAA,KAAAA,QAAAA,EAAQ,cAAcK,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAAA,EAAU;AAEtF;"}
+{"version":3,"file":"popover-observer.js","sources":["../../designsystem/popover/popover-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { QUICK_EVENT, anchorPosition, attr, off, on } from \"../utils\";\n\nconst CSS_POPOVER = styles.popover.split(\" \")[0];\n\nexport function observe(el: Node) {\n  on(el, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n  on(el, \"click\", handleLinkClick); // Allow `<a>` to use `popovertarget` as well\n}\nexport function unobserve(el: Node) {\n  off(el, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n  off(el, \"click\", handleLinkClick);\n}\n\nfunction handleToggle({ target: el, newState }: Event & { newState?: string }) {\n  if (el instanceof HTMLElement && el.classList.contains(CSS_POPOVER)) {\n    const anchor = (el.getRootNode() as ShadowRoot)?.querySelector<HTMLElement>(\n      `[popovertarget=\"${el.id}\"]`\n    );\n\n    if (newState === \"closed\") anchorPosition(el, false);\n    else if (anchor)\n      anchorPosition(el, anchor, attr(el, \"data-position\") || \"bottom\");\n  }\n}\n\n// Polyfill popovertarget for <a> (not supported by native)\n// and automatically assume popovertarget is the closest parent popover\n// but respect the popovertarget and popovertargetaction attribute\nfunction handleLinkClick({ target }: Event) {\n  const link = (target as Element)?.closest?.(\"a\");\n  if (link) {\n    const root = link.getRootNode() as ShadowRoot;\n    const target =\n      root.getElementById?.(attr(link, \"popovertarget\") || \"\") ||\n      link.closest(`.${CSS_POPOVER}`);\n    const action = attr(link, \"popovertargetaction\") || \"toggle\";\n\n    target?.togglePopover(\n      action === \"show\" || (action === \"hide\" ? false : undefined)\n    );\n  }\n}\n"],"names":["CSS_POPOVER","styles","observe","el","on","handleToggle","QUICK_EVENT","handleLinkClick","unobserve","off","newState","anchor","_a","anchorPosition","attr","target","link","root","_b","action"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,QAAQ,MAAM,GAAG,EAAE,CAAC;AAExC,SAASC,EAAQC,GAAU;AAC7B,EAAAC,EAAAD,GAAI,UAAUE,GAAcC,CAAW,GACvCF,EAAAD,GAAI,SAASI,CAAe;AACjC;AACO,SAASC,EAAUL,GAAU;AAC9B,EAAAM,EAAAN,GAAI,UAAUE,GAAcC,CAAW,GACvCG,EAAAN,GAAI,SAASI,CAAe;AAClC;AAEA,SAASF,EAAa,EAAE,QAAQF,GAAI,UAAAO,KAA2C;;AAC7E,MAAIP,aAAc,eAAeA,EAAG,UAAU,SAASH,CAAW,GAAG;AAC7D,UAAAW,KAAUC,IAAAT,EAAG,YAAA,MAAH,gBAAAS,EAAiC;AAAA,MAC/C,mBAAmBT,EAAG,EAAE;AAAA;AAG1B,IAAIO,MAAa,WAAyBG,EAAAV,GAAI,EAAK,IAC1CQ,KACPE,EAAeV,GAAIQ,GAAQG,EAAKX,GAAI,eAAe,KAAK,QAAQ;AAAA,EAAA;AAEtE;AAKA,SAASI,EAAgB,EAAE,QAAAQ,KAAiB;;AACpC,QAAAC,KAAQJ,IAAAG,KAAA,gBAAAA,EAAoB,YAApB,gBAAAH,EAAA,KAAAG,GAA8B;AAC5C,MAAIC,GAAM;AACF,UAAAC,IAAOD,EAAK,YAAY,GACxBD,MACJG,IAAAD,EAAK,mBAAL,gBAAAC,EAAA,KAAAD,GAAsBH,EAAKE,GAAM,eAAe,KAAK,QACrDA,EAAK,QAAQ,IAAIhB,CAAW,EAAE,GAC1BmB,IAASL,EAAKE,GAAM,qBAAqB,KAAK;AAEpDD,IAAAA,KAAAA,QAAAA,EAAQ;AAAA,MACNI,MAAW,WAAWA,MAAW,SAAS,KAAQ;AAAA;AAAA,EACpD;AAEJ;"}

package/mtds/popover/popover.d.ts

@@ -1,6 +1,8 @@
 import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
-export type PopoverProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
+export type PopoverProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
+    "data-position"?: "top" | "bottom" | "left" | "right";
+}>;
 type PopoverComponent = <As extends React.ElementType = "div">(props: PopoverProps<As>) => JSX.Element;
 export declare const Popover: PopoverComponent;
 export {};

package/mtds/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.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 PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","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;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC;"}
+{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.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 PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","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;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC;"}

package/mtds/react-types.d.ts

@@ -6,5 +6,13 @@ type PolymorphicComponentProp<As extends React.ElementType, Props = object> = Re
 export type PolymorphicComponentPropWithRef<As extends React.ElementType, Props = object> = PolymorphicComponentProp<As, Props> & {
     ref?: PolymorphicRef<As>;
 };
-export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>['ref'];
+export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
+declare global {
+    namespace React {
+        interface HTMLAttributes<T> {
+            "data-size"?: "sm" | "md" | "lg" | (string & {});
+            "data-tooltip"?: string;
+        }
+    }
+}
 export {};

package/mtds/skeleton/skeleton.d.ts

@@ -1,9 +1,10 @@
 import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
-type SkeletonBaseProps<Variant> = {
+type Variants = "circle" | "text" | "rectangle";
+type SkeletonBaseProps<Variant extends Variants> = {
     "data-variant"?: Variant;
 };
-export type SkeletonProps<Variant, As extends React.ElementType = Variant extends "text" ? "span" : "div"> = PolymorphicComponentPropWithRef<As, SkeletonBaseProps<Variant>>;
-type SkeletonComponent = <Variant, As extends React.ElementType = Variant extends "text" ? "span" : "div">(props: SkeletonProps<Variant, As>) => JSX.Element;
+export type SkeletonProps<Variant extends Variants, As extends React.ElementType = Variant extends "text" ? "span" : "div"> = PolymorphicComponentPropWithRef<As, SkeletonBaseProps<Variant>>;
+type SkeletonComponent = <Variant extends Variants, As extends React.ElementType = Variant extends "text" ? "span" : "div">(props: SkeletonProps<Variant, As>) => JSX.Element;
 export declare const Skeleton: SkeletonComponent;
 export {};

package/mtds/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../designsystem/skeleton/skeleton.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 SkeletonBaseProps<Variant> = {\n\t\"data-variant\"?: Variant;\n};\n\nexport type SkeletonProps<\n\tVariant,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, SkeletonBaseProps<Variant>>;\n\ntype SkeletonComponent = <\n\tVariant,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n>(\n\tprops: SkeletonProps<Variant, As>,\n) => JSX.Element;\n\nexport const Skeleton: SkeletonComponent = forwardRef<null>(function Skeleton<\n\tVariant,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n>(\n\t{ as, className, ...rest }: SkeletonProps<Variant, As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || (rest.href ? \"span\" : \"div\");\n\n\treturn (\n\t\t<Tag className={clsx(styles.skeleton, className)} ref={ref} {...rest} />\n\t);\n}) as SkeletonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Skeleton","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAwBa,MAAAA,IAA8BC,EAAiB,SAI3D,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GACzBC,GACC;AACD,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,SAAS;AAGvC,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,UAAUN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAExE,CAAC;"}
+{"version":3,"file":"skeleton.js","sources":["../../designsystem/skeleton/skeleton.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 Variants = \"circle\" | \"text\" | \"rectangle\";\ntype SkeletonBaseProps<Variant extends Variants> = {\n\t\"data-variant\"?: Variant;\n};\n\nexport type SkeletonProps<\n\tVariant extends Variants,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, SkeletonBaseProps<Variant>>;\n\ntype SkeletonComponent = <\n\tVariant extends Variants,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n>(\n\tprops: SkeletonProps<Variant, As>,\n) => JSX.Element;\n\nexport const Skeleton: SkeletonComponent = forwardRef<null>(function Skeleton<\n\tVariant extends Variants,\n\tAs extends React.ElementType = Variant extends \"text\" ? \"span\" : \"div\",\n>(\n\t{ as, className, ...rest }: SkeletonProps<Variant, As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || (rest.href ? \"span\" : \"div\");\n\n\treturn (\n\t\t<Tag className={clsx(styles.skeleton, className)} ref={ref} {...rest} />\n\t);\n}) as SkeletonComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Skeleton","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles"],"mappings":";;;;AAyBa,MAAAA,IAA8BC,EAAiB,SAI3D,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GACzBC,GACC;AACD,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,SAAS;AAGvC,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,UAAUN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAExE,CAAC;"}

package/mtds/spinner/spinner.d.ts

@@ -1,2 +1,6 @@
-export type SpinnerProps = React.ComponentPropsWithoutRef<"span">;
-export declare const Spinner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SpinnerProps = React.ComponentPropsWithoutRef<"span"> & {
+    "data-size"?: "xs" | "sm" | "md" | "lg";
+};
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    "data-size"?: "xs" | "sm" | "md" | "lg";
+} & React.RefAttributes<HTMLSpanElement>>;

package/mtds/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../designsystem/spinner/spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type SpinnerProps = React.ComponentPropsWithoutRef<\"span\">;\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n\tfunction Spinner({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<span className={clsx(styles.spinner, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Spinner","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMO,MAAMA,IAAUC;AAAA,EACtB,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE5C,WAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}
+{"version":3,"file":"spinner.js","sources":["../../designsystem/spinner/spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type SpinnerProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-size\"?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n};\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n\tfunction Spinner({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<span className={clsx(styles.spinner, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Spinner","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQO,MAAMA,IAAUC;AAAA,EACtB,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE5C,WAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}

package/mtds/spinner/spinner.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)[];
 };