@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/Slider/components/DoubleSlider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from "react";
@@ -78,15 +78,18 @@ const DoubleSlider = ({
     }
     return [];
   }, [options]);
-  const internalOnChangeRef = useCallback((localValue) => {
-    let leftSliderValue = localValue[0] === null ? min : localValue[0];
-    let rightSliderValue = localValue[1] === null ? max : localValue[1];
-    leftSliderValue = Math.max(min, Math.min(leftSliderValue, max));
-    rightSliderValue = Math.max(min, Math.min(rightSliderValue, max));
-    const newValues = [leftSliderValue, rightSliderValue];
-    setSelectedIndexes(newValues);
-    onChange?.([Math.min(...newValues), Math.max(...newValues)]);
-  }, [max, min, onChange]);
+  const internalOnChangeRef = useCallback(
+    (localValue) => {
+      let leftSliderValue = localValue[0] === null ? min : localValue[0];
+      let rightSliderValue = localValue[1] === null ? max : localValue[1];
+      leftSliderValue = Math.max(min, Math.min(leftSliderValue, max));
+      rightSliderValue = Math.max(min, Math.min(rightSliderValue, max));
+      const newValues = [leftSliderValue, rightSliderValue];
+      setSelectedIndexes(newValues);
+      onChange?.([Math.min(...newValues), Math.max(...newValues)]);
+    },
+    [max, min, onChange]
+  );
   useEffect(() => {
     const setWidthResize = () => {
       setWidth(Number(refSlider.current?.offsetWidth));
@@ -109,42 +112,69 @@ const DoubleSlider = ({
       setInputValue([selectedIndexes[0], val]);
     }
   };
-  const styledValue = (valueNumber, side) => input && !options ? /* @__PURE__ */ jsx(NumberInput, { "aria-label": `input-${side}`, controls: false, "data-testid": side ? `slider-input-${side}` : "slider-input", disabled, max, min, onBlur: (event) => {
-    if (!event.target.value) {
-      if (side === "left") {
-        const index = activeValue("left");
-        if (index === 0) {
-          internalOnChangeRef([min, selectedIndexes[1]]);
+  const styledValue = (valueNumber, side) => input && !options ? /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      "aria-label": `input-${side}`,
+      controls: false,
+      "data-testid": side ? `slider-input-${side}` : "slider-input",
+      disabled,
+      max,
+      min,
+      onBlur: (event) => {
+        if (!event.target.value) {
+          if (side === "left") {
+            const index = activeValue("left");
+            if (index === 0) {
+              internalOnChangeRef([min, selectedIndexes[1]]);
+            } else {
+              internalOnChangeRef([selectedIndexes[0], max]);
+            }
+          }
+          if (side === "right") {
+            const index = activeValue("right");
+            if (index === 0) {
+              internalOnChangeRef([min, selectedIndexes[1]]);
+            } else {
+              internalOnChangeRef([selectedIndexes[0], max]);
+            }
+          }
         } else {
-          internalOnChangeRef([selectedIndexes[0], max]);
+          const newValue = Number.parseFloat(event.target.value);
+          if (side === "left") {
+            internalOnChangeRef([newValue, selectedIndexes[1]]);
+          } else if (side === "right") {
+            internalOnChangeRef([selectedIndexes[0], newValue]);
+          }
         }
-      }
-      if (side === "right") {
-        const index = activeValue("right");
-        if (index === 0) {
-          internalOnChangeRef([min, selectedIndexes[1]]);
-        } else {
-          internalOnChangeRef([selectedIndexes[0], max]);
-        }
-      }
-    } else {
-      const newValue = Number.parseFloat(event.target.value);
-      if (side === "left") {
-        internalOnChangeRef([newValue, selectedIndexes[1]]);
-      } else if (side === "right") {
-        internalOnChangeRef([selectedIndexes[0], newValue]);
-      }
+      },
+      onChange: (newVal) => {
+        handleChangeInput(newVal, side);
+      },
+      size: "small",
+      step,
+      unit: typeof suffix === "string" ? suffix : unit,
+      value: side === "left" ? inputValue?.[0] : inputValue?.[1]
     }
-  }, onChange: (newVal) => {
-    handleChangeInput(newVal, side);
-  }, size: "small", step, unit: typeof suffix === "string" ? suffix : unit, value: side === "left" ? inputValue?.[0] : inputValue?.[1] }) : /* @__PURE__ */ jsxs(Text, { as: "span", className: sliderDoubleText({
-    isDouble: true,
-    isPadded: direction !== "column"
-  }), "data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`, placement: direction !== "row" ? "right" : "center", sentiment: "neutral", variant: "bodySmall", children: [
-    prefix,
-    valueNumber,
-    suffix ? suffix[side === "left" ? 0 : 1] : unit
-  ] });
+  ) : /* @__PURE__ */ jsxs(
+    Text,
+    {
+      as: "span",
+      className: sliderDoubleText({
+        isDouble: true,
+        isPadded: direction !== "column"
+      }),
+      "data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`,
+      placement: direction !== "row" ? "right" : "center",
+      sentiment: "neutral",
+      variant: "bodySmall",
+      children: [
+        prefix,
+        valueNumber,
+        suffix ? suffix[side === "left" ? 0 : 1] : unit
+      ]
+    }
+  );
   const minPos = (Math.min(...selectedIndexes) - min) * 100 / (max - min);
   const maxPos = (Math.max(...selectedIndexes) - min) * 100 / (max - min);
   const tooltipText = useMemo(() => {
@@ -159,7 +189,10 @@ const DoubleSlider = ({
     }
     return [null, null];
   }, [tooltip, selectedIndexes]);
-  const placementTooltip = [(selectedIndexes[0] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2, (selectedIndexes[1] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2];
+  const placementTooltip = [
+    (selectedIndexes[0] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2,
+    (selectedIndexes[1] - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2
+  ];
   const [leftToShow, rightToShow] = options ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
   useEffect(() => {
     setSelectedIndexes(() => {
@@ -182,50 +215,120 @@ const DoubleSlider = ({
       ] }) : null,
       direction === "row" ? styledValue(leftToShow, "left") : null,
       /* @__PURE__ */ jsxs("div", { className: sliderDoubleWrapper, children: [
-        /* @__PURE__ */ jsxs(Tooltip, { className: sliderTooltip, placement: tooltipPosition, style: assignInlineVars({
-          [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px`
-        }), text: typeof tooltipText === "string" ? tooltipText : void 0, children: [
-          /* @__PURE__ */ jsx("div", { className: sliderCustomRail, children: /* @__PURE__ */ jsx("div", { "aria-disabled": !!disabled, className: sliderInnerRail({
-            disabled: !!disabled,
-            error: !!error
-          }), "data-error": !!error, style: {
-            left: `${minPos}%`,
-            right: `${100 - maxPos}%`
-          } }) }),
-          /* @__PURE__ */ jsx(Tooltip, { className: sliderTooltip, placement: tooltipPosition, style: assignInlineVars({
-            [tooltipLeft]: `${placementTooltip[0]}px`
-          }), text: Array.isArray(tooltipText) ? tooltipText[0] : void 0, children: /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel ?? name, className: `${className ? `${className} ` : ""}${sliderDouble({
-            disabled,
-            hasTooltip: !!tooltip
-          })} ${sliderThumbStyle({
-            disabled: !!disabled,
-            hasTooltipDouble: !!tooltip,
-            isDouble: true
-          })}`, "data-direction": direction, "data-error": error, "data-testid": dataTestId ? `${dataTestId}-left` : "handle-left", disabled: !!disabled, id: finalId, max, min, name, onBlur, onChange: (event) => {
-            event.preventDefault();
-            handleMinChange(Number.parseFloat(event.target.value));
-          }, onFocus, ref: refSlider, step, style: assignInlineVars({
-            [leftVar]: `calc(${(selectedIndexes[0] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
-            [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-          }), type: "range", value: selectedIndexes[0] }) }),
-          /* @__PURE__ */ jsx(Tooltip, { className: sliderTooltip, placement: tooltipPosition, style: assignInlineVars({
-            [tooltipLeft]: `${placementTooltip[1]}px`
-          }), text: Array.isArray(tooltipText) ? tooltipText[1] : void 0, children: /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel ?? name, className: `${className ? `${className} ` : ""}${sliderDouble({
-            disabled,
-            hasTooltip: !!tooltip
-          })} ${sliderThumbStyle({
-            disabled,
-            hasTooltipDouble: !!tooltip,
-            isDouble: true
-          })}`, "data-direction": direction, "data-error": error, "data-testid": dataTestId ? `${dataTestId}-right` : "handle-right", disabled: !!disabled, id: finalId, max, min, name, onBlur, onChange: (event) => {
-            event.preventDefault();
-            handleMaxChange(Number.parseFloat(event.target.value));
-          }, onFocus, step, style: assignInlineVars({
-            [leftVar]: `calc(${(selectedIndexes[1] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
-            [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-          }), type: "range", value: selectedIndexes[1] }) })
-        ] }),
-        options ? /* @__PURE__ */ jsx(Options, { max, min, step, ticks, value: selectedIndexes }) : null
+        /* @__PURE__ */ jsxs(
+          Tooltip,
+          {
+            className: sliderTooltip,
+            placement: tooltipPosition,
+            style: assignInlineVars({
+              [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px`
+            }),
+            text: typeof tooltipText === "string" ? tooltipText : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: sliderCustomRail, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-disabled": !!disabled,
+                  className: sliderInnerRail({
+                    disabled: !!disabled,
+                    error: !!error
+                  }),
+                  "data-error": !!error,
+                  style: { left: `${minPos}%`, right: `${100 - maxPos}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  className: sliderTooltip,
+                  placement: tooltipPosition,
+                  style: assignInlineVars({
+                    [tooltipLeft]: `${placementTooltip[0]}px`
+                  }),
+                  text: Array.isArray(tooltipText) ? tooltipText[0] : void 0,
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      "aria-label": ariaLabel ?? name,
+                      className: `${className ? `${className} ` : ""}${sliderDouble({ disabled, hasTooltip: !!tooltip })} ${sliderThumbStyle({ disabled: !!disabled, hasTooltipDouble: !!tooltip, isDouble: true })}`,
+                      "data-direction": direction,
+                      "data-error": error,
+                      "data-testid": dataTestId ? `${dataTestId}-left` : "handle-left",
+                      disabled: !!disabled,
+                      id: finalId,
+                      max,
+                      min,
+                      name,
+                      onBlur,
+                      onChange: (event) => {
+                        event.preventDefault();
+                        handleMinChange(Number.parseFloat(event.target.value));
+                      },
+                      onFocus,
+                      ref: refSlider,
+                      step,
+                      style: assignInlineVars({
+                        [leftVar]: `calc(${(selectedIndexes[0] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
+                        [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+                      }),
+                      type: "range",
+                      value: selectedIndexes[0]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  className: sliderTooltip,
+                  placement: tooltipPosition,
+                  style: assignInlineVars({
+                    [tooltipLeft]: `${placementTooltip[1]}px`
+                  }),
+                  text: Array.isArray(tooltipText) ? tooltipText[1] : void 0,
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      "aria-label": ariaLabel ?? name,
+                      className: `${className ? `${className} ` : ""}${sliderDouble({ disabled, hasTooltip: !!tooltip })} ${sliderThumbStyle({ disabled, hasTooltipDouble: !!tooltip, isDouble: true })}`,
+                      "data-direction": direction,
+                      "data-error": error,
+                      "data-testid": dataTestId ? `${dataTestId}-right` : "handle-right",
+                      disabled: !!disabled,
+                      id: finalId,
+                      max,
+                      min,
+                      name,
+                      onBlur,
+                      onChange: (event) => {
+                        event.preventDefault();
+                        handleMaxChange(Number.parseFloat(event.target.value));
+                      },
+                      onFocus,
+                      step,
+                      style: assignInlineVars({
+                        [leftVar]: `calc(${(selectedIndexes[1] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
+                        [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+                      }),
+                      type: "range",
+                      value: selectedIndexes[1]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        options ? /* @__PURE__ */ jsx(
+          Options,
+          {
+            max,
+            min,
+            step,
+            ticks,
+            value: selectedIndexes
+          }
+        ) : null
       ] }),
       direction === "row" ? styledValue(rightToShow, "right") : null
     ] })

package/dist/components/Slider/components/Options.d.ts

@@ -8,4 +8,4 @@ export type OptionsProps = {
     value?: number | number[];
     step: number;
 };
-export declare const Options: ({ ticks, min, max, value, step }: OptionsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Options: ({ ticks, min, max, value, step }: OptionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/components/Options.js

@@ -1,35 +1,51 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../../Text/index.js";
 import { sliderDatalist, sliderOption, leftOption } from "../styles.css.js";
-const Options = ({
-  ticks,
-  min,
-  max,
-  value,
-  step
-}) => /* @__PURE__ */ jsx("datalist", { className: sliderDatalist({
-  double: Array.isArray(value)
-}), "data-double": Array.isArray(value), children: ticks.map((element, index, {
-  length
-}) => {
-  const left = (index * step - min) * 100 / (max - min);
-  const formatedElement = element.label ?? String(element.value);
-  const getIsSelected = () => {
-    if (!value) {
-      return false;
-    }
-    return typeof value === "number" ? element.value === value : value.includes(element.value);
-  };
-  const isSelected = getIsSelected();
-  return /* @__PURE__ */ jsx("span", { className: sliderOption({
-    left: index === 0,
-    right: index === length - 1
-  }), "data-element-left": index === 0, "data-element-right": index === length - 1, "data-value": element.value, style: assignInlineVars({
-    [leftOption]: `${left}%`
-  }), children: /* @__PURE__ */ jsx(Text, { as: "p", sentiment: isSelected ? "primary" : "neutral", variant: isSelected ? "captionStrong" : "caption", children: formatedElement }) }, element.value);
-}) });
+const Options = ({ ticks, min, max, value, step }) => /* @__PURE__ */ jsx(
+  "datalist",
+  {
+    className: sliderDatalist({ double: Array.isArray(value) }),
+    "data-double": Array.isArray(value),
+    children: ticks.map((element, index, { length }) => {
+      const left = (index * step - min) * 100 / (max - min);
+      const formatedElement = element.label ?? String(element.value);
+      const getIsSelected = () => {
+        if (!value) {
+          return false;
+        }
+        return typeof value === "number" ? element.value === value : value.includes(element.value);
+      };
+      const isSelected = getIsSelected();
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: sliderOption({
+            left: index === 0,
+            right: index === length - 1
+          }),
+          "data-element-left": index === 0,
+          "data-element-right": index === length - 1,
+          "data-value": element.value,
+          style: assignInlineVars({
+            [leftOption]: `${left}%`
+          }),
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              sentiment: isSelected ? "primary" : "neutral",
+              variant: isSelected ? "captionStrong" : "caption",
+              children: formatedElement
+            }
+          )
+        },
+        element.value
+      );
+    })
+  }
+);
 export {
   Options
 };

package/dist/components/Slider/components/SingleSlider.d.ts

@@ -1,2 +1,2 @@
 import type { SingleSliderProps } from '../types';
-export declare const SingleSlider: ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min, max, step, id, onBlur, unit, options, onFocus, className, label, input, prefix, suffix, required, "aria-label": ariaLabel, tooltipPosition, }: SingleSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SingleSlider: ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min, max, step, id, onBlur, unit, options, onFocus, className, label, input, prefix, suffix, required, "aria-label": ariaLabel, tooltipPosition, }: SingleSliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/components/SingleSlider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useId, useState, useRef, useEffect, useMemo, useCallback } from "react";
@@ -60,21 +60,24 @@ const SingleSlider = ({
     }
     return [];
   }, [options]);
-  const internalOnChange = useCallback((newValue) => {
-    if (!newValue) {
-      setSelectedIndex(min);
-      onChange?.(min);
-    } else if (newValue < min) {
-      setSelectedIndex(min);
-      onChange?.(min);
-    } else if (newValue > max) {
-      setSelectedIndex(max);
-      onChange?.(max);
-    } else {
-      setSelectedIndex(newValue);
-      onChange?.(newValue);
-    }
-  }, [max, min, onChange]);
+  const internalOnChange = useCallback(
+    (newValue) => {
+      if (!newValue) {
+        setSelectedIndex(min);
+        onChange?.(min);
+      } else if (newValue < min) {
+        setSelectedIndex(min);
+        onChange?.(min);
+      } else if (newValue > max) {
+        setSelectedIndex(max);
+        onChange?.(max);
+      } else {
+        setSelectedIndex(newValue);
+        onChange?.(newValue);
+      }
+    },
+    [max, min, onChange]
+  );
   useEffect(() => {
     if (value < min) {
       internalOnChange(min);
@@ -93,20 +96,54 @@ const SingleSlider = ({
       window.removeEventListener("resize", setWidthResize);
     };
   }, []);
-  const leftPosition = useMemo(() => (selectedIndex - min) * 100 / (max - min), [selectedIndex, max, min]);
-  const getBackgroundSize = useMemo(() => ({
-    backgroundSize: `${leftPosition}% 100%`
-  }), [leftPosition]);
-  const styledValue = (valueNumber) => input && !options ? /* @__PURE__ */ jsx(NumberInput, { "aria-label": "input", className: sliderNumberInput, controls: false, "data-testid": dataTestId ? `${dataTestId}-input` : "slider-input", disabled, max, min, onBlur: (event) => {
-    internalOnChange(Number.parseFloat(event.target.value));
-  }, onChange: setInputValue, size: "small", step, unit: typeof suffix === "string" ? suffix : unit, value: inputValue }) : /* @__PURE__ */ jsxs(Text, { as: "span", className: sliderDoubleText({
-    isDouble: direction !== "column",
-    isPadded: direction === "column"
-  }), "data-testid": dataTestId ? `${dataTestId}-value` : "slider-value", placement: direction === "column" ? "right" : "center", sentiment: "neutral", variant: "bodySmall", children: [
-    prefix,
-    valueNumber,
-    suffix ?? unit
-  ] });
+  const leftPosition = useMemo(
+    () => (selectedIndex - min) * 100 / (max - min),
+    [selectedIndex, max, min]
+  );
+  const getBackgroundSize = useMemo(
+    () => ({
+      backgroundSize: `${leftPosition}% 100%`
+    }),
+    [leftPosition]
+  );
+  const styledValue = (valueNumber) => input && !options ? /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      "aria-label": "input",
+      className: sliderNumberInput,
+      controls: false,
+      "data-testid": dataTestId ? `${dataTestId}-input` : "slider-input",
+      disabled,
+      max,
+      min,
+      onBlur: (event) => {
+        internalOnChange(Number.parseFloat(event.target.value));
+      },
+      onChange: setInputValue,
+      size: "small",
+      step,
+      unit: typeof suffix === "string" ? suffix : unit,
+      value: inputValue
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Text,
+    {
+      as: "span",
+      className: sliderDoubleText({
+        isDouble: direction !== "column",
+        isPadded: direction === "column"
+      }),
+      "data-testid": dataTestId ? `${dataTestId}-value` : "slider-value",
+      placement: direction === "column" ? "right" : "center",
+      sentiment: "neutral",
+      variant: "bodySmall",
+      children: [
+        prefix,
+        valueNumber,
+        suffix ?? unit
+      ]
+    }
+  );
   const tooltipText = useMemo(() => {
     if (tooltip === true) {
       return selectedIndex;
@@ -119,31 +156,74 @@ const SingleSlider = ({
   const placementTooltip = (selectedIndex - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2 - sliderWidth / 2;
   const valueToShow = options ? options[selectedIndex]?.value : selectedIndex;
   return /* @__PURE__ */ jsxs(Stack, { direction, gap: 1, justifyContent: "left", children: [
-    label ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: finalId, required, children: label }),
-      direction === "column" ? styledValue(valueToShow) : null
-    ] }) : null,
+    label ? /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "center",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: finalId, required, children: label }),
+          direction === "column" ? styledValue(valueToShow) : null
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "end", children: direction === "column" && !label ? styledValue(valueToShow) : null }),
     /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, justifyContent: "center", width: "100%", children: [
-      /* @__PURE__ */ jsx(Tooltip, { className: sliderTooltip, placement: tooltipPosition, style: assignInlineVars({
-        [tooltipLeft]: `${placementTooltip}px`
-      }), text: tooltipText, children: /* @__PURE__ */ jsx("input", { "aria-disabled": disabled, "aria-label": ariaLabel ?? name, className: `${className ? `${className} ` : ""}${sliderSingle({
-        direction,
-        disabled,
-        error: !!error
-      })} ${sliderThumbStyle({
-        disabled,
-        isDouble: false
-      })}`, "data-direction": direction, "data-error": !!error, "data-testid": dataTestId, disabled: !!disabled, id: finalId, max, min, name, onBlur, onChange: (event) => {
-        internalOnChange(Number.parseFloat(event.target.value));
-      }, onFocus, ref: refSlider, step, style: {
-        ...assignInlineVars({
-          [leftVar]: `calc(${leftPosition}% - ${THUMB_SIZE / 2}px)`,
-          [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-        }),
-        ...getBackgroundSize
-      }, tabIndex: 0, type: "range", value: selectedIndex }) }),
-      options ? /* @__PURE__ */ jsx(Options, { max, min, step, ticks, value: selectedIndex }) : null
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          className: sliderTooltip,
+          placement: tooltipPosition,
+          style: assignInlineVars({
+            [tooltipLeft]: `${placementTooltip}px`
+          }),
+          text: tooltipText,
+          children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-disabled": disabled,
+              "aria-label": ariaLabel ?? name,
+              className: `${className ? `${className} ` : ""}${sliderSingle({ direction, disabled, error: !!error })} ${sliderThumbStyle({ disabled, isDouble: false })}`,
+              "data-direction": direction,
+              "data-error": !!error,
+              "data-testid": dataTestId,
+              disabled: !!disabled,
+              id: finalId,
+              max,
+              min,
+              name,
+              onBlur,
+              onChange: (event) => {
+                internalOnChange(Number.parseFloat(event.target.value));
+              },
+              onFocus,
+              ref: refSlider,
+              step,
+              style: {
+                ...assignInlineVars({
+                  [leftVar]: `calc(${leftPosition}% - ${THUMB_SIZE / 2}px)`,
+                  [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+                }),
+                ...getBackgroundSize
+              },
+              tabIndex: 0,
+              type: "range",
+              value: selectedIndex
+            }
+          )
+        }
+      ),
+      options ? /* @__PURE__ */ jsx(
+        Options,
+        {
+          max,
+          min,
+          step,
+          ticks,
+          value: selectedIndex
+        }
+      ) : null
     ] }),
     direction === "row" ? styledValue(valueToShow) : null
   ] });

package/dist/components/Slider/index.d.ts

@@ -4,4 +4,4 @@ import type { SliderProps } from './types';
  * - For a simple slider (one handle) : prop `value` must be number.
  * - For a double slider (two handles):  prop `value` must be an array of numbers (of length 2) and prop `double` must be set to `true`. **Make sure that others props have the correct type.**
  */
-export declare const Slider: ({ name, label, helper, tooltip, direction, input, prefix, unit, suffix, required, disabled, error, options, "data-testid": dataTestId, value, onChange, min, double, max, step, id, onBlur, onFocus, className, tooltipPosition, style, "aria-label": ariaLabel, }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ name, label, helper, tooltip, direction, input, prefix, unit, suffix, required, disabled, error, options, "data-testid": dataTestId, value, onChange, min, double, max, step, id, onBlur, onFocus, className, tooltipPosition, style, "aria-label": ariaLabel, }: SliderProps) => import("react/jsx-runtime").JSX.Element;