@helsenorge/designsystem-react 6.1.3 → 6.3.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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
+
+- promopanel har ikke lenger lg breakpoint
+  ([2c332e5](https://github.com/helsenorge/designsystem/commit/2c332e5a17aca128d09a293a56daf484a2a26d53)), closes
+  [#319556](https://github.com/helsenorge/designsystem/issues/319556)
+
 ## [6.1.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.1&targetVersion=GTv6.1.2) (2024-02-12)
 
 ### 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

@@ -20,7 +20,9 @@ interface SliderProps {
     maxValue?: number;
     /** Function to be called when the value state has changed. */
     onChange?: (value: number) => void;
-    /** Sets the steps data for the slider*/
+    /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */
+    selected?: boolean;
+    /** Sets the steps data for the slider */
     steps?: SliderStep[];
     /** Sets the step to move per point in the slider */
     step?: number;

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,wCAAwC;IACxC,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,CA4QxC,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;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/Slider.js

@@ -1,165 +1,174 @@
-import a, { useState as R, useRef as U, useEffect as h } from "react";
-import S from "classnames";
-import { AnalyticsId as F } from "../../constants.js";
-import { useSize as G } from "../../hooks/useSize.js";
-import { useUuid as j } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as J } from "../../utils/accessibility.js";
-import Q from "../Title/Title.js";
-import o from "./styles.module.scss";
-const Y = (u, f, l) => {
-  const [v, n] = R(u), E = (t) => {
-    t > l ? n(l) : t < f ? n(f) : n(t);
+import o, { useState as M, useRef as T, useEffect as E } from "react";
+import A from "classnames";
+import { AnalyticsId as Y } from "../../constants.js";
+import { useSize as Z } from "../../hooks/useSize.js";
+import { useUuid as I } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as x } from "../../utils/accessibility.js";
+import V from "../Title/Title.js";
+import a from "./styles.module.scss";
+const ee = (u, m, l) => {
+  const [v, n] = M(u), y = (r) => {
+    r > l ? n(l) : r < m ? n(m) : n(r);
   };
-  return h(() => {
-    n((l - f) / 2 + f);
-  }, [f, l]), [v, E];
-}, Z = ({
+  return E(() => {
+    n((l - m) / 2 + m);
+  }, [m, l]), [v, y];
+}, te = ({
   title: u,
-  ariaLabel: f,
+  ariaLabel: m,
   labelLeft: l,
   labelRight: v,
   disabled: n = !1,
-  onChange: E,
-  steps: t,
+  onChange: y,
+  steps: r,
   step: _ = 1,
   minValue: i = 0,
-  maxValue: s = t ? t.length - 1 : 100,
-  testId: $
+  maxValue: s = r ? r.length - 1 : 100,
+  selected: w = !0,
+  testId: z
 }) => {
-  const [A, I] = R(!1), [d, m] = Y((s - i) / 2 + i, i, s), k = j(), y = j(), w = j(), N = U(null), b = U(null), { width: M } = G(N) || { width: 0 }, C = s / 10;
-  h(() => {
-    const r = () => {
-      I(!1);
+  const [C, D] = M(!1), [k, L] = M(w), [d, f] = ee((s - i) / 2 + i, i, s), g = I(), S = I(), N = I(), b = T(null), P = T(null), { width: U } = Z(b) || { width: 0 }, R = s / 10;
+  E(() => {
+    const t = () => {
+      D(!1);
     };
-    return document.addEventListener("pointerup", r), () => {
-      document.removeEventListener("pointerup", r);
+    return document.addEventListener("pointerup", t), () => {
+      document.removeEventListener("pointerup", t);
     };
   }, []);
-  const D = (r) => {
-    var L;
-    const e = ((L = N.current) == null ? void 0 : L.getBoundingClientRect().x) ?? 0, c = (r - e) / M, g = s - i;
-    let p = c * g + i;
-    return p = Math.round(p / _) * _, p = Math.max(i, Math.min(s, p)), p;
+  const $ = (t) => {
+    var X;
+    const e = ((X = b.current) == null ? void 0 : X.getBoundingClientRect().x) ?? 0, c = (t - e) / U, p = s - i;
+    let h = c * p + i;
+    return h = Math.round(h / _) * _, h = Math.max(i, Math.min(s, h)), h;
   };
-  h(() => {
-    const r = (e) => {
-      if (!n && A) {
-        const c = D(e.clientX);
-        m(c);
+  E(() => {
+    const t = (e) => {
+      if (!n && C) {
+        const c = $(e.clientX);
+        f(c);
       }
     };
-    return document.addEventListener("pointermove", r), () => {
-      document.removeEventListener("pointermove", r);
+    return document.addEventListener("pointermove", t), () => {
+      document.removeEventListener("pointermove", t);
     };
-  }, [A]), h(() => {
-    !n && E && E(d);
-  }, [d]);
-  const B = (r) => {
+  }, [C]), E(() => {
+    !n && k && y && y(d);
+  }, [d, k]), E(() => {
+    w !== k && L(w);
+  }, [w]);
+  const B = () => {
+    k === !1 && L(!0);
+  }, K = (t) => {
     if (n)
       return;
     let e = !1;
-    switch (r.key) {
+    switch (t.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        m(d - _), e = !0;
+        f(d - _), e = !0;
         break;
       case "PageDown":
-        m(d - C), e = !0;
+        f(d - R), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        m(d + _), e = !0;
+        f(d + _), e = !0;
         break;
       case "PageUp":
-        m(d + C), e = !0;
+        f(d + R), e = !0;
         break;
       case "Home":
-        m(i), e = !0;
+        f(i), e = !0;
         break;
       case "End":
-        m(s), e = !0;
+        f(s), e = !0;
         break;
     }
-    e && (r.preventDefault(), r.stopPropagation());
-  }, X = (r) => {
+    e && (B(), t.preventDefault(), t.stopPropagation());
+  }, H = (t) => {
     var c;
     if (n)
       return;
-    const e = D(r.clientX);
-    m(e), (c = b.current) == null || c.focus();
-  }, T = (r) => {
+    B();
+    const e = $(t.clientX);
+    f(e), (c = P.current) == null || c.focus();
+  }, O = (t) => {
     var e;
-    n || (I(!0), r.preventDefault(), r.stopPropagation(), (e = b.current) == null || e.focus());
-  }, z = s !== i ? M / (s - i) * (d - i) : 0, K = () => {
-    const r = t ? Math.round((d - i) / _) : null;
-    if (t && r !== null && r >= 0 && r < t.length) {
-      const e = t[r], c = e.emojiUniCode, g = typeof e.label < "u" ? e.label.toString() : void 0;
-      return c && g ? `${c} ${g}` : c || g;
+    n || (D(!0), t.preventDefault(), t.stopPropagation(), (e = P.current) == null || e.focus());
+  }, W = s !== i ? U / (s - i) * (d - i) : 0, q = () => {
+    const t = r ? Math.round((d - i) / _) : null;
+    if (r && t !== null && t >= 0 && t < r.length) {
+      const e = r[t], c = e.emojiUniCode, p = typeof e.label < "u" ? e.label.toString() : void 0;
+      return c && p ? `${c} ${p}` : c || p;
     }
-  }, H = J({
-    label: f,
+  }, F = x({
+    label: m,
     id: (() => {
       if (u && l && v)
-        return [k, y, w].join(" ");
+        return [g, S, N].join(" ");
       if (u && l)
-        return [k, y].join(" ");
+        return [g, S].join(" ");
       if (u && v)
-        return [k, w].join(" ");
+        return [g, N].join(" ");
       if (u)
-        return k;
+        return g;
     })(),
     prefer: "label"
-  }), P = (r, e) => ({ left: `${r / (e - 1) * 100}%` }), O = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__emoji-container"] }, t == null ? void 0 : t.map((r, e) => r.emojiUniCode && /* @__PURE__ */ a.createElement(
+  }), j = (t, e) => ({ left: `${t / (e - 1) * 100}%` }), G = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__emoji-container"] }, r == null ? void 0 : r.map((t, e) => t.emojiUniCode && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "emoji" + e,
-      className: o.slider__emoji,
-      style: P(e, t.length)
+      className: a.slider__emoji,
+      style: j(e, r.length)
     },
-    r.emojiUniCode
-  ))), W = () => t == null ? void 0 : t.map((r, e) => /* @__PURE__ */ a.createElement("div", { key: "step" + e, className: o.slider__track__step, style: P(e, t.length) })), q = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__value-container"] }, t == null ? void 0 : t.map((r, e) => typeof r.label < "u" && /* @__PURE__ */ a.createElement(
+    t.emojiUniCode
+  ))), J = () => r == null ? void 0 : r.map((t, e) => /* @__PURE__ */ o.createElement("div", { key: "step" + e, className: a.slider__track__step, style: j(e, r.length) })), Q = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__value-container"] }, r == null ? void 0 : r.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "label" + e,
-      className: o.slider__value,
-      style: P(e, t.length)
+      className: a.slider__value,
+      style: j(e, r.length)
     },
-    r.label
+    t.label
   )));
-  return /* @__PURE__ */ a.createElement("div", { className: o.slider, "data-testid": $, "data-analyticsid": F.Slider }, u && /* @__PURE__ */ a.createElement(Q, { className: o.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: k }, u), /* @__PURE__ */ a.createElement("div", { className: o["slider__content-container"] }, O(), /* @__PURE__ */ a.createElement(
+  return /* @__PURE__ */ o.createElement("div", { className: a.slider, "data-testid": z, "data-analyticsid": Y.Slider }, u && /* @__PURE__ */ o.createElement(V, { className: a.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: g }, u), /* @__PURE__ */ o.createElement("div", { className: a["slider__content-container"] }, G(), /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: N,
-      className: S(o["slider__track-wrapper"], n && o["slider__track-wrapper--disabled"]),
-      onClick: X,
-      onPointerDown: T
+      ref: b,
+      className: A(a["slider__track-wrapper"], n && a["slider__track-wrapper--disabled"]),
+      onClick: H,
+      onPointerDown: O
     },
-    /* @__PURE__ */ a.createElement("div", { className: S(o.slider__track, n && o["slider__track--disabled"]) }, W()),
-    /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: A(a.slider__track, n && a["slider__track--disabled"]) }, J()),
+    /* @__PURE__ */ o.createElement(
       "div",
       {
         role: n ? void 0 : "slider",
-        ref: b,
-        className: S(o.slider__marker, n && o["slider__marker--disabled"]),
+        ref: P,
+        className: A(a.slider__marker, {
+          [a["slider__marker--disabled"]]: n,
+          [a["slider__marker--selected"]]: k
+        }),
         style: {
-          left: `${z}px`
+          left: `${W}px`
         },
-        onKeyDown: B,
+        onKeyDown: K,
         "aria-valuenow": d,
-        "aria-valuetext": K(),
+        "aria-valuetext": q(),
         "aria-valuemin": i,
         "aria-valuemax": s,
         tabIndex: n ? void 0 : 0,
         "aria-disabled": n,
-        ...H
+        ...F
       }
     )
-  ), q()), (l || v) && /* @__PURE__ */ a.createElement("span", { className: o.slider__options }, /* @__PURE__ */ a.createElement("span", { id: y }, l), /* @__PURE__ */ a.createElement("span", { id: w }, v)));
-}, le = Z;
+  ), Q()), (l || v) && /* @__PURE__ */ o.createElement("span", { className: a.slider__options }, /* @__PURE__ */ o.createElement("span", { id: S }, l), /* @__PURE__ */ o.createElement("span", { id: N }, v)));
+}, fe = te;
 export {
-  Z as Slider,
-  le as default
+  te as Slider,
+  fe as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the steps data for the slider*/\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(selected);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(value);\n    }\n  }, [value, selectedState]);\n\n  useEffect(() => {\n    if (selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    handleSelected();\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -91,17 +91,19 @@ $mark-size: getSpacer(l);
       outline: 0.15rem solid $black;
     }
 
-    &::after {
-      content: '';
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 0.1rem solid $black;
-      border-radius: 10rem;
-      background-color: $blueberry600;
-
-      :hover > &,
-      :focus > & {
-        background-color: $blueberry700;
+    &--selected {
+      &::after {
+        content: '';
+        width: 1.25rem;
+        height: 1.25rem;
+        border: 0.1rem solid $black;
+        border-radius: 10rem;
+        background-color: $blueberry600;
+
+        :hover > &,
+        :focus > & {
+          background-color: $blueberry700;
+        }
       }
     }
 

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

@@ -5,6 +5,7 @@ export type Styles = {
   'slider__emoji-container': string;
   slider__marker: string;
   'slider__marker--disabled': string;
+  'slider__marker--selected': string;
   slider__options: string;
   slider__title: string;
   slider__track: string;

package/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAOtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AACD,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oJAAoJ;IACpJ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yJAAyJ;IACzJ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0DjC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,UAAU,EAAiB,MAAM,2BAA2B,CAAC;AAQtE,oBAAY,sBAAsB;IAChC,iDAAiD;IACjD,IAAI,SAAS;IACb,6FAA6F;IAC7F,gBAAgB,qBAAqB;IACrC,sEAAsE;IACtE,gBAAgB,qBAAqB;IACrC,+BAA+B;IAC/B,KAAK,UAAU;CAChB;AACD,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AACD,MAAM,WAAW,gBAAgB;IAC/B,qHAAqH;IACrH,UAAU,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,oEAAoE;IACpE,OAAO,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAC7C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;CACvD;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,oJAAoJ;IACpJ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yJAAyJ;IACzJ,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,EAAE,gBAAgB,EAM3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAAgB,EAW1C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiEjC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/Table.js

@@ -1,21 +1,22 @@
-import l, { useState as r, useRef as L, useEffect as b } from "react";
-import g from "classnames";
-import { getCurrentConfig as I, getCenteredOverflowTableStyle as N, getBreakpointClass as R } from "./utils.js";
+import a, { useState as n, useRef as x, useEffect as s } from "react";
+import L from "classnames";
+import { getCurrentConfig as R, getCenteredOverflowTableStyle as V, getBreakpointClass as N } from "./utils.js";
 import { AnalyticsId as _ } from "../../constants.js";
 import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
-import { useLayoutEvent as O } from "../../hooks/useLayoutEvent.js";
-import { getAriaLabelAttributes as P } from "../../utils/accessibility.js";
-import V from "../HorizontalScroll/HorizontalScroll.js";
-import j from "./styles.module.scss";
-var q = /* @__PURE__ */ ((e) => (e.none = "none", e.centeredoverflow = "centeredoverflow", e.horizontalscroll = "horizontalscroll", e.block = "block", e))(q || {}), D = /* @__PURE__ */ ((e) => (e.compact = "compact", e.normal = "normal", e))(D || {});
-const F = [
+import { useIsVisible as O } from "../../hooks/useIsVisible.js";
+import { useLayoutEvent as P } from "../../hooks/useLayoutEvent.js";
+import { getAriaLabelAttributes as j } from "../../utils/accessibility.js";
+import q from "../HorizontalScroll/HorizontalScroll.js";
+import D from "./styles.module.scss";
+var F = /* @__PURE__ */ ((e) => (e.none = "none", e.centeredoverflow = "centeredoverflow", e.horizontalscroll = "horizontalscroll", e.block = "block", e))(F || {}), G = /* @__PURE__ */ ((e) => (e.compact = "compact", e.normal = "normal", e))(G || {});
+const J = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
     fallbackVariant: "horizontalscroll"
     /* horizontalscroll */
   }
-], $ = [
+], et = [
   {
     breakpoint: "xl",
     variant: "centeredoverflow",
@@ -28,32 +29,35 @@ const F = [
     fallbackVariant: "block"
     /* block */
   }
-], M = ({
+], ot = ({
   id: e,
-  testId: h,
-  className: p,
-  children: v,
-  breakpointConfig: i = F,
-  mode: w = "normal",
-  scrollAriaLabel: u,
-  scrollAriaLabelledById: k
+  testId: w,
+  className: v,
+  children: u,
+  breakpointConfig: c = J,
+  mode: k = "normal",
+  scrollAriaLabel: W,
+  scrollAriaLabelledById: z
 }) => {
-  const [t, W] = r(), [a, z] = r(0), [E, y] = r(0), [s, S] = r(window.innerWidth), n = L(null), c = H();
-  b(() => {
-    W(I(i, c, a, s));
-  }, [i, c, a, s]), b(() => {
-    var o, m, f;
-    ((t == null ? void 0 : t.variant) === "centeredoverflow" || (t == null ? void 0 : t.variant) === "horizontalscroll") && z(((o = n.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0), (t == null ? void 0 : t.variant) === "centeredoverflow" && y(((f = (m = n.current) == null ? void 0 : m.parentElement) == null ? void 0 : f.getBoundingClientRect().width) ?? 0);
-  }, [t]), O(() => S(window.innerWidth), ["resize"], 100);
-  const A = (t == null ? void 0 : t.variant) === "centeredoverflow" ? N(E, a) : void 0, B = R(t), x = g(j.table, B, p), d = /* @__PURE__ */ l.createElement("table", { className: x, id: e, "data-testid": h, "data-analyticsid": _.Table, ref: n, style: A }, l.Children.map(v, (o) => l.isValidElement(o) && l.cloneElement(o, { mode: w }))), C = P({ label: u, id: k });
-  return (t == null ? void 0 : t.variant) === "horizontalscroll" ? /* @__PURE__ */ l.createElement(V, { childWidth: a, testId: "horizontal-scroll", ...C }, d) : d;
+  const [t, E] = n(), [l, d] = n(0), [y, B] = n(0), [m, S] = n(window.innerWidth), r = x(null), f = O(r, 0), i = H();
+  s(() => {
+    E(R(c, i, l, m));
+  }, [c, i, l, m]), s(() => {
+    var o, h, p;
+    ((t == null ? void 0 : t.variant) === "centeredoverflow" || (t == null ? void 0 : t.variant) === "horizontalscroll") && d(((o = r.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0), (t == null ? void 0 : t.variant) === "centeredoverflow" && B(((p = (h = r.current) == null ? void 0 : h.parentElement) == null ? void 0 : p.getBoundingClientRect().width) ?? 0);
+  }, [t, i]), P(() => S(window.innerWidth), ["resize"], 100), s(() => {
+    var o;
+    l === 0 && f && d(((o = r.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0);
+  }, [l, f]);
+  const g = (t == null ? void 0 : t.variant) === "centeredoverflow" ? V(y, l) : void 0, A = N(t), C = L(D.table, A, v), b = /* @__PURE__ */ a.createElement("table", { className: C, id: e, "data-testid": w, "data-analyticsid": _.Table, ref: r, style: g }, a.Children.map(u, (o) => a.isValidElement(o) && a.cloneElement(o, { mode: k }))), I = j({ label: W, id: z });
+  return (t == null ? void 0 : t.variant) === "horizontalscroll" ? /* @__PURE__ */ a.createElement(q, { childWidth: l, testId: "horizontal-scroll", ...I }, b) : b;
 };
 export {
-  D as ModeType,
-  q as ResponsiveTableVariant,
-  M as Table,
-  M as default,
-  F as defaultConfig,
-  $ as simpleConfig
+  G as ModeType,
+  F as ResponsiveTableVariant,
+  ot as Table,
+  ot as default,
+  J as defaultConfig,
+  et as simpleConfig
 };
 //# sourceMappingURL=Table.js.map

package/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["ResponsiveTableVariant","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","breakpointConfig","mode","scrollAriaLabel","scrollAriaLabelledById","currentConfig","setCurrentConfig","useState","tableWidth","setTableWidth","parentWidth","setParentWidth","windowWidth","setWindowWidth","tableRef","useRef","breakpoint","useBreakpoint","useEffect","getCurrentConfig","_a","_c","_b","useLayoutEvent","tableStyle","getCenteredOverflowTableStyle","breakpointClass","getBreakpointClass","tableClass","classNames","styles","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":";;;;;;;;;AAaY,IAAAA,sBAAAA,OAEVA,EAAA,OAAO,QAEPA,EAAA,mBAAmB,oBAEnBA,EAAA,mBAAmB,oBAEnBA,EAAA,QAAQ,SAREA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;AAgCL,MAAMC,IAAoC;AAAA,EAC/C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,IAAmC;AAAA,EAC9C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,IAAyB,CAAC;AAAA,EACrC,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmBP;AAAA,EACnB,MAAAQ,IAAO;AAAA,EACP,iBAAAC;AAAA,EACA,wBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA2B,GAC/D,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAC,GAChD,CAACG,GAAaC,CAAc,IAAIJ,EAAiB,CAAC,GAClD,CAACK,GAAaC,CAAc,IAAIN,EAAS,OAAO,UAAU,GAC1DO,IAAWC,EAAyB,IAAI,GACxCC,IAAaC;AAEnB,EAAAC,EAAU,MAAM;AACd,IAAAZ,EAAiBa,EAAiBlB,GAAkBe,GAAYR,GAAYI,CAAW,CAAC;AAAA,KACvF,CAACX,GAAkBe,GAAYR,GAAYI,CAAW,CAAC,GAE1DM,EAAU,MAAM;;AACd,MACEb,KAAA,gBAAAA,EAAe,aAAY,uBAC3BA,KAAA,gBAAAA,EAAe,aAAY,uBAE3BI,IAAcW,IAAAN,EAAS,YAAT,gBAAAM,EAAkB,wBAAwB,UAAS,CAAC,IAEhEf,KAAA,gBAAAA,EAAe,aAAY,sBAC7BM,IAAeU,KAAAC,IAAAR,EAAS,YAAT,gBAAAQ,EAAkB,kBAAlB,gBAAAD,EAAiC,wBAAwB,UAAS,CAAC;AAAA,EACpF,GACC,CAAChB,CAAa,CAAC,GAEHkB,EAAA,MAAMV,EAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;AAEvE,QAAMW,KACJnB,KAAA,gBAAAA,EAAe,aAAY,qBAA0CoB,EAA8Bf,GAAaF,CAAU,IAAI,QAE1HkB,IAAkBC,EAAmBtB,CAAa,GAClDuB,IAAaC,EAAWC,EAAO,OAAOJ,GAAiB3B,CAAS,GAEhEgC,IACJC,gBAAAA,EAAA,cAAC,SAAM,EAAA,WAAWJ,GAAY,IAAA/B,GAAQ,eAAaC,GAAQ,oBAAkBmC,EAAY,OAAO,KAAKnB,GAAU,OAAOU,EAAA,GACnHQ,EAAM,SAAS,IAAIhC,GAAU,CAASkC,MAAAF,EAAM,eAAoCE,CAAK,KAAKF,EAAM,aAAaE,GAAO,EAAE,MAAAhC,EAAK,CAAC,CAAC,CAChI,GAGIiC,IAAsBC,EAAuB,EAAE,OAAOjC,GAAiB,IAAIC,GAAwB;AAErG,UAAAC,KAAA,gBAAAA,EAAe,aAAY,qBAE3B2B,gBAAAA,EAAA,cAACK,KAAiB,YAAY7B,GAAY,QAAO,qBAAqB,GAAG2B,KACtEJ,CACH,IAIGA;AACT;"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["ResponsiveTableVariant","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","breakpointConfig","mode","scrollAriaLabel","scrollAriaLabelledById","currentConfig","setCurrentConfig","useState","tableWidth","setTableWidth","parentWidth","setParentWidth","windowWidth","setWindowWidth","tableRef","useRef","tableIsVisible","useIsVisible","breakpoint","useBreakpoint","useEffect","getCurrentConfig","_a","_c","_b","useLayoutEvent","tableStyle","getCenteredOverflowTableStyle","breakpointClass","getBreakpointClass","tableClass","classNames","styles","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OAEVA,EAAA,OAAO,QAEPA,EAAA,mBAAmB,oBAEnBA,EAAA,mBAAmB,oBAEnBA,EAAA,QAAQ,SAREA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;AAgCL,MAAMC,IAAoC;AAAA,EAC/C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,KAAmC;AAAA,EAC9C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,KAAyB,CAAC;AAAA,EACrC,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmBP;AAAA,EACnB,MAAAQ,IAAO;AAAA,EACP,iBAAAC;AAAA,EACA,wBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA2B,GAC/D,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAC,GAChD,CAACG,GAAaC,CAAc,IAAIJ,EAAiB,CAAC,GAClD,CAACK,GAAaC,CAAc,IAAIN,EAAS,OAAO,UAAU,GAC1DO,IAAWC,EAAyB,IAAI,GACxCC,IAAiBC,EAAaH,GAAU,CAAC,GACzCI,IAAaC;AAEnB,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAiBe,EAAiBpB,GAAkBiB,GAAYV,GAAYI,CAAW,CAAC;AAAA,KACvF,CAACX,GAAkBiB,GAAYV,GAAYI,CAAW,CAAC,GAE1DQ,EAAU,MAAM;;AACd,MACEf,KAAA,gBAAAA,EAAe,aAAY,uBAC3BA,KAAA,gBAAAA,EAAe,aAAY,uBAE3BI,IAAca,IAAAR,EAAS,YAAT,gBAAAQ,EAAkB,wBAAwB,UAAS,CAAC,IAEhEjB,KAAA,gBAAAA,EAAe,aAAY,sBAC7BM,IAAeY,KAAAC,IAAAV,EAAS,YAAT,gBAAAU,EAAkB,kBAAlB,gBAAAD,EAAiC,wBAAwB,UAAS,CAAC;AAAA,EACpF,GACC,CAAClB,GAAea,CAAU,CAAC,GAEfO,EAAA,MAAMZ,EAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,GAEvEO,EAAU,MAAM;;AACV,IAAAZ,MAAe,KAAKQ,KACtBP,IAAca,IAAAR,EAAS,YAAT,gBAAAQ,EAAkB,wBAAwB,UAAS,CAAC;AAAA,EACpE,GACC,CAACd,GAAYQ,CAAc,CAAC;AAE/B,QAAMU,KACJrB,KAAA,gBAAAA,EAAe,aAAY,qBAA0CsB,EAA8BjB,GAAaF,CAAU,IAAI,QAE1HoB,IAAkBC,EAAmBxB,CAAa,GAClDyB,IAAaC,EAAWC,EAAO,OAAOJ,GAAiB7B,CAAS,GAEhEkC,IACJC,gBAAAA,EAAA,cAAC,SAAM,EAAA,WAAWJ,GAAY,IAAAjC,GAAQ,eAAaC,GAAQ,oBAAkBqC,EAAY,OAAO,KAAKrB,GAAU,OAAOY,EAAA,GACnHQ,EAAM,SAAS,IAAIlC,GAAU,CAASoC,MAAAF,EAAM,eAAoCE,CAAK,KAAKF,EAAM,aAAaE,GAAO,EAAE,MAAAlC,EAAK,CAAC,CAAC,CAChI,GAGImC,IAAsBC,EAAuB,EAAE,OAAOnC,GAAiB,IAAIC,GAAwB;AAErG,UAAAC,KAAA,gBAAAA,EAAe,aAAY,qBAE3B6B,gBAAAA,EAAA,cAACK,KAAiB,YAAY/B,GAAY,QAAO,qBAAqB,GAAG6B,KACtEJ,CACH,IAIGA;AACT;"}

package/components/Table/utils.js

@@ -24,7 +24,7 @@ const p = (r) => r.variant === t.centeredoverflow || r.variant === t.block, b =
       breakpoint: e.breakpoint
     } : e;
 }, T = (r) => r && p(r) ? b(r) : void 0, z = (r, n) => {
-  if (r === n)
+  if (r >= n)
     return;
   const a = 8;
   return { left: `${(r - n) / 2 - a}px` };

package/components/Table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth === tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX"],"mappings":";;;;AAaA,MAAMA,IAAgB,CAACC,MACrBA,EAAO,YAAYC,EAAuB,oBAAoBD,EAAO,YAAYC,EAAuB,OAOpGC,IAAmB,CAACF,MAAqCG,EAAO,UAAUH,EAAO,OAAO,IAAIA,EAAO,UAAU,EAAE,GAQ/GI,IAA8B,CAACC,GAAqBC,MACxDC,EAAWF,EAAE,UAAU,IAAIE,EAAWD,EAAE,UAAU,GAQ9CE,IAA8B,CAACR,GAA0BS,MAC7DF,EAAWP,EAAO,UAAU,KAAKS,GAQ7BC,IAAyB,CAACV,GAA+CS,MAAyD;AAClI,MAAA,MAAM,QAAQT,CAAM;AACtB,WAAAA,EAAO,KAAKI,CAA2B,GAEhCJ,EAAO,KAAK,CAAAW,MAAKH,EAA4BG,GAAGF,CAAU,CAAC;AACzD,MAAAT,KAAUQ,EAA4BR,GAAQS,CAAU;AAC1D,WAAAT;AAEX,GASaY,IAAmB,CAC9BZ,GACAS,GACAI,GACAC,MAC0D;AACpD,QAAAC,IAAmBL,EAAuBV,GAAQS,CAAU,GAC5DO,IAAyBC,KACzBC,IAAyBL,KAAcC;AAE7C,MAAKC;AAKH,WAAAA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASe,IAAyBf,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASiB,IAAyBjB,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAI1BA;AACT,GAOaI,IAAqB,CAACnB,MACjCA,KAAUD,EAAcC,CAAM,IAAIE,EAAiBF,CAAM,IAAI,QAQlDoB,IAAgC,CAACC,GAAqBR,MAAwD;AACzH,MAAIQ,MAAgBR;AAClB;AAGF,QAAMS,IAAyB;AAE/B,SAAO,EAAE,MAAM,IAAID,IAAcR,KAAc,IAAIS,CAAsB;AAC3E;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Table/utils.ts"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX"],"mappings":";;;;AAaA,MAAMA,IAAgB,CAACC,MACrBA,EAAO,YAAYC,EAAuB,oBAAoBD,EAAO,YAAYC,EAAuB,OAOpGC,IAAmB,CAACF,MAAqCG,EAAO,UAAUH,EAAO,OAAO,IAAIA,EAAO,UAAU,EAAE,GAQ/GI,IAA8B,CAACC,GAAqBC,MACxDC,EAAWF,EAAE,UAAU,IAAIE,EAAWD,EAAE,UAAU,GAQ9CE,IAA8B,CAACR,GAA0BS,MAC7DF,EAAWP,EAAO,UAAU,KAAKS,GAQ7BC,IAAyB,CAACV,GAA+CS,MAAyD;AAClI,MAAA,MAAM,QAAQT,CAAM;AACtB,WAAAA,EAAO,KAAKI,CAA2B,GAEhCJ,EAAO,KAAK,CAAAW,MAAKH,EAA4BG,GAAGF,CAAU,CAAC;AACzD,MAAAT,KAAUQ,EAA4BR,GAAQS,CAAU;AAC1D,WAAAT;AAEX,GASaY,IAAmB,CAC9BZ,GACAS,GACAI,GACAC,MAC0D;AACpD,QAAAC,IAAmBL,EAAuBV,GAAQS,CAAU,GAC5DO,IAAyBC,KACzBC,IAAyBL,KAAcC;AAE7C,MAAKC;AAKH,WAAAA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASe,IAAyBf,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACiB,KACDH,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASiB,IAAyBjB,EAAuB,mBAAmBA,EAAuB;AAAA,MACnG,YAAYc,EAAiB;AAAA,IAAA,IAK/BA,EAAiB,YAAYd,EAAuB,oBACpD,CAACe,KACDD,EAAiB,oBAAoBd,EAAuB,mBAErD;AAAA,MACL,SAASc,EAAiB,mBAAmBd,EAAuB;AAAA,MACpE,YAAYc,EAAiB;AAAA,IAAA,IAI1BA;AACT,GAOaI,IAAqB,CAACnB,MACjCA,KAAUD,EAAcC,CAAM,IAAIE,EAAiBF,CAAM,IAAI,QAQlDoB,IAAgC,CAACC,GAAqBR,MAAwD;AACzH,MAAIQ,KAAeR;AACjB;AAGF,QAAMS,IAAyB;AAE/B,SAAO,EAAE,MAAM,IAAID,IAAcR,KAAc,IAAIS,CAAsB;AAC3E;"}

package/components/Textarea/Textarea.js

@@ -28,7 +28,7 @@ const oe = (a) => {
     autoFocus: S,
     disabled: E,
     name: D,
-    autoComplete: y,
+    autoComplete: y = "off",
     placeholder: F,
     readOnly: V,
     required: q,

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":";;;;;;;;AAsDA,MAAMA,KAAsB,CAACC,MAA+B;AAC1D,QAAMC,IAAe,QACfC,IAAiB,QACjBC,IAAc;AAEb,SAAA,QAAQH,IAAaI,EAA0B,QAAQH,CAAY,MAAMC,CAAc,MAAMC,CAAW;AACjH,GAEME,IAAWC,EAAM,WAAW,CAACC,GAAsBC,MAAwC;AACzF,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAcC;AAAA,IACd,aAAAC;AAAA,IACA,MAAAC,IAAOC,EAAS;AAAA,IAChB,OAAAC;AAAA,IACA,YAAAC,IAAaC,GAAK;AAAA,IAClB,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAA1B,GAEE,CAAC2B,GAAMC,CAAO,IAAIC,EAASf,CAAO,GAClC,CAACgB,GAAeC,CAAgB,IAAIF,EAASvB,KAAgB,EAAE,GAC/D0B,IAAYC,EAAuB,IAAI;AAE7C,EAAAC,EAAU,MAAM;AACd,IAAAH,EAAiBzB,KAAgB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAY,CAAC;AAEX,QAAA6B,IAAe,CAACC,MAAsC;AAG1D,UAAMC,IAAeD,EAAO;AAC5B,IAAAA,EAAO,OAAOtB;AAEd,UAAMwB,IAAc,KAAK,OAAOF,EAAO,eAAe,MAAM,EAAkB;AAE9E,IAAIE,MAAgBD,MAClBD,EAAO,OAAOE,IAGZA,KAAevB,MACjBqB,EAAO,OAAOrB,GACdqB,EAAO,YAAYA,EAAO,eAGxBE,IAAcvB,IAChBa,EAAQU,CAAW,IAEnBV,EAAQb,CAAO;AAAA,EACjB,GAGIwB,IAAS9B,MAASC,EAAS,QAC3B8B,IAAc/B,MAASC,EAAS,aAChC+B,IAAwB,CAAC,CAACvC,KAAiB4B,EAAc,WAAW,SAAS5B,GAC7EwC,IAAUjC,MAASC,EAAS,aAAa,CAAC,CAACO,KAAawB,GAExDE,IAAuBC,EAAGC,EAAO,UAAU;AAAA,IAC/C,CAACA,EAAO,wBAAwB,CAAC,GAAGtC;AAAA,EAAA,CACrC,GAEKuC,IAAsBF,EAAGC,EAAO,iBAAiB,GAAG;AAAA,IACxD,CAACA,EAAO,8BAA8B,CAAC,GAAGrC;AAAA,IAC1C,CAACqC,EAAO,+BAA+B,CAAC,GAAGL;AAAA,IAC3C,CAACK,EAAO,0BAA0B,CAAC,GAAGN;AAAA,IACtC,CAACM,EAAO,0BAA0B,CAAC,GAAGH;AAAA,IACtC,CAACG,EAAO,2BAA2B,CAAC,GAAG7C,EAAM;AAAA,EAAA,CAC9C,GAEK+C,IAAgBH,EAAGC,EAAO,wBAAwB,GAAG;AAAA,IACzD,CAACA,EAAO,kCAAkC,CAAC,GAAG7C,EAAM;AAAA,EAAA,CACrD;AAED,EAAAkC,EAAU,MAAM;;AACV,QAAAlB,OAAQgC,IAAAhB,EAAU,YAAV,QAAAgB,EAAmB,eAAYC,IAAAjB,EAAU,YAAV,QAAAiB,EAAmB,SAAS,KAAI;AACzE,YAAMC,KAAWC,IAAAnB,EAAU,YAAV,gBAAAmB,EAAmB,SAAS;AAC7C,MAAAhB,EAAae,CAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAE,CAAA;AAEC,QAAAE,IAAe,CAAC,MAAoD;AACxE,IAAIpC,KACFmB,EAAa,EAAE,MAAM,GAENJ,EAAA,EAAE,OAAO,KAAK;AAAA,EAAA,GAG3BsB,IAAkB,CAAC,MAAoD;AAC3E,IAAI5B,KACFA,EAAS,CAAC,GAEZ2B,EAAa,CAAC;AAAA,EAAA,GAGVE,IAAWlD,IAAQZ,GAAoBY,CAAK,IAAI;AAGpD,SAAAL,gBAAAA,EAAA,cAACwD,IAAa,EAAA,WAAAtC,EAAA,GACXlB,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaM,GAAQ,oBAAkBmD,EAAY,UAAU,WAAWb,KAC1Ec,GAAY9C,GAAOC,GAAYH,GAAkBU,CAAQ,GAC1DpB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW+C,GAAqB,KAAKd,GAAW,OAAO,EAAE,UAAAsB,EAC5D,EAAA,GAAAvD,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAA4B;AAAA,MACA,cAAArB;AAAA,MACA,IAAIM;AAAA,MACJ,WAAWmC;AAAA,MACX,KAAA9C;AAAA,MACA,oBAAkBD,EAAM,kBAAkB,KAAK;AAAA,MAC/C,gBAAc,CAAC,CAAC0C;AAAA,MAEhB,WAAAxB;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC5C,aAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAU6B;AAAA,MACT,GAAG3B;AAAA,IAAA;AAAA,EAAA,CAER,GACCxB,KACCH,gBAAAA,EAAA;AAAA,IAAC2D;AAAA,IAAA;AAAA,MACC,eAAAxD;AAAA,MACA,QAAQ4B,EAAc,SAAA,EAAW;AAAA,MACjC,SAAA3B;AAAA,MACA,MAAAM;AAAA,MACA,UAAA6C;AAAA,IAAA;AAAA,EAGN,CAAA,CACF;AAEJ,CAAC;AAEDxD,EAAS,cAAc;AAEvB,MAAA6D,KAAe7D;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":";;;;;;;;AAsDA,MAAMA,KAAsB,CAACC,MAA+B;AAC1D,QAAMC,IAAe,QACfC,IAAiB,QACjBC,IAAc;AAEb,SAAA,QAAQH,IAAaI,EAA0B,QAAQH,CAAY,MAAMC,CAAc,MAAMC,CAAW;AACjH,GAEME,IAAWC,EAAM,WAAW,CAACC,GAAsBC,MAAwC;AACzF,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAcC;AAAA,IACd,aAAAC;AAAA,IACA,MAAAC,IAAOC,EAAS;AAAA,IAChB,OAAAC;AAAA,IACA,YAAAC,IAAaC,GAAK;AAAA,IAClB,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAA1B,GAEE,CAAC2B,GAAMC,CAAO,IAAIC,EAASf,CAAO,GAClC,CAACgB,GAAeC,CAAgB,IAAIF,EAASvB,KAAgB,EAAE,GAC/D0B,IAAYC,EAAuB,IAAI;AAE7C,EAAAC,EAAU,MAAM;AACd,IAAAH,EAAiBzB,KAAgB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAY,CAAC;AAEX,QAAA6B,IAAe,CAACC,MAAsC;AAG1D,UAAMC,IAAeD,EAAO;AAC5B,IAAAA,EAAO,OAAOtB;AAEd,UAAMwB,IAAc,KAAK,OAAOF,EAAO,eAAe,MAAM,EAAkB;AAE9E,IAAIE,MAAgBD,MAClBD,EAAO,OAAOE,IAGZA,KAAevB,MACjBqB,EAAO,OAAOrB,GACdqB,EAAO,YAAYA,EAAO,eAGxBE,IAAcvB,IAChBa,EAAQU,CAAW,IAEnBV,EAAQb,CAAO;AAAA,EACjB,GAGIwB,IAAS9B,MAASC,EAAS,QAC3B8B,IAAc/B,MAASC,EAAS,aAChC+B,IAAwB,CAAC,CAACvC,KAAiB4B,EAAc,WAAW,SAAS5B,GAC7EwC,IAAUjC,MAASC,EAAS,aAAa,CAAC,CAACO,KAAawB,GAExDE,IAAuBC,EAAGC,EAAO,UAAU;AAAA,IAC/C,CAACA,EAAO,wBAAwB,CAAC,GAAGtC;AAAA,EAAA,CACrC,GAEKuC,IAAsBF,EAAGC,EAAO,iBAAiB,GAAG;AAAA,IACxD,CAACA,EAAO,8BAA8B,CAAC,GAAGrC;AAAA,IAC1C,CAACqC,EAAO,+BAA+B,CAAC,GAAGL;AAAA,IAC3C,CAACK,EAAO,0BAA0B,CAAC,GAAGN;AAAA,IACtC,CAACM,EAAO,0BAA0B,CAAC,GAAGH;AAAA,IACtC,CAACG,EAAO,2BAA2B,CAAC,GAAG7C,EAAM;AAAA,EAAA,CAC9C,GAEK+C,IAAgBH,EAAGC,EAAO,wBAAwB,GAAG;AAAA,IACzD,CAACA,EAAO,kCAAkC,CAAC,GAAG7C,EAAM;AAAA,EAAA,CACrD;AAED,EAAAkC,EAAU,MAAM;;AACV,QAAAlB,OAAQgC,IAAAhB,EAAU,YAAV,QAAAgB,EAAmB,eAAYC,IAAAjB,EAAU,YAAV,QAAAiB,EAAmB,SAAS,KAAI;AACzE,YAAMC,KAAWC,IAAAnB,EAAU,YAAV,gBAAAmB,EAAmB,SAAS;AAC7C,MAAAhB,EAAae,CAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAE,CAAA;AAEC,QAAAE,IAAe,CAAC,MAAoD;AACxE,IAAIpC,KACFmB,EAAa,EAAE,MAAM,GAENJ,EAAA,EAAE,OAAO,KAAK;AAAA,EAAA,GAG3BsB,IAAkB,CAAC,MAAoD;AAC3E,IAAI5B,KACFA,EAAS,CAAC,GAEZ2B,EAAa,CAAC;AAAA,EAAA,GAGVE,IAAWlD,IAAQZ,GAAoBY,CAAK,IAAI;AAGpD,SAAAL,gBAAAA,EAAA,cAACwD,IAAa,EAAA,WAAAtC,EAAA,GACXlB,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaM,GAAQ,oBAAkBmD,EAAY,UAAU,WAAWb,KAC1Ec,GAAY9C,GAAOC,GAAYH,GAAkBU,CAAQ,GAC1DpB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW+C,GAAqB,KAAKd,GAAW,OAAO,EAAE,UAAAsB,EAC5D,EAAA,GAAAvD,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAA4B;AAAA,MACA,cAAArB;AAAA,MACA,IAAIM;AAAA,MACJ,WAAWmC;AAAA,MACX,KAAA9C;AAAA,MACA,oBAAkBD,EAAM,kBAAkB,KAAK;AAAA,MAC/C,gBAAc,CAAC,CAAC0C;AAAA,MAEhB,WAAAxB;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC5C,aAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAU6B;AAAA,MACT,GAAG3B;AAAA,IAAA;AAAA,EAAA,CAER,GACCxB,KACCH,gBAAAA,EAAA;AAAA,IAAC2D;AAAA,IAAA;AAAA,MACC,eAAAxD;AAAA,MACA,QAAQ4B,EAAc,SAAA,EAAW;AAAA,MACjC,SAAA3B;AAAA,MACA,MAAAM;AAAA,MACA,UAAA6C;AAAA,IAAA;AAAA,EAGN,CAAA,CACF;AAEJ,CAAC;AAEDxD,EAAS,cAAc;AAEvB,MAAA6D,KAAe7D;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "6.1.3",
+  "version": "6.3.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {