@mattilsynet/design 1.1.0 → 1.1.2

package/mtds/card/card.d.ts

@@ -8,10 +8,5 @@ type CardComponent = <Href, As extends React.ElementType = Href extends string ?
 export type GroupProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
 type GroupComponent = <As extends React.ElementType = "div">(props: GroupProps<As>) => JSX.Element;
 export declare const Group: GroupComponent;
-export type CardDetailsProps = React.ComponentPropsWithoutRef<"details">;
-export type CardSummaryProps = React.ComponentPropsWithoutRef<"summary">;
-export declare const Card: CardComponent & {
-    Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
-    Summary: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-};
+export declare const Card: CardComponent;
 export {};

package/mtds/card/card.js

@@ -1,26 +1,15 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { clsx as m } from "../external/clsx/dist/clsx.js";
-import { forwardRef as t } from "react";
-import u from "../styles.module.css.js";
-const e = t(function({ as: a, className: o, ...r }, c) {
-  const i = a || (r.href ? "a" : "div");
-  return /* @__PURE__ */ s(i, { className: m(u.card, o), ref: c, ...r });
-}), y = t(function({ as: a, className: o, ...r }, c) {
-  return /* @__PURE__ */ s(a || "div", { className: m(u.group, o), ref: c, ...r });
-}), d = t(
-  function({ className: a, ...o }, r) {
-    return /* @__PURE__ */ s("u-details", { class: m(u.card, a), ref: r, ...o });
-  }
-), f = t(
-  function({ className: a, ...o }, r) {
-    return /* @__PURE__ */ s("u-summary", { class: a, ref: r, ...o });
-  }
-), x = Object.assign(e, {
-  Details: d,
-  Summary: f
-});
+import { forwardRef as n } from "react";
+import f from "../styles.module.css.js";
+const i = n(function({ as: o, className: t, ...r }, a) {
+  const s = o || (r.href ? "a" : "div");
+  return /* @__PURE__ */ c(s, { className: m(f.card, t), ref: a, ...r });
+}), l = n(function({ as: o, className: t, ...r }, a) {
+  return /* @__PURE__ */ c(o || "div", { className: m(f.group, t), ref: a, ...r });
+}), C = i;
 export {
-  x as Card,
-  y as Group
+  C as Card,
+  l as Group
 };
 //# sourceMappingURL=card.js.map

package/mtds/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nconst CardComp: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type CardDetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst CardDetails = forwardRef<HTMLDetailsElement, CardDetailsProps>(\n\tfunction CardDetails({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-details class={clsx(styles.card, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type CardSummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst CardSummary = forwardRef<HTMLElement, CardSummaryProps>(\n\tfunction CardSummary({ className, ...rest }, ref) {\n\t\treturn <u-summary class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport const Card = Object.assign(CardComp, {\n\tDetails: CardDetails,\n\tSummary: CardSummary,\n});\n"],"names":["CardComp","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group","CardDetails","CardSummary","Card"],"mappings":";;;;AAwBA,MAAMA,IAA0BC,EAAiB,SAG/C,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GAGKO,IAAcV;AAAA,EACnB,SAAqB,EAAE,WAAAE,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAEhD,WAAA,gBAAAE,EAAC,aAAU,EAAA,OAAOC,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGvE,GAGMQ,IAAcX;AAAA,EACnB,SAAqB,EAAE,WAAAE,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACjD,6BAAQ,aAAU,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE1D,GAEaS,IAAO,OAAO,OAAOb,GAAU;AAAA,EAC3C,SAASW;AAAA,EACT,SAASC;AACV,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nconst CardComp: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n// export type CardDetailsProps = React.ComponentPropsWithoutRef<\"details\">;\n// const CardDetails = forwardRef<HTMLDetailsElement, CardDetailsProps>(\n// \tfunction CardDetails({ className, ...rest }, ref) {\n// \t\treturn (\n// \t\t\t<u-details class={clsx(styles.card, className)} ref={ref} {...rest} />\n// \t\t);\n// \t},\n// );\n\n// export type CardSummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\n// const CardSummary = forwardRef<HTMLElement, CardSummaryProps>(\n// \tfunction CardSummary({ className, ...rest }, ref) {\n// \t\treturn <u-summary class={className} ref={ref} {...rest} />;\n// \t},\n// );\n\nexport const Card = CardComp;\n"],"names":["CardComp","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group","Card"],"mappings":";;;;AAwBA,MAAMA,IAA0BC,EAAiB,SAG/C,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GAkBYO,IAAOX;"}

package/mtds/details/details.js

@@ -1,17 +1,17 @@
 import { jsx as m } from "react/jsx-runtime";
-import { clsx as i } from "../external/clsx/dist/clsx.js";
 import { forwardRef as o } from "react";
-import e from "../styles.module.css.js";
-const l = o(
-  function({ className: s, ...t }, r) {
-    return /* @__PURE__ */ m("u-details", { class: i(e.details, s), ref: r, ...t });
+import i from "../styles.module.css.js";
+import { toCustomElementProps as s } from "../utils.js";
+const a = o(
+  function(t, r) {
+    return /* @__PURE__ */ m("u-details", { ref: r, ...s(t, i.details) });
   }
 ), n = o(
-  function({ className: s, ...t }, r) {
-    return /* @__PURE__ */ m("u-summary", { class: s, ref: r, ...t });
+  function(t, r) {
+    return /* @__PURE__ */ m("u-summary", { ref: r, ...s(t) });
   }
-), y = Object.assign(l, { Summary: n });
+), c = Object.assign(a, { Summary: n });
 export {
-  y as Details
+  c as Details
 };
 //# sourceMappingURL=details.js.map

package/mtds/details/details.js.map

@@ -1 +1 @@
-{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-details class={clsx(styles.details, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary({ className, ...rest }, ref) {\n\t\treturn <u-summary class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","className","rest","ref","jsx","clsx","styles","DetailsSummary","Details"],"mappings":";;;;AAKA,MAAMA,IAAcC;AAAA,EACnB,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE5C,WAAA,gBAAAC,EAAC,aAAU,EAAA,OAAOC,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAG1E,GAGMK,IAAiBP;AAAA,EACtB,SAAwB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACpD,6BAAQ,aAAU,EAAA,OAAOF,GAAW,KAAAE,GAAW,GAAGD,GAAM;AAAA,EAAA;AAE1D,GAEaM,IAAU,OAAO,OAAOT,GAAa,EAAE,SAASQ,EAAgB,CAAA;"}
+{"version":3,"file":"details.js","sources":["../../designsystem/details/details.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\nexport type DetailsProps = React.ComponentPropsWithoutRef<\"details\">;\nconst DetailsComp = forwardRef<HTMLDetailsElement, DetailsProps>(\n\tfunction Details(props, ref) {\n\t\treturn (\n\t\t\t<u-details ref={ref} {...toCustomElementProps(props, styles.details)} />\n\t\t);\n\t},\n);\n\nexport type SummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\nconst DetailsSummary = forwardRef<HTMLElement, SummaryProps>(\n\tfunction DetailsSummary(props, ref) {\n\t\treturn <u-summary ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Details = Object.assign(DetailsComp, { Summary: DetailsSummary });\n"],"names":["DetailsComp","forwardRef","props","ref","jsx","toCustomElementProps","styles","DetailsSummary","Details"],"mappings":";;;;AAKA,MAAMA,IAAcC;AAAA,EACnB,SAAiBC,GAAOC,GAAK;AAE3B,WAAA,gBAAAC,EAAC,eAAU,KAAAD,GAAW,GAAGE,EAAqBH,GAAOI,EAAO,OAAO,GAAG;AAAA,EAAA;AAGzE,GAGMC,IAAiBN;AAAA,EACtB,SAAwBC,GAAOC,GAAK;AACnC,6BAAQ,aAAU,EAAA,KAAAA,GAAW,GAAGE,EAAqBH,CAAK,GAAG;AAAA,EAAA;AAE/D,GAEaM,IAAU,OAAO,OAAOR,GAAa,EAAE,SAASO,EAAgB,CAAA;"}

package/mtds/dialog/dialog-observer.js

@@ -1,24 +1,19 @@
-import r from "../styles.module.css.js";
-import { IS_BROWSER as m, onLoaded as u, on as E, QUICK_EVENT as e, createOptimizedMutationObserver as f, attr as g } from "../utils.js";
-const p = r.dialog.split(" ")[0], b = m ? document.getElementsByClassName(
-  p
-) : [], i = (t) => {
-  t.stopImmediatePropagation(), t.stopPropagation();
-}, I = () => {
+import d from "../styles.module.css.js";
+import { IS_BROWSER as m, onLoaded as r, on as f, QUICK_EVENT as u, createOptimizedMutationObserver as p, attr as e } from "../utils.js";
+const g = d.dialog.split(" ")[0], b = m ? document.getElementsByClassName(
+  g
+) : [], h = () => {
   for (const t of b)
-    t.matches('[open]:not([data-modal="false"]):not(:modal)') && (t.addEventListener("close", i, e), t.close(), t.showModal(), window.requestAnimationFrame(
-      () => t.removeEventListener("close", i, e)
-      // Re-enable closing events
-    ));
-}, L = ({ clientX: t, clientY: n, target: o }) => {
+    t.isConnected && t.showModal && t.close && (t.matches('[open]:not([data-modal="false"]):not(:modal)') ? (e(t, "open", null), t.showModal()) : t.matches(":modal:not([open])") && (e(t, "open", ""), t.close()));
+}, E = ({ clientX: t, clientY: n, target: o }) => {
   var s;
-  if (o instanceof HTMLDialogElement && g(o, "data-closedby") === "any") {
-    const { top: a, right: c, bottom: d, left: l } = o.getBoundingClientRect();
-    a <= n && n <= d && l <= t && t <= c || o.close();
+  if (o instanceof HTMLDialogElement && e(o, "data-closedby") === "any") {
+    const { top: i, right: a, bottom: c, left: l } = o.getBoundingClientRect();
+    i <= n && n <= c && l <= t && t <= a || o.close();
   } else o instanceof Element && o.closest('button[data-command="close"]') && ((s = o == null ? void 0 : o.closest("dialog")) == null || s.close());
 };
-u(() => {
-  E(document, "click", L, e), f(I).observe(
+r(() => {
+  f(document, "click", E, u), p(h).observe(
     document.documentElement,
     {
       attributeFilter: ["open"],

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tIS_BROWSER,\n\tQUICK_EVENT,\n\tattr,\n\tcreateOptimizedMutationObserver,\n\ton,\n\tonLoaded,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = IS_BROWSER\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\nconst PREVENT_EVENT = (event: Event) => {\n\tevent.stopImmediatePropagation();\n\tevent.stopPropagation();\n};\n\nconst handleModal = () => {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\tdialog.addEventListener(\"close\", PREVENT_EVENT, QUICK_EVENT); // Prevent closing events due to swapping to modal\n\t\t\tdialog.close();\n\t\t\tdialog.showModal();\n\t\t\twindow.requestAnimationFrame(\n\t\t\t\t() => dialog.removeEventListener(\"close\", PREVENT_EVENT, QUICK_EVENT), // Re-enable closing events\n\t\t\t);\n\t\t}\n};\n\nconst handleClick = ({ clientX: x, clientY: y, target: el }: MouseEvent) => {\n\tif (el instanceof HTMLDialogElement && attr(el, \"data-closedby\") === \"any\") {\n\t\tconst { top, right, bottom, left } = el.getBoundingClientRect();\n\t\tconst isInside = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (!isInside) el.close();\n\t} else if (\n\t\tel instanceof Element &&\n\t\tel.closest('button[data-command=\"close\"]')\n\t) {\n\t\tel?.closest(\"dialog\")?.close();\n\t}\n};\n\nonLoaded(() => {\n\ton(document, \"click\", handleClick as EventListener, QUICK_EVENT);\n\tcreateOptimizedMutationObserver(handleModal).observe(\n\t\tdocument.documentElement,\n\t\t{\n\t\t\tattributeFilter: [\"open\"],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t);\n});\n"],"names":["CSS_DIALOG","styles","DIALOGS","IS_BROWSER","PREVENT_EVENT","event","handleModal","dialog","QUICK_EVENT","handleClick","x","y","el","attr","top","right","bottom","left","_a","onLoaded","on","createOptimizedMutationObserver"],"mappings":";;AAUA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,IACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAC,GACEI,IAAgB,CAACC,MAAiB;AACvC,EAAAA,EAAM,yBAAyB,GAC/BA,EAAM,gBAAgB;AACvB,GAEMC,IAAc,MAAM;AACzB,aAAWC,KAAUL;AAChB,IAAAK,EAAO,QAAQ,8CAA8C,MACzDA,EAAA,iBAAiB,SAASH,GAAeI,CAAW,GAC3DD,EAAO,MAAM,GACbA,EAAO,UAAU,GACV,OAAA;AAAA,MACN,MAAMA,EAAO,oBAAoB,SAASH,GAAeI,CAAW;AAAA;AAAA,IACrE;AAEH,GAEMC,IAAc,CAAC,EAAE,SAASC,GAAG,SAASC,GAAG,QAAQC,QAAqB;;AAC3E,MAAIA,aAAc,qBAAqBC,EAAKD,GAAI,eAAe,MAAM,OAAO;AAC3E,UAAM,EAAE,KAAAE,GAAK,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAK,IAAIL,EAAG,sBAAsB;AAG1D,IAFaE,KAAOH,KAAKA,KAAKK,KAAUC,KAAQP,KAAKA,KAAKK,KAE/CH,EAAG,MAAM;AAAA,EAAA,OAExBA,aAAc,WACdA,EAAG,QAAQ,8BAA8B,OAErCM,IAAAN,KAAA,gBAAAA,EAAA,QAAQ,cAAR,QAAAM,EAAmB;AAEzB;AAEAC,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,SAASX,GAA8BD,CAAW,GAC/Da,EAAgCf,CAAW,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT;AAAA,MACC,iBAAiB,CAAC,MAAM;AAAA,MACxB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEX;AACD,CAAC;"}
+{"version":3,"file":"dialog-observer.js","sources":["../../designsystem/dialog/dialog-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tIS_BROWSER,\n\tQUICK_EVENT,\n\tattr,\n\tcreateOptimizedMutationObserver,\n\ton,\n\tonLoaded,\n} from \"../utils\";\n\nconst CSS_DIALOG = styles.dialog.split(\" \")[0];\nconst DIALOGS = IS_BROWSER\n\t? (document.getElementsByClassName(\n\t\t\tCSS_DIALOG,\n\t\t) as HTMLCollectionOf<HTMLDialogElement>)\n\t: [];\n\nconst handleModal = () => {\n\tfor (const dialog of DIALOGS)\n\t\tif (dialog.isConnected && dialog.showModal && dialog.close) {\n\t\t\tif (dialog.matches('[open]:not([data-modal=\"false\"]):not(:modal)')) {\n\t\t\t\tattr(dialog, \"open\", null); // Using attribute instead of .close to avoid `close` event\n\t\t\t\tdialog.showModal();\n\t\t\t} else if (dialog.matches(\":modal:not([open])\")) {\n\t\t\t\tattr(dialog, \"open\", \"\"); // Set as open\n\t\t\t\tdialog.close(); // So we correclty can call .close, removing <dialog> from #top-layer\n\t\t\t}\n\t\t}\n};\n\nconst handleClick = ({ clientX: x, clientY: y, target: el }: MouseEvent) => {\n\tif (el instanceof HTMLDialogElement && attr(el, \"data-closedby\") === \"any\") {\n\t\tconst { top, right, bottom, left } = el.getBoundingClientRect();\n\t\tconst isInside = top <= y && y <= bottom && left <= x && x <= right;\n\n\t\tif (!isInside) el.close();\n\t} else if (\n\t\tel instanceof Element &&\n\t\tel.closest('button[data-command=\"close\"]')\n\t) {\n\t\tel?.closest(\"dialog\")?.close();\n\t}\n};\n\nonLoaded(() => {\n\ton(document, \"click\", handleClick as EventListener, QUICK_EVENT);\n\tcreateOptimizedMutationObserver(handleModal).observe(\n\t\tdocument.documentElement,\n\t\t{\n\t\t\tattributeFilter: [\"open\"],\n\t\t\tattributes: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t},\n\t);\n});\n"],"names":["CSS_DIALOG","styles","DIALOGS","IS_BROWSER","handleModal","dialog","attr","handleClick","x","y","el","top","right","bottom","left","_a","onLoaded","on","QUICK_EVENT","createOptimizedMutationObserver"],"mappings":";;AAUA,MAAMA,IAAaC,EAAO,OAAO,MAAM,GAAG,EAAE,CAAC,GACvCC,IAAUC,IACZ,SAAS;AAAA,EACVH;AACD,IACC,CAAC,GAEEI,IAAc,MAAM;AACzB,aAAWC,KAAUH;AACpB,IAAIG,EAAO,eAAeA,EAAO,aAAaA,EAAO,UAChDA,EAAO,QAAQ,8CAA8C,KAC3DC,EAAAD,GAAQ,QAAQ,IAAI,GACzBA,EAAO,UAAU,KACPA,EAAO,QAAQ,oBAAoB,MACxCC,EAAAD,GAAQ,QAAQ,EAAE,GACvBA,EAAO,MAAM;AAGjB,GAEME,IAAc,CAAC,EAAE,SAASC,GAAG,SAASC,GAAG,QAAQC,QAAqB;;AAC3E,MAAIA,aAAc,qBAAqBJ,EAAKI,GAAI,eAAe,MAAM,OAAO;AAC3E,UAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAK,IAAIJ,EAAG,sBAAsB;AAG1D,IAFaC,KAAOF,KAAKA,KAAKI,KAAUC,KAAQN,KAAKA,KAAKI,KAE/CF,EAAG,MAAM;AAAA,EAAA,OAExBA,aAAc,WACdA,EAAG,QAAQ,8BAA8B,OAErCK,IAAAL,KAAA,gBAAAA,EAAA,QAAQ,cAAR,QAAAK,EAAmB;AAEzB;AAEAC,EAAS,MAAM;AACX,EAAAC,EAAA,UAAU,SAASV,GAA8BW,CAAW,GAC/DC,EAAgCf,CAAW,EAAE;AAAA,IAC5C,SAAS;AAAA,IACT;AAAA,MACC,iBAAiB,CAAC,MAAM;AAAA,MACxB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEX;AACD,CAAC;"}

package/mtds/field/field-observer.js

@@ -1,18 +1,19 @@
 import { UHTMLDataListElement as L } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
 import u from "../styles.module.css.js";
-import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as n, useId as d } from "../utils.js";
+import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as s, useId as d } from "../utils.js";
 const g = u.field.split(" ")[0], P = "--mtds-text-count-over", b = "--mtds-text-count-under", p = u.validation.split(" "), x = p[0];
 function _(t) {
-  for (const e of t) {
-    const l = [], s = [];
-    let o = null, i = null, r = !0;
-    for (const a of e.getElementsByTagName("*"))
-      a instanceof HTMLLabelElement ? l.push(a) : a instanceof L ? i = a : m(a) ? o = a : a.classList.contains(x) ? (r = n(a, "data-color") === "success" || !a.clientWidth || !a.clientHeight, s.unshift(d(a))) : a instanceof HTMLParagraphElement && s.push(d(a));
-    if (o) {
-      for (const a of l) a.htmlFor = d(o);
-      D(o, i), v(o), h(o), n(o, "aria-describedby", s.join(" ")), n(o, "aria-invalid", `${!r}`);
+  for (const e of t)
+    if (e.isConnected) {
+      const l = [], a = [];
+      let n = null, i = null, r = !0;
+      for (const o of e.getElementsByTagName("*"))
+        o instanceof HTMLLabelElement ? l.push(o) : o instanceof L ? i = o : m(o) ? n = o : o.classList.contains(x) ? (r = s(o, "data-color") === "success" || !o.clientWidth || !o.clientHeight, a.unshift(d(o))) : o instanceof HTMLParagraphElement && a.push(d(o));
+      if (n) {
+        for (const o of l) o.htmlFor = d(n);
+        D(n, i), v(n), h(n), s(n, "aria-describedby", a.join(" ") || null), s(n, "aria-invalid", `${!r}`);
+      }
     }
-  }
 }
 function h(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
@@ -21,18 +22,18 @@ function h(t) {
   ));
 }
 function D(t, e) {
-  if (n(t, "list", e ? d(e) : null), !e) return;
-  t.hasAttribute("placeholder") || n(t, "placeholder", "");
-  const l = window.getComputedStyle(e), s = t.closest("u-tags"), o = (i) => l.getPropertyValue(`--mtds-text-${i}`);
-  n(e, "data-sr-plural", o("datalist-plural")), n(e, "data-sr-singular", o("datalist-singular")), s && (n(s, "data-sr-added", o("tags-added")), n(s, "data-sr-empty", o("tags-empty")), n(s, "data-sr-found", o("tags-found")), n(s, "data-sr-of", o("tags-of")), n(s, "data-sr-remove", o("tags-remove")), n(s, "data-sr-removed", o("tags-removed")));
+  if (s(t, "list", e ? d(e) : null), !e) return;
+  t.hasAttribute("placeholder") || s(t, "placeholder", "");
+  const l = window.getComputedStyle(e), a = t.closest("u-tags"), n = (i) => l.getPropertyValue(`--mtds-text-${i}`);
+  s(e, "data-sr-plural", n("datalist-plural")), s(e, "data-sr-singular", n("datalist-singular")), a && (s(a, "data-sr-added", n("tags-added")), s(a, "data-sr-empty", n("tags-empty")), s(a, "data-sr-found", n("tags-found")), s(a, "data-sr-of", n("tags-of")), s(a, "data-sr-remove", n("tags-remove")), s(a, "data-sr-removed", n("tags-removed")));
 }
 function v(t) {
-  var s, o;
-  const e = t == null ? void 0 : t.nextElementSibling, l = e && n(e, "data-count");
+  var a, n;
+  const e = t == null ? void 0 : t.nextElementSibling, l = e && s(e, "data-count");
   if (e && l) {
-    const i = Number(l) - t.value.length, r = i < 0, a = n(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), y = ((s = c.getPropertyValue(P)) == null ? void 0 : s.slice(1, -1)) || "", S = ((o = c.getPropertyValue(b)) == null ? void 0 : o.slice(1, -1)) || "";
-    if (a !== r) {
-      n(e, "aria-live", r ? "polite" : "off");
+    const i = Number(l) - t.value.length, r = i < 0, o = s(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), y = ((a = c.getPropertyValue(P)) == null ? void 0 : a.slice(1, -1)) || "", S = ((n = c.getPropertyValue(b)) == null ? void 0 : n.slice(1, -1)) || "";
+    if (o !== r) {
+      s(e, "aria-live", r ? "polite" : "off");
       for (const E of p) e.classList.toggle(E, r);
     }
     e.textContent = (r ? y : S).replace(

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

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\n\tfor (const field of fields) {\n\t\tconst labels: HTMLLabelElement[] = [];\n\t\tconst descs: string[] = [];\n\t\tlet input: HTMLInputElement | null = null;\n\t\tlet datalist: UHTMLDataListElement | null = null;\n\t\tlet valid = true;\n\n\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\telse if (el instanceof UHTMLDataListElement) datalist = el;\n\t\t\telse if (isInputLike(el)) input = el;\n\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t// Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n\t\t\t\tvalid =\n\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\tdescs.unshift(useId(el));\n\t\t\t} else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n\t\t}\n\n\t\tif (input) {\n\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\trenderDatalist(input, datalist);\n\t\t\trenderCounter(input);\n\t\t\trenderTextareaSize(input);\n\t\t\tattr(input, \"aria-describedby\", descs.join(\" \"));\n\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t}\n\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nfunction renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\t\tconst under =\n\t\t\tstyle.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","input","datalist","valid","el","UHTMLDataListElement","isInputLike","attr","useId","label","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleInput","target","handleInvalid","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: string[] = [];\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet datalist: UHTMLDataListElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLDataListElement) datalist = el;\n\t\t\t\telse if (isInputLike(el)) input = el;\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t// Must be before instanceof HTMLParagraphElement since validation can also be a <p>\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tdescs.unshift(useId(el));\n\t\t\t\t} else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderDatalist(input, datalist);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descs.join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nfunction renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\t\tconst under =\n\t\t\tstyle.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","input","datalist","valid","el","UHTMLDataListElement","isInputLike","attr","useId","label","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleInput","target","handleInvalid","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.js

@@ -1,6 +1,6 @@
-import { jsx as i, Fragment as w, jsxs as N } from "react/jsx-runtime";
-import { clsx as O } from "../external/clsx/dist/clsx.js";
-import { forwardRef as e } from "react";
+import { jsx as i, Fragment as w, jsxs as O } from "react/jsx-runtime";
+import { clsx as j } from "../external/clsx/dist/clsx.js";
+import { forwardRef as n } from "react";
 import "../alert/alert.js";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
@@ -14,7 +14,7 @@ import "../divider/divider.js";
 import "../errorsummary/errorsummary.js";
 import "../fieldset/fieldset.js";
 import "../heading/heading.js";
-import { HelpText as C } from "../helptext/helptext.js";
+import { HelpText as E } from "../helptext/helptext.js";
 import "../input/input.js";
 import "../layout/layout.js";
 import "../link/link.js";
@@ -28,67 +28,68 @@ import "../table/table.js";
 import "../tabs/tabs.js";
 import "../tag/tag.js";
 import "../validation/validation.js";
-import n from "../styles.module.css.js";
-const H = e(function({
+import e from "../styles.module.css.js";
+import { toCustomElementProps as f } from "../utils.js";
+const H = n(function({
   "data-size": r,
   as: t,
-  className: o,
-  count: f,
-  description: u,
-  error: T,
-  helpText: h,
-  helpTextLabel: A,
-  label: F,
-  options: s,
-  prefix: p,
-  style: D,
-  suffix: c,
-  validation: y,
-  ...l
-}, d) {
-  const g = t || "div", z = !!c || !!p, v = y || T, b = {
+  className: l,
+  count: u,
+  description: h,
+  error: A,
+  helpText: F,
+  helpTextLabel: D,
+  label: g,
+  options: p,
+  prefix: s,
+  style: y,
+  suffix: d,
+  validation: z,
+  ...m
+}, c) {
+  const v = t || "div", C = !!d || !!s, b = z || A, x = {
     "data-size": r,
-    className: O(n.field, o),
-    style: D
+    className: j(e.field, l),
+    style: y
   };
-  return t === "select" && !l.children && Object.assign(l, {
-    children: /* @__PURE__ */ i(w, { children: s == null ? void 0 : s.map((a) => typeof a == "string" ? { label: a, value: a } : a).map(({ label: a, value: x }) => /* @__PURE__ */ i("option", { value: x, children: a }, x)) })
-  }), t ? /* @__PURE__ */ N("div", { ...b, children: [
-    !!F && /* @__PURE__ */ i("label", { children: F }),
-    !!h && /* @__PURE__ */ i(C, { "aria-label": A, children: h }),
-    !!u && /* @__PURE__ */ i("p", { children: u }),
-    z ? /* @__PURE__ */ N(j, { children: [
-      !!p && /* @__PURE__ */ i("span", { children: p }),
-      /* @__PURE__ */ i(g, { className: n.input, ref: d, ...l }),
-      !!c && /* @__PURE__ */ i("span", { children: c })
-    ] }) : /* @__PURE__ */ i(g, { className: n.input, ref: d, ...l }),
-    !!v && /* @__PURE__ */ i("div", { className: n.validation, children: v }),
-    !!f && /* @__PURE__ */ i("p", { "data-count": f })
-  ] }) : /* @__PURE__ */ i("div", { ref: d, ...b, ...l });
-}), j = e(
-  function({ className: r, ...t }, o) {
-    return /* @__PURE__ */ i("div", { className: O(n.affixes, r), ref: o, ...t });
+  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)) })
+  }), t ? /* @__PURE__ */ O("div", { ...x, children: [
+    !!g && /* @__PURE__ */ i("label", { children: g }),
+    !!F && /* @__PURE__ */ i(E, { "aria-label": D, children: F }),
+    !!h && /* @__PURE__ */ i("p", { children: h }),
+    C ? /* @__PURE__ */ O(T, { children: [
+      !!s && /* @__PURE__ */ i("span", { children: s }),
+      /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+      !!d && /* @__PURE__ */ i("span", { children: d })
+    ] }) : /* @__PURE__ */ i(v, { className: e.input, ref: c, ...m }),
+    !!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 });
   }
-), R = e(
-  function({ className: r, ...t }, o) {
-    return /* @__PURE__ */ i("u-datalist", { class: r, ref: o, ...t });
+), P = n(
+  function(r, t) {
+    return /* @__PURE__ */ i("u-datalist", { ref: t, ...f(r) });
   }
-), k = e(
-  function({ className: r, ...t }, o) {
-    return /* @__PURE__ */ i("u-option", { class: r, ref: o, ...t });
+), R = n(
+  function(r, t) {
+    return /* @__PURE__ */ i("u-option", { ref: t, ...f(r) });
   }
-), q = e(
-  function({ className: r, ...t }, o) {
-    return /* @__PURE__ */ i("u-tags", { class: r, ref: o, ...t });
+), k = n(
+  function(r, t) {
+    return /* @__PURE__ */ i("u-tags", { ref: t, ...f(r) });
   }
-), di = Object.assign(H, {
-  Affixes: j,
-  Datalist: R,
-  Tags: q,
-  Option: k
+), ui = Object.assign(H, {
+  Affixes: T,
+  Datalist: P,
+  Tags: k,
+  Option: R
 });
 export {
-  di as Field,
+  ui as Field,
   H 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\";\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({ className, ...rest }, ref) {\n\t\treturn <u-datalist class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption({ className, ...rest }, ref) {\n\t\treturn <u-option class={className} ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags({ className, ...rest }, ref) {\n\t\treturn <u-tags class={className} ref={ref} {...rest} />;\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","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","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 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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"}

package/mtds/fieldset/fieldset-observer.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isInputLike, onLoaded, onMutation, useId } from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\n\nfunction handleMutation(fieldsets: HTMLCollectionOf<Element>) {\n\tfor (const fieldset of fieldsets) {\n\t\tconst inputs: HTMLInputElement[] = [];\n\t\tlet validationId: string | null = null;\n\n\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\tif (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n\t\t\telse if (isInputLike(el)) inputs.push(el);\n\t\t}\n\n\t\tfor (const input of inputs) {\n\t\t\tattr(input, \"aria-describedby\", validationId);\n\t\t\tattr(input, \"aria-invalid\", `${!!validationId}`);\n\t\t}\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELDSET, handleMutation);\n});\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","handleMutation","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","attr","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAErD,SAASE,EAAeC,GAAsC;AAC7D,aAAWC,KAAYD,GAAW;AACjC,UAAME,IAA6B,CAAC;AACpC,QAAIC,IAA8B;AAElC,eAAWC,KAAMH,EAAS,qBAAqB,GAAG;AACjD,MAAIG,EAAG,UAAU,SAASN,CAAc,IAAGK,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGzC,eAAWG,KAASL;AACd,MAAAM,EAAAD,GAAO,oBAAoBJ,CAAY,GAC5CK,EAAKD,GAAO,gBAAgB,GAAG,CAAC,CAACJ,CAAY,EAAE;AAAA,EAChD;AAEF;AAEAM,EAAS,MAAM;AACH,EAAAC,EAAA,SAAS,iBAAiBd,GAAcG,CAAc;AAClE,CAAC;"}
+{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { attr, isInputLike, onLoaded, onMutation, useId } from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\n\nfunction handleMutation(fieldsets: HTMLCollectionOf<Element>) {\n\tfor (const fieldset of fieldsets)\n\t\tif (fieldset.isConnected) {\n\t\t\tconst inputs: HTMLInputElement[] = [];\n\t\t\tlet validationId: string | null = null;\n\n\t\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el.classList.contains(CSS_VALIDATION)) validationId = useId(el);\n\t\t\t\telse if (isInputLike(el)) inputs.push(el);\n\t\t\t}\n\n\t\t\tfor (const input of inputs) {\n\t\t\t\tattr(input, \"aria-describedby\", validationId);\n\t\t\t\tattr(input, \"aria-invalid\", `${!!validationId}`);\n\t\t\t}\n\t\t}\n}\n\nonLoaded(() =>\n\tonMutation(document.documentElement, CSS_FIELDSET, handleMutation),\n);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","handleMutation","fieldsets","fieldset","inputs","validationId","el","useId","isInputLike","input","attr","onLoaded","onMutation"],"mappings":";;AAGA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AAErD,SAASE,EAAeC,GAAsC;AAC7D,aAAWC,KAAYD;AACtB,QAAIC,EAAS,aAAa;AACzB,YAAMC,IAA6B,CAAC;AACpC,UAAIC,IAA8B;AAElC,iBAAWC,KAAMH,EAAS,qBAAqB,GAAG;AACjD,QAAIG,EAAG,UAAU,SAASN,CAAc,IAAGK,IAAeE,EAAMD,CAAE,IACzDE,EAAYF,CAAE,KAAGF,EAAO,KAAKE,CAAE;AAGzC,iBAAWG,KAASL;AACd,QAAAM,EAAAD,GAAO,oBAAoBJ,CAAY,GAC5CK,EAAKD,GAAO,gBAAgB,GAAG,CAAC,CAACJ,CAAY,EAAE;AAAA,IAChD;AAEH;AAEAM;AAAA,EAAS,MACRC,EAAW,SAAS,iBAAiBd,GAAcG,CAAc;AAClE;"}