@helsenorge/designsystem-react 8.4.0 → 8.5.1

package/components/Slider/index.js

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

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.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    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface 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  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\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  /** Sets the value of the slider */\n  value?: number;\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  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\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        setValueState(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 (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\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        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\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    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - 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 getXPositionStyling = (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={getXPositionStyling(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={getXPositionStyling(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={getXPositionStyling(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, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\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","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","jsx","styles","renderSteps","_step","renderStepLabels","jsxs","AnalyticsId","Title","classNames"],"mappings":";;;;;;;;;AAYA,MAAMA,KAAqB,CAACC,GAAiBC,GAAaC,MAAmD;AAC3G,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAO,GAEpCM,IAAe,CAACC,MAA2B;AAC/C,IAAIA,IAAWL,IACbE,EAASF,CAAG,IACHK,IAAWN,IACpBG,EAASH,CAAG,IAEZG,EAASG,CAAQ;AAAA,EACnB;AAGF,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAaN,CAAO;AAAA,EAAA,GACnB,CAACC,GAAKC,CAAG,CAAC,GAEN,CAACC,GAAOG,CAAY;AAC7B,GAoCaG,KAAgC,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAWH,IAAQA,EAAM,SAAS,IAAI;AAAA,EACtC,UAAAI,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,OAAAlB;AACF,MAAM;AACJ,QAAM,CAACmB,GAAUC,CAAW,IAAIlB,EAAS,EAAK,GACxC,CAACmB,GAAeC,CAAgB,IAAIpB,EAAS,OAAOF,IAAU,MAAciB,IAAW,EAAI,GAC3F,CAACM,GAAYC,CAAa,IAAI5B;AAAA,IAClC,OAAOI,IAAU,OAAegB,IAAWD,KAAY,IAAIA,IAAWf;AAAA,IACtEe;AAAA,IACAC;AAAA,EAAA,GAGIS,IAAUC,KACVC,IAAcD,KACdE,IAAeF,KACfG,IAAWC,EAAuB,IAAI,GACtCC,IAAYD,EAAuB,IAAI,GACvC,EAAE,OAAOE,MAAeC,EAAQJ,CAAQ,KAAK,EAAE,OAAO,KACtDK,IAAYlB,IAAW;AAE7B,EAAAX,EAAU,MAAM;AACd,UAAM8B,IAAkB,MAAY;AAClC,MAAAf,EAAY,EAAK;AAAA,IAAA;AAGV,oBAAA,iBAAiB,aAAae,CAAe,GAE/C,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAe;AAAA,IAAA;AAAA,EAE7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAgC,CAACC,MAAmC;;AACxE,UAAMC,MAAgBC,IAAAV,EAAS,YAAT,gBAAAU,EAAkB,wBAAwB,MAAK,GAG/DC,KAAsBH,IAAiBC,KAAiBN,GACxDS,IAAazB,IAAWD;AAE1Bf,QAAAA,IAAQwC,IAAqBC,IAAa1B;AAG9Cf,WAAAA,IADkB,KAAK,MAAMA,IAAQc,CAAI,IACrBA,GACpBd,IAAQ,KAAK,IAAIe,GAAU,KAAK,IAAIC,GAAUhB,CAAK,CAAC,GAE7CA;AAAAA,EAAA;AAGT,EAAAK,EAAU,MAAM;AACR,UAAAqC,IAAoB,CAAC,MAA0B;AAC/C,UAAA,CAAC/B,KAAYQ,GAAU;AACnB,cAAAf,IAAWgC,EAA8B,EAAE,OAAO;AACxD,QAAAZ,EAAcpB,CAAQ;AAAA,MACxB;AAAA,IAAA;AAGO,oBAAA,iBAAiB,eAAesC,CAAiB,GAEnD,MAAM;AACF,eAAA,oBAAoB,eAAeA,CAAiB;AAAA,IAAA;AAAA,EAC/D,GACC,CAACvB,CAAQ,CAAC,GAEbd,EAAU,MAAM;AACd,IAAIL,MAAUuB,KAAc,OAAOvB,IAAU,QAC5B2C,KACfnB,EAAcxB,CAAK;AAAA,EACrB,GACC,CAACA,CAAK,CAAC,GAEVK,EAAU,MAAM;AACV,IAAA,CAACM,KAAYU,KAAiBT,KAChCA,EAASW,CAAU;AAAA,EACrB,GACC,CAACA,GAAYF,CAAa,CAAC,GAE9BhB,EAAU,MAAM;AACd,IAAI,OAAOL,IAAU,OAAeiB,MAAaI,KAC/CC,EAAiBL,CAAQ;AAAA,EAC3B,GACC,CAACA,CAAQ,CAAC;AAEb,QAAM0B,IAAiB,MAAY;AACjC,IAAItB,MAAkB,MACpBC,EAAiB,EAAI;AAAA,EACvB,GAGIsB,IAA4D,CAAKC,MAAA;AACrE,QAAIlC,EAAU;AAEd,QAAImC,IAAO;AAEX,YAAQD,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACH,QAAArB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAtB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcT,CAAQ,GACf+B,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcR,CAAQ,GACf8B,IAAA;AACP;AAAA,IAGJ;AAEA,IAAIA,MACaH,KACfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB;AAAA,EACpB,GAGIE,IAA4D,CAAKF,MAAA;;AACrE,QAAIlC,EAAU;AAER,UAAAP,IAAWgC,EAA8BS,EAAE,OAAO;AACxD,IAAArB,EAAcpB,CAAQ,IACtBmC,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBS,IAA+D,CAAKH,MAAA;;AACxE,IAAIlC,MAEJS,EAAY,EAAI,GACDuB,KAEfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB,IAElBN,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBU,IAAajC,MAAaD,IAAYiB,KAAchB,IAAWD,MAAcQ,IAAaR,KAAY,GAEtGmC,IAAmB,MAA0B;AACjD,UAAMC,IAAYtC,IAAQ,KAAK,OAAOU,IAAaR,KAAYD,CAAI,IAAI;AAEvE,QAAID,KAASsC,MAAc,QAAQA,KAAa,KAAKA,IAAYtC,EAAM,QAAQ;AACvEC,YAAAA,IAAOD,EAAMsC,CAAS,GACtBC,IAAYtC,EAAK,cACjBuC,IAAQ,OAAOvC,EAAK,QAAU,MAAcA,EAAK,MAAM,aAAa;AAE1E,aAAOsC,KAAaC,IAAQ,GAAGD,CAAS,IAAIC,CAAK,KAAKD,KAAaC;AAAA,IACrE;AAAA,EAEO,GAkBHC,IAAsBC,GAAuB;AAAA,IACjD,OAAO/C;AAAA,IACP,KAjByB,MAA0B;AAC/C,UAAAD,KAASE,KAAaC;AACxB,eAAO,CAACe,GAASE,GAAaC,CAAY,EAAE,KAAK,GAAG;AAEtD,UAAIrB,KAASE;AACX,eAAO,CAACgB,GAASE,CAAW,EAAE,KAAK,GAAG;AAExC,UAAIpB,KAASG;AACX,eAAO,CAACe,GAASG,CAAY,EAAE,KAAK,GAAG;AAEzC,UAAIrB;AACK,eAAAkB;AAAA,IACT,GAKuB;AAAA,IACvB,QAAQ;AAAA,EAAA,CACT,GAEK+B,IAAsB,CAACC,GAAeC,OACnC,EAAE,MAAM,GAAID,KAASC,IAAc,KAAM,GAAG,QAG/CC,IAAgB,MAElB,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,GAC7C,UAAOhD,KAAA,gBAAAA,EAAA,IAAI,CAACC,GAAM2C,MAEf3C,EAAK,gBACH,gBAAA8C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MAEb,WAAWC,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,MAE7C,UAAAC,EAAK;AAAA,IAAA;AAAA,IAJD,UAAU2C;AAAA,EAAA,GASzB,CAAA,GAIEK,IAAc,MACXjD,KAAA,gBAAAA,EAAO,IAAI,CAACkD,GAAON,MAChB,gBAAAG,EAAA,OAAA,EAAyB,WAAWC,EAAO,qBAAwB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM,EAAA,GAAxG,SAAS4C,CAAkG,IAI1HO,IAAmB,MAErB,gBAAAJ,EAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,GAC7C,UAAOhD,KAAA,gBAAAA,EAAA,IAAI,CAACC,GAAM2C,MAEf,OAAO3C,EAAK,QAAU,OACpB,gBAAA8C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MAEb,WAAWC,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,MAE7C,UAAAC,EAAK;AAAA,IAAA;AAAA,IAJD,UAAU2C;AAAA,EAAA,GASzB,CAAA;AAKF,SAAA,gBAAAQ,EAAC,SAAI,WAAWJ,EAAO,QAAQ,eAAa3C,GAAQ,oBAAkBgD,EAAY,QAC/E,UAAA;AAAA,IAAA3D,KACE,gBAAAqD,EAAAO,IAAA,EAAM,WAAWN,EAAO,eAAkB,YAAY,MAAM,QAAQ,GAAG,YAAY,UAAU,IAAIpC,GAC/F,UACHlB,GAAA;AAAA,IAED,gBAAA0D,EAAA,OAAA,EAAI,WAAWJ,EAAO,2BAA2B,GAC/C,UAAA;AAAA,MAAcF,EAAA;AAAA,MAGf,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKpC;AAAA,UACL,WAAWuC,EAAWP,EAAO,uBAAuB,GAAGlD,KAAYkD,EAAO,iCAAiC,CAAC;AAAA,UAC5G,SAASd;AAAA,UACT,eAAeC;AAAA,UAEf,UAAA;AAAA,YAAC,gBAAAY,EAAA,OAAA,EAAI,WAAWQ,EAAWP,EAAO,eAAelD,KAAYkD,EAAO,yBAAyB,CAAC,GAAI,UAAAC,EAAc,EAAA,CAAA;AAAA,YAChH,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAMjD,IAAW,SAAY;AAAA,gBAC7B,KAAKoB;AAAA,gBACL,WAAWqC,EAAWP,EAAO,gBAAgB;AAAA,kBAC3C,CAACA,EAAO,0BAA0B,CAAC,GAAGlD;AAAA,kBACtC,CAACkD,EAAO,0BAA0B,CAAC,GAAGxC;AAAA,gBAAA,CACvC;AAAA,gBACD,OAAO;AAAA,kBACL,MAAM,GAAG4B,CAAU;AAAA,gBACrB;AAAA,gBACA,WAAWL;AAAA,gBACX,iBAAerB;AAAA,gBACf,kBAAgB2B,EAAiB;AAAA,gBACjC,iBAAenC;AAAA,gBACf,iBAAeC;AAAA,gBACf,UAAUL,IAAW,SAAY;AAAA,gBACjC,iBAAeA;AAAA,gBACd,GAAG2C;AAAA,cAAA;AAAA,YACN;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MACCU,EAAiB;AAAA,IAAA,GACpB;AAAA,KACEvD,KAAaC,MACb,gBAAAuD,EAAC,QAAK,EAAA,WAAWJ,EAAO,iBACtB,UAAA;AAAA,MAAC,gBAAAD,EAAA,QAAA,EAAK,IAAIjC,GAAc,UAAUlB,GAAA;AAAA,MACjC,gBAAAmD,EAAA,QAAA,EAAK,IAAIhC,GAAe,UAAWlB,GAAA;AAAA,IAAA,GACtC;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/components/Spacer/index.js

@@ -1,5 +1,5 @@
-import a from "./Spacer.js";
+import { S as r } from "../../Spacer.js";
 export {
-  a as default
+  r as default
 };
 //# sourceMappingURL=index.js.map

package/components/StatusDot/index.js

@@ -1,8 +1,8 @@
-import o from "./StatusDot.js";
-import { StatusDotModes as s, StatusDotVariant as e } from "./StatusDot.js";
+import { S as a } from "../../StatusDot.js";
+import { a as r, b as e } from "../../StatusDot.js";
 export {
-  s as StatusDotModes,
+  r as StatusDotModes,
   e as StatusDotVariant,
-  o as default
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/Step/index.js

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

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\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","AnalyticsId","jsx","styles","StepButtons"],"mappings":";;;;AA4BA,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;AAE1E,2BACG,OAAI,EAAA,eAAaE,GAAQ,oBAAkBE,EAAY,MACrD,UAAA;AAAA,IAAAT,KAAY,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,eAAgB,UAAQX,GAAA;AAAA,IAC1D,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,eAAgB,UAAAV,GAAS;AAAA,IAC/CO,KACC,gBAAAE;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,YAAAV;AAAA,QACA,eAAAC;AAAA,QACA,mBAAAC;AAAA,QACA,cAAAC;AAAA,QACA,QAAQC;AAAA,MAAA;AAAA,IACV;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/components/StepButtons/index.js

@@ -1,4 +1,4 @@
-import { StepButtons as o } from "./StepButtons.js";
+import { S as o } from "../../StepButtons.js";
 export {
   o as StepButtons,
   o as default

package/components/Stepper/index.js

@@ -1,5 +1,52 @@
-import p from "./Stepper.js";
+import { jsx as r, Fragment as V, jsxs as f } from "react/jsx-runtime";
+import { useRef as D } from "react";
+import R from "classnames";
+import i from "./styles.module.scss";
+import { AnalyticsId as S } from "../../constants.js";
+import { useSize as M } from "../../hooks/useSize.js";
+import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
+const E = 4, w = 24, I = 8, W = (t, e) => t < e ? t : e - 1, X = (t, e) => e < t ? t : e, k = (t, e, o) => typeof t > "u" || t < e ? e : t > o ? o : t, T = (t) => Math.floor(t / (w + E)), j = (t, e) => (t - w) / (e - 1), C = (t, e) => t * e, K = (t, e) => Array.from(Array(e - t + 1), (o, s) => s + t), L = (t, e, o) => {
+  const s = W(e, o), a = X(s, o);
+  return { validatedValue: k(t, s, a), validatedMin: s, validatedMax: a };
+}, _ = ({ index: t, completed: e, distanceBetweenDots: o, position: s }) => {
+  const a = R(
+    i.stepper__dot,
+    e && i["stepper__dot--completed"],
+    s && i[`stepper__dot--${s}`]
+  ), d = !s && typeof t < "u" && typeof o < "u" ? { left: `${t * o + I}px` } : void 0;
+  return /* @__PURE__ */ r("span", { className: a, style: d, "data-testid": "dot" });
+}, O = ({ allowedValues: t, currentValue: e, distanceBetweenDots: o }) => /* @__PURE__ */ r(V, { children: t.map((s, a) => /* @__PURE__ */ r(_, { index: a, completed: s < e, distanceBetweenDots: o }, s)) }), Q = ({ ariaLabelledById: t, ariaLabel: e, value: o, min: s = 0, max: a = 2, testId: p }) => {
+  const d = D(null), h = D(null), { width: P = 0 } = M(d) || {}, { width: g = 0 } = M(h) || {}, { validatedValue: n, validatedMin: m, validatedMax: l } = L(o, s, a), c = K(m, l), x = c.indexOf(n), N = T(P), y = j(g, c.length), A = C(y, x), u = c.length <= N, b = n === l, v = $({ label: e, id: t });
+  return /* @__PURE__ */ f("div", { className: i["stepper-wrapper"], ref: d, children: [
+    /* @__PURE__ */ f(
+      "span",
+      {
+        role: "progressbar",
+        ...v,
+        "aria-valuenow": n,
+        "aria-valuemin": m,
+        "aria-valuemax": l,
+        className: i.stepper,
+        style: {
+          backgroundPositionX: `${b ? g : A}px`
+        },
+        ref: h,
+        "data-testid": p,
+        "data-analyticsid": S.Stepper,
+        children: [
+          u && /* @__PURE__ */ r(O, { allowedValues: c, currentValue: n, distanceBetweenDots: y }),
+          !u && /* @__PURE__ */ f(V, { children: [
+            /* @__PURE__ */ r(_, { completed: n > m, position: "left" }),
+            /* @__PURE__ */ r(_, { completed: n === l, position: "right" })
+          ] }),
+          /* @__PURE__ */ r("span", { className: i.stepper__marker, style: { left: `${A}px` } })
+        ]
+      }
+    ),
+    !u && /* @__PURE__ */ r("span", { className: i.stepper__number, children: `${n}/${l}` })
+  ] });
+};
 export {
-  p as default
+  Q as default
 };
 //# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","Dots","allowedValues","currentValue","jsx","Fragment","Stepper","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","jsxs","AnalyticsId","DotList"],"mappings":"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"}

package/components/Table/TableBody/index.js

@@ -1,6 +1,6 @@
-import { TableBody as a } from "./TableBody.js";
+import { T as o } from "../../../TableBody.js";
 export {
-  a as TableBody,
-  a as default
+  o as TableBody,
+  o as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableCell/index.js

@@ -1,8 +1,8 @@
-import { TableCell as l } from "./TableCell.js";
-import { TextAlign as t } from "./TableCell.js";
+import { T as e } from "../../../TableCell.js";
+import { a as r } from "../../../TableCell.js";
 export {
-  l as TableCell,
-  t as TextAlign,
-  l as default
+  e as TableCell,
+  r as TextAlign,
+  e as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableExpandedRow/index.js

@@ -1,4 +1,4 @@
-import { TableExpandedRow as e } from "./TableExpandedRow.js";
+import { T as e } from "../../../TableExpandedRow.js";
 export {
   e as TableExpandedRow,
   e as default

package/components/Table/TableExpanderCell/index.js

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

package/components/Table/TableHead/index.js

@@ -1,8 +1,8 @@
-import { TableHead as r } from "./TableHead.js";
-import { HeaderCategory as t } from "./TableHead.js";
+import { T as e } from "../../../TableHead.js";
+import { H as t } from "../../../TableHead.js";
 export {
   t as HeaderCategory,
-  r as TableHead,
-  r as default
+  e as TableHead,
+  e as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableHeadCell/index.js

@@ -1,7 +1,7 @@
-import { TableHeadCell as o } from "./TableHeadCell.js";
-import { SortDirection as a } from "./TableHeadCell.js";
+import { T as o } from "../../../TableHeadCell.js";
+import { S as t } from "../../../TableHeadCell.js";
 export {
-  a as SortDirection,
+  t as SortDirection,
   o as TableHeadCell,
   o as default
 };

package/components/Table/TableRow/index.js

@@ -1,6 +1,6 @@
-import { TableRow as a } from "./TableRow.js";
+import { T as o } from "../../../TableRow.js";
 export {
-  a as TableRow,
-  a as default
+  o as TableRow,
+  o as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/index.js

@@ -1,28 +1,28 @@
-import { Table as o } from "./Table.js";
-import { ModeType as l, ResponsiveTableVariant as t, defaultConfig as p, simpleConfig as f } from "./Table.js";
-import { TableBody as m } from "./TableBody/TableBody.js";
-import { TableCell as d, TextAlign as b } from "./TableCell/TableCell.js";
-import { TableExpandedRow as n } from "./TableExpandedRow/TableExpandedRow.js";
-import { TableExpanderCell as g } from "./TableExpanderCell/TableExpanderCell.js";
-import { HeaderCategory as y, TableHead as H } from "./TableHead/TableHead.js";
-import { SortDirection as u, TableHeadCell as w } from "./TableHeadCell/TableHeadCell.js";
-import { TableRow as c } from "./TableRow/TableRow.js";
+import { T as a } from "../../Table.js";
+import { M as s, R as l, d as T, s as t } from "../../Table.js";
+import { T as f } from "../../TableBody.js";
+import { T as d, a as m } from "../../TableCell.js";
+import { T as i } from "../../TableExpandedRow.js";
+import { T as C } from "../../TableExpanderCell.js";
+import { H, T as R } from "../../TableHead.js";
+import { S as u, T as w } from "../../TableHeadCell.js";
+import { T as M } from "../../TableRow.js";
 export {
-  y as HeaderCategory,
-  l as ModeType,
-  t as ResponsiveTableVariant,
+  H as HeaderCategory,
+  s as ModeType,
+  l as ResponsiveTableVariant,
   u as SortDirection,
-  o as Table,
-  m as TableBody,
+  a as Table,
+  f as TableBody,
   d as TableCell,
-  n as TableExpandedRow,
-  g as TableExpanderCell,
-  H as TableHead,
+  i as TableExpandedRow,
+  C as TableExpanderCell,
+  R as TableHead,
   w as TableHeadCell,
-  c as TableRow,
-  b as TextAlign,
-  o as default,
-  p as defaultConfig,
-  f as simpleConfig
+  M as TableRow,
+  m as TextAlign,
+  a as default,
+  T as defaultConfig,
+  t as simpleConfig
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/TabList/index.js

@@ -1,5 +1,5 @@
-import a from "./TabList.js";
+import { T as t } from "../../../TabList.js";
 export {
-  a as default
+  t as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/TabPanel/index.js

@@ -1,4 +1,4 @@
-import e from "./TabPanel.js";
+import { T as e } from "../../../TabPanel.js";
 export {
   e as default
 };