@helsenorge/designsystem-react 6.2.0 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [6.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.2.0&targetVersion=GTv6.3.0) (2024-02-22)
+
+### Features
+
+- select og datepicker støtter autoComplete-attributt
+  ([84c34af](https://github.com/helsenorge/designsystem/commit/84c34afd23a5d236573f5b3b3480175708fb9ecc)), closes
+  [#314727](https://github.com/helsenorge/designsystem/issues/314727) [#314932](https://github.com/helsenorge/designsystem/issues/314932)
+
+### Bug Fixes
+
+- badge er inline-flex og skalerer ikke til full bredde
+  ([ac485e9](https://github.com/helsenorge/designsystem/commit/ac485e923223e7a92ede0743e924a2c39c40bbb8))
+- spacing i promopanel ([60a00bd](https://github.com/helsenorge/designsystem/commit/60a00bdb88d3b35b2e7b1449832674a9bf35ee46))
+- tabell endrer responsiv oppførsel når den vises
+  ([0c21208](https://github.com/helsenorge/designsystem/commit/0c212084cfa5161842dbb0339ae85c82e3c42046)), closes
+  [#315245](https://github.com/helsenorge/designsystem/issues/315245)
+
+## [6.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.3&targetVersion=GTv6.2.0) (2024-02-20)
+
+### Features
+
+- slider selected prop lagt til ([1109d39](https://github.com/helsenorge/designsystem/commit/1109d399778120742c387ff69a389e95bbe2d143)),
+  closes [#319626](https://github.com/helsenorge/designsystem/issues/319626)
+
 ## [6.1.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.2&targetVersion=GTv6.1.3) (2024-02-14)
 
 ### Bug Fixes

package/components/Badge/styles.module.scss

@@ -1,7 +1,7 @@
 @import '../../scss/palette';
 
 .badge {
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;

package/components/GridExample/GridExample.js

@@ -1,5 +1,5 @@
 import e from "react";
-const t = ({ children: a }) => /* @__PURE__ */ e.createElement("div", { className: "container" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, a))), l = t;
+const t = ({ children: a }) => /* @__PURE__ */ e.createElement("div", { className: "container mt-5" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, a))), l = t;
 export {
   t as GridExample,
   l as default

package/components/GridExample/GridExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React","GridExample$1"],"mappings":";AAEO,MAAMA,IAAwB,CAAC,EAAE,UAAAC,EACtC,MAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,YAAA,mCACZ,OAAI,EAAA,WAAU,SACZA,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,SAAOD,CAAS,CACjC,CACF,GAGFE,IAAeH;"}
+{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container mt-5\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React","GridExample$1"],"mappings":";AAEO,MAAMA,IAAwB,CAAC,EAAE,UAAAC,EACtC,MAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,iBAAA,mCACZ,OAAI,EAAA,WAAU,SACZA,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,SAAOD,CAAS,CACjC,CACF,GAGFE,IAAeH;"}

package/components/Input/Input.js

@@ -35,7 +35,7 @@ const Se = (e, u, f) => {
     testId: q,
     disabled: l,
     readOnly: G,
-    autoComplete: j,
+    autoComplete: j = "off",
     afterInputChildren: J,
     rightOfInput: Q,
     width: k,

package/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}

package/components/PromoPanel/PromoPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,QAAQ,GAAG,qBAAqB,CAAC;IAChD,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6DzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/PromoPanel/PromoPanel.js

@@ -1,17 +1,17 @@
 import t from "react";
 import h from "classnames";
 import { AnalyticsId as C, IconSize as i } from "../../constants.js";
-import { useBreakpoint as E, Breakpoint as a } from "../../hooks/useBreakpoint.js";
-import { useHover as P } from "../../hooks/useHover.js";
+import { useBreakpoint as P, Breakpoint as a } from "../../hooks/useBreakpoint.js";
+import { useHover as b } from "../../hooks/useHover.js";
 import { getColor as m } from "../../theme/currys/color.js";
-import { Icon as b } from "../Icon/Icon.js";
-import g from "../Icons/ArrowRight.js";
+import { Icon as g } from "../Icon/Icon.js";
+import E from "../Icons/ArrowRight.js";
 import _ from "../Icons/ArrowUpRight.js";
 import v from "../LazyIllustration/LazyIllustration.js";
 import y from "../Title/Title.js";
 import n from "./styles.module.scss";
 const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e.children }) : e.linkHtmlMarkup === "button" ? /* @__PURE__ */ t.createElement("button", { type: "button", onClick: e.linkOnClick }, e.children) : /* @__PURE__ */ t.createElement("a", { href: e.href, target: e.target, onClick: e.linkOnClick }, e.children), N = (e) => {
-  const { isHovered: c, hoverRef: u } = P(), { color: l = "neutral", titleHtmlMarkup: k = "h2", linkHtmlMarkup: f = "a" } = e, r = E(), s = h(
+  const { isHovered: c, hoverRef: u } = b(), { color: l = "neutral", titleHtmlMarkup: k = "h2", linkHtmlMarkup: f = "a" } = e, r = P(), s = h(
     n.promopanel,
     n[`promopanel--${l}`],
     !e.illustration && n["promopanel--no-illustration"]
@@ -25,7 +25,7 @@ const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e
       linkOnClick: e.linkOnClick
     },
     e.title || e.children
-  ), d = (() => r >= a.md ? 156 : 120)();
+  ), d = (() => r >= a.md ? 156 : 110)();
   return /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": e.testId, "data-analyticsid": C.PromoPanel, ref: u }, e.illustration && /* @__PURE__ */ t.createElement(
     v,
     {
@@ -34,16 +34,17 @@ const I = (e) => e.linkComponent ? t.cloneElement(e.linkComponent, { children: e
       color: l,
       className: n.promopanel__illustration
     }
-  ), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" }, o), e.title ? e.children : o), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__icon }, /* @__PURE__ */ t.createElement(
-    b,
+  ), /* @__PURE__ */ t.createElement("div", { className: n.promopanel__content }, e.title && /* @__PURE__ */ t.createElement(y, { htmlMarkup: k, appearance: "title3" }, o), e.title ? e.children : o), /* @__PURE__ */ t.createElement(
+    g,
     {
-      svgIcon: e.target === "_blank" ? _ : g,
+      className: n.promopanel__icon,
+      svgIcon: e.target === "_blank" ? _ : E,
       size: r >= a.md ? i.Small : i.XSmall,
       isHovered: c,
       color: m("blueberry", 500),
       hoverColor: m("blueberry", 600)
     }
-  )));
+  ));
 }, T = N;
 export {
   T as default

package/components/PromoPanel/PromoPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 120;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <div className={styles.promopanel__icon}>\n        <Icon\n          svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n          size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n          isHovered={isHovered}\n          color={getColor('blueberry', 500)}\n          hoverColor={getColor('blueberry', 600)}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA,GAIpBe,KAAoB,MACpBN,KAAcO,EAAW,KACpB,MAGF;AAGT,SACGf,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBiB,EAAY,YAAY,KAAKb,EAAA,GAC1GJ,EAAM,gBACLC,gBAAAA,EAAA;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,kBAAkBlB,EAAM;AAAA,MACxB,MAAMe;AAAA,MACN,OAAAT;AAAA,MACA,WAAWO,EAAO;AAAA,IAAA;AAAA,EAAA,GAGrBZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,SAC7C,GAAAO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACCb,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,iBACrB,GAAAZ,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,SAASpB,EAAM,WAAW,WAAWqB,IAAeC;AAAA,MACpD,MAAMb,KAAcO,EAAW,KAAKO,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAApB;AAAA,MACA,OAAOqB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAEzC,CAAA,CACF;AAEJ,GAEAC,IAAevB;"}
+{"version":3,"file":"PromoPanel.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, { children: props.children });\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA,GAIpBe,KAAoB,MACpBN,KAAcO,EAAW,KACpB,MAGF;AAGT,SACGf,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBiB,EAAY,YAAY,KAAKb,EAAA,GAC1GJ,EAAM,gBACLC,gBAAAA,EAAA;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,kBAAkBlB,EAAM;AAAA,MACxB,MAAMe;AAAA,MACN,OAAAT;AAAA,MACA,WAAWO,EAAO;AAAA,IAAA;AAAA,EACpB,mCAED,OAAI,EAAA,WAAWA,EAAO,oBACpB,GAAAb,EAAM,SACLC,gBAAAA,EAAA,cAACkB,GAAM,EAAA,YAAYZ,GAAiB,YAAY,YAC7CO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACAb,gBAAAA,EAAA;AAAA,IAACmB;AAAA,IAAA;AAAA,MACC,WAAWP,EAAO;AAAA,MAClB,SAASb,EAAM,WAAW,WAAWqB,IAAeC;AAAA,MACpD,MAAMb,KAAcO,EAAW,KAAKO,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAApB;AAAA,MACA,OAAOqB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAAA,CAEzC;AAEJ,GAEAC,IAAevB;"}

package/components/PromoPanel/styles.module.scss

@@ -12,7 +12,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
   align-items: center;
   border-radius: 8px;
   padding-left: getSpacer(s);
-  padding-right: getSpacer(s);
+  padding-right: getSpacer(2xs);
   transition: background-color 0.15s ease-in-out;
 
   &:focus-within {
@@ -23,6 +23,10 @@ $colors: 'neutral', 'blueberry', 'cherry';
     padding-left: 0;
   }
 
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    padding-right: getSpacer(s);
+  }
+
   @media (min-width: map.get($grid-breakpoints, md)) {
     padding-right: getSpacer(l);
   }
@@ -56,8 +60,8 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__content {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: getSpacer(3xs);
-    max-width: 696px;
     padding-top: getSpacer(m);
     padding-bottom: getSpacer(m);
 
@@ -81,15 +85,14 @@ $colors: 'neutral', 'blueberry', 'cherry';
   }
 
   &__icon {
-    margin-left: auto;
-    padding-left: getSpacer(s);
+    margin-left: getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, xs)) {
-      display: none;
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
     }
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
-      display: block;
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      margin-left: getSpacer(l);
     }
   }
 }

package/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormMode } from '../../constants';
 type SelectConcept = 'normal' | 'transparent';
-export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange'> {
+export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'> {
     /** Component shown after label */
     afterLabelChildren?: React.ReactNode;
     /** Sets the content of the select element. */

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;AAI1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAU9F,KAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,kBAAkB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAC7E;IACD,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,KAAK,CAAC,SAAS,CAAC;IACxB,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,uFAqEjB,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;AAI1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAU9F,KAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,kBAAkB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,CAC9F;IACD,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,KAAK,CAAC,SAAS,CAAC;IACxB,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,uFAuEjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Select/Select.js

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

package/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange'\n  > {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MAA+B;AACxD,QAAMC,IAAe;AAErB,SAAO,QAAQD,IAAaE,CAA0B,QAAQD,CAAY;AAC5E,GAEME,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,oBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAT;AAAA,IACA,OAAAU;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAlB,GAEEmB,IAAOC,EAAQX,CAAQ,GACvBY,IAAcV,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACJ,KAAa,CAAC,CAACD,GACnDgB,IAAY5B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C2B,IAAWT,IAAQxB,EAAkBwB,CAAK,IAAI,QAE9CU,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGrB,MAAY;AAAA,MACjE,CAACqB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAG/B;AAAA,MACjD,CAAC+B,EAAa,gCAAgC,CAAC,GAAG9B;AAAA,IACpD;AAAA,IACAO;AAAA,EAAA,GAGIwB,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAG/B;AAAA,EAAA,CACpC;AAED,yCACGiC,GAAa,EAAA,WAAArB,EAAA,mCACX,OAAI,EAAA,eAAaM,GAAQ,oBAAkBgB,EAAY,QAAQ,WAAWH,EAAa,gBAAgB,GAAG,OAAO,EAAE,UAAAH,OACjHO,EAAYtB,GAAOW,GAAMR,GAAkBf,CAAQ,GACpDG,gBAAAA,EAAA,cAAC,SAAI,WAAWyB,qCACbO,GAAK,EAAA,WAAWL,EAAa,cAAc,GAAG,SAASM,GAAa,OAAOV,GAAW,MAAMW,EAAS,QAAQ,GAC9GlC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAIwB;AAAA,MACJ,MAAAT;AAAA,MACA,WAAWiB;AAAA,MACX,UAAA/B;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBf,EAAM,kBAAkB,KAAK;AAAA,MAC/C,iBAAe,CAAC,CAACe;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,IAEHd;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAED8B,IAAepC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MAA+B;AACxD,QAAMC,IAAe;AAErB,SAAO,QAAQD,IAAaE,CAA0B,QAAQD,CAAY;AAC5E,GAEME,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,oBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAT;AAAA,IACA,OAAAU;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EACD,IAAAnB,GAEEoB,IAAOC,EAAQZ,CAAQ,GACvBa,IAAcX,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACJ,KAAa,CAAC,CAACD,GACnDiB,IAAY7B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C4B,IAAWV,IAAQxB,EAAkBwB,CAAK,IAAI,QAE9CW,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGtB,MAAY;AAAA,MACjE,CAACsB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGhC;AAAA,MACjD,CAACgC,EAAa,gCAAgC,CAAC,GAAG/B;AAAA,IACpD;AAAA,IACAO;AAAA,EAAA,GAGIyB,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGhC;AAAA,EAAA,CACpC;AAED,yCACGkC,GAAa,EAAA,WAAAtB,EAAA,mCACX,OAAI,EAAA,eAAaM,GAAQ,oBAAkBiB,EAAY,QAAQ,WAAWH,EAAa,gBAAgB,GAAG,OAAO,EAAE,UAAAH,OACjHO,EAAYvB,GAAOY,GAAMT,GAAkBf,CAAQ,GACpDG,gBAAAA,EAAA,cAAC,SAAI,WAAW0B,qCACbO,GAAK,EAAA,WAAWL,EAAa,cAAc,GAAG,SAASM,GAAa,OAAOV,GAAW,MAAMW,EAAS,QAAQ,GAC9GnC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAIyB;AAAA,MACJ,MAAAV;AAAA,MACA,WAAWkB;AAAA,MACX,UAAAhC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBf,EAAM,kBAAkB,KAAK;AAAA,MAC/C,iBAAe,CAAC,CAACe;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGC;AAAA,IAAA;AAAA,IAEHf;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAED+B,KAAerC;"}

package/components/Slider/Slider.d.ts

@@ -28,6 +28,8 @@ interface SliderProps {
     step?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets the value of the slider */
+    value?: number;
 }
 export declare const Slider: React.FC<SliderProps>;
 export default Slider;

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2SxC,CAAC;AAEF,eAAe,MAAM,CAAC"}