@mattilsynet/design 0.5.4 → 1.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, onMutation } from \"../utils\";\nconst CSS_LOGO = styles.logo.split(\" \")[0];\nlet FAVICON: HTMLLinkElement;\n\nfunction process(logos: HTMLCollectionOf<Element>) {\n  const svg = logos[0]?.firstElementChild;\n\n  if (!svg) return;\n  if (!FAVICON) {\n    const { head } = window.top?.document || document;\n    const oldIcon = head.getElementsByTagName(\"link[rel~='icon']\");\n    const newIcon = document.createElement(\"link\");\n\n    for (const icon of oldIcon) icon.remove();\n    FAVICON = head.appendChild(Object.assign(newIcon, { rel: \"icon\" }));\n  }\n\n  const isDot = svg.parentElement?.hasAttribute(\"data-color\");\n  const style = window.getComputedStyle(svg);\n  const text = style.getPropertyValue(\"color\");\n  const back = style.getPropertyValue(\"background-color\");\n\n  FAVICON.href = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${encodeURIComponent(svg.outerHTML.replace(/(fill|width|height|xmlns)=\\S+/gi, \"\").replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`))}</g></svg>`;\n}\n\n// Force a update even if not active tab\nif (IS_BROWSER)\n  setTimeout(() => process(document.getElementsByClassName(CSS_LOGO)), 300);\n\nexport const observe = (el: Element) => onMutation(el, CSS_LOGO, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_LOGO, false);\n"],"names":["CSS_LOGO","styles","FAVICON","process","logos","svg","_a","head","_b","oldIcon","newIcon","icon","isDot","_c","style","text","back","IS_BROWSER","observe","el","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AACzC,IAAIC;AAEJ,SAASC,EAAQC,GAAkC;;AAC3C,QAAAC,KAAMC,IAAAF,EAAM,CAAC,MAAP,gBAAAE,EAAU;AAEtB,MAAI,CAACD,EAAK;AACV,MAAI,CAACH,GAAS;AACZ,UAAM,EAAE,MAAAK,EAAS,MAAAC,IAAA,OAAO,QAAP,gBAAAA,EAAY,aAAY,UACnCC,IAAUF,EAAK,qBAAqB,mBAAmB,GACvDG,IAAU,SAAS,cAAc,MAAM;AAElC,eAAAC,KAAQF,EAAS,CAAAE,EAAK,OAAO;AAC9B,IAAAT,IAAAK,EAAK,YAAY,OAAO,OAAOG,GAAS,EAAE,KAAK,OAAO,CAAC,CAAC;AAAA,EAAA;AAGpE,QAAME,KAAQC,IAAAR,EAAI,kBAAJ,gBAAAQ,EAAmB,aAAa,eACxCC,IAAQ,OAAO,iBAAiBT,CAAG,GACnCU,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,kBAAkB;AAE9C,EAAAZ,EAAA,OAAO,8FAA8FU,IAAQ,SAASI,CAAI,gDAAgDD,CAAI,yEAAyEH,IAAQ,MAAM,CAAC,qEAAqE,mBAAmBP,EAAI,UAAU,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,qCAAqCU,CAAI,GAAG,CAAC,CAAC;AACne;AAGIE,KACF,WAAW,MAAMd,EAAQ,SAAS,uBAAuBH,CAAQ,CAAC,GAAG,GAAG;AAEnE,MAAMkB,IAAU,CAACC,MAAgBC,EAAWD,GAAInB,GAAUG,CAAO,GAC3DkB,IAAY,CAACF,MAAgBC,EAAWD,GAAInB,GAAU,EAAK;"}
+{"version":3,"file":"logo-observer.js","sources":["../../designsystem/logo/logo-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport { IS_BROWSER, onMutation } from \"../utils\";\nconst CSS_LOGO = styles.logo.split(\" \")[0];\nlet FAVICON: HTMLLinkElement;\n\nfunction process(logos: HTMLCollectionOf<Element>) {\n  const svg = logos[0]?.firstElementChild;\n\n  if (!svg) return;\n  if (!FAVICON) {\n    const oldIcon = document.head.getElementsByTagName(\"link[rel~='icon']\");\n    const newIcon = document.createElement(\"link\");\n\n    for (const icon of oldIcon) icon.remove();\n    FAVICON = document.head.appendChild(Object.assign(newIcon, { rel: \"icon\" }));\n  }\n\n  const isDot = svg.parentElement?.hasAttribute(\"data-color\");\n  const style = window.getComputedStyle(svg);\n  const text = style.getPropertyValue(\"color\");\n  const back = style.getPropertyValue(\"background-color\");\n\n  FAVICON.href = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55'><rect fill='${isDot ? \"none\" : back}' width='51' height='51' x='2' y='2' stroke='${text}' stroke-dasharray='0.09 6.38' stroke-linecap='round' stroke-opacity='${isDot ? 0.6 : 0}' stroke-width='2.3' rx='25.5'/><g transform=\"translate(7.5 7.5)\">${encodeURIComponent(svg.outerHTML.replace(/(fill|width|height|xmlns)=\\S+/gi, \"\").replace(\"<svg\", `<svg width=\"40\" height=\"40\" fill=\"${text}\"`))}</g></svg>`;\n}\n\n// Force a update even if not active tab\nif (IS_BROWSER)\n  setTimeout(() => process(document.getElementsByClassName(CSS_LOGO)), 300);\n\nexport const observe = (el: Element) => onMutation(el, CSS_LOGO, process);\nexport const unobserve = (el: Element) => onMutation(el, CSS_LOGO, false);\n"],"names":["CSS_LOGO","styles","FAVICON","process","logos","svg","_a","oldIcon","newIcon","icon","isDot","_b","style","text","back","IS_BROWSER","observe","el","onMutation","unobserve"],"mappings":";;AAEA,MAAMA,IAAWC,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AACzC,IAAIC;AAEJ,SAASC,EAAQC,GAAkC;;AAC3C,QAAAC,KAAMC,IAAAF,EAAM,CAAC,MAAP,gBAAAE,EAAU;AAEtB,MAAI,CAACD,EAAK;AACV,MAAI,CAACH,GAAS;AACZ,UAAMK,IAAU,SAAS,KAAK,qBAAqB,mBAAmB,GAChEC,IAAU,SAAS,cAAc,MAAM;AAElC,eAAAC,KAAQF,EAAS,CAAAE,EAAK,OAAO;AAC9B,IAAAP,IAAA,SAAS,KAAK,YAAY,OAAO,OAAOM,GAAS,EAAE,KAAK,OAAO,CAAC,CAAC;AAAA,EAAA;AAG7E,QAAME,KAAQC,IAAAN,EAAI,kBAAJ,gBAAAM,EAAmB,aAAa,eACxCC,IAAQ,OAAO,iBAAiBP,CAAG,GACnCQ,IAAOD,EAAM,iBAAiB,OAAO,GACrCE,IAAOF,EAAM,iBAAiB,kBAAkB;AAE9C,EAAAV,EAAA,OAAO,8FAA8FQ,IAAQ,SAASI,CAAI,gDAAgDD,CAAI,yEAAyEH,IAAQ,MAAM,CAAC,qEAAqE,mBAAmBL,EAAI,UAAU,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,qCAAqCQ,CAAI,GAAG,CAAC,CAAC;AACne;AAGIE,KACF,WAAW,MAAMZ,EAAQ,SAAS,uBAAuBH,CAAQ,CAAC,GAAG,GAAG;AAEnE,MAAMgB,IAAU,CAACC,MAAgBC,EAAWD,GAAIjB,GAAUG,CAAO,GAC3DgB,IAAY,CAACF,MAAgBC,EAAWD,GAAIjB,GAAU,EAAK;"}

package/mtds/popover/popover.js

@@ -2,11 +2,11 @@ import { jsx as e } from "react/jsx-runtime";
 import { clsx as m } from "../external/clsx/dist/clsx.js";
 import { forwardRef as s } from "react";
 import f from "../styles.module.css.js";
-const x = s(function({ as: o, className: r, ...p }, t) {
+const u = s(function({ as: o, className: r, ...p }, t) {
   return /* @__PURE__ */ e(
     o || "div",
     {
-      popover: "",
+      popover: "auto",
       className: m(f.popover, r),
       ref: t,
       ...p
@@ -14,6 +14,6 @@ const x = s(function({ as: o, className: r, ...p }, t) {
   );
 });
 export {
-  x as Popover
+  u as Popover
 };
 //# sourceMappingURL=popover.js.map

package/mtds/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAoBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC;"}
+{"version":3,"file":"popover.js","sources":["../../designsystem/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type PopoverProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-position\"?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t\t}\n\t>;\n\ntype PopoverComponent = <As extends React.ElementType = \"div\">(\n\tprops: PopoverProps<As>,\n) => JSX.Element;\n\nexport const Popover: PopoverComponent = forwardRef<null>(function Popover<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: PopoverProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn (\n\t\t<Tag\n\t\t\tpopover=\"auto\"\n\t\t\tclassName={clsx(styles.popover, className)}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}) as PopoverComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Popover","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAoBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC;AAAA,IAHWJ,KAAM;AAAA,IAGhB;AAAA,MACA,SAAQ;AAAA,MACR,WAAWK,EAAKC,EAAO,SAASL,CAAS;AAAA,MACzC,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC;"}

package/mtds/popover/popover.stories.d.ts

@@ -10,4 +10,5 @@ export declare const Dropdown: Story;
 export declare const Position: Story;
 export declare const WithClose: Story;
 export declare const WithArrow: Story;
+export declare const WithIcon: Story;
 export declare const WithDivider: Story;

package/mtds/react.d.ts

@@ -11,7 +11,7 @@ export * from './divider/divider';
 export * from './errorsummary/errorsummary';
 export * from './field/field';
 export * from './fieldset/fieldset';
-export * from './heading/heading';
+export * from './typography/typography';
 export * from './input/input';
 export * from './layout/layout';
 export * from './link/link';

package/mtds/react.js

@@ -11,7 +11,7 @@ import { Divider as C } from "./divider/divider.js";
 import { Errorsummary as T } from "./errorsummary/errorsummary.js";
 import { Field as A, FieldComp as L } from "./field/field.js";
 import { Fieldset as S } from "./fieldset/fieldset.js";
-import { Heading as h } from "./heading/heading.js";
+import { Heading as h } from "./typography/typography.js";
 import { Input as E } from "./input/input.js";
 import { Flex as H, Grid as I } from "./layout/layout.js";
 import { Link as j } from "./link/link.js";