@helsenorge/designsystem-react 2.16.1 → 3.0.0

package/Checkbox.js

@@ -1,2 +1,2 @@
-import c,{useState as D,useEffect as H}from"react";import o from"classnames";import{a as L}from"./uuid.js";import M from"./components/Icons/Check.js";import{Icon as T}from"./components/Icons/Icon.js";import{FormMode as p,FormVariant as V,AnalyticsId as X,IconSize as j}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import e from"./components/Checkbox/styles.module.scss";const Z=c.forwardRef((C,y)=>{const{className:w,checked:n=!1,disabled:r,label:d,inputId:b=L(),mode:i,name:g=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:E,required:I,onChange:f,...S}=C,[l,u]=D(n),m=x||i===p.oninvalid,h=i===p.ondark,_=i===p.onblueberry,k=v===V.bigform,F=o(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),z=o(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:_,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),R=o(e.checkbox,w),W=o(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:l,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:_,[e["checkbox__icon-wrapper--invalid"]]:m}),q=o(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let s=t("blueberry",500);r&&(s=t("neutral",400)),h&&(s=t("blueberry",200)),m&&(s=t("cherry",500)),H(()=>{u(n)},[n]);const A=B=>{f&&f(B),u(!l)};return c.createElement("div",{"data-testid":E,"data-analyticsid":X.Checkbox,className:F},a&&c.createElement("p",{className:q},a),c.createElement("label",{htmlFor:b,className:z},c.createElement("input",{id:b,name:g,className:R,type:"checkbox",checked:l,disabled:r,value:N,ref:y,"aria-invalid":x,required:I,onChange:A,...S}),c.createElement("span",{className:W},l&&c.createElement(T,{color:s,className:e.checkbox__icon,svgIcon:M,size:j.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))});export{Z as C};
+import c,{useState as D,useEffect as H}from"react";import o from"classnames";import{FormMode as p,FormVariant as L,AnalyticsId as M,IconSize as T}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import{a as V}from"./uuid.js";import{Icon as X}from"./components/Icons/Icon.js";import $ from"./components/Icons/Check.js";import e from"./components/Checkbox/styles.module.scss";const j=c.forwardRef((_,y)=>{const{className:w,checked:n=!1,disabled:r,label:d,inputId:b=V(),mode:i,name:g=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:E,required:I,onChange:f,...S}=_,[s,u]=D(n),m=x||i===p.oninvalid,h=i===p.ondark,C=i===p.onblueberry,k=v===L.bigform,F=o(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),z=o(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:C,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),R=o(e.checkbox,w),W=o(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:s,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:C,[e["checkbox__icon-wrapper--invalid"]]:m}),q=o(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let l=t("blueberry",500);r&&(l=t("neutral",400)),h&&(l=t("blueberry",200)),m&&(l=t("cherry",500)),H(()=>{u(n)},[n]);const A=B=>{f&&f(B),u(!s)};return c.createElement("div",{"data-testid":E,"data-analyticsid":M.Checkbox,className:F},a&&c.createElement("p",{className:q},a),c.createElement("label",{htmlFor:b,className:z},c.createElement("input",{id:b,name:g,className:R,type:"checkbox",checked:s,disabled:r,value:N,ref:y,"aria-invalid":x,required:I,onChange:A,...S}),c.createElement("span",{className:W},s&&c.createElement(X,{color:l,className:e.checkbox__icon,svgIcon:$,size:T.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))}),Z=j;export{Z as C,j as a};
 //# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport Check from '../Icons/Check';\nimport Icon from '../Icons';\nimport { getColor } from '../../theme/currys/color';\n\nimport checkboxStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","onChange","rest","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","AnalyticsId","Icon","Check","IconSize"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,EACA,SAAAC,KACGC,CACD,EAAAjB,EACE,CAACkB,EAAWC,CAAY,EAAIC,EAASjB,CAAO,EAC5CkB,EAAUT,GAASJ,IAASc,EAAS,UACrCC,EAASf,IAASc,EAAS,OAC3BE,EAAchB,IAASc,EAAS,YAChCG,EAAUf,IAAYgB,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,oBAAqB,CAC5E,CAACA,EAAe,iCAAkClB,EAClD,CAACkB,EAAe,8BAA+BJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,kBAAmB,CACxE,CAACA,EAAe,6BAA8BzB,EAC9C,CAACyB,EAAe,4BAA6BN,EAC7C,CAACM,EAAe,iCAAkCL,EAClD,CAACK,EAAe,4BAA6BR,EAC7C,CAACQ,EAAe,4BAA6BJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAU3B,CAAS,EAC/D8B,EAA6BJ,EAAWC,EAAe,0BAA2B,CACtF,CAACA,EAAe,oCAAqCX,EACrD,CAACW,EAAe,qCAAsCzB,EACtD,CAACyB,EAAe,oCAAqCN,EACrD,CAACM,EAAe,yCAA0CL,EAC1D,CAACK,EAAe,oCAAqCR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,mBAAoB,CAChE,CAACA,EAAe,6BAA8BJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC/B,IAAsB8B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAahB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAkC,EAAmBC,GAAiD,CACpEtB,GACFA,EAASsB,CAAC,EAGZnB,EAAa,CAACD,CAAS,CAAA,EAGzB,OACGnB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkByB,EAAY,SAAU,UAAWZ,CAAA,EAC1EhB,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAWkC,CAAc,EAAAtB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWwB,CAAA,EACjC/B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWsB,EACX,KAAK,WACL,QAASb,EACT,SAAAd,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,EACA,SAAUsB,EACT,GAAGpB,CAAA,CACN,EACClB,EAAA,cAAA,OAAA,CAAK,UAAWiC,CAAA,EACdd,GAAcnB,EAAA,cAAAyC,EAAA,CAAK,MAAON,EAAW,UAAWL,EAAe,eAAmB,QAASY,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACC3C,EAAA,cAAA,OAAA,CAAK,UAAW8B,EAAe,uBAAA,EAA0BxB,CAAM,CAClE,CACF,CAEJ,CAAC"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icons';\nimport Check from '../Icons/Check';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","onChange","rest","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","AnalyticsId","Icon","Check","IconSize","Checkbox$1"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACD,EAAAjB,EACE,CAACkB,EAAWC,CAAY,EAAIC,EAASjB,CAAO,EAC5CkB,EAAUT,GAASJ,IAASc,EAAS,UACrCC,EAASf,IAASc,EAAS,OAC3BE,EAAchB,IAASc,EAAS,YAChCG,EAAUf,IAAYgB,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,kBAAkB,EAAG,CAC5E,CAACA,EAAe,8BAA8B,CAAC,EAAGlB,EAClD,CAACkB,EAAe,2BAA2B,CAAC,EAAGJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,gBAAgB,EAAG,CACxE,CAACA,EAAe,0BAA0B,CAAC,EAAGzB,EAC9C,CAACyB,EAAe,yBAAyB,CAAC,EAAGN,EAC7C,CAACM,EAAe,8BAA8B,CAAC,EAAGL,EAClD,CAACK,EAAe,yBAAyB,CAAC,EAAGR,EAC7C,CAACQ,EAAe,yBAAyB,CAAC,EAAGJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAU3B,CAAS,EAC/D8B,EAA6BJ,EAAWC,EAAe,wBAAwB,EAAG,CACtF,CAACA,EAAe,iCAAiC,CAAC,EAAGX,EACrD,CAACW,EAAe,kCAAkC,CAAC,EAAGzB,EACtD,CAACyB,EAAe,iCAAiC,CAAC,EAAGN,EACrD,CAACM,EAAe,sCAAsC,CAAC,EAAGL,EAC1D,CAACK,EAAe,iCAAiC,CAAC,EAAGR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,iBAAiB,EAAG,CAChE,CAACA,EAAe,0BAA0B,CAAC,EAAGJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC/B,IAAsB8B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAahB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAkC,EAAmBC,GAAiD,CACpEtB,GACFA,EAASsB,CAAC,EAGZnB,EAAa,CAACD,CAAS,CAAA,EAIvB,OAAAnB,EAAA,cAAC,OAAI,cAAae,EAAQ,mBAAkByB,EAAY,SAAU,UAAWZ,CAC1E,EAAAhB,mBAAc,IAAE,CAAA,UAAWsB,GAActB,CAAU,kBACnD,QAAM,CAAA,QAASL,EAAS,UAAWwB,CAClC,EAAA/B,EAAA,cAAC,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWsB,EACX,KAAK,WACL,QAASb,EACT,SAAAd,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,EACA,SAAUsB,EACT,GAAGpB,CAAA,CAAA,EAENlB,EAAA,cAAC,OAAK,CAAA,UAAWiC,CACd,EAAAd,GAAcnB,EAAA,cAAAyC,EAAA,CAAK,MAAON,EAAW,UAAWL,EAAe,eAAmB,QAASY,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACA3C,EAAA,cAAC,OAAK,CAAA,UAAW8B,EAAe,sBAAsB,CAAI,EAAAxB,CAAM,CAClE,CACF,CAEJ,CAAC,EAEDsC,EAAe7C"}

package/Close.js

@@ -1,2 +1,2 @@
-import e from"react";import{palette as s}from"./theme/palette.js";import{Icon as r}from"./components/Icons/Icon.js";import{AnalyticsId as i}from"./constants.js";import m from"./components/Icons/X.js";import o from"./components/Close/styles.module.scss";import{useBreakpoint as c,Breakpoint as n}from"./hooks/useBreakpoint.js";import b from"classnames";const z=t=>{const a=c()===n.xs||t.small?38:48,l=b(o.close,{[o["close--small"]]:t.small});return e.createElement("button",{"data-testid":t.testId,"data-analyticsid":i.Close,className:l,"aria-label":t.ariaLabel||"Lukk",onClick:t.onClick,type:"button"},e.createElement(r,{svgIcon:m,color:s.blueberry600,size:a}))};export{z as C};
+import o from"react";import d from"classnames";import{AnalyticsId as b}from"./constants.js";import{useBreakpoint as u,Breakpoint as k}from"./hooks/useBreakpoint.js";import{palette as C}from"./theme/palette.js";import{Icon as y}from"./components/Icons/Icon.js";import I from"./components/Icons/X.js";import e from"./components/Close/styles.module.scss";const B=o.forwardRef(function(s,r){const{small:t,testId:a,ariaLabel:l="Lukk",onClick:i,className:n,color:c=C.blueberry600,isHovered:m}=s,p=u()===k.xs||t?38:48,f=d(e.close,{[e["close--small"]]:t},n);return o.createElement("button",{ref:r,"data-testid":a,"data-analyticsid":b.Close,className:f,"aria-label":l,onClick:i,type:"button"},o.createElement(y,{svgIcon:I,color:c,size:p,isHovered:m}))}),F=B;export{F as C};
 //# sourceMappingURL=Close.js.map

package/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icons';\nimport X from '../Icons/X';\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { AnalyticsId } from '../../constants';\nimport classNames from 'classnames';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: () => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Close = (props: CloseProps): JSX.Element => {\n  const breakpoint = useBreakpoint();\n\n  const iconSize = breakpoint === Breakpoint.xs || props.small ? 38 : 48;\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: props.small });\n\n  return (\n    <button\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={props.ariaLabel || 'Lukk'}\n      onClick={props.onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={palette.blueberry600} size={iconSize} />\n    </button>\n  );\n};\n\nexport default Close;\n"],"names":["Close","props","iconSize","useBreakpoint","Breakpoint","closeClasses","classNames","styles","React","AnalyticsId","Icon","X","palette"],"mappings":"gWAoBM,MAAAA,EAASC,GAAmC,CAGhD,MAAMC,EAFaC,MAEaC,EAAW,IAAMH,EAAM,MAAQ,GAAK,GAC9DI,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,iBAAkBN,EAAM,KAAO,CAAA,EAEvF,OACGO,EAAA,cAAA,SAAA,CACC,cAAaP,EAAM,OACnB,mBAAkBQ,EAAY,MAC9B,UAAWJ,EACX,aAAYJ,EAAM,WAAa,OAC/B,QAASA,EAAM,QACf,KAAK,QAAA,EAEJO,EAAA,cAAAE,EAAA,CAAK,QAASC,EAAG,MAAOC,EAAQ,aAAc,KAAMV,CAAU,CAAA,CACjE,CAEJ"}
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icons';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: () => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n  /** Gives hovered effect to X icon */\n  isHovered?: boolean;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600, isHovered } = props;\n  const breakpoint = useBreakpoint();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","isHovered","iconSize","useBreakpoint","Breakpoint","closeClasses","classNames","styles","AnalyticsId","Icon","X","Close$1"],"mappings":"gWA6BA,MAAMA,EAAQC,EAAM,WAAW,SAA4BC,EAAmBC,EAA4C,CAClH,KAAA,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAY,OAAQ,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAQC,EAAQ,aAAc,UAAAC,CAAA,EAAcT,EAGrGU,EAFaC,MAEaC,EAAW,IAAMV,EAAQ,GAAK,GAExDW,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,cAAc,CAAC,EAAGb,CAAM,EAAGI,CAAS,EAG1F,OAAAP,EAAA,cAAC,SAAA,CACC,IAAAE,EACA,cAAaE,EACb,mBAAkBa,EAAY,MAC9B,UAAWH,EACX,aAAYT,EACZ,QAAAC,EACA,KAAK,QAAA,kBAEJY,EAAK,CAAA,QAASC,EAAG,MAAAX,EAAc,KAAMG,EAAU,UAAAD,EAAsB,CAAA,CAG5E,CAAC,EAEDU,EAAerB"}

package/ErrorWrapper.js

@@ -1,2 +1,2 @@
-import o from"react";import a from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const d=t=>{const{errorText:r,className:s,testId:p}=t,c=a(e["error-wrapper"],s,{[e["error-wrapper--with-error"]]:r}),l=a(e["error-wrapper__errors"]);return o.createElement("div",{className:c,"data-testid":p||"error-wrapper-testid"},r&&o.createElement("p",{role:"alert",className:l},r),t.children)};export{d as E};
+import a from"react";import o from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const m=t=>{const{errorText:r,className:s,testId:p}=t,c=o(e["error-wrapper"],s,{[e["error-wrapper--with-error"]]:r}),l=o(e["error-wrapper__errors"]);return a.createElement("div",{className:c,"data-testid":p||"error-wrapper-testid"},r&&a.createElement("p",{role:"alert",className:l},r),t.children)},w=m;export{w as E,m as a};
 //# sourceMappingURL=ErrorWrapper.js.map

package/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React"],"mappings":"2GAgBO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,OAAAC,CAAA,EAAWH,EAEnCI,EAAiBC,EAAGC,EAAO,iBAAkBJ,EAAW,CAAE,CAACI,EAAO,8BAA+BL,CAAW,CAAA,EAE5GM,EAAcF,EAAGC,EAAO,wBAAwB,EAEtD,OACGE,EAAA,cAAA,MAAA,CAAI,UAAWJ,EAAgB,cAAaD,GAAU,sBAAA,EACpDF,GACEO,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,CACxB,EAAAN,CACH,EAEDD,EAAM,QACT,CAEJ"}
+{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React","ErrorWrapper$1"],"mappings":"2GAiBO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,OAAAC,CAAA,EAAWH,EAEnCI,EAAiBC,EAAGC,EAAO,eAAe,EAAGJ,EAAW,CAAE,CAACI,EAAO,2BAA2B,CAAC,EAAGL,CAAW,CAAA,EAE5GM,EAAcF,EAAGC,EAAO,uBAAuB,CAAC,EAEtD,uBACG,MAAI,CAAA,UAAWF,EAAgB,cAAaD,GAAU,sBACpD,EAAAF,GACEO,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,GACxBN,CACH,EAEDD,EAAM,QACT,CAEJ,EAEAS,EAAeV"}

package/FormGroup.js

@@ -1,2 +1,2 @@
-import r from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as x}from"./Checkbox.js";import{FormMode as C,FormVariant as N,AnalyticsId as y}from"./constants.js";import{R}from"./RadioButton.js";import{I as W}from"./Input.js";import{T as M}from"./Title.js";import{F as S}from"./FormLayout.js";import{E as B}from"./ErrorWrapper.js";import{S as A}from"./Select.js";import{isComponent as l}from"./utils/component.js";const D=r.forwardRef((t,_)=>{const{className:k,fieldsetClassName:w,mode:n=C.onwhite,variant:s=N.normal,error:m,name:o,htmlMarkup:d="fieldset",renderError:F=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,f=n===C.ondark,u=s===N.bigform,v=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},k),G=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:u}),T=i(a["form-group"]),c=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:u}),g=i(a["field-set"],w),p=e=>l(e,S)?r.cloneElement(e,{variant:s,mapHelper:p}):l(e,D)?r.cloneElement(e,{mode:n,variant:s,error:m,renderError:!1}):l(e,x)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,R)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,W)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,A)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,error:!!m}):e,E=()=>r.createElement("div",{className:T},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,p)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,p)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:_,tabIndex:-1},t.title&&r.createElement(M,{className:G,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),F?r.createElement(B,{className:I,errorText:m,testId:b},E()):E())});export{D as F};
+import r from"react";import l from"classnames";import{FormMode as C,FormVariant as N,AnalyticsId as y}from"./constants.js";import{isComponent as s}from"./utils/component.js";import{C as R}from"./Checkbox.js";import{E as W}from"./ErrorWrapper.js";import{F as M}from"./FormLayout.js";import{I as S}from"./Input.js";import{R as B}from"./RadioButton.js";import{S as A}from"./Select.js";import{T as D}from"./Title.js";import o from"./components/FormGroup/styles.module.scss";const _=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=C.onwhite,variant:n=N.normal,error:a,name:i,htmlMarkup:d="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,p=m===C.ondark,u=n===N.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:p,[o["form-group-wrapper--invalid"]]:a},k),T=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:p&&!a,[o["form-group-wrapper__title--bigform"]]:u}),x=l(o["form-group"]),c=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:p&&!a,[o["field-set__legend--bigform"]]:u}),g=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,_)?r.cloneElement(e,{mode:m,variant:n,error:a,renderError:!1}):s(e,R)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,B)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,S)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,A)?r.cloneElement(e,{name:i??e.props.name,mode:m,error:!!a}):e,E=()=>r.createElement("div",{className:x},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,f)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:T,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},E()):E())}),U=_;export{U as F,_ as a};
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\nimport { isComponent } from '../../utils/component';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}

package/FormLayout.js

@@ -1,2 +1,2 @@
-import o from"react";import l from"classnames";import e from"./components/FormLayout/styles.module.scss";import{FormVariant as h,AnalyticsId as u}from"./constants.js";var y=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(y||{});const x=o.forwardRef((t,v)=>{const{maxColumns:r="one",colMinWidth:f=300,variant:m,className:s,mapHelper:a}=t,c={"--min-col-width":`${f}px`},n=l(e["form-layout-container"],{[e["form-layout-container--bigform"]]:m===h.bigform},s),d=l(e["form-layout-child"],{[e["form-layout-child--two"]]:r==="two",[e["form-layout-child--three"]]:r==="three",[e["form-layout-child--four"]]:r==="four",[e["form-layout-child--five"]]:r==="five"});return o.createElement("div",{"data-testid":t.testId,"data-analyticsid":u.FormLayout,style:c,className:n},o.Children.map(t.children,i=>o.createElement("div",{className:d},a?a(i):i)))});export{x as F,y as a};
+import e from"react";import l from"classnames";import{FormVariant as u,AnalyticsId as h}from"./constants.js";import o from"./components/FormLayout/styles.module.scss";var y=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(y||{});const v=e.forwardRef((t,p)=>{const{maxColumns:r="one",colMinWidth:m=300,variant:s,className:f,mapHelper:a}=t,c={"--min-col-width":`${m}px`},n=l(o["form-layout-container"],{[o["form-layout-container--bigform"]]:s===u.bigform},f),d=l(o["form-layout-child"],{[o["form-layout-child--two"]]:r==="two",[o["form-layout-child--three"]]:r==="three",[o["form-layout-child--four"]]:r==="four",[o["form-layout-child--five"]]:r==="five"});return e.createElement("div",{"data-testid":t.testId,"data-analyticsid":h.FormLayout,style:c,className:n},e.Children.map(t.children,i=>e.createElement("div",{className:d},a?a(i):i)))}),g=v;export{g as F,y as a,v as b};
 //# sourceMappingURL=FormLayout.js.map

package/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child"],"mappings":"uKAOY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,OACtCK,EAA6BC,EACjCC,EAAgB,yBAChB,CACE,CAACA,EAAgB,mCAAoCN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,qBAAsB,CAC9E,CAACA,EAAgB,2BAA4BR,IAAY,MACzD,CAACQ,EAAgB,6BAA8BR,IAAY,QAC3D,CAACQ,EAAgB,4BAA6BR,IAAY,OAC1D,CAACQ,EAAgB,4BAA6BR,IAAY,MAAA,CAC3D,EAED,OACGH,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,CAAA,EACtGT,EAAM,SAAS,IAAIC,EAAM,SAAWc,GAC3Bf,EAAA,cAAA,MAAA,CAAI,UAAWa,CAAA,EAAyBN,EAAYA,EAAUQ,CAAK,EAAIA,CAAM,CACtF,CACH,CAEJ,CAAC"}
+{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child","FormLayout$1"],"mappings":"uKAQY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,OACtCK,EAA6BC,EACjCC,EAAgB,uBAAuB,EACvC,CACE,CAACA,EAAgB,gCAAgC,CAAC,EAAGN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,mBAAmB,EAAG,CAC9E,CAACA,EAAgB,wBAAwB,CAAC,EAAGR,IAAY,MACzD,CAACQ,EAAgB,0BAA0B,CAAC,EAAGR,IAAY,QAC3D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,OAC1D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,MAAA,CAC3D,EAED,uBACG,MAAI,CAAA,cAAaF,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,GACtGT,EAAM,SAAS,IAAIC,EAAM,SAAWc,GAC5Bf,EAAA,cAAC,OAAI,UAAWa,GAAyBN,EAAYA,EAAUQ,CAAK,EAAIA,CAAM,CACtF,CACH,CAEJ,CAAC,EAEDC,EAAejB"}

package/HelpBubble.js

@@ -1,2 +1,2 @@
-import v from"classnames";import r,{useRef as W,useState as K,useEffect as Q}from"react";import{AnalyticsId as Y}from"./constants.js";import{useInterval as $}from"./hooks/useInterval.js";import{useIsVisible as z}from"./hooks/useIsVisible.js";import{useLayoutEvent as S}from"./hooks/useLayoutEvent.js";import{useSize as tt}from"./hooks/useSize.js";import{mergeRefs as et}from"./utils/refs.js";import{A as ot}from"./AnchorLink.js";import{C as nt}from"./Close.js";import s from"./components/HelpBubble/styles.module.scss";const it=373,b=12,w=16,T=20,rt=4,N=12,k=(t,e,n)=>n!==l.positionautomatic?n:t.top>e.height+w?l.positionabove:l.positionbelow,H=t=>t.left+t.width/2,st=t=>document.documentElement.clientWidth-t.right+t.width/2,d=(t,e)=>H(t)-e.width/2,lt=(t,e)=>d(t,e)+e.width,bt=(t,e)=>d(t,e)>b,ct=(t,e)=>lt(t,e)<document.documentElement.clientWidth-b,ut=(t,e)=>ct(t,e)?bt(t,e)?"floating":"left":"right",R=(t,e)=>t.top-w-e.height,x=t=>t.bottom+w,at=()=>document.documentElement.clientWidth-b*2,ft=()=>document.documentElement.clientWidth>it+b*2,y=t=>t.top-w-rt,mt=t=>H(t)-T/2,pt=t=>st(t)-T/2,ht=(t,e,n)=>{const i=ut(t,e),o=k(t,e,n);return i==="left"?o===l.positionabove?"leftabove":"leftbelow":i==="right"?o===l.positionabove?"rightabove":"rightbelow":o===l.positionabove?"floatingabove":"floatingbelow"},gt=(t,e,n)=>{const i=ht(t,e,n),o=ft()?void 0:at();return i==="leftabove"?{left:b,top:R(t,e),width:o}:i==="leftbelow"?{left:b,top:x(t),width:o}:i==="rightabove"?{right:b,top:R(t,e),width:o}:i==="rightbelow"?{right:b,top:x(t),width:o}:i==="floatingbelow"?{left:d(t,e),top:x(t),width:o}:{left:d(t,e),top:R(t,e),width:o}},dt=(t,e,n)=>{const i=mt(e),o=pt(e),u=t.left+N,c=t.right+N;return t.right?n===l.positionabove?{right:o>c?o:c,top:y(e)}:{right:o>c?o:c,top:e.bottom}:n===l.positionabove?{left:i>u?i:u,top:y(e)}:{left:i>u?i:u,top:e.bottom}};var l=(t=>(t.positionautomatic="positionautomatic",t.positionbelow="positionbelow",t.positionabove="positionabove",t))(l||{});const wt=r.forwardRef((t,e)=>{const{helpBubbleId:n,children:i,controllerRef:o,className:u="",variant:c="positionautomatic",showBubble:m,noCloseButton:B,linkText:p="Mer hjelp",linkUrl:C,onLinkClick:E,onClose:O,closeAriaLabel:F,role:L,testId:X}=t,A=W(null),V=W(null),h=tt(A),[a,D]=K(),M=z(o,0),P=()=>{var I;D((I=o.current)==null?void 0:I.getBoundingClientRect())};$(P,500),S(P,["scroll","resize"],10),Q(()=>{m&&P()},[m]);const f=L==="tooltip";if(!m&&!f)return null;const U=v(s.helpbubble,{[s["helpbubble--visible"]]:!f&&M||f&&m},u),g=a&&h&&k(a,h,c),G=v(s.helpbubble__arrow,{[s["helpbubble__arrow--over"]]:g==="positionbelow",[s["helpbubble__arrow--under"]]:g==="positionabove"}),j=v(s.helpbubble__content,{[s["helpbubble__content--close"]]:!B&&!f}),_=a&&h&&gt(a,h,c),Z=_&&a&&g&&dt(_,a,g),q=()=>{if(!f){if(E&&p)return r.createElement("button",{className:s.helpbubble__link,onClick:E,type:"button"},p);if(C&&p)return r.createElement(ot,{href:C},p)}},J=()=>{if(!(B||f))return r.createElement("div",{className:s.helpbubble__close},r.createElement(nt,{small:!0,onClick:O,ariaLabel:F}))};return r.createElement(r.Fragment,null,r.createElement("div",{id:n,ref:et([e,A]),className:U,style:_,"data-testid":X,"data-analyticsid":Y.HelpBubble,role:L},J(),r.createElement("div",{className:j},i,q())),r.createElement("div",{ref:V,className:G,style:Z}))});wt.displayName="HelpBubble";export{wt as H,l as a};
+import e from"react";import b from"classnames";import{AnalyticsId as H}from"./constants.js";import{useIsVisible as y}from"./hooks/useIsVisible.js";import{A as L}from"./AnchorLink.js";import{C as A}from"./Close.js";import{P as V,a as I}from"./PopOver.js";import l from"./components/HelpBubble/styles.module.scss";const U=V,c=e.forwardRef((o,m)=>{const{helpBubbleId:u,children:p,controllerRef:f,className:d="",showBubble:n,noCloseButton:s,linkText:r="Mer hjelp",linkUrl:a,onLinkClick:i,onClose:h,closeAriaLabel:B,role:C}=o,k=y(f,0),t=C==="tooltip";if(!n)return null;const _=b(l.helpbubble,{[l["helpbubble--visible"]]:!t&&k||t&&n},d),E=b(l.helpbubble__content,{[l["helpbubble__content--close"]]:!s&&!t}),N=()=>{if(!t){if(i&&r)return e.createElement("button",{className:l.helpbubble__link,onClick:i,type:"button"},r);if(a&&r)return e.createElement(L,{href:a},r)}},v=()=>{if(!(s||t))return e.createElement("div",{className:l.helpbubble__close},e.createElement(A,{small:!0,onClick:h,ariaLabel:B}))};return e.createElement(I,{...o,ref:m},e.createElement("div",{id:u,className:_,"data-analyticsid":H.HelpBubble},v(),e.createElement("div",{className:E},p,N())))});c.displayName="HelpBubble";const $=c;export{$ as H,U as a};
 //# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/utils.ts","../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { HelpBubbleVariant } from './HelpBubble';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof HelpBubbleVariant\n): keyof typeof HelpBubbleVariant => {\n  if (variant !== HelpBubbleVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return HelpBubbleVariant.positionabove;\n  } else {\n    return HelpBubbleVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof HelpBubbleVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\n\nexport enum HelpBubbleVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement, HelpBubbleProps>((props, ref) => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    variant = HelpBubbleVariant.positionautomatic,\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    role,\n    testId,\n  } = props;\n\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    if (showBubble) {\n      updateControllerSize();\n    }\n  }, [showBubble]);\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    { [styles['helpbubble--visible']]: (!isTooltip && controllerisVisible) || (isTooltip && showBubble) },\n    className\n  );\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\n    [styles['helpbubble__arrow--over']]: verticalPosition === HelpBubbleVariant.positionbelow,\n    [styles['helpbubble__arrow--under']]: verticalPosition === HelpBubbleVariant.positionabove,\n  });\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={helpBubbleClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={role}\n      >\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","HelpBubbleVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","HelpBubble","React","props","ref","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","role","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","AnchorLink","renderCloseButton","Close","mergeRefs","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\nimport PopOver, { PopOverVariant } from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport const HelpBubbleVariant = PopOverVariant;\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement | SVGSVGElement, HelpBubbleProps>((props, ref) => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    role,\n  } = props;\n\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    { [styles['helpbubble--visible']]: (!isTooltip && controllerisVisible) || (isTooltip && showBubble) },\n    className\n  );\n\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <PopOver {...props} ref={ref}>\n      <div id={helpBubbleId} className={helpBubbleClasses} data-analyticsid={AnalyticsId.HelpBubble}>\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n    </PopOver>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","PopOverVariant","HelpBubble","React","props","ref","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","role","controllerisVisible","useIsVisible","isTooltip","helpBubbleClasses","classNames","styles","contentClasses","renderLink","AnchorLink","renderCloseButton","Close","PopOver","AnalyticsId","HelpBubble$1"],"mappings":"wTAYO,MAAMA,EAAoBC,EAmC3BC,EAAaC,EAAM,WAA4D,CAACC,EAAOC,IAAQ,CAC7F,KAAA,CACJ,aAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,cAAAC,EACA,SAAAC,EAAW,YACX,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,eAAAC,EACA,KAAAC,CACE,EAAAb,EAEEc,EAAsBC,EAAaX,EAAe,CAAC,EACnDY,EAAYH,IAAS,UAE3B,GAAI,CAACP,EACI,OAAA,KAGT,MAAMW,EAAoBC,EACxBC,EAAO,WACP,CAAE,CAACA,EAAO,qBAAqB,CAAC,EAAI,CAACH,GAAaF,GAAyBE,GAAaV,CAAY,EACpGD,CAAA,EAGIe,EAAiBF,EAAWC,EAAO,oBAAqB,CAC5D,CAACA,EAAO,4BAA4B,CAAC,EAAG,CAACZ,GAAiB,CAACS,CAAA,CAC5D,EAEKK,EAAa,IAA+B,CAEhD,GAAI,CAAAL,EAGJ,IAAIN,GAAeF,EAEf,OAAAT,EAAA,cAAC,UAAO,UAAWoB,EAAO,iBAAkB,QAAST,EAAa,KAAK,QAAA,EACpEF,CACH,EAEJ,GAAWC,GAAWD,EACpB,OAAQT,EAAA,cAAAuB,EAAA,CAAW,KAAMb,CAAA,EAAUD,CAAS,EAC9C,EAGIe,EAAoB,IAA+B,CACvD,GAAI,EAAAhB,GAAiBS,GAGrB,OACGjB,EAAA,cAAA,MAAA,CAAI,UAAWoB,EAAO,iBACrB,EAAApB,EAAA,cAACyB,EAAM,CAAA,MAAK,GAAC,QAASb,EAAS,UAAWC,CAAgB,CAAA,CAC5D,CAAA,EAKF,OAAAb,EAAA,cAAC0B,EAAS,CAAA,GAAGzB,EAAO,IAAAC,CAAA,kBACjB,MAAI,CAAA,GAAIC,EAAc,UAAWe,EAAmB,mBAAkBS,EAAY,UAChF,EAAAH,EAAA,EACDxB,EAAA,cAAC,MAAI,CAAA,UAAWqB,GACbjB,EACAkB,EACH,CAAA,CACF,CACF,CAEJ,CAAC,EAEDvB,EAAW,YAAc,aAEzB,MAAA6B,EAAe7B"}

package/HorizontalScroll.js

@@ -1,2 +1,2 @@
-import r,{useRef as l}from"react";import e from"classnames";import{useIsVisible as n}from"./hooks/useIsVisible.js";import{useSize as z}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const a="3px",I=({children:c,childWidth:m,testId:_})=>{const t=l(null),i=l(null),s=l(null),d=n(i,1,{root:t==null?void 0:t.current,rootMargin:a},!0),h=n(s,1,{root:t==null?void 0:t.current,rootMargin:a},!0),{width:f=0}=z(t)||{},u=m>f,v=e(o.horizontalscroll__viewport,u&&o["horizontalscroll__viewport--overflow"]);return r.createElement("div",{className:o.horizontalscroll,"data-testid":_},r.createElement("div",{className:v,ref:t,tabIndex:0},r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!d&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!h&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{ref:i}),c,r.createElement("div",{ref:s})))};export{I as H};
+import r,{useRef as l}from"react";import e from"classnames";import{useIsVisible as n}from"./hooks/useIsVisible.js";import{useSize as v}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const a="3px",p=({children:c,childWidth:m,testId:_})=>{const t=l(null),i=l(null),s=l(null),d=n(i,1,{root:t==null?void 0:t.current,rootMargin:a},!0),h=n(s,1,{root:t==null?void 0:t.current,rootMargin:a},!0),{width:f=0}=v(t)||{},z=m>f,u=e(o.horizontalscroll__viewport,z&&o["horizontalscroll__viewport--overflow"]);return r.createElement("div",{className:o.horizontalscroll,"data-testid":_},r.createElement("div",{className:u,ref:t,tabIndex:0},r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!d&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!h&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{ref:i}),c,r.createElement("div",{ref:s})))},w=p;export{w as H,p as a};
 //# sourceMappingURL=HorizontalScroll.js.map

package/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps> = ({ children, childWidth, testId }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      <div className={viewportClasses} ref={viewportRef} tabIndex={0}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","React"],"mappings":"gOAOA,MAAMA,EAAqB,MAWdC,EAAoD,CAAC,CAAE,SAAAC,EAAU,WAAAC,EAAY,OAAAC,KAAa,CAC/F,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC7GW,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOY,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBX,EAAaS,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,uCAAuC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,iBAAkB,cAAab,CAAA,EACnDc,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,EAAa,SAAU,CAAA,EAC1Da,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,qCACP,CAACR,GAAiBQ,EAAO,uCAC3B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,sCACP,CAACN,GAAkBM,EAAO,uCAC5B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CAAI,IAAKX,CAAS,CAAA,EAClBL,EACAgB,EAAA,cAAA,MAAA,CAAI,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps> = ({ children, childWidth, testId }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      <div className={viewportClasses} ref={viewportRef} tabIndex={0}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","React","HorizontalScroll$1"],"mappings":"gOAUA,MAAMA,EAAqB,MAWdC,EAAoD,CAAC,CAAE,SAAAC,EAAU,WAAAC,EAAY,OAAAC,KAAa,CAC/F,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC7GW,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOY,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBX,EAAaS,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,sCAAsC,CAAC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,iBAAkB,cAAab,GACnDc,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,EAAa,SAAU,GAC3Da,EAAA,cAAC,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,mCAAmC,EAC1C,CAACR,GAAiBQ,EAAO,sCAAsC,CACjE,CAAA,CAEF,EAAAC,EAAA,cAAC,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,oCAAoC,EAC3C,CAACN,GAAkBM,EAAO,sCAAsC,CAClE,CAAA,CAAA,EAEFC,EAAA,cAAC,MAAI,CAAA,IAAKX,CAAS,CAAA,EAClBL,EACDgB,EAAA,cAAC,MAAI,CAAA,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ,EAEAW,EAAelB"}

package/Input.js

@@ -1,2 +1,2 @@
-import t,{useRef as ie,useState as ce}from"react";import d from"classnames";import{FormMode as m,FormVariant as se,IconSize as I,AnalyticsId as pe,AVERAGE_CHARACTER_WIDTH_PX as de}from"./constants.js";import{a as me}from"./uuid.js";import{Icon as ue}from"./components/Icons/Icon.js";import{getColor as M}from"./theme/currys/color.js";import{useBreakpoint as be,Breakpoint as he}from"./hooks/useBreakpoint.js";import{E as fe}from"./ErrorWrapper.js";import{M as we}from"./MaxCharacters.js";import e from"./components/Input/styles.module.scss";var Ce=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r.date="date",r.time="time",r))(Ce||{});const ge=(r,i,u)=>{const c=i?"1.5rem":"2rem",b=i?`${u}px`:"0px",h="4px";return`calc(${r*de}px + ${c} + ${b} + ${h})`},$e=t.forwardRef((r,i)=>{var y;const{className:u,defaultValue:c,placeholder:b,type:h="text",inputId:x=me(),labelId:f,name:z,transparent:B=!1,icon:n,iconRight:w,mode:o,variant:D,label:E,error:H,errorText:_,testId:V,disabled:l,readOnly:L,autoComplete:X,afterLabelChildren:v,afterInputChildren:q,belowLabelChildren:k,width:W,required:G,onChange:R,onKeyDown:K,autoFocus:O,maxCharacters:s,maxText:P,...j}=r,J=be(),p=ie(null),[N,Q]=ce(c||""),S=o===m.ondark,U=o===m.onblueberry,Y=!!s&&N.toString().length>s,C=o===m.oninvalid||!!_||!!H||Y,g=D===se.bigform,Z=B&&o!==m.ondark&&!C,T=d(e["input-wrapper"],u),ee=d(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:S,[e["input-wrapper__label-wrapper--disabled"]]:l}),re=d(e["content-wrapper"],{[e["content-wrapper--transparent"]]:Z,[e["content-wrapper--on-blueberry"]]:U,[e["content-wrapper--on-dark"]]:S,[e["content-wrapper--invalid"]]:C,[e["content-wrapper--bigform"]]:g,[e["content-wrapper--disabled"]]:l,[e["content-wrapper--with-icon"]]:n}),te=d(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:g,[e["content-wrapper__input--disabled"]]:l}),ae=l?M("neutral",500):M("black"),A=J===he.xs||!g?I.XSmall:I.Small,F=()=>n!==void 0?t.createElement(ue,{color:ae,size:A,svgIcon:n}):null,ne=()=>{if(p&&p.current&&n){const a=w?0:1;p.current.children[a].focus()}},oe=a=>{Q(a.target.value)},le=a=>{R&&R(a),oe(a)},$=W?ge(W,!!n,A):void 0;return t.createElement(fe,{errorText:_},t.createElement("div",{"data-testid":V,"data-analyticsid":pe.Input,className:T},E&&t.createElement("div",{className:ee},t.createElement("label",{id:f!=null?f:void 0,htmlFor:x},E),v&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},v)),k&&t.createElement("div",null,k),t.createElement("div",{onClick:ne,ref:p,className:re,style:{maxWidth:$}},!w&&F(),t.createElement("input",{onChange:le,onKeyDown:K,name:z,type:h,defaultValue:c,id:x,className:te,ref:i,"aria-labelledby":(y=r["aria-labelledby"])!=null?y:void 0,"aria-invalid":!!C,disabled:l,placeholder:b,readOnly:L,autoComplete:X||"off",required:G,autoFocus:O,...j}),w&&F()),s&&t.createElement(we,{maxCharacters:s,length:N.toString().length,maxText:P,mode:o,maxWidth:$}),q))});export{$e as I,Ce as a};
+import t,{useRef as le,useState as ie}from"react";import d from"classnames";import{FormMode as m,FormVariant as ce,IconSize as A,AnalyticsId as se,AVERAGE_CHARACTER_WIDTH_PX as pe}from"./constants.js";import{useBreakpoint as de,Breakpoint as me}from"./hooks/useBreakpoint.js";import{getColor as F}from"./theme/currys/color.js";import{a as ue}from"./uuid.js";import{E as be}from"./ErrorWrapper.js";import{Icon as he}from"./components/Icons/Icon.js";import{M as fe}from"./MaxCharacters.js";import e from"./components/Input/styles.module.scss";var we=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r.date="date",r.time="time",r))(we||{});const Ce=(r,i,u)=>{const c=i?"1.5rem":"2rem",b=i?`${u}px`:"0px",h="4px";return`calc(${r*pe}px + ${c} + ${b} + ${h})`},ge=t.forwardRef((r,i)=>{const{className:u,defaultValue:c,placeholder:b,type:h="text",inputId:g=ue(),labelId:y,name:M,transparent:z=!1,icon:n,iconRight:f,mode:o,variant:B,label:x,error:D,errorText:E,testId:H,disabled:l,readOnly:V,autoComplete:L,afterLabelChildren:_,afterInputChildren:X,belowLabelChildren:v,width:k,required:q,onChange:W,onKeyDown:G,autoFocus:K,maxCharacters:s,maxText:O,...P}=r,j=de(),p=le(null),[R,J]=ie(c||""),I=o===m.ondark,Q=o===m.onblueberry,U=!!s&&R.toString().length>s,w=o===m.oninvalid||!!E||!!D||U,C=B===ce.bigform,Y=z&&o!==m.ondark&&!w,Z=d(e["input-wrapper"],u),T=d(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:I,[e["input-wrapper__label-wrapper--disabled"]]:l}),ee=d(e["content-wrapper"],{[e["content-wrapper--transparent"]]:Y,[e["content-wrapper--on-blueberry"]]:Q,[e["content-wrapper--on-dark"]]:I,[e["content-wrapper--invalid"]]:w,[e["content-wrapper--bigform"]]:C,[e["content-wrapper--disabled"]]:l,[e["content-wrapper--with-icon"]]:n}),re=d(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:C,[e["content-wrapper__input--disabled"]]:l}),te=l?F("neutral",500):F("black"),N=j===me.xs||!C?A.XSmall:A.Small,S=()=>n!==void 0?t.createElement(he,{color:te,size:N,svgIcon:n}):null,ae=()=>{if(p&&p.current&&n){const a=f?0:1;p.current.children[a].focus()}},ne=a=>{J(a.target.value)},oe=a=>{W&&W(a),ne(a)},$=k?Ce(k,!!n,N):void 0;return t.createElement(be,{errorText:E},t.createElement("div",{"data-testid":H,"data-analyticsid":se.Input,className:Z},x&&t.createElement("div",{className:T},t.createElement("label",{id:y??void 0,htmlFor:g},x),_&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},_)),v&&t.createElement("div",null,v),t.createElement("div",{onClick:ae,ref:p,className:ee,style:{maxWidth:$}},!f&&S(),t.createElement("input",{onChange:oe,onKeyDown:G,name:M,type:h,defaultValue:c,id:g,className:re,ref:i,"aria-labelledby":r["aria-labelledby"]??void 0,"aria-invalid":!!w,disabled:l,placeholder:b,readOnly:V,autoComplete:L||"off",required:q,autoFocus:K,...P}),f&&S()),s&&t.createElement(fe,{maxCharacters:s,length:R.toString().length,maxText:O,mode:o,maxWidth:$}),X))}),Ae=ge;export{Ae as I,we 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, { useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\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-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\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  /** label id */\n  labelId?: 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;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\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 label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: 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    inputId = uuid(),\n    labelId,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    afterInputChildren,\n    belowLabelChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(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 bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\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}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label id={labelId ?? undefined} htmlFor={inputId}>\n              {label}\n            </label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={onChangeHandler}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\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\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","inputId","uuid","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","FormMode","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","_a","MaxCharacters"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\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-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\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  /** label id */\n  labelId?: 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;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\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 label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: 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    inputId = uuid(),\n    labelId,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    afterInputChildren,\n    belowLabelChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(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 bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    setInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\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}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label id={labelId ?? undefined} htmlFor={inputId}>\n              {label}\n            </label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={onChangeHandler}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\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\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","inputId","uuid","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","FormMode","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","MaxCharacters","Input$1"],"mappings":"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"}

package/ListHeader.js

@@ -1,2 +1,2 @@
-import a from"react";import m from"classnames";import{a as y,A as z}from"./Avatar.js";import{B as A}from"./Badge.js";import{L as k}from"./ListHeaderText.js";import t from"./components/ListHeader/styles.module.scss";import{useBreakpoint as B,Breakpoint as R}from"./hooks/useBreakpoint.js";import{Icon as w}from"./components/Icons/Icon.js";import{IconSize as v}from"./constants.js";import{isComponent as C}from"./utils/component.js";const P=(o,_,d,c,s,l)=>{if(C(o,u))return a.cloneElement(o,{chevronIcon:d,icon:l,isHovered:c,size:s});if(o)return a.createElement(u,{titleHtmlMarkup:_,chevronIcon:d,icon:l,isHovered:c,size:s},o)},E=(o,_=!1)=>{var f,g,h,n;let d,c;const s=[],l=[],i=[];a.Children.forEach(o,e=>{e===null||typeof e>"u"||(C(e,z)?d=e:C(e,k)?s.push(e):C(e,A)?c=e:typeof e=="string"?l.push(e):i.push(e))});const p=d!==void 0||s.length>0||c!==void 0&&l.length>0,r=i.length===0||typeof((g=(f=i[0])==null?void 0:f.props)==null?void 0:g.children)>"u";return _||p||r?{avatarChild:d,listHeaderTextChildren:s,badgeChild:c,stringChildren:l,remainingChildren:i}:E((n=(h=i[0])==null?void 0:h.props)==null?void 0:n.children,!0)},u=a.forwardRef((o,_)=>{const{className:d="",titleHtmlMarkup:c="h2",chevronIcon:s,children:l,icon:i,isHovered:p,size:r,testId:f}=o,g=B(),h=r!=="small"&&!!(s||i),n=typeof l=="string",e=E(l),b=e.avatarChild||e.listHeaderTextChildren&&e.listHeaderTextChildren.length>0||e.remainingChildren&&e.remainingChildren.length>0,N=m(t["list-header"],{[t["list-header--for-element-content"]]:!n,[t["list-header--top-align-content"]]:b},d),x=m(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:n,[t["list-header__badge--right"]]:!n,[t["list-header__badge--"+r]]:!n&&r}),H=m(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:n,[t["list-header__chevron--"+r]]:!n&&r}),S=m(t["list-header__content"],{[t["list-header__content--string"]]:n,[t["list-header__content--element"]]:!n,[t["list-header__content--spacing"]]:!e.avatarChild&&!i}),I=m(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:n,[t["list-header__icon--for-element-content"]]:!n,[t["list-header__icon--for-element-content--"+r]]:!n&&r}),L=m(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:n,[t["list-header__avatar--for-element-content"]]:!n,[t["list-header__avatar--for-element-content--"+r]]:!n&&r}),T=c;return a.createElement("div",{"data-testid":f,className:N},h&&i&&a.createElement("span",{className:I},a.cloneElement(i,{size:g===R.xs?v.XSmall:v.Small,isHovered:p})),r!=="small"&&e.avatarChild&&a.createElement("span",{className:L},a.cloneElement(e.avatarChild,{size:y.xsmall})),a.createElement("div",{className:S},e.listHeaderTextChildren,!!e.stringChildren.length&&a.createElement(T,{className:t["list-header__title"]},e.stringChildren),e.remainingChildren),e.badgeChild&&a.createElement("span",{className:x},e.badgeChild),h&&s&&a.createElement("span",{className:H},a.createElement(w,{svgIcon:s,isHovered:p,size:v.XSmall})))});export{u as L,E as m,P as r};
+import a from"react";import m from"classnames";import{L as y}from"./ListHeaderText.js";import{useBreakpoint as z,Breakpoint as A}from"./hooks/useBreakpoint.js";import{isComponent as C}from"./utils/component.js";import{A as k,a as B}from"./Avatar.js";import{B as R}from"./Badge.js";import{Icon as w}from"./components/Icons/Icon.js";import{IconSize as v}from"./constants.js";import t from"./components/ListHeader/styles.module.scss";const P=(o,_,d,c,s,l)=>{if(C(o,u))return a.cloneElement(o,{chevronIcon:s,icon:l,isHovered:d,size:c});if(o)return a.createElement(u,{titleHtmlMarkup:_,chevronIcon:s,icon:l,isHovered:d,size:c},o)},E=(o,_=!1)=>{var f,g,h,n;let d,c;const s=[],l=[],i=[];a.Children.forEach(o,e=>{e===null||typeof e>"u"||(C(e,k)?d=e:C(e,y)?s.push(e):C(e,R)?c=e:typeof e=="string"?l.push(e):i.push(e))});const p=d!==void 0||s.length>0||c!==void 0&&l.length>0,r=i.length===0||typeof((g=(f=i[0])==null?void 0:f.props)==null?void 0:g.children)>"u";return _||p||r?{avatarChild:d,listHeaderTextChildren:s,badgeChild:c,stringChildren:l,remainingChildren:i}:E((n=(h=i[0])==null?void 0:h.props)==null?void 0:n.children,!0)},u=a.forwardRef((o,_)=>{const{className:d="",titleHtmlMarkup:c="h2",chevronIcon:s,children:l,icon:i,isHovered:p,size:r,testId:f}=o,g=z(),h=r!=="small"&&!!(s||i),n=typeof l=="string",e=E(l),b=e.avatarChild||e.listHeaderTextChildren&&e.listHeaderTextChildren.length>0||e.remainingChildren&&e.remainingChildren.length>0,N=m(t["list-header"],{[t["list-header--for-element-content"]]:!n,[t["list-header--top-align-content"]]:b},d),x=m(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:n,[t["list-header__badge--right"]]:!n,[t["list-header__badge--"+r]]:!n&&r}),H=m(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:n,[t["list-header__chevron--"+r]]:!n&&r}),S=m(t["list-header__content"],{[t["list-header__content--string"]]:n,[t["list-header__content--element"]]:!n,[t["list-header__content--spacing"]]:!e.avatarChild&&!i}),I=m(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:n,[t["list-header__icon--for-element-content"]]:!n,[t["list-header__icon--for-element-content--"+r]]:!n&&r}),L=m(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:n,[t["list-header__avatar--for-element-content"]]:!n,[t["list-header__avatar--for-element-content--"+r]]:!n&&r}),T=c;return a.createElement("div",{"data-testid":f,className:N},h&&i&&a.createElement("span",{className:I},a.cloneElement(i,{size:g===A.xs?v.XSmall:v.Small,isHovered:p})),r!=="small"&&e.avatarChild&&a.createElement("span",{className:L},a.cloneElement(e.avatarChild,{size:B.xsmall})),a.createElement("div",{className:S},e.listHeaderTextChildren,!!e.stringChildren.length&&a.createElement(T,{className:t["list-header__title"]},e.stringChildren),e.remainingChildren),e.badgeChild&&a.createElement("span",{className:x},e.badgeChild),h&&s&&a.createElement("span",{className:H},a.createElement(w,{svgIcon:s,isHovered:p,size:v.XSmall})))});export{u as L,E as m,P as r};
 //# sourceMappingURL=ListHeader.js.map

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\nimport { TitleTags } from '../Title';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  chevronIcon: SvgIcon,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>>;\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>> = [];\n  const stringChildren: Array<string> = [];\n  const remainingChildren: Array<any> = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n  return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {!!mappedChildren.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren.remainingChildren}\n      </div>\n\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>>;\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>> = [];\n  const stringChildren: Array<string> = [];\n  const remainingChildren: Array<any> = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n  return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {!!mappedChildren.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren.remainingChildren}\n      </div>\n\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}

package/ListHeaderText.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import{S as E}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const C=e.forwardRef((m,h)=>{const{firstText:l,firstTextEmphasised:n=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:p=!1,statusDotVariant:r,className:c="",testId:i,titleHtmlMarkup:d="span"}=m,x=s(c,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:p}),f=s({[t["text-wrapper__text--emphasised"]]:n}),T=s({[t["text-wrapper__text--emphasised"]]:o}),u=d;return e.createElement("div",{"data-testid":i,className:x},r!==void 0&&e.createElement("span",null,e.createElement(E,{text:"",variant:r})),e.createElement(u,{className:t["list-header__title"]},e.createElement("span",{className:f},l),a&&e.createElement("span",{className:T},a)))});export{C as L};
+import e from"react";import s from"classnames";import{S as E}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const h=e.forwardRef((m,N)=>{const{firstText:l,firstTextEmphasised:n=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:p=!1,statusDotVariant:r,className:c="",testId:i,titleHtmlMarkup:d="span"}=m,x=s(c,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:p}),f=s({[t["text-wrapper__text--emphasised"]]:n}),T=s({[t["text-wrapper__text--emphasised"]]:o}),u=d;return e.createElement("div",{"data-testid":i,className:x},r!==void 0&&e.createElement("span",null,e.createElement(E,{text:"",variant:r})),e.createElement(u,{className:t["list-header__title"]},e.createElement("span",{className:f},l),a&&e.createElement("span",{className:T},a)))}),C=h;export{C as L,h as a};
 //# sourceMappingURL=ListHeaderText.js.map

package/ListHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from '../styles.module.scss';\nimport { TitleTags } from '../../Title';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <div data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </div>\n  );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,gBAAiB,CACrE,CAACA,EAAO,4BAA6BP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,mCAAoCV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,mCAAoCR,CAAA,CAC7C,EACKW,EAAYN,EAElB,OACGX,EAAA,cAAA,MAAA,CAAI,cAAaU,EAAQ,UAAWE,CAAA,EAClCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,KACEA,EAAA,cAAAkB,EAAA,CAAU,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,qBAAA,EAC1Bd,EAAA,cAAA,OAAA,CAAK,UAAWe,CAAgC,EAAAZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAA,EAAiCX,CAAW,CAC9E,CACF,CAEJ,CAAC"}
+{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <div data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </div>\n  );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot","ListHeaderText$1"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,cAAc,EAAG,CACrE,CAACA,EAAO,yBAAyB,CAAC,EAAGP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,gCAAgC,CAAC,EAAGV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,gCAAgC,CAAC,EAAGR,CAAA,CAC7C,EACKW,EAAYN,EAElB,uBACG,MAAI,CAAA,cAAaD,EAAQ,UAAWE,GAClCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,qBACEkB,EAAU,CAAA,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,oBAAoB,CAC/C,EAAAd,EAAA,cAAC,QAAK,UAAWe,GAAgCZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAiC,EAAAX,CAAW,CAC9E,CACF,CAEJ,CAAC,EAEDc,EAAepB"}

package/MaxCharacters.js

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