@helsenorge/designsystem-react 6.1.0 → 6.1.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [6.1.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.0&targetVersion=GTv6.1.1) (2024-02-06)
+
+### Bug Fixes
+
+- datepicker dependencies tatt tilbake
+  ([3a7a1e0](https://github.com/helsenorge/designsystem/commit/3a7a1e0b3f44f4c5456941ad5902000a0985da51)), closes
+  [#318830](https://github.com/helsenorge/designsystem/issues/318830)
+
+## [6.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.0.1&targetVersion=GTv6.1.0) (2024-02-06)
+
+### Features
+
+- illustration- og lazyillustration-komponenter
+  ([c2a5662](https://github.com/helsenorge/designsystem/commit/c2a5662bd5c76f55484870d131cef6bc26f1d1b4))
+- promopanel støtter illustrasjoner ([ccb2cb7](https://github.com/helsenorge/designsystem/commit/ccb2cb7c35993adb1be0537906216501a6947ec7))
+
 ## [6.0.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.0.0&targetVersion=GTv6.0.1) (2024-02-01)
 
 ### Bug Fixes

package/README.md

@@ -16,4 +16,5 @@ GitHub.
 
 ## Documentation
 
-To view all the available components in isolation, please view our storybook page here: https://designsystem-storybook.netlify.app
+To view all the available components in isolation, please view our storybook page here:
+https://frankensteinstorybook.z1.web.core.windows.net/master/

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAYhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GA+JV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAe,MAAM,iBAAiB,CAAC;AAWhF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AAExC,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe,EAAE,cAAc;IACnF,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvI,uGAAuG;IACvG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAkCD,QAAA,MAAM,MAAM,2GA8JV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Button/Button.js

@@ -1,119 +1,116 @@
 import o, { useRef as at, useEffect as lt } from "react";
 import m from "classnames";
-import { Icon as it } from "../Icon/Icon.js";
-import { AnalyticsId as W, IconSize as y } from "../../constants.js";
-import { useBreakpoint as ct } from "../../hooks/useBreakpoint.js";
-import { useHover as $ } from "../../hooks/useHover.js";
+import { Icon as ct } from "../Icon/Icon.js";
+import { AnalyticsId as V, IconSize as y } from "../../constants.js";
+import { useBreakpoint as it } from "../../hooks/useBreakpoint.js";
+import { useHover as W } from "../../hooks/useHover.js";
 import { useIcons as ut } from "../../hooks/useIcons.js";
-import { useSize as mt } from "../../hooks/useSize.js";
-import { getColor as i } from "../../theme/currys/color.js";
-import { breakpoints as bt } from "../../theme/grid.js";
-import { isTest as pt, isProd as dt } from "../../utils/environment.js";
-import ft from "../Icons/ArrowRight.js";
+import { getColor as c } from "../../theme/currys/color.js";
+import { breakpoints as mt } from "../../theme/grid.js";
+import { isTest as bt, isProd as pt } from "../../utils/environment.js";
+import dt from "../Icons/ArrowRight.js";
 import t from "./styles.module.scss";
-const ht = (e, r, n, b, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700) : i("white") : n ? !s || e ? i("neutral", 500) : `${i("white")}b3` : e && !s || !e && s ? "white" : b === "normal" ? i("blueberry", 600) : i("cherry", 500), k = (e, r) => r && e ? y.Small : e ? y.Medium : y.XSmall, gt = (e, r, n) => {
+const ft = (e, r, n, b, s, g) => g && n ? !s || e ? c("neutral", r ? 500 : 700) : c("white") : n ? !s || e ? c("neutral", 500) : `${c("white")}b3` : e && !s || !e && s ? "white" : b === "normal" ? c("blueberry", 600) : c("cherry", 500), k = (e, r) => r && e ? y.Small : e ? y.Medium : y.XSmall, ht = (e, r, n) => {
   if (n && e && (r === void 0 || r === ""))
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
-}, _t = o.forwardRef(function(r, n) {
+}, gt = o.forwardRef(function(r, n) {
   const {
     ariaLabel: b,
     id: s,
     children: g,
-    wrapperClassName: D,
-    className: O,
+    wrapperClassName: $,
+    className: D,
     arrow: v = !1,
     concept: N = "normal",
     disabled: p = !1,
     ellipsis: B = !1,
-    fluid: X = !1,
+    fluid: O = !1,
     htmlMarkup: _ = "button",
-    mode: j = "onlight",
+    mode: X = "onlight",
     onBlur: R,
-    onClick: S,
-    size: q = "medium",
+    onClick: x,
+    size: j = "medium",
     variant: w = "fill",
-    href: G,
-    tabIndex: x,
-    testId: z,
-    target: A,
-    type: J = "button",
-    ...E
-  } = r, [d, f, F] = ut(o.Children.toArray(g)), { hoverRef: H, isHovered: K } = _ === "button" ? $(n) : $(n), L = at(null);
-  mt(L);
-  const a = !!(d || f) && !F, M = d && (f || v) && !a, I = j === "ondark", h = ct() < bt.md, P = N === "destructive" && !p, Q = w === "outline", c = w === "borderless", Y = ht(w === "fill", c, p, N, I, h), T = v && !c, u = q === "large" && !P && !c, Z = { ...E }, U = m(
+    href: q,
+    tabIndex: A,
+    testId: E,
+    target: S,
+    type: G = "button",
+    ...z
+  } = r, [d, f, F] = ut(o.Children.toArray(g)), { hoverRef: H, isHovered: J } = _ === "button" ? W(n) : W(n), K = at(null), a = !!(d || f) && !F, L = d && (f || v) && !a, I = X === "ondark", h = it() < mt.md, M = N === "destructive" && !p, Q = w === "outline", i = w === "borderless", Y = ft(w === "fill", i, p, N, I, h), P = v && !i, u = j === "large" && !M && !i, Z = { ...z }, T = m(
     t["button-wrapper"],
-    { [t["button-wrapper--fluid"]]: X || B },
-    D
+    { [t["button-wrapper--fluid"]]: O || B },
+    $
   ), tt = m(
     t.button,
     {
-      [t["button--destructive"]]: P,
+      [t["button--destructive"]]: M,
       [t["button--normal"]]: !u,
       [t["button--large"]]: u,
       [t["button--outline"]]: Q,
-      [t["button--borderless"]]: c,
+      [t["button--borderless"]]: i,
       [t["button--left-icon"]]: d && !a,
       [t["button--right-icon"]]: f && !a,
-      [t["button--both-icons"]]: M,
+      [t["button--both-icons"]]: L,
       [t["button--only-icon"]]: a,
-      [t["button--arrow"]]: T,
+      [t["button--arrow"]]: P,
       [t["button--on-dark"]]: I
     },
-    O
+    D
   ), ot = m(t.button__text, {
     [t["button__text--ellipsis"]]: B
   }), et = m(t.diagonal, {
     [t["diagonal--on-dark"]]: I
   });
   lt(() => {
-    gt(a, b, !pt() && !dt());
+    ht(a, b, !bt() && !pt());
   }, []);
   const C = (l, nt, st) => l ? o.cloneElement(l, {
     size: nt,
     color: l != null && l.props.color ? l.props.color : Y,
-    isHovered: K,
+    isHovered: J,
     className: st
-  }) : null, rt = () => /* @__PURE__ */ o.createElement("span", { className: ot, ref: L }, p && c && /* @__PURE__ */ o.createElement("span", { className: et }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, a ? b : F)), V = () => /* @__PURE__ */ o.createElement("span", { className: tt }, C(d, k(u, h), a ? void 0 : t["button__left-icon"]), rt(), T ? C(
-    /* @__PURE__ */ o.createElement(it, { svgIcon: ft }),
+  }) : null, rt = () => /* @__PURE__ */ o.createElement("span", { className: ot, ref: K }, p && i && /* @__PURE__ */ o.createElement("span", { className: et }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, a ? b : F)), U = () => /* @__PURE__ */ o.createElement("span", { className: tt }, C(d, k(u, h), a ? void 0 : t["button__left-icon"]), rt(), P ? C(
+    /* @__PURE__ */ o.createElement(ct, { svgIcon: dt }),
     k(u, h),
-    m(t.button__arrow, { [t["button__arrow--both-icons"]]: M })
+    m(t.button__arrow, { [t["button__arrow--both-icons"]]: L })
   ) : C(f, k(u, h), t["button__right-icon"]));
   return /* @__PURE__ */ o.createElement(o.Fragment, null, _ === "button" && /* @__PURE__ */ o.createElement(
     "button",
     {
       id: s,
       onBlur: R,
-      onClick: S,
+      onClick: x,
       disabled: p,
-      "data-testid": z,
-      "data-analyticsid": W.Button,
-      className: U,
+      "data-testid": E,
+      "data-analyticsid": V.Button,
+      className: T,
       ref: H,
-      tabIndex: x,
-      type: J,
+      tabIndex: A,
+      type: G,
       ...Z
     },
-    V()
+    U()
   ), _ === "a" && /* @__PURE__ */ o.createElement(
     "a",
     {
       id: s,
       onBlur: R,
-      onClick: S,
-      "data-testid": z,
-      "data-analyticsid": W.Button,
-      className: U,
-      href: G,
-      target: A,
-      rel: A === "_blank" ? "noopener noreferrer" : r.rel,
+      onClick: x,
+      "data-testid": E,
+      "data-analyticsid": V.Button,
+      className: T,
+      href: q,
+      target: S,
+      rel: S === "_blank" ? "noopener noreferrer" : r.rel,
       ref: H,
-      tabIndex: x,
-      ...E
+      tabIndex: A,
+      ...z
     },
-    V()
+    U()
   ));
-}), Ft = _t;
+}), St = gt;
 export {
-  Ft as default
+  St as default
 };
 //# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

package/components/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import t, { useRef as g, useState as V } from "react";
-import v from "classnames";
+import k from "classnames";
 import { theme as C } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
 import { useHover as W } from "../../hooks/useHover.js";
@@ -19,16 +19,16 @@ const ee = (s) => {
     label: R,
     placeholder: $,
     closeText: A = "Lukk",
-    noCloseButton: K = !1,
-    onToggle: S,
-    open: H = !1,
+    noCloseButton: H = !1,
+    onToggle: K,
+    open: S = !1,
     children: y,
-    mode: i = "onwhite",
+    mode: c = "onwhite",
     transparent: O = !1,
     fluid: b = !1,
     testId: z,
-    disabled: c
-  } = s, p = g(null), w = g(null), { hoverRef: u, isHovered: D } = W(), { value: a, toggleValue: h } = j(!c && H, S), d = g(t.Children.map(y, () => t.createRef())), [m, L] = V(), { width: T } = X(u) || {}, E = _(), I = _(), x = _(), N = () => {
+    disabled: i
+  } = s, p = g(null), w = g(null), { hoverRef: u, isHovered: D } = W(), { value: a, toggleValue: h } = j(!i && S, K), d = g(t.Children.map(y, () => t.createRef())), [m, L] = V(), { width: T } = X(u) || {}, E = _(), I = _(), x = _(), N = () => {
     var o;
     h(), (o = w.current) == null || o.focus();
   }, f = () => {
@@ -36,7 +36,7 @@ const ee = (s) => {
     h(), (o = u.current) == null || o.focus();
   };
   q(p, (o) => {
-    var k;
+    var v;
     if (o.preventDefault(), !d.current)
       return;
     if (a) {
@@ -50,7 +50,7 @@ const ee = (s) => {
     }
     const n = d.current.findIndex((P) => P.current === o.target);
     let l = n;
-    o.key === r.Home ? l = 0 : o.key === r.End ? l = d.current.length - 1 : o.key === r.ArrowDown && n < d.current.length - 1 ? l = n + 1 : o.key === r.ArrowUp && n > 0 ? l = n - 1 : o.key === r.Enter && n !== -1 && (l = n), l !== -1 && ((k = d.current[l].current) == null || k.focus(), L(l));
+    o.key === r.Home ? l = 0 : o.key === r.End ? l = d.current.length - 1 : o.key === r.ArrowDown && n < d.current.length - 1 ? l = n + 1 : o.key === r.ArrowUp && n > 0 ? l = n - 1 : o.key === r.Enter && n !== -1 && (l = n), l !== -1 && ((v = d.current[l].current) == null || v.focus(), L(l));
   }, [
     r.ArrowDown,
     r.ArrowUp,
@@ -59,18 +59,18 @@ const ee = (s) => {
     r.Escape,
     r.Home
   ]), F(p, () => a && f());
-  const U = v(
+  const U = k(
     e.dropdown__toggle,
-    !c && {
-      [e["dropdown__toggle--on-white"]]: i === "onwhite",
-      [e["dropdown__toggle--on-grey"]]: i === "ongrey",
-      [e["dropdown__toggle--on-blueberry"]]: i === "onblueberry",
-      [e["dropdown__toggle--on-cherry"]]: i === "oncherry",
+    !i && {
+      [e["dropdown__toggle--on-white"]]: c === "onwhite",
+      [e["dropdown__toggle--on-grey"]]: c === "ongrey",
+      [e["dropdown__toggle--on-blueberry"]]: c === "onblueberry",
+      [e["dropdown__toggle--on-cherry"]]: c === "oncherry",
       [e["dropdown__toggle--transparent"]]: O,
       [e["dropdown__toggle--fluid"]]: b,
       [e["dropdown__toggle--open"]]: a
     }
-  ), B = v(e.dropdown__content, a && e["dropdown__content--open"]);
+  ), B = k(e.dropdown__content, a && e["dropdown__content--open"]);
   return /* @__PURE__ */ t.createElement("div", { className: e.dropdown, ref: p }, /* @__PURE__ */ t.createElement("span", { id: E, className: e.dropdown__label }, R), /* @__PURE__ */ t.createElement(
     "button",
     {
@@ -80,7 +80,7 @@ const ee = (s) => {
       ref: u,
       "data-testid": z,
       "data-analyticsid": G.Dropdown,
-      disabled: c,
+      disabled: i,
       "aria-labelledby": I,
       "aria-haspopup": "listbox",
       "aria-expanded": a
@@ -89,10 +89,10 @@ const ee = (s) => {
     /* @__PURE__ */ t.createElement(
       Y,
       {
-        color: c ? C.palette.neutral500 : C.palette.blueberry600,
+        color: i ? C.palette.neutral700 : C.palette.blueberry600,
         svgIcon: Z,
         className: e.dropdown__icon,
-        isHovered: D,
+        isHovered: !i && D,
         size: J.XSmall
       }
     )
@@ -110,7 +110,7 @@ const ee = (s) => {
       var l;
       return /* @__PURE__ */ t.createElement("li", { className: e.dropdown__input, role: "option", id: `${x}-${n}`, "aria-selected": n === m }, t.cloneElement(o, { ref: (l = d.current) == null ? void 0 : l[n] }));
     })
-  ), !K && /* @__PURE__ */ t.createElement("div", { className: e.dropdown__close }, /* @__PURE__ */ t.createElement(Q, { onClick: f, fluid: !0, "aria-expanded": a }, A))));
+  ), !H && /* @__PURE__ */ t.createElement("div", { className: e.dropdown__close }, /* @__PURE__ */ t.createElement(Q, { onClick: f, fluid: !0, "aria-expanded": a }, A))));
 }, ye = ee;
 export {
   M as DropdownMode,

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useSize(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useSize(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":";;;;;;;;;;;;;;;AAsBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAJDA,IAAAA,KAAA,CAAA,CAAA;AAkCZ,MAAMC,KAAoC,CAASC,MAAA;AAC3C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAZ,GACEa,IAAcC,EAAuB,IAAI,GACzCC,IAAaD,EAAyB,IAAI,GAC1C,EAAE,UAAUE,GAAW,WAAAC,MAAcC,EAA4B,GACjE,EAAE,OAAOC,GAAQ,aAAaC,EAAA,IAAiBC,EAAU,CAACT,KAAYN,GAAMD,CAAQ,GACpFiB,IAAeR,EAAOS,EAAM,SAAS,IAAIhB,GAAU,MAAMgB,EAAM,UAAwB,CAAA,CAAC,GACxF,CAACC,GAAcC,CAAe,IAAIC,EAAiB,GACnD,EAAE,OAAOC,EAAA,IAAgBC,EAAQZ,CAAS,KAAK,IAC/Ca,IAAUC,KACVC,IAAgBD,KAChBE,IAAiBF,KAEjBG,IAAa,MAAY;;AAChB,IAAAb,MACbc,IAAAnB,EAAW,YAAX,QAAAmB,EAAoB;AAAA,EAAM,GAGtBC,IAAc,MAAY;;AACjB,IAAAf,MACbc,IAAAlB,EAAU,YAAV,QAAAkB,EAAmB;AAAA,EAAM;AAsC3B,EAAAE,EAAiBvB,GAnCgB,CAACwB,MAA+B;;AAG3D,QAFJA,EAAM,eAAe,GAEjB,CAACf,EAAa;AAChB;AAGF,QAAKH;AAGM,UAAAkB,EAAM,QAAQC,EAAiB,UAAUnB,GAAQ;AAC9C,QAAAgB;AACZ;AAAA,MACF;AAAA,WANa;AACA,MAAAF;AACX;AAAA,IACS;AAKL,UAAAM,IAAQjB,EAAa,QAAQ,UAAU,OAAKkB,EAAE,YAAYH,EAAM,MAAM;AAC5E,QAAII,IAAYF;AAEZ,IAAAF,EAAM,QAAQC,EAAiB,OACrBG,IAAA,IACHJ,EAAM,QAAQC,EAAiB,MAC5BG,IAAAnB,EAAa,QAAQ,SAAS,IACjCe,EAAM,QAAQC,EAAiB,aAAaC,IAAQjB,EAAa,QAAQ,SAAS,IAC3FmB,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,WAAWC,IAAQ,IAC3DE,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,SAASC,MAAU,OAC/CE,IAAAF,IAEVE,MAAc,QAChBP,IAAAZ,EAAa,QAAQmB,CAAS,EAAE,YAAhC,QAAAP,EAAyC,SACzCT,EAAgBgB,CAAS;AAAA,EAC3B,GAGsD;AAAA,IACtDH,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,EAAA,CAClB,GAEDI,EAAgB7B,GAAa,MAAMM,KAAUgB,EAAa,CAAA;AAE1D,QAAMQ,IAAgBC;AAAA,IACpBC,EAAO;AAAA,IACP,CAACjC,KAAY;AAAA,MACX,CAACiC,EAAO,4BAA4B,CAAC,GAAGrC,MAAS;AAAA,MACjD,CAACqC,EAAO,2BAA2B,CAAC,GAAGrC,MAAS;AAAA,MAChD,CAACqC,EAAO,gCAAgC,CAAC,GAAGrC,MAAS;AAAA,MACrD,CAACqC,EAAO,6BAA6B,CAAC,GAAGrC,MAAS;AAAA,MAClD,CAACqC,EAAO,+BAA+B,CAAC,GAAGpC;AAAA,MAC3C,CAACoC,EAAO,yBAAyB,CAAC,GAAGnC;AAAA,MACrC,CAACmC,EAAO,wBAAwB,CAAC,GAAG1B;AAAA,IACtC;AAAA,EAAA,GAGI2B,IAAiBF,EAAWC,EAAO,mBAAmB1B,KAAU0B,EAAO,yBAAyB,CAAC;AAEvG,SACGtB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWsB,EAAO,UAAU,KAAKhC,EAAA,GACnCU,gBAAAA,EAAA,cAAA,QAAA,EAAK,IAAIM,GAAS,WAAWgB,EAAO,mBAClC5C,CACH,GACAsB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM,CAACJ,KAAUc,EAAW;AAAA,MACrC,WAAWU;AAAA,MACX,KAAK3B;AAAA,MACL,eAAaL;AAAA,MACb,oBAAkBoC,EAAY;AAAA,MAC9B,UAAAnC;AAAA,MACA,mBAAiBmB;AAAA,MACjB,iBAAc;AAAA,MACd,iBAAeZ;AAAA,IAAA;AAAA,oCAEd,QAAK,EAAA,IAAIY,GAAe,WAAWc,EAAO,2BACxC3C,CACH;AAAA,IACAqB,gBAAAA,EAAA;AAAA,MAACyB;AAAA,MAAA;AAAA,QACC,OAAOpC,IAAWqC,EAAM,QAAQ,aAAaA,EAAM,QAAQ;AAAA,QAC3D,SAASC;AAAA,QACT,WAAWL,EAAO;AAAA,QAClB,WAAW,CAACjC,KAAYK;AAAA,QACxB,MAAMkC,EAAS;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA,GAEF5B,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWuB,GAAgB,OAAO,EAAE,OAAOpC,IAAQ,SAAS,GAAGiB,CAAW,KAC7E,EAAA,GAAAJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWsB,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBhB;AAAA,MACjB,UAAU;AAAA,MACV,yBAAuB,OAAOL,IAAiB,MAAc,GAAGQ,CAAc,IAAIR,CAAY,KAAK;AAAA,MACnG,KAAKT;AAAA,IAAA;AAAA,IAEJQ,EAAM,SAAS,IAAIhB,GAAU,CAAC6C,GAAOb;;AACnChB,6BAAAA,EAAA,cAAA,MAAA,EAAG,WAAWsB,EAAO,iBAAiB,MAAK,UAAS,IAAI,GAAGb,CAAc,IAAIO,CAAK,IAAI,iBAAeA,MAAUf,EAAA,GAC7GD,EAAM,aAAa6B,GAA6B,EAAE,MAAKlB,IAAAZ,EAAa,YAAb,gBAAAY,EAAuBK,GAAQ,CAAA,CACzF;AAAA,KACD;AAAA,EAAA,GAEF,CAACnC,qCACC,OAAI,EAAA,WAAWyC,EAAO,gBACrB,GAAAtB,gBAAAA,EAAA,cAAC8B,KAAO,SAASlB,GAAa,OAAK,IAAC,iBAAehB,KAChDhB,CACH,CACF,CAEJ,CACF;AAEJ,GAEAmD,KAAevD;"}

package/components/Dropdown/styles.module.scss

@@ -36,8 +36,11 @@
     }
 
     &:disabled {
-      background-color: $neutral50;
-      border-color: $neutral500;
+      cursor: initial;
+      color: $neutral700;
+      background-color: transparent;
+      border-color: $neutral600;
+      border-style: dashed;
     }
 
     &--on-white,

package/components/Input/Input.js

@@ -61,7 +61,7 @@ const Se = (e, u, f) => {
   }), ue = x(t["input-container__input"], {
     [t["input-container__input--large"]]: _,
     [t["input-container__input--disabled"]]: l
-  }), z = l ? B("neutral", 500) : B("black"), v = te === xe.xs || !_ ? D.XSmall : D.Small, V = () => {
+  }), z = l ? B("neutral", 700) : B("black"), v = te === xe.xs || !_ ? D.XSmall : D.Small, V = () => {
     if (a)
       return typeof a == "string" ? /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: z, size: v, iconName: a }) : /* @__PURE__ */ r.createElement(ke, { className: t["input-container__input__icon"], color: z, size: v, svgIcon: a });
   }, de = (n) => {

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 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  /** 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    testId,\n    disabled,\n    readOnly,\n    autoComplete,\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 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', 500) : 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}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\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={props['aria-describedby'] ?? undefined}\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","borderWidth","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","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","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","MaxCharacters","Input$1"],"mappings":";;;;;;;;;;;;AA+EY,IAAAA,uBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,MAAM,OACNA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,OAAO,QATGA,IAAAA,MAAA,CAAA,CAAA;AAYZ,MAAMC,KAAmB,CAACC,GAAoBC,GAAkBC,MAA6B;AACrF,QAAAC,IAAeF,IAAU,WAAW,QACpCG,IAAYH,IAAU,GAAGC,CAAQ,OAAO,OACxCG,IAAc;AAEb,SAAA,QAAQL,IAAaM,EAA0B,QAAQH,CAAY,MAAMC,CAAS,MAAMC,CAAW;AAC5G,GAEME,IAAQC,EAAM,WAAW,CAACC,GAAmBC,MAAqC;AAChF,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,MAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC,IAAOC,EAAS;AAAA,IAChB,MAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAhC,GACEiC,KAAaC,MACbC,IAAoBC,EAAuB,IAAI,GAC/CC,IAAeC,GAAQ5B,CAAO,GAC9B,CAAC6B,GAAOC,CAAQ,IAAIC,EAAStC,KAAgB,EAAE,GAC/C,CAACuC,IAAWC,EAAY,IAAIF,EAAsC,MAAS,GAC3EG,IAAgBR,EAAgB,EAAK,GACrCS,IAAW;AAEjB,EAAAC,GAAU,MAAM;AACd,IAAAN,EAASrC,KAAgB,EAAE;AAAA,EAAA,GAC1B,CAACA,CAAY,CAAC;AAEX,QAAA4C,KAASnC,MAASC,EAAS,QAC3BmC,KAAcpC,MAASC,EAAS,aAChCoC,KAAwB,CAAC,CAACnB,KAAiBS,EAAM,WAAW,SAAST,GACrEoB,IAAUtC,MAASC,EAAS,aAAa,CAAC,CAACK,KAAa,CAAC,CAACD,KAASgC,IACnEE,IAAUrC,MAASsC,GAAS,OAC5BC,KAAgB9C,KAAeK,MAASC,EAAS,UAAU,CAACqC,GAE5DI,KAAoBC,EAAGC,EAAO,eAAe,GAAGtD,CAAS,GAEzDuD,KAAiBF,EAAGC,EAAO,iBAAiB,GAAG;AAAA,IACnD,CAACA,EAAO,8BAA8B,CAAC,GAAGH;AAAA,IAC1C,CAACG,EAAO,+BAA+B,CAAC,GAAGR;AAAA,IAC3C,CAACQ,EAAO,0BAA0B,CAAC,GAAGT;AAAA,IACtC,CAACS,EAAO,0BAA0B,CAAC,GAAGN;AAAA,IACtC,CAACM,EAAO,wBAAwB,CAAC,GAAGL;AAAA,IACpC,CAACK,EAAO,2BAA2B,CAAC,GAAGpC;AAAA,IACvC,CAACoC,EAAO,4BAA4B,CAAC,GAAGhD;AAAA,EAAA,CACzC,GAEKkD,KAAaH,EAAGC,EAAO,wBAAwB,GAAG;AAAA,IACtD,CAACA,EAAO,+BAA+B,CAAC,GAAGL;AAAA,IAC3C,CAACK,EAAO,kCAAkC,CAAC,GAAGpC;AAAA,EAAA,CAC/C,GAEKuC,IAAYvC,IAAWwC,EAAS,WAAW,GAAG,IAAIA,EAAS,OAAO,GAClEnE,IAAWwC,OAAe4B,GAAW,MAAM,CAACV,IAAUW,EAAS,SAASA,EAAS,OAEjFC,IAAa,MAAuB;AACxC,QAAKvD;AAID,aAAA,OAAOA,KAAS,WACXT,gBAAAA,EAAA,cAACiE,IAAS,EAAA,WAAWR,EAAO,8BAA8B,GAAG,OAAOG,GAAW,MAAMlE,GAAU,UAAUe,EAAM,CAAA,IAGjHT,gBAAAA,EAAA,cAACkE,IAAK,EAAA,WAAWT,EAAO,8BAA8B,GAAG,OAAOG,GAAW,MAAMlE,GAAU,SAASe,EAAM,CAAA;AAAA,EAAA,GAI7G0D,KAAc,CAACC,MAAmC;AAClD,QAAAhC,KAAqBA,EAAkB,WAAW3B,GAAM;AACpD,YAAA4D,IAAgB3D,IAAY,IAAI;AAEtC8B,MADcJ,EAAkB,QAAQ,SAASiC,CAAa,EACxD,MAAM,GAENpE,EAAA,WAAWA,EAAM,QAAQmE,CAAC;AAAA,IAClC;AAAA,EAAA,GAGIE,KAAe,CAACF,MAAiD;AAC/D,UAAAG,IAAWC,GAAkBJ,CAAC;AAEpC,IAAIxC,KACFA,EAASwC,CAAC,GAGZ3B,EAAS8B,CAAQ,GACjB3B,GAAa2B,CAAQ;AAAA,EAAA,GAIjBC,KAAoB,CAACJ,MAAmD;AACxE,QAAA,OAAOpD,IAAuB,OAAeV,MAAS;AAAU,aAAO8D,EAAE,OAAO;AAEpF,UAAMK,IAAgB,OAAOL,EAAE,OAAO,KAAK;AAEvC,WAAA,CAACzB,MAAa,CAACE,EAAc,YAAY4B,MAAkB,KAAKA,MAAkB,QAClFL,EAAA,OAAO,QAAQpD,IAAqB,KAGjCoD,EAAE,OAAO;AAAA,EAAA,GAGZM,KAAgB,CAACN,MAAmD;AACxE,IAAItB,EAAS,KAAKsB,EAAE,GAAG,MACrBvB,EAAc,UAAU,KAE1BhB,KAAaA,EAAUuC,CAAC;AAAA,EAAA,GAGpBO,KAAc,CAACP,MAAmD;AACtE,IAAItB,EAAS,KAAKsB,EAAE,GAAG,MACrBvB,EAAc,UAAU;AAAA,EAC1B,GAGI+B,IAAWlD,IAAQnC,GAAiBmC,GAAO,CAAC,CAACjB,GAAMf,CAAQ,IAAI;AAErE,yCACGmF,IAAa,EAAA,WAAA1D,EAAA,mCACX,OAAI,EAAA,eAAaC,GAAQ,oBAAkB0D,GAAY,OAAO,WAAWvB,IAAmB,KAAK3C,KAC/FmE,GAAY9D,GAAOqB,GAAczB,GAAkBQ,CAAQ,GAE3DrB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWyD,EAAO,iBAAiB,KAErCzD,gBAAAA,EAAA,cAAA,OAAA,EAAI,SAASmE,IAAa,KAAK/B,GAAmB,WAAWsB,IAAgB,OAAO,EAAE,UAAAkB,OACpF,CAAClE,KAAasD,EACf,GAAAhE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAUsE;AAAA,MACV,WAAWI;AAAA,MACX,SAASC;AAAA,MACT,MAAApE;AAAA,MACA,MAAAD;AAAA,MACA,cAAAF;AAAA,MACA,IAAIkC;AAAA,MACJ,WAAWqB;AAAA,MACX,KAAAzD;AAAA,MACA,mBAAiBD,EAAM,iBAAiB,KAAK;AAAA,MAC7C,oBAAkBA,EAAM,kBAAkB,KAAK;AAAA,MAC/C,gBAAc,CAAC,CAACkD;AAAA,MAChB,UAAA9B;AAAA,MACA,aAAAhB;AAAA,MACA,UAAAiB;AAAA,MACA,cAAcC,KAAgB;AAAA,MAC9B,UAAAI;AAAA,MAEA,WAAAG;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,EAEL,GAAAvB,KAAasD,EAAW,CAC3B,GACAhE,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWyD,EAAO,iCAAiC,EAAI,GAAAhC,CAAa,CAC3E,GACCM,KACC/B,gBAAAA,EAAA,cAACgF,IAAc,EAAA,eAAAjD,GAA8B,QAAQS,EAAM,SAAS,EAAE,QAAQ,SAAAR,GAAkB,MAAAnB,GAAY,UAAA+D,EAAoB,CAAA,GAEjIpD,CACH,CACF;AAEJ,CAAC;AAEDzB,EAAM,cAAc;AAEpB,MAAAkF,KAAelF;"}
+{"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 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  /** 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    testId,\n    disabled,\n    readOnly,\n    autoComplete,\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 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}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\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={props['aria-describedby'] ?? undefined}\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","borderWidth","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","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","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","MaxCharacters","Input$1"],"mappings":"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"}

package/components/Input/styles.module.scss

@@ -33,6 +33,8 @@
 .input-container {
   @include input-container;
 
+  $container: &;
+
   padding: 0.5rem 0;
   align-items: center;
 
@@ -71,4 +73,10 @@
       cursor: pointer;
     }
   }
+
+  &--disabled {
+    #{$container}__input__icon {
+      cursor: initial;
+    }
+  }
 }

package/components/Select/styles.module.scss

@@ -39,10 +39,11 @@
   }
 
   &--disabled {
-    background: $neutral50;
+    color: $neutral700;
+    background: transparent;
 
     &:hover {
-      background: $neutral50;
+      background: transparent;
     }
   }
 }
@@ -88,7 +89,7 @@
   }
 
   &:disabled {
-    outline: $neutral500 solid 2px;
+    outline: $neutral600 dashed 2px;
     outline-offset: -2px;
   }
 

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_input.scss

@@ -8,7 +8,7 @@
   display: flex;
   font-size: $font-size-sm;
   width: 100%;
-  border: $neutral700 2px solid;
+  border: 2px solid $neutral700;
   outline: none;
   background: $white;
 
@@ -119,13 +119,14 @@
   }
 
   &--disabled {
-    background: $neutral50;
-    border-color: $neutral500;
-    color: $neutral500;
+    background: transparent;
+    border-color: $neutral600;
+    border-style: dashed;
+    color: $neutral700;
 
     &:hover {
-      background: $neutral50;
-      border-color: $neutral500;
+      background: transparent;
+      border-color: $neutral600;
       box-shadow: none;
     }
   }
@@ -149,7 +150,7 @@
     }
 
     &--disabled {
-      color: $neutral500;
+      color: $neutral700;
     }
 
     &:first-child {