@helsenorge/designsystem-react 8.6.0-beta.1 → 9.0.0-beta.0

package/RadioButton.js

@@ -1,104 +1,104 @@
-import { jsx as _ } from "react/jsx-runtime";
-import P, { useState as U } from "react";
+import { jsx as g } from "react/jsx-runtime";
+import U, { useState as q } from "react";
 import u from "classnames";
-import { FormMode as d, FormSize as W, AnalyticsId as q } from "./constants.js";
-import { usePseudoClasses as G } from "./hooks/usePseudoClasses.js";
-import { useUuid as H } from "./hooks/useUuid.js";
-import { getAriaDescribedBy as J } from "./utils/accessibility.js";
-import { isMutableRefObject as K, mergeRefs as Q } from "./utils/refs.js";
-import { u as V } from "./uuid.js";
-import { E as X } from "./ErrorWrapper.js";
-import { g as Y, r as Z } from "./Label.js";
+import { FormOnColor as d, FormSize as M, AnalyticsId as G } from "./constants.js";
+import { usePseudoClasses as H } from "./hooks/usePseudoClasses.js";
+import { useUuid as J } from "./hooks/useUuid.js";
+import { getAriaDescribedBy as K } from "./utils/accessibility.js";
+import { isMutableRefObject as Q, mergeRefs as V } from "./utils/refs.js";
+import { u as X } from "./uuid.js";
+import { E as Y } from "./ErrorWrapper.js";
+import { g as Z, r as $ } from "./Label.js";
 import e from "./components/RadioButton/styles.module.scss";
-const ce = (l, a, t, c) => {
-  const n = a === "oninvalid", o = l === c;
+const me = (l, o, t, c) => {
+  const n = o === "oninvalid", a = l === c;
   return u({
-    [e["radio-button-label__large--on-grey"]]: t && a === "ongrey" && !o,
-    [e["radio-button-label__large--on-blueberry"]]: a === "onblueberry" && !o && t,
-    [e["radio-button-label__large--selected"]]: t && o && !n,
-    [e["radio-button-label__large--selected-invalid"]]: t && o && n
+    [e["radio-button-label__large--on-grey"]]: t && o === "ongrey" && !a,
+    [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !a && t,
+    [e["radio-button-label__large--selected"]]: t && a && !n,
+    [e["radio-button-label__large--selected-invalid"]]: t && a && n
   });
-}, $ = P.forwardRef((l, a) => {
+}, ee = U.forwardRef((l, o) => {
   const {
     className: t,
     defaultChecked: c,
     onChange: n,
-    disabled: o,
-    label: f,
-    inputId: p = V(),
-    mode: i = d.onwhite,
-    name: v = p,
-    size: w,
-    errorText: m,
-    error: R = !!m,
-    errorTextId: k,
-    value: B = Y(f),
+    disabled: a,
+    label: _,
+    inputId: m = X(),
+    onColor: i = d.onwhite,
+    name: v = m,
+    size: R,
+    errorText: f,
+    error: k = !!f,
+    errorTextId: w,
+    errorWrapperClassName: B,
+    value: N = Z(_),
     testId: x,
     required: L,
-    labelClassNames: N,
-    ...I
-  } = l, g = R || i === d.oninvalid, y = i === d.ondark, h = i === d.onblueberry, T = i === d.oninvalid, r = w === W.large, [j, A] = U(), { refObject: F, isFocused: s } = G(K(a) ? a : null), S = Q([a, F]), C = H(k), z = u(e["radio-button-wrapper"], {
-    [e["radio-button-wrapper--with-error"]]: m,
+    labelClassNames: I,
+    ...T
+  } = l, p = k || i === d.oninvalid, y = i === d.ondark, h = i === d.onblueberry, j = i === d.oninvalid, r = R === M.large, [A, F] = q(), { refObject: O, isFocused: s } = H(Q(o) ? o : null), S = V([o, O]), C = J(w), W = u(e["radio-button-wrapper"], {
     [e["radio-button-wrapper__large"]]: r,
     [e["radio-button-wrapper__large--focused"]]: r && s,
-    [e["radio-button-wrapper__large--selected"]]: r && j && s,
-    [e["radio-button-wrapper__large--invalid"]]: r && T && s,
+    [e["radio-button-wrapper__large--selected"]]: r && A && s,
+    [e["radio-button-wrapper__large--invalid"]]: r && j && s,
     [e["radio-button-wrapper__large--on-blueberry"]]: r && h && s
-  }), D = u(
+  }), z = u(
     e["radio-button-label"],
     {
-      [e["radio-button-label--disabled"]]: o,
+      [e["radio-button-label--disabled"]]: a,
       [e["radio-button-label--on-dark"]]: y,
-      [e["radio-button-label--invalid"]]: g,
+      [e["radio-button-label--invalid"]]: p,
       [e["radio-button-label__large"]]: r,
-      [e["radio-button-label__large--disabled"]]: r && o
+      [e["radio-button-label__large--disabled"]]: r && a
     },
-    N
-  ), E = u(
+    I
+  ), D = u(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
-      [e["radio-button--disabled"]]: o,
+      [e["radio-button--disabled"]]: a,
       [e["radio-button--on-blueberry"]]: h,
-      [e["radio-button--invalid"]]: g,
+      [e["radio-button--invalid"]]: p,
       [e["radio-button__large"]]: r,
-      [e["radio-button__large--disabled"]]: r && o,
-      [e["radio-button__large--invalid"]]: r && g
+      [e["radio-button__large--disabled"]]: r && a,
+      [e["radio-button__large--invalid"]]: r && p
     },
     t
-  ), M = (b) => {
-    A(b.target.checked), n && n(b);
-  }, O = () => /* @__PURE__ */ _(
+  ), E = (b) => {
+    F(b.target.checked), n && n(b);
+  }, P = () => /* @__PURE__ */ g(
     "input",
     {
-      id: p,
+      id: m,
       name: v,
-      className: E,
+      className: D,
       type: "radio",
-      disabled: o,
-      value: B,
+      disabled: a,
+      value: N,
       ref: S,
       defaultChecked: c,
-      "aria-describedby": J(l, C),
+      "aria-describedby": K(l, C),
       required: L,
-      ...I,
-      onChange: (b) => M(b)
+      ...T,
+      onChange: (b) => E(b)
     }
   );
-  return /* @__PURE__ */ _(X, { errorText: m, errorTextId: C, children: /* @__PURE__ */ _("div", { "data-testid": x, "data-analyticsid": q.RadioButton, className: z, children: Z(
-    f,
-    O(),
-    p,
+  return /* @__PURE__ */ g(Y, { className: B, errorText: f, errorTextId: C, children: /* @__PURE__ */ g("div", { "data-testid": x, "data-analyticsid": G.RadioButton, className: W, children: $(
+    _,
+    P(),
+    m,
     i,
-    D,
+    z,
     void 0,
     e["radiobutton-sublabel-wrapper"],
     r
   ) }) });
 });
-$.displayName = "RadioButton";
+ee.displayName = "RadioButton";
 export {
-  $ as R,
-  ce as g
+  ee as R,
+  me as g
 };
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

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

package/Select.js

@@ -1,69 +1,70 @@
 import { jsx as l, jsxs as w } from "react/jsx-runtime";
-import F from "react";
+import H from "react";
 import n from "classnames";
-import { FormMode as H, AnalyticsId as M, IconSize as U, AVERAGE_CHARACTER_WIDTH_PX as V } from "./constants.js";
+import { FormOnColor as U, AnalyticsId as V, IconSize as X, AVERAGE_CHARACTER_WIDTH_PX as $ } from "./constants.js";
 import { useUuid as h } from "./hooks/useUuid.js";
 import { getColor as v } from "./theme/currys/color.js";
-import { getAriaDescribedBy as X } from "./utils/accessibility.js";
-import { E as $ } from "./ErrorWrapper.js";
-import { I as G } from "./Icon.js";
-import L from "./components/Icons/ChevronDown.js";
+import { getAriaDescribedBy as G } from "./utils/accessibility.js";
+import { E as L } from "./ErrorWrapper.js";
+import { I as M } from "./Icon.js";
+import O from "./components/Icons/ChevronDown.js";
 import { a as P } from "./Label.js";
 import e from "./components/Select/styles.module.scss";
-const k = (t) => `calc(${t * V}px + 2rem)`, J = (t, r) => r ? v("neutral", 500) : v(t ? "cherry" : "blueberry", 600), ne = F.forwardRef(function(r, i) {
+const k = (o) => `calc(${o * $}px + 2rem)`, J = (o, r) => r ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), ie = H.forwardRef(function(r, i) {
   const {
     className: y,
     children: I,
     concept: x = "normal",
     disabled: a,
-    error: S,
+    error: N,
     errorText: c,
     errorTextId: W,
+    errorWrapperClassName: S,
     label: g,
     selectId: d,
-    name: N = d,
-    mode: s = H.onwhite,
-    testId: A,
+    name: A = d,
+    onColor: s = U.onwhite,
+    testId: R,
     width: m,
     required: p,
-    value: R,
-    defaultValue: T,
+    value: T,
+    defaultValue: E,
     autoComplete: u = "off",
-    wrapperClassName: E,
-    ...D
-  } = r, f = h(d), b = h(W), C = s === "onblueberry", o = s === "oninvalid" || !!c || !!S, _ = J(o, !!a), j = m ? k(m) : void 0, q = n(
+    wrapperClassName: D,
+    ..._
+  } = r, f = h(d), C = h(W), b = s === "onblueberry", t = s === "oninvalid" || !!c || !!N, j = J(t, !!a), q = m ? k(m) : void 0, z = n(
     e["select-inner-wrapper"],
     {
       [e["select-inner-wrapper--transparent"]]: x === "transparent",
-      [e["select-inner-wrapper--on-blueberry"]]: C,
-      [e["select-inner-wrapper--invalid"]]: o,
+      [e["select-inner-wrapper--on-blueberry"]]: b,
+      [e["select-inner-wrapper--invalid"]]: t,
       [e["select-inner-wrapper--disabled"]]: a
     },
     y
-  ), z = n(e.select, {
-    [e["select--on-blueberry"]]: C,
-    [e["select--invalid"]]: o
-  }), B = n(e["select-wrapper"], E);
-  return /* @__PURE__ */ l($, { errorText: c, errorTextId: b, children: /* @__PURE__ */ w("div", { "data-testid": A, "data-analyticsid": M.Select, className: B, style: { maxWidth: j }, children: [
+  ), B = n(e.select, {
+    [e["select--on-blueberry"]]: b,
+    [e["select--invalid"]]: t
+  }), F = n(e["select-wrapper"], D);
+  return /* @__PURE__ */ l(L, { className: S, errorText: c, errorTextId: C, children: /* @__PURE__ */ w("div", { "data-testid": R, "data-analyticsid": V.Select, className: F, style: { maxWidth: q }, children: [
     P(g, f, s),
-    /* @__PURE__ */ w("div", { className: q, children: [
-      /* @__PURE__ */ l(G, { className: e["select-arrow"], svgIcon: L, color: _, size: U.XSmall }),
+    /* @__PURE__ */ w("div", { className: z, children: [
+      /* @__PURE__ */ l(M, { className: e["select-arrow"], svgIcon: O, color: j, size: X.XSmall }),
       /* @__PURE__ */ l(
         "select",
         {
-          "aria-invalid": !!o,
+          "aria-invalid": !!t,
           id: f,
-          name: N,
-          className: z,
+          name: A,
+          className: B,
           disabled: a,
           ref: i,
           required: p,
-          "aria-describedby": X(r, b),
+          "aria-describedby": G(r, C),
           "aria-required": !!p,
-          value: R,
-          defaultValue: T,
+          value: T,
+          defaultValue: E,
           autoComplete: u || void 0,
-          ...D,
+          ..._,
           children: I
         }
       )
@@ -71,6 +72,6 @@ const k = (t) => `calc(${t * V}px + 2rem)`, J = (t, r) => r ? v("neutral", 500)
   ] }) });
 });
 export {
-  ne as S
+  ie as S
 };
 //# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - 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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","jsxs","jsx","Icon","ChevronDown","IconSize","getAriaDescribedBy"],"mappings":";;;;;;;;;;;;AAkDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,KAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,2BACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,GAC/C,4BAAC,OAAI,EAAA,eAAaV,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EACvG,GAAA,UAAA;AAAA,IAAYQ,EAAA1B,GAAOa,GAAMV,CAAgB;AAAA,IAC1C,gBAAAwB,EAAC,OAAI,EAAA,WAAWR,GACd,UAAA;AAAA,MAAC,gBAAAS,EAAAC,GAAA,EAAK,WAAWR,EAAa,cAAc,GAAG,SAASS,GAAa,OAAOb,GAAW,MAAMc,EAAS,OAAQ,CAAA;AAAA,MAC9G,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAACzC;AAAA,UAChB,IAAI0B;AAAA,UACJ,MAAAX;AAAA,UACA,WAAWoB;AAAA,UACX,UAAAlC;AAAA,UACA,KAAAK;AAAA,UACA,UAAAc;AAAA,UACA,oBAAkByB,EAAmBxC,GAAOuB,CAAa;AAAA,UACzD,iBAAe,CAAC,CAACR;AAAA,UACjB,OAAAC;AAAA,UACA,cAAAC;AAAA,UACA,cAAcC,KAA8B;AAAA,UAC3C,GAAGE;AAAA,UAEH,UAAAjB;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - 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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","errorWrapperClassName","label","selectId","name","onColor","FormOnColor","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","jsxs","AnalyticsId","renderLabel","jsx","Icon","ChevronDown","IconSize","getAriaDescribedBy"],"mappings":";;;;;;;;;;;;AAmDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,KAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,SAAAE,IAAUC,EAAY;AAAA,IACtB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAArB,GAEEsB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQhB,CAAW,GACnCkB,IAAcb,MAAY,eAC1BjB,IAAUiB,MAAY,eAAe,CAAC,CAACN,KAAa,CAAC,CAACD,GACtDqB,IAAYhC,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C+B,IAAWZ,IAAQxB,EAAkBwB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAG1B,MAAY;AAAA,MACjE,CAAC0B,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGnC;AAAA,MACjD,CAACmC,EAAa,gCAAgC,CAAC,GAAGlC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI6B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGnC;AAAA,EAAA,CACpC,GAEKqC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,2BACGa,GAAa,EAAA,WAAWzB,GAAuB,WAAAF,GAAsB,aAAakB,GACjF,UAAC,gBAAAU,EAAA,OAAA,EAAI,eAAapB,GAAQ,oBAAkBqB,EAAY,QAAQ,WAAWH,GAAsB,OAAO,EAAE,UAAAL,EACvG,GAAA,UAAA;AAAA,IAAYS,EAAA3B,GAAOa,GAAMV,CAAsB;AAAA,IAChD,gBAAAsB,EAAC,OAAI,EAAA,WAAWN,GACd,UAAA;AAAA,MAAC,gBAAAS,EAAAC,GAAA,EAAK,WAAWR,EAAa,cAAc,GAAG,SAASS,GAAa,OAAOb,GAAW,MAAMc,EAAS,OAAQ,CAAA;AAAA,MAC9G,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC1C;AAAA,UAChB,IAAI2B;AAAA,UACJ,MAAAX;AAAA,UACA,WAAWoB;AAAA,UACX,UAAAnC;AAAA,UACA,KAAAK;AAAA,UACA,UAAAe;AAAA,UACA,oBAAkByB,EAAmBzC,GAAOwB,CAAa;AAAA,UACzD,iBAAe,CAAC,CAACR;AAAA,UACjB,OAAAC;AAAA,UACA,cAAAC;AAAA,UACA,cAAcC,KAA8B;AAAA,UAC3C,GAAGE;AAAA,UAEH,UAAAlB;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/StatusDot.js

@@ -1,33 +1,33 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
 import l from "classnames";
 import "./theme/grid.js";
 import "./hooks/useBreakpoint.js";
 import "react";
-import { FormMode as i, AnalyticsId as w, IconSize as v } from "./constants.js";
+import { FormOnColor as i, AnalyticsId as w, IconSize as v } from "./constants.js";
 import { getColor as m } from "./theme/currys/color.js";
 import { I as a } from "./Icon.js";
-import C from "./components/Icons/Attachment.js";
-import N from "./components/Icons/Change.js";
-import b from "./components/Icons/Group.js";
-import x from "./components/Icons/NoAccess.js";
+import N from "./components/Icons/Attachment.js";
+import b from "./components/Icons/Change.js";
+import x from "./components/Icons/Group.js";
+import y from "./components/Icons/NoAccess.js";
 import n from "./components/StatusDot/styles.module.scss";
-var c = ((o) => (o[o.onwhite = i.onwhite] = "onwhite", o[o.ondark = i.ondark] = "ondark", o))(c || {}), y = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(y || {});
-const A = ({ mode: o, variant: s }) => {
-  const r = { color: o === c.ondark ? m("white") : m("black"), size: v.XXSmall, mode: o };
-  return s === "recurring" ? /* @__PURE__ */ e(a, { ...r, svgIcon: N }) : s === "group" ? /* @__PURE__ */ e(a, { ...r, svgIcon: b }) : s === "noaccess" ? /* @__PURE__ */ e(a, { ...r, svgIcon: x, color: m("cherry", 600) }) : s === "attachment" ? /* @__PURE__ */ e(a, { ...r, svgIcon: C }) : null;
+var c = ((o) => (o[o.onwhite = i.onwhite] = "onwhite", o[o.ondark = i.ondark] = "ondark", o))(c || {}), C = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(C || {});
+const A = ({ onColor: o, variant: e }) => {
+  const r = { color: o === c.ondark ? m("white") : m("black"), size: v.XXSmall, onColor: o };
+  return e === "recurring" ? /* @__PURE__ */ s(a, { ...r, svgIcon: b }) : e === "group" ? /* @__PURE__ */ s(a, { ...r, svgIcon: x }) : e === "noaccess" ? /* @__PURE__ */ s(a, { ...r, svgIcon: y, color: m("cherry", 600) }) : e === "attachment" ? /* @__PURE__ */ s(a, { ...r, svgIcon: N }) : null;
 }, L = (o) => {
-  const { id: s, mode: t = c.onwhite, variant: r = "info", text: d, className: p, testId: f } = o, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
+  const { id: e, onColor: t = c.onwhite, variant: r = "info", text: d, className: p, testId: f } = o, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
     ...u ? {} : { [n[`statusdot__dot--${r}`]]: !0 },
     [n["statusdot__dot--on-dark"]]: t === c.ondark
   }), k = l(t === c.ondark && n["statusdot__label--on-dark"]);
-  return /* @__PURE__ */ _("span", { id: s, className: h, "data-testid": f, "data-analyticsid": w.StatusDot, children: [
-    /* @__PURE__ */ e("span", { className: I, children: /* @__PURE__ */ e(A, { mode: t, variant: r }) }),
-    /* @__PURE__ */ e("span", { className: k, children: d })
+  return /* @__PURE__ */ _("span", { id: e, className: h, "data-testid": f, "data-analyticsid": w.StatusDot, children: [
+    /* @__PURE__ */ s("span", { className: I, children: /* @__PURE__ */ s(A, { onColor: t, variant: r }) }),
+    /* @__PURE__ */ s("span", { className: k, children: d })
   ] });
 };
 export {
   L as S,
   c as a,
-  y as b
+  C as b
 };
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = FormMode.onwhite,\n  ondark = FormMode.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  mode?: keyof typeof StatusDotModes;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ mode, variant }) => {\n  const color = mode === StatusDotModes.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, mode };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: mode === StatusDotModes.ondark,\n  });\n  const labelClasses = classNames(mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon mode={mode} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","FormMode","StatusDotVariant","StatusDotIcon","mode","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAS,OAAnB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAS,MAAlB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,MAAAC,GAAM,SAAAC,QAAc;AAEzE,QAAMC,IAAY,EAAE,OADNF,MAASJ,EAAe,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GACxD,MAAMC,EAAS,SAAS,MAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAb,IAAOJ,EAAe,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAElGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAASJ,EAAe;AAAA,EAAA,CAC9D,GACK2B,IAAeH,EAAWpB,MAASJ,EAAe,UAAUyB,EAAO,2BAA2B,CAAC;AAGnG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAA,gBAAApB,EAAC,UAAK,WAAWiB,GACf,4BAACvB,GAAc,EAAA,MAAAC,GAAY,SAAAC,GAAkB,EAC/C,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, onColor };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","FormOnColor","StatusDotVariant","StatusDotIcon","onColor","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAY,OAAtB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAY,MAArB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc;AAE5E,QAAMC,IAAY,EAAE,OADNF,MAAYJ,EAAiB,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GAC7D,MAAMC,EAAS,SAAS,SAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,SAAAb,IAAUJ,EAAiB,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAEvGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAAYJ,EAAiB;AAAA,EAAA,CACnE,GACK2B,IAAeH,EAAWpB,MAAYJ,EAAiB,UAAUyB,EAAO,2BAA2B,CAAC;AAGxG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAA,gBAAApB,EAAC,UAAK,WAAWiB,GACf,4BAACvB,GAAc,EAAA,SAAAC,GAAkB,SAAAC,GAAkB,EACrD,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}