@mattilsynet/design 0.3.8 → 0.5.0

package/mtds/styles.json

@@ -1,33 +1,35 @@
 {
-  "alert": "_alert_1drby_1 _ds-alert_1w6ss_1",
-  "avatar": "_avatar_1drby_1 _ds-avatar_1w6ss_1",
-  "badge": "_badge_1drby_1",
-  "breadcrumbs": "_breadcrumbs_1drby_1 _ds-breadcrumbs_1w6ss_1",
-  "button": "_button_1drby_1 _ds-button_1w6ss_1",
-  "card": "_card_1drby_1",
-  "chip": "_chip_1drby_1 _ds-chip_1w6ss_1",
-  "details": "_details_1drby_1 _ds-details_1w6ss_1",
-  "dialog": "_dialog_1drby_1 _ds-modal_1w6ss_1",
-  "divider": "_divider_1drby_1",
-  "errorsummary": "_errorsummary_1drby_1 _ds-error-summary_1w6ss_1",
-  "field": "_field_1drby_1 _ds-field_1w6ss_1",
-  "affixes": "_affixes_1drby_1 _ds-field-affixes_1w6ss_1",
-  "count": "_count_1drby_1",
-  "fieldset": "_fieldset_1drby_1 _ds-fieldset_1w6ss_1",
-  "heading": "_heading_1drby_1 _ds-heading_1w6ss_1",
-  "input": "_input_1drby_1 _ds-input_1w6ss_1",
-  "grid": "_grid_1drby_1",
-  "flex": "_flex_1drby_1",
-  "app": "_app_1drby_1",
-  "link": "_link_1drby_1",
-  "logo": "_logo_1drby_1 _ds-focus_1w6ss_1",
-  "pagination": "_pagination_1drby_1 _ds-pagination_1w6ss_1",
-  "popover": "_popover_1drby_1",
-  "skeleton": "_skeleton_1drby_1 _ds-skeleton_1w6ss_1",
-  "spinner": "_spinner_1drby_1",
-  "table": "_table_1drby_1 _ds-table_1w6ss_1",
-  "tabs": "_tabs_1drby_1 _ds-tabs_1w6ss_1",
-  "tag": "_tag_1drby_1 _ds-tag_1w6ss_1",
-  "validation": "_validation_1drby_1 _ds-validation-message_1w6ss_1",
-  "body": "_body_1drby_143"
+  "alert": "_alert_14ty1_1 _ds-alert_194o1_1",
+  "avatar": "_avatar_14ty1_1 _ds-avatar_194o1_1",
+  "badge": "_badge_14ty1_1",
+  "breadcrumbs": "_breadcrumbs_14ty1_1 _ds-breadcrumbs_194o1_1",
+  "button": "_button_14ty1_1 _ds-button_194o1_1",
+  "card": "_card_14ty1_1",
+  "group": "_group_14ty1_1",
+  "chip": "_chip_14ty1_1 _ds-chip_194o1_1",
+  "details": "_details_14ty1_1 _ds-details_194o1_1",
+  "dialog": "_dialog_14ty1_1 _ds-dialog_194o1_1",
+  "divider": "_divider_14ty1_1",
+  "errorsummary": "_errorsummary_14ty1_1 _ds-error-summary_194o1_1",
+  "field": "_field_14ty1_1 _ds-field_194o1_1",
+  "affixes": "_affixes_14ty1_1 _ds-field-affixes_194o1_1",
+  "count": "_count_14ty1_1",
+  "fieldset": "_fieldset_14ty1_1 _ds-fieldset_194o1_1",
+  "heading": "_heading_14ty1_1 _ds-heading_194o1_1",
+  "stack": "_stack_14ty1_1",
+  "input": "_input_14ty1_1 _ds-input_194o1_1",
+  "grid": "_grid_14ty1_1",
+  "flex": "_flex_14ty1_1",
+  "app": "_app_14ty1_1",
+  "link": "_link_14ty1_1",
+  "logo": "_logo_14ty1_1",
+  "pagination": "_pagination_14ty1_1 _ds-pagination_194o1_1",
+  "popover": "_popover_14ty1_1",
+  "skeleton": "_skeleton_14ty1_1 _ds-skeleton_194o1_1",
+  "spinner": "_spinner_14ty1_1",
+  "table": "_table_14ty1_1 _ds-table_194o1_1",
+  "tabs": "_tabs_14ty1_1 _ds-tabs_194o1_1",
+  "tag": "_tag_14ty1_1 _ds-tag_194o1_1",
+  "validation": "_validation_14ty1_1 _ds-validation-message_194o1_1",
+  "body": "_body_14ty1_136"
 }

package/mtds/styles.module.css.js

@@ -1,74 +1,76 @@
-const _ = "_alert_1drby_1 _ds-alert_1w6ss_1", s = "_avatar_1drby_1 _ds-avatar_1w6ss_1", d = "_badge_1drby_1", t = "_breadcrumbs_1drby_1 _ds-breadcrumbs_1w6ss_1", o = "_button_1drby_1 _ds-button_1w6ss_1", a = "_card_1drby_1", r = "_chip_1drby_1 _ds-chip_1w6ss_1", n = "_details_1drby_1 _ds-details_1w6ss_1", e = "_dialog_1drby_1 _ds-modal_1w6ss_1", i = "__fadein_1drby_1", b = "_divider_1drby_1", c = "_errorsummary_1drby_1 _ds-error-summary_1w6ss_1", l = "_field_1drby_1 _ds-field_1w6ss_1", y = "_affixes_1drby_1 _ds-field-affixes_1w6ss_1", p = "_count_1drby_1", f = "_fieldset_1drby_1 _ds-fieldset_1w6ss_1", g = "_heading_1drby_1 _ds-heading_1w6ss_1", w = "_input_1drby_1 _ds-input_1w6ss_1", u = "_grid_1drby_1", m = "_flex_1drby_1", v = "_app_1drby_1", h = "_link_1drby_1", x = "_logo_1drby_1 _ds-focus_1w6ss_1", k = "_pagination_1drby_1 _ds-pagination_1w6ss_1", S = "_popover_1drby_1", j = "_skeleton_1drby_1 _ds-skeleton_1w6ss_1", q = "_spinner_1drby_1", z = "_table_1drby_1 _ds-table_1w6ss_1", A = "__scrollShadow_1drby_1", B = "_tabs_1drby_1 _ds-tabs_1w6ss_1", C = "_tag_1drby_1 _ds-tag_1w6ss_1", D = "__tooltip_1drby_1", E = "_validation_1drby_1 _ds-validation-message_1w6ss_1", F = "_body_1drby_143", G = {
+const _ = "_alert_14ty1_1 _ds-alert_194o1_1", t = "_avatar_14ty1_1 _ds-avatar_194o1_1", o = "_badge_14ty1_1", s = "_breadcrumbs_14ty1_1 _ds-breadcrumbs_194o1_1", a = "_button_14ty1_1 _ds-button_194o1_1", n = "_card_14ty1_1", d = "_group_14ty1_1", e = "_chip_14ty1_1 _ds-chip_194o1_1", i = "_details_14ty1_1 _ds-details_194o1_1", c = "_dialog_14ty1_1 _ds-dialog_194o1_1", r = "_divider_14ty1_1", l = "_errorsummary_14ty1_1 _ds-error-summary_194o1_1", y = "_field_14ty1_1 _ds-field_194o1_1", p = "_affixes_14ty1_1 _ds-field-affixes_194o1_1", g = "_count_14ty1_1", b = "_fieldset_14ty1_1 _ds-fieldset_194o1_1", u = "_heading_14ty1_1 _ds-heading_194o1_1", f = "_stack_14ty1_1", v = "_input_14ty1_1 _ds-input_194o1_1", m = "_grid_14ty1_1", h = "_flex_14ty1_1", k = "_app_14ty1_1", x = "_link_14ty1_1", w = "_logo_14ty1_1", S = "_pagination_14ty1_1 _ds-pagination_194o1_1", j = "_popover_14ty1_1", q = "_skeleton_14ty1_1 _ds-skeleton_194o1_1", z = "_spinner_14ty1_1", A = "_table_14ty1_1 _ds-table_194o1_1", B = "__scrollShadow_14ty1_1", C = "_tabs_14ty1_1 _ds-tabs_194o1_1", D = "_tag_14ty1_1 _ds-tag_194o1_1", E = "__tooltip_14ty1_1", F = "_validation_14ty1_1 _ds-validation-message_194o1_1", G = "_body_14ty1_136", H = {
   alert: _,
-  avatar: s,
-  badge: d,
-  breadcrumbs: t,
-  button: o,
-  card: a,
-  chip: r,
-  details: n,
-  dialog: e,
-  _fadein: i,
-  divider: b,
-  errorsummary: c,
-  field: l,
-  affixes: y,
-  count: p,
-  fieldset: f,
-  heading: g,
-  input: w,
-  grid: u,
-  flex: m,
-  app: v,
-  link: h,
-  logo: x,
-  pagination: k,
-  popover: S,
-  skeleton: j,
-  spinner: q,
-  table: z,
-  _scrollShadow: A,
-  tabs: B,
-  tag: C,
-  _tooltip: D,
-  validation: E,
-  body: F
+  avatar: t,
+  badge: o,
+  breadcrumbs: s,
+  button: a,
+  card: n,
+  group: d,
+  chip: e,
+  details: i,
+  dialog: c,
+  divider: r,
+  errorsummary: l,
+  field: y,
+  affixes: p,
+  count: g,
+  fieldset: b,
+  heading: u,
+  stack: f,
+  input: v,
+  grid: m,
+  flex: h,
+  app: k,
+  link: x,
+  logo: w,
+  pagination: S,
+  popover: j,
+  skeleton: q,
+  spinner: z,
+  table: A,
+  _scrollShadow: B,
+  tabs: C,
+  tag: D,
+  _tooltip: E,
+  validation: F,
+  body: G
 };
 export {
-  i as _fadein,
-  A as _scrollShadow,
-  D as _tooltip,
-  y as affixes,
+  B as _scrollShadow,
+  E as _tooltip,
+  p as affixes,
   _ as alert,
-  v as app,
-  s as avatar,
-  d as badge,
-  F as body,
-  t as breadcrumbs,
-  o as button,
-  a as card,
-  r as chip,
-  p as count,
-  G as default,
-  n as details,
-  e as dialog,
-  b as divider,
-  c as errorsummary,
-  l as field,
-  f as fieldset,
-  m as flex,
-  u as grid,
-  g as heading,
-  w as input,
-  h as link,
-  x as logo,
-  k as pagination,
-  S as popover,
-  j as skeleton,
-  q as spinner,
-  z as table,
-  B as tabs,
-  C as tag,
-  E as validation
+  k as app,
+  t as avatar,
+  o as badge,
+  G as body,
+  s as breadcrumbs,
+  a as button,
+  n as card,
+  e as chip,
+  g as count,
+  H as default,
+  i as details,
+  c as dialog,
+  r as divider,
+  l as errorsummary,
+  y as field,
+  b as fieldset,
+  h as flex,
+  m as grid,
+  d as group,
+  u as heading,
+  v as input,
+  x as link,
+  w as logo,
+  S as pagination,
+  j as popover,
+  q as skeleton,
+  z as spinner,
+  f as stack,
+  A as table,
+  C as tabs,
+  D as tag,
+  F 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-observer.js

@@ -1,22 +1,25 @@
 import i from "../styles.module.css.js";
-import { onMutation as f, attr as m } from "../utils.js";
-const l = i.table.split(" ")[0];
-function b(o) {
-  var r, n;
-  for (const e of o) if (e instanceof HTMLTableElement) {
-    const a = Array.from(((n = (r = e.tHead) == null ? void 0 : r.rows[0]) == null ? void 0 : n.cells) || [], (s) => {
-      var t;
-      return (t = s.innerText) == null ? void 0 : t.trim();
-    });
-    for (const s of e.tBodies)
-      for (const t of s.rows)
-        for (const c of t.cells)
-          m(c, "data-th", a[c.cellIndex] || ":empty");
+import { onMutation as a, attr as o } from "../utils.js";
+const f = i.table.split(" ")[0];
+function p(r) {
+  for (const t of r) {
+    const n = [];
+    o(t, "role", "table"), t.caption && o(t.caption, "role", "caption");
+    for (const s of [t.tHead, t.tFoot, ...t.tBodies])
+      if (s) {
+        o(s, "role", "rowgroup");
+        const l = s.nodeName === "TBODY";
+        for (const c of s.rows) {
+          o(c, "role", "row");
+          for (const e of c.cells)
+            l ? o(e, "data-th", n[e.cellIndex] || ":empty") : n.push(e.innerText.trim()), e.nodeName === "TD" ? o(e, "role", "cell") : (o(e, "role", l ? "rowheader" : "columnheader"), o(e, "scope", l ? "row" : "col"));
+        }
+      }
   }
 }
-const y = (o) => f(o, l, b), T = (o) => f(o, l, !1);
+const u = (r) => a(r, f, p), b = (r) => a(r, f, !1);
 export {
-  y as observe,
-  T as unobserve
+  u as observe,
+  b as unobserve
 };
 //# sourceMappingURL=table-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { attr, onMutation } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n  for(const table of tables) if (table instanceof HTMLTableElement) {\n    const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n    for (const tbody of table.tBodies) {\n      for (const row of tbody.rows) {\n        for (const cell of row.cells) {\n          attr(cell, 'data-th', ths[cell.cellIndex] || ':empty');\n        }\n      }\n    }\n  }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_TABLE, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_TABLE, false);\n"],"names":["CSS_TABLE","styles","process","tables","table","ths","_b","_a","el","tbody","row","cell","attr","observe","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC;AAE3C,SAASC,EAAQC,GAAmC;;AAClD,aAAUC,KAASD,EAAY,KAAAC,aAAiB,kBAAkB;AAChE,UAAMC,IAAM,MAAM,OAAKC,KAAAC,IAAAH,EAAM,UAAN,gBAAAG,EAAa,KAAK,OAAlB,gBAAAD,EAAsB,UAAS,IAAI,CAACE,MAAO;;AAAA,cAAAD,IAAAC,EAAG,cAAH,gBAAAD,EAAc;AAAA,KAAM;AAC3E,eAAAE,KAASL,EAAM;AACb,iBAAAM,KAAOD,EAAM;AACX,mBAAAE,KAAQD,EAAI;AACrB,UAAAE,EAAKD,GAAM,WAAWN,EAAIM,EAAK,SAAS,KAAK,QAAQ;AAAA,EAG3D;AAEJ;AAEO,MAAME,IAAU,CAACL,MAAgBM,EAAWN,GAAIR,GAAWE,CAAO,GAC5Da,IAAY,CAACP,MAAgBM,EAAWN,GAAIR,GAAW,EAAK;"}
+{"version":3,"file":"table-observer.js","sources":["../../designsystem/table/table-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, onMutation } from \"../utils\";\nconst CSS_TABLE = styles.table.split(\" \")[0];\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n  for (const table of tables as HTMLCollectionOf<HTMLTableElement>) {\n    const ths: string[] = []; // Add data-th=\"\" to each cell to support data-mobile designs\n\n    attr(table, \"role\", \"table\"); // Add helping role=\"\" to ensure screen readers understand the table regardless of CSS display\n    if (table.caption) attr(table.caption, \"role\", \"caption\");\n    for (const group of [table.tHead, table.tFoot, ...table.tBodies])\n      if (group) {\n        attr(group, \"role\", \"rowgroup\");\n        const isTbody = group.nodeName === \"TBODY\";\n\n        for (const row of group.rows) {\n          attr(row, \"role\", \"row\");\n          for (const cell of row.cells) {\n            if (isTbody) attr(cell, \"data-th\", ths[cell.cellIndex] || \":empty\");\n            else ths.push(cell.innerText.trim()); // Using innerText to only include visible text\n            if (cell.nodeName === \"TD\") attr(cell, \"role\", \"cell\");\n            else {\n              attr(cell, \"role\", isTbody ? \"rowheader\" : \"columnheader\");\n              attr(cell, \"scope\", isTbody ? \"row\" : \"col\");\n            }\n          }\n        }\n      }\n  }\n}\n\nexport const observe = (el: Element) => onMutation(el, CSS_TABLE, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_TABLE, false);\n"],"names":["CSS_TABLE","styles","process","tables","table","ths","attr","group","isTbody","row","cell","observe","el","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC;AAE3C,SAASC,EAAQC,GAAmC;AAClD,aAAWC,KAASD,GAA8C;AAChE,UAAME,IAAgB,CAAC;AAElB,IAAAC,EAAAF,GAAO,QAAQ,OAAO,GACvBA,EAAM,WAASE,EAAKF,EAAM,SAAS,QAAQ,SAAS;AAC7C,eAAAG,KAAS,CAACH,EAAM,OAAOA,EAAM,OAAO,GAAGA,EAAM,OAAO;AAC7D,UAAIG,GAAO;AACJ,QAAAD,EAAAC,GAAO,QAAQ,UAAU;AACxB,cAAAC,IAAUD,EAAM,aAAa;AAExB,mBAAAE,KAAOF,EAAM,MAAM;AACvB,UAAAD,EAAAG,GAAK,QAAQ,KAAK;AACZ,qBAAAC,KAAQD,EAAI;AACjB,YAAAD,MAAcE,GAAM,WAAWL,EAAIK,EAAK,SAAS,KAAK,QAAQ,IACzDL,EAAA,KAAKK,EAAK,UAAU,MAAM,GAC/BA,EAAK,aAAa,OAAWJ,EAAAI,GAAM,QAAQ,MAAM,KAEnDJ,EAAKI,GAAM,QAAQF,IAAU,cAAc,cAAc,GACzDF,EAAKI,GAAM,SAASF,IAAU,QAAQ,KAAK;AAAA,QAE/C;AAAA,MACF;AAAA,EACF;AAEN;AAEO,MAAMG,IAAU,CAACC,MAAgBC,EAAWD,GAAIZ,GAAWE,CAAO,GAC5DY,IAAY,CAACF,MAAgBC,EAAWD,GAAIZ,GAAW,EAAK;"}

package/mtds/table/table.d.ts

@@ -0,0 +1,12 @@
+export type TableProps = React.ComponentPropsWithoutRef<"table"> & {
+    "data-align"?: "start | center";
+    "data-border"?: boolean;
+    "data-fixed"?: boolean;
+    "data-mobile"?: "divided" | "spaced" | "stacked";
+};
+export declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    "data-align"?: "start | center";
+    "data-border"?: boolean;
+    "data-fixed"?: boolean;
+    "data-mobile"?: "divided" | "spaced" | "stacked";
+} & React.RefAttributes<HTMLTableElement>>;

package/mtds/table/table.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { clsx as m } from "../external/clsx/dist/clsx.js";
+import { forwardRef as a } from "react";
+import f from "../styles.module.css.js";
+const c = a(function({ className: r, ...o }, t) {
+  return /* @__PURE__ */ e("table", { className: m(f.table, r), ref: t, ...o });
+});
+export {
+  c as Table
+};
+//# sourceMappingURL=table.js.map

package/mtds/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../designsystem/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type TableProps = React.ComponentPropsWithoutRef<\"table\"> & {\n\t\"data-align\"?: \"start | center\";\n\t\"data-border\"?: boolean;\n\t\"data-fixed\"?: boolean;\n\t\"data-mobile\"?: \"divided\" | \"spaced\" | \"stacked\";\n};\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(function Table(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<table className={clsx(styles.table, className)} ref={ref} {...rest} />\n\t);\n});\n"],"names":["Table","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAWa,MAAAA,IAAQC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AAEA,SAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWC,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC;"}

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

@@ -1,13 +1,14 @@
 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)[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const React: Story;
 export declare const DefaultTanstack: Story;
 export declare const HeadingsSimple: Story;
 export declare const HeadingsTanstack: Story;

package/mtds/tabs/tabs.d.ts

@@ -0,0 +1,10 @@
+import type * as UTabs from "@u-elements/u-tabs";
+export type TabsProps = UTabs.ReactUtabs;
+export type TabsListProps = UTabs.ReactUtablist;
+export type TabsPanelProps = UTabs.ReactUtabpanel;
+export type TabsTabProps = UTabs.ReactUtab;
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<UTabs.ReactUtabs, "ref"> & React.RefAttributes<UTabs.UHTMLTabsElement>> & {
+    List: React.ForwardRefExoticComponent<Omit<UTabs.ReactUtablist, "ref"> & React.RefAttributes<UTabs.UHTMLTabListElement>>;
+    Panel: React.ForwardRefExoticComponent<Omit<UTabs.ReactUtabpanel, "ref"> & React.RefAttributes<UTabs.UHTMLTabPanelElement>>;
+    Tab: React.ForwardRefExoticComponent<Omit<UTabs.ReactUtab, "ref"> & React.RefAttributes<UTabs.UHTMLTabElement>>;
+};

package/mtds/tabs/tabs.js

@@ -0,0 +1,28 @@
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as b } from "../external/clsx/dist/clsx.js";
+import { forwardRef as o } from "react";
+import c from "../styles.module.css.js";
+import "../external/@u-elements/u-tabs/dist/u-tabs.js";
+const i = o(function({ className: s, ...t }, a) {
+  return /* @__PURE__ */ n("u-tabs", { class: b(c.tabs, s), ref: a, ...t });
+}), e = o(
+  function({ className: s, ...t }, a) {
+    return /* @__PURE__ */ n("u-tablist", { class: s, ref: a, ...t });
+  }
+), u = o(
+  function({ className: s, ...t }, a) {
+    return /* @__PURE__ */ n("u-tabpanel", { class: s, ref: a, ...t });
+  }
+), T = o(
+  function({ className: s, ...t }, a) {
+    return /* @__PURE__ */ n("u-tab", { class: s, ref: a, ...t });
+  }
+), L = Object.assign(i, {
+  List: e,
+  Panel: u,
+  Tab: T
+});
+export {
+  L as Tabs
+};
+//# sourceMappingURL=tabs.js.map

package/mtds/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../designsystem/tabs/tabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport \"@u-elements/u-tabs\";\nimport type * as UTabs from \"@u-elements/u-tabs\";\n\nexport type TabsProps = UTabs.ReactUtabs;\nconst TabsComp = forwardRef<UTabs.UHTMLTabsElement, TabsProps>(function Tabs(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <u-tabs class={clsx(styles.tabs, className)} ref={ref} {...rest} />;\n});\n\nexport type TabsListProps = UTabs.ReactUtablist;\nconst TabsList = forwardRef<UTabs.UHTMLTabListElement, TabsListProps>(\n\tfunction TabsList({ className, ...rest }, ref) {\n\t\treturn <u-tablist class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport type TabsPanelProps = UTabs.ReactUtabpanel;\nconst TabsPanel = forwardRef<UTabs.UHTMLTabPanelElement, TabsPanelProps>(\n\tfunction TabsPanel({ className, ...rest }, ref) {\n\t\treturn <u-tabpanel class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport type TabsTabProps = UTabs.ReactUtab;\nconst TabsTab = forwardRef<UTabs.UHTMLTabElement, TabsTabProps>(\n\tfunction TabsTab({ className, ...rest }, ref) {\n\t\treturn <u-tab class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport const Tabs = Object.assign(TabsComp, {\n\tList: TabsList,\n\tPanel: TabsPanel,\n\tTab: TabsTab,\n});\n"],"names":["TabsComp","forwardRef","className","rest","ref","jsx","clsx","styles","TabsList","TabsPanel","TabsTab","Tabs"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAA8C,SAC9D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,UAAO,EAAA,OAAOC,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AACzE,CAAC,GAGKK,IAAWP;AAAA,EAChB,SAAkB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC9C,6BAAQ,aAAU,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE1D,GAGMM,IAAYR;AAAA,EACjB,SAAmB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC/C,6BAAQ,cAAW,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE3D,GAGMO,IAAUT;AAAA,EACf,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC7C,6BAAQ,SAAM,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAEtD,GAEaQ,IAAO,OAAO,OAAOX,GAAU;AAAA,EAC3C,MAAMQ;AAAA,EACN,OAAOC;AAAA,EACP,KAAKC;AACN,CAAC;"}

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

@@ -5,4 +5,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const React: Story;
 export declare const Sizes: Story;

package/mtds/tag/tag.d.ts

@@ -0,0 +1,6 @@
+export type TagProps = React.ComponentPropsWithoutRef<"span"> & {
+    "data-color"?: "neutral" | "info" | "success" | "warning" | "danger";
+};
+export declare const Tag: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    "data-color"?: "neutral" | "info" | "success" | "warning" | "danger";
+} & React.RefAttributes<HTMLSpanElement>>;

package/mtds/tag/tag.js

@@ -0,0 +1,11 @@
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as s } from "../external/clsx/dist/clsx.js";
+import { forwardRef as a } from "react";
+import f from "../styles.module.css.js";
+const g = a(function({ className: r, ...o }, t) {
+  return /* @__PURE__ */ m("span", { className: s(f.tag, r), ref: t, ...o });
+});
+export {
+  g as Tag
+};
+//# sourceMappingURL=tag.js.map

package/mtds/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../designsystem/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type TagProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-color\"?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n};\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n\t{ className, ...rest },\n\tref,\n) {\n\treturn <span className={clsx(styles.tag, className)} ref={ref} {...rest} />;\n});\n"],"names":["Tag","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQa,MAAAA,IAAMC,EAAsC,SACxD,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}

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

@@ -1,13 +1,14 @@
 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)[];
 };
 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 WithIcon: Story;
 export declare const WithIconOverwrite: Story;

package/mtds/tooltip/tooltip-observer.js

@@ -1,19 +1,25 @@
-import L from "../styles.module.css.js";
-import { IS_BROWSER as f, attr as w, on as d, QUICK_EVENT as m, anchorPosition as p } from "../utils.js";
-const S = L._tooltip.split(" "), r = "aria-describedby", b = "Escape", s = "aria-labelledby", _ = "--mtds-tooltip-position", y = 100, u = "mtds-tooltip";
-let o = null, E = Number.NEGATIVE_INFINITY, c = 0, e = null;
-function T({ target: i, type: t, key: l }) {
-  if (t === "keydown" && l !== b) return;
-  const n = E + y - Date.now();
-  clearTimeout(c), c = setTimeout(A, Math.max(n, 0), l === b ? null : i);
+import w from "../styles.module.css.js";
+import { IS_BROWSER as O, attr as l, on as a, QUICK_EVENT as c, anchorPosition as p } from "../utils.js";
+const S = w._tooltip.split(" "), r = "aria-describedby", E = "Escape", d = "aria-labelledby", _ = "--mtds-tooltip-position", y = 300, u = "mtds-tooltip";
+let e = null, L = Number.NEGATIVE_INFINITY, b = 0, o = null;
+function m({ target: n, type: t, key: i }) {
+  if (t === "keydown" && i !== E) return;
+  const s = L + y - Date.now();
+  clearTimeout(b), b = setTimeout(
+    P,
+    Math.max(s, 0),
+    i === E ? null : n
+  );
 }
-function A(i) {
-  var a;
-  if (E = Date.now(), !e || i === e) return;
-  let t = ((a = i == null ? void 0 : i.closest) == null ? void 0 : a.call(i, "[data-tooltip]")) || null;
-  if (t === o) return;
-  const l = (t == null ? void 0 : t.getAttribute("data-tooltip")) || "", n = (t == null ? void 0 : t.getAttribute("data-tooltip-position")) || window.getComputedStyle(t || document.body).getPropertyValue(_) || "top", I = !!(t != null && t.innerText.trim()) || (t == null ? void 0 : t.hasAttribute(s)) || (t == null ? void 0 : t.hasAttribute("aria-label"));
-  (!l || l === "false" || l === "true" || n === "none") && (t = null), t && (e.textContent = l), o == null || o.removeAttribute(o.getAttribute(s) === u ? s : r), p(e, !1), o = t, o == null || o.setAttribute(I ? r : s, u), e.togglePopover(!!t), p(e, t, n);
+function P(n) {
+  var T;
+  if (L = Date.now(), !o || n === o) return;
+  let t = ((T = n == null ? void 0 : n.closest) == null ? void 0 : T.call(n, "[data-tooltip]")) || null;
+  if (t === e) return;
+  const i = t && l(t, "data-tooltip") || "", s = t && l(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue(_) || "top";
+  (!i || i === "false" || i === "true" || s === "none") && (t = null), t && (o.textContent = i);
+  const f = e && l(e, d) === u, I = !!(t != null && t.innerText.trim()) || (t == null ? void 0 : t.hasAttribute(d)) || (t == null ? void 0 : t.hasAttribute("aria-label"));
+  e == null || e.removeAttribute(f ? d : r), p(o, !1), e = t, e && l(e, I ? r : d, u), o.togglePopover(!!t), p(o, t, s);
 }
-f && !document.getElementById(u) && (e = document.body.appendChild(document.createElement("div")), e.classList.add(...S), e.id = u, w(e, "popover", "manual"), d(document, "blur,focus,mouseout,mouseover", T, m), d(window, "keydown", T, m), d(window, "blur", T, m));
+O && !document.getElementById(u) && (o = document.body.appendChild(document.createElement("div")), o.classList.add(...S), o.id = u, l(o, "popover", "manual"), a(document, "blur,focus,mouseout,mouseover", m, c), a(window, "keydown", m, c), a(window, "blur", m, c));
 //# sourceMappingURL=tooltip-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\n\nconst CSS_TOOLTIP = styles._tooltip.split(' ');\nconst DESCRIBEDBY = 'aria-describedby';\nconst ESC = 'Escape';\nconst LABELLEDBY = 'aria-labelledby';\nconst POSITION_CSS_PROPERTY = '--mtds-tooltip-position';\nconst THROTTLE_DELAY = 100;\nconst TOOLTIP_ID = 'mtds-tooltip';\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target, type, key }: Event & { key?: string }) {\n  if (type === 'keydown' && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n  const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n  clearTimeout(THROTTLE);\n  THROTTLE = setTimeout(handleMoveThrottled, Math.max(wait, 0), key === ESC ? null : target);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n  LAST_CALL = Date.now();\n\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  let anchor = target?.closest?.<HTMLElement>('[data-tooltip]') || null;\n  \n  // No need to update\n  if (anchor === ANCHOR) return;\n\n  const content = anchor?.getAttribute('data-tooltip') || '';\n  const position = anchor?.getAttribute('data-tooltip-position') || window.getComputedStyle(anchor || document.body).getPropertyValue(POSITION_CSS_PROPERTY) || 'top';\n  const hasLabel = Boolean(anchor?.innerText.trim()) || anchor?.hasAttribute(LABELLEDBY) || anchor?.hasAttribute('aria-label');\n\n  if (!content || content === 'false' || content === 'true' || position === 'none') anchor = null; // Do not show tooltip if boolish value\n  if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n  ANCHOR?.removeAttribute(ANCHOR.getAttribute(LABELLEDBY) === TOOLTIP_ID ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n  anchorPosition(TOOLTIP, false); // Reset anchor position\n\n  ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n  ANCHOR?.setAttribute(hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n  TOOLTIP.togglePopover(!!anchor);\n  anchorPosition(TOOLTIP, anchor, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n  TOOLTIP = document.body.appendChild(document.createElement('div'));\n  TOOLTIP.classList.add(...CSS_TOOLTIP);\n  TOOLTIP.id = TOOLTIP_ID;\n  attr(TOOLTIP, 'popover', 'manual');\n  on(document, 'blur,focus,mouseout,mouseover', handleMove, QUICK_EVENT);\n  on(window, 'keydown', handleMove, QUICK_EVENT);\n  on(window, 'blur', handleMove, QUICK_EVENT);\n}"],"names":["CSS_TOOLTIP","styles","DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","type","key","wait","handleMoveThrottled","anchor","_a","content","position","hasLabel","anchorPosition","IS_BROWSER","attr","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,SAAS,MAAM,GAAG,GACvCC,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa;AAEnB,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC/D,MAAAD,MAAS,aAAaC,MAAQZ,EAAK;AACvC,QAAMa,IAAOP,IAAYH,IAAiB,KAAK,IAAI;AACnD,eAAaI,CAAQ,GACVA,IAAA,WAAWO,GAAqB,KAAK,IAAID,GAAM,CAAC,GAAGD,MAAQZ,IAAM,OAAOU,CAAM;AAC3F;AAGA,SAASI,EAAoBJ,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIO,MAASC,IAAAN,KAAA,gBAAAA,EAAQ,YAAR,gBAAAM,EAAA,KAAAN,GAA+B,sBAAqB;AAGjE,MAAIK,MAAWV,EAAQ;AAEvB,QAAMY,KAAUF,KAAA,gBAAAA,EAAQ,aAAa,oBAAmB,IAClDG,KAAWH,KAAA,gBAAAA,EAAQ,aAAa,6BAA4B,OAAO,iBAAiBA,KAAU,SAAS,IAAI,EAAE,iBAAiBb,CAAqB,KAAK,OACxJiB,IAAW,GAAQJ,KAAA,QAAAA,EAAQ,UAAU,YAAWA,KAAA,gBAAAA,EAAQ,aAAad,QAAec,KAAA,gBAAAA,EAAQ,aAAa;AAE3G,GAAA,CAACE,KAAWA,MAAY,WAAWA,MAAY,UAAUC,MAAa,YAAiBH,IAAA,OACvFA,QAAgB,cAAcE,IAElCZ,KAAA,QAAAA,EAAQ,gBAAgBA,EAAO,aAAaJ,CAAU,MAAMG,IAAaH,IAAaF,IACtFqB,EAAeZ,GAAS,EAAK,GAEpBH,IAAAU,GACTV,KAAA,QAAAA,EAAQ,aAAac,IAAWpB,IAAcE,GAAYG,IAClDI,EAAA,cAAc,CAAC,CAACO,CAAM,GACfK,EAAAZ,GAASO,GAAQG,CAAQ;AAC1C;AAGIG,KAAc,CAAC,SAAS,eAAejB,CAAU,MACnDI,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACzDA,EAAA,UAAU,IAAI,GAAGX,CAAW,GACpCW,EAAQ,KAAKJ,GACRkB,EAAAd,GAAS,WAAW,QAAQ,GAC9Be,EAAA,UAAU,iCAAiCd,GAAYe,CAAW,GAClED,EAAA,QAAQ,WAAWd,GAAYe,CAAW,GAC1CD,EAAA,QAAQ,QAAQd,GAAYe,CAAW;"}
+{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, QUICK_EVENT, anchorPosition, attr, on } from \"../utils\";\n\nconst CSS_TOOLTIP = styles._tooltip.split(\" \");\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP_ID = \"mtds-tooltip\";\n\nlet ANCHOR: HTMLElement | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\nlet TOOLTIP: HTMLElement | null = null;\n\nfunction handleMove({ target, type, key }: Event & { key?: string }) {\n  if (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n  const wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n  clearTimeout(THROTTLE);\n  THROTTLE = setTimeout(\n    handleMoveThrottled,\n    Math.max(wait, 0),\n    key === ESC ? null : target\n  );\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleMoveThrottled(target: Element | null) {\n  LAST_CALL = Date.now();\n\n  if (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n  let anchor = target?.closest?.<HTMLElement>(\"[data-tooltip]\") || null;\n\n  // No need to update\n  if (anchor === ANCHOR) return;\n\n  const content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n  const position =\n    (anchor && attr(anchor, \"data-tooltip-position\")) ||\n    window\n      .getComputedStyle(anchor || document.body)\n      .getPropertyValue(POSITION_CSS_PROPERTY) ||\n    \"top\";\n\n  const isHidden =\n    !content ||\n    content === \"false\" ||\n    content === \"true\" ||\n    position === \"none\";\n\n  if (isHidden) anchor = null; // Do not show tooltip if boolish value\n  if (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n  const hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP_ID;\n  const hasLabel =\n    Boolean(anchor?.innerText.trim()) ||\n    anchor?.hasAttribute(LABELLEDBY) ||\n    anchor?.hasAttribute(\"aria-label\");\n\n  ANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n  anchorPosition(TOOLTIP, false); // Reset anchor position\n\n  ANCHOR = anchor; // Store new anchor - might be null if no new anchor\n  if (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP_ID); // Use tooltip as description if allready has label\n  TOOLTIP.togglePopover(!!anchor);\n  anchorPosition(TOOLTIP, anchor, position);\n}\n\n// Initialize if in browser and not already initialized\nif (IS_BROWSER && !document.getElementById(TOOLTIP_ID)) {\n  TOOLTIP = document.body.appendChild(document.createElement(\"div\"));\n  TOOLTIP.classList.add(...CSS_TOOLTIP);\n  TOOLTIP.id = TOOLTIP_ID;\n  attr(TOOLTIP, \"popover\", \"manual\");\n  on(document, \"blur,focus,mouseout,mouseover\", handleMove, QUICK_EVENT);\n  on(window, \"keydown\", handleMove, QUICK_EVENT);\n  on(window, \"blur\", handleMove, QUICK_EVENT);\n}\n"],"names":["CSS_TOOLTIP","styles","DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP_ID","ANCHOR","LAST_CALL","THROTTLE","TOOLTIP","handleMove","target","type","key","wait","handleMoveThrottled","anchor","_a","content","attr","position","hadLabel","hasLabel","anchorPosition","IS_BROWSER","on","QUICK_EVENT"],"mappings":";;AAGA,MAAMA,IAAcC,EAAO,SAAS,MAAM,GAAG,GACvCC,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAa;AAEnB,IAAIC,IAA6B,MAC7BC,IAAY,OAAO,mBACnBC,IAAmD,GACnDC,IAA8B;AAElC,SAASC,EAAW,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC/D,MAAAD,MAAS,aAAaC,MAAQZ,EAAK;AACvC,QAAMa,IAAOP,IAAYH,IAAiB,KAAK,IAAI;AACnD,eAAaI,CAAQ,GACVA,IAAA;AAAA,IACTO;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQZ,IAAM,OAAOU;AAAA,EACvB;AACF;AAGA,SAASI,EAAoBJ,GAAwB;;AAG/C,MAFJJ,IAAY,KAAK,IAAI,GAEjB,CAACE,KAAWE,MAAWF,EAAS;AACpC,MAAIO,MAASC,IAAAN,KAAA,gBAAAA,EAAQ,YAAR,gBAAAM,EAAA,KAAAN,GAA+B,sBAAqB;AAGjE,MAAIK,MAAWV,EAAQ;AAEvB,QAAMY,IAAWF,KAAUG,EAAKH,GAAQ,cAAc,KAAM,IACtDI,IACHJ,KAAUG,EAAKH,GAAQ,uBAAuB,KAC/C,OACG,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBb,CAAqB,KACzC;AAQF,GALE,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEQJ,IAAA,OACnBA,QAAgB,cAAcE;AAElC,QAAMG,IAAWf,KAAUa,EAAKb,GAAQJ,CAAU,MAAMG,GAClDiB,IACJ,GAAQN,KAAA,QAAAA,EAAQ,UAAU,YAC1BA,KAAA,gBAAAA,EAAQ,aAAad,QACrBc,KAAA,gBAAAA,EAAQ,aAAa;AAEf,EAAAV,KAAA,QAAAA,EAAA,gBAAgBe,IAAWnB,IAAaF,IAChDuB,EAAed,GAAS,EAAK,GAEpBH,IAAAU,GACLV,KAAaa,EAAAb,GAAQgB,IAAWtB,IAAcE,GAAYG,CAAU,GAChEI,EAAA,cAAc,CAAC,CAACO,CAAM,GACfO,EAAAd,GAASO,GAAQI,CAAQ;AAC1C;AAGII,KAAc,CAAC,SAAS,eAAenB,CAAU,MACnDI,IAAU,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC,GACzDA,EAAA,UAAU,IAAI,GAAGX,CAAW,GACpCW,EAAQ,KAAKJ,GACRc,EAAAV,GAAS,WAAW,QAAQ,GAC9BgB,EAAA,UAAU,iCAAiCf,GAAYgB,CAAW,GAClED,EAAA,QAAQ,WAAWf,GAAYgB,CAAW,GAC1CD,EAAA,QAAQ,QAAQf,GAAYgB,CAAW;"}

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

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

package/mtds/utils.js

@@ -1,50 +1,50 @@
 const w = typeof window < "u" && typeof document < "u", U = { capture: !0, passive: !0 };
-function C(t, e, n) {
-  return n === void 0 ? t.getAttribute(e) ?? null : (n === null ? t.removeAttribute(e) : t.getAttribute(e) !== n && t.setAttribute(e, n), null);
+function C(t, e, o) {
+  return o === void 0 ? t.getAttribute(e) ?? null : (o === null ? t.removeAttribute(e) : t.getAttribute(e) !== o && t.setAttribute(e, o), null);
 }
 let E = 0;
 const O = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
 function X(t) {
   return t.id || (t.id = `${O}${++E}`), t.id;
 }
-const b = (t, e, n) => {
-  for (const i of n[0].split(","))
-    n[0] = i, e[`${t}EventListener`](...n);
+const b = (t, e, o) => {
+  for (const i of o[0].split(","))
+    o[0] = i, e[`${t}EventListener`](...o);
 }, B = (t, ...e) => b("add", t, e), Y = (t, ...e) => b("remove", t, e), a = /* @__PURE__ */ new Map(), s = w ? document.createElement("div") : null;
 s && C(s, "style", "position:absolute;padding:1px;top:0;left:0px");
 w && B(window, "load,resize,scroll", () => {
   for (const [t, e] of a) e();
 }, U);
 const d = { top: 0, right: 1, bottom: 2, left: 3 };
-function _(t, e, n) {
+function _(t, e, o) {
   var p;
   if (!e || !e.isConnected || !t.isConnected) return a.delete(t);
   if (s != null && s.isConnected || document.body.append(s || ""), !a.has(t)) {
-    const I = d[n] ?? d.bottom;
+    const I = d[o] ?? d.bottom;
     return (p = a.set(t, () => _(t, e, I)).get(t)) == null ? void 0 : p();
   }
-  const { offsetWidth: i, offsetHeight: o } = t, { offsetWidth: c, offsetHeight: u } = e, { width: M, height: m, left: g, top: v } = e.getBoundingClientRect(), f = Math.round(g - (c - M) / 2), r = Math.round(v - (u - m) / 2), T = f - i > 0, y = c + c + i < window.innerWidth, A = r - o > 0, S = r + u + o < window.innerHeight, $ = n === d.bottom && y || !T, x = n === d.bottom && S || !A, H = Math.min(Math.max(10, f - (i - c) / 2), window.innerWidth - i - 10), W = Math.min(Math.max(10, r - (o - u) / 2), window.innerHeight - o - 10), h = n === d.top || n === d.bottom;
-  t.style.left = `${Math.round(h ? H : $ ? f + c : f - i)}px`, t.style.top = `${Math.round(h ? x ? r + u : r - o : W)}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + c + i + 30)} ${Math.round(window.scrollY + r + u + o + 30)}px`);
+  const { offsetWidth: i, offsetHeight: n } = t, { offsetWidth: c, offsetHeight: u } = e, { width: M, height: m, left: g, top: v } = e.getBoundingClientRect(), f = Math.round(g - (c - M) / 2), r = Math.round(v - (u - m) / 2), T = f - i > 0, y = c + c + i < window.innerWidth, A = r - n > 0, S = r + u + n < window.innerHeight, $ = o === d.bottom && y || !T, x = o === d.bottom && S || !A, H = Math.min(Math.max(10, f - (i - c) / 2), window.innerWidth - i - 10), W = Math.min(Math.max(10, r - (n - u) / 2), window.innerHeight - n - 10), h = o === d.top || o === d.bottom;
+  t.style.left = `${Math.round(h ? H : $ ? f + c : f - i)}px`, t.style.top = `${Math.round(h ? x ? r + u : r - n : W)}px`, s == null || s.style.setProperty("translate", `${Math.round(window.scrollX + f + c + i + 30)} ${Math.round(window.scrollY + r + u + n + 30)}px`);
 }
 function F(t) {
   let e = 0;
-  const n = () => setTimeout(i, 200), i = () => {
-    t([], o), e = 0;
-  }, o = new MutationObserver(() => {
-    e || (e = requestAnimationFrame(n));
+  const o = () => setTimeout(i, 200), i = () => {
+    t([], n), e = 0;
+  }, n = new MutationObserver(() => {
+    e || (e = requestAnimationFrame(o));
   });
-  return o;
+  return n;
 }
 const l = /* @__PURE__ */ new WeakMap(), P = (t) => {
-  var n;
+  var o;
   const e = l.get(t);
   if (!e || !t.isConnected)
-    (n = e == null ? void 0 : e.observer) == null || n.disconnect(), l.delete(t);
+    (o = e == null ? void 0 : e.observer) == null || o.disconnect(), l.delete(t);
   else for (const [, i] of e.collections) i();
-}, k = (t, e, n) => {
+}, k = (t, e, o) => {
   const i = t.getElementsByClassName(e);
-  let o = l.get(t);
-  o || (o = { collections: /* @__PURE__ */ new Map(), observer: F(() => P(t)) }, o.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), l.set(t, o)), n ? o.collections.set(e, () => n(i)) : o.collections.delete(e);
+  let n = l.get(t);
+  n || (n = { collections: /* @__PURE__ */ new Map(), observer: F(() => P(t)) }, n.observer.observe(t, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["class"] }), l.set(t, n)), o ? n.collections.set(e, () => o(i)) : n.collections.delete(e);
 }, q = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement);
 export {
   w as IS_BROWSER,

package/mtds/validation/validation.d.ts

@@ -0,0 +1,2 @@
+export type ValidationProps = React.ComponentPropsWithoutRef<"div">;
+export declare const Validation: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;