@helsenorge/designsystem-react 8.1.0 → 8.1.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [8.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.0.2&targetVersion=GTv8.1.0) (2024-08-23)
+
+### Features
+
+- mulig å skru av swiping i tabs ([45aac8f](https://github.com/helsenorge/designsystem/commit/45aac8f7358e77fe85467d826b54c052b01b3086)),
+  closes [#330586](https://github.com/helsenorge/designsystem/issues/330586)
+
+### Bug Fixes
+
+- table kan brukes i tabs uten problemer med scrolling på mobil
+  ([d28a280](https://github.com/helsenorge/designsystem/commit/d28a280d4afe56227a331334348d91aac5be6281)), closes
+  [#330555](https://github.com/helsenorge/designsystem/issues/330555)
+- unngå blinking i tabs på mobil når man scroller
+  ([2bddf20](https://github.com/helsenorge/designsystem/commit/2bddf2017f1067ba1b17473006b2103de630054e)), closes
+  [#330597](https://github.com/helsenorge/designsystem/issues/330597)
+- validationsummary er ikke labelled by ikke-eksisterende element
+  ([3ac0b88](https://github.com/helsenorge/designsystem/commit/3ac0b8822820ad47ac635da95b7d7377481f2f33)), closes
+  [#328895](https://github.com/helsenorge/designsystem/issues/328895)
+
 ## [8.0.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.0.1&targetVersion=GTv8.0.2) (2024-08-22)
 
 ### Bug Fixes

package/components/Close/styles.module.scss

@@ -7,12 +7,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
-  @media (max-width: map.get($grid-breakpoints, sm)) {
-    height: 2.375rem;
-    width: 2.375rem;
-  }
-
   height: 3rem;
   width: 3rem;
   padding: 0;
@@ -20,6 +14,11 @@
   background-color: transparent;
   cursor: pointer;
 
+  @media (max-width: map.get($grid-breakpoints, sm)) {
+    height: 2.375rem;
+    width: 2.375rem;
+  }
+
   &:hover,
   &:active {
     background-color: rgb(88 170 187 / 10%);

package/components/ExpanderList/styles.module.scss

@@ -39,12 +39,6 @@
   position: relative;
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-
   display: flex;
   cursor: pointer;
   font-weight: 600;
@@ -58,6 +52,11 @@
   width: 100%;
   outline: none;
 
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+
   &--banana {
     background-color: $banana100;
   }

package/components/EyebrowHeader/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@helsenorge/designsystem-react/scss/spacers';
+@import '../../scss/spacers';
 
 .subtitle {
   margin: 0;

package/components/EyebrowHeader/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  subtitle: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/FormGroup/styles.module.scss

@@ -28,11 +28,11 @@
   }
 
   &__legend {
-    @include legend;
-
     margin-bottom: getSpacer(m);
     margin-top: 0;
 
+    @include legend;
+
     &--on-dark {
       color: $white;
     }

package/components/HighlightPanel/styles.module.scss

@@ -8,7 +8,9 @@
 @mixin content-wrapper-with-icon-flex {
   display: flex;
   flex-direction: column;
+}
 
+@mixin content-wrapper-with-icon-flex-responsive {
   @media (min-width: map.get($grid-breakpoints, md)) {
     flex-direction: row;
   }
@@ -113,6 +115,7 @@
     #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-flex;
       @include content-wrapper-with-icon-padding;
+      @include content-wrapper-with-icon-flex-responsive;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: getSpacer(m);
@@ -123,6 +126,7 @@
   &--has-icon#{&}--large {
     #{$panel}__col {
       @include content-wrapper-with-icon-flex;
+      @include content-wrapper-with-icon-flex-responsive;
     }
     #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-padding;
@@ -171,6 +175,7 @@
   &--has-icon#{&}--fluid {
     @include content-wrapper-with-icon-flex;
     @include content-wrapper-with-icon-padding;
+    @include content-wrapper-with-icon-flex-responsive;
   }
 
   &__icon {

package/components/Input/Input.d.ts

@@ -19,6 +19,8 @@ export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElem
     icon?: SvgIcon | IconName;
     /** Places the icon to the right */
     iconRight?: boolean;
+    /** Ref that is placed on the inputContainerRef */
+    inputContainerRef?: React.RefObject<HTMLDivElement>;
     /** Ref that is placed on the inputWrapper */
     inputWrapperRef?: React.RefObject<HTMLDivElement>;
     /** Changes the color profile of the input */

package/components/Input/Input.js

@@ -1,21 +1,22 @@
-import r, { useRef as K, useState as $, useEffect as xe } from "react";
+import r, { useRef as K, useState as $, useEffect as Ce } from "react";
 import v from "classnames";
-import { FormMode as l, FormSize as Ce, IconSize as B, AnalyticsId as _e, AVERAGE_CHARACTER_WIDTH_PX as ve } from "../../constants.js";
+import { FormMode as l, FormSize as xe, IconSize as B, AnalyticsId as _e, AVERAGE_CHARACTER_WIDTH_PX as ve } from "../../constants.js";
 import { useBreakpoint as ye, Breakpoint as Ee } from "../../hooks/useBreakpoint.js";
 import { useUuid as U } from "../../hooks/useUuid.js";
 import { getColor as F } from "../../theme/currys/color.js";
 import { getAriaDescribedBy as ke } from "../../utils/accessibility.js";
-import { ErrorWrapper as we } from "../ErrorWrapper/ErrorWrapper.js";
-import { Icon as Ne } from "../Icon/Icon.js";
-import { renderLabel as Ie } from "../Label/Label.js";
-import { LazyIcon as Re } from "../LazyIcon/LazyIcon.js";
-import We from "../MaxCharacters/MaxCharacters.js";
+import { mergeRefs as we } from "../../utils/refs.js";
+import { ErrorWrapper as Ne } from "../ErrorWrapper/ErrorWrapper.js";
+import { Icon as Ie } from "../Icon/Icon.js";
+import { renderLabel as Re } from "../Label/Label.js";
+import { LazyIcon as We } from "../LazyIcon/LazyIcon.js";
+import Se from "../MaxCharacters/MaxCharacters.js";
 import t from "../Input/styles.module.scss";
-var Se = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Se || {});
-const ze = (e, s, p) => {
+var ze = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(ze || {});
+const Ae = (e, s, p) => {
   const i = s ? "1.5rem" : "2rem", f = s ? `${p}px` : "0px";
   return `calc(${e * ve}px + ${i} + ${f} + 4px)`;
-}, Ae = r.forwardRef((e, s) => {
+}, Ve = r.forwardRef((e, s) => {
   const {
     className: p,
     defaultValue: i,
@@ -24,7 +25,7 @@ const ze = (e, s, p) => {
     name: L,
     transparent: M = !1,
     icon: a,
-    iconRight: b,
+    iconRight: g,
     inputId: P,
     inputWrapperRef: H,
     mode: c = l.onwhite,
@@ -48,27 +49,27 @@ const ze = (e, s, p) => {
     maxCharacters: d,
     maxText: te,
     ...ne
-  } = e, re = ye(), m = K(null), I = U(P), [R, W] = $(i || ""), [ae, oe] = $(void 0), g = K(!1), S = U(G), z = /^[0-9]$/;
-  xe(() => {
+  } = e, re = ye(), m = K(null), I = U(P), [R, W] = $(i || ""), [ae, oe] = $(void 0), b = K(!1), S = U(G), z = /^[0-9]$/;
+  Ce(() => {
     W(i || "");
   }, [i]);
-  const ie = c === l.ondark, ce = c === l.onblueberry, le = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!q || le, C = O === Ce.large, se = M && c !== l.ondark && !x, ue = v(t["input-wrapper"], p), de = v(t["input-container"], {
+  const ie = c === l.ondark, ce = c === l.onblueberry, le = !!d && R.toString().length > d, C = c === l.oninvalid || !!E || !!q || le, x = O === xe.large, se = M && c !== l.ondark && !C, ue = v(t["input-wrapper"], p), de = v(t["input-container"], {
     [t["input-container--transparent"]]: se,
     [t["input-container--on-blueberry"]]: ce,
     [t["input-container--on-dark"]]: ie,
-    [t["input-container--invalid"]]: x,
-    [t["input-container--large"]]: C,
+    [t["input-container--invalid"]]: C,
+    [t["input-container--large"]]: x,
     [t["input-container--disabled"]]: u,
     [t["input-container--with-icon"]]: a
   }), me = v(t["input-container__input"], {
-    [t["input-container__input--large"]]: C,
+    [t["input-container__input--large"]]: x,
     [t["input-container__input--disabled"]]: u
-  }), A = u ? F("neutral", 700) : F("black"), _ = re === Ee.xs || !C ? B.XSmall : B.Small, V = () => {
+  }), A = u ? F("neutral", 700) : F("black"), _ = re === Ee.xs || !x ? B.XSmall : B.Small, V = () => {
     if (a)
-      return typeof a == "string" ? /* @__PURE__ */ r.createElement(Re, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
+      return typeof a == "string" ? /* @__PURE__ */ r.createElement(We, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ie, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
   }, pe = (n) => {
     if (m && m.current && a) {
-      const o = b ? 0 : 1;
+      const o = g ? 0 : 1;
       m.current.children[o].focus(), e.onClick && e.onClick(n);
     }
   }, fe = (n) => {
@@ -77,40 +78,51 @@ const ze = (e, s, p) => {
   }, he = (n) => {
     if (typeof y > "u" || h !== "number") return n.target.value;
     const o = Number(n.target.value);
-    return !ae && !g.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
-  }, be = (n) => {
-    z.test(n.key) && (g.current = !0), N && N(n);
+    return !ae && !b.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
   }, ge = (n) => {
-    z.test(n.key) && (g.current = !1);
-  }, D = k ? ze(k, !!a, _) : void 0;
-  return /* @__PURE__ */ r.createElement(we, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": j, "data-analyticsid": _e.Input, className: ue, ref: H }, Ie(X, I, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: pe, ref: m, className: de, style: { maxWidth: D } }, !b && V(), /* @__PURE__ */ r.createElement(
-    "input",
+    z.test(n.key) && (b.current = !0), N && N(n);
+  }, be = (n) => {
+    z.test(n.key) && (b.current = !1);
+  }, D = k ? Ae(k, !!a, _) : void 0;
+  return /* @__PURE__ */ r.createElement(Ne, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": j, "data-analyticsid": _e.Input, className: ue, ref: H }, Re(X, I, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement(
+    "div",
     {
-      onChange: fe,
-      onKeyDown: be,
-      onKeyUp: ge,
-      name: L,
-      type: h,
-      defaultValue: i,
-      id: I,
-      className: me,
-      ref: s,
-      "aria-labelledby": e["aria-labelledby"] ?? void 0,
-      "aria-describedby": ke(e, S),
-      "aria-invalid": !!x,
-      disabled: u,
-      placeholder: f,
-      readOnly: J,
-      autoComplete: Q || "off",
-      required: Z,
-      autoFocus: ee,
-      ...ne
-    }
-  ), b && V()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Y)), d && /* @__PURE__ */ r.createElement(We, { maxCharacters: d, length: R.toString().length, maxText: te, mode: c, maxWidth: D }), T));
+      onClick: pe,
+      ref: we([m, e.inputContainerRef]),
+      className: de,
+      style: { maxWidth: D }
+    },
+    !g && V(),
+    /* @__PURE__ */ r.createElement(
+      "input",
+      {
+        onChange: fe,
+        onKeyDown: ge,
+        onKeyUp: be,
+        name: L,
+        type: h,
+        defaultValue: i,
+        id: I,
+        className: me,
+        ref: s,
+        "aria-labelledby": e["aria-labelledby"] ?? void 0,
+        "aria-describedby": ke(e, S),
+        "aria-invalid": !!C,
+        disabled: u,
+        placeholder: f,
+        readOnly: J,
+        autoComplete: Q || "off",
+        required: Z,
+        autoFocus: ee,
+        ...ne
+      }
+    ),
+    g && V()
+  ), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Y)), d && /* @__PURE__ */ r.createElement(Se, { maxCharacters: d, length: R.toString().length, maxText: te, mode: c, maxWidth: D }), T));
 });
-Ae.displayName = "Input";
+Ve.displayName = "Input";
 export {
-  Se as InputTypes,
-  Ae as default
+  ze as InputTypes,
+  Ve as default
 };
 //# sourceMappingURL=Input.js.map

package/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRef, props.inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","mergeRefs","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/components/Input/styles.module.scss

@@ -32,13 +32,13 @@
 }
 
 .input-container {
-  @include input-container;
-
   $container: &;
 
   padding: 0.5rem 0;
   align-items: center;
 
+  @include input-container;
+
   &--with-icon {
     padding: 1px 0;
 

package/components/Loader/Loader.d.ts

@@ -7,7 +7,7 @@ export declare enum Overlay {
     parent = "parent"
 }
 export interface LoaderProps {
-    /** Sets the color of the loader */
+    /** Sets the color of the loader. If overlay is used, the color will always be white.  */
     color?: LoaderColors;
     /**	Adds custom classes to the element. */
     className?: string;
@@ -23,9 +23,9 @@ export interface LoaderProps {
     inline?: boolean;
     /** Loader is displayed with grey background covering the entire screen */
     overlay?: keyof typeof Overlay;
-    /**  Individual id for loading icon (aria-labelledby).  */
+    /** Individual id for loading icon (aria-labelledby).  */
     ariaLabelledById?: string;
-    /**  String that labels the current loading element  */
+    /** String that labels the current loading element  */
     ariaLabel?: string;
 }
 declare const Loader: React.FC<LoaderProps>;

package/components/Loader/Loader.js

@@ -3,26 +3,25 @@ import i from "classnames";
 import { ZIndex as z, AnalyticsId as D } from "../../constants.js";
 import { uuid as A } from "../../utils/uuid.js";
 import e from "../Loader/styles.module.scss";
-var B = /* @__PURE__ */ ((t) => (t.screen = "screen", t.parent = "parent", t))(B || {});
-const F = (t) => {
+var B = /* @__PURE__ */ ((a) => (a.screen = "screen", a.parent = "parent", a))(B || {});
+const F = (a) => {
   const {
-    overlay: a,
-    color: r = a ? "black" : "neutral",
-    size: d = "small",
+    overlay: t,
+    size: n = "small",
     className: N = "",
     labelId: m = A(),
-    testId: L,
-    center: h,
-    inline: n,
+    testId: h,
+    center: L,
+    inline: d,
     ariaLabelledById: p,
     ariaLabel: I = "Laster inn"
-  } = t, g = () => !(a === "parent" || n), [c, u] = S(g()), _ = d === "small", y = d === "medium", f = d === "large", k = i({
-    [e["loader-wrapper--center"]]: h,
-    [e["loader-wrapper--overlay"]]: a,
-    [e["loader-wrapper--overlay-screen"]]: a === "screen",
-    [e["loader-wrapper--overlay-parent"]]: a === "parent" && c,
-    [e["loader-wrapper--inline"]]: n && c
-  }), x = i(
+  } = a, r = a.overlay ? "white" : a.color || "neutral", g = () => !(t === "parent" || d), [c, u] = S(g()), _ = n === "small", y = n === "medium", f = n === "large", x = i({
+    [e["loader-wrapper--center"]]: L,
+    [e["loader-wrapper--overlay"]]: t,
+    [e["loader-wrapper--overlay-screen"]]: t === "screen",
+    [e["loader-wrapper--overlay-parent"]]: t === "parent" && c,
+    [e["loader-wrapper--inline"]]: d && c
+  }), k = i(
     e.loader,
     {
       [e["loader--small"]]: _,
@@ -43,16 +42,16 @@ const F = (t) => {
     [e["loader__dot--white"]]: r === "white"
   }), s = C(null);
   return R(() => {
-    var v, E, b, w;
-    a === "parent" && ((E = (v = s.current) == null ? void 0 : v.parentElement) != null && E.style) && (s.current.parentElement.style.position = "relative", u(!0)), n && ((w = (b = s.current) == null ? void 0 : b.parentElement) != null && w.style) && (s.current.parentElement.style.display = "flex", u(!0));
-  }, []), /* @__PURE__ */ l.createElement("div", { className: k, ref: s, style: a === "screen" ? { zIndex: z.OverlayScreen } : {} }, c && /* @__PURE__ */ l.createElement(
+    var v, w, E, b;
+    t === "parent" && ((w = (v = s.current) == null ? void 0 : v.parentElement) != null && w.style) && (s.current.parentElement.style.position = "relative", u(!0)), d && ((b = (E = s.current) == null ? void 0 : E.parentElement) != null && b.style) && (s.current.parentElement.style.display = "flex", u(!0));
+  }, []), /* @__PURE__ */ l.createElement("div", { className: x, ref: s, style: t === "screen" ? { zIndex: z.OverlayScreen } : {} }, c && /* @__PURE__ */ l.createElement(
     "div",
     {
-      "data-testid": L,
+      "data-testid": h,
       "data-analyticsid": D.Loader,
       role: "progressbar",
       "aria-labelledby": p || m,
-      className: x
+      className: k
     },
     /* @__PURE__ */ l.createElement("div", { className: o }),
     /* @__PURE__ */ l.createElement("div", { className: o }),

package/components/Loader/Loader.js.map

@@ -1 +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, ZIndex } 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.FC<LoaderProps> = props => {\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({\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} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\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","props","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","ZIndex","React","AnalyticsId"],"mappings":"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"}
+{"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, ZIndex } 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. If overlay is used, the color will always be white.  */\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.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\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({\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} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\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","props","overlay","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","color","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","ZIndex","React","AnalyticsId"],"mappings":";;;;;AAYY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;AA4BZ,MAAMC,IAAgC,CAASC,MAAA;AACvC,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAUC,EAAK;AAAA,IACf,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EACV,IAAAV,GACEW,IAAQX,EAAM,UAAU,UAAUA,EAAM,SAAS,WAEjDY,IAAa,MACb,EAAAX,MAAY,YAAkBO,IAO9B,CAACK,GAASC,CAAU,IAAIC,EAASH,EAAY,CAAA,GAE7CI,IAAUd,MAAS,SACnBe,IAAWf,MAAS,UACpBgB,IAAUhB,MAAS,SAEnBiB,IAAuBC,EAAW;AAAA,IACtC,CAACC,EAAa,wBAAwB,CAAC,GAAGd;AAAA,IAC1C,CAACc,EAAa,yBAAyB,CAAC,GAAGpB;AAAA,IAC3C,CAACoB,EAAa,gCAAgC,CAAC,GAAGpB,MAAY;AAAA,IAC9D,CAACoB,EAAa,gCAAgC,CAAC,GAAGpB,MAAY,YAAkBY;AAAA,IAChF,CAACQ,EAAa,wBAAwB,CAAC,GAAGb,KAAUK;AAAA,EAAA,CACrD,GACKS,IAAgBF;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,eAAe,CAAC,GAAGL;AAAA,MACjC,CAACK,EAAa,gBAAgB,CAAC,GAAGJ;AAAA,MAClC,CAACI,EAAa,eAAe,CAAC,GAAGH;AAAA,IACnC;AAAA,IACAf;AAAA,EAAA,GAEIoB,IAAmBH,EAAWC,EAAa,aAAa;AAAA,IAC5D,CAACA,EAAa,oBAAoB,CAAC,GAAGL;AAAA,IACtC,CAACK,EAAa,qBAAqB,CAAC,GAAGJ;AAAA,IACvC,CAACI,EAAa,oBAAoB,CAAC,GAAGH;AAAA,IACtC,CAACG,EAAa,qBAAqB,CAAC,GAAGV,MAAU;AAAA,IACjD,CAACU,EAAa,qBAAqB,CAAC,GAAGV,MAAU;AAAA,IACjD,CAACU,EAAa,mBAAmB,CAAC,GAAGV,MAAU;AAAA,IAC/C,CAACU,EAAa,sBAAsB,CAAC,GAAGV,MAAU;AAAA,IAClD,CAACU,EAAa,mBAAmB,CAAC,GAAGV,MAAU;AAAA,IAC/C,CAACU,EAAa,oBAAoB,CAAC,GAAGV,MAAU;AAAA,IAChD,CAACU,EAAa,oBAAoB,CAAC,GAAGV,MAAU;AAAA,EAAA,CACjD,GAEKa,IAAaC,EAAuB,IAAI;AAE9C,SAAAC,EAAU,MAAM;;AACd,IAAIzB,MAAY,cAAkB0B,KAAAC,IAAAJ,EAAW,YAAX,gBAAAI,EAAoB,kBAApB,QAAAD,EAAmC,WACxDH,EAAA,QAAQ,cAAc,MAAM,WAAW,YAClDV,EAAW,EAAI,IAGbN,OAAUqB,KAAAC,IAAAN,EAAW,YAAX,gBAAAM,EAAoB,kBAApB,QAAAD,EAAmC,WACpCL,EAAA,QAAQ,cAAc,MAAM,UAAU,QACjDV,EAAW,EAAI;AAAA,EAEnB,GAAG,CAAE,CAAA,mCAGF,OAAI,EAAA,WAAWK,GAAsB,KAAKK,GAAY,OAAOvB,MAAY,WAAiB,EAAE,QAAQ8B,EAAO,cAAkB,IAAA,MAC3HlB,KACCmB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa1B;AAAA,MACb,oBAAkB2B,EAAY;AAAA,MAC9B,MAAK;AAAA,MACL,mBAAiBxB,KAAoBL;AAAA,MACrC,WAAWkB;AAAA,IAAA;AAAA,IAEXU,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWT,EAAkB,CAAA;AAAA,IAClCS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWT,EAAkB,CAAA;AAAA,IAClCS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWT,EAAkB,CAAA;AAAA,IAClCS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWT,EAAkB,CAAA;AAAA,IACjC,CAACd,KACAuB,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAI5B,GAAS,WAAWiB,EAAa,qBAAqB,EAAA,GAC7DX,CACH;AAAA,EAAA,CAIR;AAEJ;"}

package/components/Loader/styles.module.scss

@@ -14,6 +14,8 @@
 }
 
 @mixin loader-dot-scale($name, $scale-start, $scale-end) {
+  @include animate($name, scale, 0.6s, infinite);
+
   @include keyframes($name) {
     0% {
       transform: scale($scale-start);
@@ -23,11 +25,11 @@
       transform: scale($scale-end);
     }
   }
-
-  @include animate($name, scale, 0.6s, infinite);
 }
 
 @mixin loader-dot-translate($name, $distance) {
+  @include animate($name, translate, 0.6s, infinite);
+
   @include keyframes($name) {
     0% {
       transform: translate(0, 0);
@@ -37,8 +39,6 @@
       transform: translate($distance, 0);
     }
   }
-
-  @include animate($name, translate, 0.6s, infinite);
 }
 
 .loader-wrapper {
@@ -105,6 +105,9 @@
     background-color: $blueberry500;
     border-radius: 50%;
 
+    // Sets a form of easing animation curve
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+
     &--small {
       width: 12px;
       height: 12px;
@@ -148,9 +151,6 @@
       background-color: $white;
     }
 
-    // Sets a form of easing animation curve
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-
     // Scales up the first dot
     &:nth-child(1) {
       @include loader-dot-scale(scale-regular, 0, 1);

package/components/Modal/Modal.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ZIndex } from '../../constants';
 export declare enum ModalVariants {
     normal = "normal",
     warning = "warning",
@@ -55,15 +54,5 @@ export interface ModalProps {
     /** If disabled, clicking escape or outside the modal will not close it */
     disableCloseEvents?: boolean;
 }
-declare const Modal: {
-    (props: ModalProps): JSX.Element;
-    defaultProps: {
-        variant: ModalVariants;
-        primaryButtonText: string;
-        titleId: string;
-        className: string;
-        size: ModalSize;
-        zIndex: ZIndex;
-    };
-};
+declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/components/Modal/Modal.js

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

package/components/Modal/Modal.js.map

@@ -1 +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    props.variant && styles[`modal--${props.variant}`],\n    props.size && 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(props.size && 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'], props.size && 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"],"mappings":"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"}
+{"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 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","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","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","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -144,13 +144,13 @@
   }
 
   &__closeWrapper {
+    position: relative;
+    width: 100%;
+
     @media print {
       display: none;
     }
 
-    position: relative;
-    width: 100%;
-
     &__close {
       position: absolute;
       right: getSpacer(3xs);

package/components/Panel/styles.module.scss

@@ -39,8 +39,6 @@ $layout-md-col-gap: getSpacer(m);
 }
 
 .panel {
-  @include panel-padding;
-
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -49,6 +47,8 @@ $layout-md-col-gap: getSpacer(m);
   width: 100%;
   box-sizing: border-box;
 
+  @include panel-padding;
+
   &__layout-1,
   &__layout-2,
   &__layout-3 {

package/components/PopOver/styles.module.scss

@@ -19,11 +19,6 @@
   background-color: $white;
   z-index: 3;
   visibility: hidden;
-
-  &--visible {
-    visibility: visible;
-  }
-
   border: getSpacer(4xs) solid $plum600;
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
@@ -33,6 +28,10 @@
     line-height: $lineheight-size-md;
   }
 
+  &--visible {
+    visibility: visible;
+  }
+
   &__arrow {
     --drop-shadow-color: #{$plum600};
 

package/components/Table/styles.module.scss

@@ -17,13 +17,13 @@ table .table-body .table-row {
 }
 
 @mixin block {
+  display: block;
+  clear: both;
+
   .table__head {
     display: none;
   }
 
-  display: block;
-  clear: both;
-
   .table-body,
   .table-row,
   .table__head-cell,

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/utils/refs.d.ts

@@ -4,7 +4,7 @@
  * @param refs array med refs som skal slås sammen
  * @returns refcallback som kan brukes på komponent
  */
-export declare const mergeRefs: <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>) => React.RefCallback<T>;
+export declare const mergeRefs: <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | null | undefined>) => React.RefCallback<T>;
 /**
  * Sjekker om ref er et objekt (og ikke en funksjon)
  * @param ref

package/utils/refs.js

@@ -1,10 +1,10 @@
-const o = (t) => (e) => {
-  t.forEach((n) => {
-    typeof n == "function" ? n(e) : n != null && (n.current = e);
+const e = (n) => (o) => {
+  n.forEach((t) => {
+    typeof t == "function" ? t(o) : t != null && t !== void 0 && (t.current = o);
   });
-}, c = (t) => typeof t != "function" && t !== null;
+}, c = (n) => typeof n != "function" && n !== null;
 export {
   c as isMutableRefObject,
-  o as mergeRefs
+  e as mergeRefs
 };
 //# sourceMappingURL=refs.js.map

package/utils/refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"refs.js","sources":["../../src/utils/refs.ts"],"sourcesContent":["/**\n * Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes\n * Fra https://github.com/gregberge/react-merge-refs\n * @param refs array med refs som skal slås sammen\n * @returns refcallback som kan brukes på komponent\n */\nexport const mergeRefs = <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T> => {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n};\n\n/**\n * Sjekker om ref er et objekt (og ikke en funksjon)\n * @param ref\n * @returns type predicate\n */\nexport const isMutableRefObject = <T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T> => {\n  return typeof ref !== 'function' && ref !== null;\n};\n"],"names":["mergeRefs","refs","value","ref","isMutableRefObject"],"mappings":"AAMa,MAAAA,IAAY,CAAIC,MACpB,CAASC,MAAA;AACd,EAAAD,EAAK,QAAQ,CAAOE,MAAA;AACd,IAAA,OAAOA,KAAQ,aACjBA,EAAID,CAAK,IACAC,KAAO,SACfA,EAAyC,UAAUD;AAAA,EACtD,CACD;AAAA,GASQE,IAAqB,CAAID,MAC7B,OAAOA,KAAQ,cAAcA,MAAQ;"}
+{"version":3,"file":"refs.js","sources":["../../src/utils/refs.ts"],"sourcesContent":["/**\n * Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes\n * Fra https://github.com/gregberge/react-merge-refs\n * @param refs array med refs som skal slås sammen\n * @returns refcallback som kan brukes på komponent\n */\nexport const mergeRefs = <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | null | undefined>): React.RefCallback<T> => {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null && ref !== undefined) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n};\n\n/**\n * Sjekker om ref er et objekt (og ikke en funksjon)\n * @param ref\n * @returns type predicate\n */\nexport const isMutableRefObject = <T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T> => {\n  return typeof ref !== 'function' && ref !== null;\n};\n"],"names":["mergeRefs","refs","value","ref","isMutableRefObject"],"mappings":"AAMa,MAAAA,IAAY,CAAIC,MACpB,CAASC,MAAA;AACd,EAAAD,EAAK,QAAQ,CAAOE,MAAA;AACd,IAAA,OAAOA,KAAQ,aACjBA,EAAID,CAAK,IACAC,KAAO,QAAQA,MAAQ,WAC/BA,EAAyC,UAAUD;AAAA,EACtD,CACD;AAAA,GASQE,IAAqB,CAAID,MAC7B,OAAOA,KAAQ,cAAcA,MAAQ;"}