@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/Input/Input.js

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

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 = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const 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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"}
+{"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 = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const 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)}\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","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/Input.stories.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import Input, { InputTypes } from './Input';
+import { FormMode, FormSize } from '../../constants';
+type InputWithAndCustomArgs = React.ComponentProps<typeof Input> & {
+    showIcon: boolean;
+};
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Input").InputProps & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        width: undefined;
+        size: FormSize.medium;
+        transparent: false;
+        type: InputTypes.text;
+        disabled: false;
+        mode: FormMode.onwhite;
+        showIcon: true;
+        iconRight: false;
+        readOnly: false;
+        autoComplete: string;
+        name: string;
+        required: false;
+        maxText: string;
+    };
+    argTypes: {
+        defaultValue: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        width: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+        transparent: {
+            control: string;
+        };
+        type: {
+            control: string;
+            options: typeof InputTypes;
+        };
+        disabled: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        showIcon: {
+            control: string;
+        };
+        iconRight: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+        autoComplete: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+        maxCharacters: {
+            control: string;
+        };
+        maxText: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<InputWithAndCustomArgs>;
+export declare const Default: Story;
+export declare const MultipleExamples: Story;
+export declare const MaxCharacters: Story;
+export declare const AfterInputChildren: Story;
+export declare const BaseIncrementValue: Story;

package/components/Input/index.d.ts

@@ -1,4 +1,3 @@
 import Input from './Input';
 export * from './Input';
 export default Input;
-//# sourceMappingURL=index.d.ts.map

package/components/Label/Label.d.ts

@@ -5,7 +5,7 @@ export type LabelText = {
     text: string;
     type?: 'semibold' | 'normal';
 };
-export interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {
+export interface LabelProps {
     /** Component shown after label - discourage use of this */
     afterLabelChildren?: React.ReactNode;
     /** Adds custom classes to the element. */
@@ -34,8 +34,7 @@ export interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElem
     testId?: string;
 }
 export declare const getLabelText: (label: React.ReactNode) => string;
-export declare const renderLabel: (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean) => React.ReactNode;
-export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean) => React.ReactNode;
+export declare const renderLabel: (label: React.ReactNode, inputId: string, mode: FormMode) => React.ReactNode;
+export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, mode: FormMode, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean) => React.ReactNode;
 declare const Label: FunctionComponent<LabelProps>;
 export default Label;
-//# sourceMappingURL=Label.d.ts.map

package/components/Label/Label.js

@@ -1,84 +1,79 @@
 import t from "react";
-import h from "classnames";
-import { Sublabel as _ } from "./SubLabel.js";
-import { AnalyticsId as k, FormMode as F } from "../../constants.js";
-import { isComponent as s } from "../../utils/component.js";
+import F from "classnames";
+import { Sublabel as L } from "./SubLabel.js";
+import { AnalyticsId as k, FormMode as b } from "../../constants.js";
+import { isComponent as l } from "../../utils/component.js";
 import S from "../Spacer/Spacer.js";
-import R from "../StatusDot/StatusDot.js";
-import a from "./styles.module.scss";
-const j = (e) => {
+import _ from "../StatusDot/StatusDot.js";
+import n from "./styles.module.scss";
+const $ = (e) => {
   let r = "";
-  return s(e, o) && e.props.labelTexts.forEach((n) => {
-    r += n.hideFromScreenReader ? "" : n.text;
+  return l(e, o) && e.props.labelTexts.forEach((a) => {
+    r += a.hideFromScreenReader ? "" : a.text;
   }), r;
-}, q = (e, r, n, l) => /* @__PURE__ */ t.createElement(t.Fragment, null, e && s(e, o) ? t.cloneElement(e, {
+}, j = (e, r, a) => /* @__PURE__ */ t.createElement(t.Fragment, null, e && l(e, o) ? t.cloneElement(e, {
   htmlFor: r,
-  mode: n,
-  disabled: l
-}) : typeof e == "string" && /* @__PURE__ */ t.createElement(o, { labelTexts: [{ text: e, type: "semibold" }], htmlFor: r, mode: n, disabled: l })), B = (e, r, n, l, m, c, p, i, d) => /* @__PURE__ */ t.createElement(t.Fragment, null, e && s(e, o) ? t.cloneElement(e, {
-  htmlFor: n,
-  mode: l,
+  mode: a
+}) : typeof e == "string" && /* @__PURE__ */ t.createElement(o, { labelTexts: [{ text: e, type: "semibold" }], htmlFor: r, mode: a })), q = (e, r, a, s, m, c, p, i) => /* @__PURE__ */ t.createElement(t.Fragment, null, e && l(e, o) ? t.cloneElement(e, {
+  htmlFor: a,
+  mode: s,
   children: r,
-  disabled: m,
-  labelClassName: h(c, e.props.labelClassName),
-  labelTextClassName: p,
-  sublabelWrapperClassName: i,
-  sublabel: d ? void 0 : e.props.sublabel,
-  statusDot: d ? void 0 : e.props.statusDot
+  labelClassName: F(m, e.props.labelClassName),
+  labelTextClassName: c,
+  sublabelWrapperClassName: p,
+  sublabel: i ? void 0 : e.props.sublabel,
+  statusDot: i ? void 0 : e.props.statusDot
 }) : typeof e == "string" && /* @__PURE__ */ t.createElement(
   o,
   {
     labelTexts: [{ text: e }],
-    htmlFor: n,
-    mode: l,
-    disabled: m,
-    labelClassName: c,
-    labelTextClassName: p,
-    sublabelWrapperClassName: i
+    htmlFor: a,
+    mode: s,
+    labelClassName: m,
+    labelTextClassName: c,
+    sublabelWrapperClassName: p
   },
   r
 )), o = ({
   afterLabelChildren: e,
   children: r,
-  className: n,
-  disabled: l,
-  htmlFor: m,
-  labelClassName: c,
-  labelTextClassName: p,
-  labelId: i,
-  labelTexts: d,
-  mode: E = F.onwhite,
-  statusDot: f,
-  sublabel: b,
-  sublabelWrapperClassName: y,
-  testId: x
+  className: a,
+  htmlFor: s,
+  labelClassName: m,
+  labelTextClassName: c,
+  labelId: p,
+  labelTexts: i,
+  mode: d = b.onwhite,
+  statusDot: E,
+  sublabel: f,
+  sublabelWrapperClassName: h,
+  testId: y
 }) => {
-  const N = r && typeof r < "u", w = h(
-    a["label-wrapper"],
-    { [a["label-wrapper--no-bottom-margin"]]: N, [a["label-wrapper--after-label-children"]]: e },
-    n
-  ), g = () => d.map((u, v) => {
-    const L = h(
-      a.label,
+  const x = r && typeof r < "u", N = F(
+    n["label-wrapper"],
+    { [n["label-wrapper--no-bottom-margin"]]: x, [n["label-wrapper--after-label-children"]]: e },
+    a
+  ), g = () => i.map((u, v) => {
+    const w = F(
+      n.label,
       {
-        [a["label--semibold"]]: u.type === "semibold",
-        [a["label--on-dark"]]: E === F.ondark,
-        [a["label--disabled"]]: l
+        [n["label--semibold"]]: u.type === "semibold",
+        [n["label--on-dark"]]: d === b.ondark
       },
-      p
+      c
     );
-    return /* @__PURE__ */ t.createElement("span", { "aria-hidden": u.hideFromScreenReader, className: L, key: v }, u.text);
+    return /* @__PURE__ */ t.createElement("span", { "aria-hidden": u.hideFromScreenReader, className: w, key: v }, u.text);
   });
-  return /* @__PURE__ */ t.createElement("div", { className: w }, /* @__PURE__ */ t.createElement("div", { className: a["label-wrapper__inner"] }, /* @__PURE__ */ t.createElement("label", { className: c, id: i, htmlFor: m, "data-testid": x, "data-analyticsid": k.Label }, /* @__PURE__ */ t.createElement("span", { className: a["label-content-wrapper"] }, r, /* @__PURE__ */ t.createElement("span", { className: a.label__texts }, g()))), /* @__PURE__ */ t.createElement("div", { className: y }, b && s(b, _) && t.cloneElement(b, {
-    mode: E
-  }), f && s(f, R) && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(S, { size: "3xs" }), t.cloneElement(f, {
-    mode: E === F.ondark ? "ondark" : "onwhite"
-  })))), e && /* @__PURE__ */ t.createElement("div", { className: a["after-label-children"] }, e));
-}, G = o;
+  return /* @__PURE__ */ t.createElement("div", { className: N }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("label", { className: m, id: p, htmlFor: s, "data-testid": y, "data-analyticsid": k.Label }, /* @__PURE__ */ t.createElement("span", { className: n["label-content-wrapper"] }, r, /* @__PURE__ */ t.createElement("span", { className: n.label__texts }, g()))), /* @__PURE__ */ t.createElement("div", { className: h }, f && l(f, L) && t.cloneElement(f, {
+    mode: d
+  }), E && l(E, _) && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(S, { size: "3xs" }), t.cloneElement(E, {
+    mode: d === b.ondark ? "ondark" : "onwhite"
+  })))), e && /* @__PURE__ */ t.createElement("div", { className: n["after-label-children"] }, e));
+}, B = o;
 export {
-  G as default,
-  j as getLabelText,
-  q as renderLabel,
-  B as renderLabelAsParent
+  B as default,
+  $ as getLabelText,
+  j as renderLabel,
+  q as renderLabelAsParent
 };
 //# sourceMappingURL=Label.js.map

package/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["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 extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\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, disabled?: boolean): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            mode: mode,\n            disabled,\n          })\n        : typeof label === 'string' && (\n            <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n          )}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  mode: FormMode,\n  disabled?: boolean,\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            disabled,\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              disabled={disabled}\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  disabled,\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          [styles['label--disabled']]: disabled,\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 className={styles['label-wrapper__inner']}>\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":["getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","mode","disabled","React","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","large","cn","afterLabelChildren","className","htmlFor","labelId","labelTexts","FormMode","statusDot","sublabel","testId","hasChildren","labelWrapperClasses","styles","mapLabels","index","labelClasses","AnalyticsId","Sublabel","StatusDot","Spacer","Label$1"],"mappings":";;;;;;;;AA+Ca,MAAAA,IAAe,CAACC,MAAmC;AAC9D,MAAIC,IAAe;AAEf,SAAAC,EAAwBF,GAAOG,CAAK,KAChCH,EAAA,MAAM,WAAW,QAAQ,CAAaI,MAAA;AAC1C,IAAAH,KAAiBG,EAAU,uBAAwC,KAAjBA,EAAU;AAAA,EAAO,CACpE,GAGIH;AACT,GAEaI,IAAc,CAACL,GAAwBM,GAAiBC,GAAgBC,MAEjFC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACGT,KAASE,EAAwBF,GAAOG,CAAK,IAC1CM,EAAM,aAAaT,GAAO;AAAA,EACxB,SAASM;AAAA,EACT,MAAAC;AAAA,EACA,UAAAC;AAAA,CACD,IACD,OAAOR,KAAU,YACdS,gBAAAA,EAAA,cAAAN,GAAA,EAAM,YAAY,CAAC,EAAE,MAAMH,GAAO,MAAM,YAAY,GAAG,SAASM,GAAS,MAAAC,GAAY,UAAAC,EAAoB,CAAA,CAElH,GAISE,IAAsB,CACjCV,GACAW,GACAL,GACAC,GACAC,GACAI,GACAC,GACAC,GACAC,MAGEN,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACGT,KAASE,EAAwBF,GAAOG,CAAK,IAC1CM,EAAM,aAAaT,GAAO;AAAA,EACxB,SAASM;AAAA,EACT,MAAAC;AAAA,EACA,UAAAI;AAAA,EACA,UAAAH;AAAA,EACA,gBAAgBQ,EAAGJ,GAAgBZ,EAAM,MAAM,cAAc;AAAA,EAC7D,oBAAAa;AAAA,EACA,0BAAAC;AAAA,EACA,UAAUC,IAAQ,SAAYf,EAAM,MAAM;AAAA,EAC1C,WAAWe,IAAQ,SAAYf,EAAM,MAAM;AAC5C,CAAA,IACD,OAAOA,KAAU,YACfS,gBAAAA,EAAA;AAAA,EAACN;AAAA,EAAA;AAAA,IACC,YAAY,CAAC,EAAE,MAAMH,GAAO;AAAA,IAC5B,SAASM;AAAA,IACT,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAI;AAAA,IACA,oBAAAC;AAAA,IACA,0BAAAC;AAAA,EAAA;AAAA,EAECH;AAAA,CAGX,GAIER,IAAuC,CAAC;AAAA,EAC5C,oBAAAc;AAAA,EACA,UAAAN;AAAA,EACA,WAAAO;AAAA,EACA,UAAAV;AAAA,EACA,SAAAW;AAAA,EACA,gBAAAP;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAO;AAAA,EACA,YAAAC;AAAA,EACA,MAAAd,IAAOe,EAAS;AAAA,EAChB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,0BAAAV;AAAA,EACA,QAAAW;AACF,MAAM;AACE,QAAAC,IAAcf,KAAY,OAAOA,IAAa,KAC9CgB,IAAsBX;AAAAA,IAC1BY,EAAO,eAAe;AAAA,IACtB,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGF,GAAa,CAACE,EAAO,qCAAqC,CAAC,GAAGX,EAAmB;AAAA,IAChIC;AAAA,EAAA,GAGIW,IAAY,MACTR,EAAW,IAAI,CAACjB,GAAW0B,MAAU;AAC1C,UAAMC,IAAef;AAAAA,MACnBY,EAAO;AAAA,MACP;AAAA,QACE,CAACA,EAAO,iBAAiB,CAAC,GAAGxB,EAAU,SAAS;AAAA,QAChD,CAACwB,EAAO,gBAAgB,CAAC,GAAGrB,MAASe,EAAS;AAAA,QAC9C,CAACM,EAAO,iBAAiB,CAAC,GAAGpB;AAAA,MAC/B;AAAA,MACAK;AAAA,IAAA;AAGA,WAAAJ,gBAAAA,EAAA,cAAC,QAAK,EAAA,eAAaL,EAAU,sBAAsB,WAAW2B,GAAc,KAAKD,EAC9E,GAAA1B,EAAU,IACb;AAAA,EAAA,CAEH;AAID,SAAAK,gBAAAA,EAAA,cAAC,SAAI,WAAWkB,EAAA,mCACb,OAAI,EAAA,WAAWC,EAAO,sBAAsB,EAC3C,GAAAnB,gBAAAA,EAAA,cAAC,WAAM,WAAWG,GAAgB,IAAIQ,GAAS,SAAAD,GAAkB,eAAaM,GAAQ,oBAAkBO,EAAY,MAClH,GAAAvB,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWmB,EAAO,uBAAuB,EAAA,GAC5CjB,GACAF,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWmB,EAAO,aAAA,GAAeC,EAAY,CAAA,CACrD,CACF,GACCpB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWK,EAAA,GACbU,KACCtB,EAA2BsB,GAAUS,CAAQ,KAC7CxB,EAAM,aAAae,GAAU;AAAA,IAC3B,MAAAjB;AAAA,EAAA,CACD,GACFgB,KAAarB,EAA4BqB,GAAWW,CAAS,KAE1DzB,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA,cAAC0B,KAAO,MAAM,MAAA,CAAO,GACpB1B,EAAM,aAAac,GAAW;AAAA,IAC7B,MAAMhB,MAASe,EAAS,SAAS,WAAW;AAAA,EAC7C,CAAA,CACH,CAEJ,CACF,GACCL,KAAuBR,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWmB,EAAO,sBAAsB,EAAA,GAAIX,CAAmB,CAC7F;AAEJ,GAEAmB,IAAejC;"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["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":["getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","mode","React","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","large","cn","afterLabelChildren","className","htmlFor","labelId","labelTexts","FormMode","statusDot","sublabel","testId","hasChildren","labelWrapperClasses","styles","mapLabels","index","labelClasses","AnalyticsId","Sublabel","StatusDot","Spacer","Label$1"],"mappings":"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"}

package/components/Label/Label.stories.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import Label from './Label';
+type LabelWithAndCustomArgs = React.ComponentProps<typeof Label> & {
+    showIcon: boolean;
+};
+declare const meta: {
+    title: string;
+    component: React.FunctionComponent<import("./Label").LabelProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<LabelWithAndCustomArgs>;
+export declare const Default: Story;
+export declare const OnDark: Story;
+export declare const ChildrenAfterLabel: Story;
+export declare const LabelAsString: Story;

package/components/Label/SubLabel.d.ts

@@ -14,4 +14,3 @@ export interface SublabelProps {
     testId?: string;
 }
 export declare const Sublabel: React.FC<SublabelProps>;
-//# sourceMappingURL=SubLabel.d.ts.map

package/components/Label/index.d.ts

@@ -2,4 +2,3 @@ import Label from './Label';
 export { Sublabel } from './SubLabel';
 export * from './Label';
 export default Label;
-//# sourceMappingURL=index.d.ts.map

package/components/LazyIcon/ErrorBoundary.d.ts

@@ -14,4 +14,3 @@ declare class ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, Er
     render(): React.ReactNode;
 }
 export default ErrorBoundary;
-//# sourceMappingURL=ErrorBoundary.d.ts.map

package/components/LazyIcon/LazyIcon.d.ts

@@ -7,4 +7,3 @@ export interface LazyIconProps extends BaseIconProps {
 export declare const lazyLoadIcon: (iconName: IconName) => React.LazyExoticComponent<SvgIcon>;
 export declare const LazyIcon: React.FC<LazyIconProps>;
 export default LazyIcon;
-//# sourceMappingURL=LazyIcon.d.ts.map

package/components/LazyIcon/LazyIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIcon.js","sources":["../../../src/components/LazyIcon/LazyIcon.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { isServerSide } from './utils';\nimport Icon, { BaseIconProps, IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> =>\n  lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n\n  if (isServerSide()) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n"],"names":["lazyLoadIcon","iconName","lazy","__variableDynamicImportRuntimeHelper","LazyIcon","size","IconSize","rest","icon","useMemo","isServerSide","fallback","React","ErrorBoundary","Suspense","Icon","LazyIcon$1"],"mappings":";;;;;;AAYa,MAAAA,IAAe,CAACC,MAC3BC,EAAc,MAAMC,EAAkC,uBAAA,OAAA,EAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,qCAAA,MAAA,OAAA,kCAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,mCAAA,MAAA,OAAA,gCAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,qCAAA,MAAA,OAAA,kCAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,mCAAA,MAAA,OAAA,gCAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,mCAAA,MAAA,OAAA,gCAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,mCAAA,MAAA,OAAA,gCAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,0CAAA,MAAA,OAAA,uCAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,qCAAA,MAAA,OAAA,kCAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,oBAAA,MAAA,OAAA,iBAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,kCAAA,MAAA,OAAA,+BAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,gCAAA,MAAA,OAAA,6BAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,GAAA,8BAAA,MAAA,OAAA,2BAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,4BAAA,MAAA,OAAA,yBAAA,GAAA,0BAAA,MAAA,OAAA,uBAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,sBAAA,MAAA,OAAA,mBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,2BAAA,MAAA,OAAA,wBAAA,GAAA,iCAAA,MAAA,OAAA,8BAAA,GAAA,uBAAA,MAAA,OAAA,oBAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,6BAAA,MAAA,OAAA,0BAAA,GAAA,kBAAA,MAAA,OAAA,eAAA,GAAA,yBAAA,MAAA,OAAA,sBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,wBAAA,MAAA,OAAA,qBAAA,GAAA,qBAAA,MAAA,OAAA,kBAAA,EAAA,CAAA,GAAA,YAAAF,CAAA,MAAA,CAAA,GAE3CG,IAAoC,CAAC,EAAE,UAAAH,GAAU,MAAAI,IAAOC,EAAS,OAAO,GAAGC,QAAW;AAC3F,QAAAC,IAAOC,EAAQ,MAAMT,EAAaC,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAE7D,MAAIS;AACK,WAAA;AAGT,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUP,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAIZ,yCACGQ,GAAc,EAAA,UAAAF,GAAoB,OAAOV,qCACvCa,GAAS,EAAA,UAAAH,EAAA,GACPC,gBAAAA,EAAA,cAAAG,GAAA,EAAK,SAASP,GAAM,MAAAH,GAAa,GAAGE,GAAM,CAC7C,CACF;AAEJ,GAEAS,IAAeZ;"}
+{"version":3,"file":"LazyIcon.js","sources":["../../../src/components/LazyIcon/LazyIcon.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { isServerSide } from './utils';\nimport Icon, { BaseIconProps, IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> =>\n  lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n\n  if (isServerSide()) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n"],"names":["lazyLoadIcon","iconName","lazy","__variableDynamicImportRuntimeHelper","LazyIcon","size","IconSize","rest","icon","useMemo","isServerSide","fallback","React","ErrorBoundary","Suspense","Icon","LazyIcon$1"],"mappings":";;;;;;AAYa,MAAAA,IAAe,CAACC,MAC3BC,EAAc,MAAMC,2/mBAAkC,YAAAF,CAAA,MAAA,CAAA,GAE3CG,IAAoC,CAAC,EAAE,UAAAH,GAAU,MAAAI,IAAOC,EAAS,OAAO,GAAGC,QAAW;AAC3F,QAAAC,IAAOC,EAAQ,MAAMT,EAAaC,CAAQ,GAAG,CAACA,CAAQ,CAAC;AAE7D,MAAIS;AACK,WAAA;AAGT,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUP,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAIZ,yCACGQ,GAAc,EAAA,UAAAF,GAAoB,OAAOV,qCACvCa,GAAS,EAAA,UAAAH,EAAA,GACPC,gBAAAA,EAAA,cAAAG,GAAA,EAAK,SAASP,GAAM,MAAAH,GAAa,GAAGE,GAAM,CAC7C,CACF;AAEJ,GAEAS,IAAeZ;"}