@helsenorge/designsystem-react 6.0.0-beta.9 → 6.0.1

package/components/Slider/Slider.js

@@ -1,125 +1,165 @@
-import s, { useState as b, useRef as D, useEffect as h } from "react";
-import P from "classnames";
-import { AnalyticsId as j } from "../../constants.js";
-import { useSize as M } from "../../hooks/useSize.js";
-import { useUuid as g } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as C } from "../../utils/accessibility.js";
-import K from "../Title/Title.js";
-import i from "./styles.module.scss";
-const W = (n, k, c) => {
-  const [u, r] = b(n);
-  return [u, (f) => {
-    f > c ? r(c) : f < k ? r(k) : r(f);
-  }];
-}, d = 100, m = 0, N = 1, V = 10, $ = ({ title: n, ariaLabel: k, labelLeft: c, labelRight: u, disabled: r = !1, onChange: E, testId: f }) => {
-  const [L, S] = b(!1), [a, o] = W((d - m) / 2, m, d), p = g(), w = g(), _ = g(), A = D(null), v = D(null), { width: y } = M(A) || { width: 0 }, { width: U } = M(v) || { width: 0 };
+import a, { useState as R, useRef as U, useEffect as h } from "react";
+import S from "classnames";
+import { AnalyticsId as F } from "../../constants.js";
+import { useSize as G } from "../../hooks/useSize.js";
+import { useUuid as j } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as J } from "../../utils/accessibility.js";
+import Q from "../Title/Title.js";
+import o from "./styles.module.scss";
+const Y = (u, f, l) => {
+  const [v, n] = R(u), E = (t) => {
+    t > l ? n(l) : t < f ? n(f) : n(t);
+  };
+  return h(() => {
+    n((l - f) / 2 + f);
+  }, [f, l]), [v, E];
+}, Z = ({
+  title: u,
+  ariaLabel: f,
+  labelLeft: l,
+  labelRight: v,
+  disabled: n = !1,
+  onChange: E,
+  steps: t,
+  step: _ = 1,
+  minValue: i = 0,
+  maxValue: s = t ? t.length - 1 : 100,
+  testId: $
+}) => {
+  const [A, I] = R(!1), [d, m] = Y((s - i) / 2 + i, i, s), k = j(), y = j(), w = j(), N = U(null), b = U(null), { width: M } = G(N) || { width: 0 }, C = s / 10;
   h(() => {
-    const e = () => {
-      S(!1);
+    const r = () => {
+      I(!1);
     };
-    return document.addEventListener("pointerup", e), () => {
-      document.removeEventListener("pointerup", e);
+    return document.addEventListener("pointerup", r), () => {
+      document.removeEventListener("pointerup", r);
     };
   }, []);
-  const I = (e) => {
-    var l;
-    const t = ((l = A.current) == null ? void 0 : l.getBoundingClientRect().x) ?? 0;
-    return Math.round((e - t) / y * (d - m));
+  const D = (r) => {
+    var L;
+    const e = ((L = N.current) == null ? void 0 : L.getBoundingClientRect().x) ?? 0, c = (r - e) / M, g = s - i;
+    let p = c * g + i;
+    return p = Math.round(p / _) * _, p = Math.max(i, Math.min(s, p)), p;
   };
   h(() => {
-    const e = (t) => {
-      if (!r && L) {
-        const l = I(t.clientX);
-        o(l);
+    const r = (e) => {
+      if (!n && A) {
+        const c = D(e.clientX);
+        m(c);
       }
     };
-    return document.addEventListener("pointermove", e), () => {
-      document.removeEventListener("pointermove", e);
+    return document.addEventListener("pointermove", r), () => {
+      document.removeEventListener("pointermove", r);
     };
-  }, [L]), h(() => {
-    !r && E && E(a);
-  }, [a]);
-  const R = (e) => {
-    if (r)
+  }, [A]), h(() => {
+    !n && E && E(d);
+  }, [d]);
+  const B = (r) => {
+    if (n)
       return;
-    let t = !1;
-    switch (e.key) {
+    let e = !1;
+    switch (r.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        o(a - N), t = !0;
+        m(d - _), e = !0;
         break;
       case "PageDown":
-        o(a - V), t = !0;
+        m(d - C), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        o(a + N), t = !0;
+        m(d + _), e = !0;
         break;
       case "PageUp":
-        o(a + V), t = !0;
+        m(d + C), e = !0;
         break;
       case "Home":
-        o(m), t = !0;
+        m(i), e = !0;
         break;
       case "End":
-        o(d), t = !0;
+        m(s), e = !0;
         break;
     }
-    t && (e.preventDefault(), e.stopPropagation());
-  }, x = (e) => {
-    var l;
-    if (r)
+    e && (r.preventDefault(), r.stopPropagation());
+  }, X = (r) => {
+    var c;
+    if (n)
       return;
-    const t = I(e.clientX);
-    o(t), (l = v.current) == null || l.focus();
-  }, B = (e) => {
-    var t;
-    r || (S(!0), e.preventDefault(), e.stopPropagation(), (t = v.current) == null || t.focus());
-  }, T = (y - U) / (d - m) * a, X = C({
-    label: k,
+    const e = D(r.clientX);
+    m(e), (c = b.current) == null || c.focus();
+  }, T = (r) => {
+    var e;
+    n || (I(!0), r.preventDefault(), r.stopPropagation(), (e = b.current) == null || e.focus());
+  }, z = s !== i ? M / (s - i) * (d - i) : 0, K = () => {
+    const r = t ? Math.round((d - i) / _) : null;
+    if (t && r !== null && r >= 0 && r < t.length) {
+      const e = t[r], c = e.emojiUniCode, g = typeof e.label < "u" ? e.label.toString() : void 0;
+      return c && g ? `${c} ${g}` : c || g;
+    }
+  }, H = J({
+    label: f,
     id: (() => {
-      if (n && c && u)
-        return [p, w, _].join(" ");
-      if (n && c)
-        return [p, w].join(" ");
-      if (n && u)
-        return [p, _].join(" ");
-      if (n)
-        return p;
+      if (u && l && v)
+        return [k, y, w].join(" ");
+      if (u && l)
+        return [k, y].join(" ");
+      if (u && v)
+        return [k, w].join(" ");
+      if (u)
+        return k;
     })(),
     prefer: "label"
-  });
-  return /* @__PURE__ */ s.createElement("div", { className: i.slider, "data-testid": f, "data-analyticsid": j.Slider }, n && /* @__PURE__ */ s.createElement(K, { htmlMarkup: "h3", margin: 1.5, appearance: "title3", id: p }, n), /* @__PURE__ */ s.createElement(
+  }), P = (r, e) => ({ left: `${r / (e - 1) * 100}%` }), O = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__emoji-container"] }, t == null ? void 0 : t.map((r, e) => r.emojiUniCode && /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      "aria-hidden": !0,
+      key: "emoji" + e,
+      className: o.slider__emoji,
+      style: P(e, t.length)
+    },
+    r.emojiUniCode
+  ))), W = () => t == null ? void 0 : t.map((r, e) => /* @__PURE__ */ a.createElement("div", { key: "step" + e, className: o.slider__track__step, style: P(e, t.length) })), q = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__value-container"] }, t == null ? void 0 : t.map((r, e) => typeof r.label < "u" && /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      "aria-hidden": !0,
+      key: "label" + e,
+      className: o.slider__value,
+      style: P(e, t.length)
+    },
+    r.label
+  )));
+  return /* @__PURE__ */ a.createElement("div", { className: o.slider, "data-testid": $, "data-analyticsid": F.Slider }, u && /* @__PURE__ */ a.createElement(Q, { className: o.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: k }, u), /* @__PURE__ */ a.createElement("div", { className: o["slider__content-container"] }, O(), /* @__PURE__ */ a.createElement(
     "div",
     {
-      ref: A,
-      className: P(i["slider__track-wrapper"], r && i["slider__track-wrapper--disabled"]),
-      onClick: x,
-      onPointerDown: B
+      ref: N,
+      className: S(o["slider__track-wrapper"], n && o["slider__track-wrapper--disabled"]),
+      onClick: X,
+      onPointerDown: T
     },
-    /* @__PURE__ */ s.createElement("div", { className: P(i.slider__track, r && i["slider__track--disabled"]) }),
-    /* @__PURE__ */ s.createElement(
+    /* @__PURE__ */ a.createElement("div", { className: S(o.slider__track, n && o["slider__track--disabled"]) }, W()),
+    /* @__PURE__ */ a.createElement(
       "div",
       {
-        role: r ? void 0 : "slider",
-        ref: v,
-        className: P(i.slider__marker, r && i["slider__marker--disabled"]),
+        role: n ? void 0 : "slider",
+        ref: b,
+        className: S(o.slider__marker, n && o["slider__marker--disabled"]),
         style: {
-          left: `${T}px`
+          left: `${z}px`
         },
-        onKeyDown: R,
-        "aria-valuenow": a,
-        "aria-valuemin": m,
-        "aria-valuemax": d,
-        tabIndex: r ? void 0 : 0,
-        "aria-disabled": r,
-        ...X
+        onKeyDown: B,
+        "aria-valuenow": d,
+        "aria-valuetext": K(),
+        "aria-valuemin": i,
+        "aria-valuemax": s,
+        tabIndex: n ? void 0 : 0,
+        "aria-disabled": n,
+        ...H
       }
     )
-  ), (c || u) && /* @__PURE__ */ s.createElement("span", { className: i.slider__options }, /* @__PURE__ */ s.createElement("span", { id: w }, c), /* @__PURE__ */ s.createElement("span", { id: _ }, u)));
-}, Z = $;
+  ), q()), (l || v) && /* @__PURE__ */ a.createElement("span", { className: o.slider__options }, /* @__PURE__ */ a.createElement("span", { id: y }, l), /* @__PURE__ */ a.createElement("span", { id: w }, v)));
+}, le = Z;
 export {
-  $ as Slider,
-  Z as default
+  Z as Slider,
+  le as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={disabled ? undefined : 'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the steps data for the slider*/\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -2,13 +2,47 @@
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 
+$track-height-offset: 1rem;
+$mark-size: getSpacer(l);
+
 .slider {
+  display: flex;
+  flex-direction: column;
+  row-gap: getSpacer(s);
   width: 100%;
   padding: getSpacer(m) 0;
   position: relative;
   outline: none !important;
 
+  &__title {
+    grid-column: 1 / -1;
+  }
+
+  &__content-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: getSpacer(s);
+    padding: 0 getSpacer(s);
+  }
+
+  &__emoji-container,
+  &__value-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+  }
+
+  &__emoji,
+  &__value {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 0;
+    transform: translateX(-50%);
+  }
+
   &__track-wrapper {
+    height: $mark-size;
     width: 100%;
     cursor: pointer;
     touch-action: none;
@@ -19,27 +53,36 @@
   }
 
   &__track {
+    padding: 0 getSpacer(s);
     border-top: 2px solid $black;
-    width: 100%;
     position: relative;
-    top: 1rem;
+    top: $track-height-offset;
 
     &--disabled {
       border-color: $neutral600;
     }
+
+    &__step {
+      position: absolute;
+      left: -1px;
+      width: 2px;
+      height: getSpacer(xs);
+      bottom: 0;
+      top: (calc($track-height-offset / 2) * -1) + 0.05rem;
+      background-color: $black;
+    }
   }
 
   &__marker {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 2rem;
-    height: 2rem;
+    width: $mark-size;
+    height: $mark-size;
     background-color: $white;
     border: 0.15rem solid $black;
-    border-radius: 1rem;
-    position: relative;
-    top: -0.05rem;
+    border-radius: 10rem;
+    position: absolute;
     z-index: 9;
     outline: none;
     cursor: pointer;
@@ -53,7 +96,7 @@
       width: 1.25rem;
       height: 1.25rem;
       border: 0.1rem solid $black;
-      border-radius: 1rem;
+      border-radius: 10rem;
       background-color: $blueberry600;
 
       :hover > &,

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

@@ -1,12 +1,19 @@
 export type Styles = {
   slider: string;
+  'slider__content-container': string;
+  slider__emoji: string;
+  'slider__emoji-container': string;
   slider__marker: string;
   'slider__marker--disabled': string;
   slider__options: string;
+  slider__title: string;
   slider__track: string;
+  slider__track__step: string;
   'slider__track--disabled': string;
   'slider__track-wrapper': string;
   'slider__track-wrapper--disabled': string;
+  slider__value: string;
+  'slider__value-container': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\ninterface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAA,gBAAAJ,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\ninterface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}

package/components/StatusDot/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 } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = '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  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} 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'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,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;AAkBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,QACjDA,MAAY,8CACNC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASC,EAAM,CAAA,IAC3CH,MAAY,0CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASE,EAAO,CAAA,IAC5CJ,MAAY,aACd,gBAAAK,EAAA,cAACJ,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASI,GAAU,OAAOC,EAAS,UAAU,GAAG,EAAG,CAAA,IAC/EP,MAAY,+CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASM,EAAY,CAAA,IAGrD,MAkBHC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAC,IAAO,WAAwB,SAAAZ,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAW,IAAAL,GAElGM,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,gBAAmBJ,IAAUI,EAAO,sBAAsB,IAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GACjIsB,IAAeH;AAAA,IACnBC,EAAO;AAAA,IACPJ,KAAWI,EAAO,wBAAwB;AAAA,IAC1CR,MAAS,YAAyBQ,EAAO,2BAA2B;AAAA,EAAA;AAIpE,SAAA,gBAAAf,EAAA,cAAC,QAAK,EAAA,IAAAM,GAAQ,WAAWO,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3F,gBAAAlB,EAAA,cAAA,QAAA,EAAK,WAAWgB,EACf,GAAA,gBAAAhB,EAAA,cAACN,GAAc,EAAA,SAAAC,EAAA,CAAkB,CACnC,mCACC,QAAK,EAAA,WAAWsB,EAAe,GAAAT,CAAK,CACvC;AAEJ,GAEAW,IAAef;"}
+{"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 } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = '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  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} 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'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,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;AAkBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,QACjDA,MAAY,8CACNC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASC,EAAM,CAAA,IAC3CH,MAAY,0CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASE,EAAO,CAAA,IAC5CJ,MAAY,aACdK,gBAAAA,EAAA,cAACJ,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASI,GAAU,OAAOC,EAAS,UAAU,GAAG,EAAG,CAAA,IAC/EP,MAAY,+CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASM,EAAY,CAAA,IAGrD,MAkBHC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAC,IAAO,WAAwB,SAAAZ,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAW,IAAAL,GAElGM,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,gBAAmBJ,IAAUI,EAAO,sBAAsB,IAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GACjIsB,IAAeH;AAAA,IACnBC,EAAO;AAAA,IACPJ,KAAWI,EAAO,wBAAwB;AAAA,IAC1CR,MAAS,YAAyBQ,EAAO,2BAA2B;AAAA,EAAA;AAIpE,SAAAf,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAAM,GAAQ,WAAWO,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3FlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWgB,EACf,GAAAhB,gBAAAA,EAAA,cAACN,GAAc,EAAA,SAAAC,EAAA,CAAkB,CACnC,mCACC,QAAK,EAAA,WAAWsB,EAAe,GAAAT,CAAK,CACvC;AAEJ,GAEAW,IAAef;"}

package/components/StatusDot/styles.module.scss

@@ -5,10 +5,12 @@
 @import '../../scss/font-settings';
 @import '../../scss/screen-reader';
 
+$status-dot-size: 0.937rem;
+
 .statusdot {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   font-size: $font-size-xs;
   line-height: $lineheight-size-xs;
   font-weight: 400;
@@ -26,10 +28,17 @@
     top: getSpacer(3xs);
     margin-right: getSpacer(2xs);
     border-radius: 10rem;
+    margin-top: 0.28rem;
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-top: 0.45rem;
+    }
 
     &:not(#{&}--icon) {
-      width: 0.937rem;
-      height: 0.937rem;
+      width: $status-dot-size;
+      height: $status-dot-size;
+      min-width: $status-dot-size;
+      min-height: $status-dot-size;
     }
 
     &--info {

package/components/Step/Step.js

@@ -5,26 +5,26 @@ import i from "./styles.module.scss";
 const f = ({
   stepper: t,
   children: c,
-  backButton: s,
-  forwardButton: a,
+  backButton: a,
+  forwardButton: s,
   additionalButtons: m,
   cancelButton: r,
   stickyButtons: p = !1,
   testId: l
 }) => {
-  const o = s || a || m || r;
+  const o = a || s || m || r;
   return /* @__PURE__ */ e.createElement("div", { "data-testid": l, "data-analyticsid": n.Step }, t && /* @__PURE__ */ e.createElement("div", { className: i.step__stepper }, t), /* @__PURE__ */ e.createElement("div", { className: i.step__content }, c), o && /* @__PURE__ */ e.createElement(
     d,
     {
-      backButton: s,
-      forwardButton: a,
+      backButton: a,
+      forwardButton: s,
       additionalButtons: m,
       cancelButton: r,
       sticky: p
     }
   ));
-}, _ = f;
+}, S = f;
 export {
-  _ as default
+  S as default
 };
 //# sourceMappingURL=Step.js.map

package/components/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":";;;;AA8BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAGxE,SAAA,gBAAAI,EAAA,cAAC,SAAI,eAAaF,GAAQ,oBAAkBG,EAAY,KAAA,GACrDV,KAAW,gBAAAS,EAAA,cAAC,OAAI,EAAA,WAAWE,EAAO,cAAgB,GAAAX,CAAQ,GAC1D,gBAAAS,EAAA,cAAA,OAAA,EAAI,WAAWE,EAAO,cAAA,GAAgBV,CAAS,GAC/CO,KACC,gBAAAC,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,YAAAV;AAAA,MACA,eAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAQC;AAAA,IAAA;AAAA,EAAA,CAGd;AAEJ,GAEAO,IAAed;"}
+{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":";;;;AA8BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAGxE,SAAAI,gBAAAA,EAAA,cAAC,SAAI,eAAaF,GAAQ,oBAAkBG,EAAY,KAAA,GACrDV,KAAWS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWE,EAAO,cAAgB,GAAAX,CAAQ,GAC1DS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWE,EAAO,cAAA,GAAgBV,CAAS,GAC/CO,KACCC,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,YAAAV;AAAA,MACA,eAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAQC;AAAA,IAAA;AAAA,EAAA,CAGd;AAEJ,GAEAO,IAAed;"}

package/components/StepButtons/StepButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButtons.js","sources":["../../../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","React","AnalyticsId","StepButtons$1"],"mappings":";;;;AAwBO,MAAMA,IAA0C,CAASC,MAAA;AACxD,QAAA,EAAE,YAAAC,GAAY,eAAAC,GAAe,mBAAAC,GAAmB,cAAAC,GAAc,QAAAC,IAAS,IAAO,QAAAC,EAAW,IAAAN,GAEzFO,IAAoBC,EAAWC,EAAO,aAAaJ,KAAUI,EAAO,iCAAiC,CAAC;AAExG,SAAAR,KAAcC,KAAiBC,KAAqBC,IAEpD,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAWH,GAAmB,eAAaD,GAAQ,oBAAkBK,EAAY,YAClF,IAAAV,KAAcC,MACd,gBAAAQ,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,EAC/F,GAAAR,KACCS,EAAM,aAAaT,GAAY;AAAA,IAC7B,SAAS;AAAA,IACT,kBAAkBO,EAAWC,EAAO,2BAA2B,CAAC;AAAA,EACjE,CAAA,GACFP,KACCQ,EAAM,aAAaR,GAAe;AAAA,IAChC,SAAS;AAAA,IACT,kBAAkBM,EAAWC,EAAO,8BAA8B,CAAC;AAAA,EACpE,CAAA,CACL,GAEDN,KACC,gBAAAO,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,KAAIN,CAAkB,GAEzHC,KACE,gBAAAM,EAAA,cAAA,OAAA,EAAI,WAAWD,EAAO,qBAAA,GACpBC,EAAM,aAAaN,GAAc;AAAA,IAChC,SAAS;AAAA,EACV,CAAA,CACH,CAEJ,IAGG;AACT,GAEAQ,IAAeb;"}
+{"version":3,"file":"StepButtons.js","sources":["../../../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","React","AnalyticsId","StepButtons$1"],"mappings":";;;;AAwBO,MAAMA,IAA0C,CAASC,MAAA;AACxD,QAAA,EAAE,YAAAC,GAAY,eAAAC,GAAe,mBAAAC,GAAmB,cAAAC,GAAc,QAAAC,IAAS,IAAO,QAAAC,EAAW,IAAAN,GAEzFO,IAAoBC,EAAWC,EAAO,aAAaJ,KAAUI,EAAO,iCAAiC,CAAC;AAExG,SAAAR,KAAcC,KAAiBC,KAAqBC,IAEpDM,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWH,GAAmB,eAAaD,GAAQ,oBAAkBK,EAAY,YAClF,IAAAV,KAAcC,MACdQ,gBAAAA,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,EAC/F,GAAAR,KACCS,EAAM,aAAaT,GAAY;AAAA,IAC7B,SAAS;AAAA,IACT,kBAAkBO,EAAWC,EAAO,2BAA2B,CAAC;AAAA,EACjE,CAAA,GACFP,KACCQ,EAAM,aAAaR,GAAe;AAAA,IAChC,SAAS;AAAA,IACT,kBAAkBM,EAAWC,EAAO,8BAA8B,CAAC;AAAA,EACpE,CAAA,CACL,GAEDN,KACCO,gBAAAA,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,KAAIN,CAAkB,GAEzHC,KACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWD,EAAO,qBAAA,GACpBC,EAAM,aAAaN,GAAc;AAAA,IAChC,SAAS;AAAA,EACV,CAAA,CACH,CAEJ,IAGG;AACT,GAEAQ,IAAeb;"}

package/components/Stepper/Dot.js

@@ -1,15 +1,15 @@
-import a from "react";
-import d from "classnames";
-import { STEPPER_PADDING_X_PX as l } from "./utils.js";
+import d from "react";
+import l from "classnames";
+import { STEPPER_PADDING_X_PX as m } from "./utils.js";
 import e from "./styles.module.scss";
-const c = ({ index: o, completed: p, distanceBetweenDots: s, position: t }) => {
-  const r = d(
+const f = ({ index: o, completed: p, distanceBetweenDots: s, position: t }) => {
+  const r = l(
     e.stepper__dot,
     p && e["stepper__dot--completed"],
     t && e[`stepper__dot--${t}`]
-  ), m = !t && typeof o < "u" && typeof s < "u" ? { left: `${o * s + l}px` } : void 0;
-  return /* @__PURE__ */ a.createElement("span", { className: r, style: m, "data-testid": "dot" });
-}, u = c;
+  ), a = !t && typeof o < "u" && typeof s < "u" ? { left: `${o * s + m}px` } : void 0;
+  return /* @__PURE__ */ d.createElement("span", { className: r, style: a, "data-testid": "dot" });
+}, u = f;
 export {
   u as default
 };

package/components/Stepper/DotList.js

@@ -1,6 +1,6 @@
 import t from "react";
 import c from "./Dot.js";
-const n = ({ allowedValues: o, currentValue: m, distanceBetweenDots: r }) => /* @__PURE__ */ t.createElement(t.Fragment, null, o.map((e, a) => /* @__PURE__ */ t.createElement(c, { index: a, key: e, completed: e < m, distanceBetweenDots: r }))), s = n;
+const l = ({ allowedValues: o, currentValue: m, distanceBetweenDots: r }) => /* @__PURE__ */ t.createElement(t.Fragment, null, o.map((e, a) => /* @__PURE__ */ t.createElement(c, { index: a, key: e, completed: e < m, distanceBetweenDots: r }))), s = l;
 export {
   s as default
 };