@helsenorge/designsystem-react 8.3.0 → 8.5.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [8.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.2.1&targetVersion=GTv8.3.0) (2024-09-09)
+
+### Features
+
+- statusdot oppdaterer utseende ([18927ec](https://github.com/helsenorge/designsystem/commit/18927ec1e9a6ca18eb0f528798d17f2e4edaa4e0)),
+  closes [#328986](https://github.com/helsenorge/designsystem/issues/328986)
+- **datepicker:** ny prop onDatePickerClosed
+  ([11c1f3b](https://github.com/helsenorge/designsystem/commit/11c1f3b5dd8e186793d9e057385450385a1814ec)), closes
+  [#329586](https://github.com/helsenorge/designsystem/issues/329586)
+
+### Bug Fixes
+
+- **datepicker:** datevalue fungerer for mobil
+  ([7202ba8](https://github.com/helsenorge/designsystem/commit/7202ba8dca1f6101ed7987fd947b9e58824946db)), closes
+  [#331620](https://github.com/helsenorge/designsystem/issues/331620)
+- **datepicker:** onblur skjer riktig uten focuseddatepickerpopup
+  ([e1662ed](https://github.com/helsenorge/designsystem/commit/e1662edbb486340352e9012c1ba8aeae43dca27e)), closes
+  [#329586](https://github.com/helsenorge/designsystem/issues/329586)
+- **datepicker:** popup valg trigger onblur
+  ([6d886cb](https://github.com/helsenorge/designsystem/commit/6d886cbc3bcfe9b97c0247389ca0238f29dd9f0a)), closes
+  [#329586](https://github.com/helsenorge/designsystem/issues/329586)
+- **designsystem:** badge i panel vises til høyre på mobil
+  ([2b6d63e](https://github.com/helsenorge/designsystem/commit/2b6d63e1a36d63ad41159fb637f896636ae58672)), closes
+  [#329338](https://github.com/helsenorge/designsystem/issues/329338)
+
 ## [8.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.2.0&targetVersion=GTv8.2.1) (2024-08-28)
 
 ## [8.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.1.1&targetVersion=GTv8.2.0) (2024-08-28)
@@ -1733,12 +1758,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- panel har avstand fra tittel til badge
-  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
-  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 - økt kontrast på understreking av lenker
   ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
   [#229049](https://github.com/helsenorge/designsystem/issues/229049)
+- panel har avstand fra tittel til badge
+  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
+  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/__mocks__/matchMedia.js

@@ -1,6 +1,7 @@
 import { vi as e } from "vitest";
 const t = e.fn().mockImplementation(() => ({
   matches: !0,
+  addListener: e.fn(),
   addEventListener: e.fn(),
   removeEventListener: e.fn()
 }));

package/__mocks__/matchMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"matchMedia.js","sources":["../../src/__mocks__/matchMedia.ts"],"sourcesContent":["import { vi as jest } from 'vitest';\n\nexport const mockWindowMatchMedia = jest.fn().mockImplementation(() => ({\n  matches: true,\n  addEventListener: jest.fn(),\n  removeEventListener: jest.fn(),\n}));\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: mockWindowMatchMedia,\n});\n"],"names":["mockWindowMatchMedia","jest"],"mappings":";AAEO,MAAMA,IAAuBC,EAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,EACtE,SAAS;AAAA,EACT,kBAAkBA,EAAK,GAAG;AAAA,EAC1B,qBAAqBA,EAAK,GAAG;AAC/B,EAAE;AAEF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAOD;AACT,CAAC;"}
+{"version":3,"file":"matchMedia.js","sources":["../../src/__mocks__/matchMedia.ts"],"sourcesContent":["import { vi as jest } from 'vitest';\n\nexport const mockWindowMatchMedia = jest.fn().mockImplementation(() => ({\n  matches: true,\n  addListener: jest.fn(),\n  addEventListener: jest.fn(),\n  removeEventListener: jest.fn(),\n}));\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: mockWindowMatchMedia,\n});\n"],"names":["mockWindowMatchMedia","jest"],"mappings":";AAEO,MAAMA,IAAuBC,EAAK,GAAG,EAAE,mBAAmB,OAAO;AAAA,EACtE,SAAS;AAAA,EACT,aAAaA,EAAK,GAAG;AAAA,EACrB,kBAAkBA,EAAK,GAAG;AAAA,EAC1B,qBAAqBA,EAAK,GAAG;AAC/B,EAAE;AAEF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAOD;AACT,CAAC;"}

package/components/RadioButton/RadioButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode, FormSize } from '../../constants';
-export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'> {
+export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {
     /** Adds custom classes to the element. */
     className?: string;
     /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
@@ -11,7 +11,7 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
     inputId?: string;
     /** Changes the visuals of the radioButton */
     mode?: keyof typeof FormMode;
-    /** Changes the visuals of the radioButton */
+    /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */
     size?: keyof typeof FormSize;
     /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
     error?: boolean;

package/components/RadioButton/RadioButton.js

@@ -1,5 +1,5 @@
-import c, { useState as P } from "react";
-import m from "classnames";
+import u, { useState as P } from "react";
+import c from "classnames";
 import { FormMode as i, FormSize as U, AnalyticsId as W } from "../../constants.js";
 import { usePseudoClasses as q } from "../../hooks/usePseudoClasses.js";
 import { useUuid as G } from "../../hooks/useUuid.js";
@@ -9,18 +9,18 @@ import { uuid as Q } from "../../utils/uuid.js";
 import { ErrorWrapper as V } from "../ErrorWrapper/ErrorWrapper.js";
 import { getLabelText as X, renderLabelAsParent as Y } from "../Label/Label.js";
 import e from "../RadioButton/styles.module.scss";
-const be = (l, o, a, s) => {
-  const n = o === "oninvalid", t = l === s;
-  return m({
+const be = (l, o, a, m) => {
+  const n = o === "oninvalid", t = l === m;
+  return c({
     [e["radio-button-label__large--on-grey"]]: a && o === "ongrey" && !t,
     [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !t && a,
     [e["radio-button-label__large--selected"]]: a && t && !n,
     [e["radio-button-label__large--selected-invalid"]]: a && t && n
   });
-}, Z = c.forwardRef((l, o) => {
+}, Z = u.forwardRef((l, o) => {
   const {
     className: a,
-    defaultChecked: s = !1,
+    defaultChecked: m,
     onChange: n,
     disabled: t,
     label: f,
@@ -36,14 +36,14 @@ const be = (l, o, a, s) => {
     required: L,
     labelClassNames: N,
     ...I
-  } = l, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, r = w === U.large, [E, A] = P(s), { refObject: F, isFocused: b } = q(J(o) ? o : null), S = K([o, F]), C = G(B), j = m(e["radio-button-wrapper"], {
+  } = l, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, r = w === U.large, [E, A] = P(), { refObject: F, isFocused: s } = q(J(o) ? o : null), S = K([o, F]), C = G(B), j = c(e["radio-button-wrapper"], {
     [e["radio-button-wrapper--with-error"]]: _,
     [e["radio-button-wrapper__large"]]: r,
-    [e["radio-button-wrapper__large--focused"]]: r && b,
-    [e["radio-button-wrapper__large--selected"]]: r && E && b,
-    [e["radio-button-wrapper__large--invalid"]]: r && T && b,
-    [e["radio-button-wrapper__large--on-blueberry"]]: r && h && b
-  }), z = m(
+    [e["radio-button-wrapper__large--focused"]]: r && s,
+    [e["radio-button-wrapper__large--selected"]]: r && E && s,
+    [e["radio-button-wrapper__large--invalid"]]: r && T && s,
+    [e["radio-button-wrapper__large--on-blueberry"]]: r && h && s
+  }), z = c(
     e["radio-button-label"],
     {
       [e["radio-button-label--disabled"]]: t,
@@ -53,7 +53,7 @@ const be = (l, o, a, s) => {
       [e["radio-button-label__large--disabled"]]: r && t
     },
     N
-  ), D = m(
+  ), D = c(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
@@ -65,9 +65,9 @@ const be = (l, o, a, s) => {
       [e["radio-button__large--invalid"]]: r && g
     },
     a
-  ), M = (u) => {
-    A(u.target.checked), n && n(u);
-  }, O = () => /* @__PURE__ */ c.createElement(
+  ), M = (b) => {
+    A(b.target.checked), n && n(b);
+  }, O = () => /* @__PURE__ */ u.createElement(
     "input",
     {
       id: p,
@@ -77,14 +77,14 @@ const be = (l, o, a, s) => {
       disabled: t,
       value: R,
       ref: S,
-      defaultChecked: s,
+      defaultChecked: m,
       "aria-describedby": H(l, C),
       required: L,
       ...I,
-      onChange: (u) => M(u)
+      onChange: (b) => M(b)
     }
   );
-  return /* @__PURE__ */ c.createElement(V, { errorText: _, errorTextId: C }, /* @__PURE__ */ c.createElement("div", { "data-testid": x, "data-analyticsid": W.RadioButton, className: j }, Y(
+  return /* @__PURE__ */ u.createElement(V, { errorText: _, errorTextId: C }, /* @__PURE__ */ u.createElement("div", { "data-testid": x, "data-analyticsid": W.RadioButton, className: j }, Y(
     f,
     O(),
     p,

package/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - 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 getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - 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 getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}

package/components/Toggle/Toggle.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import '../../scss/supernova/styles/colors.css';
+export type LabelText = {
+    text: string;
+    type?: 'semibold' | 'normal';
+};
+export declare enum TogglePosition {
+    left = "left",
+    right = "right"
+}
+export declare enum ToggleOnColor {
+    onwhite = "onwhite",
+    onneutral = "onneutral",
+    onblueberry = "onblueberry"
+}
+export interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**  Determines if the Toggle is checked */
+    checked?: boolean;
+    /** Sets the label of the Toggle */
+    label: LabelText[];
+    /** Defines the color of the toggle */
+    onColor?: keyof typeof ToggleOnColor;
+    /** Sets the sublabel of the Toggle */
+    subLabel?: string;
+    /** Sets the position of the toggle relative to the label */
+    togglePosition?: keyof typeof TogglePosition;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/components/Toggle/Toggle.js

@@ -0,0 +1,92 @@
+import t, { useState as x, useEffect as h } from "react";
+import n from "classnames";
+import { AnalyticsId as M } from "../../constants.js";
+import { usePseudoClasses as U } from "../../hooks/usePseudoClasses.js";
+import { useUuid as i } from "../../hooks/useUuid.js";
+import e from "../Toggle/styles.module.scss";
+/* empty css                                     */
+import { useAnimate as q } from "../../node_modules/framer-motion/dist/es/animation/hooks/use-animate.js";
+var z = /* @__PURE__ */ ((r) => (r.left = "left", r.right = "right", r))(z || {}), G = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.onneutral = "onneutral", r.onblueberry = "onblueberry", r))(G || {});
+const P = ({
+  checked: r = !1,
+  label: p,
+  onChange: u,
+  onColor: f = "onwhite",
+  subLabel: d,
+  togglePosition: l = "left",
+  testId: A
+}) => {
+  const [o, v] = x(r), [s, b] = x(!1), [C, g] = q(), S = i(), w = i(), _ = i(), N = i(), E = i(), { refObject: O, isHovered: L, isActive: m } = U(C), c = L && !s, y = f === "onwhite";
+  h(() => {
+    if (s) {
+      const a = setTimeout(() => b(!1), 300);
+      return () => clearTimeout(a);
+    }
+  }, [s]), h(() => {
+    v(r);
+  }, [r]), h(() => {
+    g("#" + w, { background: T() }, { duration: 0.2, ease: "easeInOut" }), g(
+      "#" + _,
+      { background: o ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)" },
+      { duration: 0.2, ease: "easeInOut" }
+    ), g("#" + _, { x: c ? 9 : o ? 18 : 0 }, { duration: 0.2, ease: "easeInOut" }), g("svg", { opacity: o ? 1 : 0 }, { duration: 0.2, ease: "easeInOut" });
+  }, [o, c, m]);
+  const T = () => o && m ? "var(--core-color-blueberry-800)" : o ? c ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)" : y && m ? "var(--core-color-neutral-400)" : y ? c ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)" : m ? "var(--core-color-neutral-200)" : c ? "var(--core-color-neutral-50)" : "var(--core-color-white)", j = (a) => {
+    v(a.target.checked), b(!0), u == null || u(a);
+  }, B = n(e["toggle-container"]), D = n(e["toggle-container__row"], {
+    [e["toggle-container__row--right"]]: l === "right"
+    /* right */
+  }), F = n(e["toggle-container__sublabel"], {
+    [e["toggle-container__sublabel--toggle-right"]]: l === "right"
+    /* right */
+  }), H = n(e["toggle-container__toggle"], {
+    [e["toggle-container__toggle--ignore-hover"]]: s,
+    [e["toggle-container__toggle--on-white"]]: f === "onwhite"
+    /* onwhite */
+  }), R = n(e["toggle-container__toggle__dot"], {
+    [e["toggle-container__toggle__dot--ignore-hover"]]: s
+  }), I = () => /* @__PURE__ */ t.createElement("label", { ref: O, className: e["toggle-container__toggle-group"] }, /* @__PURE__ */ t.createElement(
+    "input",
+    {
+      id: S,
+      type: "checkbox",
+      checked: o,
+      onChange: j,
+      className: e["toggle-container__input"],
+      "aria-label": p.map((a) => a.text).join(" "),
+      "aria-describedby": d ? E : void 0
+    }
+  ), /* @__PURE__ */ t.createElement("span", { id: w, className: H, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement("span", { id: _, className: R, "aria-hidden": "true" }, /* @__PURE__ */ t.createElement(
+    "svg",
+    {
+      width: "17",
+      height: "13",
+      viewBox: "0 0 17 13",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: e["toggle-container__toggle__dot__icon"]
+    },
+    /* @__PURE__ */ t.createElement("path", { d: "M15 2L6.80839 10.548L2 5.53145", fill: "none", strokeWidth: "3" })
+  )))), k = () => /* @__PURE__ */ t.createElement(
+    "span",
+    {
+      id: N,
+      className: n(e["toggle-container__label"], {
+        [e["toggle-container__label--toggle-right"]]: l === "right"
+        /* right */
+      })
+    },
+    p.map((a) => {
+      const W = n({
+        [e["toggle-container__label__text--semibold"]]: a.type === "semibold"
+      });
+      return /* @__PURE__ */ t.createElement("span", { key: N + a.text, className: W }, a.text);
+    })
+  );
+  return /* @__PURE__ */ t.createElement("div", { className: B, "data-testid": A, "data-analyticsid": M.Toggle }, /* @__PURE__ */ t.createElement("div", { className: D }, l === "left" && /* @__PURE__ */ t.createElement(t.Fragment, null, I(), k()), l === "right" && /* @__PURE__ */ t.createElement(t.Fragment, null, k(), I())), d && /* @__PURE__ */ t.createElement("div", { id: E, className: F }, d));
+};
+export {
+  G as ToggleOnColor,
+  z as TogglePosition,
+  P as default
+};
+//# sourceMappingURL=Toggle.js.map

package/components/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'framer-motion';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\n        id={inputId}\n        type=\"checkbox\"\n        checked={checkedState}\n        onChange={handleChange}\n        className={styles['toggle-container__input']}\n        aria-label={label.map(l => l.text).join(' ')}\n        aria-describedby={subLabel ? subLabelId : undefined}\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\n        {label.map(labelText => {\n          const labelClassNames = classNames({\n            [styles['toggle-container__label__text--semibold']]: labelText.type === 'semibold',\n          });\n\n          return (\n            <span key={labelId + labelText.text} className={labelClassNames}>\n              {labelText.text}\n            </span>\n          );\n        })}\n      </span>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\n        {togglePosition === TogglePosition.left && (\n          <>\n            {renderToggle()}\n            {renderLabelText()}\n          </>\n        )}\n        {togglePosition === TogglePosition.right && (\n          <>\n            {renderLabelText()}\n            {renderToggle()}\n          </>\n        )}\n      </div>\n      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor","Toggle","checked","label","onChange","onColor","subLabel","togglePosition","testId","checkedState","setCheckedState","useState","showToggleAnimation","setShowToggleAnimation","scope","animate","useAnimate","inputId","useUuid","toggleId","toggleDotId","labelId","subLabelId","refObject","isHovered","isActive","usePseudoClasses","showHoveredStyling","isOnWhite","useEffect","timer","getBackgroundColor","handleChange","event","toggleContainerClassNames","classNames","styles","toggleRowClassNames","subLabelClassNames","toggleClassNames","toggleDotClassNames","renderToggle","React","l","renderLabelText","labelText","labelClassNames","AnalyticsId"],"mappings":"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"}

package/components/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+import Toggle from './Toggle';
+export * from './Toggle';
+export default Toggle;

package/components/Toggle/index.js

@@ -0,0 +1,8 @@
+import e from "./Toggle.js";
+import { ToggleOnColor as l, TogglePosition as t } from "./Toggle.js";
+export {
+  l as ToggleOnColor,
+  t as TogglePosition,
+  e as default
+};
+//# sourceMappingURL=index.js.map

package/components/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Toggle/styles.module.scss

@@ -0,0 +1,125 @@
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
+
+.toggle-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 43.5rem;
+
+  &__row {
+    display: flex;
+    align-items: center;
+
+    &--right {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &__label {
+    font-size: $font-size-md;
+    font-weight: 400;
+    line-height: $lineheight-size-xs;
+    color: var(--core-color-neutral-900);
+    margin-left: getSpacer(xs);
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
+    }
+
+    &__text--semibold {
+      font-weight: 600;
+    }
+
+    &--toggle-right {
+      margin-left: 0;
+      margin-right: getSpacer(xs);
+
+      @media (min-width: map.get($grid-breakpoints, sm)) {
+        margin-right: getSpacer(s);
+      }
+    }
+  }
+
+  &__sublabel {
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    color: var(--core-color-neutral-800);
+    margin-left: 3.9rem;
+    text-align: left;
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      font-size: $font-size-sm;
+      line-height: $lineheight-size-xs;
+      text-align: left;
+      margin-left: 4.1rem;
+    }
+
+    &--toggle-right {
+      margin-left: 0;
+    }
+  }
+
+  &__toggle-group {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__toggle {
+    position: relative;
+    display: inline-block;
+    width: 3.125rem;
+    height: 2rem;
+    background-color: var(--color-base-background-white);
+    border-radius: 60px;
+    border: 2px solid var(--color-base-border-onlight-emphasized);
+
+    &--on-white {
+      background-color: var(--core-color-neutral-50);
+    }
+
+    &--ignore-hover {
+      pointer-events: none;
+    }
+
+    &__dot {
+      content: '';
+      position: absolute;
+      width: 1.375rem;
+      height: 1.375rem;
+      left: 3px;
+      bottom: 3px;
+      background-color: var(--brandcolor-neutral-dark);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &--ignore-hover {
+        pointer-events: none;
+      }
+
+      &__icon {
+        opacity: 0;
+        stroke: var(--color-action-graphics-onlight);
+      }
+    }
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:focus-visible + .toggle-container__toggle {
+      border-color: var(--color-action-border-onlight-focus);
+      outline: 2px solid var(--color-action-border-onlight-focus);
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+export type Styles = {
+  'toggle-container': string;
+  'toggle-container__input': string;
+  'toggle-container__label': string;
+  'toggle-container__label__text--semibold': string;
+  'toggle-container__label--toggle-right': string;
+  'toggle-container__row': string;
+  'toggle-container__row--right': string;
+  'toggle-container__sublabel': string;
+  'toggle-container__sublabel--toggle-right': string;
+  'toggle-container__toggle': string;
+  'toggle-container__toggle__dot': string;
+  'toggle-container__toggle__dot__icon': string;
+  'toggle-container__toggle__dot--ignore-hover': string;
+  'toggle-container__toggle--ignore-hover': string;
+  'toggle-container__toggle--on-white': string;
+  'toggle-container__toggle-group': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/constants.d.ts

@@ -107,6 +107,7 @@ export declare enum AnalyticsId {
     Textarea = "textarea",
     Tile = "tile",
     Title = "title",
+    Toggle = "toggle",
     Tooltip = "tooltip",
     Trigger = "trigger",
     Validation = "validation"

package/constants.js

@@ -1,13 +1,13 @@
 var e = /* @__PURE__ */ ((r) => (r[r.XXSmall = 24] = "XXSmall", r[r.XSmall = 38] = "XSmall", r[r.Small = 48] = "Small", r[r.Medium = 64] = "Medium", r[r.Large = 80] = "Large", r[r.XLarge = 130] = "XLarge", r))(e || {}), o = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.PopOver = 11e3] = "PopOver", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r[r.OverlayScreen = 9999] = "OverlayScreen", r[r.LightBoxButtons = 1e3] = "LightBoxButtons", r))(o || {});
-const g = 12;
-var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Chip = "chip", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.EyebrowHeader = "eyebrow-header", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightPanel = "highlight-panel", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), u = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(u || {});
+const u = 12;
+var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Chip = "chip", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.EyebrowHeader = "eyebrow-header", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightPanel = "highlight-panel", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Toggle = "toggle", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), g = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(g || {});
 export {
-  g as AVERAGE_CHARACTER_WIDTH_PX,
+  u as AVERAGE_CHARACTER_WIDTH_PX,
   t as AnalyticsId,
   p as FormMode,
   a as FormSize,
   e as IconSize,
-  u as KeyboardEventKey,
+  g as KeyboardEventKey,
   o as ZIndex
 };
 //# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA1DHA,IAAAA,KAAA,CAAA,CAAA,GA6DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA3DHA,IAAAA,KAAA,CAAA,CAAA,GA8DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}

package/docs/index.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-import "../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.js";
+import "../node_modules/@storybook/addon-docs/dist/chunk-NUUEMKO5.js";
 import { ArgTypes as l, Title as a, Subtitle as o, Description as i, Primary as s, Controls as c, Stories as m } from "../node_modules/@storybook/blocks/dist/index.js";
 const u = () => (window.location != window.parent.location ? document.referrer : document.location.href).startsWith("https://frankenstein.helsenorge.design") || window.location.search.includes("isSupernova"), w = (t) => {
   if (u())

package/hooks/usePseudoClasses.d.ts

@@ -8,4 +8,5 @@ export declare const usePseudoClasses: <T extends HTMLElement | SVGElement>(ref?
     refObject: RefObject<T> | MutableRefObject<T>;
     isHovered: boolean;
     isFocused: boolean;
+    isActive: boolean;
 };

package/hooks/usePseudoClasses.js

@@ -1,16 +1,16 @@
-import { useRef as O, useState as I, useEffect as b } from "react";
-const x = (r) => {
-  const e = r || O(null), [H, s] = I(!1), [M, o] = I(!1);
-  return b(() => {
-    var v, a, d, i, l, E;
-    const t = () => s(!0), n = () => s(!1), u = () => o(!0), c = () => o(!1);
-    return (v = e.current) == null || v.addEventListener("mouseenter", t), (a = e.current) == null || a.addEventListener("mouseleave", n), (d = e.current) == null || d.addEventListener("pointerenter", t), (i = e.current) == null || i.addEventListener("pointerleave", n), (l = e.current) == null || l.addEventListener("focusin", u), (E = e.current) == null || E.addEventListener("focusout", c), () => {
-      var L, f, m, p, h, F;
-      (L = e.current) == null || L.removeEventListener("mouseenter", t), (f = e.current) == null || f.removeEventListener("mouseleave", n), (m = e.current) == null || m.removeEventListener("pointerenter", t), (p = e.current) == null || p.removeEventListener("pointerleave", n), (h = e.current) == null || h.removeEventListener("focusin", u), (F = e.current) == null || F.removeEventListener("focusout", c);
+import { useRef as U, useState as s, useEffect as g } from "react";
+const q = (o) => {
+  const e = o || U(null), [D, u] = s(!1), [R, c] = s(!1), [S, r] = s(!1);
+  return g(() => {
+    var E, L, f, m, p, h, F, I, P;
+    const t = () => u(!0), n = () => u(!1), i = () => c(!0), v = () => c(!1), a = () => r(!0), d = () => r(!1), l = () => r(!1);
+    return (E = e.current) == null || E.addEventListener("mouseenter", t), (L = e.current) == null || L.addEventListener("mouseleave", n), (f = e.current) == null || f.addEventListener("pointerenter", t), (m = e.current) == null || m.addEventListener("pointerleave", n), (p = e.current) == null || p.addEventListener("focusin", i), (h = e.current) == null || h.addEventListener("focusout", v), (F = e.current) == null || F.addEventListener("pointerdown", a), (I = e.current) == null || I.addEventListener("pointerup", d), (P = e.current) == null || P.addEventListener("pointerleave", l), () => {
+      var w, A, H, M, O, b, j, x, C;
+      (w = e.current) == null || w.removeEventListener("mouseenter", t), (A = e.current) == null || A.removeEventListener("mouseleave", n), (H = e.current) == null || H.removeEventListener("pointerenter", t), (M = e.current) == null || M.removeEventListener("pointerleave", n), (O = e.current) == null || O.removeEventListener("focusin", i), (b = e.current) == null || b.removeEventListener("focusout", v), (j = e.current) == null || j.removeEventListener("pointerdown", a), (x = e.current) == null || x.removeEventListener("pointerup", d), (C = e.current) == null || C.removeEventListener("pointerleave", l);
     };
-  }, [e]), { refObject: e, isHovered: H, isFocused: M };
+  }, [e]), { refObject: e, isHovered: D, isFocused: R, isActive: S };
 };
 export {
-  x as usePseudoClasses
+  q as usePseudoClasses
 };
 //# sourceMappingURL=usePseudoClasses.js.map

package/hooks/usePseudoClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePseudoClasses.js","sources":["../../src/hooks/usePseudoClasses.ts"],"sourcesContent":["import { useRef, useEffect, useState, RefObject, MutableRefObject } from 'react';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const usePseudoClasses = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T> | MutableRefObject<T> | null\n): { refObject: RefObject<T> | MutableRefObject<T>; isHovered: boolean; isFocused: boolean } => {\n  const refObject = ref ? ref : useRef<T>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  useEffect(() => {\n    const handleMouseEnter = (): void => setIsHovered(true);\n    const handleMouseLeave = (): void => setIsHovered(false);\n    const handleFocusIn = (): void => setIsFocused(true);\n    const handleFocusOut = (): void => setIsFocused(false);\n\n    refObject.current?.addEventListener('mouseenter', handleMouseEnter);\n    refObject.current?.addEventListener('mouseleave', handleMouseLeave);\n    refObject.current?.addEventListener('pointerenter', handleMouseEnter);\n    refObject.current?.addEventListener('pointerleave', handleMouseLeave);\n    refObject.current?.addEventListener('focusin', handleFocusIn);\n    refObject.current?.addEventListener('focusout', handleFocusOut);\n\n    return (): void => {\n      refObject.current?.removeEventListener('mouseenter', handleMouseEnter);\n      refObject.current?.removeEventListener('mouseleave', handleMouseLeave);\n      refObject.current?.removeEventListener('pointerenter', handleMouseEnter);\n      refObject.current?.removeEventListener('pointerleave', handleMouseLeave);\n      refObject.current?.removeEventListener('focusin', handleFocusIn);\n      refObject.current?.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [refObject]);\n\n  return { refObject, isHovered, isFocused };\n};\n"],"names":["usePseudoClasses","ref","refObject","useRef","isHovered","setIsHovered","useState","isFocused","setIsFocused","useEffect","handleMouseEnter","handleMouseLeave","handleFocusIn","handleFocusOut","_a","_b","_c","_d","_e","_f"],"mappings":";AAOa,MAAAA,IAAmB,CAC9BC,MAC8F;AAC9F,QAAMC,IAAYD,KAAYE,EAAU,IAAI,GACtC,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK;AAEhD,SAAAG,EAAU,MAAM;;AACR,UAAAC,IAAmB,MAAYL,EAAa,EAAI,GAChDM,IAAmB,MAAYN,EAAa,EAAK,GACjDO,IAAgB,MAAYJ,EAAa,EAAI,GAC7CK,IAAiB,MAAYL,EAAa,EAAK;AAE3C,YAAAM,IAAAZ,EAAA,YAAA,QAAAY,EAAS,iBAAiB,cAAcJ,KACxCK,IAAAb,EAAA,YAAA,QAAAa,EAAS,iBAAiB,cAAcJ,KACxCK,IAAAd,EAAA,YAAA,QAAAc,EAAS,iBAAiB,gBAAgBN,KAC1CO,IAAAf,EAAA,YAAA,QAAAe,EAAS,iBAAiB,gBAAgBN,KAC1CO,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,iBAAiB,WAAWN,KACrCO,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,iBAAiB,YAAYN,IAEzC,MAAY;;AACP,OAAAC,IAAAZ,EAAA,YAAA,QAAAY,EAAS,oBAAoB,cAAcJ,KAC3CK,IAAAb,EAAA,YAAA,QAAAa,EAAS,oBAAoB,cAAcJ,KAC3CK,IAAAd,EAAA,YAAA,QAAAc,EAAS,oBAAoB,gBAAgBN,KAC7CO,IAAAf,EAAA,YAAA,QAAAe,EAAS,oBAAoB,gBAAgBN,KAC7CO,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB,WAAWN,KACxCO,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB,YAAYN;AAAA,IAAc;AAAA,EACnE,GACC,CAACX,CAAS,CAAC,GAEP,EAAE,WAAAA,GAAW,WAAAE,GAAW,WAAAG;AACjC;"}
+{"version":3,"file":"usePseudoClasses.js","sources":["../../src/hooks/usePseudoClasses.ts"],"sourcesContent":["import { useRef, useEffect, useState, RefObject, MutableRefObject } from 'react';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const usePseudoClasses = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T> | MutableRefObject<T> | null\n): { refObject: RefObject<T> | MutableRefObject<T>; isHovered: boolean; isFocused: boolean; isActive: boolean } => {\n  const refObject = ref ? ref : useRef<T>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n\n  useEffect(() => {\n    const handleMouseEnter = (): void => setIsHovered(true);\n    const handleMouseLeave = (): void => setIsHovered(false);\n    const handleFocusIn = (): void => setIsFocused(true);\n    const handleFocusOut = (): void => setIsFocused(false);\n    const handlePointerDown = (): void => setIsActive(true);\n    const handlePointerUp = (): void => setIsActive(false);\n    const handlePointerLeave = (): void => setIsActive(false);\n\n    refObject.current?.addEventListener('mouseenter', handleMouseEnter);\n    refObject.current?.addEventListener('mouseleave', handleMouseLeave);\n    refObject.current?.addEventListener('pointerenter', handleMouseEnter);\n    refObject.current?.addEventListener('pointerleave', handleMouseLeave);\n    refObject.current?.addEventListener('focusin', handleFocusIn);\n    refObject.current?.addEventListener('focusout', handleFocusOut);\n    refObject.current?.addEventListener('pointerdown', handlePointerDown);\n    refObject.current?.addEventListener('pointerup', handlePointerUp);\n    refObject.current?.addEventListener('pointerleave', handlePointerLeave);\n\n    return (): void => {\n      refObject.current?.removeEventListener('mouseenter', handleMouseEnter);\n      refObject.current?.removeEventListener('mouseleave', handleMouseLeave);\n      refObject.current?.removeEventListener('pointerenter', handleMouseEnter);\n      refObject.current?.removeEventListener('pointerleave', handleMouseLeave);\n      refObject.current?.removeEventListener('focusin', handleFocusIn);\n      refObject.current?.removeEventListener('focusout', handleFocusOut);\n      refObject.current?.removeEventListener('pointerdown', handlePointerDown);\n      refObject.current?.removeEventListener('pointerup', handlePointerUp);\n      refObject.current?.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, [refObject]);\n\n  return { refObject, isHovered, isFocused, isActive };\n};\n"],"names":["usePseudoClasses","ref","refObject","useRef","isHovered","setIsHovered","useState","isFocused","setIsFocused","isActive","setIsActive","useEffect","handleMouseEnter","handleMouseLeave","handleFocusIn","handleFocusOut","handlePointerDown","handlePointerUp","handlePointerLeave","_a","_b","_c","_d","_e","_f","_g","_h","_i"],"mappings":";AAOa,MAAAA,IAAmB,CAC9BC,MACiH;AACjH,QAAMC,IAAYD,KAAYE,EAAU,IAAI,GACtC,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK;AAE9C,SAAAK,EAAU,MAAM;;AACR,UAAAC,IAAmB,MAAYP,EAAa,EAAI,GAChDQ,IAAmB,MAAYR,EAAa,EAAK,GACjDS,IAAgB,MAAYN,EAAa,EAAI,GAC7CO,IAAiB,MAAYP,EAAa,EAAK,GAC/CQ,IAAoB,MAAYN,EAAY,EAAI,GAChDO,IAAkB,MAAYP,EAAY,EAAK,GAC/CQ,IAAqB,MAAYR,EAAY,EAAK;AAE9C,YAAAS,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,iBAAiB,cAAcP,KACxCQ,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,iBAAiB,cAAcP,KACxCQ,IAAAnB,EAAA,YAAA,QAAAmB,EAAS,iBAAiB,gBAAgBT,KAC1CU,IAAApB,EAAA,YAAA,QAAAoB,EAAS,iBAAiB,gBAAgBT,KAC1CU,IAAArB,EAAA,YAAA,QAAAqB,EAAS,iBAAiB,WAAWT,KACrCU,IAAAtB,EAAA,YAAA,QAAAsB,EAAS,iBAAiB,YAAYT,KACtCU,IAAAvB,EAAA,YAAA,QAAAuB,EAAS,iBAAiB,eAAeT,KACzCU,IAAAxB,EAAA,YAAA,QAAAwB,EAAS,iBAAiB,aAAaT,KACvCU,IAAAzB,EAAA,YAAA,QAAAyB,EAAS,iBAAiB,gBAAgBT,IAE7C,MAAY;;AACP,OAAAC,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB,cAAcP,KAC3CQ,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,oBAAoB,cAAcP,KAC3CQ,IAAAnB,EAAA,YAAA,QAAAmB,EAAS,oBAAoB,gBAAgBT,KAC7CU,IAAApB,EAAA,YAAA,QAAAoB,EAAS,oBAAoB,gBAAgBT,KAC7CU,IAAArB,EAAA,YAAA,QAAAqB,EAAS,oBAAoB,WAAWT,KACxCU,IAAAtB,EAAA,YAAA,QAAAsB,EAAS,oBAAoB,YAAYT,KACzCU,IAAAvB,EAAA,YAAA,QAAAuB,EAAS,oBAAoB,eAAeT,KAC5CU,IAAAxB,EAAA,YAAA,QAAAwB,EAAS,oBAAoB,aAAaT,KAC1CU,IAAAzB,EAAA,YAAA,QAAAyB,EAAS,oBAAoB,gBAAgBT;AAAA,IAAkB;AAAA,EAC3E,GACC,CAAChB,CAAS,CAAC,GAEP,EAAE,WAAAA,GAAW,WAAAE,GAAW,WAAAG,GAAW,UAAAE,EAAS;AACrD;"}

package/package.json

@@ -7,9 +7,12 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "author": "Helsenorge",
   "license": "MIT",
+  "dependencies": {
+    "framer-motion": "^11.5.4"
+  },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",

package/style.css

@@ -0,0 +1 @@
+:root{--core-color-black: #000000;--core-color-white: #ffffff;--core-color-blueberry-50: #e4f7f9;--core-color-neutral-500: #989693;--core-color-neutral-700: #62625f;--color-action-text-ondark: #ffffff;--color-action-background-transparent-onlight-hover: #126f8721;--color-action-background-transparent-onlight-hoverselected: #126f872b;--color-notification-background-info: #e4f7f9;--color-notification-background-error: #fff2ea;--color-destructive-graphics-normal: #c83521;--color-base-text-onlight: #000000;--color-action-background-ondark: #ffffff;--color-action-border-ondark: #ffffff;--color-action-border-ondark-focus: #ffffff;--color-action-graphics-ondark: #ffffff;--color-base-text-ondark: #ffffff;--color-base-background-neutral: #f5f3f3;--color-base-background-white: #ffffff;--color-base-graphics-ondark: #ffffff;--color-disabled-text-ondark: #ffffff;--color-action-border-onlight: #188097;--color-action-border-onlight-hover: #08667c;--color-action-border-onlight-focus: #000000;--color-action-text-onlight: #126f87;--color-action-text-onlight-hover: #08667c;--color-action-graphics-onlight: #188097;--color-action-graphics-onlight-hover: #126f87;--color-action-graphics-ondark-hover: #e4f7f9;--color-action-background-ondark-hover: #e4f7f9;--color-action-background-ondark-selected: #cae7ed;--color-action-background-ondark-hoverselected: #afdae3;--color-action-background-onlight: #188097;--color-action-background-onlight-hover: #08667c;--color-notification-background-warning: #fdf8df;--color-notification-background-success: #e6f8ee;--color-notification-border-info: #08667c;--color-notification-border-error: #a31f0e;--color-notification-border-warning: #ab7c00;--color-notification-border-success: #078141;--color-notification-graphics-info: #08667c;--color-notification-graphics-error: #a31f0e;--color-notification-graphics-warning: #ab7c00;--color-notification-graphics-success: #078141;--color-notification-status-warning: #ebc840;--color-notification-status-success: #099150;--color-destructive-graphics-hover: #b62e1c;--color-destructive-text-normal: #b62e1c;--color-destructive-text-hover: #a31f0e;--color-disabled-background: #d6d4d3;--color-disabled-text: #62625f;--color-disabled-border: #7d7c79;--color-disabled-graphics: #62625f;--color-disabled-border-ondark: #d6d4d3;--color-disabled-graphics-ondark: #d6d4d3;--color-base-background-blueberry: #e4f7f9;--color-base-background-cherry: #fff2ea;--color-base-background-dark-blueberry: #188097;--color-base-background-dark-cherry: #c83521;--color-base-graphics-onlight: #000000;--color-base-border-ondark: #d6d4d3;--color-base-border-onlight: #989693;--color-base-border-onlight-emphasized: #62625f;--color-help-background: #efe4fd;--color-help-graphics: #5b22a6;--color-help-border: #5b22a6;--core-color-blueberry-100: #cae7ed;--core-color-blueberry-200: #afdae3;--core-color-blueberry-300: #7abecc;--core-color-blueberry-400: #58aabb;--core-color-blueberry-500: #188097;--core-color-blueberry-600: #126f87;--core-color-blueberry-700: #08667c;--core-color-blueberry-800: #06596c;--core-color-blueberry-900: #084350;--core-color-neutral-50: #f5f3f3;--core-color-neutral-100: #eae7e7;--core-color-neutral-200: #d6d4d3;--core-color-neutral-300: #bdbab9;--core-color-neutral-400: #aaa8a6;--core-color-neutral-600: #7d7c79;--core-color-neutral-800: #474745;--core-color-neutral-900: #2b2c2b;--core-color-banana-50: #fdf8df;--core-color-banana-100: #fcf2bf;--core-color-banana-200: #f9ea9f;--core-color-banana-300: #f5e080;--core-color-banana-400: #ebc840;--core-color-banana-500: #ddab06;--core-color-banana-600: #c59302;--core-color-banana-700: #ab7c00;--core-color-banana-800: #916500;--core-color-banana-900: #764f00;--core-color-cherry-50: #fff2ea;--core-color-cherry-100: #f7e1d2;--core-color-cherry-200: #eec0a5;--core-color-cherry-300: #e39376;--core-color-cherry-400: #d56147;--core-color-cherry-500: #c83521;--core-color-cherry-600: #b62e1c;--core-color-cherry-700: #a31f0e;--core-color-cherry-800: #912112;--core-color-cherry-900: #7e1c0e;--core-color-kiwi-50: #e6f8ee;--core-color-kiwi-100: #c2edd6;--core-color-kiwi-200: #9de2bf;--core-color-kiwi-300: #79d6aa;--core-color-kiwi-400: #56ca96;--core-color-kiwi-500: #33be84;--core-color-kiwi-600: #10b172;--core-color-kiwi-700: #0ca161;--core-color-kiwi-800: #099150;--core-color-kiwi-900: #078141;--core-color-plum-50: #efe4fd;--core-color-plum-100: #d7bdf9;--core-color-plum-200: #bf98f3;--core-color-plum-300: #a875eb;--core-color-plum-400: #9153e2;--core-color-plum-500: #7a33d7;--core-color-plum-600: #6a2abf;--core-color-plum-700: #5b22a6;--core-color-plum-800: #4c1b8c;--core-color-plum-900: #3c1471;--color-destructive-background-emphasized: #f7e1d2;--color-destructive-background-normal: #fff2ea;--brandcolor-white: #ffffff;--brandcolor-black: #000000;--brandcolor-neutral-verylight: #f5f3f3;--brandcolor-neutral-light: #eae7e7;--brandcolor-neutral-mediumlight: #d6d4d3;--brandcolor-neutral-medium: #989693;--brandcolor-neutral-dark: #62625f;--brandcolor-neutral-verydark: #2b2c2b;--brandcolor-blueberry-verylight: #e4f7f9;--brandcolor-blueberry-light: #cae7ed;--brandcolor-blueberry-mediumlight: #afdae3;--brandcolor-blueberry-medium: #188097;--brandcolor-blueberry-mediumdark: #126f87;--brandcolor-blueberry-dark: #08667c;--brandcolor-cherry-verylight: #fff2ea;--brandcolor-cherry-light: #f7e1d2;--brandcolor-cherry-medium: #c83521;--brandcolor-cherry-mediumdark: #b62e1c;--brandcolor-cherry-dark: #a31f0e;--color-notification-status-info: #188097;--color-notification-status-error: #c83521;--color-destructive-border-normal: #c83521;--color-action-border-ondark-hover: #e4f7f9;--color-action-background-transparent-ondark-hover: #00000026;--color-action-background-transparent-ondark-hoverselected: #000000bf;--color-base-background-dark-neutral: #2b2c2b;--color-placeholder-text-onlight: #62625f;--color-base-border-onlight-subtle: #d6d4d3;--color-base-border-neutral: #d6d4d3;--color-base-border-blueberry: #afdae3;--color-base-border-cherry: #eec0a5;--color-notification-text-info: #08667c;--color-notification-text-warning: #916500;--color-notification-text-error: #a31f0e;--color-notification-text-success: #078141}