@helsenorge/designsystem-react 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [2.10.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.10.0&targetVersion=GTv2.10.1) (2023-01-03)
+
+
+### Bug Fixes
+
+*  listheader mapping fikset ved null child ([e62f9f8](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e62f9f8cdb9af731434f79a56efadb6207e06588))
+
+## [2.10.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.9.3&targetVersion=GTv2.10.0) (2023-01-03)
+
+
+### Features
+
+*  nytt komponent linkheader og linkheadertext som brukes i expanderlist og linklist ([5842ffe](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/5842ffe5d547d9f34b61c2409c9aeb957fcb947f)), closes [#289118](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/289118)
+
+
+### Bug Fixes
+
+*  oneliner får ikke unødvendig spacing ([4f1ac33](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/4f1ac33b8405c89f625939454e2600cf9eb2e0a3))
+
 ## [2.9.3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.9.2&targetVersion=GTv2.9.3) (2022-12-13)
 
 

package/Input.js

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

package/ListHeader.js

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

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  chevronIcon: SvgIcon,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  icon?: React.ReactElement\n) => {\n  return isComponent<ListHeaderProps>(element, ListHeader)\n    ? React.cloneElement(element as React.ReactElement<ListHeaderProps>, {\n        chevronIcon: chevronIcon,\n        icon: icon,\n        isHovered: isHovered,\n        size: size,\n      })\n    : element && (\n        <ListHeader chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n          {element}\n        </ListHeader>\n      );\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: AvatarProps;\n  listHeaderTextChildren: Array<ListHeaderTextProps>;\n  badgeChild?: BadgeProps;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: AvatarProps | undefined = undefined;\n  let listHeaderTextChildren: Array<ListHeaderTextProps> = [];\n  let badgeChild: BadgeProps | undefined = undefined;\n  let stringChildren: Array<string> = [];\n  let remainingChildren: Array<any> = [];\n\n  React.Children.map(children, (child: React.ReactNode | React.ReactElement<string>) => {\n    if ((child as React.ReactElement<AvatarType>).type === Avatar) {\n      avatarChild = child as AvatarProps;\n    } else if ((child as React.ReactElement<ListHeaderTextType>).type === ListHeaderText) {\n      listHeaderTextChildren.push(child as ListHeaderTextProps);\n    } else if ((child as React.ReactElement<BadgeType>).type === Badge) {\n      badgeChild = child as BadgeProps;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n\n  return isJsxChild || hasSpecialChildren || remainingChildren.length === 0\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--right']]: !mappedChildren.badgeChild,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && <span className={avatarClasses}>{mappedChildren.avatarChild}</span>}\n      <span className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {mappedChildren.stringChildren}\n        {mappedChildren.remainingChildren}\n      </span>\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","listHeaderTextChildren","badgeChild","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","_b","_a","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","Breakpoint","IconSize","Icon"],"mappings":"waAoBO,MAAMA,EAAmB,CAC9BC,EACAC,EACAC,EACAC,EACAC,IAEOC,EAA6BL,EAASM,CAAU,EACnDC,EAAM,aAAaP,EAAgD,CACjE,YAAAC,EACA,KAAAG,EACA,UAAAF,EACA,KAAAC,CACD,CAAA,EACDH,GACGO,EAAA,cAAAD,EAAA,CAAW,YAAAL,EAA0B,KAAAG,EAAY,UAAAF,EAAsB,KAAAC,CAAA,EACrEH,CACH,EAqBKQ,EAAc,CACzBC,EACAC,EAAa,KAOV,SACH,IAAIC,EACAC,EAAqD,CAAA,EACrDC,EACAC,EAAgC,CAAA,EAChCC,EAAgC,CAAA,EAEpCR,EAAM,SAAS,IAAIE,EAAWO,GAAwD,CAC/EA,EAAyC,OAASC,EACvCN,EAAAK,EACJA,EAAiD,OAASE,EACpEN,EAAuB,KAAKI,CAA4B,EAC9CA,EAAwC,OAASG,EAC9CN,EAAAG,EACJ,OAAOA,GAAU,SAC1BF,EAAe,KAAKE,CAAK,EAEzBD,EAAkB,KAAKC,CAAK,CAC9B,CACD,EAIK,MAAAI,EACJT,IAAgB,QAAaC,EAAuB,OAAS,GAAMC,IAAe,QAAaC,EAAe,OAAS,EAEzH,OAAOJ,GAAcU,GAAsBL,EAAkB,SAAW,EACpE,CAAE,YAAAJ,EAAa,uBAAAC,EAAwB,WAAAC,EAAY,eAAAC,EAAgB,kBAAAC,CACnE,EAAAP,GAAYa,GAAAC,EAAAP,EAAkB,KAAlB,YAAAO,EAAsB,QAAtB,YAAAD,EAA6B,SAAU,EAAI,CAC7D,EAEaf,EAA6BC,EAAM,WAAW,CAACgB,EAAwBC,IAAkC,CAC9G,KAAA,CAAE,UAAAC,EAAY,GAAI,YAAAxB,EAAa,SAAAQ,EAAU,KAAAL,EAAM,UAAAF,EAAW,KAAAC,EAAM,OAAAuB,CAAW,EAAAH,EAC3EI,EAAaC,IACbC,EAAqB1B,IAAS,SAAW,CAAC,EAAEF,GAAeG,GAC3D0B,EAAkB,OAAOrB,GAAa,SACtCsB,EAAiBvB,EAAYC,CAAQ,EACrCuB,EACJD,EAAe,aACdA,EAAe,wBAA0BA,EAAe,uBAAuB,OAAS,GACxFA,EAAe,mBAAqBA,EAAe,kBAAkB,OAAS,EAE3EE,EAAmBC,EACvBC,EAAO,eACP,CACE,CAACA,EAAO,qCAAsC,CAACL,EAC/C,CAACK,EAAO,mCAAoCH,CAC9C,EACAP,CAAA,EAEIW,EAAeF,EAAGC,EAAO,sBAAuB,CACpD,CAACA,EAAO,2CAA4CL,EACpD,CAACK,EAAO,8BAA+B,CAACL,EACxC,CAACK,EAAO,uBAAyBhC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAC9D,EACKkC,EAAiBH,EAAGC,EAAO,wBAAyB,CACxD,CAACA,EAAO,6CAA8CL,EACtD,CAACK,EAAO,gCAAiC,CAACJ,EAAe,WACzD,CAACI,EAAO,yBAA2BhC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAChE,EACKmC,EAAiBJ,EAAGC,EAAO,wBAAyB,CACxD,CAACA,EAAO,iCAAkCL,EAC1C,CAACK,EAAO,kCAAmC,CAACL,EAC5C,CAACK,EAAO,kCAAmC,CAACJ,EAAe,aAAe,CAAC3B,CAAA,CAC5E,EACKmC,EAAcL,EAAGC,EAAO,qBAAsB,CAClD,CAACA,EAAO,0CAA2CL,EACnD,CAACK,EAAO,2CAA4C,CAACL,EACrD,CAACK,EAAO,2CAA6ChC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAClF,EACKqC,EAAgBN,EAAGC,EAAO,uBAAwB,CACtD,CAACA,EAAO,4CAA6CL,EACrD,CAACK,EAAO,6CAA8C,CAACL,EACvD,CAACK,EAAO,6CAA+ChC,IAAQ,CAAC2B,GAAmB3B,CAAA,CACpF,EAED,OACGI,EAAA,cAAA,MAAA,CAAI,cAAamB,EAAQ,UAAWO,CAClC,EAAAJ,GAAsBzB,GACpBG,EAAA,cAAA,OAAA,CAAK,UAAWgC,CAAA,EACdhC,EAAM,aAAaH,EAAM,CACxB,KAAMuB,IAAec,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAxC,CAAA,CACD,CACH,EAEDC,IAAS,SAAW4B,EAAe,aAAgBxB,EAAA,cAAA,OAAA,CAAK,UAAWiC,CAAgB,EAAAT,EAAe,WAAY,EAC9GxB,EAAA,cAAA,OAAA,CAAK,UAAW+B,CACd,EAAAP,EAAe,uBACfA,EAAe,eACfA,EAAe,iBAClB,EACCA,EAAe,YAAexB,EAAA,cAAA,OAAA,CAAK,UAAW6B,CAAA,EAAeL,EAAe,UAAW,EACvFF,GAAsB5B,GACpBM,EAAA,cAAA,OAAA,CAAK,UAAW8B,CAAA,EACd9B,EAAA,cAAAoC,EAAA,CAAK,QAAS1C,EAAa,UAAAC,EAAsB,KAAMwC,EAAS,MAAQ,CAAA,CAC3E,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  chevronIcon: SvgIcon,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  icon?: React.ReactElement\n) => {\n  return isComponent<ListHeaderProps>(element, ListHeader)\n    ? React.cloneElement(element as React.ReactElement<ListHeaderProps>, {\n        chevronIcon: chevronIcon,\n        icon: icon,\n        isHovered: isHovered,\n        size: size,\n      })\n    : element && (\n        <ListHeader chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n          {element}\n        </ListHeader>\n      );\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: AvatarProps;\n  listHeaderTextChildren: Array<ListHeaderTextProps>;\n  badgeChild?: BadgeProps;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: AvatarProps | undefined = undefined;\n  let listHeaderTextChildren: Array<ListHeaderTextProps> = [];\n  let badgeChild: BadgeProps | undefined = undefined;\n  let stringChildren: Array<string> = [];\n  let remainingChildren: Array<any> = [];\n\n  React.Children.map(children, (child: React.ReactNode | React.ReactElement<string>) => {\n    if (child === null) return;\n    if ((child as React.ReactElement<AvatarType>).type === Avatar) {\n      avatarChild = child as AvatarProps;\n    } else if ((child as React.ReactElement<ListHeaderTextType>).type === ListHeaderText) {\n      listHeaderTextChildren.push(child as ListHeaderTextProps);\n    } else if ((child as React.ReactElement<BadgeType>).type === Badge) {\n      badgeChild = child as BadgeProps;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n\n  return isJsxChild || hasSpecialChildren || remainingChildren.length === 0\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--right']]: !mappedChildren.badgeChild,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && <span className={avatarClasses}>{mappedChildren.avatarChild}</span>}\n      <span className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {mappedChildren.stringChildren}\n        {mappedChildren.remainingChildren}\n      </span>\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","listHeaderTextChildren","badgeChild","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","_b","_a","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","Breakpoint","IconSize","Icon"],"mappings":"waAoBO,MAAMA,EAAmB,CAC9BC,EACAC,EACAC,EACAC,EACAC,IAEOC,EAA6BL,EAASM,CAAU,EACnDC,EAAM,aAAaP,EAAgD,CACjE,YAAAC,EACA,KAAAG,EACA,UAAAF,EACA,KAAAC,CACD,CAAA,EACDH,GACGO,EAAA,cAAAD,EAAA,CAAW,YAAAL,EAA0B,KAAAG,EAAY,UAAAF,EAAsB,KAAAC,CAAA,EACrEH,CACH,EAqBKQ,EAAc,CACzBC,EACAC,EAAa,KAOV,SACH,IAAIC,EACAC,EAAqD,CAAA,EACrDC,EACAC,EAAgC,CAAA,EAChCC,EAAgC,CAAA,EAEpCR,EAAM,SAAS,IAAIE,EAAWO,GAAwD,CAChFA,IAAU,OACTA,EAAyC,OAASC,EACvCN,EAAAK,EACJA,EAAiD,OAASE,EACpEN,EAAuB,KAAKI,CAA4B,EAC9CA,EAAwC,OAASG,EAC9CN,EAAAG,EACJ,OAAOA,GAAU,SAC1BF,EAAe,KAAKE,CAAK,EAEzBD,EAAkB,KAAKC,CAAK,EAC9B,CACD,EAIK,MAAAI,EACJT,IAAgB,QAAaC,EAAuB,OAAS,GAAMC,IAAe,QAAaC,EAAe,OAAS,EAEzH,OAAOJ,GAAcU,GAAsBL,EAAkB,SAAW,EACpE,CAAE,YAAAJ,EAAa,uBAAAC,EAAwB,WAAAC,EAAY,eAAAC,EAAgB,kBAAAC,CACnE,EAAAP,GAAYa,GAAAC,EAAAP,EAAkB,KAAlB,YAAAO,EAAsB,QAAtB,YAAAD,EAA6B,SAAU,EAAI,CAC7D,EAEaf,EAA6BC,EAAM,WAAW,CAACgB,EAAwBC,IAAkC,CAC9G,KAAA,CAAE,UAAAC,EAAY,GAAI,YAAAxB,EAAa,SAAAQ,EAAU,KAAAL,EAAM,UAAAF,EAAW,KAAAC,EAAM,OAAAuB,CAAW,EAAAH,EAC3EI,EAAaC,IACbC,EAAqB1B,IAAS,SAAW,CAAC,EAAEF,GAAeG,GAC3D0B,EAAkB,OAAOrB,GAAa,SACtCsB,EAAiBvB,EAAYC,CAAQ,EACrCuB,EACJD,EAAe,aACdA,EAAe,wBAA0BA,EAAe,uBAAuB,OAAS,GACxFA,EAAe,mBAAqBA,EAAe,kBAAkB,OAAS,EAE3EE,EAAmBC,EACvBC,EAAO,eACP,CACE,CAACA,EAAO,qCAAsC,CAACL,EAC/C,CAACK,EAAO,mCAAoCH,CAC9C,EACAP,CAAA,EAEIW,EAAeF,EAAGC,EAAO,sBAAuB,CACpD,CAACA,EAAO,2CAA4CL,EACpD,CAACK,EAAO,8BAA+B,CAACL,EACxC,CAACK,EAAO,uBAAyBhC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAC9D,EACKkC,EAAiBH,EAAGC,EAAO,wBAAyB,CACxD,CAACA,EAAO,6CAA8CL,EACtD,CAACK,EAAO,gCAAiC,CAACJ,EAAe,WACzD,CAACI,EAAO,yBAA2BhC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAChE,EACKmC,EAAiBJ,EAAGC,EAAO,wBAAyB,CACxD,CAACA,EAAO,iCAAkCL,EAC1C,CAACK,EAAO,kCAAmC,CAACL,EAC5C,CAACK,EAAO,kCAAmC,CAACJ,EAAe,aAAe,CAAC3B,CAAA,CAC5E,EACKmC,EAAcL,EAAGC,EAAO,qBAAsB,CAClD,CAACA,EAAO,0CAA2CL,EACnD,CAACK,EAAO,2CAA4C,CAACL,EACrD,CAACK,EAAO,2CAA6ChC,IAAQ,CAAC2B,GAAmB3B,CAAA,CAClF,EACKqC,EAAgBN,EAAGC,EAAO,uBAAwB,CACtD,CAACA,EAAO,4CAA6CL,EACrD,CAACK,EAAO,6CAA8C,CAACL,EACvD,CAACK,EAAO,6CAA+ChC,IAAQ,CAAC2B,GAAmB3B,CAAA,CACpF,EAED,OACGI,EAAA,cAAA,MAAA,CAAI,cAAamB,EAAQ,UAAWO,CAClC,EAAAJ,GAAsBzB,GACpBG,EAAA,cAAA,OAAA,CAAK,UAAWgC,CAAA,EACdhC,EAAM,aAAaH,EAAM,CACxB,KAAMuB,IAAec,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAxC,CAAA,CACD,CACH,EAEDC,IAAS,SAAW4B,EAAe,aAAgBxB,EAAA,cAAA,OAAA,CAAK,UAAWiC,CAAgB,EAAAT,EAAe,WAAY,EAC9GxB,EAAA,cAAA,OAAA,CAAK,UAAW+B,CACd,EAAAP,EAAe,uBACfA,EAAe,eACfA,EAAe,iBAClB,EACCA,EAAe,YAAexB,EAAA,cAAA,OAAA,CAAK,UAAW6B,CAAA,EAAeL,EAAe,UAAW,EACvFF,GAAsB5B,GACpBM,EAAA,cAAA,OAAA,CAAK,UAAW8B,CAAA,EACd9B,EAAA,cAAAoC,EAAA,CAAK,QAAS1C,EAAa,UAAAC,EAAsB,KAAMwC,EAAS,MAAQ,CAAA,CAC3E,CAEJ,CAEJ,CAAC"}

package/Select.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as k,IconSize as D,AVERAGE_CHARACTER_WIDTH_PX as T}from"./constants.js";import{Icon as z}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{getColor as w}from"./theme/currys/color.js";import{E as L}from"./ErrorWrapper.js";import{useUuid as X}from"./hooks/useUuid.js";const $=t=>{const a="2rem";return`calc(${t*T}px + ${a})`},q=(t,a)=>a?w("neutral",500):w(t?"cherry":"blueberry",600),K=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:f,children:v,concept:E="normal",disabled:n,error:C,errorText:i,label:m,selectId:p,name:h=p,mode:o,testId:y,width:d,required:I,value:_,...N}=t,b=X(p),u=o==="onblueberry",l=o==="oninvalid"||!!i||!!C,S=o==="ondark",W=q(l,!!n),g=d?$(d):void 0,x=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:S}),A=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:E==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},f),R=c(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:l});return r.createElement(L,{errorText:i},r.createElement("div",{"data-testid":y,"data-analyticsid":k.Select,className:e["select-wrapper"],style:{maxWidth:g}},m&&r.createElement("div",{className:x},r.createElement("label",{htmlFor:b},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:A},r.createElement(z,{className:e["select-arrow"],svgIcon:H,color:W,size:D.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:b,name:h,className:R,disabled:n,ref:a,required:I,value:_,...N},v))))});export{K as S};
+import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as D,IconSize as T,AVERAGE_CHARACTER_WIDTH_PX as q}from"./constants.js";import{Icon as z}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{getColor as f}from"./theme/currys/color.js";import{E as L}from"./ErrorWrapper.js";import{useUuid as V}from"./hooks/useUuid.js";const X=t=>{const a="2rem";return`calc(${t*q}px + ${a})`},$=(t,a)=>a?f("neutral",500):f(t?"cherry":"blueberry",600),O=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=V(p),w=o==="onblueberry",l=o==="oninvalid"||!!i||!!h,W=o==="ondark",g=$(l,!!n),x=d?X(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(L,{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(z,{className:e["select-arrow"],svgIcon:H,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))))});export{O as S};
 //# 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 selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\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}\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    ...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            value={value}\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","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAuCA,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,KACGC,CACD,EAAAhB,EAEEiB,EAAOC,EAAQT,CAAQ,EACvBU,EAAcR,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDc,EAAST,IAAS,SAClBU,EAAY3B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C0B,EAAWT,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CU,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCpB,IAAY,cACjE,CAACoB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC9B,EACjD,CAAC8B,EAAa,mCAAoC7B,CACpD,EACAO,CAAA,EAGIwB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB9B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA6B,EAAA,CAAa,UAAArB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBiB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hd,GACET,EAAA,cAAA,MAAA,CAAI,UAAWwB,CAAA,EACbxB,EAAA,cAAA,QAAA,CAAM,QAASkB,CAAO,EAAAT,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAW0B,EAAa,uCAA0C,EAAAvB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW2B,CAAA,EACb3B,EAAA,cAAA+B,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GjC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIsB,EACJ,KAAAP,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAa,EACA,MAAAC,EACC,GAAGC,CAAA,EAEHZ,CACH,CACF,CACF,CACF,CAEJ,CAAC"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\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"],"mappings":"yaAyCA,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,KACGC,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,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCrB,IAAY,cACjE,CAACqB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC/B,EACjD,CAAC+B,EAAa,mCAAoC9B,CACpD,EACAO,CAAA,EAGIyB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB/B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA8B,EAAA,CAAa,UAAAtB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBkB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hf,GACET,EAAA,cAAA,MAAA,CAAI,UAAWyB,CAAA,EACbzB,EAAA,cAAA,QAAA,CAAM,QAASmB,CAAO,EAAAV,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAW2B,EAAa,uCAA0C,EAAAxB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW4B,CAAA,EACb5B,EAAA,cAAAgC,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GlC,EAAA,cAAA,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,CACH,CACF,CACF,CACF,CAEJ,CAAC"}

package/components/ExpanderList/styles.module.scss

@@ -92,7 +92,8 @@
     color: $blueberry700;
   }
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     outline: getSpacer(4xs) solid $black;
   }
 

package/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormMode, FormVariant } from '../../constants';
 import { SvgIcon } from '../Icons';
-export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-labelledby'> {
+export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-labelledby' | 'onChange' | 'onKeyDown' | 'autoFocus'> {
     /** Adds custom classes to the element. */
     className?: string;
     /**  HMTL Input type */

package/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAEjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAQnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,CACpB;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAkHT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAEjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAQnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,GACjB,UAAU,GACV,WAAW,GACX,WAAW,CACd;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAsHT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Input/componentdata.json

@@ -1 +1 @@
-{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"HMTL Input type","name":"type","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\" | \"date\" | \"time\"","value":[{"value":"\"number\""},{"value":"\"text\""},{"value":"\"email\""},{"value":"\"password\""},{"value":"\"search\""},{"value":"\"tel\""},{"value":"\"url\""},{"value":"\"date\""},{"value":"\"time\""}]}},"inputId":{"defaultValue":null,"description":"input id","name":"inputId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"label id","name":"labelId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of input field in characters (approximate)","name":"width","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"number"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"icon":{"defaultValue":null,"description":"Icon to be displayed next to the input field","name":"icon","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"SvgIcon"}},"iconRight":{"defaultValue":null,"description":"Places the icon to the right","name":"iconRight","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the color profile of the input","name":"mode","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the input","name":"variant","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"error":{"defaultValue":null,"description":"Activates Error style for the input","name":"error","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"afterInputChildren":{"defaultValue":null,"description":"Component shown after input","name":"afterInputChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"min":{"defaultValue":null,"description":"","name":"min","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"max":{"defaultValue":null,"description":"","name":"max","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"HMTL Input type","name":"type","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\" | \"date\" | \"time\"","value":[{"value":"\"number\""},{"value":"\"text\""},{"value":"\"email\""},{"value":"\"password\""},{"value":"\"search\""},{"value":"\"tel\""},{"value":"\"url\""},{"value":"\"date\""},{"value":"\"time\""}]}},"inputId":{"defaultValue":null,"description":"input id","name":"inputId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"label id","name":"labelId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of input field in characters (approximate)","name":"width","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"number"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"icon":{"defaultValue":null,"description":"Icon to be displayed next to the input field","name":"icon","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"SvgIcon"}},"iconRight":{"defaultValue":null,"description":"Places the icon to the right","name":"iconRight","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the color profile of the input","name":"mode","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the input","name":"variant","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"error":{"defaultValue":null,"description":"Activates Error style for the input","name":"error","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"afterInputChildren":{"defaultValue":null,"description":"Component shown after input","name":"afterInputChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"min":{"defaultValue":null,"description":"","name":"min","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"max":{"defaultValue":null,"description":"","name":"max","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLInputElement>"}},"onKeyDown":{"defaultValue":null,"description":"","name":"onKeyDown","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"KeyboardEventHandler<HTMLInputElement>"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}}}}

package/components/Input/styles.module.scss

@@ -8,11 +8,6 @@
   @include input-wrapper;
 
   margin: getSpacer(l) 0;
-
-  &__after-content-wrapper {
-    display: flex;
-    align-items: center;
-  }
 }
 
 .input-wrapper:first-of-type {

package/components/Input/styles.module.scss.d.ts

@@ -11,7 +11,6 @@ export type Styles = {
   'content-wrapper--transparent': string;
   'content-wrapper--with-icon': string;
   'input-wrapper': string;
-  'input-wrapper__after-content-wrapper': string;
   'input-wrapper__after-label-children': string;
   'input-wrapper__label-wrapper': string;
   'input-wrapper__label-wrapper--on-dark': string;

package/components/LinkList/styles.module.scss

@@ -118,7 +118,8 @@
         background-color: $neutral50;
       }
     }
-    &:focus {
+    &:focus,
+    &:focus-visible {
       outline: getSpacer(4xs) solid $black;
       outline-offset: -1px;
     }

package/components/ListHeader/ListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,eACX,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CA8B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,eACX,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,oDAc1B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,mBAAmB,CAAC;;oBAElC,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CA+B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAqEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/components/ListHeader/styles.module.scss

@@ -40,7 +40,8 @@
     &--spacing {
       margin-left: getSpacer(s);
     }
-    :focus > & {
+    :focus > &,
+    :focus-visible > & {
       border-color: $black;
     }
   }

package/components/Select/Select.d.ts

@@ -24,6 +24,8 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
     selectId?: string;
     /** Width of select in characters (approximate) */
     width?: number;
+    /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
+    defaultValue?: string | number;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAO9F,aAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClI,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yHAAyH;IACzH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,eAAO,MAAM,MAAM,uFA2EjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAO9F,aAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClI,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yHAAyH;IACzH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAaD,eAAO,MAAM,MAAM,uFA8EjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Select/componentdata.json

@@ -1 +1 @@
-{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}
+{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"defaultValue":{"defaultValue":null,"description":"Gives defaultvalue to the comp. Preferred over selected prop on option by react","name":"defaultValue","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string | number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {