@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Checkbox/Checkbox.js

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

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","Checkbox$1"],"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 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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"}

package/components/Checkbox/index.js

@@ -1,7 +1,6 @@
-import e from "./Checkbox.js";
-import { Checkbox as x } from "./Checkbox.js";
+import { Checkbox as e } from "./Checkbox.js";
 export {
-  x as Checkbox,
+  e as Checkbox,
   e as default
 };
 //# sourceMappingURL=index.js.map

package/components/Checkbox/index.js.map

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

package/components/Checkbox/styles.module.scss

@@ -28,11 +28,11 @@ $checkbox-icon-size: 1.625rem;
   }
 
   &--with-error#{&}--large {
-    padding: getSpacer(m) getSpacer(m);
+    padding: getSpacer(m);
   }
 
   &--large {
-    margin: getSpacer(2xs) 0 getSpacer(2xs) 0;
+    margin: getSpacer(2xs) 0;
   }
 }
 

package/components/Close/Close.js

@@ -1,15 +1,15 @@
 import e from "react";
 import b from "classnames";
 import { AnalyticsId as k } from "../../constants.js";
-import { useBreakpoint as y, Breakpoint as C } from "../../hooks/useBreakpoint.js";
-import { useHover as R } from "../../hooks/useHover.js";
-import { palette as v } from "../../theme/palette.js";
+import { useBreakpoint as y, Breakpoint as R } from "../../hooks/useBreakpoint.js";
+import { useHover as v } from "../../hooks/useHover.js";
+import { palette as C } from "../../theme/palette.js";
 import { mergeRefs as I } from "../../utils/refs.js";
 import { Icon as B } from "../Icon/Icon.js";
 import N from "../Icons/X.js";
 import t from "../Close/styles.module.scss";
-const g = e.forwardRef(function(r, s) {
-  const { small: o, testId: a, ariaLabel: l = "Lukk", onClick: m, className: i, color: c = v.blueberry600 } = r, n = y(), { hoverRef: f, isHovered: p } = R(), d = n === C.xs || o ? 38 : 48, u = b(t.close, { [t["close--small"]]: o }, i);
+const S = e.forwardRef(function(r, s) {
+  const { small: o, testId: a, ariaLabel: m = "Lukk", onClick: l, className: i, color: c = C.blueberry600 } = r, n = y(), { hoverRef: f, isHovered: p } = v(), d = n === R.xs || o ? 38 : 48, u = b(t.close, { [t["close--small"]]: o }, i);
   return /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -17,14 +17,14 @@ const g = e.forwardRef(function(r, s) {
       "data-testid": a,
       "data-analyticsid": k.Close,
       className: u,
-      "aria-label": l,
-      onClick: m,
+      "aria-label": m,
+      onClick: l,
       type: "button"
     },
     /* @__PURE__ */ e.createElement(B, { svgIcon: N, color: c, size: d, isHovered: p })
   );
-}), X = g;
+});
 export {
-  X as default
+  S as default
 };
 //# sourceMappingURL=Close.js.map

package/components/Close/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../../../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","mergeRefs","AnalyticsId","Icon","X","Close$1"],"mappings":";;;;;;;;;;AA6BA,MAAMA,IAAQC,EAAM,WAAW,SAA4BC,GAAmBC,GAA4C;AAClH,QAAA,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,IAAY,QAAQ,SAAAC,GAAS,WAAAC,GAAW,OAAAC,IAAQC,EAAQ,aAAA,IAAiBR,GAC1FS,IAAaC,KACb,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAAS,GAEnCC,IAAWL,MAAeM,EAAW,MAAMb,IAAQ,KAAK,IAExDc,IAAeC,EAAWC,EAAO,OAAO,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGhB,EAAM,GAAGI,CAAS;AAG1F,SAAAP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKoB,EAAU,CAAClB,GAAKU,CAAQ,CAAC;AAAA,MAC9B,eAAaR;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,WAAWJ;AAAA,MACX,cAAYZ;AAAA,MACZ,SAAAC;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,oCAEJgB,GAAK,EAAA,SAASC,GAAG,OAAAf,GAAc,MAAMO,GAAU,WAAAF,GAAsB;AAAA,EAAA;AAG5E,CAAC,GAEDW,IAAezB;"}
+{"version":3,"file":"Close.js","sources":["../../../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","mergeRefs","AnalyticsId","Icon","X"],"mappings":";;;;;;;;;;AA6BA,MAAMA,IAAQC,EAAM,WAAW,SAA4BC,GAAmBC,GAA4C;AAClH,QAAA,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,IAAY,QAAQ,SAAAC,GAAS,WAAAC,GAAW,OAAAC,IAAQC,EAAQ,aAAA,IAAiBR,GAC1FS,IAAaC,KACb,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAAS,GAEnCC,IAAWL,MAAeM,EAAW,MAAMb,IAAQ,KAAK,IAExDc,IAAeC,EAAWC,EAAO,OAAO,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGhB,EAAM,GAAGI,CAAS;AAG1F,SAAAP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKoB,EAAU,CAAClB,GAAKU,CAAQ,CAAC;AAAA,MAC9B,eAAaR;AAAA,MACb,oBAAkBiB,EAAY;AAAA,MAC9B,WAAWJ;AAAA,MACX,cAAYZ;AAAA,MACZ,SAAAC;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,oCAEJgB,GAAK,EAAA,SAASC,GAAG,OAAAf,GAAc,MAAMO,GAAU,WAAAF,GAAsB;AAAA,EAAA;AAG5E,CAAC;"}

package/components/DictionaryTrigger/DictionaryTrigger.js

@@ -1,28 +1,27 @@
 import t from "react";
-import d from "classnames";
-import { AnalyticsId as g } from "../../constants.js";
+import c from "classnames";
+import { AnalyticsId as d } from "../../constants.js";
 import m from "../DictionaryTrigger/styles.module.scss";
-const r = t.forwardRef(
-  ({ children: a, selected: e = !1, className: i, testId: o, ...s }, n) => {
-    const c = d(m.dictionarytrigger, i);
+const l = t.forwardRef(
+  ({ children: r, selected: a = !1, className: e, testId: i, ...o }, s) => {
+    const n = c(m.dictionarytrigger, e);
     return /* @__PURE__ */ t.createElement(
       "button",
       {
         type: "button",
-        "data-testid": o,
-        "data-analyticsid": g.DictionaryTrigger,
-        className: c,
-        "aria-expanded": e,
-        ref: n,
-        ...s
+        "data-testid": i,
+        "data-analyticsid": d.DictionaryTrigger,
+        className: n,
+        "aria-expanded": a,
+        ref: s,
+        ...o
       },
-      a
+      r
     );
   }
 );
-r.displayName = "DictionaryTrigger";
-const u = r;
+l.displayName = "DictionaryTrigger";
 export {
-  u as default
+  l as default
 };
 //# sourceMappingURL=DictionaryTrigger.js.map

package/components/DictionaryTrigger/DictionaryTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["DictionaryTrigger","React","children","selected","className","testId","rest","ref","triggerClasses","classNames","styles","AnalyticsId","DictionaryTrigger$1"],"mappings":";;;;AA2BA,MAAMA,IAAoBC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAK,GAAGC,MAAQ;AACnE,UAAMC,IAAiBC,EAAWC,EAAO,mBAAmBN,CAAS;AAGnE,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaI;AAAA,QACb,oBAAkBM,EAAY;AAAA,QAC9B,WAAWH;AAAA,QACX,iBAAeL;AAAA,QACf,KAAAI;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,MAEHJ;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAkB,cAAc;AAEhC,MAAAY,IAAeZ;"}
+{"version":3,"file":"DictionaryTrigger.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["DictionaryTrigger","React","children","selected","className","testId","rest","ref","triggerClasses","classNames","styles","AnalyticsId"],"mappings":";;;;AA2BA,MAAMA,IAAoBC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAK,GAAGC,MAAQ;AACnE,UAAMC,IAAiBC,EAAWC,EAAO,mBAAmBN,CAAS;AAGnE,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaI;AAAA,QACb,oBAAkBM,EAAY;AAAA,QAC9B,WAAWH;AAAA,QACX,iBAAeL;AAAA,QACf,KAAAI;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,MAEHJ;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAkB,cAAc;"}

package/components/DictionaryTrigger/styles.module.scss

@@ -4,8 +4,7 @@
   all: unset;
   cursor: help;
   line-height: initial;
-  padding-bottom: 6px;
-  margin-bottom: -6px;
+  padding-bottom: 4px;
   background-color: transparent;
 
   // The background svg consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally

package/components/Dropdown/Dropdown.js

@@ -14,22 +14,22 @@ import { Icon as M } from "../Icon/Icon.js";
 import ee from "../Icons/PlusSmall.js";
 import o from "../Dropdown/styles.module.scss";
 var oe = /* @__PURE__ */ ((d) => (d.onwhite = "onwhite", d.ongrey = "ongrey", d.onblueberry = "onblueberry", d.oncherry = "oncherry", d))(oe || {});
-const re = (d) => {
+const be = (d) => {
   const {
     label: R,
     placeholder: A,
     closeText: H = "Lukk",
     noCloseButton: K = !1,
     onToggle: O,
-    open: $ = !1,
+    open: S = !1,
     children: _,
-    mode: i = "onwhite",
-    transparent: S = !1,
+    mode: c = "onwhite",
+    transparent: $ = !1,
     fluid: y = !1,
     testId: z,
-    disabled: c,
-    zIndex: D = G.PopOver
-  } = d, p = f(null), b = f(null), { hoverRef: w, isHovered: L } = Z(), { value: l, toggleValue: h } = j(!c && $, O), a = f(r.Children.map(_, () => r.createRef())), [m, P] = X(), E = g(), I = g(), x = g(), v = () => {
+    disabled: i,
+    zIndex: L = G.PopOver
+  } = d, p = f(null), b = f(null), { hoverRef: w, isHovered: P } = Z(), { value: l, toggleValue: h } = j(!i && S, O), a = f(r.Children.map(_, () => r.createRef())), [m, T] = X(), E = g(), I = g(), x = g(), v = () => {
     var e;
     h(), (e = b.current) == null || e.focus();
   }, u = () => {
@@ -51,7 +51,7 @@ const re = (d) => {
     }
     const t = a.current.findIndex((V) => V.current === e.target);
     let s = t;
-    e.key === n.Home ? s = 0 : e.key === n.End ? s = a.current.length - 1 : e.key === n.ArrowDown && t < a.current.length - 1 ? s = t + 1 : e.key === n.ArrowUp && t > 0 ? s = t - 1 : e.key === n.Enter && t !== -1 && (s = t), s !== -1 && ((N = a.current[s].current) == null || N.focus(), P(s));
+    e.key === n.Home ? s = 0 : e.key === n.End ? s = a.current.length - 1 : e.key === n.ArrowDown && t < a.current.length - 1 ? s = t + 1 : e.key === n.ArrowUp && t > 0 ? s = t - 1 : e.key === n.Enter && t !== -1 && (s = t), s !== -1 && ((N = a.current[s].current) == null || N.focus(), T(s));
   }, [
     n.ArrowDown,
     n.ArrowUp,
@@ -60,28 +60,28 @@ const re = (d) => {
     n.Escape,
     n.Home
   ]), F(p, () => l && u());
-  const T = k(
+  const U = k(
     o.dropdown__toggle,
-    !c && {
-      [o["dropdown__toggle--on-white"]]: i === "onwhite",
-      [o["dropdown__toggle--on-grey"]]: i === "ongrey",
-      [o["dropdown__toggle--on-blueberry"]]: i === "onblueberry",
-      [o["dropdown__toggle--on-cherry"]]: i === "oncherry",
-      [o["dropdown__toggle--transparent"]]: S,
+    !i && {
+      [o["dropdown__toggle--on-white"]]: c === "onwhite",
+      [o["dropdown__toggle--on-grey"]]: c === "ongrey",
+      [o["dropdown__toggle--on-blueberry"]]: c === "onblueberry",
+      [o["dropdown__toggle--on-cherry"]]: c === "oncherry",
+      [o["dropdown__toggle--transparent"]]: $,
       [o["dropdown__toggle--fluid"]]: y,
       [o["dropdown__toggle--open"]]: l
     }
-  ), U = k(o.dropdown__content, l && o["dropdown__content--open"]), B = r.Children.map(_, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === m }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: W([e.props.ref, a.current[t]]) }) : e));
+  ), B = k(o.dropdown__content, l && o["dropdown__content--open"]), D = r.Children.map(_, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === m }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: W([e.props.ref, a.current[t]]) }) : e));
   return /* @__PURE__ */ r.createElement("div", { className: o.dropdown, ref: p }, /* @__PURE__ */ r.createElement("span", { id: E, className: o.dropdown__label }, R), /* @__PURE__ */ r.createElement(
     "button",
     {
       type: "button",
       onClick: () => !l && v(),
-      className: T,
+      className: U,
       ref: w,
       "data-testid": z,
       "data-analyticsid": J.Dropdown,
-      disabled: c,
+      disabled: i,
       "aria-labelledby": I,
       "aria-haspopup": "listbox",
       "aria-expanded": l
@@ -90,14 +90,14 @@ const re = (d) => {
     /* @__PURE__ */ r.createElement(
       M,
       {
-        color: c ? C.palette.neutral700 : C.palette.blueberry600,
+        color: i ? C.palette.neutral700 : C.palette.blueberry600,
         svgIcon: ee,
         className: o.dropdown__icon,
-        isHovered: !c && L,
+        isHovered: !i && P,
         size: Q.XSmall
       }
     )
-  ), /* @__PURE__ */ r.createElement("div", { className: U, style: { width: y ? "100%" : "auto", zIndex: D } }, /* @__PURE__ */ r.createElement(
+  ), /* @__PURE__ */ r.createElement("div", { className: B, style: { width: y ? "100%" : "auto", zIndex: L } }, /* @__PURE__ */ r.createElement(
     "ul",
     {
       className: o.dropdown__options,
@@ -107,11 +107,11 @@ const re = (d) => {
       "aria-activedescendant": typeof m < "u" ? `${x}-${m}` : void 0,
       ref: b
     },
-    B
+    D
   ), !K && /* @__PURE__ */ r.createElement("div", { className: o.dropdown__close }, /* @__PURE__ */ r.createElement(Y, { onClick: u, "aria-expanded": l }, H))));
-}, we = re;
+};
 export {
   oe as DropdownMode,
-  we as default
+  be as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button"],"mappings":";;;;;;;;;;;;;;;AAuBY,IAAAA,uBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,WAAW,YAJDA,IAAAA,MAAA,CAAA,CAAA;AAoCZ,MAAMC,KAAoC,CAASC,MAAA;AAC3C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAd,GACEe,IAAcC,EAAuB,IAAI,GACzCC,IAAaD,EAAyB,IAAI,GAC1C,EAAE,UAAUE,GAAW,WAAAC,MAAcC,EAA4B,GACjE,EAAE,OAAOC,GAAQ,aAAaC,EAAA,IAAiBC,EAAU,CAACX,KAAYN,GAAMD,CAAQ,GACpFmB,IAAeR,EAAOS,EAAM,SAAS,IAAIlB,GAAU,MAAMkB,EAAM,UAAwB,CAAA,CAAC,GACxF,CAACC,GAAcC,CAAe,IAAIC,EAAiB,GACnDC,IAAUC,KACVC,IAAgBD,KAChBE,IAAiBF,KAEjBG,IAAa,MAAY;;AAChB,IAAAX,MACbY,IAAAjB,EAAW,YAAX,QAAAiB,EAAoB;AAAA,EAAM,GAGtBC,IAAc,MAAY;;AACjB,IAAAb,MACbY,IAAAhB,EAAU,YAAV,QAAAgB,EAAmB;AAAA,EAAM;AAsC3B,EAAAE,EAAiBrB,GAnCgB,CAACsB,MAA+B;;AAG3D,QAFJA,EAAM,eAAe,GAEjB,CAACb,EAAa;AAChB;AAGF,QAAKH;AAGM,UAAAgB,EAAM,QAAQC,EAAiB,UAAUjB,GAAQ;AAC9C,QAAAc;AACZ;AAAA,MACF;AAAA,WANa;AACA,MAAAF;AACX;AAAA,IACS;AAKL,UAAAM,IAAQf,EAAa,QAAQ,UAAU,OAAKgB,EAAE,YAAYH,EAAM,MAAM;AAC5E,QAAII,IAAYF;AAEZ,IAAAF,EAAM,QAAQC,EAAiB,OACrBG,IAAA,IACHJ,EAAM,QAAQC,EAAiB,MAC5BG,IAAAjB,EAAa,QAAQ,SAAS,IACjCa,EAAM,QAAQC,EAAiB,aAAaC,IAAQf,EAAa,QAAQ,SAAS,IAC3FiB,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,WAAWC,IAAQ,IAC3DE,IAAYF,IAAQ,IACXF,EAAM,QAAQC,EAAiB,SAASC,MAAU,OAC/CE,IAAAF,IAEVE,MAAc,QAChBP,IAAAV,EAAa,QAAQiB,CAAS,EAAE,YAAhC,QAAAP,EAAyC,SACzCP,EAAgBc,CAAS;AAAA,EAC3B,GAGsD;AAAA,IACtDH,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,IACjBA,EAAiB;AAAA,EAAA,CAClB,GAEDI,EAAgB3B,GAAa,MAAMM,KAAUc,EAAa,CAAA;AAE1D,QAAMQ,IAAgBC;AAAA,IACpBC,EAAO;AAAA,IACP,CAACjC,KAAY;AAAA,MACX,CAACiC,EAAO,4BAA4B,CAAC,GAAGrC,MAAS;AAAA,MACjD,CAACqC,EAAO,2BAA2B,CAAC,GAAGrC,MAAS;AAAA,MAChD,CAACqC,EAAO,gCAAgC,CAAC,GAAGrC,MAAS;AAAA,MACrD,CAACqC,EAAO,6BAA6B,CAAC,GAAGrC,MAAS;AAAA,MAClD,CAACqC,EAAO,+BAA+B,CAAC,GAAGpC;AAAA,MAC3C,CAACoC,EAAO,yBAAyB,CAAC,GAAGnC;AAAA,MACrC,CAACmC,EAAO,wBAAwB,CAAC,GAAGxB;AAAA,IACtC;AAAA,EAAA,GAGIyB,IAAiBF,EAAWC,EAAO,mBAAmBxB,KAAUwB,EAAO,yBAAyB,CAAC,GAEjGE,IAAiBtB,EAAM,SAAS,IAAIlB,GAAU,CAACyC,GAAOT,MACzDd,gBAAAA,EAAA,cAAA,MAAA,EAAG,WAAWoB,EAAO,iBAAiB,MAAK,UAAS,IAAI,GAAGb,CAAc,IAAIO,CAAK,IAAI,iBAAeA,MAAUb,EAAA,GAC7GD,EAAM,eAAeuB,CAAK,KAAKxB,EAAa,WAAWA,EAAa,QAAQe,CAAK,IAC9Ed,EAAM,aAAauB,GAA6B,EAAE,KAAKC,EAAU,CAACD,EAAM,MAAM,KAAKxB,EAAa,QAAQe,CAAK,CAAC,CAAC,EAAE,CAAC,IAClHS,CACN,CACD;AAED,SACGvB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWoB,EAAO,UAAU,KAAK9B,EAAA,GACnCU,gBAAAA,EAAA,cAAA,QAAA,EAAK,IAAII,GAAS,WAAWgB,EAAO,mBAClC5C,CACH,GACAwB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAoB,CAACJ,KAAUY,EAAW;AAAA,MACnD,WAAWU;AAAA,MACX,KAAKzB;AAAA,MACL,eAAaP;AAAA,MACb,oBAAkBuC,EAAY;AAAA,MAC9B,UAAAtC;AAAA,MACA,mBAAiBmB;AAAA,MACjB,iBAAc;AAAA,MACd,iBAAeV;AAAA,IAAA;AAAA,oCAEd,QAAK,EAAA,IAAIU,GAAe,WAAWc,EAAO,2BACxC3C,CACH;AAAA,IACAuB,gBAAAA,EAAA;AAAA,MAAC0B;AAAA,MAAA;AAAA,QACC,OAAOvC,IAAWwC,EAAM,QAAQ,aAAaA,EAAM,QAAQ;AAAA,QAC3D,SAASC;AAAA,QACT,WAAWR,EAAO;AAAA,QAClB,WAAW,CAACjC,KAAYO;AAAA,QACxB,MAAMmC,EAAS;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA,GAEF7B,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWqB,GAAgB,OAAO,EAAE,OAAOpC,IAAQ,SAAS,QAAQ,QAAAG,EACvE,EAAA,GAAAY,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWoB,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBhB;AAAA,MACjB,UAAU;AAAA,MACV,yBAAuB,OAAOH,IAAiB,MAAc,GAAGM,CAAc,IAAIN,CAAY,KAAK;AAAA,MACnG,KAAKT;AAAA,IAAA;AAAA,IAEJ8B;AAAA,EAAA,GAEF,CAAC3C,KACCqB,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWoB,EAAO,mBACpBpB,gBAAAA,EAAA,cAAA8B,GAAA,EAAO,SAASpB,GAAa,iBAAed,KAC1ClB,CACH,CACF,CAEJ,CACF;AAEJ;"}

package/components/Dropdown/styles.module.scss

@@ -208,7 +208,7 @@
 
   &__input {
     border-bottom: 1px solid $neutral300;
-    padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(s);
+    padding: getSpacer(2xs) getSpacer(s);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       padding: getSpacer(s);

package/components/Duolist/Duolist.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Breakpoint } from '../../hooks/useBreakpoint';
 import { TitleProps } from '../Title';
 export type DuolistVariants = 'normal' | 'line';
 export type BoldColumn = 'first' | 'second' | 'none';
@@ -25,6 +26,8 @@ export interface DuolistProps {
     testId?: string;
     /** Width of the description column in percentage */
     descriptionWidth?: number;
+    /** Use collapsed mode on columns from chosen breakpoint and below. */
+    useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;
 }
 export interface DuolistGroupProps {
     /** Determines which column is bold */