@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Logo/index.js

@@ -1,44 +1,47 @@
-import { jsxs as t, jsx as h } from "react/jsx-runtime";
-import { AnalyticsId as s } from "../../constants.js";
-import { useUuid as z } from "../../hooks/useUuid.js";
-import { getColor as e } from "../../theme/currys/color.js";
-const m = ({ size: l = 300, color: v = "black", byline: r = !1, className: V, testId: i }) => {
-  const c = z();
-  return r ? /* @__PURE__ */ t(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AnalyticsId } from "../../constants.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getColor } from "../../theme/currys/color.js";
+const Logo = ({ size = 300, color = "black", byline = false, className, testId }) => {
+  const uuid = useUuid();
+  if (byline) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        role: "img",
+        "aria-labelledby": uuid,
+        viewBox: "0 0 87 12",
+        className,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Logo,
+        children: [
+          /* @__PURE__ */ jsx("title", { id: uuid, children: "Helsenorge" }),
+          /* @__PURE__ */ jsx("g", { fill: getColor(color), children: /* @__PURE__ */ jsx("path", { d: "M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: l,
+      width: size,
       role: "img",
-      "aria-labelledby": c,
-      viewBox: "0 0 87 12",
-      className: V,
-      "data-testid": i,
-      "data-analyticsid": s.Logo,
-      children: [
-        /* @__PURE__ */ h("title", { id: c, children: "Helsenorge" }),
-        /* @__PURE__ */ h("g", { fill: e(v), children: /* @__PURE__ */ h("path", { d: "M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z" }) })
-      ]
-    }
-  ) : /* @__PURE__ */ t(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: l,
-      role: "img",
-      "aria-labelledby": c,
+      "aria-labelledby": uuid,
       viewBox: "0 0 502 220",
-      className: V,
-      "data-testid": i,
-      "data-analyticsid": s.Logo,
+      className,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Logo,
       children: [
-        /* @__PURE__ */ h("title", { id: c, children: "Helsenorge" }),
-        /* @__PURE__ */ h("g", { fill: e(v), children: /* @__PURE__ */ h("path", { d: "M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z" }) })
+        /* @__PURE__ */ jsx("title", { id: uuid, children: "Helsenorge" }),
+        /* @__PURE__ */ jsx("g", { fill: getColor(color), children: /* @__PURE__ */ jsx("path", { d: "M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z" }) })
       ]
     }
   );
 };
 export {
-  m as default
+  Logo as default
 };
 //# sourceMappingURL=index.js.map

package/components/Logo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\n\ntype LogoColor = 'black' | 'white';\n\nexport interface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {\n  const uuid = useUuid();\n\n  if (byline) {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        role={'img'}\n        aria-labelledby={uuid}\n        viewBox=\"0 0 87 12\"\n        className={className}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Logo}\n      >\n        <title id={uuid}>{'Helsenorge'}</title>\n        <g fill={getColor(color)}>\n          <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      role={'img'}\n      aria-labelledby={uuid}\n      viewBox=\"0 0 502 220\"\n      className={className}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Logo}\n    >\n      <title id={uuid}>{'Helsenorge'}</title>\n      <g fill={getColor(color)}>\n        <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n      </g>\n    </svg>\n  );\n};\n\nexport default Logo;\n"],"names":["Logo","size","color","byline","className","testId","uuid","useUuid","jsxs","AnalyticsId","jsx","getColor"],"mappings":";;;;AAqBM,MAAAA,IAA4B,CAAC,EAAE,MAAAC,IAAO,KAAK,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAO,WAAAC,GAAW,QAAAC,QAAa;AACxG,QAAMC,IAAOC;AAEb,SAAIJ,IAEA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,gBAAAC,EAAA,SAAA,EAAM,IAAIJ,GAAO,UAAa,cAAA;AAAA,QAC/B,gBAAAI,EAAC,KAAE,EAAA,MAAMC,EAAST,CAAK,GACrB,UAAC,gBAAAQ,EAAA,QAAA,EAAK,GAAE,wxCAAA,CAAwxC,EAClyC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAOP;AAAA,MACP,MAAM;AAAA,MACN,mBAAiBK;AAAA,MACjB,SAAQ;AAAA,MACR,WAAAF;AAAA,MACA,eAAaC;AAAA,MACb,oBAAkBI,EAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,gBAAAC,EAAA,SAAA,EAAM,IAAIJ,GAAO,UAAa,cAAA;AAAA,QAC/B,gBAAAI,EAAC,KAAE,EAAA,MAAMC,EAAST,CAAK,GACrB,UAAC,gBAAAQ,EAAA,QAAA,EAAK,GAAE,gqDAAA,CAAgqD,EAC1qD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\n\ntype LogoColor = 'black' | 'white';\n\nexport interface LogoProps {\n  /** Changes the size of the logo. */\n  size?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tChanges the color of the logo. */\n  color?: LogoColor;\n  /** Changes to the byline variant of the logo. */\n  byline?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({ size = 300, color = 'black', byline = false, className, testId }) => {\n  const uuid = useUuid();\n\n  if (byline) {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={size}\n        role={'img'}\n        aria-labelledby={uuid}\n        viewBox=\"0 0 87 12\"\n        className={className}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Logo}\n      >\n        <title id={uuid}>{'Helsenorge'}</title>\n        <g fill={getColor(color)}>\n          <path d=\"M5 .8v2.8H2.6V.8H1V8h1.6V5.1H5V8h1.6V.8zM20.9 6.6V.8h-1.6V8h4.5V6.6zM57.9 1.4c-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.8 3.4 2.8-1.4 2.8-3.4-1.1-3.4-2.8-3.4zm2 3.4c0 1.2-.5 2.7-2 2.7-1.4 0-2-1.4-2-2.7s.5-2.7 2-2.7 2 1.5 2 2.7zM86 4.7c0-2-1.1-3.3-2.8-3.3-1.7 0-2.8 1.4-2.8 3.4s1.2 3.4 2.9 3.4c1.2 0 2.2-.6 2.5-1.7l.1-.2H85v.1c-.3.6-.9 1-1.7 1-1.3 0-1.9-1.2-2-2.3H86v-.4zm-.9-.3h-3.9c.1-1.1.7-2.3 1.9-2.3 1.5 0 2 1.3 2 2.3zM49.2 1.4c-1.1 0-1.7.7-2 1.2v-1h-.8V8h.8V4.8c0-.9.5-2.6 1.9-2.6s1.6 1.2 1.6 2.6V8h.8V4.7c0-1.6-.2-3.3-2.3-3.3zM12.1 6.6V5h2.4V3.7h-2.4V2.2h3.2V.8h-4.8V8h4.9V6.6zM38.3 6.6V5h2.3V3.7h-2.3V2.2h3.2V.8h-4.8V8h4.9V6.6zM65.5 3.3V1.6h-.8V8h.8V4.1l2.8-2v-.9zM77.6 1.2l-1.5 1.1c-.5-.6-1.1-.9-1.9-.9-1.4 0-2.4 1-2.4 2.4 0 1.1.6 2 1.6 2.3l-1.6 1.8c-.4.5-.6.9-.6 1.3 0 1.3 1.1 2.1 2.9 2.1 1.7 0 2.9-.9 2.9-2.1 0-1.3-1.1-2.1-2.9-2.1h-.6l.8-.9c1.3-.1 2.3-1.1 2.3-2.4 0-.3 0-.6-.1-.8l1.2-.8v-1zM74 7.8c1.2 0 2.1.5 2.1 1.4 0 .8-.8 1.4-2.1 1.4-1.2 0-2-.5-2-1.4 0-.8.8-1.4 2-1.4zm.1-2.4c-.9 0-1.6-.7-1.6-1.7s.7-1.6 1.6-1.6c.9 0 1.6.7 1.6 1.6 0 1-.7 1.7-1.6 1.7zM30.4 3.7c-.7-.2-1.4-.5-1.4-1s.4-.7 1-.7.9.5.9.9V3h1.7v-.1c0-1.3-1.1-2.2-2.6-2.2-1.6 0-2.6.8-2.6 2.1 0 1.5 1.3 1.9 2.4 2.3.7.2 1.4.4 1.4.9s-.3.8-1.1.8c-.7 0-1.1-.4-1.1-1v-.1h-1.7v.1c0 1.5 1.1 2.4 2.8 2.4 1.7 0 2.7-.8 2.7-2.2-.1-1.5-1.4-2-2.4-2.3z\" />\n        </g>\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      role={'img'}\n      aria-labelledby={uuid}\n      viewBox=\"0 0 502 220\"\n      className={className}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Logo}\n    >\n      <title id={uuid}>{'Helsenorge'}</title>\n      <g fill={getColor(color)}>\n        <path d=\"M39.8 2.5v26.9H17V2.5H1v69.9h16V43.6h22.8v28.8h16.1V2.5zM250.3 58.6V2.5h-16v69.9h43.5V58.6zM142.9 122.5c-16.1 0-27.4 13.6-27.4 33.1s11.2 33.1 27.4 33.1 27.4-13.6 27.4-33.1-11.3-33.1-27.4-33.1zm19 33.1c0 11.9-5 25.9-19 25.9s-19-13.9-19-25.9c0-11.9 5-25.9 19-25.9s19 14 19 25.9zM501 40c0-19.1-11.1-32.4-27-32.4-16.4 0-27.4 13.3-27.4 33.1 0 19.5 11.5 33.1 28 33.1 12.2 0 21.4-6 24.7-16.2l.5-1.6h-8.3l-.3.7c-2.8 6.2-8.8 9.8-16.6 9.8-12.9 0-18.5-11.5-19.5-22.7H501V40zm-8.3-3.2h-37.6c1-10.8 6.5-21.9 18.9-21.9 13.2 0 18.3 12.6 18.7 21.9zM30.4 122.4c-10.8 0-16.6 6.7-19.5 11.8v-9.9H3.3v62.6h8.1v-31.4c0-8.4 4.4-25.7 18.1-25.7 14 0 15.9 12 15.9 25v32.1h8.1v-32.1c.1-16.1-2.7-32.4-23.1-32.4zM134.3 59V43H157V30h-22.7V15.9H165V2.5h-46.4v69.9h47.3V59zM466.7 173.4v-16h22.7v-13h-22.7v-14.1h30.7v-13.4H451v69.9h47.3v-13.4zM246.7 140.5v-16.3h-7.6v62.6h8.1v-37.6l27.3-19.6v-9zM393.5 120.6l-14.7 10.5c-4.4-5.6-11.2-8.7-18.8-8.7-13.6 0-23.6 9.8-23.6 23.3 0 10.6 6.2 19.1 16 22.2l-16 17.5c-4 4.6-5.7 8.3-5.7 12.7 0 12.6 11.1 20.7 28.2 20.7 16.9 0 28.3-8.3 28.3-20.7 0-12.5-11.1-20.6-28.3-20.6-1.7 0-3.9.2-5.6.5l8-9c12.9-.7 22.2-10.4 22.2-23.3 0-2.8-.4-5.5-1.2-7.8 0-.1-.1-.2-.1-.3l11.2-8.1v-8.9zm-34.4 64.2c12.1 0 20 5.2 20 13.4s-7.8 13.5-20 13.5c-12.1 0-19.9-5.3-19.9-13.5 0-7.8 8.3-13.4 19.9-13.4zm.9-23c-8.8 0-15.2-6.8-15.2-16 0-9.3 6.4-16 15.2-16s15.2 6.7 15.2 16c0 9.2-6.4 16-15.2 16zM366.7 30.3c-6.6-2.3-13.5-4.7-13.5-9.2 0-4.8 4.2-7 9.3-7 5.4 0 9 4.5 9 8.5v.8h16.2v-.6c0-13-10.2-21.7-25.4-21.7-15.3 0-24.9 7.8-24.9 20.4 0 14.7 13.1 18.4 22.9 21.9 6.5 2.4 13.6 4.3 13.6 8.7 0 4.6-3.4 8-10.6 8-6.5 0-10.9-3.8-10.9-9.4v-.8h-16.7v.8c0 14.5 10.3 23.1 27.5 23.1 16.5 0 26-7.6 26-21.5 0-14.4-12.5-18.5-22.5-22z\" />\n      </g>\n    </svg>\n  );\n};\n\nexport default Logo;\n"],"names":[],"mappings":";;;;AAqBM,MAAA,OAA4B,CAAC,EAAE,OAAO,KAAK,QAAQ,SAAS,SAAS,OAAO,WAAW,aAAa;AACxG,QAAM,OAAO,QAAQ;AAErB,MAAI,QAAQ;AAER,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,mBAAiB;AAAA,QACjB,SAAQ;AAAA,QACR;AAAA,QACA,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAE9B,UAAA;AAAA,UAAC,oBAAA,SAAA,EAAM,IAAI,MAAO,UAAa,cAAA;AAAA,UAC/B,oBAAC,KAAE,EAAA,MAAM,SAAS,KAAK,GACrB,UAAC,oBAAA,QAAA,EAAK,GAAE,wxCAAwxC,CAAA,EAClyC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,mBAAiB;AAAA,MACjB,SAAQ;AAAA,MACR;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE9B,UAAA;AAAA,QAAC,oBAAA,SAAA,EAAM,IAAI,MAAO,UAAa,cAAA;AAAA,QAC/B,oBAAC,KAAE,EAAA,MAAM,SAAS,KAAK,GACrB,UAAC,oBAAA,QAAA,EAAK,GAAE,gqDAAgqD,CAAA,EAC1qD,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/components/MaxCharacters/MaxCharacters.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor } from '../../constants';
 interface MaxCharactersProps {
     /** Current input length */

package/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare enum ModalVariants {
     normal = "normal",
     warning = "warning",

package/components/Modal/index.d.ts

@@ -1,3 +1,3 @@
-import Modal from './Modal';
+import { default as Modal } from './Modal';
 export * from './Modal';
 export default Modal;

package/components/Modal/index.js

@@ -1,165 +1,222 @@
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import d, { useEffect as L } from "react";
-import n from "classnames";
-import { ZIndex as K, AnalyticsId as O, IconSize as _ } from "../../constants.js";
-import { useFocusTrap as D } from "../../hooks/useFocusTrap.js";
-import { useIsVisible as S } from "../../hooks/useIsVisible.js";
-import { palette as b } from "../../theme/palette.js";
-import { u as V } from "../../uuid.js";
-import { B as T } from "../../Button.js";
-import { C as Z } from "../../Close.js";
-import { I as g } from "../../Icon.js";
-import q from "../Icons/AlertSignFill.js";
-import G from "../Icons/AlertSignStroke.js";
-import J from "../Icons/CheckOutline.js";
-import M from "../Portal/index.js";
-import { T as Q } from "../../Title.js";
-import l from "./styles.module.scss";
-var U = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(U || {}), X = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(X || {});
-const Y = (e) => e === "error" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: q, color: b.cherry500 }) : e === "warning" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: G, color: b.black }) : e === "success" ? /* @__PURE__ */ a(g, { size: _.Small, svgIcon: J, color: b.kiwi900 }) : null, p = (e, o) => {
-  const m = Y(e);
-  return m ? /* @__PURE__ */ a("div", { className: l.modal__iconWrapper, children: m }) : o ? /* @__PURE__ */ a("div", { className: l.modal__iconWrapper, children: d.cloneElement(o, {
-    size: _.Small
-  }) }) : null;
-}, be = (e) => {
-  var x, E;
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import classNames from "classnames";
+import { ZIndex, AnalyticsId, IconSize } from "../../constants.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { useIsVisible } from "../../hooks/useIsVisible.js";
+import { palette } from "../../theme/palette.js";
+import { u as uuid } from "../../uuid.js";
+import { B as Button } from "../../Button.js";
+import { C as Close } from "../../Close.js";
+import { I as Icon } from "../../Icon.js";
+import AlertSignFill from "../Icons/AlertSignFill.js";
+import AlertSignStroke from "../Icons/AlertSignStroke.js";
+import CheckOutline from "../Icons/CheckOutline.js";
+import Portal from "../Portal/index.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+var ModalVariants = /* @__PURE__ */ ((ModalVariants2) => {
+  ModalVariants2["normal"] = "normal";
+  ModalVariants2["warning"] = "warning";
+  ModalVariants2["error"] = "error";
+  ModalVariants2["success"] = "success";
+  ModalVariants2["image"] = "image";
+  return ModalVariants2;
+})(ModalVariants || {});
+var ModalSize = /* @__PURE__ */ ((ModalSize2) => {
+  ModalSize2["large"] = "large";
+  ModalSize2["medium"] = "medium";
+  return ModalSize2;
+})(ModalSize || {});
+const getVariantIcon = (variant) => {
+  if (variant === "error") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignFill, color: palette.cherry500 });
+  } else if (variant === "warning") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: AlertSignStroke, color: palette.black });
+  } else if (variant === "success") {
+    return /* @__PURE__ */ jsx(Icon, { size: IconSize.Small, svgIcon: CheckOutline, color: palette.kiwi900 });
+  }
+  return null;
+};
+const getIcon = (variant, icon) => {
+  const variantIcon = getVariantIcon(variant);
+  if (variantIcon) {
+    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: variantIcon });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx("div", { className: styles.modal__iconWrapper, children: React.cloneElement(icon, {
+      size: IconSize.Small
+    }) });
+  }
+  return null;
+};
+const Modal = (props) => {
+  var _a, _b;
   const {
-    variant: o = "normal",
-    primaryButtonText: m = "OK",
-    titleId: W = V(),
-    className: R = "",
-    size: c = "large",
-    zIndex: z = K.Modal
-  } = e, y = d.useRef(null), u = d.useRef(null), f = d.useRef(null);
-  D(f, !0);
-  const $ = S(y), C = d.useRef(null), A = S(C), i = u.current && u.current.scrollHeight > u.current.clientHeight;
-  function N(t) {
-    t.key === "Escape" && e.onClose && (t.stopPropagation(), e.onClose());
+    variant = "normal",
+    primaryButtonText = "OK",
+    titleId = uuid(),
+    className = "",
+    size = "large",
+    zIndex = ZIndex.Modal
+  } = props;
+  const topContent = React.useRef(null);
+  const modalContentRef = React.useRef(null);
+  const dialogRef = React.useRef(null);
+  useFocusTrap(dialogRef, true);
+  const topContentVisible = useIsVisible(topContent);
+  const bottomContent = React.useRef(null);
+  const bottomContentVisible = useIsVisible(bottomContent);
+  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;
+  function handleKeyboardEvent(e) {
+    if (e.key === "Escape" && props.onClose) {
+      e.stopPropagation();
+      props.onClose();
+    }
   }
-  function I(t) {
-    t.target && h.current === t.target && e.onClose && (t.stopPropagation(), e.onClose());
+  function handleClickEvent(event) {
+    if (event.target && overlayRef.current === event.target && props.onClose) {
+      event.stopPropagation();
+      props.onClose();
+    }
   }
-  function P() {
+  function disableBodyScroll() {
     document.body.style.overflow = "hidden";
   }
-  function j() {
+  function enableBodyScroll() {
     document.body.style.removeProperty("overflow");
   }
-  const s = o === "image", h = d.useRef(null), w = e.secondaryButtonText && ((x = e.secondaryButtonText) == null ? void 0 : x.length) > 0 || e.onSuccess, B = e.ariaLabelledBy ? void 0 : e.ariaLabel, v = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : W;
-  L(() => {
-    const t = h.current;
-    return P(), !e.disableCloseEvents && t && (t.addEventListener("keydown", N), t.addEventListener("click", I)), () => {
-      j(), !e.disableCloseEvents && t && (t.removeEventListener("keydown", N), t.removeEventListener("click", I));
+  const imageView = variant === "image";
+  const overlayRef = React.useRef(null);
+  const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess;
+  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : void 0;
+  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : void 0;
+  useEffect(() => {
+    const overlayElement = overlayRef.current;
+    disableBodyScroll();
+    if (!props.disableCloseEvents && overlayElement) {
+      overlayElement.addEventListener("keydown", handleKeyboardEvent);
+      overlayElement.addEventListener("click", handleClickEvent);
+    }
+    return () => {
+      enableBodyScroll();
+      if (!props.disableCloseEvents && overlayElement) {
+        overlayElement.removeEventListener("keydown", handleKeyboardEvent);
+        overlayElement.removeEventListener("click", handleClickEvent);
+      }
     };
-  }, [e.disableCloseEvents]), L(() => {
-    var t;
-    (t = f.current) == null || t.focus();
+  }, [props.disableCloseEvents]);
+  useEffect(() => {
+    var _a2;
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.focus();
   }, []);
-  const F = n(
-    R,
-    l.modal,
-    o && l[`modal--${o}`],
-    c && l[`modal--${c}`],
-    i && !w && l["modal--no-actions"]
-  ), H = n({
-    [l["modal__title--error"]]: o === "error",
-    [l["modal__title--success"]]: o === "success"
+  const dialogClasses = classNames(
+    className,
+    styles.modal,
+    variant && styles[`modal--${variant}`],
+    size && styles[`modal--${size}`],
+    contentIsScrollable && !showActions && styles["modal--no-actions"]
+  );
+  const titleClasses = classNames({
+    [styles["modal__title--error"]]: variant === "error",
+    [styles["modal__title--success"]]: variant === "success"
     /* success */
-  }), k = /* @__PURE__ */ a("div", { "data-testid": "dialog-container", children: /* @__PURE__ */ a(
+  });
+  const Component = /* @__PURE__ */ jsx("div", { "data-testid": "dialog-container", children: /* @__PURE__ */ jsx(
     "div",
     {
-      ref: h,
-      className: l["modal-overlay"],
-      "data-testid": e.testId,
-      "data-analyticsid": O.Modal,
-      style: { zIndex: z },
-      children: /* @__PURE__ */ a("div", { className: l.align, children: /* @__PURE__ */ r(
+      ref: overlayRef,
+      className: styles["modal-overlay"],
+      "data-testid": props.testId,
+      "data-analyticsid": AnalyticsId.Modal,
+      style: { zIndex },
+      children: /* @__PURE__ */ jsx("div", { className: styles.align, children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: F,
+          className: dialogClasses,
           role: "dialog",
           "aria-modal": "true",
           tabIndex: -1,
-          "aria-label": B,
-          "aria-labelledby": v,
-          ref: f,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          ref: dialogRef,
           children: [
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ jsx(
               "div",
               {
-                className: n(l.modal__shadow, l["modal__shadow--top"], {
-                  [l["modal__shadow--show"]]: !$ && i
+                className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], {
+                  [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable
                 })
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ jsxs(
               "div",
               {
-                className: n(l.modal__contentWrapper, {
-                  [l["modal__contentWrapper--image"]]: s
+                className: classNames(styles.modal__contentWrapper, {
+                  [styles["modal__contentWrapper--image"]]: imageView
                 }),
-                tabIndex: i ? 0 : void 0,
-                role: i ? "region" : void 0,
-                "aria-label": i ? B : void 0,
-                "aria-labelledby": i ? v : void 0,
-                ref: u,
+                tabIndex: contentIsScrollable ? 0 : void 0,
+                role: contentIsScrollable ? "region" : void 0,
+                "aria-label": contentIsScrollable ? ariaLabel : void 0,
+                "aria-labelledby": contentIsScrollable ? ariaLabelledBy : void 0,
+                ref: modalContentRef,
                 children: [
-                  !e.noCloseButton && /* @__PURE__ */ a("div", { className: l.modal__closeWrapper, children: /* @__PURE__ */ a("div", { className: n(l.modal__closeWrapper__close), children: /* @__PURE__ */ a(Z, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }) }) }),
-                  /* @__PURE__ */ r(
+                  !props.noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.modal__closeWrapper, children: /* @__PURE__ */ jsx("div", { className: classNames(styles.modal__closeWrapper__close), children: /* @__PURE__ */ jsx(Close, { onClick: props.onClose, ariaLabel: props.ariaLabelCloseBtn }) }) }),
+                  /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: n(c && l[`modal__contentWrapper__scroll--${c}`], {
-                        [l["modal__contentWrapper__scroll--image"]]: s
+                      className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`], {
+                        [styles["modal__contentWrapper__scroll--image"]]: imageView
                       }),
                       children: [
-                        /* @__PURE__ */ a("div", { ref: y }),
-                        /* @__PURE__ */ r("div", { className: l.modal__contentWrapper__title, children: [
-                          p(o, e.icon),
-                          /* @__PURE__ */ a(Q, { id: v, htmlMarkup: "h3", appearance: "title3", className: H, children: e.title }),
-                          e.afterTitleChildren && /* @__PURE__ */ a("div", { className: l.modal__afterTitleChildren, children: e.afterTitleChildren })
+                        /* @__PURE__ */ jsx("div", { ref: topContent }),
+                        /* @__PURE__ */ jsxs("div", { className: styles.modal__contentWrapper__title, children: [
+                          getIcon(variant, props.icon),
+                          /* @__PURE__ */ jsx(Title, { id: ariaLabelledBy, htmlMarkup: "h3", appearance: "title3", className: titleClasses, children: props.title }),
+                          props.afterTitleChildren && /* @__PURE__ */ jsx("div", { className: styles["modal__afterTitleChildren"], children: props.afterTitleChildren })
                         ] }),
-                        s && /* @__PURE__ */ r("div", { children: [
-                          /* @__PURE__ */ a("div", { className: l.modal__contentWrapper__imageWrapper, children: e.children }),
-                          /* @__PURE__ */ a("span", { className: l.modal__contentWrapper__imageDescription, children: e.description })
+                        imageView && /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("div", { className: styles["modal__contentWrapper__imageWrapper"], children: props.children }),
+                          /* @__PURE__ */ jsx("span", { className: styles["modal__contentWrapper__imageDescription"], children: props.description })
                         ] }),
-                        !s && e.children && /* @__PURE__ */ a("div", { children: e.children }),
-                        !s && !e.children && /* @__PURE__ */ a("p", { className: l.modal__description, children: e.description }),
-                        /* @__PURE__ */ a("div", { ref: C })
+                        !imageView && props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
+                        !imageView && !props.children && /* @__PURE__ */ jsx("p", { className: styles.modal__description, children: props.description }),
+                        /* @__PURE__ */ jsx("div", { ref: bottomContent })
                       ]
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ jsx(
               "div",
               {
-                className: n(l.modal__shadow, l["modal__shadow--bottom"], {
-                  [l["modal__shadow--show"]]: !A && i
+                className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], {
+                  [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable
                 })
               }
             ),
-            w && /* @__PURE__ */ r("div", { className: n(l["modal__call-to-action"], c && l[`modal__call-to-action--${c}`]), children: [
-              e.onSuccess && /* @__PURE__ */ a(T, { onClick: e.onSuccess, children: m }),
-              e.secondaryButtonText && ((E = e.secondaryButtonText) == null ? void 0 : E.length) > 0 && /* @__PURE__ */ a(T, { variant: "borderless", onClick: e.onClose, children: e.secondaryButtonText })
+            showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
+              props.onSuccess && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
+              props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText })
             ] })
           ]
         }
       ) })
     }
   ) });
-  if (e.printable) {
-    const t = "print-modal";
-    return /* @__PURE__ */ r(M, { className: t, testId: "print-modal", children: [
-      /* @__PURE__ */ a("style", { media: "print", children: `body > *:not(.${t}) {display: none;}` }),
-      k
+  if (props.printable) {
+    const printModal = "print-modal";
+    return /* @__PURE__ */ jsxs(Portal, { className: printModal, testId: "print-modal", children: [
+      /* @__PURE__ */ jsx("style", { media: "print", children: `body > *:not(.${printModal}) {display: none;}` }),
+      Component
     ] });
   }
-  return k;
+  return Component;
 };
 export {
-  X as ModalSize,
-  U as ModalVariants,
-  be as default
+  ModalSize,
+  ModalVariants,
+  Modal as default
 };
 //# sourceMappingURL=index.js.map

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","getVariantIcon","variant","jsx","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","React","Modal","props","primaryButtonText","titleId","uuid","className","size","zIndex","ZIndex","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","jsxs","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","_a","cn"],"mappings":"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"}

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';
 export type NotificationCompactVariants = 'basic' | 'outline';
 export type NotificationPanelSizes = 'small' | 'medium' | 'large';

package/components/NotificationPanel/index.d.ts

@@ -1,3 +1,3 @@
-import NotificationPanel from './NotificationPanel';
+import { default as NotificationPanel } from './NotificationPanel';
 export * from './NotificationPanel';
 export default NotificationPanel;