@helsenorge/designsystem-react 13.4.0 → 13.6.0

package/lib/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [13.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.5.0&targetVersion=GTv13.6.0) (2026-02-11)
+
+
+### Features
+
+*  oppdatert til motion 12 ([af5eb81](https://github.com/helsenorge/designsystem/commit/af5eb8141c74b5b1179f90b838606ae6d41b751d)), closes [#371272](https://github.com/helsenorge/designsystem/issues/371272)
+* **datepicker:**  ny komponent for input av tid ([592b6e4](https://github.com/helsenorge/designsystem/commit/592b6e4eabe9f718c142957a041084050e47c71f)), closes [#367381](https://github.com/helsenorge/designsystem/issues/367381)
+* **duolist:**  lagt til prop for testid på hver duolistgroup ([004ae83](https://github.com/helsenorge/designsystem/commit/004ae83bdfaa5ba47b70d07c4337d9238d06b774)), closes [#370261](https://github.com/helsenorge/designsystem/issues/370261)
+* **formgroup:**  åpne for flere tags for legend og title ([0cbc280](https://github.com/helsenorge/designsystem/commit/0cbc2801b654d8adaa4f610452dfd5043900e53f)), closes [#368142](https://github.com/helsenorge/designsystem/issues/368142)
+* **infoteaser:**  legg til prop for å sette høyde på collapsed teaser ([3681d3f](https://github.com/helsenorge/designsystem/commit/3681d3f7ebd16aacf9b4114b48ba7fd0d2ee1e29))
+
+
+### Bug Fixes
+
+* **datepicker:**  ikke sett default legend for ny datepicker ([f2230cb](https://github.com/helsenorge/designsystem/commit/f2230cbaff99f7e89320a8b10073c7420614d4ee)), closes [#345238](https://github.com/helsenorge/designsystem/issues/345238)
+* **drawer:**  legg på padding så ikke footer-knapper kuttes på iphone ([3616eff](https://github.com/helsenorge/designsystem/commit/3616eff6cfa040ef5d814458978f5dc7f023d470)), closes [#369303](https://github.com/helsenorge/designsystem/issues/369303)
+* **expander:**  behold bredde på innhold på desktop ([8ab0315](https://github.com/helsenorge/designsystem/commit/8ab03150ede607ace77d40dc89865f0b0e574858)), closes [#361764](https://github.com/helsenorge/designsystem/issues/361764)
+* **panellist:**  gjør panellist sin styling av panel mer robust ([b1c28dc](https://github.com/helsenorge/designsystem/commit/b1c28dc6f31ec44a64e022da653a880347d7a530)), closes [#369909](https://github.com/helsenorge/designsystem/issues/369909)
+* **select:**  skjul overflow tekst og vis ellipsis ([a56be99](https://github.com/helsenorge/designsystem/commit/a56be9933ae7dbd6d03441f94384e1b6dd3f69e1)), closes [#370560](https://github.com/helsenorge/designsystem/issues/370560)
+* **toggle:**  ariadescribedby settes til undefined ([c6b8e64](https://github.com/helsenorge/designsystem/commit/c6b8e6417e96091b087eb7af7892e54733e5a8a0)), closes [#370572](https://github.com/helsenorge/designsystem/issues/370572)
+* **unsafe_datepicker:**  ikke sett aria-controls om popup er lukket ([79349e8](https://github.com/helsenorge/designsystem/commit/79349e8d93018d3274a8af2ae5d8ed201f738601)), closes [#371062](https://github.com/helsenorge/designsystem/issues/371062)
+* **unsafe_datepicker:**  lukk kalender med escape på kalender knapp og fjern manglende IDer ([c7d2b09](https://github.com/helsenorge/designsystem/commit/c7d2b09df068719ad3f9ce7be8e54653a5691fae)), closes [#371061](https://github.com/helsenorge/designsystem/issues/371061) [#371062](https://github.com/helsenorge/designsystem/issues/371062)
+
+## [13.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.4.0&targetVersion=GTv13.5.0) (2026-01-21)
+
+
+### Features
+
+* **datepicker:**  beta-versjon av ny komponent ([6ac83f2](https://github.com/helsenorge/designsystem/commit/6ac83f2db1cd46459089a51c18f1934907d09051)), closes [#345238](https://github.com/helsenorge/designsystem/issues/345238)
+* **linklist:**  legger til mulighet for å markere lenke som ekstern ([d12034a](https://github.com/helsenorge/designsystem/commit/d12034a779d107cdc5463e347627f23c98a78e75)), closes [#368889](https://github.com/helsenorge/designsystem/issues/368889)
+
+
+### Bug Fixes
+
+* **datepicker:**  legg til egen sot-tekst-håndtering for ny datepicker ([a50c1c3](https://github.com/helsenorge/designsystem/commit/a50c1c309fd40f31f4903b98afb8c31b865e6da0)), closes [#345238](https://github.com/helsenorge/designsystem/issues/345238)
+* **elementheader:**  justering for både windows og mac ([a6687a7](https://github.com/helsenorge/designsystem/commit/a6687a7b757e4529868bfa5bd3ebb6b7aec72b1d)), closes [#367883](https://github.com/helsenorge/designsystem/issues/367883)
+* **elementheader:**  liten justering på plassering av tekst i elementheader ([b473626](https://github.com/helsenorge/designsystem/commit/b47362698f318e47e2f62a79552c9eb70a513d18)), closes [#367883](https://github.com/helsenorge/designsystem/issues/367883)
+* **helpbubble:**  noen skjermlesere får ikke navigert til teksten ([57221b1](https://github.com/helsenorge/designsystem/commit/57221b172bda3c0e566d6daa77e4764370207d4b)), closes [#365863](https://github.com/helsenorge/designsystem/issues/365863)
+* **panel:**  fjern buggy bredde for PanelTitle ([6735a7c](https://github.com/helsenorge/designsystem/commit/6735a7caffc50c5a3d858a52f43273f589034226)), closes [#369080](https://github.com/helsenorge/designsystem/issues/369080)
+
 ## [13.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.3.0&targetVersion=GTv13.4.0) (2025-12-18)
 
 

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { type ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA6CA,MAAa,WAAW,MAAM,YAAY,OAAsB,QAAqC;CACnG,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,aACE;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,QAAQ;CACnD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,OAC9C,CAAC;CACF,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;EAC/D,CAAC;CACF,MAAM,kBAAkB,WAAW,eAAe,UAAU,UAAU;CACtE,MAAM,6BAA6B,WAAW,eAAe,2BAA2B;GACrF,eAAe,sCAAsC;GACrD,eAAe,qCAAqC;GACpD,eAAe,wCAAwC;GACvD,eAAe,sCAAsC;GACrD,eAAe,8CAA8C,CAAC,SAAS;GACvE,eAAe,8CAA8C,CAAC,SAAS,aAAa;GACpF,eAAe,8CAA8C,CAAC,SAAS,aAAa;GACpF,eAAe,4CAA4C,SAAS;GACpE,eAAe,4CAA4C,SAAS;GACpE,eAAe,qCAAqC;GACpD,eAAe,0CAA0C;GACzD,eAAe,qCAAqC;GACpD,eAAe,4CAA4C,SAAS,aAAa;GACjF,eAAe,6CAA6C,YAAY,SAAS;GACjF,eAAe,qDAAqD,SAAS,aAAa;GAC1F,eAAe,sDAAsD,YAAY,SAAS;EAC5F,CAAC;CACF,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;EACrD,CAAC;CAEF,IAAI,YAAY,SAAS,QAAQ;AACjC,KAAI,UAAW,SAAS,UAAY,aAAY,SAAS,aAAa,IAAI;AAC1E,KAAI,aAAa,SAAS,UAAW,aAAY,SAAS,QAAQ;AAClE,KAAI,SAAU,aAAY,SAAS,WAAW,IAAI;AAElD,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,QAAQ,CAAC;CAEb,MAAM,mBAAmB,MAAiD;AACxE,MAAI,SACF,UAAS,EAAE;AAGb,eAAa,CAAC,UAAU;;CAG1B,MAAM,wBAAyC;AAC7C,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAA;GACC,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACL,SAAS;GACC;GACH;GACP,KAAK;GACL,oBAAkB,mBAAmB,OAAO,YAAY;GACxD,gBAAc;GACJ;GACV,UAAU;IACV,EACF,oBAAC,QAAA;GAAK,WAAW;aACd,aAAa,oBAAC,cAAA;IAAK,OAAO;IAAW,WAAW,eAAe;IAAmB,SAAS;IAAO,MAAM,SAAS;KAAU;IACvH,CAAA,EAAA,CACN;;AAIP,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;aAC1E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,sBACA,kBACA,eAAe,8BACf,MACD;IACG;GACO;EAEjB;AAEF,SAAS,cAAc;AAEvB,IAAA,mBAAe"}

package/lib/Duolist.js

@@ -22,9 +22,11 @@ const DuolistGroup = (props) => {
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 			"data-separator": nonFormatted ? separator : void 0,
 			className: dtClassNames,
+			"data-testid": props.testId && `${props.testId}-term`,
 			children: term
 		}), /* @__PURE__ */ jsx("dd", {
 			className: ddClassNames,
+			"data-testid": props.testId && `${props.testId}-description`,
 			children: description
 		})] });
 	};
@@ -60,6 +62,7 @@ const Duolist = (props) => {
 				if (child === null || typeof child === "undefined") return;
 				const duolistGroup = child;
 				if (duolistGroup.type === DuolistGroup) return React.cloneElement(child, {
+					...duolistGroup.props,
 					boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
 					format: duolistGroup.props.format ?? format,
 					separator: duolistGroup.props.separator ?? separator

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAsDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GAAG,kBAAgB,eAAe,YAAY,KAAA;GAAW,WAAW;aAClE;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;aAAe;IAAiB,CAAA,EAAA,CAC9C;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;ACjJV,IAAA,oBDqJe"}
+{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAyDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GACC,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;IACE,CAAA,EAAA,CACJ;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;AC3JV,IAAA,oBD+Je"}

package/lib/Expander.js

@@ -90,9 +90,13 @@ var Expander = (props) => {
 	});
 	const renderContent = () => {
 		if (!renderChildrenWhenClosed && !isExpanded) return null;
+		const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
 		return /* @__PURE__ */ jsx("div", {
-			className: classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames),
-			children
+			className: classNames(size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--outer"]),
+			children: /* @__PURE__ */ jsx("div", {
+				className: contentClassName,
+				children
+			})
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/lib/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","names":["Expander: React.FC<ExpanderProps>"],"sources":["../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}
+{"version":3,"file":"Expander.js","names":["Expander: React.FC<ExpanderProps>"],"sources":["../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}

package/lib/FormGroup.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
 const FormGroup = React.forwardRef((props, ref) => {
-	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId } = props;
+	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const radioGroupId = useId();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
@@ -24,6 +24,7 @@ const FormGroup = React.forwardRef((props, ref) => {
 	const isLarge = size === FormSize.large;
 	const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
 	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
+	const CustomTagForLegend = legendHtmlMarkup;
 	const legendClasses = classNames(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
 	const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
 	const mapFormComponent = (child, index) => {
@@ -89,7 +90,7 @@ const FormGroup = React.forwardRef((props, ref) => {
 	const formGroupContent = () => {
 		return /* @__PURE__ */ jsxs("div", { children: [htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", {
 			className: fieldsetClasses,
-			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("h5", {
+			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(CustomTagForLegend, {
 				className: legendClasses,
 				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
 			}) }), React.Children.map(props.children, mapFormComponent)]
@@ -109,7 +110,7 @@ const FormGroup = React.forwardRef((props, ref) => {
 		className: formGroupWrapperClasses,
 		children: [props.title && /* @__PURE__ */ jsx(Title_default, {
 			className: titleClasses,
-			htmlMarkup: "h4",
+			htmlMarkup: titleHtmlMarkup,
 			appearance: "title4",
 			margin: {
 				marginTop: 0,

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <h5 className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </h5>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title, { TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/lib/HelpTriggerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      className,\n      htmlMarkup = 'button',\n      isHovered = false,\n      size = 'medium',\n      testId,\n      weight = 'normal',\n      ...buttonRest\n    },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>);\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`],\n      className\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([refObject, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":";;;;;;;;AASA,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;ACPf,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,IAAM,kBAAkB,MAAM,YAAqD,OAAO,QAAQ;AAChG,QAAO,oBAAC,yBAAA;EAAwB,GAAI;EAAY;GAAO;EACvD;AAEF,MAAa,0BAA0B,MAAM,YAEzC,EACE,WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,UACT,GAAG,cAEL,QACG;CACH,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBAAoC,IAA0C;CACjI,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,WAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI;EAGZ;AAED,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;ACpHtC,IAAA,4BDsHe"}
+{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      className,\n      htmlMarkup = 'button',\n      isHovered = false,\n      size = 'medium',\n      testId,\n      weight = 'normal',\n      ...buttonRest\n    },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>);\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`],\n      className\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([refObject, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":";;;;;;;;AASA,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;ACLf,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,IAAM,kBAAkB,MAAM,YAAqD,OAAO,QAAQ;AAChG,QAAO,oBAAC,yBAAA;EAAwB,GAAI;EAAY;GAAO;EACvD;AAEF,MAAa,0BAA0B,MAAM,YAEzC,EACE,WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,UACT,GAAG,cAEL,QACG;CACH,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBAAoC,IAA0C;CACjI,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,WAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI;EAGZ;AAED,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;ACtHtC,IAAA,4BDwHe"}

package/lib/HelpTriggerStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerStandalone.js","names":[],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerStandalone = React.forwardRef<HTMLButtonElement, HelpTriggerStandaloneProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const isMobile = useIsMobileBreakpoint();\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n        className={helpTriggerStandaloneStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n        <span className={styles['help-trigger-standalone__children']}>{children}</span>\n      </button>\n    );\n  }\n);\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;;AAuCA,IAAM,wBAAwB,MAAM,YACjC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,IAA0C;AAE/G,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;EAGd;AAED,sBAAsB,cAAc;AC9DpC,IAAA,kCDgEe"}
+{"version":3,"file":"HelpTriggerStandalone.js","names":[],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, type HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps extends Pick<\n  React.InputHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'\n> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerStandalone = React.forwardRef<HTMLButtonElement, HelpTriggerStandaloneProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const isMobile = useIsMobileBreakpoint();\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n        className={helpTriggerStandaloneStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n        <span className={styles['help-trigger-standalone__children']}>{children}</span>\n      </button>\n    );\n  }\n);\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;;AAyCA,IAAM,wBAAwB,MAAM,YACjC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,IAA0C;AAE/G,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;EAGd;AAED,sBAAsB,cAAc;AChEpC,IAAA,kCDkEe"}

package/lib/InfoTeaser.js

@@ -23,7 +23,7 @@ const getResources = (language) => {
 	}
 };
 var InfoTeaser = (props) => {
-	const { buttonClassName, children, className, htmlMarkup = "div", resources, svgIcon, testId, title, titleHtmlMarkup = "h2" } = props;
+	const { buttonClassName, children, className, htmlMarkup = "div", resources, svgIcon, testId, title, titleHtmlMarkup = "h2", collapsedMaxHeight } = props;
 	const [expanded, setExpanded] = useState(false);
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
 	const defaultResources = getResources(language);
@@ -38,6 +38,7 @@ var InfoTeaser = (props) => {
 		"data-analyticsid": AnalyticsId.InfoTeaser,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: classNames(styles.infoteaser, className, { [styles["infoteaser--collapsed"]]: !expanded }),
+			style: { maxHeight: !expanded ? collapsedMaxHeight ? collapsedMaxHeight : "12.25rem" : void 0 },
 			children: [
 				svgIcon && (typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
 					iconName: svgIcon,

package/lib/InfoTeaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\nimport { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const { buttonClassName, children, className, htmlMarkup = 'div', resources, svgIcon, testId, title, titleHtmlMarkup = 'h2' } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEKA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC2Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EAAE,iBAAiB,UAAU,WAAW,aAAa,OAAO,WAAW,SAAS,QAAQ,OAAO,kBAAkB,SAAS;CAChI,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;;IAED,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;ACjFjB,IAAA,uBDqFe"}
+{"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\nimport { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEKA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC6Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;GACF,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,GAAW;;IAEnG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AC/FjB,IAAA,uBDmGe"}

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["mergedResources: HNDesignsystemInput"],"sources":["../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\nimport { HNDesignsystemInput } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { HNDesignsystemInput } from '../../resources/Resources';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } 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 ErrorWrapperClassNameProps,\n    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      | 'inputMode'\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 inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\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  /** Error text id */\n  errorTextId?: 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  /** @deprecated use resources instead. The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\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    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\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    inputContainerRef,\n    resources,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n    characters: maxText || resources?.characters || defaultResources.characters,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.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--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\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 (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (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    if (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 className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputId, onColor as FormOnColor)}\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\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\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            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["mergedResources: HNDesignsystemInput"],"sources":["../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\nimport { HNDesignsystemInput } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { type ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, type SvgIcon } from '../Icon';\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\n    ErrorWrapperClassNameProps,\n    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      | 'inputMode'\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 inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\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  /** Error text id */\n  errorTextId?: 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  /** @deprecated use resources instead. The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\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    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\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    inputContainerRef,\n    resources,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n    characters: maxText || resources?.characters || defaultResources.characters,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.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--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\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 (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (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    if (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 className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputId, onColor as FormOnColor)}\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\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\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            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}