@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Stepper/index.d.ts

@@ -1,3 +1,3 @@
-import Stepper from './Stepper';
+import { default as Stepper } from './Stepper';
 export * from './Stepper';
 export default Stepper;

package/components/Stepper/index.js

@@ -1,52 +1,86 @@
-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(
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import classNames from "classnames";
+import styles from "./styles.module.scss";
+import { AnalyticsId } from "../../constants.js";
+import { useSize } from "../../hooks/useSize.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+const MARKER_DOT_MIN_DISTANCE_PX = 4;
+const MARKER_WIDTH_PX = 24;
+const STEPPER_PADDING_X_PX = 8;
+const getValidatedMin = (min, max) => min < max ? min : max - 1;
+const getValidatedMax = (min, max) => max < min ? min : max;
+const getValidatedValue = (value, min, max) => {
+  if (typeof value === "undefined" || value < min) {
+    return min;
+  }
+  return value > max ? max : value;
+};
+const getMaximumDots = (stepperWidth) => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));
+const getDistanceBetweenDots = (stepperWidth, dots) => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);
+const getMarkerPosition = (distanceBetweenDots, index) => distanceBetweenDots * index;
+const getAllowedValues = (min, max) => Array.from(Array(max - min + 1), (_, index) => index + min);
+const getValidatedProps = (value, min, max) => {
+  const validatedMin = getValidatedMin(min, max);
+  const validatedMax = getValidatedMax(validatedMin, max);
+  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);
+  return { validatedValue, validatedMin, validatedMax };
+};
+const Dot = ({ index, completed, distanceBetweenDots, position }) => {
+  const classes = classNames(
+    styles.stepper__dot,
+    completed && styles["stepper__dot--completed"],
+    position && styles[`stepper__dot--${position}`]
+  );
+  const positionWithStyle = !position && typeof index !== "undefined" && typeof distanceBetweenDots !== "undefined";
+  const style = positionWithStyle ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` } : void 0;
+  return /* @__PURE__ */ jsx("span", { className: classes, style, "data-testid": "dot" });
+};
+const Dots = ({ allowedValues, currentValue, distanceBetweenDots }) => /* @__PURE__ */ jsx(Fragment, { children: allowedValues.map((value, index) => /* @__PURE__ */ jsx(Dot, { index, completed: value < currentValue, distanceBetweenDots }, value)) });
+const Stepper = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {
+  const wrapperRef = useRef(null);
+  const ref = useRef(null);
+  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};
+  const { width: stepperWidth = 0 } = useSize(ref) || {};
+  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);
+  const allowedValues = getAllowedValues(validatedMin, validatedMax);
+  const index = allowedValues.indexOf(validatedValue);
+  const maximumDots = getMaximumDots(wrapperWidth);
+  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);
+  const markerPosition = getMarkerPosition(distanceBetweenDots, index);
+  const showAllDots = allowedValues.length <= maximumDots;
+  const isCompleted = validatedValue === validatedMax;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
+  return /* @__PURE__ */ jsxs("div", { className: styles["stepper-wrapper"], ref: wrapperRef, children: [
+    /* @__PURE__ */ jsxs(
       "span",
       {
         role: "progressbar",
-        ...v,
-        "aria-valuenow": n,
-        "aria-valuemin": m,
-        "aria-valuemax": l,
-        className: i.stepper,
+        ...ariaLabelAttributes,
+        "aria-valuenow": validatedValue,
+        "aria-valuemin": validatedMin,
+        "aria-valuemax": validatedMax,
+        className: styles.stepper,
         style: {
-          backgroundPositionX: `${b ? g : A}px`
+          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`
         },
-        ref: h,
-        "data-testid": p,
-        "data-analyticsid": S.Stepper,
+        ref,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.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" })
+          showAllDots && /* @__PURE__ */ jsx(Dots, { allowedValues, currentValue: validatedValue, distanceBetweenDots }),
+          !showAllDots && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Dot, { completed: validatedValue > validatedMin, position: "left" }),
+            /* @__PURE__ */ jsx(Dot, { completed: validatedValue === validatedMax, position: "right" })
           ] }),
-          /* @__PURE__ */ r("span", { className: i.stepper__marker, style: { left: `${A}px` } })
+          /* @__PURE__ */ jsx("span", { className: styles.stepper__marker, style: { left: `${markerPosition}px` } })
         ]
       }
     ),
-    !u && /* @__PURE__ */ r("span", { className: i.stepper__number, children: `${n}/${l}` })
+    !showAllDots && /* @__PURE__ */ jsx("span", { className: styles.stepper__number, children: `${validatedValue}/${validatedMax}` })
   ] });
 };
 export {
-  Q as default
+  Stepper as default
 };
 //# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"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":["DotList"],"mappings":"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"}

package/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { Breakpoint } from '../../hooks/useBreakpoint';
 export declare enum ResponsiveTableVariant {
     /** No handling responsive behaviour. Default. */

package/components/Table/TableBody/TableBody.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {
     /** Adds custom classes to the element. */

package/components/Table/TableBody/index.d.ts

@@ -1,3 +1,3 @@
-import TableBody from './TableBody';
+import { default as TableBody } from './TableBody';
 export * from './TableBody';
 export default TableBody;

package/components/Table/TableBody/index.js

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

package/components/Table/TableCell/TableCell.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export declare enum TextAlign {
     left = "left",

package/components/Table/TableCell/index.d.ts

@@ -1,3 +1,3 @@
-import TableCell from './TableCell';
+import { default as TableCell } from './TableCell';
 export * from './TableCell';
 export default TableCell;

package/components/Table/TableCell/index.js

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

package/components/Table/TableExpandedRow/TableExpandedRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export interface Props {
     /** Row is expanded. */

package/components/Table/TableExpandedRow/index.d.ts

@@ -1,3 +1,3 @@
-import TableExpandedRow from './TableExpandedRow';
+import { default as TableExpandedRow } from './TableExpandedRow';
 export * from './TableExpandedRow';
 export default TableExpandedRow;

package/components/Table/TableExpandedRow/index.js

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

package/components/Table/TableExpanderCell/TableExpanderCell.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export interface Props {
     /** Adds custom classes to the element. */

package/components/Table/TableExpanderCell/TableExpanderCellMobile.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { Props } from '../TableRow/TableRow';
 type TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;
 declare const TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>;

package/components/Table/TableExpanderCell/index.d.ts

@@ -1,3 +1,3 @@
-import TableExpanderCell from './TableExpanderCell';
+import { default as TableExpanderCell } from './TableExpanderCell';
 export * from './TableExpanderCell';
 export default TableExpanderCell;

package/components/Table/TableExpanderCell/index.js

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

package/components/Table/TableHead/TableHead.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export declare enum HeaderCategory {
     normal = "normal",

package/components/Table/TableHead/index.d.ts

@@ -1,3 +1,3 @@
-import TableHead from './TableHead';
+import { default as TableHead } from './TableHead';
 export * from './TableHead';
 export default TableHead;

package/components/Table/TableHead/index.js

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

package/components/Table/TableHeadCell/TableHeadCell.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export declare enum SortDirection {
     asc = "asc",

package/components/Table/TableHeadCell/index.d.ts

@@ -1,3 +1,3 @@
-import TableHeadCell from './TableHeadCell';
+import { default as TableHeadCell } from './TableHeadCell';
 export * from './TableHeadCell';
 export default TableHeadCell;

package/components/Table/TableHeadCell/index.js

@@ -1,8 +1,8 @@
-import { T as o } from "../../../TableHeadCell.js";
-import { S as t } from "../../../TableHeadCell.js";
+import { T as TableHeadCell } from "../../../TableHeadCell.js";
+import { S } from "../../../TableHeadCell.js";
 export {
-  t as SortDirection,
-  o as TableHeadCell,
-  o as default
+  S as SortDirection,
+  TableHeadCell,
+  TableHeadCell as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/TableRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ModeType } from '../Table';
 export interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {
     /** Sets if expanded row can be expanded */

package/components/Table/TableRow/index.d.ts

@@ -1,3 +1,3 @@
-import TableRow from './TableRow';
+import { default as TableRow } from './TableRow';
 export * from './TableRow';
 export default TableRow;

package/components/Table/TableRow/index.js

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

package/components/Table/index.js

@@ -1,28 +1,28 @@
-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";
+import { T as Table } from "../../Table.js";
+import { M, R, d, s } from "../../Table.js";
+import { T } from "../../TableBody.js";
+import { T as T2, a } from "../../TableCell.js";
+import { T as T3 } from "../../TableExpandedRow.js";
+import { T as T4 } from "../../TableExpanderCell.js";
+import { H, T as T5 } from "../../TableHead.js";
+import { S, T as T6 } from "../../TableHeadCell.js";
+import { T as T7 } from "../../TableRow.js";
 export {
   H as HeaderCategory,
-  s as ModeType,
-  l as ResponsiveTableVariant,
-  u as SortDirection,
-  a as Table,
-  f as TableBody,
-  d as TableCell,
-  i as TableExpandedRow,
-  C as TableExpanderCell,
-  R as TableHead,
-  w as TableHeadCell,
-  M as TableRow,
-  m as TextAlign,
-  a as default,
-  T as defaultConfig,
-  t as simpleConfig
+  M as ModeType,
+  R as ResponsiveTableVariant,
+  S as SortDirection,
+  Table,
+  T as TableBody,
+  T2 as TableCell,
+  T3 as TableExpandedRow,
+  T4 as TableExpanderCell,
+  T5 as TableHead,
+  T6 as TableHeadCell,
+  T7 as TableRow,
+  a as TextAlign,
+  Table as default,
+  d as defaultConfig,
+  s as simpleConfig
 };
 //# sourceMappingURL=index.js.map

package/components/Table/utils.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { BreakpointConfig } from './Table';
 import { Breakpoint } from '../../hooks/useBreakpoint';
 /**

package/components/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
 export interface TabProps {

package/components/Tabs/TabList/TabItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TabProps } from '../Tab';
 import { TabsColors } from '../Tabs';
 interface TabItemProps {

package/components/Tabs/TabList/TabList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TabsColors, TabsOnColor } from '../Tabs';
 interface TabListProps {
     children: React.ReactNode;

package/components/Tabs/TabList/index.d.ts

@@ -1,3 +1,3 @@
-import TabList from './TabList';
+import { default as TabList } from './TabList';
 export * from './TabList';
 export default TabList;

package/components/Tabs/TabList/index.js

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

package/components/Tabs/TabPanel/TabPanel.d.ts

@@ -1,12 +1,10 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TabsColors } from '../Tabs';
 interface TabPanelProps {
     children?: React.ReactNode;
     color?: TabsColors;
     isFirst?: boolean;
-    translateX?: number;
     style?: React.CSSProperties;
-    animate: 'left' | 'right' | null;
 }
 declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TabPanel;

package/components/Tabs/TabPanel/index.d.ts

@@ -1,3 +1,3 @@
-import TabPanel from './TabPanel';
+import { default as TabPanel } from './TabPanel';
 export * from './TabPanel';
 export default TabPanel;

package/components/Tabs/TabPanel/index.js

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

package/components/Tabs/TabPanel/styles.module.scss

@@ -34,31 +34,3 @@
     }
   }
 }
-
-.tab-panel--animate-left {
-  animation: slide-left 0.5s forwards;
-}
-
-.tab-panel--animate-right {
-  animation: slide-right 0.5s forwards;
-}
-
-@keyframes slide-right {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes slide-left {
-  0% {
-    transform: translateX(100%);
-  }
-
-  100% {
-    transform: translateX(0%);
-  }
-}

package/components/Tabs/TabPanel/styles.module.scss.d.ts

@@ -1,9 +1,5 @@
 export type Styles = {
-  'slide-left': string;
-  'slide-right': string;
   'tab-panel': string;
-  'tab-panel--animate-left': string;
-  'tab-panel--animate-right': string;
   'tab-panel--blueberry': string;
   'tab-panel--first': string;
   'tab-panel--neutral': string;

package/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import Tab from './Tab';
+import { default as React } from 'react';
+import { default as Tab } from './Tab';
 import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;

package/components/Tabs/index.d.ts

@@ -1,3 +1,3 @@
-import Tabs from './Tabs';
+import { default as Tabs } from './Tabs';
 export * from './Tabs';
 export default Tabs;