@helsenorge/designsystem-react 8.6.0-beta.1 → 9.0.0-beta.0

package/Icon.js

@@ -1,45 +1,45 @@
 import { jsxs as u, jsx as b } from "react/jsx-runtime";
 import f from "react";
 import y from "classnames";
-import { IconSize as c, AnalyticsId as v } from "./constants.js";
+import { IconSize as l, AnalyticsId as v } from "./constants.js";
 import { useUuid as w } from "./hooks/useUuid.js";
 const z = ({
   size: a,
-  isHovered: o,
+  isHovered: e,
   normal: n,
-  normalHover: e,
-  xSmall: s,
+  normalHover: o,
+  xSmall: r,
   xSmallHover: t,
   xxSmall: i,
-  xxSmallHover: r
-}) => a <= c.XXSmall && i && r ? o ? r : i : a <= c.XSmall && s && t ? o ? t : s : o ? e : n, N = f.forwardRef((a, o) => {
+  xxSmallHover: s
+}) => a <= l.XXSmall && i && s ? e ? s : i : a <= l.XSmall && r && t ? e ? t : r : e ? o : n, N = f.forwardRef((a, e) => {
   const {
     svgIcon: n,
-    ariaLabel: e,
-    className: s = "",
-    size: t = c.Small,
+    ariaLabel: o,
+    className: r = "",
+    size: t = l.Small,
     color: i = "black",
-    hoverColor: r = i || "black",
-    isHovered: l = !1,
-    mode: h,
+    hoverColor: s = i || "black",
+    isHovered: c = !1,
+    onColor: h,
     testId: I,
     ...g
   } = a, p = f.createElement(n, {
     size: t,
-    isHovered: l,
-    mode: h
-  }), d = w(), m = l ? r : i;
+    isHovered: c,
+    onColor: h
+  }), d = w(), m = c ? s : i;
   return /* @__PURE__ */ u(
     "svg",
     {
       "data-testid": I,
       "data-analyticsid": v.Icon,
-      ref: o,
-      className: y("hnds-style-icon", s),
-      role: e ? "img" : "presentation",
-      "aria-labelledby": e ? d : void 0,
+      ref: e,
+      className: y("hnds-style-icon", r),
+      role: o ? "img" : "presentation",
+      "aria-labelledby": o ? d : void 0,
       focusable: !1,
-      "aria-hidden": e ? void 0 : !0,
+      "aria-hidden": o ? void 0 : !0,
       viewBox: "0 0 48 48",
       style: { minWidth: t, minHeight: t },
       width: t,
@@ -48,7 +48,7 @@ const z = ({
       color: m,
       ...g,
       children: [
-        e && /* @__PURE__ */ b("title", { id: d, children: e }),
+        o && /* @__PURE__ */ b("title", { id: d, children: o }),
         p
       ]
     }

package/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotModes } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  mode?: keyof typeof FormMode | StatusDotModes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  mode?: keyof typeof FormMode | StatusDotModes;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    mode,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    mode,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["getIcon","size","isHovered","normal","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","IconSize","Icon","React","props","ref","svgIcon","ariaLabel","className","color","hoverColor","mode","testId","other","svgRaw","titleId","useUuid","svgColor","jsxs","AnalyticsId","classNames","jsx"],"mappings":";;;;;AAmDO,MAAMA,IAAU,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AACF,MACMP,KAAQQ,EAAS,WAAWF,KAAWC,IAClCN,IAAYM,IAAeD,IAEhCN,KAAQQ,EAAS,UAAUJ,KAAUC,IAChCJ,IAAYI,IAAcD,IAG5BH,IAAYE,IAAcD,GAGtBO,IAAOC,EAAM,WAAW,CAACC,GAAkBC,MAA2C;AAC3F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAf,IAAOQ,EAAS;AAAA,IAChB,OAAAQ,IAAQ;AAAA,IACR,YAAAC,IAAaD,KAAS;AAAA,IACtB,WAAAf,IAAY;AAAA,IACZ,MAAAiB;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAASX,EAAM,cAAcG,GAAS;AAAA,IAC1C,MAAAb;AAAA,IACA,WAAAC;AAAA,IACA,MAAAiB;AAAA,EAAA,CACD,GAEKI,IAAUC,KACVC,IAAWvB,IAAYgB,IAAaD;AAGxC,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaN;AAAA,MACb,oBAAkBO,EAAY;AAAA,MAC9B,KAAAd;AAAA,MACA,WAAWe,EAAW,mBAAmBZ,CAAS;AAAA,MAClD,MAAMD,IAAY,QAAQ;AAAA,MAC1B,mBAAiBA,IAAYQ,IAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAaR,IAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUd,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,MACR,MAAMwB;AAAA,MACN,OAAOA;AAAA,MACN,GAAGJ;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAc,gBAAAc,EAAA,SAAA,EAAM,IAAIN,GAAU,UAAUR,GAAA;AAAA,QAC5CO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDZ,EAAK,cAAc;"}
+{"version":3,"file":"Icon.js","sources":["../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useUuid();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"names":["getIcon","size","isHovered","normal","normalHover","xSmall","xSmallHover","xxSmall","xxSmallHover","IconSize","Icon","React","props","ref","svgIcon","ariaLabel","className","color","hoverColor","onColor","testId","other","svgRaw","titleId","useUuid","svgColor","jsxs","AnalyticsId","classNames","jsx"],"mappings":";;;;;AAmDO,MAAMA,IAAU,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AACF,MACMP,KAAQQ,EAAS,WAAWF,KAAWC,IAClCN,IAAYM,IAAeD,IAEhCN,KAAQQ,EAAS,UAAUJ,KAAUC,IAChCJ,IAAYI,IAAcD,IAG5BH,IAAYE,IAAcD,GAGtBO,IAAOC,EAAM,WAAW,CAACC,GAAkBC,MAA2C;AAC3F,QAAA;AAAA,IACJ,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAf,IAAOQ,EAAS;AAAA,IAChB,OAAAQ,IAAQ;AAAA,IACR,YAAAC,IAAaD,KAAS;AAAA,IACtB,WAAAf,IAAY;AAAA,IACZ,SAAAiB;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAT,GAEEU,IAASX,EAAM,cAAcG,GAAS;AAAA,IAC1C,MAAAb;AAAA,IACA,WAAAC;AAAA,IACA,SAAAiB;AAAA,EAAA,CACD,GAEKI,IAAUC,KACVC,IAAWvB,IAAYgB,IAAaD;AAGxC,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaN;AAAA,MACb,oBAAkBO,EAAY;AAAA,MAC9B,KAAAd;AAAA,MACA,WAAWe,EAAW,mBAAmBZ,CAAS;AAAA,MAClD,MAAMD,IAAY,QAAQ;AAAA,MAC1B,mBAAiBA,IAAYQ,IAAU;AAAA,MACvC,WAAW;AAAA,MACX,eAAaR,IAAY,SAAY;AAAA,MACrC,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUd,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,MACR,MAAMwB;AAAA,MACN,OAAOA;AAAA,MACN,GAAGJ;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAc,gBAAAc,EAAA,SAAA,EAAM,IAAIN,GAAU,UAAUR,GAAA;AAAA,QAC5CO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDZ,EAAK,cAAc;"}

package/Input.js

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

package/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 { 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    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = 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 (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.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([inputContainerRefLocal, 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","inputContainerRef","rest","breakpoint","useBreakpoint","inputContainerRefLocal","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","jsx","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","jsxs","AnalyticsId","renderLabel","mergeRefs","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 { FormOnColor, 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, { ErrorWrapperClassNameProps } 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 ErrorWrapperClassNameProps,\n    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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\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    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = 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 = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.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 (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.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 className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, onColor as FormOnColor)}\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([inputContainerRefLocal, 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\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\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","onColor","FormOnColor","size","baseIncrementValue","label","error","errorText","errorTextId","errorWrapperClassName","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","inputContainerRef","rest","breakpoint","useBreakpoint","inputContainerRefLocal","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","jsx","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","jsxs","AnalyticsId","renderLabel","mergeRefs","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/Label.js

@@ -1,12 +1,12 @@
 import { jsxs as m, Fragment as x, jsx as t } from "react/jsx-runtime";
 import S from "react";
 import y from "classnames";
-import { AnalyticsId as L, FormMode as u } from "./constants.js";
+import { AnalyticsId as L, FormOnColor as u } from "./constants.js";
 import { S as N } from "./Spacer.js";
 import a from "./components/Label/styles.module.scss";
 import { isComponent as b } from "./utils/component.js";
 import { S as z } from "./StatusDot.js";
-const A = ({ className: e, id: r, mode: s, sublabelTexts: n, testId: o }) => {
+const A = ({ className: e, id: r, onColor: s, sublabelTexts: n, testId: o }) => {
   const l = (p) => n && n.map((c, h) => {
     const F = y(a.label, a["label--sublabel"], {
       [a["label--semibold"]]: c.type === "semibold",
@@ -26,10 +26,10 @@ const A = ({ className: e, id: r, mode: s, sublabelTexts: n, testId: o }) => {
   }), r;
 }, J = (e, r, s) => /* @__PURE__ */ t(x, { children: e && b(e, f) ? S.cloneElement(e, {
   htmlFor: r,
-  mode: s
-}) : typeof e == "string" && /* @__PURE__ */ t(f, { labelTexts: [{ text: e, type: "semibold" }], htmlFor: r, mode: s }) }), K = (e, r, s, n, o, l, i, d) => /* @__PURE__ */ t(x, { children: e && b(e, f) ? S.cloneElement(e, {
+  onColor: s
+}) : typeof e == "string" && /* @__PURE__ */ t(f, { labelTexts: [{ text: e, type: "semibold" }], htmlFor: r, onColor: s }) }), K = (e, r, s, n, o, l, i, d) => /* @__PURE__ */ t(x, { children: e && b(e, f) ? S.cloneElement(e, {
   htmlFor: s,
-  mode: n,
+  onColor: n,
   children: r,
   labelClassName: y(o, e.props.labelClassName),
   labelTextClassName: l,
@@ -41,7 +41,7 @@ const A = ({ className: e, id: r, mode: s, sublabelTexts: n, testId: o }) => {
   {
     labelTexts: [{ text: e }],
     htmlFor: s,
-    mode: n,
+    onColor: n,
     labelClassName: o,
     labelTextClassName: l,
     sublabelWrapperClassName: i,
@@ -56,7 +56,7 @@ const A = ({ className: e, id: r, mode: s, sublabelTexts: n, testId: o }) => {
   labelTextClassName: l,
   labelId: i,
   labelTexts: d,
-  mode: p = u.onwhite,
+  onColor: p = u.onwhite,
   statusDot: c,
   sublabel: h,
   sublabelWrapperClassName: F,
@@ -85,12 +85,12 @@ const A = ({ className: e, id: r, mode: s, sublabelTexts: n, testId: o }) => {
       ] }) }),
       /* @__PURE__ */ m("div", { className: F, children: [
         h && b(h, A) && S.cloneElement(h, {
-          mode: p
+          onColor: p
         }),
         c && b(c, z) && /* @__PURE__ */ m(x, { children: [
           /* @__PURE__ */ t(N, { size: "3xs" }),
           S.cloneElement(c, {
-            mode: p === u.ondark ? "ondark" : "onwhite"
+            onColor: p === u.ondark ? "ondark" : "onwhite"
           })
         ] })
       ] })

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: FormMode;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  mode?: keyof typeof FormMode;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  mode: FormMode,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              mode={mode}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  mode = FormMode.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: mode === FormMode.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </label>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              mode: mode as FormMode,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","jsx","subLabels","ariaHiddenSublabels","jsxs","Fragment","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","React","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","large","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {subLabels && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </label>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","onColor","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormOnColor","jsx","subLabels","ariaHiddenSublabels","jsxs","Fragment","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","React","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","large","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot"],"mappings":"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"}

package/MaxCharacters.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import l from "classnames";
-import { FormMode as p } from "./constants.js";
+import { FormOnColor as p } from "./constants.js";
 import r from "./components/MaxCharacters/styles.module.scss";
-const h = ({ maxCharacters: a, maxText: o, length: s, mode: e, maxWidth: c }) => {
+const h = ({ maxCharacters: a, maxText: o, length: s, onColor: e, maxWidth: c }) => {
   const t = s / a, i = l(r["max-characters"], {
     [r["max-characters--on-dark"]]: e === p.ondark,
     [r["max-characters--invalid"]]: t > 1

package/MaxCharacters.js.map

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