@ultraviolet/ui 3.4.0 → 3.5.1

package/dist/components/SelectableCard/styles.css.js

@@ -1,8 +1,9 @@
-/* empty css                                 */
 /* empty css                                    */
+/* empty css                                 */
+/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var containerSelectableCard = createRuntimeFn({ defaultClassName: "uv_475tnd0", variantClassNames: { image: { none: "uv_475tnd1", icon: "uv_475tnd2", illustration: "uv_475tnd3" }, cursor: { "default": "uv_475tnd4", custom: "uv_475tnd5" } }, defaultVariants: { image: "none", cursor: "custom" }, compoundVariants: [] });
+var containerSelectableCard = createRuntimeFn({ defaultClassName: "uv_475tnd0", variantClassNames: { cursor: { custom: "uv_475tnd1", "default": "uv_475tnd2" }, image: { icon: "uv_475tnd3", illustration: "uv_475tnd4", none: "uv_475tnd5" } }, defaultVariants: { cursor: "custom", image: "none" }, compoundVariants: [] });
 var labelContainerSelectableCard = { label: "uv_475tnd6", noLabel: "uv_475tnd7" };
 var divSelectableCard = "uv_475tnd8";
 var imageSelectableCard = "uv_475tnd9";

package/dist/components/SelectableCard/variables.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 var inputDisplay = "var(--uv_18vc4d30)";
 var labelDisplay = "var(--uv_18vc4d31)";
 var widthSelectable = "var(--uv_18vc4d32)";

package/dist/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,iBAAiB,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,6FAQvB,cAAc,4CAiCd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,iBAAiB,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,6FAQvB,cAAc,4CAkCd,CAAA"}

package/dist/components/Separator/index.js

@@ -11,43 +11,45 @@ const Separator = ({
   "data-testid": dataTestId,
   children,
   style
-}) => children ? /* @__PURE__ */ jsxs(
-  "div",
-  {
-    "aria-orientation": direction,
-    className: cn(className, iconWraperSeparator({ direction, sentiment })),
-    "data-testid": dataTestId,
-    role: "separator",
-    style,
-    children: [
-      /* @__PURE__ */ jsx(
-        "hr",
-        {
-          className: hr({ direction, hasIcon: true, sentiment }),
-          style: assignInlineVars({
-            [thicknessSeparator]: `${thickness}px`
-          })
-        }
-      ),
-      children,
-      /* @__PURE__ */ jsx(
-        "hr",
-        {
-          className: hr({ direction, hasIcon: true, sentiment }),
-          style: assignInlineVars({
-            [thicknessSeparator]: `${thickness}px`
-          })
-        }
-      )
-    ]
-  }
+}) => children ? (
+  // biome-ignore  lint/a11y/useFocusableInteractive: to fix
+  /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-orientation": direction,
+      className: cn(className, iconWraperSeparator({ direction, sentiment })),
+      "data-testid": dataTestId,
+      role: "separator",
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "hr",
+          {
+            className: hr({ direction, hasIcon: true, sentiment }),
+            style: assignInlineVars({
+              [thicknessSeparator]: `${thickness}px`
+            })
+          }
+        ),
+        children,
+        /* @__PURE__ */ jsx(
+          "hr",
+          {
+            className: hr({ direction, hasIcon: true, sentiment }),
+            style: assignInlineVars({
+              [thicknessSeparator]: `${thickness}px`
+            })
+          }
+        )
+      ]
+    }
+  )
 ) : /* @__PURE__ */ jsx(
   "hr",
   {
     "aria-orientation": direction,
     className: cn(className, hr({ direction, sentiment })),
     "data-testid": dataTestId,
-    role: "separator",
     style: assignInlineVars({
       [thicknessSeparator]: `${thickness}px`
     })

package/dist/components/Skeleton/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Block.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAWxD,CAAA"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Block.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAYxD,CAAA"}

package/dist/components/Skeleton/Block.js

@@ -4,10 +4,13 @@ import { Fragment } from "react";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
 import { blockSkeletonList, blockSkeletonLine } from "./stylesVariants.css.js";
-const Block = ({ length = 3 }) => /* @__PURE__ */ jsx("ul", { className: blockSkeletonList, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: blockSkeletonLine, children: [
-  /* @__PURE__ */ jsx(IconSkeleton, {}),
-  /* @__PURE__ */ jsx(Line, {})
-] }) }, `skeleton-block-${i}`)) });
+const Block = ({ length = 3 }) => /* @__PURE__ */ jsx("ul", { className: blockSkeletonList, children: Array.from({ length }, (_, i) => (
+  // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+  /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: blockSkeletonLine, children: [
+    /* @__PURE__ */ jsx(IconSkeleton, {}),
+    /* @__PURE__ */ jsx(Line, {})
+  ] }) }, `skeleton-block-${i}`)
+)) });
 export {
   Block
 };

package/dist/components/Skeleton/Blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Blocks.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Blocks.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM,GAAI,kBAGpB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAcA,CAAA"}
+{"version":3,"file":"Blocks.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Blocks.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM,GAAI,kBAGpB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAeA,CAAA"}

package/dist/components/Skeleton/Blocks.js

@@ -14,10 +14,13 @@ const Blocks = ({
     style: assignInlineVars({
       [columns]: col.toString()
     }),
-    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
-      /* @__PURE__ */ jsx(IconSkeleton, {}),
-      /* @__PURE__ */ jsx(Line, {})
-    ] }, `skeleton-blocks-${i}`))
+    children: Array.from({ length }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+      /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
+        /* @__PURE__ */ jsx(IconSkeleton, {}),
+        /* @__PURE__ */ jsx(Line, {})
+      ] }, `skeleton-blocks-${i}`)
+    ))
   }
 );
 export {

package/dist/components/Skeleton/BoxWithIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxWithIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/BoxWithIcon.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,WAAW,GAAI,kBAGzB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAcA,CAAA"}
+{"version":3,"file":"BoxWithIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/BoxWithIcon.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,WAAW,GAAI,kBAGzB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAeA,CAAA"}

package/dist/components/Skeleton/BoxWithIcon.js

@@ -14,10 +14,13 @@ const BoxWithIcon = ({
     style: assignInlineVars({
       [columns]: col.toString()
     }),
-    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
-      /* @__PURE__ */ jsx(IconSkeleton, {}),
-      /* @__PURE__ */ jsx(Line, {})
-    ] }, `skeleton-box-${i}`))
+    children: Array.from({ length }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+      /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
+        /* @__PURE__ */ jsx(IconSkeleton, {}),
+        /* @__PURE__ */ jsx(Line, {})
+      ] }, `skeleton-box-${i}`)
+    ))
   }
 );
 export {

package/dist/components/Skeleton/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/List.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,IAAI,GAAI,kBAGlB;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,4CAMA,CAAA"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/List.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,IAAI,GAAI,kBAGlB;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,4CAOA,CAAA"}

package/dist/components/Skeleton/List.js

@@ -2,11 +2,17 @@
 import { jsx } from "react/jsx-runtime";
 import { Line } from "./Line.js";
 import { listSkeletonUl, listSkeletonLi, listSkeletonDiv } from "./stylesVariants.css.js";
-const Item = ({ col = 3 }) => /* @__PURE__ */ jsx("li", { className: listSkeletonLi, children: Array.from({ length: col }, (_, i) => /* @__PURE__ */ jsx("div", { className: listSkeletonDiv, children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
+const Item = ({ col = 3 }) => /* @__PURE__ */ jsx("li", { className: listSkeletonLi, children: Array.from({ length: col }, (_, i) => (
+  // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+  /* @__PURE__ */ jsx("div", { className: listSkeletonDiv, children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)
+)) });
 const List = ({
   length = 3,
   col = 3
-}) => /* @__PURE__ */ jsx("ul", { className: listSkeletonUl, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)) });
+}) => /* @__PURE__ */ jsx("ul", { className: listSkeletonUl, children: Array.from({ length }, (_, i) => (
+  // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+  /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)
+)) });
 export {
   List
 };

package/dist/components/Skeleton/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Slider.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAazD,CAAA"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Slider.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAczD,CAAA"}

package/dist/components/Skeleton/Slider.js

@@ -9,7 +9,10 @@ const Slider = ({ length = 4 }) => /* @__PURE__ */ jsx(
     style: assignInlineVars({
       [sliderLength]: length.toString()
     }),
-    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonCard, children: /* @__PURE__ */ jsx("div", { className: sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`))
+    children: Array.from({ length }, (_, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: to fix
+      /* @__PURE__ */ jsx("div", { className: sliderSkeletonCard, children: /* @__PURE__ */ jsx("div", { className: sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`)
+    ))
   }
 );
 export {

package/dist/components/Skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,QAAA,MAAM,QAAQ;;cANP,CAAC;;;WACc,CAAC;cACb,CAAC;;;WAAF,CAAC;cAAiB,CAAC;;;;;cAIhB,CAAC;WACJ,CAAA;;;cAPE,CAAC;;;CAeF,CAAA;AAEV,KAAK,eAAe,GAAG,MAAM,OAAO,QAAQ,CAAA;AAE5C,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,4CAiBf,CAAA;AAGD,eAAO,MAAM,aAAa,EAA4B,eAAe,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,QAAA,MAAM,QAAQ;;cANP,CAAC;;;WACc,CAAC;cACb,CAAC;;;WAAF,CAAC;cAAiB,CAAC;;;;;cAQ1B,CAAA;WACA,CAAD;;;cAXU,CAAC;;;CAeF,CAAA;AAEV,KAAK,eAAe,GAAG,MAAM,OAAO,QAAQ,CAAA;AAE5C,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,4CAkBf,CAAA;AAGD,eAAO,MAAM,aAAa,EAA4B,eAAe,EAAE,CAAA"}

package/dist/components/Skeleton/index.js

@@ -30,20 +30,23 @@ const Skeleton = ({
   style
 }) => {
   const Component = variants[variant];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "aria-busy": true,
-      "aria-label": ariaLabel,
-      "aria-live": "polite",
-      className: cn(className, skeletonContainer),
-      "data-testid": dataTestId,
-      style,
-      children: [
-        /* @__PURE__ */ jsx(Component, { col, length }),
-        /* @__PURE__ */ jsx("div", { className: skeletonHighlight })
-      ]
-    }
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: to fix
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-busy": true,
+        "aria-label": ariaLabel,
+        "aria-live": "polite",
+        className: cn(className, skeletonContainer),
+        "data-testid": dataTestId,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(Component, { col, length }),
+          /* @__PURE__ */ jsx("div", { className: skeletonHighlight })
+        ]
+      }
+    )
   );
 };
 export {

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

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

package/dist/components/Slider/components/DoubleSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/DoubleSlider.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGjD,eAAO,MAAM,YAAY,GAAI,+PA0B1B,iBAAiB,4CAmXnB,CAAA"}
+{"version":3,"file":"DoubleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/DoubleSlider.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGjD,eAAO,MAAM,YAAY,GAAI,mRA2B1B,iBAAiB,4CAoXnB,CAAA"}

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

@@ -37,7 +37,8 @@ const DoubleSlider = ({
   required,
   tooltipPosition,
   "aria-label": ariaLabel,
-  labelDescription
+  labelDescription,
+  customValueDisplay
 }) => {
   const theme = useTheme();
   const localId = useId();
@@ -124,7 +125,14 @@ const DoubleSlider = ({
       max,
       min,
       onBlur: (event) => {
-        if (!event.target.value) {
+        if (event.target.value) {
+          const newValue = Number.parseFloat(event.target.value);
+          if (side === "left") {
+            internalOnChangeRef([newValue, selectedIndexes[1]]);
+          } else if (side === "right") {
+            internalOnChangeRef([selectedIndexes[0], newValue]);
+          }
+        } else {
           if (side === "left") {
             const index = activeValue("left");
             if (index === 0) {
@@ -141,13 +149,6 @@ const DoubleSlider = ({
               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) => {
@@ -209,15 +210,18 @@ const DoubleSlider = ({
     });
   }, [min, max, value]);
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, justifyContent: "left", children: [
-    label ? /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsx(
-      Label,
-      {
-        htmlFor: finalId,
-        labelDescription,
-        required,
-        children: label
-      }
-    ) }) : null,
+    label ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          htmlFor: finalId,
+          labelDescription,
+          required,
+          children: label
+        }
+      ),
+      customValueDisplay
+    ] }) : null,
     /* @__PURE__ */ jsxs(Stack, { direction, gap: 1, width: "100%", children: [
       direction === "column" ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
         styledValue(leftToShow, "left"),
@@ -286,7 +290,7 @@ const DoubleSlider = ({
                       ref: refSlider,
                       step,
                       style: assignInlineVars({
-                        [leftVar]: `calc(${(selectedIndexes[0] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
+                        [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",
@@ -333,7 +337,7 @@ const DoubleSlider = ({
                       onFocus,
                       step,
                       style: assignInlineVars({
-                        [leftVar]: `calc(${((selectedIndexes[1] ?? 0) - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
+                        [leftVar]: `calc(${((selectedIndexes[1] ?? 0) - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px)`,
                         [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
                       }),
                       type: "range",

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

@@ -1,3 +1,3 @@
 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, labelDescription, "aria-label": ariaLabel, tooltipPosition, }: SingleSliderProps) => import("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, labelDescription, customValueDisplay, "aria-label": ariaLabel, tooltipPosition, }: SingleSliderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SingleSlider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAKjD,eAAO,MAAM,YAAY,GAAI,+PA0B1B,iBAAiB,4CA8NnB,CAAA"}
+{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAKjD,eAAO,MAAM,YAAY,GAAI,mRA2B1B,iBAAiB,4CA6OnB,CAAA"}

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

@@ -36,6 +36,7 @@ const SingleSlider = ({
   suffix,
   required,
   labelDescription,
+  customValueDisplay,
   "aria-label": ariaLabel,
   tooltipPosition
 }) => {
@@ -174,11 +175,15 @@ const SingleSlider = ({
               children: label
             }
           ),
-          direction === "column" ? styledValue(valueToShow) : null
+          direction === "column" && (input || !customValueDisplay) ? styledValue(valueToShow) : null,
+          direction === "column" && customValueDisplay && !input ? customValueDisplay : null
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "end", children: direction === "column" && !label ? styledValue(valueToShow) : null }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", children: [
+      direction === "column" && !label && (input || !customValueDisplay) ? styledValue(valueToShow) : null,
+      direction === "column" && !label && customValueDisplay && !input ? customValueDisplay : null
+    ] }),
     /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, justifyContent: "center", width: "100%", children: [
       /* @__PURE__ */ jsx(
         Tooltip,
@@ -239,7 +244,8 @@ const SingleSlider = ({
         }
       ) : null
     ] }),
-    direction === "row" ? styledValue(valueToShow) : null
+    direction === "row" && (input || !customValueDisplay) ? styledValue(valueToShow) : null,
+    direction === "row" && customValueDisplay && !input ? customValueDisplay : null
   ] });
 };
 export {

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

@@ -4,5 +4,5 @@ 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, labelDescription, "aria-label": ariaLabel, }: SliderProps) => import("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, customValueDisplay, labelDescription, "aria-label": ariaLabel, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,sRA6BpB,WAAW,4CA8Fb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,0SA8BpB,WAAW,4CAgGb,CAAA"}

package/dist/components/Slider/index.js

@@ -33,6 +33,7 @@ const Slider = ({
   className,
   tooltipPosition = "top",
   style,
+  customValueDisplay,
   labelDescription,
   "aria-label": ariaLabel
 }) => {
@@ -61,6 +62,7 @@ const Slider = ({
           {
             "aria-label": ariaLabel,
             className,
+            customValueDisplay,
             "data-testid": dataTestId,
             direction,
             disabled,
@@ -90,6 +92,7 @@ const Slider = ({
           {
             "aria-label": ariaLabel,
             className,
+            customValueDisplay,
             "data-testid": dataTestId,
             direction,
             disabled,

package/dist/components/Slider/styles.css.d.ts

@@ -25,23 +25,23 @@ export declare const sliderOption: import("@vanilla-extract/recipes").RuntimeFn<
 }>;
 export declare const sliderThumbStyle: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {
-        true: {
+        false: {
             selectors: {
                 '&::-moz-range-thumb': {
-                    cursor: "not-allowed";
-                };
-                '&::-webkit-slider-thumb': {
-                    cursor: "not-allowed";
+                    cursor: "grab";
                 };
-            };
-        };
-        false: {
-            selectors: {
                 '&::-webkit-slider-thumb': {
                     cursor: "grab";
                 };
-                '&::-moz-range-thumb': {
-                    cursor: "grab";
+                '&:active::-moz-range-thumb': {
+                    border: `1.5px solid var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                    cursor: "grabbing";
+                };
+                '&:active::-webkit-slider-thumb': {
+                    border: `1.5px solid var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                    cursor: "grabbing";
                 };
                 '&:hover::-moz-range-thumb': {
                     border: `1.5px solid var(--${string})`;
@@ -49,27 +49,29 @@ export declare const sliderThumbStyle: import("@vanilla-extract/recipes").Runtim
                 '&:hover::-webkit-slider-thumb': {
                     border: `1.5px solid var(--${string})`;
                 };
-                '&:active::-moz-range-thumb': {
-                    cursor: "grabbing";
-                    boxShadow: `var(--${string})`;
-                    border: `1.5px solid var(--${string})`;
+            };
+        };
+        true: {
+            selectors: {
+                '&::-moz-range-thumb': {
+                    cursor: "not-allowed";
                 };
-                '&:active::-webkit-slider-thumb': {
-                    cursor: "grabbing";
-                    boxShadow: `var(--${string})`;
-                    border: `1.5px solid var(--${string})`;
+                '&::-webkit-slider-thumb': {
+                    cursor: "not-allowed";
                 };
             };
         };
     };
-    isDouble: {
-        true: {
+    hasTooltipDouble: {
+        false: {
             selectors: {
                 '&::-webkit-slider-thumb': {
-                    top: "2px";
+                    top: "-8px";
                 };
             };
         };
+    };
+    isDouble: {
         false: {
             selectors: {
                 '&::-moz-range-thumb': {
@@ -80,35 +82,32 @@ export declare const sliderThumbStyle: import("@vanilla-extract/recipes").Runtim
                 };
             };
         };
-    };
-    hasTooltipDouble: {
-        false: {
+        true: {
             selectors: {
                 '&::-webkit-slider-thumb': {
-                    top: "-8px";
+                    top: "2px";
                 };
             };
         };
     };
 }>;
 export declare const sliderDoubleText: import("@vanilla-extract/recipes").RuntimeFn<{
-    isPadded: {
-        true: {
-            minWidth: `var(--${string})`;
-        };
-    };
     isDouble: {
+        false: {
+            alignSelf: "end";
+        };
         true: {
             alignSelf: "center";
         };
-        false: {
-            alignSelf: "end";
+    };
+    isPadded: {
+        true: {
+            minWidth: `var(--${string})`;
         };
     };
 }>;
 export declare const sliderDouble: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {
-        true: {};
         false: {
             selectors: {
                 '&:focus::-moz-slider-thumb, &:focus::-webkit-slider-thumb': {
@@ -117,14 +116,25 @@ export declare const sliderDouble: import("@vanilla-extract/recipes").RuntimeFn<
                 };
             };
         };
+        true: {};
     };
     hasTooltip: {
         true: {
-            transform: "translate(0, -10px)";
+            selectors: {
+                '&::-moz-range-thumb': {
+                    transform: "translate(0, -10px)";
+                };
+            };
         };
     };
 }>;
 export declare const sliderSingle: import("@vanilla-extract/recipes").RuntimeFn<{
+    direction: {
+        column: {
+            alignSelf: "baseline";
+        };
+        row: {};
+    };
     disabled: {
         false: {
             selectors: {
@@ -147,22 +157,16 @@ export declare const sliderSingle: import("@vanilla-extract/recipes").RuntimeFn<
             backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
         };
     };
-    direction: {
-        column: {
-            alignSelf: "baseline";
-        };
-        row: {};
-    };
 }>;
 export declare const sliderDoubleWrapper: string;
 export declare const sliderCustomRail: string;
 export declare const sliderInnerRail: import("@vanilla-extract/recipes").RuntimeFn<{
-    error: {
+    disabled: {
         true: {
             backgroundColor: `var(--${string})`;
         };
     };
-    disabled: {
+    error: {
         true: {
             backgroundColor: `var(--${string})`;
         };

package/dist/components/Slider/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,oBAAc,CAAA;AACtC,eAAO,MAAM,UAAU,oBAAc,CAAA;AACrC,eAAO,MAAM,OAAO,oBAAc,CAAA;AAClC,eAAO,MAAM,UAAU,oBAAc,CAAA;AAErC,eAAO,MAAM,eAAe,QAA0C,CAAA;AAEtE,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,cAAc;;;;;;EAczB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;EAgBvB,CAAA;AAgBF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0E3B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;EAgB3B,CAAA;AAUF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EA8CvB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDvB,CAAA;AACF,eAAO,MAAM,mBAAmB,QAO9B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAS3B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;EAuB1B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAAsC,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,oBAAc,CAAA;AACtC,eAAO,MAAM,UAAU,oBAAc,CAAA;AACrC,eAAO,MAAM,OAAO,oBAAc,CAAA;AAClC,eAAO,MAAM,UAAU,oBAAc,CAAA;AAErC,eAAO,MAAM,eAAe,QAA0C,CAAA;AAEtE,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,cAAc;;;;;;EAczB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;EAgBvB,CAAA;AAgBF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0E3B,CAAA;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;EAgB3B,CAAA;AAUF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDvB,CAAA;AACF,eAAO,MAAM,mBAAmB,QAO9B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAS3B,CAAA;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;EAuB1B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAAsC,CAAA"}