@mattilsynet/design 2.2.24 → 2.2.26

package/mtds/typography/typography.js

@@ -1,23 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
-import a from "clsx";
-import { forwardRef as e } from "react";
-import c from "../styles.module.css.js";
-const d = e(function({ as: n, className: s, ...o }, t) {
-  return /* @__PURE__ */ r(n || "h2", { className: a(c.heading, s), ref: t, ...o });
-}), l = e(function({ as: n, className: s, ...o }, t) {
-  return /* @__PURE__ */ r(n || "small", { className: a(c.muted, s), ref: t, ...o });
-}), p = e(function({ as: n, className: s, ...o }, t) {
-  return /* @__PURE__ */ r(n || "span", { className: a(c.ingress, s), ref: t, ...o });
-}), N = e(function({ as: n, className: s, ...o }, t) {
-  return /* @__PURE__ */ r(n || "div", { className: a(c.info, s), ref: t, ...o });
-}), I = e(function({ as: n, className: s, ...o }, t) {
-  return /* @__PURE__ */ r(n || "div", { className: a(c.prose, s), ref: t, ...o });
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "../styles.module.css.js";
+const Heading = forwardRef(function Heading2({ as, className, ...rest }, ref) {
+  const Tag = as || "h2";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.heading, className), ref, ...rest });
+});
+const Muted = forwardRef(function Muted2({ as, className, ...rest }, ref) {
+  const Tag = as || "small";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.muted, className), ref, ...rest });
+});
+const Ingress = forwardRef(function Ingress2({ as, className, ...rest }, ref) {
+  const Tag = as || "span";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.ingress, className), ref, ...rest });
+});
+const Info = forwardRef(function Info2({ as, className, ...rest }, ref) {
+  const Tag = as || "div";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.info, className), ref, ...rest });
+});
+const Prose = forwardRef(function Prose2({ as, className, ...rest }, ref) {
+  const Tag = as || "div";
+  return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.prose, className), ref, ...rest });
 });
 export {
-  d as Heading,
-  N as Info,
-  p as Ingress,
-  l as Muted,
-  I as Prose
+  Heading,
+  Info,
+  Ingress,
+  Muted,
+  Prose
 };
 //# sourceMappingURL=typography.js.map

package/mtds/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: HeadingSizes;\n\t\t\t\"data-justify\"?: \"start\" | \"center\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-variant\"?: \"regular\" | \"circle\" }\n\t>;\n\ntype InfoComponent = <As extends React.ElementType = \"div\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Info: InfoComponent = forwardRef<null>(function Info<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: InfoProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\treturn <Tag className={clsx(styles.info, className)} ref={ref} {...rest} />;\n}) as InfoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Prose\n */\nexport type ProseProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-justify\"?: \"start\" | \"center\" | \"end\" }\n\t>;\n\ntype ProseComponent = <As extends React.ElementType = \"div\">(\n\tprops: ProseProps<As>,\n) => JSX.Element;\n\nexport const Prose: ProseComponent = forwardRef<null>(function Prose<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: ProseProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.prose, className)} ref={ref} {...rest} />;\n}) as ProseComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles","Muted","Ingress","Info","Prose"],"mappings":";;;;AAsBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC,EAHWJ,KAAM,MAGhB,EAAI,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAEvE,CAAC,GASYK,IAAwBR,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAEvE,SAAO,gBAAAC,EADKJ,KAAM,SACV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC,GASYM,IAA4BT,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAEzE,SACC,gBAAAC,EAFWJ,KAAM,QAEhB,EAAI,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAEvE,CAAC,GAYYO,IAAsBV,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAEtE,SAAO,gBAAAC,EADKJ,KAAM,OACV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAeYQ,IAAwBX,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAGvE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
+{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: HeadingSizes;\n\t\t\t\"data-justify\"?: \"start\" | \"center\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-variant\"?: \"regular\" | \"circle\" }\n\t>;\n\ntype InfoComponent = <As extends React.ElementType = \"div\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Info: InfoComponent = forwardRef<null>(function Info<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: InfoProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\treturn <Tag className={clsx(styles.info, className)} ref={ref} {...rest} />;\n}) as InfoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Prose\n */\nexport type ProseProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-justify\"?: \"start\" | \"center\" | \"end\" }\n\t>;\n\ntype ProseComponent = <As extends React.ElementType = \"div\">(\n\tprops: ProseProps<As>,\n) => JSX.Element;\n\nexport const Prose: ProseComponent = forwardRef<null>(function Prose<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: ProseProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.prose, className)} ref={ref} {...rest} />;\n}) as ProseComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","Muted","Ingress","Info","Prose"],"mappings":";;;;AAsBO,MAAM,UAA4B,WAAiB,SAASA,SAEjE,EAAE,IAAI,WAAW,GAAG,KAAA,GAA0B,KAA0B;AACzE,QAAM,MAAM,MAAM;AAElB,SACC,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,SAAS,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAEvE,CAAC;AASM,MAAM,QAAwB,WAAiB,SAASC,OAE7D,EAAE,IAAI,WAAW,GAAG,KAAA,GAAwB,KAA0B;AACvE,QAAM,MAAM,MAAM;AAClB,SAAO,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,OAAO,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAC3E,CAAC;AASM,MAAM,UAA4B,WAAiB,SAASC,SAEjE,EAAE,IAAI,WAAW,GAAG,KAAA,GAA0B,KAA0B;AACzE,QAAM,MAAM,MAAM;AAClB,SACC,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,SAAS,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAEvE,CAAC;AAYM,MAAM,OAAsB,WAAiB,SAASC,MAE3D,EAAE,IAAI,WAAW,GAAG,KAAA,GAAuB,KAA0B;AACtE,QAAM,MAAM,MAAM;AAClB,SAAO,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAC1E,CAAC;AAeM,MAAM,QAAwB,WAAiB,SAASC,OAE7D,EAAE,IAAI,WAAW,GAAG,KAAA,GAAwB,KAA0B;AACvE,QAAM,MAAM,MAAM;AAElB,SAAO,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,OAAO,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAC3E,CAAC;"}

package/mtds/utils.d.ts

@@ -3,7 +3,7 @@ export declare const QUICK_EVENT: {
     capture: boolean;
     passive: boolean;
 };
-export declare const IS_BROWSER: boolean;
+export declare const isBrowser: () => boolean;
 export declare function debounce<T extends unknown[]>(callback: (...args: T) => void, delay: number): (this: unknown, ...args: T) => void;
 /**
  * attr
@@ -61,8 +61,12 @@ export declare function onResize(callback: ResizeObserverCallback, element: Elem
  * @returns True if the element is an input like element
  */
 export declare const isInputLike: (el: unknown) => el is HTMLInputElement;
-export declare const toCustomElementProps: ({ className, hidden, open, ...rest }: Record<string, unknown>, klass?: string) => {
-    [x: string]: unknown;
+export declare const toCustomElementProps: <T extends Record<string, unknown>>(rest: T, klass?: string) => T & {
+    suppressHydrationWarning: boolean;
+    "aria-selected": boolean | undefined;
+    class: string;
+    hidden: boolean;
+    open: boolean;
 };
 /**
  * tag
@@ -77,4 +81,9 @@ export declare const MTDSElement: {
     new (): HTMLElement;
     prototype: HTMLElement;
 };
+/**
+ * defineElement
+ * @description Defines a customElement if running in browser and if not already registered
+ */
+export declare const defineElement: (name: string, instance: CustomElementConstructor) => true | void | CustomElementConstructor;
 export {};

package/mtds/utils.js

@@ -1,102 +1,154 @@
-import { autoUpdate as E, computePosition as v, flip as A, shift as C, size as T } from "@floating-ui/dom";
-import L from "clsx";
-import M from "./styles.module.css.js";
-const q = { capture: !0, passive: !0 }, p = typeof window < "u" && typeof document < "u";
-function F(t, e) {
-  let n;
-  return function(...o) {
-    clearTimeout(n), n = setTimeout(() => t.apply(this, o), e);
+import { autoUpdate, computePosition, flip, shift, size } from "@floating-ui/dom";
+import clsx from "clsx";
+import styles from "./styles.module.css.js";
+const QUICK_EVENT = { capture: true, passive: true };
+const isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+function debounce(callback, delay) {
+  let timer;
+  return function(...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback.apply(this, args), delay);
   };
 }
-function f(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 attr(el, name, value) {
+  if (value === void 0) return el.getAttribute(name) ?? null;
+  if (value === null) el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+  return null;
 }
-let S = 0;
-const $ = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-function x(t) {
-  return t.id || (t.id = `${$}${++S}`), t.id;
+let id = 0;
+const UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function useId(el) {
+  if (!el.id) el.id = `${UUID}${++id}`;
+  return el.id;
 }
-const m = (t, e, [...n]) => {
-  for (const o of n[0].split(","))
-    n[0] = o, e[`${t}EventListener`](...n);
-}, h = (t, ...e) => (m("add", t, e), () => H(t, ...e)), H = (t, ...e) => m("remove", t, e), z = (t) => {
-  if (!p || !window.requestAnimationFrame) return;
-  window._mtdsCleanups || (window._mtdsCleanups = /* @__PURE__ */ new Map());
-  const e = () => requestAnimationFrame(() => {
-    const n = String(t).replace(/(\n|\s)/g, "");
-    window._mtdsCleanups?.get(n)?.map((o) => o()), window._mtdsCleanups?.set(n, t());
+const events = (action, element, [...rest]) => {
+  for (const type of rest[0].split(",")) {
+    rest[0] = type;
+    element[`${action}EventListener`](...rest);
+  }
+};
+const on = (element, ...rest) => {
+  events("add", element, rest);
+  return () => off(element, ...rest);
+};
+const off = (element, ...rest) => events("remove", element, rest);
+const onLoaded = (setup) => {
+  if (!isBrowser() || !window.requestAnimationFrame) return;
+  if (!window._mtdsCleanups) window._mtdsCleanups = /* @__PURE__ */ new Map();
+  const run = () => requestAnimationFrame(() => {
+    const key = String(setup).replace(/(\n|\s)/g, "");
+    window._mtdsCleanups?.get(key)?.map((cleanup) => cleanup());
+    window._mtdsCleanups?.set(key, setup());
   });
-  document.readyState === "complete" ? e() : h(window, "load", e);
-}, u = /* @__PURE__ */ new WeakMap(), _ = `.${M.dialog.split(" ")[0]}`;
-function D(t, e, { contain: n, middleware: o, placement: i, ...c } = {}) {
-  if (u.get(t)?.(), u.delete(t), e) {
-    const s = t.closest(_)?.querySelector(":scope > footer"), r = Number(f(t, "data-inset")) || 20, l = { bottom: (s?.clientHeight || 0) + r, left: r, right: r, top: r }, w = f(t, "data-position") ?? "bottom";
-    u.set(
-      t,
-      E(e, t, () => {
-        if (!t.isConnected || !e.isConnected || t.hidden)
-          return D(t, !1);
-        v(e, t, {
-          ...c,
-          placement: i || w,
+  if (document.readyState === "complete") run();
+  else on(window, "load", run);
+};
+const ANCHORED = /* @__PURE__ */ new WeakMap();
+const DIALOG = `.${styles.dialog.split(" ")[0]}`;
+function anchorPosition(target, anchor, { contain, middleware, placement, ...options } = {}) {
+  ANCHORED.get(target)?.();
+  ANCHORED.delete(target);
+  if (anchor) {
+    const footer = target.closest(DIALOG)?.querySelector(":scope > footer");
+    const inset = Number(attr(target, "data-inset")) || 20;
+    const bottom = (footer?.clientHeight || 0) + inset;
+    const padding = { bottom, left: inset, right: inset, top: inset };
+    const position = attr(target, "data-position") ?? "bottom";
+    ANCHORED.set(
+      target,
+      autoUpdate(anchor, target, () => {
+        if (!target.isConnected || !anchor.isConnected || target.hidden)
+          return anchorPosition(target, false);
+        computePosition(anchor, target, {
+          ...options,
+          placement: placement || position,
           middleware: [
-            A({ padding: l }),
-            C(),
-            ...n ? [T({ padding: l, apply: n })] : [],
-            ...o || []
+            flip({ padding }),
+            shift(),
+            ...contain ? [size({ padding, apply: contain })] : [],
+            ...middleware || []
           ]
-        }).then(({ x: y, y: b }) => {
-          t.style.left = `${y}px`, t.style.top = `${b}px`;
+        }).then(({ x, y }) => {
+          target.style.left = `${x}px`;
+          target.style.top = `${y}px`;
         });
       })
     );
   }
 }
-function U(t, e) {
-  let n = 0;
-  const o = Array.isArray(e) || typeof e == "string" ? { attr: e } : e, i = () => setTimeout(c, o?.delay ?? 200), c = () => {
-    if (!p) return r();
-    t(s), s.takeRecords(), n = 0;
-  }, s = new MutationObserver(() => {
-    n || (n = requestAnimationFrame(i));
-  }), r = () => {
+function onMutation(callback, attr2) {
+  let queue = 0;
+  const opt = Array.isArray(attr2) || typeof attr2 === "string" ? { attr: attr2 } : attr2;
+  const onFrame = () => setTimeout(onTimer, opt?.delay ?? 200);
+  const onTimer = () => {
+    if (!isBrowser()) return cleanup();
+    callback(observer);
+    observer.takeRecords();
+    queue = 0;
+  };
+  const observer = new MutationObserver(() => {
+    if (!queue) queue = requestAnimationFrame(onFrame);
+  });
+  const cleanup = () => {
     try {
-      s.disconnect();
-    } catch {
+      observer.disconnect();
+    } catch (_) {
     }
   };
-  return s.observe(o?.root || document.documentElement, {
-    attributeFilter: [].concat(o.attr),
-    attributes: !0,
-    childList: !0,
-    subtree: !0
-  }), t(s), r;
+  observer.observe(opt?.root || document.documentElement, {
+    attributeFilter: [].concat(opt.attr),
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  callback(observer);
+  return cleanup;
 }
-function g(t, e) {
-  const n = new ResizeObserver(t);
-  return n.observe(e), () => n.disconnect();
+function onResize(callback, element) {
+  const resize = new ResizeObserver(callback);
+  resize.observe(element);
+  return () => resize.disconnect();
 }
-const k = (t) => t instanceof HTMLElement && "validity" in t && !(t instanceof HTMLButtonElement), d = "aria-selected", P = ({ className: t, hidden: e, open: n, ...o }, i) => (o.suppressHydrationWarning = !0, o[d] !== void 0 && (o[d] = `${(o[d] || "false") !== "false"}`), (t || i) && (o.class = L(i, t)), e && (o.hidden = !0), n && (o.open = !0), o), W = (t, e, n) => {
-  const o = document.createElement(t);
-  if (n && (o.textContent = n), e) for (const [i, c] of Object.entries(e)) f(o, i, c);
-  return o;
-}, B = typeof HTMLElement > "u" ? class {
+const isInputLike = (el) => el instanceof HTMLElement && "validity" in el && !(el instanceof HTMLButtonElement);
+const SELECTED = "aria-selected";
+const toCustomElementProps = (rest, klass) => Object.assign({}, rest, {
+  suppressHydrationWarning: true,
+  // Make Next.js happy
+  [SELECTED]: rest[SELECTED] === void 0 ? void 0 : `${(rest[SELECTED] || "false") !== "false"}`,
+  // Ensure aria-selected boolean is string
+  class: clsx(klass, rest.className),
+  // Use class instead of className
+  hidden: !!rest.hidden,
+  // Ensure boolean prop behaviour
+  open: !!rest.open
+  // Ensure boolean prop behaviour
+});
+const tag = (tagName, attrs, text) => {
+  const el = document.createElement(tagName);
+  if (text) el.textContent = text;
+  if (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);
+  return el;
+};
+const MTDSElement = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
+const defineElement = (name, instance) => !isBrowser() || window.customElements.get(name) || window.customElements.define(name, instance);
 export {
-  p as IS_BROWSER,
-  B as MTDSElement,
-  q as QUICK_EVENT,
-  D as anchorPosition,
-  f as attr,
-  F as debounce,
-  k as isInputLike,
-  H as off,
-  h as on,
-  z as onLoaded,
-  U as onMutation,
-  g as onResize,
-  W as tag,
-  P as toCustomElementProps,
-  x as useId
+  MTDSElement,
+  QUICK_EVENT,
+  anchorPosition,
+  attr,
+  debounce,
+  defineElement,
+  isBrowser,
+  isInputLike,
+  off,
+  on,
+  onLoaded,
+  onMutation,
+  onResize,
+  tag,
+  toCustomElementProps,
+  useId
 };
 //# sourceMappingURL=utils.js.map

package/mtds/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["import type { Placement, SizeOptions } from \"@floating-ui/dom\";\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tshift,\n\tsize,\n} from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport styles from \"./styles.module.css\";\n\nexport const QUICK_EVENT = { capture: true, passive: true };\nexport const IS_BROWSER =\n\ttypeof window !== \"undefined\" && typeof document !== \"undefined\";\n\nexport function debounce<T extends unknown[]>(\n\tcallback: (...args: T) => void,\n\tdelay: number,\n) {\n\tlet timer: ReturnType<typeof setTimeout>;\n\n\treturn function (this: unknown, ...args: T) {\n\t\tclearTimeout(timer);\n\t\ttimer = setTimeout(() => callback.apply(this, args), delay);\n\t};\n}\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId(el: Element) {\n\tif (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n}\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window | ShadowRoot,\n\t[...rest]: Parameters<typeof Element.prototype.addEventListener>, // Spreat to make a copy of the array\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n\tevents(\"add\", element, rest);\n\treturn () => off(element, ...rest);\n};\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsCleanups?: Map<string, Array<() => void>>;\n\t}\n}\n\n/**\n * onLoaded\n * @description Runs a callback when window is loaded in browser, and ensures events are unbound if hot reloading\n * @param callback The callback to run when the page is ready\n */\nexport const onLoaded = (setup: () => Array<() => void>) => {\n\tif (!IS_BROWSER || !window.requestAnimationFrame) return; // Skip if not in browser environment\n\tif (!window._mtdsCleanups) window._mtdsCleanups = new Map();\n\n\tconst run = () =>\n\t\trequestAnimationFrame(() => {\n\t\t\tconst key = String(setup).replace(/(\\n|\\s)/g, \"\"); // Create a key based on setup function body\n\t\t\twindow._mtdsCleanups?.get(key)?.map((cleanup) => cleanup()); // Run cleanups\n\t\t\twindow._mtdsCleanups?.set(key, setup()); // Rum setup and store cleanups\n\t\t});\n\n\tif (document.readyState === \"complete\") run();\n\telse on(window, \"load\", run);\n};\n\ntype AnchorOptions = Parameters<typeof computePosition>[2] & {\n\tcontain?: SizeOptions[\"apply\"] | false;\n};\nconst ANCHORED = new WeakMap<Element, ReturnType<typeof autoUpdate>>();\nconst DIALOG = `.${styles.dialog.split(\" \")[0]}`;\nexport function anchorPosition(\n\ttarget: HTMLElement,\n\tanchor: false | Element,\n\t{ contain, middleware, placement, ...options }: AnchorOptions = {},\n) {\n\tANCHORED.get(target)?.(); // Unbind previous anchor position\n\tANCHORED.delete(target);\n\n\t// TODO aria-label på app\n\tif (anchor) {\n\t\tconst footer = target.closest(DIALOG)?.querySelector(\":scope > footer\");\n\t\tconst inset = Number(attr(target, \"data-inset\")) || 20;\n\t\tconst bottom = (footer?.clientHeight || 0) + inset;\n\t\tconst padding = { bottom, left: inset, right: inset, top: inset };\n\t\tconst position = (attr(target, \"data-position\") ?? \"bottom\") as Placement;\n\n\t\tANCHORED.set(\n\t\t\ttarget,\n\t\t\tautoUpdate(anchor, target, () => {\n\t\t\t\tif (!target.isConnected || !anchor.isConnected || target.hidden)\n\t\t\t\t\treturn anchorPosition(target, false);\n\t\t\t\tcomputePosition(anchor, target, {\n\t\t\t\t\t...options,\n\t\t\t\t\tplacement: placement || position,\n\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\tflip({ padding }),\n\t\t\t\t\t\tshift(),\n\t\t\t\t\t\t...(contain ? [size({ padding, apply: contain })] : []),\n\t\t\t\t\t\t...(middleware || []),\n\t\t\t\t\t],\n\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\ttarget.style.left = `${x}px`;\n\t\t\t\t\ttarget.style.top = `${y}px`;\n\t\t\t\t});\n\t\t\t}),\n\t\t);\n\t}\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\ntype Attr = string | string[];\nexport function onMutation(\n\tcallback: (observer: MutationObserver) => void,\n\tattr: Attr | { attr: Attr; root?: HTMLElement; delay?: number },\n) {\n\tlet queue = 0;\n\tconst opt = Array.isArray(attr) || typeof attr === \"string\" ? { attr } : attr;\n\tconst onFrame = () => setTimeout(onTimer, opt?.delay ?? 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tif (!IS_BROWSER) return cleanup(); // If using JSDOM, the document might have been removed\n\t\tcallback(observer);\n\t\tobserver.takeRecords(); // Clear records to avoid running callback multiple times\n\t\tqueue = 0;\n\t};\n\tconst observer = new MutationObserver(() => {\n\t\tif (!queue) queue = requestAnimationFrame(onFrame);\n\t});\n\tconst cleanup = () => {\n\t\ttry {\n\t\t\tobserver.disconnect();\n\t\t} catch (_) {\n\t\t\t// No more observer\n\t\t}\n\t};\n\n\tobserver.observe(opt?.root || document.documentElement, {\n\t\tattributeFilter: ([] as string[]).concat(opt.attr),\n\t\tattributes: true,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t});\n\n\tcallback(observer); // Initial run\n\treturn cleanup;\n}\n\nexport function onResize(callback: ResizeObserverCallback, element: Element) {\n\tconst resize = new ResizeObserver(callback);\n\tresize.observe(element);\n\treturn () => resize.disconnect();\n}\n\n/**\n * isInputLike\n * @description Check if element is an input like element\n * @param el The element to check\n * @returns True if the element is an input like element\n */\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement &&\n\t\"validity\" in el &&\n\t!(el instanceof HTMLButtonElement);\n\n/**\n * toCustomElementProps\n * @description Utility to quickly convert props to custom element attributes\n * @param props The props to convert\n * @returns The converted props\n */\nconst SELECTED = \"aria-selected\";\nexport const toCustomElementProps = (\n\t{ className, hidden, open, ...rest }: Record<string, unknown>,\n\tklass?: string,\n) => {\n\trest.suppressHydrationWarning = true; // Make Next.js happy\n\tif (rest[SELECTED] !== undefined)\n\t\trest[SELECTED] = `${(rest[SELECTED] || \"false\") !== \"false\"}`; // Ensure aria-selected boolean is string\n\tif (className || klass) rest.class = clsx(klass, className as string); // Use class instead of className\n\tif (hidden) rest.hidden = true; // Ensure boolean prop behaviour\n\tif (open) rest.open = true; // Ensure boolean prop behaviour\n\treturn rest;\n};\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n\ttagName: TagName,\n\tattrs?: Record<string, string | null> | null,\n\ttext?: string | null,\n): HTMLElementTagNameMap[TagName] => {\n\tconst el = document.createElement(tagName);\n\tif (text) el.textContent = text;\n\tif (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n\treturn el;\n};\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const MTDSElement =\n\ttypeof HTMLElement === \"undefined\"\n\t\t? (class {} as typeof HTMLElement)\n\t\t: HTMLElement;\n"],"names":["QUICK_EVENT","IS_BROWSER","debounce","callback","delay","timer","args","attr","el","name","value","id","UUID","useId","events","action","element","type","rest","on","off","onLoaded","setup","run","key","cleanup","ANCHORED","DIALOG","styles","anchorPosition","target","anchor","contain","middleware","placement","options","footer","inset","padding","position","autoUpdate","computePosition","flip","shift","size","x","y","onMutation","queue","opt","onFrame","onTimer","observer","onResize","resize","isInputLike","SELECTED","toCustomElementProps","className","hidden","open","klass","clsx","tag","tagName","attrs","text","val","MTDSElement"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["import type { Placement, SizeOptions } from \"@floating-ui/dom\";\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tshift,\n\tsize,\n} from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport styles from \"./styles.module.css\";\n\nexport const QUICK_EVENT = { capture: true, passive: true };\nexport const isBrowser = () =>\n\ttypeof window !== \"undefined\" && typeof document !== \"undefined\"; // Using function to play nice with Vitest where DOM can come and go\n\nexport function debounce<T extends unknown[]>(\n\tcallback: (...args: T) => void,\n\tdelay: number,\n) {\n\tlet timer: ReturnType<typeof setTimeout>;\n\n\treturn function (this: unknown, ...args: T) {\n\t\tclearTimeout(timer);\n\t\ttimer = setTimeout(() => callback.apply(this, args), delay);\n\t};\n}\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId(el: Element) {\n\tif (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n}\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window | ShadowRoot,\n\t[...rest]: Parameters<typeof Element.prototype.addEventListener>, // Spreat to make a copy of the array\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): (() => void) => {\n\tevents(\"add\", element, rest);\n\treturn () => off(element, ...rest);\n};\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window | ShadowRoot,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\ndeclare global {\n\tinterface Window {\n\t\t_mtdsCleanups?: Map<string, Array<() => void>>;\n\t}\n}\n\n/**\n * onLoaded\n * @description Runs a callback when window is loaded in browser, and ensures events are unbound if hot reloading\n * @param callback The callback to run when the page is ready\n */\nexport const onLoaded = (setup: () => Array<() => void>) => {\n\tif (!isBrowser() || !window.requestAnimationFrame) return; // Skip if not in browser environment\n\tif (!window._mtdsCleanups) window._mtdsCleanups = new Map();\n\n\tconst run = () =>\n\t\trequestAnimationFrame(() => {\n\t\t\tconst key = String(setup).replace(/(\\n|\\s)/g, \"\"); // Create a key based on setup function body\n\t\t\twindow._mtdsCleanups?.get(key)?.map((cleanup) => cleanup()); // Run cleanups\n\t\t\twindow._mtdsCleanups?.set(key, setup()); // Rum setup and store cleanups\n\t\t});\n\n\tif (document.readyState === \"complete\") run();\n\telse on(window, \"load\", run);\n};\n\ntype AnchorOptions = Parameters<typeof computePosition>[2] & {\n\tcontain?: SizeOptions[\"apply\"] | false;\n};\nconst ANCHORED = new WeakMap<Element, ReturnType<typeof autoUpdate>>();\nconst DIALOG = `.${styles.dialog.split(\" \")[0]}`;\nexport function anchorPosition(\n\ttarget: HTMLElement,\n\tanchor: false | Element,\n\t{ contain, middleware, placement, ...options }: AnchorOptions = {},\n) {\n\tANCHORED.get(target)?.(); // Unbind previous anchor position\n\tANCHORED.delete(target);\n\n\tif (anchor) {\n\t\tconst footer = target.closest(DIALOG)?.querySelector(\":scope > footer\");\n\t\tconst inset = Number(attr(target, \"data-inset\")) || 20;\n\t\tconst bottom = (footer?.clientHeight || 0) + inset;\n\t\tconst padding = { bottom, left: inset, right: inset, top: inset };\n\t\tconst position = (attr(target, \"data-position\") ?? \"bottom\") as Placement;\n\n\t\tANCHORED.set(\n\t\t\ttarget,\n\t\t\tautoUpdate(anchor, target, () => {\n\t\t\t\tif (!target.isConnected || !anchor.isConnected || target.hidden)\n\t\t\t\t\treturn anchorPosition(target, false);\n\t\t\t\tcomputePosition(anchor, target, {\n\t\t\t\t\t...options,\n\t\t\t\t\tplacement: placement || position,\n\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\tflip({ padding }),\n\t\t\t\t\t\tshift(),\n\t\t\t\t\t\t...(contain ? [size({ padding, apply: contain })] : []),\n\t\t\t\t\t\t...(middleware || []),\n\t\t\t\t\t],\n\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\ttarget.style.left = `${x}px`;\n\t\t\t\t\ttarget.style.top = `${y}px`;\n\t\t\t\t});\n\t\t\t}),\n\t\t);\n\t}\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\ntype Attr = string | string[];\nexport function onMutation(\n\tcallback: (observer: MutationObserver) => void,\n\tattr: Attr | { attr: Attr; root?: HTMLElement; delay?: number },\n) {\n\tlet queue = 0;\n\tconst opt = Array.isArray(attr) || typeof attr === \"string\" ? { attr } : attr;\n\tconst onFrame = () => setTimeout(onTimer, opt?.delay ?? 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tif (!isBrowser()) return cleanup(); // If using JSDOM, the document might have been removed\n\t\tcallback(observer);\n\t\tobserver.takeRecords(); // Clear records to avoid running callback multiple times\n\t\tqueue = 0;\n\t};\n\tconst observer = new MutationObserver(() => {\n\t\tif (!queue) queue = requestAnimationFrame(onFrame);\n\t});\n\tconst cleanup = () => {\n\t\ttry {\n\t\t\tobserver.disconnect();\n\t\t} catch (_) {\n\t\t\t// No more observer\n\t\t}\n\t};\n\n\tobserver.observe(opt?.root || document.documentElement, {\n\t\tattributeFilter: ([] as string[]).concat(opt.attr),\n\t\tattributes: true,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t});\n\n\tcallback(observer); // Initial run\n\treturn cleanup;\n}\n\nexport function onResize(callback: ResizeObserverCallback, element: Element) {\n\tconst resize = new ResizeObserver(callback);\n\tresize.observe(element);\n\treturn () => resize.disconnect();\n}\n\n/**\n * isInputLike\n * @description Check if element is an input like element\n * @param el The element to check\n * @returns True if the element is an input like element\n */\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement &&\n\t\"validity\" in el &&\n\t!(el instanceof HTMLButtonElement);\n\n/**\n * toCustomElementProps\n * @description Utility to quickly convert props to custom element attributes\n * @param props The props to convert\n * @returns The converted props\n */\nconst SELECTED = \"aria-selected\";\nexport const toCustomElementProps = <T extends Record<string, unknown>>(\n\trest: T,\n\tklass?: string,\n) =>\n\tObject.assign({}, rest, {\n\t\tsuppressHydrationWarning: true, // Make Next.js happy\n\t\t[SELECTED]:\n\t\t\trest[SELECTED] === undefined\n\t\t\t\t? undefined\n\t\t\t\t: (`${(rest[SELECTED] || \"false\") !== \"false\"}` as unknown as boolean), // Ensure aria-selected boolean is string\n\t\tclass: clsx(klass, rest.className as string), // Use class instead of className\n\t\thidden: !!rest.hidden, // Ensure boolean prop behaviour\n\t\topen: !!rest.open, // Ensure boolean prop behaviour\n\t});\n\n/**\n * tag\n * @description creates element and assigns properties\n * @param tagName The tagname of element to create\n * @param attrs Optional attributes to add to the element\n * @param text Optional text content to add to the element\n * @return HTMLElement with props\n */\nexport const tag = <TagName extends keyof HTMLElementTagNameMap>(\n\ttagName: TagName,\n\tattrs?: Record<string, string | null> | null,\n\ttext?: string | null,\n): HTMLElementTagNameMap[TagName] => {\n\tconst el = document.createElement(tagName);\n\tif (text) el.textContent = text;\n\tif (attrs) for (const [key, val] of Object.entries(attrs)) attr(el, key, val);\n\treturn el;\n};\n\n// Make sure we have a HTMLElement to extend (for server side rendering)\nexport const MTDSElement =\n\ttypeof HTMLElement === \"undefined\"\n\t\t? (class {} as typeof HTMLElement)\n\t\t: HTMLElement;\n\n/**\n * defineElement\n * @description Defines a customElement if running in browser and if not already registered\n */\nexport const defineElement = (\n\tname: string,\n\tinstance: CustomElementConstructor,\n) =>\n\t!isBrowser() ||\n\twindow.customElements.get(name) ||\n\twindow.customElements.define(name, instance);\n"],"names":["attr"],"mappings":"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"}

package/mtds/validation/validation.d.ts

@@ -1,2 +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>>;
+export declare const Validation: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/mtds/validation/validation.js

@@ -1,21 +1,21 @@
-import { jsx as t } from "react/jsx-runtime";
-import a from "clsx";
-import { forwardRef as n } from "react";
-import s from "../styles.module.css.js";
-const l = n(
-  function({ className: r, ...o }, i) {
-    return /* @__PURE__ */ t(
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "../styles.module.css.js";
+const Validation = forwardRef(
+  function Validation2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        suppressHydrationWarning: !0,
-        className: a(s.validation, r),
-        ref: i,
-        ...o
+        suppressHydrationWarning: true,
+        className: clsx(styles.validation, className),
+        ref,
+        ...rest
       }
     );
   }
 );
 export {
-  l as Validation
+  Validation
 };
 //# sourceMappingURL=validation.js.map

package/mtds/validation/validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation.js","sources":["../../designsystem/validation/validation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type ValidationProps = React.ComponentPropsWithoutRef<\"div\">;\n\nexport const Validation = forwardRef<HTMLDivElement, ValidationProps>(\n\tfunction Validation({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR due to field-observer.ts\n\t\t\t\tclassName={clsx(styles.validation, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Validation","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMO,MAAMA,IAAaC;AAAA,EACzB,SAAoB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAChD,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,0BAAwB;AAAA,QACxB,WAAWC,EAAKC,EAAO,YAAYL,CAAS;AAAA,QAC5C,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}
+{"version":3,"file":"validation.js","sources":["../../designsystem/validation/validation.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type ValidationProps = React.ComponentPropsWithoutRef<\"div\">;\n\nexport const Validation = forwardRef<HTMLDivElement, ValidationProps>(\n\tfunction Validation({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR due to field-observer.ts\n\t\t\t\tclassName={clsx(styles.validation, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Validation"],"mappings":";;;;AAMO,MAAM,aAAa;AAAA,EACzB,SAASA,YAAW,EAAE,WAAW,GAAG,KAAA,GAAQ,KAAK;AAChD,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,0BAAwB;AAAA,QACxB,WAAW,KAAK,OAAO,YAAY,SAAS;AAAA,QAC5C;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "2.2.24",
+	"version": "2.2.26",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -28,6 +28,10 @@
 			"import": "./mtds/atlas.js",
 			"types": "./mtds/atlas.d.ts"
 		},
+		"./atlas/react": {
+			"import": "./mtds/react-atlas.js",
+			"types": "./mtds/react-atlas.d.ts"
+		},
 		"./*.svg": "./mtds/*.svg",
 		"./*.ico": "./mtds/*.ico",
 		"./icons/*": "./mtds/icons/*",
@@ -50,31 +54,33 @@
 		"storybook:build": "npm run build && storybook build"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.3.6",
+		"@biomejs/biome": "2.3.8",
 		"@digdir/designsystemet-css": "^1.7.3",
-		"@handsontable/react-wrapper": "^16.1.1",
+		"@handsontable/react-wrapper": "^16.2.0",
 		"@phosphor-icons/core": "^2.1.1",
 		"@phosphor-icons/react": "^2.1.10",
-		"@storybook/addon-docs": "^10.0.8",
-		"@storybook/addon-themes": "^10.0.8",
-		"@storybook/react-vite": "^10.0.8",
+		"@storybook/addon-docs": "^10.1.2",
+		"@storybook/addon-themes": "^10.1.2",
+		"@storybook/react-vite": "^10.1.2",
 		"@tanstack/react-table": "^8.21.3",
+		"@turf/boolean-point-in-polygon": "^7.3.1",
+		"@turf/helpers": "^7.3.1",
 		"@types/leaflet": "^1.9.21",
 		"@types/leaflet.markercluster": "^1.5.6",
 		"@types/node": "^24.10.1",
-		"@types/react": "^19.2.6",
+		"@types/react": "^19.2.7",
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.1",
 		"fast-glob": "^3.3.3",
-		"handsontable": "^16.1.1",
+		"handsontable": "^16.2.0",
 		"leaflet": "^2.0.0-alpha.1",
 		"postcss": "^8.5.6",
 		"postcss-nesting": "^13.0.2",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"storybook": "^10.0.8",
+		"storybook": "^10.1.2",
 		"typescript": "^5.9.3",
-		"vite": "^7.2.2",
+		"vite": "^7.2.6",
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"dependencies": {