@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/slider/slider.js

@@ -1,79 +1,110 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Slider as BaseSlider } from '../baseui/slider';
-import Mark from './mark';
-import { getInnerTrackStyles, getThumbStyles, getInnerThumbStyles, getThumbValueStyles } from './styled-components';
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Range } from 'react-range';
+import { isFocusVisible as focusVisible, forkFocus, forkBlur } from '../baseui/utils/focusVisible';
+import { StyledRoot, StyledTrack, StyledInnerTrack, StyledThumb, StyledInnerThumb, StyledThumbValue, secondaryIntentColor as getThumbBoxShadow, addOpacity, } from './styled-components';
+import { useOverrides } from '../overrides';
+import { useCallback, useState } from 'react';
+import { useStyle } from '../style';
 import { useHasMounted } from '../hooks/useHasMounted';
-import { mergeOverrides } from '../overrides';
-// @ts-ignore
-BaseSlider.displayName = 'BaseSlider';
+import { useDocument } from '../spacewebProvider/DocumentProvider';
+import Mark from './mark';
+import _noop from 'lodash/noop';
+import { intentColor } from '../helpers/intentHelper';
+var limitValue = function (value) {
+    if (value.length === 0) {
+        throw new Error('the value prop represents positions of thumbs, so its length should be greater than 0');
+    }
+    return value;
+};
 var defaultMarkLabel = function (_a) {
     var $markIndex = _a.$markIndex, $min = _a.$min, $step = _a.$step;
     return "".concat(($min || 0) + $markIndex * $step);
 };
 var Slider = function (_a) {
-    var overrides = _a.overrides, markLabel = _a.markLabel, _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.getMarkLabel, getMarkLabel = _c === void 0 ? defaultMarkLabel : _c, className = _a.className, style = _a.style, restProps = __rest(_a, ["overrides", "markLabel", "intent", "getMarkLabel", "className", "style"]);
-    // Thumb component not getting correct position on server side also to resolve the hydration error
-    // useHasMounted Hook has been used to so that it triggers renders which allows thumb to get the correct position
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.marks, marks = _d === void 0 ? false : _d, _e = _a.onChange, onChange = _e === void 0 ? _noop : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? _noop : _f, _g = _a.min, propMin = _g === void 0 ? 0 : _g, _h = _a.max, propMax = _h === void 0 ? 100 : _h, _j = _a.step, step = _j === void 0 ? 1 : _j, _k = _a.persistentThumb, persistentThumb = _k === void 0 ? false : _k, _l = _a.valueToLabel, valueToLabel = _l === void 0 ? function (label) { return label; } : _l, propProvidedValue = _a.value, _m = _a.intent, intent = _m === void 0 ? 'default' : _m, className = _a.className, style = _a.style, _o = _a.getMarkLabel, getMarkLabel = _o === void 0 ? defaultMarkLabel : _o, markLabel = _a.markLabel, primaryIntentColor = _a.primaryIntentColor, secondaryIntentColor = _a.secondaryIntentColor, trackColors = _a.trackColors, thumbColors = _a.thumbColors;
+    var _p = __read(useState(-1), 2), hoveredThumbIndex = _p[0], setHoveredThumbIndex = _p[1];
     var hasMounted = useHasMounted();
-    var mergedOverrides = useMemo(function () { return mergeOverrides({
-        Root: {
-            style: ['p-4', className, style],
-            props: {
-                $intent: intent,
-                'data-spaceweb': 'slider',
-            },
-        },
-        Track: {
-            style: 'p-0',
-        },
-        InnerTrack: {
-            style: getInnerTrackStyles,
-            props: {
-                $intent: intent,
-                'data-testid': 'slider-track',
-            },
-        },
-        Mark: {
-            component: Mark,
-            props: {
-                $intent: intent,
-                'data-testid': 'slider-mark',
-                getMarkLabel: getMarkLabel,
-                markLabel: markLabel,
-                overrides: {
-                    MarkLabel: overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel,
+    var _q = __read(useState(false), 2), isFocusVisible = _q[0], setIsFocusVisible = _q[1];
+    var _r = __read(useState(-1), 2), focusedThumbIndex = _r[0], setFocusedThumbIndex = _r[1];
+    var styleUtils = useStyle();
+    var isRTL = styleUtils.isRTL, theme = styleUtils.theme;
+    var ownerDocument = useDocument();
+    //check if more than 2 thumbs are rendered , trackColors and thumbColors array have been provided with correct length
+    if (propProvidedValue.length > 2 &&
+        ((trackColors === null || trackColors === void 0 ? void 0 : trackColors.length) !== propProvidedValue.length + 1 || (thumbColors === null || thumbColors === void 0 ? void 0 : thumbColors.length) !== propProvidedValue.length)) {
+        throw new Error('for value array length greater than 2 , please provide trackColors array having length = value.length + 1 and thumbColors array having length = value.length');
+    }
+    var handleFocus = useCallback(function (event) {
+        var _a;
+        if (focusVisible(event)) {
+            setIsFocusVisible(true);
+        }
+        var index = +((_a = event.target.getAttribute('data-thumbIndex')) !== null && _a !== void 0 ? _a : -1);
+        setFocusedThumbIndex(index);
+    }, []);
+    var handleBlur = useCallback(function (_event) {
+        if (isFocusVisible) {
+            setIsFocusVisible(false);
+        }
+        setFocusedThumbIndex(-1);
+    }, [isFocusVisible]);
+    var min = Math.min(propMin, propMax);
+    var max = Math.max(min, propMax);
+    var providedValue = propProvidedValue.map(function (item) { return Math.min(max, Math.max(min, item)); });
+    if (min === max) {
+        max += step / 100; // if min and max are equal then react-range library will throw error , to prevent it , we add a step/100 value in max
+    }
+    var value = limitValue(providedValue);
+    var sharedProps = {
+        $disabled: disabled,
+        $step: step,
+        $min: min,
+        $max: max,
+        $marks: marks,
+        $value: value,
+        $isFocusVisible: isFocusVisible,
+        $intent: intent,
+        $primaryIntentColor: primaryIntentColor,
+        $secondaryIntentColor: secondaryIntentColor,
+        $trackColors: trackColors,
+        $thumbColors: thumbColors,
+    };
+    var _s = __read(useOverrides(overrides.Root, StyledRoot), 2), Root = _s[0], rootProps = _s[1];
+    var _t = __read(useOverrides(overrides.Track, StyledTrack), 2), Track = _t[0], trackProps = _t[1];
+    var _u = __read(useOverrides(overrides.InnerTrack, StyledInnerTrack), 2), InnerTrack = _u[0], innerTrackProps = _u[1];
+    var _v = __read(useOverrides(overrides.Thumb, StyledThumb), 2), Thumb = _v[0], thumbProps = _v[1];
+    var _w = __read(useOverrides(overrides.InnerThumb, StyledInnerThumb), 2), InnerThumb = _w[0], innerThumbProps = _w[1];
+    var _x = __read(useOverrides(overrides.ThumbValue, StyledThumbValue), 2), ThumbValue = _x[0], thumbValueProps = _x[1];
+    var _y = __read(useOverrides(overrides.Mark, Mark), 2), MarkOverriden = _y[0], markProps = _y[1];
+    return (_jsx(Root, __assign({ "data-spaceweb": "slider" }, sharedProps, rootProps, { onFocus: forkFocus(rootProps, handleFocus), onBlur: forkBlur(rootProps, handleBlur), style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: hasMounted ? (_jsx(Range, __assign({ step: step, min: min, max: max, values: value, disabled: disabled, onChange: function (val) { return onChange({ value: val }); }, onFinalChange: function (val) { return onFinalChange({ value: val }); }, rtl: isRTL, renderTrack: function (_a) {
+                var props = _a.props, children = _a.children, isDragged = _a.isDragged;
+                return (_jsx(Track, __assign({ onMouseDown: props.onMouseDown, onTouchStart: props.onTouchStart, "$isDragged": isDragged }, sharedProps, trackProps, { children: _jsx(InnerTrack, __assign({ "data-testid": "slider-track", "$isDragged": isDragged, ref: props.ref }, sharedProps, innerTrackProps, { children: children })) })));
+            }, renderThumb: function (_a) {
+                var props = _a.props, index = _a.index, isDragged = _a.isDragged;
+                var displayLabel = persistentThumb || ((hoveredThumbIndex === index || isDragged) && !disabled);
+                // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
+                // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
+                // Thumb is made ClientOnly to avoid Hydration mismatch error
+                return (_jsxs(Thumb, __assign({}, props, { "data-thumbIndex": index, onMouseEnter: function () { return setHoveredThumbIndex(index); }, onMouseLeave: function () { return setHoveredThumbIndex(-1); }, "$thumbIndex": index, "$isDragged": isDragged, style: __assign(__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : intentColor(styleUtils, sharedProps), '--sw-bg-color-hover': value.length > 2
+                            ? addOpacity(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : intentColor(styleUtils, sharedProps, theme.spr.interactiveHover), '--sw-shadow': isFocusVisible && focusedThumbIndex === index
+                            ? "0 0 0 3px ".concat(theme.spr.focus01)
+                            : '0 1px 4px rgba(0, 0, 0, 0.12)', '--sw-shadow-hover': "0px 0px 0px 4px ".concat(value.length > 2
+                            ? addOpacity(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : getThumbBoxShadow({ theme: theme }, sharedProps, addOpacity(theme.spr.interactiveHover, '0.33'))), '--sw-shadow-focus': "0px 0px 0px 4px ".concat(value.length > 2
+                            ? addOpacity(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : getThumbBoxShadow({ theme: theme }, sharedProps, addOpacity(theme.spr.interactiveHover, '0.33'))) }, props.style), { zIndex: 'unset' }) }, sharedProps, thumbProps, { "$isFocusVisible": isFocusVisible && focusedThumbIndex === index }, { children: [displayLabel && (_jsx(ThumbValue, __assign({ "$thumbIndex": index, "$isDragged": isDragged }, sharedProps, thumbValueProps, { children: valueToLabel(value[index]) }))), displayLabel && (_jsx(InnerThumb, __assign({ "$thumbIndex": index, "$isDragged": isDragged }, sharedProps, innerThumbProps)))] })));
+            } }, (marks
+            ? {
+                renderMark: function (_a) {
+                    var props = _a.props, index = _a.index;
+                    return (_jsx(MarkOverriden, __assign({ markLabel: markLabel, getMarkLabel: getMarkLabel, "$markIndex": index, overrides: overrides }, props, sharedProps, markProps)));
                 },
-            },
-        },
-        Thumb: {
-            // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
-            // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
-            // Thumb is made ClientOnly to avoid Hydration mismatch error
-            component: hasMounted ? undefined : function () { return null; },
-            style: getThumbStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        InnerThumb: {
-            style: getInnerThumbStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        ThumbValue: {
-            style: getThumbValueStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        TickBar: {
-            component: function () { return null; },
-        },
-    }, overrides); }, [className, getMarkLabel, hasMounted, intent, markLabel, overrides, style]);
-    return _jsx(BaseSlider, __assign({ overrides: mergedOverrides }, restProps), void 0);
+            }
+            : {}), { 
+            // @ts-ignore -- need to pass ownerDocument to make it work in live chat
+            ownerDocument: ownerDocument }))) : (_jsx(Track, __assign({}, sharedProps, trackProps, { children: _jsx(InnerTrack, __assign({ "data-testid": "slider-track" }, sharedProps, innerTrackProps)) }))) })));
 };
-Slider.displayName = 'Slider';
+Slider.__standard = 'Component';
 export default Slider;

package/esm/slider/stateful-slider-container.d.ts

@@ -1,7 +1,4 @@
-import { ReactElement } from 'react';
-import { StatefulContainerProps } from './types';
-declare const StatefulContainer: {
-    ({ overrides, ...props }: StatefulContainerProps): ReactElement;
-    displayName: string;
-};
-export default StatefulContainer;
+/// <reference types="react" />
+import type { StatefulContainerProps } from './types';
+declare const StatefulSliderContainer: ({ children, initialState, stateReducer, max, min, step, onChange, onFinalChange, ...restProps }: StatefulContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default StatefulSliderContainer;

package/esm/slider/stateful-slider-container.js

@@ -1,11 +1,25 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StatefulContainer as BaseStatefulContainer } from '../baseui/slider';
-//@ts-ignore
-BaseStatefulContainer.displayName = 'BaseStatefulContainer';
-var StatefulContainer = function (_a) {
-    var overrides = _a.overrides, props = __rest(_a, ["overrides"]);
-    return (_jsx(BaseStatefulContainer, __assign({}, props, { overrides: overrides }), void 0));
+import { __assign, __read, __rest } from "tslib";
+import { useCallback, useState } from 'react';
+import { STATE_CHANGE_TYPE } from './constants';
+import _noop from 'lodash/noop';
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulSliderContainer = function (_a) {
+    var children = _a.children, initialState = _a.initialState, _b = _a.stateReducer, stateReducer = _b === void 0 ? defaultStateReducer : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.min, min = _d === void 0 ? 1 : _d, _e = _a.step, step = _e === void 0 ? 1 : _e, _f = _a.onChange, onChange = _f === void 0 ? _noop : _f, _g = _a.onFinalChange, onFinalChange = _g === void 0 ? _noop : _g, restProps = __rest(_a, ["children", "initialState", "stateReducer", "max", "min", "step", "onChange", "onFinalChange"]);
+    var _h = __read(useState(initialState && Array.isArray(initialState.value) ? initialState.value : [Math.round((max - min) / 2) + min]), 2), value = _h[0], setValue = _h[1];
+    var internalSetState = useCallback(function (type, _a) {
+        var value = _a.value;
+        var nextState = { value: value };
+        var newState = stateReducer(type, nextState, { value: value });
+        setValue(newState.value);
+    }, [stateReducer]);
+    var handleOnChange = useCallback(function (params) {
+        internalSetState(STATE_CHANGE_TYPE.change, params);
+        return onChange(__assign({}, params));
+    }, [onChange, internalSetState]);
+    var handleOnFinalChange = useCallback(function (params) {
+        internalSetState(STATE_CHANGE_TYPE.finalChange, params);
+        return onFinalChange(__assign({}, params));
+    }, [onFinalChange, internalSetState]);
+    return children(__assign(__assign({}, restProps), { value: value, onChange: handleOnChange, onFinalChange: handleOnFinalChange }));
 };
-StatefulContainer.displayName = 'StatefulContainer';
-export default StatefulContainer;
+export default StatefulSliderContainer;

package/esm/slider/stateful-slider.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import StatefulContainer from './stateful-slider-container';
 import Slider from './slider';
-var StatefulSlider = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { children: function (sliderProps) { return _jsx(Slider, __assign({}, sliderProps, { overrides: props.overrides }), void 0); } }), void 0)); };
+var StatefulSlider = function (props) { return (_jsx(StatefulContainer, __assign({}, props, { children: function (sliderProps) { return _jsx(Slider, __assign({}, sliderProps, { overrides: props.overrides })); } }))); };
 StatefulSlider.displayName = 'StatefulSlider';
 export default StatefulSlider;

package/esm/slider/styled-components.d.ts

@@ -1,7 +1,24 @@
-import { Styles } from '../types';
-export declare const getInnerTrackStyles: Styles;
-export declare const getThumbStyles: Styles;
-export declare const getInnerThumbStyles: Styles;
-export declare const getThumbValueStyles: Styles;
-export declare const StyledMark: import("../style/styled").StyledComponent;
-export declare const StyledMarkLabel: import("../style/styled").StyledComponent;
+import { StyleUtils } from '../types';
+export declare const addOpacity: (token: string, opacity: string) => string | null;
+export declare const secondaryIntentColor: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent: any;
+}, defaultColor?: any) => any;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledTrack: import("../style").StyledComponent;
+export declare const getInnerTrackBackgroundColor: (utils: StyleUtils, { $value, $min, $max, $intent, $primaryIntentColor, $secondaryIntentColor, $trackColors: trackColors }: {
+    $value: any;
+    $min: any;
+    $max: any;
+    $intent: any;
+    $primaryIntentColor: any;
+    $secondaryIntentColor: any;
+    $trackColors: any;
+}) => string;
+export declare const StyledInnerTrack: import("../style").StyledComponent;
+export declare const StyledThumb: import("../style").StyledComponent;
+export declare const StyledInnerThumb: import("../style").StyledComponent;
+export declare const StyledThumbValue: import("../style").StyledComponent;
+export declare const StyledMark: import("../style").StyledComponent;
+export declare const StyledMarkLabel: import("../style").StyledComponent;

package/esm/slider/styled-components.js

@@ -1,90 +1,124 @@
-import { __assign } from "tslib";
-import styled from '../style/styled';
-import { borderRadius, borderColor } from '../helpers/longHandHelpers';
+import { styled, styledWithCssVariables } from '../style';
 import { intentColor } from '../helpers/intentHelper';
 import { hex2rgb } from '../helpers';
-var addOpacity = function (token, opacity) {
+var intentBackgroundColor = {
+    default: 'spr-ui-04',
+    error: 'spr-bg-error',
+    success: 'spr-bg-success',
+    warning: 'spr-bg-warning',
+};
+export var addOpacity = function (token, opacity) {
     return token.includes('rgb') ? "".concat(token.split(')')[0] + opacity, ")") : hex2rgb(token, opacity);
 };
-var secondaryIntentColor = function (_a, _b) {
+export var secondaryIntentColor = function (_a, _b, defaultColor) {
     var theme = _a.theme;
     var $intent = _b.$intent;
+    if (defaultColor === void 0) { defaultColor = theme.spr.bgTertiary; }
     switch ($intent) {
         case 'error':
-            return theme.spr.supportErrorHighlight;
+            return theme.spr.bgErrorHighlight;
         case 'success':
-            return theme.spr.supportSuccessHighlight;
+            return theme.spr.bgSuccessHighlight;
         case 'warning':
-            return theme.spr.supportWarningHighlight;
+            return theme.spr.bgWarningHighlight;
         default:
-            return addOpacity(theme.spr.ui04, '0.1');
+            return defaultColor;
+    }
+};
+export var StyledRoot = styled('div', 'relative w-full p-4');
+StyledRoot.displayName = 'StyledRoot';
+export var StyledTrack = styled('div', 'flex bg-transparent p-0', function (_, props) {
+    var _a = props.$value, $value = _a === void 0 ? [] : _a, $disabled = props.$disabled, $isDragged = props.$isDragged;
+    var cursorClass = 'inherit';
+    if ($disabled) {
+        cursorClass = 'cursor-not-allowed';
+    }
+    else if ($isDragged) {
+        cursorClass = 'cursor-grabbing';
+    }
+    else if ($value.length === 1) {
+        cursorClass = 'cursor-pointer';
+    }
+    return cursorClass;
+});
+StyledTrack.displayName = 'StyledTrack';
+export var getInnerTrackBackgroundColor = function (utils, _a) {
+    var $value = _a.$value, $min = _a.$min, $max = _a.$max, $intent = _a.$intent, $primaryIntentColor = _a.$primaryIntentColor, $secondaryIntentColor = _a.$secondaryIntentColor, trackColors = _a.$trackColors;
+    var isRTL = utils.isRTL, theme = utils.theme;
+    var intentPrimary = $primaryIntentColor !== null && $primaryIntentColor !== void 0 ? $primaryIntentColor : intentColor(utils, { $intent: $intent });
+    var intentSecondary = $secondaryIntentColor !== null && $secondaryIntentColor !== void 0 ? $secondaryIntentColor : secondaryIntentColor({ theme: theme }, { $intent: $intent });
+    var scaledValue = $value.map(function (value) { return ((value - $min) / ($max - $min)) * 100; });
+    var gradientDirection = isRTL ? 'to left' : 'to right';
+    var background = '';
+    if (scaledValue.length === 1) {
+        background = "linear-gradient(".concat(gradientDirection, ", ").concat(intentPrimary, " ").concat(scaledValue[0], "%, ").concat(intentSecondary, " ").concat(scaledValue[0], "%)");
+    }
+    else if (scaledValue.length === 2) {
+        background = "linear-gradient(".concat(gradientDirection, ", ").concat(intentSecondary, " ").concat(scaledValue[0], "%,").concat(intentPrimary, " ").concat(scaledValue[0], "% ").concat(scaledValue[1], "%,").concat(intentSecondary, " ").concat(scaledValue[1], "%)");
     }
+    else {
+        var gradientValue_1 = '';
+        trackColors.forEach(function (color, index) {
+            if (index === 0) {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index], "%,");
+            }
+            else if (index === trackColors.length - 1) {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index - 1], "%");
+            }
+            else {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index - 1], "% ").concat(scaledValue[index], "%,");
+            }
+        });
+        background = "linear-gradient(".concat(gradientDirection, ",").concat(gradientValue_1, ")");
+    }
+    return background;
 };
-export var getInnerTrackStyles = [
-    'w-full self-center',
-    function (_a, _b) {
-        var theme = _a.theme, px2rem = _a.px2rem;
-        var $disabled = _b.$disabled, $value = _b.$value, $min = _b.$min, $max = _b.$max, $intent = _b.$intent;
-        var intentPrimary = intentColor({ theme: theme }, { $intent: $intent });
-        var intentSecondary = secondaryIntentColor({ theme: theme }, { $intent: $intent });
-        var scaledValue = $value.map(function (value) { return ((value - $min) / ($max - $min)) * 100; });
-        var gradientDirection = 'to right';
-        return __assign({ background: scaledValue.length === 1
-                ? "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentPrimary, " ").concat(scaledValue[0], "%, \n            ").concat(intentSecondary, " ").concat(scaledValue[0], "%)")
-                : "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentSecondary, " ").concat(scaledValue[0], "%,\n            ").concat(intentPrimary, " ").concat(scaledValue[0], "% ").concat(scaledValue[1], "%, \n              ").concat(intentSecondary, " ").concat(scaledValue[1], "%)"), opacity: $disabled ? '0.6' : '1', height: px2rem('6px'), cursor: $disabled ? 'not-allowed' : 'inherit' }, borderRadius('6px'));
-    },
-];
-export var getThumbStyles = [
-    'flex items-center justify-center h-4 w-4',
-    function (_a, _b) {
-        var theme = _a.theme;
-        var $disabled = _b.$disabled, $isFocusVisible = _b.$isFocusVisible, $intent = _b.$intent;
-        var intentPrimary = intentColor({ theme: theme }, { $intent: $intent });
-        var intentSecondary = secondaryIntentColor({ theme: theme }, { $intent: $intent });
-        var hoverStyles = {
-            boxShadow: "0px 0px 0px 6px ".concat(intentSecondary),
-        };
-        return __assign(__assign(__assign({ backgroundColor: intentPrimary }, borderRadius('16px')), { cursor: $disabled ? 'not-allowed' : 'inherit' }), (!$disabled && {
-            ':hover': hoverStyles,
-            ':focus': __assign({ outline: 'none' }, ($isFocusVisible && hoverStyles)),
-        }));
-    },
-];
-export var getInnerThumbStyles = [
-    'h-0 w-0 absolute border-l-8 border-t-8 border-b-8 border-r-8 border-solid',
-    function (_a) {
-        var theme = _a.theme, px2rem = _a.px2rem;
-        return (__assign(__assign({}, borderColor('transparent')), { borderTopColor: theme.spr.tooltip01, backgroundColor: 'transparent', top: px2rem('-16px') }));
-    },
-];
-export var getThumbValueStyles = [
-    'py-2 px-3 spr-tooltip-01 typography-l3 spr-text-06 absolute',
-    function (_a) {
-        var px2rem = _a.px2rem;
-        return (__assign(__assign({}, borderRadius('4px')), { top: px2rem('-47px') }));
-    },
-];
-export var StyledMark = styled('div', 'ml-4 spr-ui-01 w-px relative opacity-50', function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $markIndex = _b.$markIndex, $intent = _b.$intent, $value = _b.$value, $min = _b.$min, $max = _b.$max, $step = _b.$step;
-    var intentPrimary = intentColor({ theme: theme }, { $intent: $intent });
+export var StyledInnerTrack = styledWithCssVariables('div', function (styleUtils, sharedProps) { return ({
+    '--sw-bg-image': getInnerTrackBackgroundColor(styleUtils, sharedProps),
+}); }, 'w-full self-center rounded-20 h-1 bg-image-[--sw-bg-image]', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'cursor-not-allowed opacity-60 forced-colors:border-disabled' : 'opacity-100 cursor-inherit';
+});
+StyledInnerTrack.displayName = 'StyledInnerTrack';
+export var StyledThumb = styled('div', 'flex items-center justify-center h-4 w-4 rounded-full forced-colors:border-1 bg-[--sw-bg-color] shadow-[--sw-shadow]', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return !$disabled ? 'focus:outline-none hover:shadow-[--sw-shadow-hover] hover:bg-[--sw-bg-color-hover]' : '';
+}, function (_, _a) {
+    var $disabled = _a.$disabled, $isFocusVisible = _a.$isFocusVisible;
+    return !$disabled && $isFocusVisible ? 'focus:shadow-[--sw-shadow-focus] focus:bg-[--sw-bg-color-hover]' : '';
+}, function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'cursor-not-allowed forced-colors:border-disabled' : 'cursor-inherit');
+});
+StyledThumb.displayName = 'StyledThumb';
+export var StyledInnerThumb = styledWithCssVariables('div', function (_a, _) {
+    var theme = _a.theme;
+    return ({ '--sw-border-top-color': theme.spr.bgInverse });
+}, 'h-0 w-0 absolute border-l-6 border-t-6 border-b-6 border-r-6 border-solid border-transparent bg-transparent' +
+    ' border-t-[--sw-border-top-color] -top-3');
+StyledInnerThumb.displayName = 'StyledInnerThumb';
+export var StyledThumbValue = styled('div', 'whitespace-no-wrap py-1 px-3 spr-bg-inverse text-14 leading-150 font-400 spr-text-inverse absolute rounded-4', 'max-w-xs -top-10.25');
+StyledThumbValue.displayName = 'StyledThumbValue';
+export var StyledMark = styled('div', 'ml-4 spr-bg-primary w-px relative opacity-50 h-1', function (_, _a) {
+    var $markIndex = _a.$markIndex, $intent = _a.$intent, $value = _a.$value, $min = _a.$min, $max = _a.$max, $step = _a.$step, $primaryIntentColor = _a.$primaryIntentColor;
+    var intentPrimary = $primaryIntentColor !== null && $primaryIntentColor !== void 0 ? $primaryIntentColor : intentBackgroundColor[$intent];
     var markValue = $min + $markIndex * $step;
     var backgroundColor;
-    if ($markIndex === 0 || $markIndex === ($max - $min) / $step)
-        backgroundColor = 'transparent';
-    else if ($value.length === 1)
-        backgroundColor = $value[0] > markValue ? theme.spr.ui01 : intentPrimary;
-    else
-        backgroundColor = $value[0] < markValue && markValue < $value[1] ? theme.spr.ui01 : intentPrimary;
-    return {
-        height: px2rem('6px'),
-        backgroundColor: backgroundColor,
-    };
+    if ($markIndex === 0 || $markIndex === ($max - $min) / $step) {
+        backgroundColor = 'bg-transparent';
+    }
+    else if ($value.length === 1) {
+        backgroundColor = $value[0] > markValue ? 'spr-bg-primary' : intentPrimary;
+    }
+    else if ($value.length === 2) {
+        backgroundColor = $value[0] < markValue && markValue < $value[1] ? 'spr-bg-primary' : intentPrimary;
+    }
+    else {
+        backgroundColor = 'spr-bg-primary';
+    }
+    return backgroundColor;
 });
-export var StyledMarkLabel = styled('div', 'absolute typography-l3', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        top: px2rem('15px'),
-        transform: 'translateX(-50%)',
-    });
+export var StyledMarkLabel = styled('div', 'absolute text-11 leading-4 font-400 top-3.75', function (_a) {
+    var isRTL = _a.isRTL;
+    return isRTL ? 'translate-x-1/2' : '-translate-x-1/2';
 });

package/esm/slider/types.d.ts

@@ -1,13 +1,26 @@
-/// <reference types="react" />
-import { SharedProps as BaseSharedProps, SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps } from '../baseui/slider';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
-declare type GetMarkLabelFn = (props: SharedProps & {
+import type { ReactElement, ReactNode } from 'react';
+import type { STATE_CHANGE_TYPE } from './constants';
+export type Params = {
+    value: Array<number>;
+};
+export type State = {
+    value: Array<number>;
+};
+export type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
+type GetMarkLabelFn = (props: SharedProps & {
     $markIndex: number;
 }) => React.ReactNode;
-declare type CommonSliderProps = {
+type CommonSliderProps = {
+    /** @deprecated */
     intent?: Intent;
     markLabel?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean;
     overrides?: {
         Root?: Override<SharedProps & Record<string, any>>;
         Track?: Override<SharedProps & Record<string, any>>;
@@ -20,22 +33,43 @@ declare type CommonSliderProps = {
     };
     disabled?: boolean;
     getMarkLabel?: GetMarkLabelFn;
+    primaryIntentColor?: string;
+    secondaryIntentColor?: string;
+    trackColors?: string[];
+    thumbColors?: string[];
+    onChange?: (a: Params) => unknown;
+    onFinalChange?: (a: Params) => unknown;
 };
-export declare type SharedProps = BaseSharedProps & {
-    $intent?: boolean;
+export type SharedProps = {
+    /** @deprecated */
+    $intent?: Intent;
     $step: number;
+    $disabled?: boolean;
+    $isDragged?: boolean;
+    $marks?: boolean;
+    $max?: number;
+    $min?: number;
+    $thumbIndex?: number;
+    $value?: Array<number>;
+    $isFocusVisible?: boolean;
+    $trackColors?: string[];
+    $thumbColors?: string[];
 };
-export declare type SliderProps = SpacewebComponentProps<Omit<BaseSliderProps, 'overrides'>> & CommonSliderProps;
-export declare type StatefulContainerProps = SpacewebComponentProps<Omit<BaseStatefulContainerProps, 'overrides' | 'stateReducer' | 'min' | 'max' | 'step' | 'onChange' | 'onFinalChange'>> & CommonSliderProps & {
-    stateReducer?: BaseStatefulContainerProps['stateReducer'];
-    min?: BaseStatefulContainerProps['min'];
-    max?: BaseStatefulContainerProps['max'];
-    step?: BaseStatefulContainerProps['step'];
-    onChange?: BaseStatefulContainerProps['onChange'];
-    onFinalChange?: BaseStatefulContainerProps['onFinalChange'];
+export type SliderProps = SpacewebComponentProps<{
+    value: Array<number>;
+    persistentThumb?: boolean;
+    valueToLabel?: (value: number) => ReactNode;
+}> & CommonSliderProps;
+export type StatefulContainerProps = SpacewebComponentProps<{
+    children: (a: SliderProps) => ReactElement;
+    initialState?: State;
+    stateReducer?: StateReducer;
+}> & CommonSliderProps;
+export type StatefulSliderProps = SpacewebComponentProps<Omit<SliderProps, 'value'>> & {
+    /** Initial state populated into the component */
+    initialState?: State;
 };
-export declare type StatefulSliderProps = SpacewebComponentProps<Omit<BaseStatefulSliderProps, 'overrides'>> & CommonSliderProps;
-export declare type MarkProps = SharedProps & {
+export type MarkProps = SharedProps & {
     $markIndex: number;
     overrides?: {
         MarkLabel?: Override<SharedProps & Record<string, any>>;

package/esm/snackbar/Snackbar.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement } from 'react';
-import { SnackbarProps } from './types';
-declare const Snackbar: ({ intent: _intent, message: _message, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides, onClose, }: SnackbarProps) => ReactElement | null;
+import type { ReactElement } from 'react';
+import type { SnackbarProps } from './types';
+declare const Snackbar: {
+    ({ intent: _intent, message: _message, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
+    __standard: string;
+};
 export default Snackbar;