@sprinklrjs/spaceweb 14.11.4 → 14.12.0

package/esm/select/base-select.js

@@ -54,7 +54,7 @@ var BaseSelect = /** @class */ (function (_super) {
         // FIXME: Remove use of any
         function () {
             var _a;
-            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey, value = _b.value, multi = _b.multi, overrides = _b.overrides, noResultsMsg = _b.noResultsMsg, noResultsConfig = _b.noResultsConfig, options = _b.options, className = _b.className, style = _b.style, intent = _b.intent, size = _b.size, disabled = _b.disabled, captureScroll = _b.captureScroll, placement = _b.placement, popoverMinWidth = _b.popoverMinWidth, searchable = _b.searchable, virtual = _b.virtual, getActionsElement = _b.getActionsElement, ignoreBoundary = _b.ignoreBoundary, clearAsOption = _b.clearAsOption, selectOnTab = _b.selectOnTab;
+            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey, value = _b.value, multi = _b.multi, overrides = _b.overrides, noResultsMsg = _b.noResultsMsg, noResultsConfig = _b.noResultsConfig, _options = _b.options, className = _b.className, style = _b.style, intent = _b.intent, size = _b.size, disabled = _b.disabled, captureScroll = _b.captureScroll, placement = _b.placement, popoverMinWidth = _b.popoverMinWidth, _searchable = _b.searchable, virtual = _b.virtual, getActionsElement = _b.getActionsElement, ignoreBoundary = _b.ignoreBoundary, clearAsOption = _b.clearAsOption, selectOnTab = _b.selectOnTab;
             var hasEnhancerButton = hasStartEnhancerButton(_this.props) || hasEndEnhancerButton(_this.props);
             return {
                 Root: {
@@ -198,7 +198,7 @@ var BaseSelect = /** @class */ (function (_super) {
          * */
         _this.getOptions = memoizeOne(function (locale, createdOptions, options, shouldPrependClearOption) {
             var _a;
-            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey, clearAsOptionLabel = _b.clearAsOptionLabel, multi = _b.multi;
+            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey, clearAsOptionLabel = _b.clearAsOptionLabel, _multi = _b.multi;
             var optionArr = _this.getMemoizedNormalizedOptions(valueKey, options, createdOptions);
             if (shouldPrependClearOption) {
                 optionArr = __spreadArray([
@@ -236,12 +236,12 @@ var BaseSelect = /** @class */ (function (_super) {
             (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onBlur(e);
         };
         _this.handleChange = function (params) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, options, _b, onChange, value, creatable, valueKey, multi, newCreatedOptions, newCreatedValues, mergedValue, returnValue;
+            var _a, _options, _b, onChange, value, creatable, valueKey, multi, newCreatedOptions, newCreatedValues, mergedValue, returnValue;
             var _this = this;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, creatable = _a.creatable, valueKey = _a.valueKey, multi = _a.multi;
+                        _a = this.props, _options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, creatable = _a.creatable, valueKey = _a.valueKey, multi = _a.multi;
                         if (params.value.length > 0) {
                             this.lastSelectedValue = params.value;
                         }

package/esm/select/default-props.d.ts

@@ -1,4 +1,4 @@
-import { Options, Value, Type } from './types';
+import type { Options, Value, Type } from './types';
 declare const defaultProps: {
     autoFocus: boolean;
     backspaceRemoves: boolean;

package/esm/select/grouped-select.d.ts

@@ -1,3 +1,3 @@
-import { ReactElement } from 'react';
-import { GroupedSelectProps } from './types';
+import type { ReactElement } from 'react';
+import type { GroupedSelectProps } from './types';
 export declare const GroupedSelect: (props: GroupedSelectProps) => ReactElement;

package/esm/select/grouped-select.js

@@ -3,7 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Components
 import Select from './select';
 import { CollapsibleSelectMenu } from './selectMenuAdapter/CollapsibleSelectMenu';
-// Hooks, Utils
 import { useMemo } from 'react';
 import { mergeOverrides } from '../overrides';
 import { useLocale } from '../locale';

package/esm/select/mobileSelect/AdaptedCSSTransition/AdaptedCSSTransition.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TransitionType } from './types';
+import type { TransitionType } from './types';
 declare const AdaptedCSSTransition: ({ show, transitionType, children, }: {
     show: boolean;
     transitionType?: TransitionType | undefined;

package/esm/select/mobileSelect/AdaptedCSSTransition/types.d.ts

@@ -1,2 +1,2 @@
-import { TRANSITION_TYPES } from './constants';
-export type TransitionType = typeof TRANSITION_TYPES[keyof typeof TRANSITION_TYPES];
+import type { TRANSITION_TYPES } from './constants';
+export type TransitionType = (typeof TRANSITION_TYPES)[keyof typeof TRANSITION_TYPES];

package/esm/select/mobileSelect/Backdrop.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClassName } from '../../types';
+import type { ClassName } from '../../types';
 export declare const Backdrop: React.MemoExoticComponent<({ onHide, show, backdropKey, className, }: {
     onHide: (e: React.MouseEvent) => void;
     show: boolean;

package/esm/select/mobileSelect/MobileSelect.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { MobileSelectProps } from '../types';
+import type { MobileSelectProps } from '../types';
 export declare const MobileSelect: React.MemoExoticComponent<(props: MobileSelectProps) => React.ReactElement>;

package/esm/select/mobileSelect/MobileSheet.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Override } from '../../overrides';
+import type { Override } from '../../overrides';
 type MobileSheetOverrides = {
     SheetContainer?: Override<Record<string, any>>;
     Label?: Override<Record<string, any>>;

package/esm/select/mobileSelect/hooks/usePauseBodyScrollEffect.d.ts

@@ -1,4 +1,4 @@
-import { BodyScrollOptions } from 'body-scroll-lock';
+import type { BodyScrollOptions } from 'body-scroll-lock';
 export declare const usePauseBodyScrollEffect: ({ currentEl, options, }: {
     currentEl: HTMLElement | undefined | null;
     options?: any;

package/esm/select/mobileSelect/hooks/useSwipeableSheetStyles.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Styles, ClassName } from '../../../types';
+import type { Styles, ClassName } from '../../../types';
 export declare const useSwipeableSheetStyles: ({ swipeThreshold, handleDismiss, dismissTimeout, }: {
     swipeThreshold: number;
     handleDismiss?: (() => void) | undefined;

package/esm/select/mobileSelect/hooks/useSwipeableSheetStyles.js

@@ -7,8 +7,8 @@ export var useSwipeableSheetStyles = function (_a) {
     var initialPositionRef = React.useRef(0);
     var _c = __read(React.useState('0px'), 2), swipedArea = _c[0], setSwipedArea = _c[1];
     var onSwipeStart = React.useCallback(function (e) {
-        var _initialPosition = getTouches(e).clientY;
-        initialPositionRef.current = _initialPosition;
+        var initialPosition = getTouches(e).clientY;
+        initialPositionRef.current = initialPosition;
     }, []);
     var onSwipe = React.useCallback(function (e) {
         var change = getTouches(e).clientY - initialPositionRef.current;

package/esm/select/mobileSelect/hooks/useTransitionStyles.d.ts

@@ -1,2 +1,2 @@
-import { TransitionType } from '../AdaptedCSSTransition/types';
+import type { TransitionType } from '../AdaptedCSSTransition/types';
 export declare const useTransitionStyles: (transitionType: TransitionType) => Record<string, any>;

package/esm/select/multi-value.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagProps } from '../tag';
+import { type TagProps } from '../tag';
 declare const MultiValue: React.ForwardRefExoticComponent<Omit<TagProps, "overrides"> & import("./types").SharedProps & {
     $isContainerFocused?: boolean | undefined;
     $valueByIdMap: Record<string, Readonly<{

package/esm/select/multi-value.js

@@ -11,7 +11,7 @@ import { CLEARABLE_KEY, LOADING_KEY } from './constants';
 import useCombinedRefs from '../hooks/useCombinedRef';
 var MultiValue = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
-    var _d = props.overrides, overrides = _d === void 0 ? {} : _d, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, $size = props.$size, $isContainerFocused = props.$isContainerFocused, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
+    var _d = props.overrides, overrides = _d === void 0 ? {} : _d, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, $valueByIdMap = props.$valueByIdMap, $valueKey = props.$valueKey, _$size = props.$size, _$isContainerFocused = props.$isContainerFocused, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled", "$valueByIdMap", "$valueKey", "$size", "$isContainerFocused"]);
     var _e = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _e[0], tagProps = _e[1];
     var theme = useStyle().theme;
     var tagRef = useRef();

package/esm/select/no-results-message.d.ts

@@ -1,5 +1,5 @@
-import { MouseEvent, ReactElement } from 'react';
-import { IconProps } from '../icon';
+import type { MouseEvent, ReactElement } from 'react';
+import type { IconProps } from '../icon';
 export type NoResultsMessageProps = {
     id?: string;
     titleMessage: string;

package/esm/select/overlaySelect/hooks/useControlRef.d.ts

@@ -1,4 +1,4 @@
-import { ControlRef } from '../../../baseui/select';
+import type { ControlRef } from '../../../baseui/select';
 type Params = {
     openPopover: () => void;
     closePopover: () => void;

package/esm/select/overlaySelect/hooks/usePopover.d.ts

@@ -1,4 +1,4 @@
-import { OverlaySelectProps } from '../../types';
+import type { OverlaySelectProps } from '../../types';
 declare const usePopover: ({ startOpen, onOpen, onClose }: OverlaySelectProps) => {
     popoverOpen: boolean;
     togglePopoverState: () => void;

package/esm/select/overrides.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ClassName, ClassNameStyleFn, Styles } from '../types';
-import { SharedProps } from './types';
-export declare const SelectArrow: ({ $isOpen, title, overrides, ...restProps }: {
+import type { ClassName, ClassNameStyleFn, Styles } from '../types';
+import type { SharedProps } from './types';
+export declare const SelectArrow: ({ $isOpen, title, overrides: _overrides, ...restProps }: {
     [x: string]: any;
     $isOpen: any;
     title: any;

package/esm/select/overrides.js

@@ -8,6 +8,7 @@ import { StyledTombstone } from '../helpers/StyledTombstone';
 import { useStyle } from '../style';
 import { inputCVA } from '../input/cvaConfigs';
 import { controlContainerCVA } from './cvaConfigs';
+import { Box } from '../box';
 var selectBorderColor = function (_, _a) {
     var _b = _a.$intent, $intent = _b === void 0 ? 'default' : _b, $isPseudoFocused = _a.$isPseudoFocused, $isFocused = _a.$isFocused, $disabled = _a.$disabled;
     switch ($intent) {
@@ -30,7 +31,7 @@ var selectBorderColor = function (_, _a) {
 };
 // Removing 'overrides' injected by baseweb
 export var SelectArrow = function (_a) {
-    var $isOpen = _a.$isOpen, title = _a.title, overrides = _a.overrides, restProps = __rest(_a, ["$isOpen", "title", "overrides"]);
+    var $isOpen = _a.$isOpen, title = _a.title, _overrides = _a.overrides, restProps = __rest(_a, ["$isOpen", "title", "overrides"]);
     return (_jsx(ChevronDown, __assign({ title: title, "$isOpen": $isOpen }, restProps, { className: [
             'transition-transform duration-200 cursor-pointer',
             (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'small' || (restProps === null || restProps === void 0 ? void 0 : restProps.size) === 'medium' ? 'h-3 w-3 m-1.5' : 'h-2.5 w-2.5 ml-1',
@@ -156,7 +157,7 @@ export var getValueTypography = [
 // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
 export var OverlaySelectPopoverOverride = function (_a) {
     var content = _a.content, inputContainer = _a.children, closePopover = _a.closePopover, setStickySentinelRef = _a.setStickySentinelRef;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
 };
 export var SingleValueTombstone = function (_a) {
     var $selectSize = _a.$selectSize;

package/esm/select/select-variants.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { SelectProps } from './types';
+import type { SelectProps } from './types';
 export declare function MultiSelect(props: SelectProps): React.ReactElement;
 export declare function SingleSelect(props: SelectProps): React.ReactElement;

package/esm/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -57,7 +57,8 @@ var SelectMenuAdapter = function (props) {
         ListItemText: mergedOverrides.ListItemText,
         Checkbox: mergedOverrides.Checkbox,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem, mergedOverrides.Checkbox]);
-    var currentCount = 0, totalCount = normalizeOptions(groupedItems).length;
+    var currentCount = 0;
+    var totalCount = normalizeOptions(groupedItems).length;
     var itemsToRender = _flatten(Object.keys(removeUngroupedIfEmpty(groupedItems)).map(function (itemGroup, index) {
         var itemsInGroup = groupedItems[itemGroup];
         var menuItems = itemsInGroup.flatMap(function (item) {

package/esm/select/stateful-select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StatefulSelectProps } from './types';
+import type { StatefulSelectProps } from './types';
 declare function StatefulSelect({ overrides, onChange, ...restProps }: StatefulSelectProps): React.ReactElement;
 declare namespace StatefulSelect {
     var defaultProps: {

package/esm/select/styled-component.js

@@ -70,9 +70,7 @@ var InputContainer = function (_a) {
                         ? cloneElement(Children.only(props.children), __assign({ onFocus: function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, ($value && $value.length > 0 ? {} : { placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder })))
                         : null }))] }));
     }
-    else {
-        return _jsx(StyledInputContainer, __assign({}, props, { "$selectSize": size }));
-    }
+    return _jsx(StyledInputContainer, __assign({}, props, { "$selectSize": size }));
 };
 var Input = forwardRef(function (_a, ref) {
     var _b;

package/esm/select/utils/adapt-select-value.d.ts

@@ -1,2 +1,2 @@
-import { Option, Id, Value } from '../types';
+import type { Option, Id, Value } from '../types';
 export declare const adaptSelectValue: (optionsIdMap: Record<Id, Option>, value?: ReadonlyArray<Option | Id>) => Value | undefined;

package/esm/select/utils/default-create-option.d.ts

@@ -1,4 +1,4 @@
-import { Options } from '../../baseui/select';
+import type { Options } from '../../baseui/select';
 export declare const defaultCreateOption: (label: string, { labelKey, valueKey }?: {
     labelKey?: string | undefined;
     valueKey?: string | undefined;

package/esm/select/utils/hidden-element.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 declare const HiddenElement: ({ id, children }: {
     id: string;
     children?: ReactNode;

package/esm/select/utils/hidden-element.js

@@ -1,8 +1,9 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../box';
 var HiddenElement = function (_a) {
     var id = _a.id, children = _a.children;
-    return (_jsx("div", __assign({ id: id, style: {
+    return (_jsx(Box, __assign({ id: id, style: {
             border: 0,
             clip: 'rect(0 0 0 0)',
             height: '0px',

package/esm/select/utils/merge-options.d.ts

@@ -1,2 +1,2 @@
-import { Options, Value } from '../types';
+import type { Options, Value } from '../types';
 export declare function mergeOptions(valueKey: string, options1?: Options, options2?: Options): Value;

package/esm/slider/slider.js

@@ -83,18 +83,24 @@ var Slider = function (_a) {
             }, renderThumb: function (_a) {
                 var props = _a.props, index = _a.index, isDragged = _a.isDragged;
                 var displayLabel = persistentThumb || ((hoveredThumbIndex === index || isDragged) && !disabled);
+                var thumbHoverShadowColor;
+                if (value.length > 2) {
+                    thumbHoverShadowColor = addOpacity(thumbColors[index], '0.1');
+                }
+                else if (primaryIntentColor) {
+                    thumbHoverShadowColor = addOpacity(primaryIntentColor, '0.1');
+                }
+                else {
+                    thumbHoverShadowColor = getThumbBoxShadow({ theme: theme }, sharedProps, addOpacity(theme.spr.interactiveHover, '0.33'));
+                }
                 // 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
+                            ? thumbColors[index]
+                            : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : 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)))] })));
+                            : '0 1px 4px rgba(0, 0, 0, 0.12)', '--sw-shadow-hover': "0px 0px 0px 4px ".concat(thumbHoverShadowColor), '--sw-shadow-focus': "0px 0px 0px 4px ".concat(thumbHoverShadowColor) }, 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) {

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

@@ -1,4 +1,4 @@
 /// <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>>;
+declare const StatefulSliderContainer: ({ children, initialState, stateReducer, max, min, step: _step, onChange, onFinalChange, ...restProps }: StatefulContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default StatefulSliderContainer;

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

@@ -4,14 +4,14 @@ 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 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 nextValue = _a.value;
+        var nextState = { value: nextValue };
         var newState = stateReducer(type, nextState, { value: value });
         setValue(newState.value);
-    }, [stateReducer]);
+    }, [stateReducer, value]);
     var handleOnChange = useCallback(function (params) {
         internalSetState(STATE_CHANGE_TYPE.change, params);
         return onChange(__assign({}, params));

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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { StatefulSliderProps } from './types';
+import type { ReactElement } from 'react';
+import type { StatefulSliderProps } from './types';
 declare const StatefulSlider: {
     (props: StatefulSliderProps): ReactElement;
     displayName: string;

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

@@ -1,4 +1,4 @@
-import { StyleUtils } from '../types';
+import type { StyleUtils } from '../types';
 export declare const addOpacity: (token: string, opacity: string) => string | null;
 export declare const secondaryIntentColor: ({ theme }: {
     theme: any;

package/esm/slider/styled-components.js

@@ -73,11 +73,35 @@ export var getInnerTrackBackgroundColor = function (utils, _a) {
     }
     return background;
 };
+var STOP_INDICATOR_RADIUS = 2;
+var STOP_INDICATOR_MARGIN = 1;
+var getStopIndicatorBackground = function (_a, _b) {
+    var theme = _a.theme, isRTL = _a.isRTL;
+    var $value = _b.$value;
+    var center = "".concat(STOP_INDICATOR_MARGIN + STOP_INDICATOR_RADIUS, "px");
+    var inlineStart = isRTL ? "calc(100% - ".concat(center, ")") : center;
+    var inlineEnd = isRTL ? center : "calc(100% - ".concat(center, ")");
+    var getGradient = function (position) {
+        return "radial-gradient(circle at ".concat(position, " 50%, ").concat(theme.spr.bgInverse, " 0 ").concat(STOP_INDICATOR_RADIUS, "px, transparent ").concat(STOP_INDICATOR_RADIUS, "px)");
+    };
+    if ($value.length === 1)
+        return getGradient(inlineEnd);
+    if ($value.length === 2)
+        return "".concat(getGradient(inlineEnd), ", ").concat(getGradient(inlineStart));
+    return '';
+};
+var getTrackBackgroundImage = function (utils, sharedProps) {
+    var stopIndicators = getStopIndicatorBackground(utils, sharedProps);
+    var innerTrackBackground = getInnerTrackBackgroundColor(utils, sharedProps);
+    return stopIndicators ? "".concat(stopIndicators, ", ").concat(innerTrackBackground) : innerTrackBackground;
+};
 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) {
+    '--sw-bg-image': getTrackBackgroundImage(styleUtils, sharedProps),
+}); }, 'w-full self-center rounded-20 h-1.5 bg-image-[--sw-bg-image] forced-colors:border-1', function (_, _a) {
     var $disabled = _a.$disabled;
-    return $disabled ? 'cursor-not-allowed opacity-60 forced-colors:border-disabled' : 'opacity-100 cursor-inherit';
+    return $disabled
+        ? 'cursor-not-allowed opacity-33 forced-colors:opacity-100 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) {

package/esm/slider/types.d.ts

@@ -1,5 +1,5 @@
-import { Intent, SpacewebComponentProps } from '../types';
-import { Override } from '../overrides';
+import type { Intent, SpacewebComponentProps } from '../types';
+import type { Override } from '../overrides';
 import type { ReactElement, ReactNode } from 'react';
 import type { STATE_CHANGE_TYPE } from './constants';
 export type Params = {

package/esm/snackbar/constants.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { IconProps } from '../icon';
-import { Intent } from './types';
+import type * as React from 'react';
+import type { IconProps } from '../icon';
+import type { Intent } from './types';
 export declare const TRANSITION_DURATION = 1000;
 export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<React.PropsWithChildren<IconProps>>>;
 export declare const INTENT_TO_ROLE: Record<Intent, string>;

package/esm/snackbar/snackbarContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Intent } from '.';
+import type { Intent } from '.';
 type Notification = {
     message: string;
     intent?: Intent;

package/esm/snackbar/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Override } from '../overrides';
+import type { Override } from '../overrides';
 export type Intent = 'success' | 'error' | 'warning' | 'delete';
 export type HideReason = 'timeout' | 'clickaway' | 'manualClose' | 'messageChange';
 export type Placement = 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight';

package/esm/snackbar/useSnackbar.d.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject, ReactNode } from 'react';
-import { HideReason, Intent, SnackbarOverrides } from './types';
+import type { MutableRefObject, ReactNode } from 'react';
+import type { HideReason, Intent, SnackbarOverrides } from './types';
 type UseSnackbarParams = {
     autoHide: boolean;
     autoHideDuration: number;

package/esm/spaceConsumer/SpaceConsumer.d.ts

@@ -1,8 +1,8 @@
 /**
  * @author Ivan Torres
  */
-import { ReactElement } from 'react';
-import { StyleObject, StyleUtils } from '../types';
+import type { ReactElement } from 'react';
+import type { StyleObject, StyleUtils } from '../types';
 type Props = {
     children: (styleUtils: StyleUtils & {
         styletronCSS: (style: StyleObject) => string;

package/esm/spacewebProvider/AiIconLinearGradients.js

@@ -4,6 +4,8 @@ import { useStyle } from '../style';
 import { accessibilityStyles } from '../helpers/commonStyles';
 var AiIconLinearGradients = function () {
     var _a = useStyle(), theme = _a.theme, deprecatedAIThemeEnabled = _a.deprecatedAIThemeEnabled;
-    return (_jsx("svg", __assign({ style: accessibilityStyles }, { children: _jsx("defs", { children: theme.name.includes('light') ? (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "10.065", y1: "-152.894", x2: ".289", y2: "-163.48", gradientTransform: "matrix(1 0 0 -1 0 -149.213)", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0", stopColor: deprecatedAIThemeEnabled ? '#de46e1' : theme.spr.text01 }), _jsx("stop", { offset: ".487", stopColor: deprecatedAIThemeEnabled ? '#8e43ff' : theme.spr.text01 }), _jsx("stop", { offset: "1", stopColor: deprecatedAIThemeEnabled ? '#0e61f6' : theme.spr.text01 })] }))) : (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: deprecatedAIThemeEnabled ? '#DE46E1' : theme.spr.text01 }), _jsx("stop", { offset: "0.486707", stopColor: deprecatedAIThemeEnabled ? '#8E43FF' : theme.spr.text01 }), _jsx("stop", { offset: "1", stopColor: deprecatedAIThemeEnabled ? '#0E61F6' : theme.spr.text01 })] }))) }) })));
+    return (
+    // eslint-disable-next-line react/forbid-elements -- gradient defs svg is not a spaceweb layout surface
+    _jsx("svg", __assign({ style: accessibilityStyles }, { children: _jsx("defs", { children: theme.name.includes('light') ? (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "10.065", y1: "-152.894", x2: ".289", y2: "-163.48", gradientTransform: "matrix(1 0 0 -1 0 -149.213)", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0", stopColor: deprecatedAIThemeEnabled ? '#de46e1' : theme.spr.text01 }), _jsx("stop", { offset: ".487", stopColor: deprecatedAIThemeEnabled ? '#8e43ff' : theme.spr.text01 }), _jsx("stop", { offset: "1", stopColor: deprecatedAIThemeEnabled ? '#0e61f6' : theme.spr.text01 })] }))) : (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: deprecatedAIThemeEnabled ? '#DE46E1' : theme.spr.text01 }), _jsx("stop", { offset: "0.486707", stopColor: deprecatedAIThemeEnabled ? '#8E43FF' : theme.spr.text01 }), _jsx("stop", { offset: "1", stopColor: deprecatedAIThemeEnabled ? '#0E61F6' : theme.spr.text01 })] }))) }) })));
 };
 export default AiIconLinearGradients;

package/esm/spacewebProvider/CustomBaseProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 declare const CustomBaseProvider: (props: {
     children: React.ReactNode;
     zIndex?: number;

package/esm/spacewebProvider/DocumentProvider.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 export declare const DocumentContext: import("react").Context<Document | undefined>;
 export declare const DocumentProvider: {
     (props: PropsWithChildren<{

package/esm/spacewebProvider/SpacewebProvider.d.ts

@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import * as React from 'react';
-import { StandardEngine } from 'styletron-standard';
-import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
-import { Override } from '../overrides';
+import type { StandardEngine } from 'styletron-standard';
+import type { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
+import type { Override } from '../overrides';
 import { LocaleProvider } from '../locale';
 export type Props = {
     children: ReactNode;

package/esm/spacewebProvider/SpacewebProvider.js

@@ -13,7 +13,7 @@ import { useHasMounted } from '../hooks/useHasMounted';
 var LAYERS_DEFAULT_ZINDEX = 9999;
 function SpacewebProvider(props) {
     var _a, _b;
-    var children = props.children, _c = props.layersZIndex, layersZIndex = _c === void 0 ? LAYERS_DEFAULT_ZINDEX : _c, overrides = props.overrides, theme = props.theme, locale = props.locale, _d = props.debug, debug = _d === void 0 ? false : _d, density = props.density, langCode = props.langCode, _e = props.debugCssInJs, debugCssInJs = _e === void 0 ? false : _e, nonce = props.nonce;
+    var children = props.children, _c = props.layersZIndex, layersZIndex = _c === void 0 ? LAYERS_DEFAULT_ZINDEX : _c, theme = props.theme, locale = props.locale, _d = props.debug, debug = _d === void 0 ? false : _d, density = props.density, langCode = props.langCode, _e = props.debugCssInJs, debugCssInJs = _e === void 0 ? false : _e, nonce = props.nonce;
     var doc = useDocument();
     var styleEngine = props.styleEngine || getStyleEngine(doc, nonce);
     // TODO: This must be removed once baseui code exposes focusVisible from utils/index

package/esm/stack/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ClassName, StyleObject } from '../types';
+import type { ClassName, StyleObject } from '../types';
 type stackContextProps = Partial<{
     className: ClassName;
     shrink: boolean;

package/esm/stack/stack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClassName } from '../types';
+import type { ClassName } from '../types';
 declare const Stack: React.ForwardRefExoticComponent<Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
     $as?: React.ElementType | undefined;
     className?: ClassName;

package/esm/stack/types.d.ts

@@ -1,5 +1,5 @@
-import { SpacewebComponentProps } from '../types';
-import { Override } from '../overrides';
+import type { SpacewebComponentProps } from '../types';
+import type { Override } from '../overrides';
 type Direction = 'horizontal' | 'vertical';
 type StackConfig = {
     direction?: Direction;

package/esm/style/_buildUtils.d.ts

@@ -1,4 +1,4 @@
-import { StyleUtils, ThemeContext, StyleObject } from '../types';
+import type { StyleUtils, ThemeContext, StyleObject } from '../types';
 type StyletronCSS = (arg: StyleObject) => string;
 declare const _default: (_ctx: ThemeContext, styletronCSS: StyletronCSS) => StyleUtils;
 export default _default;

package/esm/style/_css.d.ts

@@ -1,6 +1,6 @@
 /**
  * @author Ivan Torres
  */
-import { Styles, StyleUtils, StyleObject } from '../types';
+import type { Styles, StyleUtils, StyleObject } from '../types';
 declare const _css: (utils: StyleUtils, styletronCSS: (arg: StyleObject) => string, ...args: Styles[]) => string;
 export default _css;

package/esm/style/_cssParseStyle.d.ts

@@ -1,7 +1,7 @@
 /**
  * @author Ivan Torres
  */
-import { Styles, StyleUtils, StyleObject } from '../types';
+import type { Styles, StyleUtils, StyleObject } from '../types';
 export declare const PSEUDO_SELECTORS: {
     hover: string;
     focus: string;

package/esm/style/_getStyle.d.ts

@@ -1,6 +1,6 @@
 /**
  * @author Ivan Torres
  */
-import { Styles, StyleUtils, StyleObject } from '../types';
+import type { Styles, StyleUtils, StyleObject } from '../types';
 declare const _getStyle: (utils: StyleUtils, ...args: Styles[]) => StyleObject;
 export default _getStyle;

package/esm/style/_getStyleWithProps.d.ts

@@ -1,6 +1,6 @@
 /**
  * @author Ivan Torres
  */
-import { Styles, StyleUtils, StyleObject } from '../types';
+import type { Styles, StyleUtils, StyleObject } from '../types';
 declare const _getStyleWithProps: (utils: StyleUtils, props: any, ...args: Styles[]) => StyleObject;
 export default _getStyleWithProps;

package/esm/style/_parseClassName.d.ts

@@ -1,5 +1,5 @@
 /**
  * @author Ivan Torres
  */
-import { DeprecatedStyleAtom, StyleUtils, RecursiveArray } from '../types';
+import type { DeprecatedStyleAtom, StyleUtils, RecursiveArray } from '../types';
 export declare const _parseClassName: (utils: StyleUtils, styletronCss: any, props: any, className: DeprecatedStyleAtom | RecursiveArray<DeprecatedStyleAtom>) => [string, string];