@helsenorge/designsystem-react 3.1.5 → 4.1.0

package/Checkbox.js

@@ -1,2 +1,2 @@
-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};
+import b,{useState as M,useEffect as O}from"react";import n from"classnames";import{FormMode as l,FormVariant as V,AnalyticsId as X,IconSize as $}from"./constants.js";import{usePseudoClasses as J}from"./hooks/usePseudoClasses.js";import{getColor as h}from"./theme/currys/color.js";import{a as K}from"./uuid.js";import{Icon as Q}from"./components/Icons/Icon.js";import U from"./components/Icons/Check.js";import{g as Y,r as Z}from"./Label.js";import e from"./components/Checkbox/styles.module.scss";const y=b.forwardRef((p,v)=>{const{className:I,checked:k=!1,disabled:r,label:m,inputId:d=K(),mode:i=l.onwhite,name:N=d,variant:E,errorText:s,error:x=!!s,value:S=Y(m),testId:F,required:L,onChange:f,...T}=p,[o,g]=M(k),w=i===l.onwhite,u=i===l.ongrey,C=i===l.onblueberry,a=x||i===l.oninvalid,t=i===l.ondark,c=E===V.bigform,{refObject:W,isFocused:z}=J(v),A=n(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:s,[e["checkbox-wrapper--bigform"]]:c}),P=n(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:t,[e["checkbox-label--bigform"]]:c,[e["checkbox-label__big-form--checked"]]:c&&o,[e["checkbox-label__big-form--focus"]]:c&&z,[e["checkbox-label__big-form--on-white"]]:c&&w,[e["checkbox-label__big-form--on-grey"]]:c&&u,[e["checkbox-label__big-form--on-blueberry"]]:c&&C,[e["checkbox-label__big-form--on-invalid"]]:c&&a,[e["checkbox-label__big-form--disabled"]]:c&&r}),R=n(e.checkbox,I),j=n(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--on-white"]]:w,[e["checkbox__icon-wrapper--on-grey"]]:u,[e["checkbox__icon-wrapper--on-invalid"]]:a,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper__regular--checked"]]:!c&&o,[e["checkbox__icon-wrapper__regular--invalid"]]:!c&&o&&a,[e["checkbox__icon-wrapper__regular--on-dark"]]:!c&&o&&t,[e["checkbox__icon-wrapper__big-form--checked"]]:c&&o,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&a,[e["checkbox__icon-wrapper--on-dark"]]:t,[e["checkbox__icon-wrapper--on-blueberry"]]:C,[e["checkbox__icon-wrapper--invalid"]]:a,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--disabled"]]:r&&c&&o,[e["checkbox__icon-wrapper__big-form--checked--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--checked--disabled"]]:r&&c&&o}),q=n(e["checkbox-label__text"],{[e["checkbox-label__text__big-form--checked"]]:c&&o,[e["checkbox-label__text__big-form--invalid"]]:c&&o&&a,[e["checkbox-label__text--on-dark"]]:t,[e["checkbox-label__text--disabled"]]:r}),B=n(e["checkbox-errors"]);let _=h("white");(t||c&&o)&&(_=h("blueberry",900)),a&&c&&o&&(_=h("white")),r&&(_=h("neutral",400)),O(()=>{g(k)},[k]);const D=H=>{f&&f(H),g(!o)},G=()=>b.createElement(b.Fragment,null,b.createElement("input",{id:d,name:N,className:R,type:"checkbox",checked:o,disabled:r,value:S,ref:W,"aria-describedby":p["aria-describedby"]??void 0,"aria-invalid":x,required:L,onChange:D,...T}),b.createElement("span",{className:j},o&&b.createElement(Q,{color:_,className:e.checkbox__icon,svgIcon:U,size:$.XSmall})));return b.createElement("div",{"data-testid":F,"data-analyticsid":X.Checkbox,className:A},s&&b.createElement("p",{className:B},s),Z(m,G(),d,i,r,P,q,e["checkbox-sublabel-wrapper"],c))});y.displayName="Checkbox";const se=y;export{se as C,y 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';\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"}
+{"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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icons';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\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 = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const { refObject, isFocused } = usePseudoClasses(ref as React.RefObject<HTMLInputElement>);\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--bigform']]: bigform,\n    [checkboxStyles['checkbox-label__big-form--checked']]: bigform && isChecked,\n    [checkboxStyles['checkbox-label__big-form--focus']]: bigform && isFocused,\n    [checkboxStyles['checkbox-label__big-form--on-white']]: bigform && onWhite,\n    [checkboxStyles['checkbox-label__big-form--on-grey']]: bigform && onGrey,\n    [checkboxStyles['checkbox-label__big-form--on-blueberry']]: bigform && onBlueberry,\n    [checkboxStyles['checkbox-label__big-form--on-invalid']]: bigform && onInvalid,\n    [checkboxStyles['checkbox-label__big-form--disabled']]: bigform && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !bigform && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !bigform && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !bigform && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--checked']]: bigform && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--disabled']]: disabled && bigform && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--checked--invalid']]: bigform && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__big-form--checked--disabled']]: disabled && bigform && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__big-form--checked']]: bigform && isChecked,\n    [checkboxStyles['checkbox-label__text__big-form--invalid']]: bigform && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n  let iconColor = getColor('white');\n  if (onDark || (bigform && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && bigform && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 400);\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  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\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={refObject}\n          aria-describedby={props['aria-describedby'] ?? undefined}\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      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","onWhite","onGrey","onBlueberry","onInvalid","onDark","bigform","FormVariant","refObject","isFocused","usePseudoClasses","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}

package/Input.js

@@ -1,2 +1,2 @@
-import r,{useRef as le,useState as ie}from"react";import d from"classnames";import{FormMode as m,FormVariant as ce,IconSize as y,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 A}from"./theme/currys/color.js";import{a as ue}from"./uuid.js";import{E as be}from"./ErrorWrapper.js";import{Icon as fe}from"./components/Icons/Icon.js";import{M as he}from"./MaxCharacters.js";import e from"./components/Input/styles.module.scss";var we=(t=>(t.text="text",t.number="number",t.email="email",t.password="password",t.search="search",t.tel="tel",t.url="url",t.date="date",t.time="time",t))(we||{});const Ce=(t,l,u)=>{const i=l?"1.5rem":"2rem",b=l?`${u}px`:"0px",f="4px";return`calc(${t*pe}px + ${i} + ${b} + ${f})`},F=r.forwardRef((t,l)=>{const{className:u,defaultValue:i,placeholder:b,type:f="text",inputId:g=ue(),labelId:M,name:z,transparent:B=!1,icon:a,iconRight:h,mode:n,variant:D,label:x,error:V,errorText:E,testId:H,disabled:o,readOnly:L,autoComplete:X,afterLabelChildren:_,afterInputChildren:q,belowLabelChildren:v,width:k,required:G,onChange:W,onKeyDown:K,autoFocus:O,maxCharacters:c,maxText:P,...j}=t,J=de(),s=le(null),[I,Q]=ie(i||""),N=n===m.ondark,U=n===m.onblueberry,Y=!!c&&I.toString().length>c,w=n===m.oninvalid||!!E||!!V||Y,C=D===ce.bigform,Z=B&&n!==m.ondark&&!w,T=d(e["input-wrapper"],u),ee=d(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:N,[e["input-wrapper__label-wrapper--disabled"]]:o}),te=d(e["content-wrapper"],{[e["content-wrapper--transparent"]]:Z,[e["content-wrapper--on-blueberry"]]:U,[e["content-wrapper--on-dark"]]:N,[e["content-wrapper--invalid"]]:w,[e["content-wrapper--bigform"]]:C,[e["content-wrapper--disabled"]]:o,[e["content-wrapper--with-icon"]]:a}),re=d(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:C,[e["content-wrapper__input--disabled"]]:o}),ae=o?A("neutral",500):A("black"),R=J===me.xs||!C?y.XSmall:y.Small,S=()=>a!==void 0?r.createElement(fe,{color:ae,size:R,svgIcon:a}):null,ne=()=>{if(s&&s.current&&a){const p=h?0:1;s.current.children[p].focus()}},oe=p=>{W&&W(p),Q(p.target.value)},$=k?Ce(k,!!a,R):void 0;return r.createElement(be,{errorText:E},r.createElement("div",{"data-testid":H,"data-analyticsid":se.Input,className:T},x&&r.createElement("div",{className:ee},r.createElement("label",{id:M??void 0,htmlFor:g},x),_&&r.createElement("div",{className:e["input-wrapper__after-label-children"]},_)),v&&r.createElement("div",null,v),r.createElement("div",{onClick:ne,ref:s,className:te,style:{maxWidth:$}},!h&&S(),r.createElement("input",{onChange:oe,onKeyDown:K,name:z,type:f,defaultValue:i,id:g,className:re,ref:l,"aria-labelledby":t["aria-labelledby"]??void 0,"aria-invalid":!!w,disabled:o,placeholder:b,readOnly:L,autoComplete:X||"off",required:G,autoFocus:O,...j}),h&&S()),c&&r.createElement(he,{maxCharacters:c,length:I.toString().length,maxText:P,mode:n,maxWidth:$}),q))});F.displayName="Input";const $e=F;export{$e as I,we as a};
+import r,{useRef as re,useState as ne}from"react";import C from"classnames";import{FormMode as i,FormVariant as ae,IconSize as y,AnalyticsId as oe,AVERAGE_CHARACTER_WIDTH_PX as ie}from"./constants.js";import{useBreakpoint as ce,Breakpoint as le}from"./hooks/useBreakpoint.js";import{getColor as I}from"./theme/currys/color.js";import{a as se}from"./uuid.js";import{E as de}from"./ErrorWrapper.js";import{Icon as pe}from"./components/Icons/Icon.js";import{a as me}from"./Label.js";import{M as ue}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var be=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(be||{});const fe=(e,c,m)=>{const l=c?"1.5rem":"2rem",u=c?`${m}px`:"0px",b="4px";return`calc(${e*ie}px + ${l} + ${u} + ${b})`},S=r.forwardRef((e,c)=>{const{className:m,defaultValue:l,placeholder:u,type:b="text",inputId:g=se(),name:N,transparent:$=!1,icon:a,iconRight:f,mode:n=i.onwhite,variant:A,label:F,error:M,errorText:x,testId:z,disabled:o,readOnly:B,autoComplete:D,afterInputChildren:V,width:v,required:H,onChange:E,onKeyDown:X,autoFocus:q,maxCharacters:s,maxText:G,...K}=e,L=ce(),d=re(null),[k,O]=ne(l||""),P=n===i.ondark,j=n===i.onblueberry,J=!!s&&k.toString().length>s,h=n===i.oninvalid||!!x||!!M||J,w=A===ae.bigform,Q=$&&n!==i.ondark&&!h,U=C(t["input-wrapper"],m),Y=C(t["content-wrapper"],{[t["content-wrapper--transparent"]]:Q,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:P,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--bigform"]]:w,[t["content-wrapper--disabled"]]:o,[t["content-wrapper--with-icon"]]:a}),Z=C(t["content-wrapper__input"],{[t["content-wrapper__input--bigform"]]:w,[t["content-wrapper__input--disabled"]]:o}),T=o?I("neutral",500):I("black"),W=L===le.xs||!w?y.XSmall:y.Small,_=()=>a!==void 0?r.createElement(pe,{color:T,size:W,svgIcon:a}):null,ee=()=>{if(d&&d.current&&a){const p=f?0:1;d.current.children[p].focus()}},te=p=>{E&&E(p),O(p.target.value)},R=v?fe(v,!!a,W):void 0;return r.createElement(de,{errorText:x},r.createElement("div",{"data-testid":z,"data-analyticsid":oe.Input,className:U},me(F,g,n,o),r.createElement("div",{onClick:ee,ref:d,className:Y,style:{maxWidth:R}},!f&&_(),r.createElement("input",{onChange:te,onKeyDown:X,name:N,type:b,defaultValue:l,id:g,className:Z,ref:c,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!h,disabled:o,placeholder:u,readOnly:B,autoComplete:D||"off",required:H,autoFocus:q,...K}),f&&_()),s&&r.createElement(ue,{maxCharacters:s,length:k.toString().length,maxText:G,mode:n,maxWidth:R}),V))});S.displayName="Input";const Ie=S;export{Ie as I,be 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';\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 = (): React.ReactNode => {\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    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\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        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\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            // eslint-disable-next-line jsx-a11y/no-autofocus\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\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","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","maxWidth","ErrorWrapper","AnalyticsId","MaxCharacters","Input$1"],"mappings":"6hBAwEY,IAAAA,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,KAAO,OACPA,EAAA,KAAO,OATGA,IAAAA,IAAA,CAAA,CAAA,EAYZ,MAAMC,GAAmB,CAACC,EAAoBC,EAAkBC,IAA6B,CACrF,MAAAC,EAAeF,EAAU,SAAW,OACpCG,EAAYH,EAAU,GAAGC,MAAe,MACxCG,EAAc,MAEpB,MAAO,QAAQL,EAAaM,UAAkCH,OAAkBC,OAAeC,IACjG,EAEME,EAAQC,EAAM,WAAW,CAACC,EAAmBC,IAAqC,CAChF,KAAA,CACJ,UAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,QAAAC,EAAUC,GAAK,EACf,QAAAC,EACA,KAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,UAAAC,EACA,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,mBAAAC,EACA,mBAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,cAAAC,EACA,QAAAC,EACA,GAAGC,CACD,EAAAhC,EACEiC,EAAaC,KACbC,EAAoBC,GAAuB,IAAI,EAC/C,CAACC,EAAOC,CAAQ,EAAIC,GAASpC,GAAgB,EAAE,EAE/CqC,EAAS3B,IAAS4B,EAAS,OAC3BC,EAAc7B,IAAS4B,EAAS,YAChCE,EAAwB,CAAC,CAACb,GAAiBO,EAAM,WAAW,OAASP,EACrEc,EAAU/B,IAAS4B,EAAS,WAAa,CAAC,CAACxB,GAAa,CAAC,CAACD,GAAS2B,EACnEE,EAAU/B,IAAYgC,GAAY,QAClCC,EAAgBrC,GAAeG,IAAS4B,EAAS,QAAU,CAACG,EAE5DI,EAAoBC,EAAGC,EAAO,eAAe,EAAGhD,CAAS,EAEzDiD,GAAoBF,EAAGC,EAAO,8BAA8B,EAAG,CACnE,CAACA,EAAO,uCAAuC,CAAC,EAAGV,EACnD,CAACU,EAAO,wCAAwC,CAAC,EAAG/B,CAAA,CACrD,EAEKiC,GAAsBH,EAAGC,EAAO,iBAAiB,EAAG,CACxD,CAACA,EAAO,8BAA8B,CAAC,EAAGH,EAC1C,CAACG,EAAO,+BAA+B,CAAC,EAAGR,EAC3C,CAACQ,EAAO,0BAA0B,CAAC,EAAGV,EACtC,CAACU,EAAO,0BAA0B,CAAC,EAAGN,EACtC,CAACM,EAAO,0BAA0B,CAAC,EAAGL,EACtC,CAACK,EAAO,2BAA2B,CAAC,EAAG/B,EACvC,CAAC+B,EAAO,4BAA4B,CAAC,EAAGvC,CAAA,CACzC,EAEK0C,GAAaJ,EAAGC,EAAO,wBAAwB,EAAG,CACtD,CAACA,EAAO,iCAAiC,CAAC,EAAGL,EAC7C,CAACK,EAAO,kCAAkC,CAAC,EAAG/B,CAAA,CAC/C,EAEKmC,GAAYnC,EAAWoC,EAAS,UAAW,GAAG,EAAIA,EAAS,OAAO,EAClE9D,EAAWwC,IAAeuB,GAAW,IAAM,CAACX,EAAUY,EAAS,OAASA,EAAS,MAEjFC,EAAa,IACV/C,IAAS,OAAYZ,EAAA,cAAC4D,GAAK,CAAA,MAAOL,GAAW,KAAM7D,EAAU,QAASkB,CAAM,CAAA,EAAK,KAGpFiD,GAAc,IAAY,CAC1B,GAAAzB,GAAqBA,EAAkB,SAAWxB,EAAM,CACpD,MAAAkD,EAAgBjD,EAAY,EAAI,EACxBuB,EAAkB,QAAQ,SAAS0B,CAAa,EACxD,MAAM,EACd,EAGIC,GAAgBC,GAAiD,CACjEpC,GACFA,EAASoC,CAAC,EAEHzB,EAAAyB,EAAE,OAAO,KAAK,CAAA,EAGnBC,EAAWvC,EAAQnC,GAAiBmC,EAAO,CAAC,CAACd,EAAMlB,CAAQ,EAAI,OAGnE,OAAAM,EAAA,cAACkE,GAAa,CAAA,UAAAhD,CAAA,EACXlB,EAAA,cAAA,MAAA,CAAI,cAAamB,EAAQ,mBAAkBgD,GAAY,MAAO,UAAWlB,CACvE,EAAAjC,mBACE,MAAI,CAAA,UAAWoC,EACd,EAAApD,EAAA,cAAC,QAAM,CAAA,GAAIS,GAAW,OAAW,QAASF,CAAA,EACvCS,CACH,EACCO,GAAsBvB,EAAA,cAAC,OAAI,UAAWmD,EAAO,qCAAqC,CAAA,EAAI5B,CAAmB,CAC5G,EAEDE,GAAuBzB,EAAA,cAAA,MAAA,KAAKyB,CAAmB,EAI/CzB,EAAA,cAAA,MAAA,CAAI,QAAS6D,GAAa,IAAKzB,EAAmB,UAAWiB,GAAqB,MAAO,CAAE,SAAAY,CAAA,GACzF,CAACpD,GAAa8C,EAAA,EACf3D,EAAA,cAAC,QAAA,CACC,SAAU+D,GACV,UAAAlC,EACA,KAAAnB,EACA,KAAAJ,EACA,aAAAF,EACA,GAAIG,EACJ,UAAW+C,GACX,IAAApD,EACA,kBAAiBD,EAAM,iBAAiB,GAAK,OAC7C,eAAc,CAAC,CAAC4C,EAChB,SAAAzB,EACA,YAAAf,EACA,SAAAgB,EACA,aAAcC,GAAgB,MAC9B,SAAAK,EAEA,UAAAG,EACC,GAAGG,CAAA,CAAA,EAELpB,GAAa8C,EAAA,CAChB,EACC5B,mBACEqC,GAAc,CAAA,cAAArC,EAA8B,OAAQO,EAAM,SAAA,EAAW,OAAQ,QAAAN,EAAkB,KAAAlB,EAAY,SAAAmD,CAAoB,CAAA,EAEjIzC,CACH,CACF,CAEJ,CAAC,EAEDzB,EAAM,YAAc,QAEpB,MAAAsE,GAAetE"}
+{"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 { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | '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  /** 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?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** 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    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode = FormMode.onwhite,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\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 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 = (): React.ReactNode => {\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    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\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        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\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-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","FormMode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"6jBAoEY,IAAAA,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,KAAO,OACPA,EAAA,KAAO,OATGA,IAAAA,IAAA,CAAA,CAAA,EAYZ,MAAMC,GAAmB,CAACC,EAAoBC,EAAkBC,IAA6B,CACrF,MAAAC,EAAeF,EAAU,SAAW,OACpCG,EAAYH,EAAU,GAAGC,MAAe,MACxCG,EAAc,MAEpB,MAAO,QAAQL,EAAaM,UAAkCH,OAAkBC,OAAeC,IACjG,EAEME,EAAQC,EAAM,WAAW,CAACC,EAAmBC,IAAqC,CAChF,KAAA,CACJ,UAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,QAAAC,EAAUC,GAAK,EACf,KAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,UAAAC,EACA,KAAAC,EAAOC,EAAS,QAChB,QAAAC,EACA,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,cAAAC,EACA,QAAAC,EACA,GAAGC,CACD,EAAA9B,EACE+B,EAAaC,KACbC,EAAoBC,GAAuB,IAAI,EAC/C,CAACC,EAAOC,CAAQ,EAAIC,GAASlC,GAAgB,EAAE,EAE/CmC,EAAS1B,IAASC,EAAS,OAC3B0B,EAAc3B,IAASC,EAAS,YAChC2B,EAAwB,CAAC,CAACZ,GAAiBO,EAAM,WAAW,OAASP,EACrEa,EAAU7B,IAASC,EAAS,WAAa,CAAC,CAACI,GAAa,CAAC,CAACD,GAASwB,EACnEE,EAAU5B,IAAY6B,GAAY,QAClCC,EAAgBnC,GAAeG,IAASC,EAAS,QAAU,CAAC4B,EAE5DI,EAAoBC,EAAGC,EAAO,eAAe,EAAG7C,CAAS,EAEzD8C,EAAsBF,EAAGC,EAAO,iBAAiB,EAAG,CACxD,CAACA,EAAO,8BAA8B,CAAC,EAAGH,EAC1C,CAACG,EAAO,+BAA+B,CAAC,EAAGR,EAC3C,CAACQ,EAAO,0BAA0B,CAAC,EAAGT,EACtC,CAACS,EAAO,0BAA0B,CAAC,EAAGN,EACtC,CAACM,EAAO,0BAA0B,CAAC,EAAGL,EACtC,CAACK,EAAO,2BAA2B,CAAC,EAAG5B,EACvC,CAAC4B,EAAO,4BAA4B,CAAC,EAAGrC,CAAA,CACzC,EAEKuC,EAAaH,EAAGC,EAAO,wBAAwB,EAAG,CACtD,CAACA,EAAO,iCAAiC,CAAC,EAAGL,EAC7C,CAACK,EAAO,kCAAkC,CAAC,EAAG5B,CAAA,CAC/C,EAEK+B,EAAY/B,EAAWgC,EAAS,UAAW,GAAG,EAAIA,EAAS,OAAO,EAClE1D,EAAWsC,IAAeqB,GAAW,IAAM,CAACV,EAAUW,EAAS,OAASA,EAAS,MAEjFC,EAAa,IACV5C,IAAS,OAAYX,EAAA,cAACwD,GAAK,CAAA,MAAOL,EAAW,KAAMzD,EAAU,QAASiB,CAAM,CAAA,EAAK,KAGpF8C,GAAc,IAAY,CAC1B,GAAAvB,GAAqBA,EAAkB,SAAWvB,EAAM,CACpD,MAAA+C,EAAgB9C,EAAY,EAAI,EACxBsB,EAAkB,QAAQ,SAASwB,CAAa,EACxD,MAAM,EACd,EAGIC,GAAgBC,GAAiD,CACjElC,GACFA,EAASkC,CAAC,EAEHvB,EAAAuB,EAAE,OAAO,KAAK,CAAA,EAGnBC,EAAWrC,EAAQjC,GAAiBiC,EAAO,CAAC,CAACb,EAAMjB,CAAQ,EAAI,OAErE,OACGM,EAAA,cAAA8D,GAAA,CAAa,UAAA5C,CACZ,EAAAlB,EAAA,cAAC,OAAI,cAAamB,EAAQ,mBAAkB4C,GAAY,MAAO,UAAWjB,CACvE,EAAAkB,GAAYhD,EAAOT,EAASM,EAAkBO,CAAQ,EAGtDpB,EAAA,cAAA,MAAA,CAAI,QAASyD,GAAa,IAAKvB,EAAmB,UAAWe,EAAqB,MAAO,CAAE,SAAAY,CAAS,CAAA,EAClG,CAACjD,GAAa2C,IACfvD,EAAA,cAAC,QAAA,CACC,SAAU2D,GACV,UAAAhC,EACA,KAAAlB,EACA,KAAAH,EACA,aAAAF,EACA,GAAIG,EACJ,UAAW2C,EACX,IAAAhD,EACA,kBAAiBD,EAAM,iBAAiB,GAAK,OAC7C,mBAAkBA,EAAM,kBAAkB,GAAK,OAC/C,eAAc,CAAC,CAACyC,EAChB,SAAAtB,EACA,YAAAf,EACA,SAAAgB,EACA,aAAcC,GAAgB,MAC9B,SAAAG,EAEA,UAAAG,EACC,GAAGG,CAAA,CAAA,EAELnB,GAAa2C,EAAA,CAChB,EACC1B,mBACEoC,GAAc,CAAA,cAAApC,EAA8B,OAAQO,EAAM,SAAA,EAAW,OAAQ,QAAAN,EAAkB,KAAAjB,EAAY,SAAAgD,CAAoB,CAAA,EAEjItC,CACH,CACF,CAEJ,CAAC,EAEDxB,EAAM,YAAc,QAEpB,MAAAmE,GAAenE"}

package/Label.js

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

package/Label.js.map

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

package/Panel.js

@@ -1,2 +1,2 @@
-import t from"react";import r from"classnames";import{AnalyticsId as le,IconSize as w}from"./constants.js";import{useExpand as re}from"./hooks/useExpand.js";import{useUuid as M}from"./hooks/useUuid.js";import{palette as $}from"./theme/palette.js";import{getAriaLabelAttributes as oe}from"./utils/accessibility.js";import{B as se}from"./Badge.js";import{B as z}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import ie from"./components/Icons/AlertSignFill.js";import ce from"./components/Icons/ArrowRight.js";import me from"./components/Icons/Calendar.js";import pe from"./components/Icons/ChevronDown.js";import de from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as _e}from"./Title.js";import e from"./components/Panel/styles.module.scss";var be=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(be||{}),ye=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ye||{}),Ee=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(Ee||{});const ge=({status:a,statusMessage:o})=>{const y=()=>a==="error"?{color:$.cherry500,svgIcon:ie}:{color:$.black,svgIcon:ue},s=r(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&o?t.createElement("div",{className:s,"data-testid":"display-status"},t.createElement(u,{...y(),size:w.XSmall})," ",t.createElement("span",null,o)):null},ve=({date:a,time:o})=>a||o?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:me,size:w.XSmall}),t.createElement("span",null,a)),o&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,o))):null,he=t.forwardRef(function(o,y){const{children:s,contentA:N,contentB:n,className:D,testId:j,title:E,titleHtmlMarkup:W="h2",url:f,target:X="_self",icon:i,iconRight:I=!1,variant:c="fill",status:m="normal",statusMessage:g,buttonText:k="Se detaljer",buttonTextClose:F="Skjul detaljer",buttonAriaLabelledById:x,buttonAriaLabel:H,layout:l="layout2",containerAsButton:v=!1,date:B,time:A,noTopBorder:U,buttonOnClick:d,buttonHtmlMarkup:L="a",expanded:O=!1,onExpand:S,renderChildrenWhenClosed:q=!1}=o,[p,G]=re(O,S),h=M(),_=M(),T=g&&m==="new",b=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(l),J=r(e["panel-wrapper"],D),K=r(e.panel,{[e["panel--fill"]]:c==="fill",[e["panel--stroke"]]:c==="stroke",[e["panel--white"]]:c==="white",[e["panel--line"]]:c==="line",[e["panel--no-top-border"]]:c==="line"&&U,[e["panel--selected"]]:p,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:i,[e["panel--button"]]:v,[e["panel--clickable"]]:s||f||S||d||v}),Q=r({[e.panel__container]:l==="layout2"&&n,[e["panel__container--layout3"]]:b&&n,[e["panel__container--grow"]]:i}),Y=r({[e["panel-content-a"]]:l==="layout2",[e["panel-content-a--layout3a"]]:l==="layout3a",[e["panel-content-a--layout3b"]]:l==="layout3b",[e["panel-content-a--layout3c"]]:l==="layout3c"}),Z=r({[e["panel__content-right--layout1"]]:n&&l==="layout1",[e["panel__content-right--layout2"]]:n&&l==="layout2",[e["panel__content-right--layout3"]]:n&&b,[e["panel__content-right--layout3a"]]:n&&l==="layout3a",[e["panel__content-right--layout3b"]]:n&&l==="layout3b",[e["panel__content-right--layout3c"]]:n&&l==="layout3c"}),P=r(e["panel-content-b"],{[e["panel-content-b--layout1"]]:l==="layout1",[e["panel-content-b--layout3"]]:b}),V=r(e["panel__details-btn"]),ee=r(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:T}),te=()=>{const C=oe({label:H,id:x&&`${_} ${x}`||E&&h&&`${_} ${h}`,prefer:"label"}),R={onClick:d||(()=>G(!p)),className:v?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...C};return s?t.createElement(z,{testId:"expand","aria-expanded":p,...R},t.createElement("span",{id:_},p?F:k),t.createElement(u,{svgIcon:p?de:pe})):t.createElement(z,{testId:"url",htmlMarkup:L,href:f,target:X,...R},t.createElement("span",{id:_},k),t.createElement(u,{svgIcon:ce}))},ae=r(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:b,[e["panel__btn-container--no-content-b"]]:!n,[e["panel__btn-container--padding-top"]]:N||n}),ne=()=>{if(!s||!q&&!p)return null;const C=r(e["panel-details"],{[e["panel-details--open"]]:p,[e["panel-details--line"]]:c==="line",[e["panel-details--white"]]:c==="white",[e["panel-details--with-icon"]]:i});return t.createElement("div",{className:C,"data-testid":"panel-details"},t.createElement("div",null,s))};return t.createElement("div",{ref:y,"data-testid":j,className:J,"data-analyticsid":le.Panel},t.createElement("div",{className:K},i&&!I&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:Q},t.createElement("div",{className:Y},t.createElement(ge,{status:m,statusMessage:g}),E&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(_e,{appearance:"title3",htmlMarkup:W,id:h,className:ee},E),T&&t.createElement("div",{className:e.panel__badge},t.createElement(se,{color:"blueberry",testId:"badge-status"},g))),N),t.createElement("div",{className:Z},n&&t.createElement("div",{className:P},n),(s||f||B||A||d)&&t.createElement("div",{className:ae},t.createElement(ve,{date:B,time:A}),(s||f||d)&&t.createElement("div",{className:V},te())))),i&&I&&t.createElement("div",{className:e["panel__icon--right"]},i)),ne())}),He=he;export{He as P,be as a,ye as b,Ee as c};
+import t from"react";import o from"classnames";import{AnalyticsId as re,IconSize as w}from"./constants.js";import{useExpand as se}from"./hooks/useExpand.js";import{useUuid as $}from"./hooks/useUuid.js";import{palette as z}from"./theme/palette.js";import{getAriaLabelAttributes as ie}from"./utils/accessibility.js";import{B as ce}from"./Badge.js";import{B as j}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import pe from"./components/Icons/AlertSignFill.js";import me from"./components/Icons/ArrowRight.js";import de from"./components/Icons/Calendar.js";import ue from"./components/Icons/ChevronDown.js";import _e from"./components/Icons/ChevronUp.js";import ye from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as be}from"./Title.js";import e from"./components/Panel/styles.module.scss";var Ee=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(Ee||{}),ge=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ge||{}),ve=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(ve||{});const he=({status:a,statusMessage:r})=>{const E=()=>a==="error"?{color:z.cherry500,svgIcon:pe}:{color:z.black,svgIcon:ye},s=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&r?t.createElement("div",{className:s,"data-testid":"display-status"},t.createElement(_,{...E(),size:w.XSmall})," ",t.createElement("span",null,r)):null},Ce=({date:a,time:r})=>a||r?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(_,{svgIcon:de,size:w.XSmall}),t.createElement("span",null,a)),r&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(_,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,r))):null,Ie=t.forwardRef(function(r,E){const{children:s,contentA:N,contentB:l,prioritiseMetaDataInContentB:d,className:W,testId:X,title:g,titleHtmlMarkup:F="h2",url:y,target:H="_self",icon:i,iconRight:B=!1,variant:c="fill",status:p="normal",statusMessage:v,buttonText:k="Se detaljer",buttonTextClose:U="Skjul detaljer",buttonAriaLabelledById:x,buttonAriaLabel:L,layout:n="layout2",containerAsButton:h=!1,date:A,time:M,noTopBorder:O,buttonOnClick:u,buttonHtmlMarkup:q="a",expanded:G=!1,onExpand:D,renderChildrenWhenClosed:J=!1}=r,[m,K]=se(G,D),C=$(),f=$(),S=v&&p==="new",b=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Q=o(e["panel-wrapper"],W),Y=o(e.panel,{[e["panel--fill"]]:c==="fill",[e["panel--stroke"]]:c==="stroke",[e["panel--white"]]:c==="white",[e["panel--line"]]:c==="line",[e["panel--no-top-border"]]:c==="line"&&O,[e["panel--selected"]]:m,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:i,[e["panel--button"]]:h,[e["panel--clickable"]]:s||y||D||u||h}),Z=o({[e.panel__container]:n==="layout2"&&l,[e["panel__container--layout1"]]:n==="layout1"&&l,[e["panel__container--layout2"]]:n==="layout2"&&l,[e["panel__container--layout3"]]:b&&l,[e["panel__container--grow"]]:i,[e["panel__container--prioritiseMetaDataInContentB"]]:d}),P=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c",[e["panel-content-a--non-prioritiseMetaDataInContentB"]]:!d}),V=o({[e["panel__content-right--layout1"]]:l&&n==="layout1",[e["panel__content-right--layout2"]]:l&&n==="layout2",[e["panel__content-right--layout3"]]:l&&b,[e["panel__content-right--layout3a"]]:l&&n==="layout3a",[e["panel__content-right--layout3b"]]:l&&n==="layout3b",[e["panel__content-right--layout3c"]]:l&&n==="layout3c",[e["panel__content-right--prioritiseMetaDataInContentB"]]:d}),ee=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout2"]]:n==="layout2",[e["panel-content-b--layout3"]]:b,[e["panel-content-b--prioritiseMetaDataInContentB"]]:d}),te=o(e["panel__details-btn"]),ae=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:S}),ne=()=>{const I=ie({label:L,id:x&&`${f} ${x}`||g&&C&&`${f} ${C}`,prefer:"label"}),R={onClick:u||(()=>K(!m)),className:h?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...I};return s?t.createElement(j,{testId:"expand","aria-expanded":m,...R},t.createElement("span",{id:f},m?U:k),t.createElement(_,{svgIcon:m?_e:ue})):t.createElement(j,{testId:"url",htmlMarkup:q,href:y,target:H,...R},t.createElement("span",{id:f},k),t.createElement(_,{svgIcon:me}))},le=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:b,[e["panel__btn-container--no-content-b"]]:!l,[e["panel__btn-container--padding-top"]]:N||l}),oe=()=>{if(!s||!J&&!m)return null;const I=o(e["panel-details"],{[e["panel-details--open"]]:m,[e["panel-details--line"]]:c==="line",[e["panel-details--white"]]:c==="white",[e["panel-details--with-icon"]]:i});return t.createElement("div",{className:I,"data-testid":"panel-details"},t.createElement("div",null,s))},T=t.createElement("div",{className:V},l&&t.createElement("div",{className:ee},l),(s||y||A||M||u)&&t.createElement("div",{className:le},t.createElement(Ce,{date:A,time:M}),(s||y||u)&&t.createElement("div",{className:te},ne())));return t.createElement("div",{ref:E,"data-testid":X,className:Q,"data-analyticsid":re.Panel},t.createElement("div",{className:Y},i&&!B&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:Z},d&&T,t.createElement("div",{className:P},t.createElement(he,{status:p,statusMessage:v}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(be,{appearance:"title3",htmlMarkup:F,id:C,className:ae},g),S&&t.createElement("div",{className:e.panel__badge},t.createElement(ce,{color:"blueberry",testId:"badge-status"},v))),N),!d&&T),i&&B&&t.createElement("div",{className:e["panel__icon--right"]},i)),oe())}),Le=Ie;export{Le as P,Ee as a,ge as b,ve as c};
 //# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {<DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** A version of panel that prioritises content-B visually and audibly */\n  prioritiseMetaDataInContentB?: boolean;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    prioritiseMetaDataInContentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n    [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n    [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n    [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n    [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n    [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = (): JSX.Element | null => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const contentBElement = (\n    <div className={panelContentRightClass}>\n      {contentB && <div className={panelContentBClass}>{contentB}</div>}\n      {(children || url || date || time || buttonOnClick) && (\n        <div className={btnContainerClass}>\n          {<DateTime date={date} time={time} />}\n          {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n        </div>\n      )}\n    </div>\n  );\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          {prioritiseMetaDataInContentB && contentBElement}\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          {!prioritiseMetaDataInContentB && contentBElement}\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}

package/README.md

@@ -59,11 +59,3 @@ const App: React.FC = () => {
 
 export default App;
 ```
-
-## 📓 Documentation
-
-A more detailed getting started manual can be viewed [here](https://helsenorge.design/pattern-library). For a full overview of all the
-available components and their specification, head over [here](https://helsenorge.design/pattern-library/components)
-
-To read the full design system documentation head over to our web page [Helsenorge Design](https://helsenorge.design/). Here you can read
-about our use of design principles, design language, patterns, compositions, live code examples and techincal component specifications.

package/RadioButton.js

@@ -1,2 +1,2 @@
-import t from"react";import r from"classnames";import{FormMode as l,FormVariant as x,AnalyticsId as S}from"./constants.js";import{a as q}from"./uuid.js";import o from"./components/RadioButton/styles.module.scss";const c=t.forwardRef((p,f)=>{const{className:y,defaultChecked:B=!1,disabled:e,label:s,inputId:i=q(),mode:n,name:v=i,variant:N,errorText:a,error:R=!!a,value:g=s,testId:k,required:w,...C}=p,b=R||n===l.oninvalid,u=n===l.ondark,m=n===l.onblueberry,d=N===x.bigform,E=r(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:a,[o["radio-button-wrapper--bigform"]]:d}),h=r(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:u,[o["radio-button-label--on-blueberry"]]:m,[o["radio-button-label--invalid"]]:b,[o["radio-button-label--bigform"]]:d}),F=r(o["radio-button"],{[o["radio-button--on-dark"]]:u,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:m,[o["radio-button--invalid"]]:b},y),I=r(o["radio-button-errors"],{[o["radio-button-errors--bigform"]]:d});return t.createElement("div",{"data-testid":k,"data-analyticsid":S.RadioButton,className:E},a&&t.createElement("p",{className:I},a),t.createElement("label",{htmlFor:i,className:h},t.createElement("input",{id:i,name:v,className:F,type:"radio",disabled:e,value:g,ref:f,defaultChecked:B,required:w,...C}),s))});c.displayName="RadioButton";const V=c;export{V as R,c as a};
+import b,{useState as G}from"react";import s from"classnames";import{FormMode as e,FormVariant as M,AnalyticsId as O}from"./constants.js";import{usePseudoClasses as V}from"./hooks/usePseudoClasses.js";import{a as W}from"./uuid.js";import{g as $,r as z}from"./Label.js";import o from"./components/RadioButton/styles.module.scss";const w=b.forwardRef((p,h)=>{const{className:C,defaultChecked:_=!1,onChange:g,disabled:t,label:y,inputId:l=W(),mode:a=e.onwhite,name:B=l,variant:k,errorText:n,error:R=!!n,value:N=$(y),testId:L,required:x,...E}=p,u=R||a===e.oninvalid,v=a===e.ondark,m=a===e.onblueberry,F=a===e.ongrey,c=a===e.oninvalid,r=k===M.bigform,[i,I]=G(_),{refObject:S,isFocused:d}=V(h),A=s(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:n,[o["radio-button-wrapper__bigform"]]:r,[o["radio-button-wrapper__bigform--focused"]]:r&&d,[o["radio-button-wrapper__bigform--selected"]]:r&&i&&d,[o["radio-button-wrapper__bigform--invalid"]]:r&&c&&d,[o["radio-button-wrapper__bigform--on-blueberry"]]:r&&m&&d}),P=s(o["radio-button-label"],{[o["radio-button-label--disabled"]]:t,[o["radio-button-label--on-dark"]]:v,[o["radio-button-label--invalid"]]:u,[o["radio-button-label__bigform"]]:r,[o["radio-button-label__bigform--on-grey"]]:r&&F&&!i,[o["radio-button-label__bigform--on-blueberry"]]:m&&!i&&r,[o["radio-button-label__bigform--selected"]]:r&&i&&!c,[o["radio-button-label__bigform--disabled"]]:r&&t,[o["radio-button-label__bigform--selected-invalid"]]:r&&i&&c}),T=s(o["radio-button"],{[o["radio-button--on-dark"]]:v,[o["radio-button--disabled"]]:t,[o["radio-button--on-blueberry"]]:m,[o["radio-button--invalid"]]:u,[o["radio-button__bigform"]]:r,[o["radio-button__bigform--disabled"]]:r&&t,[o["radio-button__bigform--invalid"]]:r&&u},C),j=s(o["radio-button-errors"]),q=f=>{I(!0),g&&g(f)},D=()=>b.createElement("input",{id:l,name:B,className:T,type:"radio",disabled:t,value:N,ref:S,defaultChecked:_,"aria-describedby":p["aria-describedby"]??void 0,required:x,...E,onChange:f=>q(f)});return b.createElement("div",{"data-testid":L,"data-analyticsid":O.RadioButton,className:A},n&&b.createElement("p",{className:j},n),z(y,D(),l,a,t,P,void 0,o["radiobutton-sublabel-wrapper"],r))});w.displayName="RadioButton";const Z=w;export{Z as R,w as a};
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { uuid } from '../../utils/uuid';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the radioButton */\n  label: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - 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 RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = 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    ...rest\n  } = props;\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 radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper--bigform']]: bigform,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--on-blueberry']]: onBlueberry,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label--bigform']]: bigform,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors'], {\n    [radioButtonStyles['radio-button-errors--bigform']]: bigform,\n  });\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={radioButtonLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          defaultChecked={defaultChecked}\n          required={required}\n          {...rest}\n        />\n        {label}\n      </label>\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","rest","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","AnalyticsId","RadioButton$1"],"mappings":"oNA6BO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,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,GAAGC,CACD,EAAAhB,EACEiB,EAAUL,GAASJ,IAASU,EAAS,UACrCC,EAASX,IAASU,EAAS,OAC3BE,EAAcZ,IAASU,EAAS,YAChCG,EAAUX,IAAYY,EAAY,QAElCC,EAA4BC,EAAWC,EAAkB,sBAAsB,EAAG,CACtF,CAACA,EAAkB,kCAAkC,CAAC,EAAGd,EACzD,CAACc,EAAkB,+BAA+B,CAAC,EAAGJ,CAAA,CACvD,EACKK,EAA0BF,EAAWC,EAAkB,oBAAoB,EAAG,CAClF,CAACA,EAAkB,8BAA8B,CAAC,EAAGrB,EACrD,CAACqB,EAAkB,6BAA6B,CAAC,EAAGN,EACpD,CAACM,EAAkB,kCAAkC,CAAC,EAAGL,EACzD,CAACK,EAAkB,6BAA6B,CAAC,EAAGR,EACpD,CAACQ,EAAkB,6BAA6B,CAAC,EAAGJ,CAAA,CACrD,EACKM,EAAqBH,EACzBC,EAAkB,cAAc,EAChC,CACE,CAACA,EAAkB,uBAAuB,CAAC,EAAGN,EAC9C,CAACM,EAAkB,wBAAwB,CAAC,EAAGrB,EAC/C,CAACqB,EAAkB,4BAA4B,CAAC,EAAGL,EACnD,CAACK,EAAkB,uBAAuB,CAAC,EAAGR,CAChD,EACAf,CAAA,EAEI0B,EAAcJ,EAAWC,EAAkB,qBAAqB,EAAG,CACvE,CAACA,EAAkB,8BAA8B,CAAC,EAAGJ,CAAA,CACtD,EAGC,OAAAtB,EAAA,cAAC,OAAI,cAAae,EAAQ,mBAAkBe,EAAY,YAAa,UAAWN,CAC7E,EAAAZ,mBAAc,IAAE,CAAA,UAAWiB,GAAcjB,CAAU,kBACnD,QAAM,CAAA,QAASL,EAAS,UAAWoB,CAClC,EAAA3B,EAAA,cAAC,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWkB,EACX,KAAK,QACL,SAAAvB,EACA,MAAAS,EACA,IAAAZ,EACA,eAAAE,EACA,SAAAY,EACC,GAAGC,CAAA,CAAA,EAELX,CACH,CACF,CAEJ,CAAC,EAEDP,EAAY,YAAc,cAE1B,MAAAgC,EAAehC"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n  label: React.ReactNode;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - 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 RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onGrey = mode === FormMode.ongrey;\n  const onCherry = mode === FormMode.oninvalid;\n  const bigform = variant === FormVariant.bigform;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses(ref as React.RefObject<HTMLInputElement>);\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n    [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label__bigform']]: bigform,\n    [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n    [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n    [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n    [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__bigform']]: bigform,\n      [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n      [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(true);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={refObject}\n      defaultChecked={defaultChecked}\n      aria-describedby={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        bigform\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}

package/Select.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import{AnalyticsId as D,IconSize as T,AVERAGE_CHARACTER_WIDTH_PX as $}from"./constants.js";import{useUuid as q}from"./hooks/useUuid.js";import{getColor as f}from"./theme/currys/color.js";import{E as z}from"./ErrorWrapper.js";import{Icon as H}from"./components/Icons/Icon.js";import L from"./components/Icons/ChevronDown.js";import e from"./components/Select/styles.module.scss";const V=t=>{const a="2rem";return`calc(${t*$}px + ${a})`},X=(t,a)=>a?f("neutral",500):f(t?"cherry":"blueberry",600),B=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:v,children:E,concept:C="normal",disabled:n,error:h,errorText:i,label:m,selectId:p,name:y=p,mode:o,testId:I,width:d,required:b,value:_,defaultValue:N,...S}=t,u=q(p),w=o==="onblueberry",l=o==="oninvalid"||!!i||!!h,W=o==="ondark",g=X(l,!!n),x=d?V(d):void 0,A=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:W}),R=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:C==="transparent",[e["select-inner-wrapper--on-blueberry"]]:w,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},v),k=c(e.select,{[e["select--on-blueberry"]]:w,[e["select--invalid"]]:l});return r.createElement(z,{errorText:i},r.createElement("div",{"data-testid":I,"data-analyticsid":D.Select,className:e["select-wrapper"],style:{maxWidth:x}},m&&r.createElement("div",{className:A},r.createElement("label",{htmlFor:u},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:R},r.createElement(H,{className:e["select-arrow"],svgIcon:L,color:g,size:T.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:u,name:y,className:k,disabled:n,ref:a,required:b,"aria-required":!!b,value:_,defaultValue:N,...S},E))))}),Q=B;export{Q as S,B as a};
+import t from"react";import b from"classnames";import{FormMode as T,AnalyticsId as _,IconSize as $,AVERAGE_CHARACTER_WIDTH_PX as q}from"./constants.js";import{useUuid as z}from"./hooks/useUuid.js";import{getColor as f}from"./theme/currys/color.js";import{E as D}from"./ErrorWrapper.js";import{Icon as F}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{a as L}from"./Label.js";import e from"./components/Select/styles.module.scss";const M=a=>{const r="2rem";return`calc(${a*q}px + ${r})`},V=(a,r)=>r?f("neutral",500):f(a?"cherry":"blueberry",600),X=t.forwardRef(function(r,s){const{afterLabelChildren:B,className:v,children:w,concept:y="normal",disabled:o,error:C,errorText:c,label:E,selectId:i,name:h=i,mode:l=T.onwhite,testId:I,width:d,required:m,value:S,defaultValue:N,...R}=r,p=z(i),u=l==="onblueberry",n=l==="oninvalid"||!!c||!!C,W=V(n,!!o),g=d?M(d):void 0,x=b(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:y==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:n,[e["select-inner-wrapper--disabled"]]:o},v),A=b(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:n});return t.createElement(D,{errorText:c},t.createElement("div",{"data-testid":I,"data-analyticsid":_.Select,className:e["select-wrapper"],style:{maxWidth:g}},L(E,p,l,o),t.createElement("div",{className:x},t.createElement(F,{className:e["select-arrow"],svgIcon:H,color:W,size:$.XSmall}),t.createElement("select",{"aria-invalid":!!n,id:p,name:h,className:A,disabled:o,ref:s,required:m,"aria-describedby":r["aria-describedby"]??void 0,"aria-required":!!m,value:S,defaultValue:N,...R},w))))}),Z=X;export{Z as S,X as a};
 //# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: string;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - 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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const onDark = mode === 'ondark';\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n    [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n  });\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {label && (\n          <div className={selectLabelClasses}>\n            <label htmlFor={uuid}>{label}</label>\n            {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize","Select$1"],"mappings":"yaA0CA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACD,EAAAjB,EAEEkB,EAAOC,EAAQV,CAAQ,EACvBW,EAAcT,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDe,EAASV,IAAS,SAClBW,EAAY5B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C2B,EAAWV,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CW,EAAqBC,EAAWC,EAAa,+BAA+B,EAAG,CACnF,CAACA,EAAa,wCAAwC,CAAC,EAAGL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,sBAAsB,EACnC,CACE,CAACA,EAAa,mCAAmC,CAAC,EAAGrB,IAAY,cACjE,CAACqB,EAAa,oCAAoC,CAAC,EAAGN,EACtD,CAACM,EAAa,+BAA+B,CAAC,EAAG/B,EACjD,CAAC+B,EAAa,gCAAgC,CAAC,EAAG9B,CACpD,EACAO,CAAA,EAGIyB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,sBAAsB,CAAC,EAAGN,EACxC,CAACM,EAAa,iBAAiB,CAAC,EAAG/B,CAAA,CACpC,EAGC,OAAAI,EAAA,cAAC8B,EAAa,CAAA,UAAAtB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBkB,EAAY,OAAQ,UAAWJ,EAAa,gBAAgB,EAAG,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hf,GACCT,EAAA,cAAC,MAAI,CAAA,UAAWyB,CACd,EAAAzB,EAAA,cAAC,QAAM,CAAA,QAASmB,CAAO,EAAAV,CAAM,EAC5BN,GAAsBH,EAAA,cAAC,MAAI,CAAA,UAAW2B,EAAa,sCAAsC,CAAI,EAAAxB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW4B,CAAA,kBACbI,EAAK,CAAA,UAAWL,EAAa,cAAc,EAAG,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAQ,CAAA,EAC9GlC,EAAA,cAAC,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIuB,EACJ,KAAAR,EACA,UAAWkB,EACX,SAAAhC,EACA,IAAAK,EACA,SAAAa,EACA,gBAAe,CAAC,CAACA,EACjB,MAAAC,EACA,aAAAC,EACC,GAAGC,CAAA,EAEHb,CAEL,CAAA,CACF,CACF,CAEJ,CAAC,EAED8B,EAAepC"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - 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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":"sdA4CA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAmC,CAClH,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EAAOC,EAAS,QAChB,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACD,EAAAlB,EAEEmB,EAAOC,EAAQX,CAAQ,EACvBY,EAAcV,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDgB,EAAY5B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C2B,EAAWT,EAAQxB,EAAkBwB,CAAK,EAAI,OAE9CU,EAA4BC,EAChCC,EAAa,sBAAsB,EACnC,CACE,CAACA,EAAa,mCAAmC,CAAC,EAAGrB,IAAY,cACjE,CAACqB,EAAa,oCAAoC,CAAC,EAAGL,EACtD,CAACK,EAAa,+BAA+B,CAAC,EAAG/B,EACjD,CAAC+B,EAAa,gCAAgC,CAAC,EAAG9B,CACpD,EACAO,CAAA,EAGIwB,EAAgBF,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,sBAAsB,CAAC,EAAGL,EACxC,CAACK,EAAa,iBAAiB,CAAC,EAAG/B,CAAA,CACpC,EAED,uBACGiC,EAAa,CAAA,UAAArB,CAAA,kBACX,MAAI,CAAA,cAAaM,EAAQ,mBAAkBgB,EAAY,OAAQ,UAAWH,EAAa,gBAAgB,EAAG,MAAO,CAAE,SAAAH,IACjHO,EAAYtB,EAAOW,EAAMR,EAAkBf,CAAQ,EACpDG,EAAA,cAAC,OAAI,UAAWyB,mBACbO,EAAK,CAAA,UAAWL,EAAa,cAAc,EAAG,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,OAAQ,EAC9GlC,EAAA,cAAC,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIwB,EACJ,KAAAT,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAc,EACA,mBAAkBf,EAAM,kBAAkB,GAAK,OAC/C,gBAAe,CAAC,CAACe,EACjB,MAAAC,EACA,aAAAC,EACC,GAAGC,CAAA,EAEHd,CAEL,CAAA,CACF,CACF,CAEJ,CAAC,EAED8B,EAAepC"}

package/StatusDot.js

@@ -1,2 +1,2 @@
-import t from"react";import n from"classnames";import"./theme/grid.js";import"./hooks/useBreakpoint.js";import{AnalyticsId as g,IconSize as o}from"./constants.js";import{getColor as I}from"./theme/currys/color.js";import _ from"./components/Icons/Attachment.js";import E from"./components/Icons/Group.js";import{Icon as r}from"./components/Icons/Icon.js";import X from"./components/Icons/NoAccess.js";import h from"./components/Icons/Undo.js";import c from"./components/StatusDot/styles.module.scss";var v=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e.attachment="attachment",e))(v||{});const N=({variant:e})=>e==="recurring"?t.createElement(r,{size:o.XXSmall,svgIcon:h}):e==="group"?t.createElement(r,{size:o.XXSmall,svgIcon:E}):e==="noaccess"?t.createElement(r,{size:o.XXSmall,svgIcon:X,color:I("cherry",600)}):e==="attachment"?t.createElement(r,{size:o.XXSmall,svgIcon:_}):null,z=e=>{const{variant:s="info",text:l,className:m,testId:i}=e,a=s==="recurring"||s==="group"||s==="noaccess"||s==="attachment",d=s==="cancelled",p=n(c.statusdot,d&&c["statusdot--cancelled"],m),u=n(c.statusdot__dot,a?c["statusdot__dot--icon"]:c[`statusdot__dot--${s}`]),f=n(c.statusdot__label,a&&c["statusdot__label--icon"]);return t.createElement("div",{className:p,"data-testid":i,"data-analyticsid":g.StatusDot},t.createElement("span",{className:u},t.createElement(N,{variant:s})),t.createElement("span",{className:f},l))},k=z;export{k as S,v as a};
+import s from"react";import n from"classnames";import"./theme/grid.js";import"./hooks/useBreakpoint.js";import{AnalyticsId as h,IconSize as r}from"./constants.js";import{getColor as I}from"./theme/currys/color.js";import E from"./components/Icons/Attachment.js";import X from"./components/Icons/Group.js";import{Icon as c}from"./components/Icons/Icon.js";import v from"./components/Icons/NoAccess.js";import N from"./components/Icons/Undo.js";import t from"./components/StatusDot/styles.module.scss";var b=(e=>(e.onwhite="onwhite",e.ondark="ondark",e))(b||{}),w=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e.attachment="attachment",e))(w||{});const z=({variant:e})=>e==="recurring"?s.createElement(c,{size:r.XXSmall,svgIcon:N}):e==="group"?s.createElement(c,{size:r.XXSmall,svgIcon:X}):e==="noaccess"?s.createElement(c,{size:r.XXSmall,svgIcon:v,color:I("cherry",600)}):e==="attachment"?s.createElement(c,{size:r.XXSmall,svgIcon:E}):null,C=e=>{const{id:l,mode:m="onwhite",variant:o="info",text:i,className:d,testId:p}=e,a=o==="recurring"||o==="group"||o==="noaccess"||o==="attachment",u=o==="cancelled",f=n(t.statusdot,u&&t["statusdot--cancelled"],d),g=n(t.statusdot__dot,a?t["statusdot__dot--icon"]:t[`statusdot__dot--${o}`]),_=n(t.statusdot__label,a&&t["statusdot__label--icon"],m==="ondark"&&t["statusdot__label--on-dark"]);return s.createElement("div",{id:l,className:f,"data-testid":p,"data-analyticsid":h.StatusDot},s.createElement("span",{className:g},s.createElement(z,{variant:o})),s.createElement("span",{className:_},i))},H=C;export{H as S,b as a,w as b};
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(styles['statusdot__label'], hasIcon && styles[`statusdot__label--icon`]);\n\n  return (\n    <div className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAiBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,4BACNC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASC,CAAM,CAAA,EAC3CH,IAAY,wBACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASE,CAAO,CAAA,EAC5CJ,IAAY,WACdK,EAAA,cAACJ,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASI,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAG,CAAA,EAC/EP,IAAY,6BACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASM,CAAY,CAAA,EAGrD,KAcHC,EAA+CC,GAAA,CACnD,KAAM,CAAE,QAAAV,EAAU,OAAuB,KAAAW,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAH,EAE/DI,EACJd,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERe,EAAcf,IAAY,YAE1BgB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,sBAAsB,EAAGN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,sBAAsB,EAAIA,EAAO,mBAAmBlB,GAAS,CAAC,EACjIoB,EAAeH,EAAWC,EAAO,iBAAqBJ,GAAWI,EAAO,wBAAwB,CAAC,EAGrG,OAAAb,EAAA,cAAC,OAAI,UAAWW,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAClFhB,EAAA,cAAA,OAAA,CAAK,UAAWc,CACf,EAAAd,EAAA,cAACN,EAAc,CAAA,QAAAC,CAAkB,CAAA,CACnC,kBACC,OAAK,CAAA,UAAWoB,CAAe,EAAAT,CAAK,CACvC,CAEJ,EAEAW,EAAeb"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <div id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAkBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,4BACNC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASC,CAAM,CAAA,EAC3CH,IAAY,wBACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASE,CAAO,CAAA,EAC5CJ,IAAY,WACdK,EAAA,cAACJ,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASI,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAG,CAAA,EAC/EP,IAAY,6BACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASM,CAAY,CAAA,EAGrD,KAkBHC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAO,UAAwB,QAAAZ,EAAU,OAAuB,KAAAa,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAL,EAElGM,EACJhB,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERiB,EAAcjB,IAAY,YAE1BkB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,sBAAsB,EAAGN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,sBAAsB,EAAIA,EAAO,mBAAmBpB,GAAS,CAAC,EACjIsB,EAAeH,EACnBC,EAAO,iBACPJ,GAAWI,EAAO,wBAAwB,EAC1CR,IAAS,UAAyBQ,EAAO,2BAA2B,CAAA,EAIpE,OAAAf,EAAA,cAAC,MAAI,CAAA,GAAAM,EAAQ,UAAWO,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAC1FlB,EAAA,cAAA,OAAA,CAAK,UAAWgB,CACf,EAAAhB,EAAA,cAACN,EAAc,CAAA,QAAAC,CAAA,CAAkB,CACnC,kBACC,OAAK,CAAA,UAAWsB,CAAe,EAAAT,CAAK,CACvC,CAEJ,EAEAW,EAAef"}

package/Table.js

@@ -0,0 +1,2 @@
+import c,{useState as d,useRef as _,useEffect as u}from"react";import H from"classnames";import{AnalyticsId as R}from"./constants.js";import{Breakpoint as v,useBreakpoint as x}from"./hooks/useBreakpoint.js";import{useLayoutEvent as D}from"./hooks/useLayoutEvent.js";import{H as I}from"./HorizontalScroll.js";import C from"./components/Table/styles.module.scss";import{isTouchDevice as N}from"./utils/device.js";const O=t=>t.variant===a.centeredoverflow||t.variant===a.block,A=t=>C[`table--${t.variant}-${t.breakpoint}`],L=(t,o)=>v[t.breakpoint]-v[o.breakpoint],z=(t,o)=>v[t.breakpoint]>=o,P=(t,o)=>{if(Array.isArray(t))return t.sort(L),t.find(n=>z(n,o));if(t&&z(t,o))return t},$=(t,o,n,f)=>{const r=P(t,o),l=N(),e=n<=f;if(r)return r.variant===a.centeredoverflow&&!e&&r.fallbackVariant===a.horizontalscroll?{variant:l?a.horizontalscroll:a.none,breakpoint:r.breakpoint}:r.variant===a.centeredoverflow&&!e&&r.fallbackVariant!==a.centeredoverflow?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant===a.centeredoverflow?{variant:e?a.centeredoverflow:a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant!==a.horizontalscroll?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r},F=t=>t&&O(t)?A(t):void 0,G=(t,o)=>({left:`${(t-o)/2-8}px`});var a=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(a||{}),M=(t=>(t.compact="compact",t.normal="normal",t))(M||{});const X=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],tt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],et=({id:t,testId:o,className:n,children:f,breakpointConfig:r=X,mode:l="normal"})=>{const[e,W]=d(),[i,y]=d(0),[B,T]=d(0),[k,E]=d(window.innerWidth),b=_(null),p=x();u(()=>{W($(r,p,i,k))},[r,p,i,k]),u(()=>{var s,h,w;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&y(((s=b.current)==null?void 0:s.getBoundingClientRect().width)??0),(e==null?void 0:e.variant)==="centeredoverflow"&&T(((w=(h=b.current)==null?void 0:h.parentElement)==null?void 0:w.getBoundingClientRect().width)??0)},[e]),D(()=>E(window.innerWidth),["resize"],100);const U=(e==null?void 0:e.variant)==="centeredoverflow"?G(B,i):void 0,V=F(e),S=H(C.table,V,n),m=c.createElement("table",{className:S,id:t,"data-testid":o,"data-analyticsid":R.Table,ref:b,style:U},c.Children.map(f,s=>c.cloneElement(s,{mode:l})));return(e==null?void 0:e.variant)==="horizontalscroll"?c.createElement(I,{childWidth:i,testId:"horizontal-scroll"},m):m};export{M,a as R,et as T,X as d,tt as s};
+//# sourceMappingURL=Table.js.map