@mattilsynet/design 1.1.2 → 1.1.3

package/mtds/app/app-observer.js

@@ -0,0 +1,34 @@
+import m from "../styles.module.css.js";
+import { onLoaded as w, onMutation as C, on as c, QUICK_EVENT as p, debounce as T } from "../utils.js";
+import "./app-toggle2.js";
+const f = m.app.split(" ")[0], P = m.sticky.split(" ")[0], _ = '[data-command="toggle-app-expanded"]', g = `.${f} > dialog,.${f} dialog ~ main`, h = (e) => {
+  document.startViewTransition ? document.startViewTransition(e) : e();
+};
+function E({ target: e }) {
+  e instanceof HTMLButtonElement && e.matches(_) && h(() => {
+    var l;
+    if (getComputedStyle(e).position === "sticky") (l = window.mtdsAppToggle) == null || l.call(window);
+    else {
+      const o = document.querySelector(g);
+      o == null || o.setAttribute("data-closedby", "any"), o == null || o.showModal();
+    }
+  });
+}
+function I() {
+  var e;
+  (e = document.querySelector(g)) == null || e.close();
+}
+let d = 0, s, n = 0, t, a = 0, r = 0, y = !1, u = 0, i = 0;
+function H([e]) {
+  t = e, S();
+}
+function S() {
+  var o;
+  if (!(t != null && t.isConnected)) return;
+  const e = window.scrollY, l = e < i;
+  i = e, l !== s && (d = (((o = t.parentElement) == null ? void 0 : o.getBoundingClientRect().top) || 0) + i, s = l, a = t.offsetHeight, r = t.getBoundingClientRect().top + i, y = t.offsetHeight <= window.innerHeight, u = window.innerHeight), !(n === -1 && y) && (n !== -1 && (y || s && i <= r) ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", "0px"), n = -1) : n === -1 && !s ? (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${Math.max(0, i - d)}px`), n = 0) : n !== 1 && !s && i + u >= r + a ? (t.style.setProperty("--pos", "sticky"), t.style.setProperty("--top", `${u - a}px`), n = 1) : n === 1 && s && (t.style.setProperty("--pos", "relative"), t.style.setProperty("--top", `${r - d}px`), n = 0));
+}
+w(() => {
+  C(document.documentElement, P, H), c(document, "click", E, p), c(window, "resize", T(I, 100), p), c(window, "scroll", S, p);
+});
+//# sourceMappingURL=app-observer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-observer.js","sources":["../../designsystem/app/app-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { QUICK_EVENT, debounce, on, onLoaded, onMutation } from \"../utils\";\nimport \"./app-toggle\";\n\nconst CSS_APP = styles.app.split(\" \")[0];\nconst CSS_STICKY = styles.sticky.split(\" \")[0];\nconst CSS_TOGGLE = '[data-command=\"toggle-app-expanded\"]';\nconst CSS_SIDEBAR = `.${CSS_APP} > dialog,.${CSS_APP} dialog ~ main`;\n\nconst useTransition = (callback: () => void) => {\n\tif (!document.startViewTransition) callback();\n\telse document.startViewTransition(callback);\n};\n\nfunction handleToggleClick({ target: el }: Event) {\n\tif (el instanceof HTMLButtonElement && el.matches(CSS_TOGGLE))\n\t\tuseTransition(() => {\n\t\t\t// @ts-expect-error window.mtdsAppToggle comes from app-toggle.js\n\t\t\tif (getComputedStyle(el).position === \"sticky\") window.mtdsAppToggle?.();\n\t\t\telse {\n\t\t\t\tconst sidebar = document.querySelector<HTMLDialogElement>(CSS_SIDEBAR);\n\t\t\t\tsidebar?.setAttribute(\"data-closedby\", \"any\"); // Allow closing by clicking outside\n\t\t\t\tsidebar?.showModal();\n\t\t\t}\n\t\t});\n}\n\nfunction handleResize() {\n\tdocument.querySelector<HTMLDialogElement>(CSS_SIDEBAR)?.close();\n}\n\n// Scroll state\nlet MIN_Y = 0; // Offset to avoid scroll jump when sticky is set to relative\nlet SCROLL_UP: boolean;\nlet STICK = 0; // -1 = stick top, 0 = relative, 1 = stick bottom\nlet STICK_EL: HTMLElement;\nlet STICK_H = 0;\nlet STICK_Y = 0;\nlet STUCK = false; // Used to figure if nav is larger than viewport\nlet WIN_H = 0;\nlet WIN_Y = 0;\n\nfunction handleMutation([sticky]: HTMLCollectionOf<HTMLElement>) {\n\tSTICK_EL = sticky;\n\thandleScroll(); // Run on connect\n}\n\nfunction handleScroll() {\n\tif (!STICK_EL?.isConnected) return;\n\tconst NEXT_Y = window.scrollY;\n\tconst NEXT_UP = NEXT_Y < WIN_Y;\n\tWIN_Y = NEXT_Y;\n\n\t// Only calculate if scroll direction has changed\n\tif (NEXT_UP !== SCROLL_UP) {\n\t\tMIN_Y = (STICK_EL.parentElement?.getBoundingClientRect().top || 0) + WIN_Y;\n\t\tSCROLL_UP = NEXT_UP;\n\t\tSTICK_H = STICK_EL.offsetHeight;\n\t\tSTICK_Y = STICK_EL.getBoundingClientRect().top + WIN_Y;\n\t\tSTUCK = STICK_EL.offsetHeight <= window.innerHeight;\n\t\tWIN_H = window.innerHeight;\n\t}\n\n\tif (STICK === -1 && STUCK) return; // Allways sticky when sidebar is smaller than viewport\n\tif (STICK !== -1 && (STUCK || (SCROLL_UP && WIN_Y <= STICK_Y))) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", \"0px\");\n\t\tSTICK = -1; // Not sticking to top and sidebar is smaller than viewport or scrolling up\n\t} else if (STICK === -1 && !SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${Math.max(0, WIN_Y - MIN_Y)}px`);\n\t\tSTICK = 0; // Sticking to top and scrolling down\n\t} else if (STICK !== 1 && !SCROLL_UP && WIN_Y + WIN_H >= STICK_Y + STICK_H) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"sticky\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${WIN_H - STICK_H}px`);\n\t\tSTICK = 1; // Not sticking to bottom and scrolling down\n\t} else if (STICK === 1 && SCROLL_UP) {\n\t\tSTICK_EL.style.setProperty(\"--pos\", \"relative\");\n\t\tSTICK_EL.style.setProperty(\"--top\", `${STICK_Y - MIN_Y}px`);\n\t\tSTICK = 0; // Sticking to bottom and scrolling up\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_STICKY, handleMutation);\n\ton(document, \"click\", handleToggleClick, QUICK_EVENT);\n\ton(window, \"resize\", debounce(handleResize, 100), QUICK_EVENT);\n\ton(window, \"scroll\", handleScroll, QUICK_EVENT);\n});\n"],"names":["CSS_APP","styles","CSS_STICKY","CSS_TOGGLE","CSS_SIDEBAR","useTransition","callback","handleToggleClick","el","sidebar","handleResize","_a","MIN_Y","SCROLL_UP","STICK","STICK_EL","STICK_H","STICK_Y","STUCK","WIN_H","WIN_Y","handleMutation","sticky","handleScroll","NEXT_Y","NEXT_UP","onLoaded","onMutation","on","QUICK_EVENT","debounce"],"mappings":";;;AAIA,MAAMA,IAAUC,EAAO,IAAI,MAAM,GAAG,EAAE,CAAC,GACjCC,IAAaD,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCE,IAAa,wCACbC,IAAc,IAAIJ,CAAO,cAAcA,CAAO,kBAE9CK,IAAgB,CAACC,MAAyB;AAC3C,EAAC,SAAS,sBACT,SAAS,oBAAoBA,CAAQ,IADEA,EAAA;AAE7C;AAEA,SAASC,EAAkB,EAAE,QAAQC,KAAa;AACjD,EAAIA,aAAc,qBAAqBA,EAAG,QAAQL,CAAU,KAC3DE,EAAc,MAAM;;AAEnB,QAAI,iBAAiBG,CAAE,EAAE,aAAa,sBAAiB;SAClD;AACE,YAAAC,IAAU,SAAS,cAAiCL,CAAW;AAC5D,MAAAK,KAAA,QAAAA,EAAA,aAAa,iBAAiB,QACvCA,KAAA,QAAAA,EAAS;AAAA,IAAU;AAAA,EACpB,CACA;AACH;AAEA,SAASC,IAAe;;AACd,GAAAC,IAAA,SAAA,cAAiCP,CAAW,MAA5C,QAAAO,EAA+C;AACzD;AAGA,IAAIC,IAAQ,GACRC,GACAC,IAAQ,GACRC,GACAC,IAAU,GACVC,IAAU,GACVC,IAAQ,IACRC,IAAQ,GACRC,IAAQ;AAEZ,SAASC,EAAe,CAACC,CAAM,GAAkC;AACrD,EAAAP,IAAAO,GACEC,EAAA;AACd;AAEA,SAASA,IAAe;;AACnB,MAAA,EAACR,KAAA,QAAAA,EAAU,aAAa;AAC5B,QAAMS,IAAS,OAAO,SAChBC,IAAUD,IAASJ;AAarB,EAZIA,IAAAI,GAGJC,MAAYZ,MACfD,OAASD,IAAAI,EAAS,kBAAT,gBAAAJ,EAAwB,wBAAwB,QAAO,KAAKS,GACzDP,IAAAY,GACZT,IAAUD,EAAS,cACTE,IAAAF,EAAS,sBAAsB,EAAE,MAAMK,GACzCF,IAAAH,EAAS,gBAAgB,OAAO,aACxCI,IAAQ,OAAO,cAGZ,EAAAL,MAAU,MAAMI,OAChBJ,MAAU,OAAOI,KAAUL,KAAaO,KAASH,MAC3CF,EAAA,MAAM,YAAY,SAAS,QAAQ,GACnCA,EAAA,MAAM,YAAY,SAAS,KAAK,GACjCD,IAAA,MACEA,MAAU,MAAM,CAACD,KAClBE,EAAA,MAAM,YAAY,SAAS,UAAU,GACrCA,EAAA,MAAM,YAAY,SAAS,GAAG,KAAK,IAAI,GAAGK,IAAQR,CAAK,CAAC,IAAI,GAC7DE,IAAA,KACEA,MAAU,KAAK,CAACD,KAAaO,IAAQD,KAASF,IAAUD,KACzDD,EAAA,MAAM,YAAY,SAAS,QAAQ,GAC5CA,EAAS,MAAM,YAAY,SAAS,GAAGI,IAAQH,CAAO,IAAI,GAClDF,IAAA,KACEA,MAAU,KAAKD,MAChBE,EAAA,MAAM,YAAY,SAAS,UAAU,GAC9CA,EAAS,MAAM,YAAY,SAAS,GAAGE,IAAUL,CAAK,IAAI,GAClDE,IAAA;AAEV;AAEAY,EAAS,MAAM;AACH,EAAAC,EAAA,SAAS,iBAAiBzB,GAAYmB,CAAc,GAC5DO,EAAA,UAAU,SAASrB,GAAmBsB,CAAW,GACpDD,EAAG,QAAQ,UAAUE,EAASpB,GAAc,GAAG,GAAGmB,CAAW,GAC1DD,EAAA,QAAQ,UAAUL,GAAcM,CAAW;AAC/C,CAAC;"}

package/mtds/app/app-toggle.js

@@ -0,0 +1,24 @@
+const t = `if (
+	typeof window !== "undefined" &&
+	window.CSSStyleSheet &&
+	document.adoptedStyleSheets
+)
+	(() => {
+		const key = "--mtds-app-expanded";
+		const sheet = new CSSStyleSheet();
+
+		document.adoptedStyleSheets.push(sheet);
+		window.mtdsAppToggle = (toggle = true) => {
+			const prev = !window.localStorage.getItem(key)?.includes("false");
+			const next = toggle ? !prev : prev;
+
+			sheet.replaceSync(\`:root { \${key}: var(\${key}--\${next})}\`);
+			window.localStorage.setItem(key, next);
+		};
+		window.mtdsAppToggle(false); // Set and store initial state
+	})();
+`;
+export {
+  t as default
+};
+//# sourceMappingURL=app-toggle.js.map

package/mtds/app/app-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsAppToggle = (toggle = true) => {\\n\\t\\t\\tconst prev = !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\t\\t\\tconst next = toggle ? !prev : prev;\\n\\n\\t\\t\\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t};\\n\\t\\twindow.mtdsAppToggle(false); // Set and store initial state\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/app/app-toggle2.js

@@ -0,0 +1,9 @@
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", t = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(t), window.mtdsAppToggle = (s = !0) => {
+    var n;
+    const o = !((n = window.localStorage.getItem(e)) != null && n.includes("false")), d = s ? !o : o;
+    t.replaceSync(`:root { ${e}: var(${e}--${d})}`), window.localStorage.setItem(e, d);
+  }, window.mtdsAppToggle(!1);
+})();
+//# sourceMappingURL=app-toggle2.js.map

package/mtds/app/app-toggle2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsAppToggle = (toggle = true) => {\n\t\t\tconst prev = !window.localStorage.getItem(key)?.includes(\"false\");\n\t\t\tconst next = toggle ? !prev : prev;\n\n\t\t\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\n\t\t\twindow.localStorage.setItem(key, next);\n\t\t};\n\t\twindow.mtdsAppToggle(false); // Set and store initial state\n\t})();\n"],"names":["key","sheet","toggle","_a","prev","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe;AAEjC,WAAS,mBAAmB,KAAKA,CAAK,GACtC,OAAO,gBAAgB,CAACC,IAAS,OAAS;AAV5C,QAAAC;AAWG,UAAMC,IAAO,GAACD,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS,WACnDE,IAAOH,IAAS,CAACE,IAAOA;AAE9B,IAAAH,EAAM,YAAY,WAAWD,CAAG,SAASA,CAAG,KAAKK,CAAI,IAAI,GACzD,OAAO,aAAa,QAAQL,GAAKK,CAAI;AAAA,EACrC,GACD,OAAO,cAAc,EAAK;AAC5B,GAAK;"}

package/mtds/app/app.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+import { PolymorphicComponentPropWithRef } from '../react-types';
+export type AppHeaderProps = React.ComponentPropsWithoutRef<"header">;
+export type AppSidebarProps = React.ComponentPropsWithoutRef<"dialog">;
+export type AppStickyProps = React.ComponentPropsWithoutRef<"div">;
+export type AppMainProps = React.ComponentPropsWithoutRef<"main">;
+export type AppFooterProps = React.ComponentPropsWithoutRef<"footer">;
+export type AppProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
+type AppComponent = <As extends React.ElementType = "div">(props: AppProps<As>) => JSX.Element;
+export declare const App: AppComponent & {
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+    Sticky: AppComponent;
+    Main: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Script: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/mtds/app/app.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { clsx as a } from "../external/clsx/dist/clsx.js";
+import { forwardRef as p } from "react";
+import c from "../styles.module.css.js";
+import m from "./app-toggle.js";
+const f = p(function({ as: r, className: t, ...n }, e) {
+  return /* @__PURE__ */ o(r || "div", { className: a(c.app, t), ref: e, ...n });
+}), d = p(function({ as: r, className: t, ...n }, e) {
+  return /* @__PURE__ */ o(r || "div", { className: a(c.sticky, t), ref: e, ...n });
+}), y = Object.assign(f, {
+  Header: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("header", { ref: t, ...r });
+    }
+  ),
+  Sidebar: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("dialog", { role: "navigation", ref: t, ...r });
+    }
+  ),
+  Sticky: d,
+  Main: p(function(r, t) {
+    return /* @__PURE__ */ o("main", { ref: t, ...r });
+  }),
+  Footer: p(
+    function(r, t) {
+      return /* @__PURE__ */ o("footer", { ref: t, ...r });
+    }
+  ),
+  // Needed to avoid flash of unstyled content and still be Next.js hydration compatible
+  Script: () => /* @__PURE__ */ o("script", { id: "mtds-app-script", children: m })
+});
+export {
+  y as App
+};
+//# sourceMappingURL=app.js.map

package/mtds/app/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sources":["../../designsystem/app/app.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\";\nimport script from \"./app-toggle.js?raw\";\n\nexport type AppHeaderProps = React.ComponentPropsWithoutRef<\"header\">;\nexport type AppSidebarProps = React.ComponentPropsWithoutRef<\"dialog\">;\nexport type AppStickyProps = React.ComponentPropsWithoutRef<\"div\">;\nexport type AppMainProps = React.ComponentPropsWithoutRef<\"main\">;\nexport type AppFooterProps = React.ComponentPropsWithoutRef<\"footer\">;\nexport type AppProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype AppComponent = <As extends React.ElementType = \"div\">(\n\tprops: AppProps<As>,\n) => JSX.Element;\n\nconst AppComp = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.app, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst AppSticky = forwardRef<null>(function App<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: AppProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.sticky, className)} ref={ref} {...rest} />;\n}) as AppComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport const App = Object.assign(AppComp, {\n\tHeader: forwardRef<HTMLElement, AppHeaderProps>(\n\t\tfunction AppHeader(rest, ref) {\n\t\t\treturn <header ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSidebar: forwardRef<HTMLDialogElement, AppSidebarProps>(\n\t\tfunction AppSidebar(rest, ref) {\n\t\t\treturn <dialog role=\"navigation\" ref={ref} {...rest} />;\n\t\t},\n\t),\n\tSticky: AppSticky,\n\tMain: forwardRef<HTMLElement, AppMainProps>(function AppMain(rest, ref) {\n\t\treturn <main ref={ref} {...rest} />;\n\t}),\n\tFooter: forwardRef<HTMLElement, AppFooterProps>(\n\t\tfunction AppFooter(rest, ref) {\n\t\t\treturn <footer ref={ref} {...rest} />;\n\t\t},\n\t),\n\t// Needed to avoid flash of unstyled content and still be Next.js hydration compatible\n\tScript: () => <script id=\"mtds-app-script\">{script}</script>,\n});\n"],"names":["AppComp","forwardRef","as","className","rest","ref","jsx","clsx","styles","AppSticky","App","script"],"mappings":";;;;;AAqBA,MAAMA,IAAUC,EAAiB,SAE/B,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAiBC,GAA0B;AAG9D,SAAA,gBAAAC,EAFKJ,KAAM,OAEN,EAAA,WAAWK,EAAKC,EAAO,KAAKL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AACzE,CAAC,GAEKK,IAAYR,EAAiB,SAEjC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAiBC,GAA0B;AAG9D,SAAA,gBAAAC,EAFKJ,KAAM,OAEN,EAAA,WAAWK,EAAKC,EAAO,QAAQL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC5E,CAAC,GAEYM,IAAM,OAAO,OAAOV,GAAS;AAAA,EACzC,QAAQC;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAQ,gBAAAC,EAAA,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,IAAA;AAAA,EAErC;AAAA,EACA,SAASH;AAAA,IACR,SAAoBG,GAAMC,GAAK;AAC9B,+BAAQ,UAAO,EAAA,MAAK,cAAa,KAAAA,GAAW,GAAGD,GAAM;AAAA,IAAA;AAAA,EAEvD;AAAA,EACA,QAAQK;AAAA,EACR,MAAMR,EAAsC,SAAiBG,GAAMC,GAAK;AACvE,WAAQ,gBAAAC,EAAA,QAAA,EAAK,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA,CACjC;AAAA,EACD,QAAQH;AAAA,IACP,SAAmBG,GAAMC,GAAK;AAC7B,aAAQ,gBAAAC,EAAA,UAAA,EAAO,KAAAD,GAAW,GAAGD,EAAM,CAAA;AAAA,IAAA;AAAA,EAErC;AAAA;AAAA,EAEA,QAAQ,MAAM,gBAAAE,EAAC,UAAO,EAAA,IAAG,mBAAmB,UAAOK,EAAA,CAAA;AACpD,CAAC;"}

package/mtds/app/app.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: 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;
+export declare const WithFooter: Story;
+export declare const WithComplexContent: Story;

package/mtds/divider/divider.d.ts

@@ -1,6 +1,6 @@
 export type DividerProps = React.ComponentPropsWithoutRef<"hr"> & {
-    "data-gap"?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30 | "none" | "sm" | "md" | "lg" | "xl";
+    "data-gap"?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30 | "none" | "xs" | "sm" | "md" | "lg" | "xl";
 };
 export declare const Divider: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
-    "data-gap"?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30 | "none" | "sm" | "md" | "lg" | "xl";
+    "data-gap"?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "18" | "22" | "26" | "30" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30 | "none" | "xs" | "sm" | "md" | "lg" | "xl";
 } & React.RefAttributes<HTMLHRElement>>;

package/mtds/divider/divider.js.map

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

package/mtds/field/field.d.ts

@@ -1,9 +1,7 @@
 import { ReactUtags, UHTMLTagsElement } from '@u-elements/u-tags';
 import { JSX } from 'react';
-import { InputProps } from '../input/input';
 import { PolymorphicComponentPropWithRef } from '../react-types';
-type FieldBaseProps = InputProps & {
-    className?: InputProps["className"];
+type FieldBaseProps = {
     count?: number;
     description?: React.ReactNode;
     error?: React.ReactNode;
@@ -15,7 +13,6 @@ type FieldBaseProps = InputProps & {
         value: string;
     }>;
     prefix?: string;
-    style?: InputProps["style"];
     suffix?: string;
     validation?: React.ReactNode;
 };

package/mtds/field/field.js

@@ -1,7 +1,8 @@
-import { jsx as i, Fragment as w, jsxs as O } from "react/jsx-runtime";
+import { jsx as i, Fragment as C, jsxs as O } from "react/jsx-runtime";
 import { clsx as j } from "../external/clsx/dist/clsx.js";
-import { forwardRef as n } from "react";
+import { forwardRef as a } from "react";
 import "../alert/alert.js";
+import "../app/app.js";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../breadcrumbs/breadcrumbs.js";
@@ -14,7 +15,7 @@ import "../divider/divider.js";
 import "../errorsummary/errorsummary.js";
 import "../fieldset/fieldset.js";
 import "../heading/heading.js";
-import { HelpText as E } from "../helptext/helptext.js";
+import { HelpText as W } from "../helptext/helptext.js";
 import "../input/input.js";
 import "../layout/layout.js";
 import "../link/link.js";
@@ -30,66 +31,74 @@ import "../tag/tag.js";
 import "../validation/validation.js";
 import e from "../styles.module.css.js";
 import { toCustomElementProps as f } from "../utils.js";
-const H = n(function({
+const w = a(function({
   "data-size": r,
   as: t,
-  className: l,
+  className: p,
   count: u,
   description: h,
-  error: A,
+  error: T,
   helpText: F,
-  helpTextLabel: D,
+  helpTextLabel: A,
   label: g,
-  options: p,
+  options: l,
   prefix: s,
-  style: y,
+  style: D,
   suffix: d,
-  validation: z,
-  ...m
+  validation: H,
+  ...n
 }, c) {
-  const v = t || "div", C = !!d || !!s, b = z || A, x = {
+  const v = t || "div", z = !!d || !!s, b = H || T, x = {
     "data-size": r,
-    className: j(e.field, l),
-    style: y
+    className: j(e.field, p),
+    style: D
   };
-  return t === "select" && !m.children && Object.assign(m, {
-    children: /* @__PURE__ */ i(w, { children: p == null ? void 0 : p.map((o) => typeof o == "string" ? { label: o, value: o } : o).map(({ label: o, value: N }) => /* @__PURE__ */ i("option", { value: N, children: o }, N)) })
+  return t === "select" && !n.children && Object.assign(n, {
+    children: /* @__PURE__ */ i(C, { children: l == null ? void 0 : l.map((o) => typeof o == "string" ? { label: o, value: o } : o).map(({ label: o, value: N }) => /* @__PURE__ */ i("option", { value: N, children: o }, N)) })
   }), t ? /* @__PURE__ */ O("div", { ...x, children: [
-    !!g && /* @__PURE__ */ i("label", { children: g }),
-    !!F && /* @__PURE__ */ i(E, { "aria-label": D, children: F }),
+    !!g && /* @__PURE__ */ i("label", { suppressHydrationWarning: !0, children: g }),
+    !!F && /* @__PURE__ */ i(W, { "aria-label": A, children: F }),
     !!h && /* @__PURE__ */ i("p", { children: h }),
-    C ? /* @__PURE__ */ O(T, { children: [
+    z ? /* @__PURE__ */ O(y, { children: [
       !!s && /* @__PURE__ */ i("span", { children: s }),
-      /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+      /* @__PURE__ */ i(v, { className: e.input, ref: c, ...n }),
       !!d && /* @__PURE__ */ i("span", { children: d })
-    ] }) : /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+    ] }) : /* @__PURE__ */ i(
+      v,
+      {
+        className: e.input,
+        suppressHydrationWarning: !0,
+        ref: c,
+        ...n
+      }
+    ),
     !!b && /* @__PURE__ */ i("div", { className: e.validation, children: b }),
     !!u && /* @__PURE__ */ i("p", { "data-count": u })
-  ] }) : /* @__PURE__ */ i("div", { ref: c, ...x, ...m });
-}), T = n(
-  function({ className: r, ...t }, l) {
-    return /* @__PURE__ */ i("div", { className: j(e.affixes, r), ref: l, ...t });
+  ] }) : /* @__PURE__ */ i("div", { ref: c, ...x, ...n });
+}), y = a(
+  function({ className: r, ...t }, p) {
+    return /* @__PURE__ */ i("div", { className: j(e.affixes, r), ref: p, ...t });
   }
-), P = n(
+), E = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-datalist", { ref: t, ...f(r) });
   }
-), R = n(
+), P = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-option", { ref: t, ...f(r) });
   }
-), k = n(
+), R = a(
   function(r, t) {
     return /* @__PURE__ */ i("u-tags", { ref: t, ...f(r) });
   }
-), ui = Object.assign(H, {
-  Affixes: T,
-  Datalist: P,
-  Tags: k,
-  Option: R
+), hi = Object.assign(w, {
+  Affixes: y,
+  Datalist: E,
+  Tags: R,
+  Option: P
 });
 export {
-  ui as Field,
-  H as FieldComp
+  hi as Field,
+  w as FieldComp
 };
 //# sourceMappingURL=field.js.map

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type { InputProps } from \"../input/input\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = InputProps & {\n\tclassName?: InputProps[\"className\"];\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\tstyle?: InputProps[\"style\"];\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\">;\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\">;\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":"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"}

package/mtds/index.d.ts

@@ -1,8 +1,11 @@
 export type { UHTMLTabsElement, UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, } from '@u-elements/u-tabs';
 export type { UHTMLTagsElement } from '@u-elements/u-tags';
+export { version } from '../package.json';
 export { pagination } from './pagination/pagination-helper';
 export declare const styles: {
 alert: string;
+app: string;
+sticky: string;
 avatar: string;
 badge: string;
 breadcrumbs: string;
@@ -21,7 +24,6 @@ fieldset: string;
 heading: string;
 helptext: string;
 input: string;
-app: string;
 grid: string;
 flex: string;
 prose: string;