@helsenorge/designsystem-react 5.12.0 → 6.0.0-beta.14

package/components/Loader/Loader.js

@@ -0,0 +1,68 @@
+import a, { useState as C, useRef as S, useEffect as D } from "react";
+import c from "classnames";
+import { AnalyticsId as z } from "../../constants.js";
+import { uuid as A } from "../../utils/uuid.js";
+import e from "./styles.module.scss";
+var B = /* @__PURE__ */ ((o) => (o.screen = "screen", o.parent = "parent", o))(B || {});
+const F = a.forwardRef(function(L, M) {
+  const {
+    overlay: l,
+    color: r = l ? "black" : "neutral",
+    size: d = "small",
+    className: N = "",
+    labelId: m = A(),
+    testId: h,
+    center: g,
+    inline: n,
+    ariaLabelledById: p,
+    ariaLabel: k = "Laster inn"
+  } = L, R = () => !(l === "parent" || n), [i, u] = C(R()), _ = d === "small", f = d === "medium", y = d === "large", I = c(e["loader-wrapper"], {
+    [e["loader-wrapper--center"]]: g,
+    [e["loader-wrapper--overlay"]]: l,
+    [e["loader-wrapper--overlay-screen"]]: l === "screen",
+    [e["loader-wrapper--overlay-parent"]]: l === "parent" && i,
+    [e["loader-wrapper--inline"]]: n && i
+  }), x = c(
+    e.loader,
+    {
+      [e["loader--small"]]: _,
+      [e["loader--medium"]]: f,
+      [e["loader--large"]]: y
+    },
+    N
+  ), s = c(e.loader__dot, {
+    [e["loader__dot--small"]]: _,
+    [e["loader__dot--medium"]]: f,
+    [e["loader__dot--large"]]: y,
+    [e["loader__dot--banana"]]: r === "banana",
+    [e["loader__dot--cherry"]]: r === "cherry",
+    [e["loader__dot--kiwi"]]: r === "kiwi",
+    [e["loader__dot--neutral"]]: r === "neutral",
+    [e["loader__dot--plum"]]: r === "plum",
+    [e["loader__dot--black"]]: r === "black",
+    [e["loader__dot--white"]]: r === "white"
+  }), t = S(null);
+  return D(() => {
+    var w, E, b, v;
+    l === "parent" && ((E = (w = t.current) == null ? void 0 : w.parentElement) != null && E.style) && (t.current.parentElement.style.position = "relative", u(!0)), n && ((v = (b = t.current) == null ? void 0 : b.parentElement) != null && v.style) && (t.current.parentElement.style.display = "flex", u(!0));
+  }, []), /* @__PURE__ */ a.createElement("div", { className: I, ref: t }, i && /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      "data-testid": h,
+      "data-analyticsid": z.Loader,
+      role: "progressbar",
+      "aria-labelledby": p || m,
+      className: x
+    },
+    /* @__PURE__ */ a.createElement("div", { className: s }),
+    /* @__PURE__ */ a.createElement("div", { className: s }),
+    /* @__PURE__ */ a.createElement("div", { className: s }),
+    /* @__PURE__ */ a.createElement("div", { className: s }),
+    !p && /* @__PURE__ */ a.createElement("span", { id: m, className: e["loader__hidden-text"] }, k)
+  ));
+}), H = F;
+export {
+  B as Overlay,
+  H as default
+};
+//# sourceMappingURL=Loader.js.map

package/components/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /**  Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /**  String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader = React.forwardRef(function LoaderForwardedRef(props: LoaderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const {\n    overlay,\n    color = overlay ? 'black' : 'neutral',\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames(loaderStyles['loader-wrapper'], {\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Loader;\n"],"names":["Overlay","Loader","React","props","ref","overlay","color","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","AnalyticsId","Loader$1"],"mappings":"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"}

package/components/Loader/index.js

@@ -1,2 +1,7 @@
-import a,{useState as C,useRef as S,useEffect as D}from"react";import c from"classnames";import{AnalyticsId as z}from"../../constants.js";import{u as A}from"../../uuid.js";import e from"./styles.module.scss";import"../../utils/environment.js";var B=(o=>(o.screen="screen",o.parent="parent",o))(B||{});const F=a.forwardRef(function(L,M){const{overlay:t,color:r=t?"black":"neutral",size:d="small",className:N="",labelId:m=A(),testId:h,center:g,inline:n,ariaLabelledById:p,ariaLabel:k="Laster inn"}=L,R=()=>!(t==="parent"||n),[i,u]=C(R()),_=d==="small",f=d==="medium",y=d==="large",I=c(e["loader-wrapper"],{[e["loader-wrapper--center"]]:g,[e["loader-wrapper--overlay"]]:t,[e["loader-wrapper--overlay-screen"]]:t==="screen",[e["loader-wrapper--overlay-parent"]]:t==="parent"&&i,[e["loader-wrapper--inline"]]:n&&i}),x=c(e.loader,{[e["loader--small"]]:_,[e["loader--medium"]]:f,[e["loader--large"]]:y},N),s=c(e.loader__dot,{[e["loader__dot--small"]]:_,[e["loader__dot--medium"]]:f,[e["loader__dot--large"]]:y,[e["loader__dot--banana"]]:r==="banana",[e["loader__dot--cherry"]]:r==="cherry",[e["loader__dot--kiwi"]]:r==="kiwi",[e["loader__dot--neutral"]]:r==="neutral",[e["loader__dot--plum"]]:r==="plum",[e["loader__dot--black"]]:r==="black",[e["loader__dot--white"]]:r==="white"}),l=S(null);return D(()=>{var w,E,b,v;t==="parent"&&((E=(w=l.current)==null?void 0:w.parentElement)!=null&&E.style)&&(l.current.parentElement.style.position="relative",u(!0)),n&&((v=(b=l.current)==null?void 0:b.parentElement)!=null&&v.style)&&(l.current.parentElement.style.display="flex",u(!0))},[]),a.createElement("div",{className:I,ref:l},i&&a.createElement("div",{"data-testid":h,"data-analyticsid":z.Loader,role:"progressbar","aria-labelledby":p||m,className:x},a.createElement("div",{className:s}),a.createElement("div",{className:s}),a.createElement("div",{className:s}),a.createElement("div",{className:s}),!p&&a.createElement("span",{id:m,className:e["loader__hidden-text"]},k)))}),J=F;export{B as Overlay,J as default};
+import o from "./Loader.js";
+import { Overlay as t } from "./Loader.js";
+export {
+  t as Overlay,
+  o as default
+};
 //# sourceMappingURL=index.js.map

package/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /**  Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /**  String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader = React.forwardRef(function LoaderForwardedRef(props: LoaderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const {\n    overlay,\n    color = overlay ? 'black' : 'neutral',\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames(loaderStyles['loader-wrapper'], {\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Loader;\n"],"names":["Overlay","Loader","React","props","ref","overlay","color","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","AnalyticsId","Loader$1"],"mappings":"mPAYY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EA4BZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC9G,KAAA,CACJ,QAAAC,EACA,MAAAC,EAAQD,EAAU,QAAU,UAC5B,KAAAE,EAAO,QACP,UAAAC,EAAY,GACZ,QAAAC,EAAUC,EAAK,EACf,OAAAC,EACA,OAAAC,EACA,OAAAC,EACA,iBAAAC,EACA,UAAAC,EAAY,YACV,EAAAZ,EAEEa,EAAa,IACb,EAAAX,IAAY,UAAkBQ,GAO9B,CAACI,EAASC,CAAU,EAAIC,EAASH,EAAY,CAAA,EAE7CI,EAAUb,IAAS,QACnBc,EAAWd,IAAS,SACpBe,EAAUf,IAAS,QAEnBgB,EAAuBC,EAAWC,EAAa,gBAAgB,EAAG,CACtE,CAACA,EAAa,wBAAwB,CAAC,EAAGb,EAC1C,CAACa,EAAa,yBAAyB,CAAC,EAAGpB,EAC3C,CAACoB,EAAa,gCAAgC,CAAC,EAAGpB,IAAY,SAC9D,CAACoB,EAAa,gCAAgC,CAAC,EAAGpB,IAAY,UAAkBY,EAChF,CAACQ,EAAa,wBAAwB,CAAC,EAAGZ,GAAUI,CAAA,CACrD,EACKS,EAAgBF,EACpBC,EAAa,OACb,CACE,CAACA,EAAa,eAAe,CAAC,EAAGL,EACjC,CAACK,EAAa,gBAAgB,CAAC,EAAGJ,EAClC,CAACI,EAAa,eAAe,CAAC,EAAGH,CACnC,EACAd,CAAA,EAEImB,EAAmBH,EAAWC,EAAa,YAAa,CAC5D,CAACA,EAAa,oBAAoB,CAAC,EAAGL,EACtC,CAACK,EAAa,qBAAqB,CAAC,EAAGJ,EACvC,CAACI,EAAa,oBAAoB,CAAC,EAAGH,EACtC,CAACG,EAAa,qBAAqB,CAAC,EAAGnB,IAAU,SACjD,CAACmB,EAAa,qBAAqB,CAAC,EAAGnB,IAAU,SACjD,CAACmB,EAAa,mBAAmB,CAAC,EAAGnB,IAAU,OAC/C,CAACmB,EAAa,sBAAsB,CAAC,EAAGnB,IAAU,UAClD,CAACmB,EAAa,mBAAmB,CAAC,EAAGnB,IAAU,OAC/C,CAACmB,EAAa,oBAAoB,CAAC,EAAGnB,IAAU,QAChD,CAACmB,EAAa,oBAAoB,CAAC,EAAGnB,IAAU,OAAA,CACjD,EAEKsB,EAAaC,EAAuB,IAAI,EAE9C,OAAAC,EAAU,IAAM,aACVzB,IAAY,YAAkB0B,GAAAC,EAAAJ,EAAW,UAAX,YAAAI,EAAoB,gBAApB,MAAAD,EAAmC,SACxDH,EAAA,QAAQ,cAAc,MAAM,SAAW,WAClDV,EAAW,EAAI,GAGbL,KAAUoB,GAAAC,EAAAN,EAAW,UAAX,YAAAM,EAAoB,gBAApB,MAAAD,EAAmC,SACpCL,EAAA,QAAQ,cAAc,MAAM,QAAU,OACjDV,EAAW,EAAI,EAEnB,EAAG,CAAE,CAAA,kBAGF,MAAI,CAAA,UAAWK,EAAsB,IAAKK,GACxCX,GACCf,EAAA,cAAC,MAAA,CACC,cAAaS,EACb,mBAAkBwB,EAAY,OAC9B,KAAK,cACL,kBAAiBrB,GAAoBL,EACrC,UAAWiB,CAAA,EAEXxB,EAAA,cAAC,MAAI,CAAA,UAAWyB,CAAkB,CAAA,EAClCzB,EAAA,cAAC,MAAI,CAAA,UAAWyB,CAAkB,CAAA,EAClCzB,EAAA,cAAC,MAAI,CAAA,UAAWyB,CAAkB,CAAA,EAClCzB,EAAA,cAAC,MAAI,CAAA,UAAWyB,CAAkB,CAAA,EACjC,CAACb,GACAZ,EAAA,cAAC,OAAK,CAAA,GAAIO,EAAS,UAAWgB,EAAa,qBAAqB,CAAA,EAC7DV,CACH,CAAA,CAIR,CAEJ,CAAC,EAEDqB,EAAenC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Logo/Logo.js

@@ -0,0 +1,40 @@
+import e from "react";
+import { AnalyticsId as V } from "../../constants.js";
+import { useUuid as o } from "../../hooks/useUuid.js";
+import { getColor as a } from "../../theme/currys/color.js";
+const i = ({ size: t = 300, color: h = "black", byline: r = !1, className: l, testId: v }) => {
+  const c = o();
+  return r ? /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t,
+      role: "img",
+      "aria-labelledby": c,
+      viewBox: "0 0 87 12",
+      className: l,
+      "data-testid": v,
+      "data-analyticsid": V.Logo
+    },
+    /* @__PURE__ */ e.createElement("title", { id: c }, "Helsenorge"),
+    /* @__PURE__ */ e.createElement("g", { fill: a(h) }, /* @__PURE__ */ e.createElement("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__ */ e.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: t,
+      role: "img",
+      "aria-labelledby": c,
+      viewBox: "0 0 502 220",
+      className: l,
+      "data-testid": v,
+      "data-analyticsid": V.Logo
+    },
+    /* @__PURE__ */ e.createElement("title", { id: c }, "Helsenorge"),
+    /* @__PURE__ */ e.createElement("g", { fill: a(h) }, /* @__PURE__ */ e.createElement("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" }))
+  );
+}, d = i;
+export {
+  d as default
+};
+//# sourceMappingURL=Logo.js.map

package/components/Logo/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.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\ninterface 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","React","AnalyticsId","getColor","Logo$1"],"mappings":";;;;AAqBA,MAAMA,IAA4B,CAAC,EAAE,MAAAC,IAAO,KAAK,OAAAC,IAAQ,SAAS,QAAAC,IAAS,IAAO,WAAAC,GAAW,QAAAC,QAAa;AACxG,QAAMC,IAAOC;AAEb,SAAIJ,IAEAK,gBAAAA,EAAA;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,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,wxCAAwxC,CAAA,CAClyC;AAAA,EAAA,IAMJA,gBAAAA,EAAA;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,IAAA;AAAA,IAE7BD,gBAAAA,EAAA,cAAA,SAAA,EAAM,IAAIF,EAAA,GAAO,YAAa;AAAA,IAC/BE,gBAAAA,EAAA,cAAC,KAAE,EAAA,MAAME,EAASR,CAAK,KACpBM,gBAAAA,EAAA,cAAA,QAAA,EAAK,GAAE,gqDAAgqD,CAAA,CAC1qD;AAAA,EAAA;AAGN,GAEAG,IAAeX;"}

package/components/Logo/index.js

@@ -1,2 +1,5 @@
-import t from"react";import{AnalyticsId as V}from"../../constants.js";import{useUuid as a}from"../../hooks/useUuid.js";import{getColor as r}from"../../theme/currys/color.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";const i=({size:c=300,color:h="black",byline:o=!1,className:l,testId:v})=>{const e=a();return o?t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:c,role:"img","aria-labelledby":e,viewBox:"0 0 87 12",className:l,"data-testid":v,"data-analyticsid":V.Logo},t.createElement("title",{id:e},"Helsenorge"),t.createElement("g",{fill:r(h)},t.createElement("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"}))):t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:c,role:"img","aria-labelledby":e,viewBox:"0 0 502 220",className:l,"data-testid":v,"data-analyticsid":V.Logo},t.createElement("title",{id:e},"Helsenorge"),t.createElement("g",{fill:r(h)},t.createElement("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"})))},f=i;export{f as default};
+import r from "./Logo.js";
+export {
+  r 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\ninterface 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","React","AnalyticsId","getColor","Logo$1"],"mappings":"8VAqBA,MAAMA,EAA4B,CAAC,CAAE,KAAAC,EAAO,IAAK,MAAAC,EAAQ,QAAS,OAAAC,EAAS,GAAO,UAAAC,EAAW,OAAAC,KAAa,CACxG,MAAMC,EAAOC,IAEb,OAAIJ,EAEAK,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOP,EACP,KAAM,MACN,kBAAiBK,EACjB,QAAQ,YACR,UAAAF,EACA,cAAaC,EACb,mBAAkBI,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAIF,CAAA,EAAO,YAAa,EAC/BE,EAAA,cAAC,IAAE,CAAA,KAAME,EAASR,CAAK,GACpBM,EAAA,cAAA,OAAA,CAAK,EAAE,uxCAAwxC,CAAA,CAClyC,CAAA,EAMJA,EAAA,cAAC,MAAA,CACC,MAAM,6BACN,MAAOP,EACP,KAAM,MACN,kBAAiBK,EACjB,QAAQ,cACR,UAAAF,EACA,cAAaC,EACb,mBAAkBI,EAAY,IAAA,EAE7BD,EAAA,cAAA,QAAA,CAAM,GAAIF,CAAA,EAAO,YAAa,EAC/BE,EAAA,cAAC,IAAE,CAAA,KAAME,EAASR,CAAK,GACpBM,EAAA,cAAA,OAAA,CAAK,EAAE,+pDAAgqD,CAAA,CAC1qD,CAAA,CAGN,EAEAG,EAAeX"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/MaxCharacters/MaxCharacters.js

@@ -0,0 +1,15 @@
+import l from "react";
+import n from "classnames";
+import { FormMode as f } from "../../constants.js";
+import a from "./styles.module.scss";
+const d = ({ maxCharacters: r, maxText: t, length: e, mode: s, maxWidth: c }) => {
+  const o = e / r, m = n(a["max-characters"], {
+    [a["max-characters--on-dark"]]: s === f.ondark,
+    [a["max-characters--invalid"]]: o > 1
+  }), i = o > 0.95 ? "polite" : "off";
+  return /* @__PURE__ */ l.createElement("div", { "aria-live": i, "aria-atomic": "true", className: m, style: { maxWidth: c } }, `${e}/${r} ${t || "tegn"}`);
+}, $ = d;
+export {
+  $ as default
+};
+//# sourceMappingURL=MaxCharacters.js.map

package/components/MaxCharacters/MaxCharacters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxCharacters.js","sources":["../../../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","React","MaxCharacters$1"],"mappings":";;;;AAqBA,MAAMA,IAA8C,CAAC,EAAE,eAAAC,GAAe,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,QAAe;AAC1G,QAAMC,IAAWH,IAASF,GAEpBM,IAAmBC,EAAWC,EAAO,gBAAgB,GAAG;AAAA,IAC5D,CAACA,EAAO,yBAAyB,CAAC,GAAGL,MAASM,EAAS;AAAA,IACvD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAW;AAAA,EAAA,CACjD,GAEKK,IAAYL,IAAW,OAAO,WAAW;AAG7C,SAAAM,gBAAAA,EAAA,cAAC,SAAI,aAAWD,GAAW,eAAa,QAAQ,WAAWJ,GAAkB,OAAO,EAAE,UAAAF,OACnF,GAAGF,CAAM,IAAIF,CAAa,IAAIC,KAAoB,MAAM,EAC3D;AAEJ,GAEAW,IAAeb;"}

package/components/Modal/Modal.js

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

package/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.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 defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\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 = (props: ModalProps): JSX.Element => {\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 = props.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 ? props.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    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.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: props.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              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(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.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'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.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\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","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","Close","Title","Button","_b","printModal","Portal","Modal$1"],"mappings":"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"}

package/components/Modal/index.js

@@ -1,2 +1,8 @@
-import{M as r}from"../../Modal.js";import{b as P,a as Q}from"../../Modal.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../theme/palette.js";import"../../uuid.js";import"../../utils/environment.js";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../Close.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{P as ModalSize,Q as ModalVariants,r as default};
+import a from "./Modal.js";
+import { ModalSize as d, ModalVariants as e } from "./Modal.js";
+export {
+  d as ModalSize,
+  e as ModalVariants,
+  a as default
+};
 //# sourceMappingURL=index.js.map

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/NotificationPanel/DetailButton/DetailButton.js

@@ -0,0 +1,28 @@
+import e, { useState as f } from "react";
+import n from "classnames";
+import { AnalyticsId as _ } from "../../../constants.js";
+import { useUuid as u } from "../../../hooks/useUuid.js";
+import { getAriaLabelAttributes as b } from "../../../utils/accessibility.js";
+import v from "../../Button/Button.js";
+import { Icon as x } from "../../Icon/Icon.js";
+import E from "../../Icons/ChevronDown.js";
+import I from "../../Icons/ChevronUp.js";
+import a from "./styles.module.scss";
+const T = ({ content: i, buttonText: r, buttonClosedText: s, expanderOpenFromStart: c }) => {
+  const [t, l] = f(c), o = t ? r : s, m = u(), p = b({
+    label: o,
+    id: m,
+    prefer: "label"
+  }), d = {
+    onClick: () => l(!t),
+    variant: "borderless",
+    className: n(a["notification-panel__detail"], a["notification-panel__detail-button"]),
+    "aria-expanded": t,
+    ...p
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: a["notification-panel__detail-section"] }, /* @__PURE__ */ e.createElement("div", { className: a["notification-panel__detail-section__button--wrapper"] }, /* @__PURE__ */ e.createElement(v, { testId: "expand", "data-analyticsid": _.Expander, ...d }, o, /* @__PURE__ */ e.createElement(x, { svgIcon: t ? I : E }))), t && /* @__PURE__ */ e.createElement("div", { className: n(a["notification-panel__detail-section__content"]) }, i));
+};
+export {
+  T as DetailButton
+};
+//# sourceMappingURL=DetailButton.js.map

package/components/NotificationPanel/DetailButton/DetailButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailButton.js","sources":["../../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown"],"mappings":";;;;;;;;;;AAoBO,MAAMA,IAAgC,CAAC,EAAE,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,GAAkB,uBAAAC,QAAgD;AACrI,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAkBH,CAAqB,GACrEI,IAAmBH,IAAaH,IAAaC,GAE7CM,IAAeC,KAEfC,IAAsBC,EAAuB;AAAA,IACjD,OAAOJ;AAAA,IACP,IAAIC;AAAA,IACJ,QAAQ;AAAA,EAAA,CACT,GAEKI,IAA0D;AAAA,IAC9D,SAAS,MAAMP,EAAc,CAACD,CAAU;AAAA,IACxC,SAAS;AAAA,IACT,WAAWS,EAAWC,EAAO,4BAA4B,GAAGA,EAAO,mCAAmC,CAAC;AAAA,IACvG,iBAAiBV;AAAA,IACjB,GAAGM;AAAA,EAAA;AAGL,yCACG,OAAI,EAAA,WAAWI,EAAO,oCAAoC,EAAA,mCACxD,OAAI,EAAA,WAAWA,EAAO,qDAAqD,KACzEC,gBAAAA,EAAA,cAAAC,GAAA,EAAO,QAAO,UAAS,oBAAkBC,EAAY,UAAW,GAAGL,EACjE,GAAAL,mCACAW,GAAK,EAAA,SAASd,IAAae,IAAYC,EAAA,CAAa,CACvD,CACF,GACChB,KAAeW,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWF,EAAWC,EAAO,6CAA6C,CAAC,KAAId,CAAQ,CAC7G;AAEJ;"}

package/components/NotificationPanel/NotificationPanel.js

@@ -0,0 +1,127 @@
+import t from "react";
+import s from "classnames";
+import { DetailButton as A } from "./DetailButton/DetailButton.js";
+import { IconSize as n, AnalyticsId as B } from "../../constants.js";
+import { useUuid as L } from "../../hooks/useUuid.js";
+import { getColor as P } from "../../theme/currys/color.js";
+import { palette as i } from "../../theme/palette.js";
+import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
+import R from "../Close/Close.js";
+import { Icon as f } from "../Icon/Icon.js";
+import D from "../Icons/CheckFill.js";
+import M from "../Icons/ErrorSignFill.js";
+import O from "../Icons/InfoSignFill.js";
+import U from "../Icons/TriangleX.js";
+import e from "./styles.module.scss";
+const V = ({ fluid: m, variant: p, children: o }) => {
+  if (m) {
+    const r = s(e["fluid-wrapper"], { [e[`fluid-wrapper--${p}`]]: p });
+    return /* @__PURE__ */ t.createElement("div", { className: r }, o);
+  }
+  return o;
+}, W = t.forwardRef((m, p) => {
+  const {
+    children: o,
+    variant: r = "info",
+    dismissable: _ = !1,
+    onClick: h,
+    expanderChildren: c,
+    expanderButtonText: b,
+    expanderButtonClosedText: u,
+    expanderOpenFromStart: E = !1,
+    compactVariant: a,
+    label: l,
+    fluid: N = !1,
+    size: C,
+    className: S,
+    labelId: I,
+    role: g,
+    testId: x
+  } = m, d = L(I), w = {
+    info: /* @__PURE__ */ t.createElement(
+      f,
+      {
+        svgIcon: O,
+        color: i.blueberry700,
+        hoverColor: i.blueberry700,
+        size: a ? n.XSmall : n.Small
+      }
+    ),
+    warn: /* @__PURE__ */ t.createElement(
+      f,
+      {
+        svgIcon: M,
+        color: i.banana700,
+        hoverColor: i.banana700,
+        size: a ? n.XSmall : n.Small
+      }
+    ),
+    alert: /* @__PURE__ */ t.createElement(
+      f,
+      {
+        svgIcon: U,
+        color: i.cherry700,
+        hoverColor: i.cherry700,
+        size: a ? n.XSmall : n.Small
+      }
+    ),
+    success: /* @__PURE__ */ t.createElement(
+      f,
+      {
+        svgIcon: D,
+        color: i.kiwi900,
+        hoverColor: i.kiwi900,
+        size: a ? n.XSmall : n.Small
+      }
+    )
+  }, y = () => {
+    const k = s(e["notification-panel__content"]), F = s(e["notification-panel__label"], {
+      [e["notification-panel__label--no-content"]]: !o && !c,
+      [e["notification-panel__label__compact"]]: !!a,
+      [e["notification-panel__label__compact--basic"]]: a === "basic"
+    }), X = s(e["notification-panel__children"], {
+      [e["notification-panel__label-and-content--spacing"]]: l,
+      [e["notification-panel__children--expander-no-label"]]: c && !l
+    });
+    return /* @__PURE__ */ t.createElement("div", { className: k, id: l ? void 0 : d }, l && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, l), o && !a && /* @__PURE__ */ t.createElement("div", { className: X }, o), c && b && u && !a && /* @__PURE__ */ t.createElement(
+      A,
+      {
+        expanderOpenFromStart: E,
+        content: c,
+        buttonText: b,
+        buttonClosedText: u
+      }
+    ));
+  }, z = s(
+    e["notification-panel"],
+    e[`notification-panel--${r}`],
+    {
+      [e[`notification-panel--${C}`]]: !!C,
+      [e["notification-panel__compact"]]: !!a,
+      [e["notification-panel__compact--basic"]]: a === "basic",
+      [e["notification-panel__compact--outline"]]: a === "outline",
+      [e["notification-panel--has-children"]]: !!o,
+      [e["notification-panel--with-content"]]: c || l && o,
+      [e["notification-panel--dismissable"]]: _
+    },
+    S
+  ), v = g || r === "alert" && "alert" || void 0, T = v ? $({ label: l, id: d }) : void 0;
+  return /* @__PURE__ */ t.createElement(V, { fluid: N, variant: r }, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      ref: p,
+      role: v,
+      "data-testid": x,
+      "data-analyticsid": B.NotificationPanel,
+      className: z,
+      ...T
+    },
+    /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, w[r]),
+    _ && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(R, { ariaLabel: m.ariaLabelCloseBtn, onClick: h, color: P("black") })),
+    y()
+  ));
+}), le = W;
+export {
+  le as default
+};
+//# sourceMappingURL=NotificationPanel.js.map