@helsenorge/designsystem-react 7.13.4 → 8.0.0-beta.6

package/CHANGELOG.md

@@ -1,3 +1,70 @@
+## [8.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.13.4&targetVersion=GTv8.0.0) (2024-08-13)
+
+## 8.0.0-beta.5 (2024-08-12)
+
+## 8.0.0-beta.4 (2024-08-12)
+
+## 8.0.0-beta.3 (2024-08-12)
+
+### Features
+
+- ny komponent lightbox ([283c06d](https://github.com/helsenorge/designsystem/commit/283c06dd0eee42e174d76646a43edb6001e69f4c)), closes
+  [#318675](https://github.com/helsenorge/designsystem/issues/318675)
+
+### Bug Fixes
+
+- **datepicker:** popup skal ha fast storrelse
+  ([5f7a5cf](https://github.com/helsenorge/designsystem/commit/5f7a5cfc460d3e779ede02cbdaa476dacdc8d4fb)), closes
+  [#328505](https://github.com/helsenorge/designsystem/issues/328505)
+- **lightbox:** legg til bedre universell utforming
+  ([40ad870](https://github.com/helsenorge/designsystem/commit/40ad870b180911227ad058c056ea8c96d84bf2e6)), closes
+  [#329100](https://github.com/helsenorge/designsystem/issues/329100)
+
+## 8.0.0-beta.2 (2024-06-24)
+
+## 8.0.0-beta.1 (2024-06-24)
+
+## 8.0.0-beta.0 (2024-06-24)
+
+### Features
+
+- fjern deprecated prop errorSummary
+  ([eed040f](https://github.com/helsenorge/designsystem/commit/eed040f5470c5c430098edb8171f3256f6b8b26d)), closes
+  [#324890](https://github.com/helsenorge/designsystem/issues/324890)
+- fjern variant alert ([0da88f3](https://github.com/helsenorge/designsystem/commit/0da88f33e2584650f8c2d9428197f62bc4ad7fb2)), closes
+  [#325898](https://github.com/helsenorge/designsystem/issues/325898)
+- flytt padding-bottom fra ErrorWrapper til Validation
+  ([f92a3d6](https://github.com/helsenorge/designsystem/commit/f92a3d6e724a34a75416df04ae7419b78028a2ab)), closes
+  [#324890](https://github.com/helsenorge/designsystem/issues/324890)
+- react 18 ([7a99c2a](https://github.com/helsenorge/designsystem/commit/7a99c2a0fa265aad351b5bca415e5977aef197f2)), closes
+  [#327791](https://github.com/helsenorge/designsystem/issues/327791)
+- rename highlightbox til highlightpanel
+  ([138beea](https://github.com/helsenorge/designsystem/commit/138beea5c249c71e5b47d931fa910e25c91a070f)), closes
+  [#318438](https://github.com/helsenorge/designsystem/issues/318438)
+- splitt Tag-komponent til Tag og Chip
+  ([7bac3bb](https://github.com/helsenorge/designsystem/commit/7bac3bbd99e9e2a474193c8f4d05b6b299017e73)), closes
+  [#314597](https://github.com/helsenorge/designsystem/issues/314597)
+- ta i bruk errorwrapper i checkbox og radiobutton
+  ([c91d997](https://github.com/helsenorge/designsystem/commit/c91d99712844f024c0056e819a49af0a339d8c6a)), closes
+  [#287874](https://github.com/helsenorge/designsystem/issues/287874)
+
+### Bug Fixes
+
+- chip large too large ([6fe2f2e](https://github.com/helsenorge/designsystem/commit/6fe2f2e17b26647e72163775cae219cc5c00ae7c)), closes
+  [#314597](https://github.com/helsenorge/designsystem/issues/314597)
+- feil skråstrek på chip ([253ed93](https://github.com/helsenorge/designsystem/commit/253ed9330142bd1b52afdccc9b59170ef4be0b84)), closes
+  [#314597](https://github.com/helsenorge/designsystem/issues/314597)
+- merge conflicts ([1b40d65](https://github.com/helsenorge/designsystem/commit/1b40d6594e6f8cf1f5b2570560dd79f2482b98a3))
+
+## 7.0.1-beta.0 (2024-04-09)
+
+## [7.13.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.13.3&targetVersion=GTv7.13.4) (2024-07-25)
+
+### Bug Fixes
+
+- **tabs:** fjern zindex ([312d337](https://github.com/helsenorge/designsystem/commit/312d3370b7f288b28e60e189c829eff82b5ce2ac)), closes
+  [#328176](https://github.com/helsenorge/designsystem/issues/328176)
+
 ## [7.13.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.13.2&targetVersion=GTv7.13.3) (2024-07-25)
 
 ### Bug Fixes
@@ -1587,12 +1654,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- ø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)
+- økt kontrast på understreking av lenker
+  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
+  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/__mocks__/matchMedia.d.ts

@@ -1 +1 @@
-export declare const mockWindowMatchMedia: import("vitest").Mock<any, any>;
+export declare const mockWindowMatchMedia: import("vitest").Mock<(...args: any[]) => any>;

package/components/Checkbox/Checkbox.js

@@ -1,12 +1,13 @@
-import l, { useState as H, useEffect as X } from "react";
-import t from "classnames";
-import { FormMode as i, FormSize as J, AnalyticsId as K, IconSize as Q } from "../../constants.js";
-import { usePseudoClasses as V } from "../../hooks/usePseudoClasses.js";
-import { useUuid as Y } from "../../hooks/useUuid.js";
-import { getColor as h } from "../../theme/currys/color.js";
-import { getAriaDescribedBy as Z } from "../../utils/accessibility.js";
-import { isMutableRefObject as $, mergeRefs as ee } from "../../utils/refs.js";
-import { uuid as ce } from "../../utils/uuid.js";
+import l, { useState as G, useEffect as H } from "react";
+import b from "classnames";
+import { FormMode as t, FormSize as X, AnalyticsId as J, IconSize as K } from "../../constants.js";
+import { usePseudoClasses as Q } from "../../hooks/usePseudoClasses.js";
+import { useUuid as V } from "../../hooks/useUuid.js";
+import { getColor as _ } from "../../theme/currys/color.js";
+import { getAriaDescribedBy as Y } from "../../utils/accessibility.js";
+import { isMutableRefObject as Z, mergeRefs as $ } from "../../utils/refs.js";
+import { uuid as ee } from "../../utils/uuid.js";
+import { ErrorWrapper as ce } from "../ErrorWrapper/ErrorWrapper.js";
 import { Icon as re } from "../Icon/Icon.js";
 import oe from "../Icons/Check.js";
 import { getLabelText as ae, renderLabelAsParent as le } from "../Label/Label.js";
@@ -14,92 +15,92 @@ import e from "../Checkbox/styles.module.scss";
 const ne = l.forwardRef((x, d) => {
   const {
     className: I,
-    checked: k = !1,
+    checked: h = !1,
     disabled: a,
     label: m,
-    inputId: p = ce(),
-    mode: n = i.onwhite,
-    name: N = p,
-    size: E,
-    errorText: s,
-    error: g = !!s,
-    errorTextId: S,
+    inputId: k = ee(),
+    mode: n = t.onwhite,
+    name: E = k,
+    size: N,
+    errorText: p,
+    error: g = !!p,
+    errorTextId: T,
     value: R = ae(m),
-    testId: T,
+    testId: S,
     required: z,
     onChange: u,
     ...F
-  } = x, [r, w] = H(k), f = Y(S), C = n === i.onwhite, y = n === i.ongrey, v = n === i.onblueberry, o = g || n === i.oninvalid, b = n === i.ondark, c = E === J.large, { refObject: L, isFocused: A } = V($(d) ? d : null), W = ee([d, L]), j = t(e["checkbox-wrapper"], {
-    [e["checkbox-wrapper--with-error"]]: s,
+  } = x, [r, f] = G(h), w = V(T), C = n === t.onwhite, y = n === t.ongrey, v = n === t.onblueberry, o = g || n === t.oninvalid, i = n === t.ondark, c = N === X.large, { refObject: L, isFocused: W } = Q(Z(d) ? d : null), A = $([d, L]), j = b({
+    [e["checkbox-wrapper--with-error"]]: p,
     [e["checkbox-wrapper--large"]]: c
-  }), B = t(e["checkbox-label"], {
+  }), B = b(e["checkbox-label"], {
     [e["checkbox-label--disabled"]]: a,
-    [e["checkbox-label--on-dark"]]: b,
+    [e["checkbox-label--on-dark"]]: i,
     [e["checkbox-label--large"]]: c,
     [e["checkbox-label__large--checked"]]: c && r,
-    [e["checkbox-label__large--focus"]]: c && A,
+    [e["checkbox-label__large--focus"]]: c && W,
     [e["checkbox-label__large--on-white"]]: c && C,
     [e["checkbox-label__large--on-grey"]]: c && y,
     [e["checkbox-label__large--on-blueberry"]]: c && v,
     [e["checkbox-label__large--on-invalid"]]: c && o,
     [e["checkbox-label__large--disabled"]]: c && a
-  }), D = t(e.checkbox, I), M = t(e["checkbox__icon-wrapper"], {
+  }), D = b(e.checkbox, I), M = b(e["checkbox__icon-wrapper"], {
     [e["checkbox__icon-wrapper--on-white"]]: C,
     [e["checkbox__icon-wrapper--on-grey"]]: y,
     [e["checkbox__icon-wrapper--on-invalid"]]: o,
     [e["checkbox__icon-wrapper--disabled"]]: a,
     [e["checkbox__icon-wrapper__regular--checked"]]: !c && r,
     [e["checkbox__icon-wrapper__regular--invalid"]]: !c && r && o,
-    [e["checkbox__icon-wrapper__regular--on-dark"]]: !c && r && b,
+    [e["checkbox__icon-wrapper__regular--on-dark"]]: !c && r && i,
     [e["checkbox__icon-wrapper__large--checked"]]: c && r,
     [e["checkbox__icon-wrapper__large--invalid"]]: c && o,
-    [e["checkbox__icon-wrapper--on-dark"]]: b,
+    [e["checkbox__icon-wrapper--on-dark"]]: i,
     [e["checkbox__icon-wrapper--on-blueberry"]]: v,
     [e["checkbox__icon-wrapper--invalid"]]: o,
     [e["checkbox__icon-wrapper__large--invalid"]]: c && r && o,
     [e["checkbox__icon-wrapper__large--disabled"]]: a && c && r,
     [e["checkbox__icon-wrapper__large--checked--invalid"]]: c && r && o,
     [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && c && r
-  }), O = t(e["checkbox-label__text"], {
+  }), O = b(e["checkbox-label__text"], {
     [e["checkbox-label__text__large--checked"]]: c && r,
     [e["checkbox-label__text__large--invalid"]]: c && r && o,
-    [e["checkbox-label__text--on-dark"]]: b,
+    [e["checkbox-label__text--on-dark"]]: i,
     [e["checkbox-label__text--disabled"]]: a
-  }), P = t(e["checkbox-errors"]);
-  let _ = h("white");
-  (b || c && r) && (_ = h("blueberry", 900)), o && c && r && (_ = h("white")), a && (_ = h("neutral", 400)), X(() => {
-    w(k);
-  }, [k]);
-  const U = (G) => {
-    u && u(G), w(!r);
-  }, q = () => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+  });
+  let s = _("white");
+  (i || c && r) && (s = _("blueberry", 900)), o && c && r && (s = _("white")), a && (s = _("neutral", 700)), H(() => {
+    f(h);
+  }, [h]);
+  const P = (q) => {
+    u && u(q), f(!r);
+  }, U = () => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
     "input",
     {
-      id: p,
-      name: N,
+      id: k,
+      name: E,
       className: D,
       type: "checkbox",
       checked: r,
       disabled: a,
       value: R,
-      ref: W,
-      "aria-describedby": Z(x, f),
+      ref: A,
+      "aria-describedby": Y(x, w),
       "aria-invalid": g,
       required: z,
-      onChange: U,
+      onChange: P,
       ...F
     }
-  ), /* @__PURE__ */ l.createElement("span", { className: M }, r && /* @__PURE__ */ l.createElement(re, { color: _, className: e.checkbox__icon, svgIcon: oe, size: Q.XSmall })));
-  return /* @__PURE__ */ l.createElement("div", { "data-testid": T, "data-analyticsid": K.Checkbox, className: j }, s && /* @__PURE__ */ l.createElement("p", { className: P, id: f }, s), le(
+  ), /* @__PURE__ */ l.createElement("span", { className: M }, r && /* @__PURE__ */ l.createElement(re, { color: s, className: e.checkbox__icon, svgIcon: oe, size: K.XSmall })));
+  return /* @__PURE__ */ l.createElement(ce, { errorText: p, errorTextId: w }, /* @__PURE__ */ l.createElement("div", { "data-testid": S, "data-analyticsid": J.Checkbox, className: j }, le(
     m,
-    q(),
-    p,
+    U(),
+    k,
     n,
     B,
     O,
     e["checkbox-sublabel-wrapper"],
     c
-  ));
+  )));
 });
 ne.displayName = "Checkbox";
 export {

package/components/Checkbox/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, FormMode, 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 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 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  mode?: keyof typeof FormMode;\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    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\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 = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.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--with-error']]: errorText,\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  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\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', 400);\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    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        large\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","getAriaDescribedBy","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
+{"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, FormMode, 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 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 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  mode?: keyof typeof FormMode;\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    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\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 = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.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--with-error']]: errorText,\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 errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\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":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","getAriaDescribedBy","Icon","Check","IconSize","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}

package/components/Checkbox/styles.module.scss

@@ -5,6 +5,86 @@
 @import '../../scss/font-settings';
 @import '../../scss/screen-reader';
 
+@mixin dashed-dotted-border() {
+  box-shadow: none;
+
+  --dot-size: 2px;
+  --dash-length: 5px;
+  --gap-length: 2px;
+  --corner-gap: 2px;
+
+  background-image:
+    // Square dots at corners
+    linear-gradient($neutral600, $neutral600),
+    linear-gradient($neutral600, $neutral600),
+    linear-gradient($neutral600, $neutral600),
+    linear-gradient($neutral600, $neutral600),
+    // Dashed lines
+    repeating-linear-gradient(
+        0deg,
+        $neutral600,
+        $neutral600 var(--dash-length),
+        transparent var(--dash-length),
+        transparent calc(var(--dash-length) + var(--gap-length))
+      ),
+    repeating-linear-gradient(
+      90deg,
+      $neutral600,
+      $neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    ),
+    repeating-linear-gradient(
+      180deg,
+      $neutral600,
+      $neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    ),
+    repeating-linear-gradient(
+      270deg,
+      $neutral600,
+      $neutral600 var(--dash-length),
+      transparent var(--dash-length),
+      transparent calc(var(--dash-length) + var(--gap-length))
+    );
+  background-size:
+    // Top-left dot
+    var(--dot-size) var(--dot-size),
+    // Top-right dot
+    var(--dot-size) var(--dot-size),
+    // Bottom-right dot
+    var(--dot-size) var(--dot-size),
+    // Bottom-left dot
+    var(--dot-size) var(--dot-size),
+    // Left border
+    2px calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2),
+    // Top border
+    calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2) 2px,
+    // Right border
+    2px calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2),
+    // Bottom border
+    calc(100% - var(--dot-size) * 2 - var(--corner-gap) * 2) 2px;
+  background-position:
+    // Top-left dot
+    0 0,
+    // Top-right dot
+    100% 0,
+    // Bottom-right dot
+    100% 100%,
+    // Bottom-left dot
+    0 100%,
+    // Left border
+    0 calc(var(--dot-size) + var(--corner-gap)),
+    // Top border
+    calc(var(--dot-size) + var(--corner-gap)) 0,
+    // Right border
+    100% calc(var(--dot-size) + var(--corner-gap)),
+    // Bottom border
+    calc(var(--dot-size) + var(--corner-gap)) 100%;
+  background-repeat: no-repeat;
+}
+
 $checkbox-icon-size: 1.625rem;
 
 .checkbox-errors {
@@ -15,8 +95,6 @@ $checkbox-icon-size: 1.625rem;
 }
 
 .checkbox-wrapper {
-  margin: getSpacer(s) 0;
-
   &--with-error {
     padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
     background-color: $cherry100;
@@ -36,14 +114,6 @@ $checkbox-icon-size: 1.625rem;
   }
 }
 
-.checkbox-wrapper:first-of-type {
-  margin-top: 0;
-}
-
-.checkbox-wrapper:last-of-type {
-  margin-bottom: 0;
-}
-
 .checkbox-label {
   display: flex;
   align-items: flex-start;
@@ -52,10 +122,6 @@ $checkbox-icon-size: 1.625rem;
   &__text {
     color: $black;
 
-    &--on-dark {
-      color: $white;
-    }
-
     &__large {
       &--checked {
         color: $white;
@@ -71,6 +137,10 @@ $checkbox-icon-size: 1.625rem;
     &--disabled {
       color: $neutral700;
     }
+
+    &--on-dark {
+      color: $white;
+    }
   }
 
   &--disabled {
@@ -163,9 +233,11 @@ $checkbox-icon-size: 1.625rem;
     }
 
     &--checked#{&}--disabled {
+      color: $neutral700;
       background-color: $neutral50;
 
       :hover > & {
+        color: $neutral700;
         background-color: $neutral50;
       }
     }
@@ -252,16 +324,6 @@ $checkbox-icon-size: 1.625rem;
       }
     }
 
-    &--disabled {
-      color: $neutral600;
-      background-color: $neutral50;
-
-      :hover > & {
-        box-shadow: 0 0 0 getSpacer(4xs);
-        background-color: $neutral50;
-      }
-    }
-
     &__regular {
       &--checked {
         background-color: $blueberry500;
@@ -317,15 +379,26 @@ $checkbox-icon-size: 1.625rem;
       }
       &--checked#{&}--disabled {
         color: $neutral600;
-        background-color: $neutral50;
-        box-shadow: 0 0 0 getSpacer(4xs);
+        background-color: transparent;
 
         :hover > & {
-          background-color: $neutral50;
-          box-shadow: 0 0 0 getSpacer(4xs);
+          background-color: transparent;
         }
       }
     }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-dotted-border;
+
+      background-color: transparent;
+
+      :hover > & {
+        box-shadow: none;
+        background-color: transparent;
+      }
+    }
   }
 
   &__icon {
@@ -368,7 +441,6 @@ $checkbox-icon-size: 1.625rem;
 
           &--disabled {
             color: $neutral700;
-            background-color: $neutral50;
           }
         }
       }

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

@@ -37,7 +37,6 @@ export type Styles = {
   'checkbox-label--large': string;
   'checkbox-label--on-dark': string;
   'checkbox-sublabel-wrapper': string;
-  'checkbox-wrapper': string;
   'checkbox-wrapper--large': string;
   'checkbox-wrapper--with-error': string;
 };

package/components/Chip/Chip.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+export declare enum ChipSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum ChipAction {
+    remove = "remove",
+    undo = "undo"
+}
+export declare enum ChipVariant {
+    normal = "normal",
+    oncolor = "oncolor",
+    emphasised = "emphasised"
+}
+export type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+export interface ChipProps {
+    /** Sets the text of the chip */
+    children: string;
+    /** Sets the size of the chip. Default: medium */
+    size?: keyof typeof ChipSize;
+    /** Sets the background of the chip. Not used if action is "undo". Default: blueberry */
+    color?: ChipColors;
+    variant?: keyof typeof ChipVariant;
+    action: keyof typeof ChipAction;
+    onClick: () => void;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/components/Chip/Chip.js

@@ -0,0 +1,30 @@
+import m from "react";
+import f from "classnames";
+import { AnalyticsId as v, IconSize as h } from "../../constants.js";
+import { useHover as I } from "../../hooks/useHover.js";
+import { palette as g } from "../../theme/palette.js";
+import { Icon as y } from "../Icon/Icon.js";
+import b from "../Icons/Undo.js";
+import $ from "../Icons/X.js";
+import o from "../Chip/styles.module.scss";
+var X = /* @__PURE__ */ ((e) => (e.medium = "medium", e.large = "large", e))(X || {}), z = /* @__PURE__ */ ((e) => (e.remove = "remove", e.undo = "undo", e))(z || {}), E = /* @__PURE__ */ ((e) => (e.normal = "normal", e.oncolor = "oncolor", e.emphasised = "emphasised", e))(E || {});
+const T = (e) => {
+  const { children: n, size: a = "medium", color: r = "blueberry", variant: c = "normal", action: t, onClick: s, testId: i } = e, { hoverRef: l, isHovered: d } = I(), u = f(o.chip, o[`chip--${a}`], o[`chip--${r}`], o[`chip--${c}`], {
+    [o["chip--undo"]]: t === "undo"
+  }), p = () => {
+    switch (t) {
+      case "undo":
+        return b;
+      case "remove":
+        return $;
+    }
+  };
+  return /* @__PURE__ */ m.createElement("button", { className: u, onClick: s, ref: l, type: "button", "data-testid": i, "data-analyticsid": v.Tag }, n, /* @__PURE__ */ m.createElement(y, { svgIcon: p(), size: h.XXSmall, color: g[`${r}800`], isHovered: d }));
+};
+export {
+  z as ChipAction,
+  X as ChipSize,
+  E as ChipVariant,
+  T as default
+};
+//# sourceMappingURL=Chip.js.map

package/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","Chip","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","chipClasses","cn","styles","getActionIcon","Undo","X","React","AnalyticsId","Icon","IconSize","palette"],"mappings":";;;;;;;;;AAaY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AAyBZ,MAAMC,IAA4B,CAASC,MAAA;AACnC,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAiB,OAAAC,IAAQ,aAAa,SAAAC,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEzG,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAcC,EAAGC,EAAO,MAAMA,EAAO,SAASX,CAAI,EAAE,GAAGW,EAAO,SAASV,CAAK,EAAE,GAAGU,EAAO,SAAST,CAAO,EAAE,GAAG;AAAA,IACjH,CAACS,EAAO,YAAY,CAAC,GAAGR,MAAW;AAAA,EAAA,CACpC,GAEKS,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAAU;AAAA,MACT,KAAK;AACI,eAAAC;AAAA,IACX;AAAA,EAAA;AAGF,SACGC,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAWN,GAAa,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBW,EAAY,OAC/HjB,GACAgB,gBAAAA,EAAA,cAAAE,GAAA,EAAK,SAASL,EAAiB,GAAA,MAAMM,EAAS,SAAS,OAAOC,EAAQ,GAAGlB,CAAK,KAAK,GAAG,WAAAM,EAAsB,CAAA,CAC/G;AAEJ;"}

package/components/Chip/index.d.ts

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

package/components/Chip/index.js

@@ -0,0 +1,9 @@
+import p from "./Chip.js";
+import { ChipAction as t, ChipSize as a, ChipVariant as e } from "./Chip.js";
+export {
+  t as ChipAction,
+  a as ChipSize,
+  e as ChipVariant,
+  p as default
+};
+//# sourceMappingURL=index.js.map