@helsenorge/designsystem-react 12.0.0-beta.0 → 12.0.0-beta.2

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## 12.0.0-beta.2 (2025-08-01)
+
+
+### Features
+
+*  ta i bruk nye prosesshjelp fargetokens ([4330037](https://github.com/helsenorge/designsystem/commit/43300372ca04dd26cd207aa9ddebf4f0e8e8dd6f)), closes [#351112](https://github.com/helsenorge/designsystem/issues/351112) [#353025](https://github.com/helsenorge/designsystem/issues/353025)
+* **elementheader:**  nytt navn på listheader og oppdatert design ([e42d370](https://github.com/helsenorge/designsystem/commit/e42d37014aa84142bc4a0a4ec3324f77b7f31887)), closes [#355123](https://github.com/helsenorge/designsystem/issues/355123)
+* **expanderlist:**  mulighet for status new og små designendringer ([d94734f](https://github.com/helsenorge/designsystem/commit/d94734f8d3f2df722510ad3ce031c5652e149e74)), closes [#354210](https://github.com/helsenorge/designsystem/issues/354210)
+* **expanderlist:**  tydeliggjør forskjellen mellom innhold og knapp ved ekspansjon ([ae537bf](https://github.com/helsenorge/designsystem/commit/ae537bf679327c470a969b4f54c393c278ca87a4)), closes [#355711](https://github.com/helsenorge/designsystem/issues/355711)
+* **helpbubble:**  aria props er lagt til ([a95f503](https://github.com/helsenorge/designsystem/commit/a95f503a9b08eb68d5084d58e23c7148eb1a3429)), closes [#346605](https://github.com/helsenorge/designsystem/issues/346605)
+* **helptooltip:**  children type kan nå brukes med cmset ([e2f9081](https://github.com/helsenorge/designsystem/commit/e2f9081fcb307013d0f52fc48b9e0c0132e34d94)), closes [#355554](https://github.com/helsenorge/designsystem/issues/355554)
+* **linklist:**  mulighet for status new og små designendringer ([27c0365](https://github.com/helsenorge/designsystem/commit/27c0365930b715f90b74d80f7f906f9502c81ac3)), closes [#353721](https://github.com/helsenorge/designsystem/issues/353721) [#355891](https://github.com/helsenorge/designsystem/issues/355891)
+
+
+### Bug Fixes
+
+*  helptriggerinline og helptriggerstandalone underline vises på safari ([8579bab](https://github.com/helsenorge/designsystem/commit/8579bab9315a9c5e0dd456c4546a56f68a4580d5)), closes [#355480](https://github.com/helsenorge/designsystem/issues/355480)
+* **helpdrawer:**  kommer fra venstre side på desktop ([db0d8ef](https://github.com/helsenorge/designsystem/commit/db0d8efd5aecd76acc871d114dfa2efb1c204083)), closes [#355122](https://github.com/helsenorge/designsystem/issues/355122)
+* **helptriggerinline:**  boble får riktig bredde når brukt med helptriggerinline ([1b30878](https://github.com/helsenorge/designsystem/commit/1b30878d0c9f0526a719a8f116a1a3181b58076a)), closes [#355552](https://github.com/helsenorge/designsystem/issues/355552)
+* **popover:**  pil og bubble får ikke artifakter ved zooming ([6aafa55](https://github.com/helsenorge/designsystem/commit/6aafa55c13f9049e624fb1e6f64d0b6db992eec5)), closes [#354396](https://github.com/helsenorge/designsystem/issues/354396)
+
+## 12.0.0-beta.1 (2025-06-17)
+
+
+### Features
+
+*  helpexpander children er reactnode ([044e828](https://github.com/helsenorge/designsystem/commit/044e828ae675bd65e54b8e45bf358844b7cd01fc)), closes [#354640](https://github.com/helsenorge/designsystem/issues/354640)
+
+
+### Bug Fixes
+
+* **dictionarytrigger:**  ta i bruk fargetokens ([5e970bf](https://github.com/helsenorge/designsystem/commit/5e970bf0755ed2ccf2679c98927fff9db237b2bc)), closes [#353506](https://github.com/helsenorge/designsystem/issues/353506)
+* **helpexpanderinline:**  er i domen når den ikke er ekspandert ([e81f691](https://github.com/helsenorge/designsystem/commit/e81f6918275f165b645fe67a5953b3b81cf7fedd)), closes [#354658](https://github.com/helsenorge/designsystem/issues/354658)
+
 ## 12.0.0-beta.0 (2025-06-10)
 
 
@@ -5,12 +39,6 @@
 
 *  helptrigger blir erstattet av helptriggericon helptriggerinline og helptriggerstandalone ([3b0556b](https://github.com/helsenorge/designsystem/commit/3b0556bd5ef225718a28175e42a5e4070c4158e1)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
 *  nye komponenter helpexpanderinline og helpexpanderstandalone ([b38f230](https://github.com/helsenorge/designsystem/commit/b38f2308f4b72756784874e4b49295d9e168e040)), closes [#350484](https://github.com/helsenorge/designsystem/issues/350484)
-*  prosesshjelp fargetokens lagt til ([c70fb44](https://github.com/helsenorge/designsystem/commit/c70fb44c9b95338f1e19563931d707a5921e311b)), closes [#353506](https://github.com/helsenorge/designsystem/issues/353506)
-*  spacers tokens ([575cd80](https://github.com/helsenorge/designsystem/commit/575cd8081ffdb9c96b7df28e85fa4ff3bd4025db)), closes [#351112](https://github.com/helsenorge/designsystem/issues/351112)
-* **drawer:**  flytt lukkekryss til hjørnet ([2b8ff77](https://github.com/helsenorge/designsystem/commit/2b8ff771c5de8bbe7a6f1b257f2df35d8e01bced))
-* **drawer:**  gjør onclose optional ([6eb0bf3](https://github.com/helsenorge/designsystem/commit/6eb0bf3a97b465ba11abba7e4b6b9023130bf788))
-* **drawer:**  legg på shadow ved scroll istedenfor border ([2f3162a](https://github.com/helsenorge/designsystem/commit/2f3162a2903e6e7ce12d95d99b55909282fbcb76))
-* **drawer:**  stopp scrolling bak drawer ([4e5ebe1](https://github.com/helsenorge/designsystem/commit/4e5ebe16b8340c28ea2066d7a63f2065bef19de9))
 * **helpbubble:**  flytt lukkekryss helt til hjørnet ([2b3c54d](https://github.com/helsenorge/designsystem/commit/2b3c54d6aac8bc074eeb6f62ddb0b5bc6c3f421f)), closes [#352915](https://github.com/helsenorge/designsystem/issues/352915)
 * **helppanel:**  ny border og spacing til tittel ([b47870f](https://github.com/helsenorge/designsystem/commit/b47870ff5cb571d09adcc921bbfc7270e640dba0))
 * **helptooltip:**  fjern provider og rydd opp i tooltip role ([37215ca](https://github.com/helsenorge/designsystem/commit/37215cac7626448915020f7d72f5d848dd8bd515)), closes [#350651](https://github.com/helsenorge/designsystem/issues/350651)
@@ -23,14 +51,80 @@
 
 ### Bug Fixes
 
-*  drawer og modal får lik overlay ([99efb7b](https://github.com/helsenorge/designsystem/commit/99efb7b9ac463e09678f081417be006cd9954d87)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
-* **close:**  riktig size på inner container for small versjon ([d23f53a](https://github.com/helsenorge/designsystem/commit/d23f53a959e0c2cd17bde70431775a90d0c5382b)), closes [#352915](https://github.com/helsenorge/designsystem/issues/352915)
-* **drawer:**  legg til scroll shadow også på tiny screen query ([1cdf6df](https://github.com/helsenorge/designsystem/commit/1cdf6dfc78b3e71bbebe2d2ad6104e6e36ea5e0a)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
 * **helptriggericon:**  strong focus styling riktig størrelse ([ada7679](https://github.com/helsenorge/designsystem/commit/ada7679c59fe0754d74211f9087d73f504313faf)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
 * **helptriggericon:**  svg får riktig rolle og aria ([e1cac75](https://github.com/helsenorge/designsystem/commit/e1cac758b62fddd560bd21fda2bf4905676292fd)), closes [#350475](https://github.com/helsenorge/designsystem/issues/350475)
 * **popover:**  fiks padding for popover og popmenu ([c4d916c](https://github.com/helsenorge/designsystem/commit/c4d916cc48d2cc95bc7461a43dbe1fbc67c81576)), closes [#350488](https://github.com/helsenorge/designsystem/issues/350488)
 * **popover:**  sett border radius lik som skisser ([d665e38](https://github.com/helsenorge/designsystem/commit/d665e385b5187be9674b35a15fae4dfc3c9055a6)), closes [#350488](https://github.com/helsenorge/designsystem/issues/350488)
 
+## [11.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.4.1&targetVersion=GTv11.5.0) (2025-07-30)
+
+
+### Features
+
+*  clickarea for radiobutton og checkbox oppfyller uu krav ([0e01c6f](https://github.com/helsenorge/designsystem/commit/0e01c6f745600ee60c2e704cbe3e6109532004e3)), closes [#355146](https://github.com/helsenorge/designsystem/issues/355146)
+* **highlighter:**  ny komponent ([974bded](https://github.com/helsenorge/designsystem/commit/974bdedb7109d32271a292b995008e848dd6d2bb)), closes [#341189](https://github.com/helsenorge/designsystem/issues/341189)
+* **panel:**  legg til aria label for buttonBottom ([470fd44](https://github.com/helsenorge/designsystem/commit/470fd443a1ae56f7225a013e91c52cad57d8c960)), closes [#356384](https://github.com/helsenorge/designsystem/issues/356384)
+
+
+### Bug Fixes
+
+*  colorscss og spacerscss importeres i helsenorgecss ([321fdff](https://github.com/helsenorge/designsystem/commit/321fdff9133ae974d60855e3f995841db824d042)), closes [#355112](https://github.com/helsenorge/designsystem/issues/355112)
+* **toggle:**  lagt til role switch ([d70ac71](https://github.com/helsenorge/designsystem/commit/d70ac718012d47a9a6e46098390314e17ed18290)), closes [#356306](https://github.com/helsenorge/designsystem/issues/356306)
+
+## [11.4.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.4.0&targetVersion=GTv11.4.1) (2025-07-11)
+
+
+### Bug Fixes
+
+* **panel:**  legg til manglende onexpand function prop ([a2ee192](https://github.com/helsenorge/designsystem/commit/a2ee19211b5b808bdea0b82484125622ef1cef48)), closes [#356092](https://github.com/helsenorge/designsystem/issues/356092)
+
+## [11.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.3.1&targetVersion=GTv11.4.0) (2025-07-08)
+
+
+### Features
+
+*  oppdatert help fargetoken ([31d3226](https://github.com/helsenorge/designsystem/commit/31d32262b902c0dd3c39d5ec8d0e98ec96d88b34)), closes [#351112](https://github.com/helsenorge/designsystem/issues/351112)
+* **icon:**  nytt ikon treatmentaids ([a76a8fe](https://github.com/helsenorge/designsystem/commit/a76a8fe45a2e072af895a84b6288edfcf5959aa2)), closes [#354525](https://github.com/helsenorge/designsystem/issues/354525)
+* **panel:**  legg til ref ([306b176](https://github.com/helsenorge/designsystem/commit/306b176c7b6cf7b6f49d4bef56a3fd2f9f7a3fb0)), closes [#354177](https://github.com/helsenorge/designsystem/issues/354177)
+* **panel:**  oppdatert markering av ny-state ([dc9539d](https://github.com/helsenorge/designsystem/commit/dc9539d9c3f8663913866d8c9e59a101cee5deb8)), closes [#353574](https://github.com/helsenorge/designsystem/issues/353574)
+* **statusdot:**  legg til 3 nye statusdotter ([a03339c](https://github.com/helsenorge/designsystem/commit/a03339cfca0901abebf41ce5422e8b2dd1c44d91)), closes [#355543](https://github.com/helsenorge/designsystem/issues/355543)
+* **step:**  legg til mulighet for custom classes ([e7c99e8](https://github.com/helsenorge/designsystem/commit/e7c99e8cf2650affcafb523aaed0760af6d25e32)), closes [#355590](https://github.com/helsenorge/designsystem/issues/355590)
+
+
+### Bug Fixes
+
+* **articleteaser:**  gradient har myk overgang ([3483d7e](https://github.com/helsenorge/designsystem/commit/3483d7e86d222805ae30379b33531889f5de59a6)), closes [#354140](https://github.com/helsenorge/designsystem/issues/354140)
+* **badge:**  kontrast på notification badge warn ([5284733](https://github.com/helsenorge/designsystem/commit/52847332b71f2ce49519a4a65d2dbe83002cfded)), closes [#355693](https://github.com/helsenorge/designsystem/issues/355693)
+* **datepicker:**  focus underline vises på safari ([b79160a](https://github.com/helsenorge/designsystem/commit/b79160a976b87e1e272201cd4962b47a1866b063)), closes [#355604](https://github.com/helsenorge/designsystem/issues/355604)
+* **lightbox:**  riktig fokushåndtering ([da4de84](https://github.com/helsenorge/designsystem/commit/da4de840e098c922f7978dd2d1896c746a3f86bd)), closes [#354742](https://github.com/helsenorge/designsystem/issues/354742)
+* **listheader:**  fiks ikonstørrelse for minste breakpoint ([21de566](https://github.com/helsenorge/designsystem/commit/21de566bafdf2f666a74864681a8985f0efc00e2)), closes [#350169](https://github.com/helsenorge/designsystem/issues/350169)
+
+## [11.3.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.3.0&targetVersion=GTv11.3.1) (2025-06-17)
+
+
+### Features
+
+* **panel:**  setter testid på ekspandert innhold ([f0a670b](https://github.com/helsenorge/designsystem/commit/f0a670bda5cae7b47e1b51455d99678871215d33)), closes [#354743](https://github.com/helsenorge/designsystem/issues/354743)
+
+## [11.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.2.0&targetVersion=GTv11.3.0) (2025-06-10)
+
+
+### Features
+
+*  prosesshjelp fargetokens lagt til ([c70fb44](https://github.com/helsenorge/designsystem/commit/c70fb44c9b95338f1e19563931d707a5921e311b)), closes [#353506](https://github.com/helsenorge/designsystem/issues/353506)
+*  spacers tokens ([575cd80](https://github.com/helsenorge/designsystem/commit/575cd8081ffdb9c96b7df28e85fa4ff3bd4025db)), closes [#351112](https://github.com/helsenorge/designsystem/issues/351112)
+* **drawer:**  flytt lukkekryss til hjørnet ([2b8ff77](https://github.com/helsenorge/designsystem/commit/2b8ff771c5de8bbe7a6f1b257f2df35d8e01bced))
+* **drawer:**  gjør onclose optional ([6eb0bf3](https://github.com/helsenorge/designsystem/commit/6eb0bf3a97b465ba11abba7e4b6b9023130bf788))
+* **drawer:**  legg på shadow ved scroll istedenfor border ([2f3162a](https://github.com/helsenorge/designsystem/commit/2f3162a2903e6e7ce12d95d99b55909282fbcb76))
+* **drawer:**  stopp scrolling bak drawer ([4e5ebe1](https://github.com/helsenorge/designsystem/commit/4e5ebe16b8340c28ea2066d7a63f2065bef19de9))
+
+
+### Bug Fixes
+
+*  drawer og modal får lik overlay ([99efb7b](https://github.com/helsenorge/designsystem/commit/99efb7b9ac463e09678f081417be006cd9954d87)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
+* **close:**  riktig size på inner container for small versjon ([d23f53a](https://github.com/helsenorge/designsystem/commit/d23f53a959e0c2cd17bde70431775a90d0c5382b)), closes [#352915](https://github.com/helsenorge/designsystem/issues/352915)
+* **drawer:**  legg til scroll shadow også på tiny screen query ([1cdf6df](https://github.com/helsenorge/designsystem/commit/1cdf6dfc78b3e71bbebe2d2ad6104e6e36ea5e0a)), closes [#352610](https://github.com/helsenorge/designsystem/issues/352610)
+
 ## [11.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.1.0&targetVersion=GTv11.2.0) (2025-05-27)
 
 

package/Checkbox.js

@@ -43,7 +43,7 @@ const Checkbox = React__default.forwardRef((props, ref) => {
   const large = size === FormSize.large;
   const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
   const mergedRefs = mergeRefs([ref, refObject]);
-  const checkboxWrapperClasses = classNames({
+  const checkboxWrapperClasses = classNames(checkboxStyles["checkbox-wrapper"], {
     [checkboxStyles["checkbox-wrapper--large"]]: large
   });
   const checkboxLabelClasses = classNames(checkboxStyles["checkbox-label"], {

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\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,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\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({\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, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\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"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AA4CO,MAAM,WAAWA,eAAM,WAAW,CAAC,OAAsB,QAAqC;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,KAAK;AAAA,IACf,UAAU,YAAY;AAAA,IACtB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO;AAC5C,QAAA,gBAAgB,QAAQ,WAAW;AACnC,QAAA,UAAU,YAAY,YAAY;AAClC,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AACtC,QAAA,YAAY,SAAS,YAAY,YAAY;AAC7C,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,QAAQ,SAAS,SAAS;AAC1B,QAAA,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;AACxG,QAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;AAE7C,QAAM,yBAAyB,WAAW;AAAA,IACxC,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,EAAA,CAC9C;AACD,QAAM,uBAAuB,WAAW,eAAe,gBAAgB,GAAG;AAAA,IACxE,CAAC,eAAe,0BAA0B,CAAC,GAAG;AAAA,IAC9C,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,IAC7C,CAAC,eAAe,uBAAuB,CAAC,GAAG;AAAA,IAC3C,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,8BAA8B,CAAC,GAAG,SAAS;AAAA,IAC3D,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,IAC9D,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,qCAAqC,CAAC,GAAG,SAAS;AAAA,IAClE,CAAC,eAAe,mCAAmC,CAAC,GAAG,SAAS;AAAA,IAChE,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,EAAA,CAC/D;AACD,QAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;AACrE,QAAM,6BAA6B,WAAW,eAAe,wBAAwB,GAAG;AAAA,IACtF,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,oCAAoC,CAAC,GAAG;AAAA,IACxD,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS;AAAA,IACxE,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,sCAAsC,CAAC,GAAG;AAAA,IAC1D,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS,aAAa;AAAA,IAClF,CAAC,eAAe,yCAAyC,CAAC,GAAG,YAAY,SAAS;AAAA,IAClF,CAAC,eAAe,iDAAiD,CAAC,GAAG,SAAS,aAAa;AAAA,IAC3F,CAAC,eAAe,kDAAkD,CAAC,GAAG,YAAY,SAAS;AAAA,EAAA,CAC5F;AACD,QAAM,mBAAmB,WAAW,eAAe,sBAAsB,GAAG;AAAA,IAC1E,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS;AAAA,IACnE,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS,aAAa;AAAA,IAChF,CAAC,eAAe,+BAA+B,CAAC,GAAG;AAAA,IACnD,CAAC,eAAe,gCAAgC,CAAC,GAAG;AAAA,EAAA,CACrD;AAEG,MAAA,YAAY,SAAS,OAAO;AAChC,MAAI,UAAW,SAAS,UAAwB,aAAA,SAAS,aAAa,GAAG;AACzE,MAAI,aAAa,SAAS,UAAW,aAAY,SAAS,OAAO;AACjE,MAAI,SAAU,aAAY,SAAS,WAAW,GAAG;AAEjD,YAAU,MAAM;AACd,iBAAa,OAAO;AAAA,EAAA,GACnB,CAAC,OAAO,CAAC;AAEN,QAAA,kBAAkB,CAAC,MAAiD;AACxE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IAAA;AAGZ,iBAAa,CAAC,SAAS;AAAA,EACzB;AAEA,QAAM,kBAAkB,MAAuB;AAC7C,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,gBAAc;AAAA,UACd;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,0BACC,QAAK,EAAA,WAAW,4BACd,UAAa,aAAA,oBAAC,QAAK,OAAO,WAAW,WAAW,eAAe,gBAAgB,GAAG,SAAS,OAAO,MAAM,SAAS,QAAQ,EAC5H,CAAA;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACG,oBAAA,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,oBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,UAAU,WAAW,wBAC1E,UAAA;AAAA,IACC;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,2BAA2B;AAAA,IAC1C;AAAA,KAEJ,EACF,CAAA;AAEJ,CAAC;AAED,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\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,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\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, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\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"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AA4CO,MAAM,WAAWA,eAAM,WAAW,CAAC,OAAsB,QAAqC;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,KAAK;AAAA,IACf,UAAU,YAAY;AAAA,IACtB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO;AAC5C,QAAA,gBAAgB,QAAQ,WAAW;AACnC,QAAA,UAAU,YAAY,YAAY;AAClC,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AACtC,QAAA,YAAY,SAAS,YAAY,YAAY;AAC7C,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,QAAQ,SAAS,SAAS;AAC1B,QAAA,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;AACxG,QAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;AAE7C,QAAM,yBAAyB,WAAW,eAAe,kBAAkB,GAAG;AAAA,IAC5E,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,EAAA,CAC9C;AACD,QAAM,uBAAuB,WAAW,eAAe,gBAAgB,GAAG;AAAA,IACxE,CAAC,eAAe,0BAA0B,CAAC,GAAG;AAAA,IAC9C,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,IAC7C,CAAC,eAAe,uBAAuB,CAAC,GAAG;AAAA,IAC3C,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,8BAA8B,CAAC,GAAG,SAAS;AAAA,IAC3D,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,IAC9D,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,qCAAqC,CAAC,GAAG,SAAS;AAAA,IAClE,CAAC,eAAe,mCAAmC,CAAC,GAAG,SAAS;AAAA,IAChE,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,EAAA,CAC/D;AACD,QAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;AACrE,QAAM,6BAA6B,WAAW,eAAe,wBAAwB,GAAG;AAAA,IACtF,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,oCAAoC,CAAC,GAAG;AAAA,IACxD,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS;AAAA,IACxE,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,sCAAsC,CAAC,GAAG;AAAA,IAC1D,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS,aAAa;AAAA,IAClF,CAAC,eAAe,yCAAyC,CAAC,GAAG,YAAY,SAAS;AAAA,IAClF,CAAC,eAAe,iDAAiD,CAAC,GAAG,SAAS,aAAa;AAAA,IAC3F,CAAC,eAAe,kDAAkD,CAAC,GAAG,YAAY,SAAS;AAAA,EAAA,CAC5F;AACD,QAAM,mBAAmB,WAAW,eAAe,sBAAsB,GAAG;AAAA,IAC1E,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS;AAAA,IACnE,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS,aAAa;AAAA,IAChF,CAAC,eAAe,+BAA+B,CAAC,GAAG;AAAA,IACnD,CAAC,eAAe,gCAAgC,CAAC,GAAG;AAAA,EAAA,CACrD;AAEG,MAAA,YAAY,SAAS,OAAO;AAChC,MAAI,UAAW,SAAS,UAAwB,aAAA,SAAS,aAAa,GAAG;AACzE,MAAI,aAAa,SAAS,UAAW,aAAY,SAAS,OAAO;AACjE,MAAI,SAAU,aAAY,SAAS,WAAW,GAAG;AAEjD,YAAU,MAAM;AACd,iBAAa,OAAO;AAAA,EAAA,GACnB,CAAC,OAAO,CAAC;AAEN,QAAA,kBAAkB,CAAC,MAAiD;AACxE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IAAA;AAGZ,iBAAa,CAAC,SAAS;AAAA,EACzB;AAEA,QAAM,kBAAkB,MAAuB;AAC7C,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,gBAAc;AAAA,UACd;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,0BACC,QAAK,EAAA,WAAW,4BACd,UAAa,aAAA,oBAAC,QAAK,OAAO,WAAW,WAAW,eAAe,gBAAgB,GAAG,SAAS,OAAO,MAAM,SAAS,QAAQ,EAC5H,CAAA;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACG,oBAAA,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,oBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,UAAU,WAAW,wBAC1E,UAAA;AAAA,IACC;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,2BAA2B;AAAA,IAC1C;AAAA,KAEJ,EACF,CAAA;AAEJ,CAAC;AAED,SAAS,cAAc;"}

package/Duolist.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
+import { S as Spacer } from "./Spacer.js";
+import duolistStyles from "./components/Duolist/styles.module.scss";
+const DuolistGroup = (props) => {
+  const { format = "formatted", boldColumn = format === "non-formatted" ? "none" : "first", description, separator = ": ", term } = props;
+  const firstBold = boldColumn === "first";
+  const secondBold = boldColumn === "second";
+  const nonFormatted = format === "non-formatted";
+  const dtClassNames = classNames(duolistStyles["duolist__dt"], {
+    [duolistStyles["duolist__dt--bold"]]: firstBold,
+    [duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
+  });
+  const ddClassNames = classNames(duolistStyles["duolist__dd"], {
+    [duolistStyles["duolist__dd--bold"]]: secondBold,
+    [duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
+  });
+  const renderContent = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { "data-separator": nonFormatted ? separator : void 0, className: dtClassNames, children: term }),
+      /* @__PURE__ */ jsx("dd", { className: ddClassNames, children: description })
+    ] });
+  };
+  return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
+};
+const Duolist = (props) => {
+  const {
+    boldColumn,
+    border = "no-border",
+    descriptionWidth,
+    label,
+    format = "formatted",
+    separator,
+    variant = "normal",
+    children,
+    className,
+    testId,
+    useCollapsedFromAndBelowBreakpoint
+  } = props;
+  const hasBorder = border === "border";
+  const hasLines = variant === "line";
+  const extraPaddingTop = hasBorder && (label || hasLines);
+  const nonFormatted = format === "non-formatted";
+  const breakpoint = useBreakpoint();
+  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
+  const duolistWrapperClasses = classNames(
+    {
+      [duolistStyles["duolist-wrapper--border"]]: hasBorder,
+      [duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
+    },
+    className
+  );
+  const duolistClasses = classNames(duolistStyles.duolist, {
+    [duolistStyles["duolist--line"]]: hasLines,
+    [duolistStyles["duolist--non-formatted"]]: nonFormatted,
+    [duolistStyles["duolist--collapsed"]]: useCollapsedMode,
+    [duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode
+  });
+  const duolistColumnStyle = descriptionWidth ? descriptionWidth + "%" : "minmax(60%, 1fr)";
+  return /* @__PURE__ */ jsxs("div", { className: duolistWrapperClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.Duolist, children: [
+    label && /* @__PURE__ */ jsxs(Fragment, { children: [
+      label,
+      /* @__PURE__ */ jsx(Spacer, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      "dl",
+      {
+        style: !nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : void 0,
+        className: duolistClasses,
+        children: React__default.Children.map(children, (child) => {
+          if (child === null || typeof child === "undefined") return;
+          const duolistGroup = child;
+          if (duolistGroup.type === DuolistGroup) {
+            return React__default.cloneElement(child, {
+              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
+              format: duolistGroup.props.format ?? format,
+              separator: duolistGroup.props.separator ?? separator
+            });
+          }
+        })
+      }
+    )
+  ] });
+};
+export {
+  Duolist as D,
+  DuolistGroup as a
+};
+//# sourceMappingURL=Duolist.js.map

package/Duolist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duolist.js","sources":["../src/components/Duolist/Duolist.tsx"],"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"],"names":["React"],"mappings":"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"}

package/ElementHeader.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { E as ElementHeaderText } from "./ElementHeaderText.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
+import { isComponent, isComponentWithChildren } from "./utils/component.js";
+import { a as AvatarSize, A as Avatar } from "./Avatar.js";
+import { B as Badge } from "./Badge.js";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import { S as StatusDot } from "./StatusDot.js";
+import { S as StatusDotMultiComposition } from "./StatusDotMultiComposition.js";
+import { H as Highlighter } from "./Highlighter.js";
+import styles from "./components/ElementHeader/styles.module.scss";
+const renderElementHeader = (element, options) => {
+  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText } = options;
+  if (isComponent(element, ElementHeader)) {
+    return React__default.cloneElement(element, {
+      chevronIcon,
+      icon,
+      isHovered,
+      size,
+      parentType,
+      highlightText
+    });
+  }
+  if (element) {
+    return /* @__PURE__ */ jsx(
+      ElementHeader,
+      {
+        highlightText,
+        titleHtmlMarkup,
+        parentType,
+        chevronIcon,
+        icon,
+        isHovered,
+        size,
+        children: element
+      }
+    );
+  }
+};
+const mapChildren = (children, isJsxChild = false) => {
+  var _a, _b, _c, _d;
+  let avatarChild;
+  const badgeChildren = [];
+  const statusDotChildren = [];
+  let statusDotMCChild;
+  const elementHeaderTextChildren = [];
+  const stringChildren = [];
+  const remainingChildren = [];
+  React__default.Children.forEach(children, (child) => {
+    if (child === null || typeof child === "undefined") return;
+    if (isComponent(child, Avatar)) {
+      avatarChild = child;
+    } else if (isComponent(child, ElementHeaderText)) {
+      elementHeaderTextChildren.push(child);
+    } else if (isComponent(child, Badge)) {
+      badgeChildren.push(child);
+    } else if (isComponent(child, StatusDotMultiComposition)) {
+      statusDotMCChild = child;
+    } else if (isComponent(child, StatusDot)) {
+      statusDotChildren.push(child);
+    } else if (typeof child === "string") {
+      stringChildren.push(child);
+    } else {
+      remainingChildren.push(child);
+    }
+  });
+  const hasSpecialChildren = avatarChild !== void 0 || elementHeaderTextChildren.length > 0 || statusDotChildren.length > 0 || statusDotMCChild !== void 0 || badgeChildren !== void 0 && stringChildren.length > 0;
+  const noRemainingRecursiveChildren = remainingChildren.length === 0 || isComponentWithChildren(remainingChildren[0]) && typeof ((_b = (_a = remainingChildren[0]) == null ? void 0 : _a.props) == null ? void 0 : _b.children) === "undefined";
+  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {
+    return {
+      avatarChild,
+      elementHeaderTextChildren,
+      badgeChildren,
+      statusDotChildren,
+      statusDotMCChild,
+      stringChildren,
+      remainingChildren
+    };
+  }
+  if (isComponentWithChildren(remainingChildren[0])) {
+    return mapChildren((_d = (_c = remainingChildren[0]) == null ? void 0 : _c.props) == null ? void 0 : _d.children, true);
+  }
+};
+const ElementHeaderRoot = (props) => {
+  var _a;
+  const {
+    className = "",
+    titleHtmlMarkup = "h2",
+    parentType = "linklist",
+    chevronIcon,
+    children,
+    icon,
+    isHovered,
+    size,
+    testId,
+    highlightText
+  } = props;
+  const breakpoint = useBreakpoint();
+  const showIcon = size !== "small" && !!icon;
+  const contentIsString = typeof children === "string";
+  const mappedChildren = mapChildren(children);
+  const hasStatusDots = !!((_a = mappedChildren == null ? void 0 : mappedChildren.statusDotChildren) == null ? void 0 : _a.length) || !!(mappedChildren == null ? void 0 : mappedChildren.statusDotMCChild);
+  const listLabelClasses = classNames(styles["element-header"], className);
+  const badgeContainerClasses = classNames(styles["element-header__badge-container"]);
+  const badgeClasses = classNames(styles["element-header__badge"]);
+  const statusdotContainerClasses = classNames(styles["element-header__statusdot-container"]);
+  const chevronClasses = classNames(styles["element-header__chevron"]);
+  const contentClasses = classNames(styles["element-header__content"], {
+    [styles["element-header__content--element"]]: !contentIsString
+  });
+  const iconClasses = classNames(styles["element-header__icon"], {});
+  const avatarClasses = classNames(styles["element-header__avatar"], {});
+  const CustomTag = titleHtmlMarkup;
+  return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: listLabelClasses, children: [
+    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React__default.cloneElement(icon, {
+      size: breakpoint <= Breakpoint.xs ? IconSize.XSmall : IconSize.Small,
+      isHovered
+    }) }),
+    size !== "small" && (mappedChildren == null ? void 0 : mappedChildren.avatarChild) && /* @__PURE__ */ jsx("span", { className: avatarClasses, children: React__default.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall }) }),
+    hasStatusDots && /* @__PURE__ */ jsxs("span", { className: statusdotContainerClasses, children: [
+      !!(mappedChildren == null ? void 0 : mappedChildren.statusDotChildren) && /* @__PURE__ */ jsx(StatusDotMultiComposition, { children: mappedChildren.statusDotChildren }),
+      !!(mappedChildren == null ? void 0 : mappedChildren.statusDotMCChild) && (mappedChildren == null ? void 0 : mappedChildren.statusDotMCChild)
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: contentClasses, "data-hasstatusdots": hasStatusDots, children: [
+      mappedChildren == null ? void 0 : mappedChildren.elementHeaderTextChildren,
+      !!(mappedChildren == null ? void 0 : mappedChildren.stringChildren.length) && /* @__PURE__ */ jsx(CustomTag, { className: styles["element-header__title"], children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: mappedChildren.stringChildren }) }),
+      /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: mappedChildren == null ? void 0 : mappedChildren.remainingChildren })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: badgeContainerClasses, children: (mappedChildren == null ? void 0 : mappedChildren.badgeChildren) && mappedChildren.badgeChildren.map((badgeChild, index) => {
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, "data-parenttype": parentType, children: badgeChild }, index);
+    }) }),
+    chevronIcon && /* @__PURE__ */ jsx("span", { className: chevronClasses, "data-parenttype": parentType, children: /* @__PURE__ */ jsx(Icon, { svgIcon: chevronIcon, isHovered, size: IconSize.XSmall }) })
+  ] });
+};
+ElementHeaderRoot.displayName = "ElementHeader";
+const ElementHeader = ElementHeaderRoot;
+ElementHeader.Text = ElementHeaderText;
+ElementHeader.Text.displayName = "ElementHeader.Text";
+ElementHeader.StatusDotMultiComposition = StatusDotMultiComposition;
+ElementHeader.StatusDotMultiComposition.displayName = "ElementHeader.StatusDotMultiComposition";
+export {
+  ElementHeader as E,
+  ElementHeaderRoot as a,
+  mapChildren as m,
+  renderElementHeader as r
+};
+//# sourceMappingURL=ElementHeader.js.map

package/ElementHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementHeader.js","sources":["../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';\nimport { TitleTags } from '../Title';\nimport StatusDotMultiComposition, { StatusDotMultiCompositionProps, StatusDotMultiCompositionType } from './StatusDotMultiComposition';\nimport Highlighter from '../Highlighter';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotMultiComposition?: StatusDotMultiCompositionType;\n}\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<ElementHeaderProps, 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText'>\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\ninterface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotMultiCompositionProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotMultiCompositionProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotMultiCompositionProps>(child, StatusDotMultiComposition)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n  });\n  const iconClasses = cn(styles['element-header__icon'], {});\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint <= Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotMultiComposition>{mappedChildren.statusDotChildren}</StatusDotMultiComposition>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotMultiComposition: React.FC<StatusDotMultiCompositionProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotMultiComposition = StatusDotMultiComposition;\nElementHeader.StatusDotMultiComposition.displayName = 'ElementHeader.StatusDotMultiComposition';\n\nexport default ElementHeader;\n"],"names":["React","cn"],"mappings":"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"}

package/ElementHeaderText.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { H as Highlighter } from "./Highlighter.js";
+import styles from "./components/ElementHeader/styles.module.scss";
+const ElementHeaderText = (props) => {
+  const {
+    firstText,
+    firstTextEmphasised = false,
+    secondText = void 0,
+    secondTextEmphasised = false,
+    subText = false,
+    className = "",
+    testId,
+    titleHtmlMarkup = "span",
+    highlightText
+  } = props;
+  const headerTextWrapperClasses = classNames(className, styles["text-wrapper"], {
+    [styles["text-wrapper--sub-level"]]: subText
+  });
+  const firstHeaderTextSegmentClasses = classNames({
+    [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised
+  });
+  const secondHeaderTextSegmentClasses = classNames({
+    [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised
+  });
+  const CustomTag = titleHtmlMarkup;
+  return /* @__PURE__ */ jsx("span", { "data-testid": testId, className: headerTextWrapperClasses, children: /* @__PURE__ */ jsx(CustomTag, { className: styles["element-header__title"], children: /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
+    /* @__PURE__ */ jsx("span", { className: firstHeaderTextSegmentClasses, children: firstText }),
+    secondText && /* @__PURE__ */ jsx("span", { className: secondHeaderTextSegmentClasses, children: secondText })
+  ] }) }) });
+};
+export {
+  ElementHeaderText as E
+};
+//# sourceMappingURL=ElementHeaderText.js.map

package/ElementHeaderText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementHeaderText.js","sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = React.FC<ElementHeaderTextProps>;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: ElementHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n"],"names":["cn"],"mappings":";;;;AA+BO,MAAM,oBAA2C,CAAS,UAAA;AACzD,QAAA;AAAA,IACJ;AAAA,IACA,sBAAsB;AAAA,IACtB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EAAA,IACE;AAEJ,QAAM,2BAA2BA,WAAG,WAAW,OAAO,cAAc,GAAG;AAAA,IACrE,CAAC,OAAO,yBAAyB,CAAC,GAAG;AAAA,EAAA,CACtC;AACD,QAAM,gCAAgCA,WAAG;AAAA,IACvC,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,EAAA,CAC7C;AACD,QAAM,iCAAiCA,WAAG;AAAA,IACxC,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,EAAA,CAC7C;AACD,QAAM,YAAY;AAElB,SACG,oBAAA,QAAA,EAAK,eAAa,QAAQ,WAAW,0BACpC,UAAA,oBAAC,WAAU,EAAA,WAAW,OAAO,uBAAuB,GAClD,UAAC,qBAAA,aAAA,EAAY,YAAY,eACvB,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAK,WAAW,+BAAgC,UAAU,WAAA;AAAA,IAC1D,cAAc,oBAAC,QAAK,EAAA,WAAW,gCAAiC,UAAW,WAAA,CAAA;AAAA,EAAA,EAC9E,CAAA,EACF,CAAA,GACF;AAEJ;"}

package/HelpDetails.js

@@ -15,7 +15,7 @@ const HelpDetails = React__default.forwardRef(({ children, controllerRef, testId
       controllerRef && arrow({ element: arrowRef }),
       size({
         apply({ rects }) {
-          setBubbleMinWidth(rects.reference.x);
+          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);
           const { reference, floating } = rects;
           const controllerBottom = reference.y + reference.height;
           const bubbleTop = floating.y;

package/HelpDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpDetails.js","sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpDetails = React.forwardRef<HTMLDivElement, HelpDetailsProps>(({ children, controllerRef, testId }, ref) => {\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon\n          setBubbleMinWidth(rects.reference.x);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n});\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"names":["React"],"mappings":";;;;;AAOA,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AAWlB,MAAA,cAAcA,eAAM,WAA6C,CAAC,EAAE,UAAU,eAAe,OAAO,GAAG,QAAQ;AAC7G,QAAA,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,eAAM,SAAwB,IAAI;AAC9E,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB;AAEnE,QAAM,EAAE,MAAM,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpD,YAAY;AAAA,MACV,OAAO,iBAAiB;AAAA,MACxB,iBAAiB,MAAM,EAAE,SAAS,UAAU;AAAA,MAC5C,KAAK;AAAA,QACH,MAAM,EAAE,SAAS;AAEG,4BAAA,MAAM,UAAU,CAAC;AAG7B,gBAAA,EAAE,WAAW,SAAA,IAAa;AAC1B,gBAAA,mBAAmB,UAAU,IAAI,UAAU;AACjD,gBAAM,YAAY,SAAS;AACrB,gBAAA,WAAW,YAAY,mBAAmB;AAChD,+BAAqB,QAAQ;AAAA,QAAA;AAAA,MAEhC,CAAA;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,+CAAe;AAAA,IAAA;AAAA,EAC5B,CACD;AAED,QAAM,qBAAqB;AAAA,IACzB,OAAO,cAAc;AAAA,IACrB,gBAAgB,OAAO,sBAAsB,IAAI,OAAO,0BAA0B;AAAA,EACpF;AACM,QAAA,iBAAiB,WAAW,gBAAgB,OAAO,+BAA+B,IAAI,OAAO,mCAAmC,CAAC;AAGrI,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa;AAAA,MACb;AAAA,MACA,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,mBAAmB,OAAO,OAAU;AAAA,MAE5F,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,OAAO,gBAAgB,KAAK,KAAK,aACnC,UAAA,iBAAiB,OAAO,sBAAsB,eAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA,GAGnB;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ,CAAC;AAED,YAAY,cAAc;"}
+{"version":3,"file":"HelpDetails.js","sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n  /** Sets the text content of the HelpDetails. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpDetails is placed upon */\n  controllerRef?: React.RefObject<HTMLButtonElement>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpDetails = React.forwardRef<HTMLDivElement, HelpDetailsProps>(({ children, controllerRef, testId }, ref) => {\n  const arrowRef = useRef(null);\n  const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n  const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n  const { refs, context, floatingStyles } = useFloating({\n    middleware: [\n      offset(arrowYOffsetValue),\n      controllerRef && arrow({ element: arrowRef }),\n      size({\n        apply({ rects }) {\n          // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n          setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n          // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n          const { reference, floating } = rects;\n          const controllerBottom = reference.y + reference.height;\n          const bubbleTop = floating.y;\n          const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n          setArrowYOffsetValue(distance);\n        },\n      }),\n    ],\n    placement: 'bottom',\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef?.current,\n    },\n  });\n\n  const helpDetailsClasses = classNames(\n    styles['help-details'],\n    controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n  );\n  const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n  return (\n    <div\n      className={helpDetailsClasses}\n      data-testid={testId}\n      ref={ref}\n      style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n    >\n      <div style={floatingStyles} ref={refs.setFloating}>\n        {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            fill={'var(--core-color-plum-50)'}\n            stroke={'var(--core-color-plum-400)'}\n            strokeWidth={1}\n          />\n        )}\n      </div>\n      <div className={contentClasses}>{children}</div>\n    </div>\n  );\n});\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"names":["React"],"mappings":";;;;;AAOA,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AAWlB,MAAA,cAAcA,eAAM,WAA6C,CAAC,EAAE,UAAU,eAAe,OAAO,GAAG,QAAQ;AAC7G,QAAA,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,eAAM,SAAwB,IAAI;AAC9E,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB;AAEnE,QAAM,EAAE,MAAM,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpD,YAAY;AAAA,MACV,OAAO,iBAAiB;AAAA,MACxB,iBAAiB,MAAM,EAAE,SAAS,UAAU;AAAA,MAC5C,KAAK;AAAA,QACH,MAAM,EAAE,SAAS;AAEf,4BAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,CAAC;AAGzD,gBAAA,EAAE,WAAW,SAAA,IAAa;AAC1B,gBAAA,mBAAmB,UAAU,IAAI,UAAU;AACjD,gBAAM,YAAY,SAAS;AACrB,gBAAA,WAAW,YAAY,mBAAmB;AAChD,+BAAqB,QAAQ;AAAA,QAAA;AAAA,MAEhC,CAAA;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,+CAAe;AAAA,IAAA;AAAA,EAC5B,CACD;AAED,QAAM,qBAAqB;AAAA,IACzB,OAAO,cAAc;AAAA,IACrB,gBAAgB,OAAO,sBAAsB,IAAI,OAAO,0BAA0B;AAAA,EACpF;AACM,QAAA,iBAAiB,WAAW,gBAAgB,OAAO,+BAA+B,IAAI,OAAO,mCAAmC,CAAC;AAGrI,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,eAAa;AAAA,MACb;AAAA,MACA,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,mBAAmB,OAAO,OAAU;AAAA,MAE5F,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,OAAO,gBAAgB,KAAK,KAAK,aACnC,UAAA,iBAAiB,OAAO,sBAAsB,eAC7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA,GAGnB;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ,CAAC;AAED,YAAY,cAAc;"}

package/HelpTriggerIcon.js

@@ -66,17 +66,17 @@ const HelpSign = ({ color, weight }) => {
 };
 const getIconColor = (hover, weight) => {
   if (weight === "normal") {
-    return `var(--core-color-plum-${hover ? "900" : "700"})`;
+    return hover ? "var(--color-help-graphics-verydark)" : "var(--color-help-graphics-normal)";
   }
 };
 const HelpTriggerIcon = React__default.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(HelpTriggerIconInternal, { ...props, ref });
 });
 const HelpTriggerIconInternal = React__default.forwardRef(
-  ({ ariaLabel, ariaLabelledById, htmlMarkup = "button", size = "medium", testId, weight = "normal", ...buttonRest }, ref) => {
+  ({ ariaLabel, ariaLabelledById, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal", ...buttonRest }, ref) => {
     const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
-    const { hoverRef, isHovered } = useHover(ref, false);
-    const helpIcon = /* @__PURE__ */ jsx(HelpSign, { color: getIconColor(isHovered, weight), weight });
+    const { hoverRef, isHovered: interalIsHovered } = useHover(ref, false);
+    const helpIcon = /* @__PURE__ */ jsx(HelpSign, { color: getIconColor(interalIsHovered || isHovered, weight), weight });
     const isButton = htmlMarkup === "button";
     const iconClasses = classNames(
       styles["help-trigger-icon"],