@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/popover/popover.js

@@ -4,31 +4,44 @@ import { Popover as BasePopover } from '../baseui/popover';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { mergeOverrides, useOverrides } from '../overrides';
-import { useContent, useFocusLock } from './hooks';
+import { useFocusLock } from './hooks';
 import useUniqueId from '../hooks/useUniqueId';
-import { PopoverChildEnhancer } from './PopoverEnahncer';
+import { PopoverChildEnhancer } from './PopoverEnhancer';
 import { LayersManager, Z_INDEX } from '../layer';
 import { accessibilityMap, placementMap, rtlPlacementMap, triggerTypeMap } from './adapter';
-import { arrowStyles, getBodyStyles, getInnerStyles } from './overrides';
+import { arrowStyles, getBodyStyles, getInnerStyles, getBodyClassNames } from './overrides';
 import { StyledArrowTriangle } from './styled-components';
 import useCombinedRefs from '../hooks/useCombinedRef';
 import { useStyle } from '../style';
 import { getPopperOptions } from './utils';
-// @ts-ignore
+// @ts-ignore -- displayName is not typed in BasePopover
 BasePopover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, content = _a.content, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "content", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
-    var _h = useContent({ content: content }), setContentHost = _h.setContentHost, wrappedContent = _h.wrappedContent;
-    var isRTL = useStyle().isRTL;
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var _h = useStyle(), isRTL = _h.isRTL, theme = _h.theme;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
     var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LayersManager, LayersManager), 2), Layer = _k[0], layerProps = _k[1];
     var _overrides = useMemo(function () {
         return mergeOverrides({
-            Body: { style: getBodyStyles },
-            Arrow: { style: arrowStyles, props: { children: _jsx(ArrowTriangle, __assign({}, arrowTriangleProps), void 0) } },
-            Inner: { style: getInnerStyles, props: { ref: setContentHost } },
+            Body: { className: getBodyClassNames, style: getBodyStyles },
+            Arrow: {
+                className: arrowStyles,
+                style: {
+                    // @ts-ignore -- css variable declaration
+                    '--sw-border-t-color': theme.spr.popupBorder,
+                    '--sw-border-r-color': theme.spr.popupBorder,
+                },
+                props: {
+                    children: (_jsx(ArrowTriangle, __assign({}, arrowTriangleProps, { style: [
+                            arrowTriangleProps.style,
+                            { '--sw-border-t-color': theme.spr.popup, '--sw-border-r-color': theme.spr.popup },
+                        ] }))),
+                },
+            },
+            Inner: { className: getInnerStyles },
         }, overrides);
-    }, [ArrowTriangle, arrowTriangleProps, overrides, setContentHost]);
+    }, [theme.spr.popupBorder, theme.spr.popup, ArrowTriangle, arrowTriangleProps, overrides]);
     var mappedProps = {
         placement: placement && isRTL ? rtlPlacementMap[placement] : placementMap[placement],
         accessibilityType: accessibilityType && accessibilityMap[accessibilityType],
@@ -44,7 +57,8 @@ var Popover = React.forwardRef(function (_a, ref) {
     }
     var id = useUniqueId();
     var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef, content: wrappedContent }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    return (_jsx(Layer, __assign({ zIndex: Z_INDEX.POPOVER }, layerProps, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
 });
 Popover.displayName = 'Popover';
+Popover.__standard = 'Component<Popover>';
 export default Popover;

package/esm/popover/stateful-popover.js

@@ -5,7 +5,7 @@ import Popover from './popover';
 import { ON_MOUSE_LEAVE_DELAY } from './constants';
 function StatefulPopover(props) {
     var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, targetElement = props.targetElement, viewportAsBoundary = props.viewportAsBoundary, restProps = __rest(props, ["children", "overrides", "targetElement", "viewportAsBoundary"]);
-    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }), void 0)); } }), void 0));
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return (_jsx(Popover, __assign({}, popoverProps, { overrides: overrides, targetElement: targetElement, viewportAsBoundary: viewportAsBoundary }, { children: children }))); } })));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: 'menu',

package/esm/popover/styled-components.js

@@ -1,15 +1,3 @@
-import { ARROW_SIZE } from './constants';
 export { StyledInner, StyledArrow, StyledBody, StyledPadding } from '../baseui/popover';
 import styled from '../style/styled';
-export var StyledArrowTriangle = styled('div', function (_a) {
-    var theme = _a.theme;
-    return ({
-        boxSizing: 'border-box',
-        borderWidth: "".concat(ARROW_SIZE, "px"),
-        borderTopColor: theme.spr.popup,
-        borderRightColor: theme.spr.popup,
-        borderLeftColor: theme.borderColor.transparent,
-        borderBottomColor: theme.borderColor.transparent,
-        borderStyle: 'solid',
-    });
-});
+export var StyledArrowTriangle = styled('div', 'box-border border-4 border-solid border-t-[--sw-border-t-color] border-r-[--sw-border-r-color] border-l-transparent border-b-transparent');

package/esm/popover/types.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { TetherPlacement } from '../baseui/layer';
-import { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from '../baseui/popover';
-import { Override } from '../overrides';
-export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
+import type { TetherPlacement, LayersManagerProps } from '../baseui/layer';
+import type { PopoverProps as BasePopoverProps, StatefulPopoverProps as BaseStatefulPopoverProps, StatefulPopoverContainerProps as BaseStatefulPopoverContainerProps, PopoverOverrides as BasePopoverOverrides } from '../baseui/popover';
+import type { Override } from '../overrides';
+export type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'children' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
     } & {
+        LayersManager?: Override<LayersManagerProps>;
         ArrowTriangle?: Override<any>;
     };
     children?: React.ReactNode | ((args: {
@@ -17,9 +18,12 @@ export declare type PopoverProps = Omit<BasePopoverProps, 'overrides' | 'childre
     innerRef?: React.Ref<HTMLElement>;
     viewportAsBoundary?: boolean;
 };
-export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
+export type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overrides' | 'children'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
+    } & {
+        LayersManager?: Override<LayersManagerProps>;
+        ArrowTriangle?: Override<any>;
     };
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
@@ -27,14 +31,17 @@ export declare type StatefulPopoverProps = Omit<BaseStatefulPopoverProps, 'overr
     targetElement?: HTMLElement | null;
     viewportAsBoundary?: boolean;
 };
-export declare type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
+export type StatefulPopoverContainerProps = Omit<BaseStatefulPopoverContainerProps, 'overrides'> & {
     overrides?: {
         [key in keyof BasePopoverOverrides]?: Override<any>;
+    } & {
+        LayersManager?: Override<LayersManagerProps>;
+        ArrowTriangle?: Override<any>;
     };
 };
-export declare type AccessibilityType = 'none' | 'menu' | 'tooltip';
-export declare type TriggerType = 'click' | 'hover';
-export declare type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
+export type AccessibilityType = 'none' | 'menu' | 'tooltip';
+export type TriggerType = 'click' | 'hover';
+export type Placement = 'auto' | 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
 export type { Offset, SharedStylePropsArg as SharedProps, StateReducer, } from '../baseui/popover';
 export { STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME } from '../baseui/popover';
 export { ARROW_SIZE, ARROW_WIDTH, POPOVER_MARGIN } from '../baseui/popover/constants';

package/esm/progress/circular/CircularProgress.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement } from 'react';
-import { CircularProgressProps } from './types';
-declare const CircularProgress: ({ intent, infinite, label, backgroundColor, value, className, color, size, thickness, overrides, }: CircularProgressProps) => ReactElement;
+import type { ReactElement } from 'react';
+import type { CircularProgressProps } from './types';
+declare const CircularProgress: {
+    ({ intent, infinite, label, backgroundColor, value, className, style, color, size, thickness, overrides, ...restProps }: CircularProgressProps): ReactElement;
+    __standard: string;
+};
 export default CircularProgress;

package/esm/progress/circular/CircularProgress.js

@@ -1,19 +1,46 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { add$props } from '../../helpers';
 import { useOverrides } from '../../overrides';
-import { StyledBar, StyledBarContainer, StyledLabel, StyledLabelContainer, StyledProgress, StyledRoot, StyledSvg, VIEWBOX_SIZE, getProgressInlineStyles, } from './styled-component';
+import { StyledBar, StyledBarContainer, StyledLabel, StyledLabelContainer, StyledProgress, StyledRoot, StyledSvg, VIEWBOX_SIZE, getProgressInlineStyles, getBarInlineStyles, } from './styled-component';
+import { useStyle } from '../../style';
+import { getIntentColor } from '../helper';
 var CircularProgress = function (_a) {
-    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides;
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.infinite, infinite = _c === void 0 ? false : _c, label = _a.label, backgroundColor = _a.backgroundColor, _d = _a.value, value = _d === void 0 ? 0 : _d, className = _a.className, style = _a.style, color = _a.color, _e = _a.size, size = _e === void 0 ? 50 : _e, _f = _a.thickness, thickness = _f === void 0 ? 3 : _f, overrides = _a.overrides, restProps = __rest(_a, ["intent", "infinite", "label", "backgroundColor", "value", "className", "style", "color", "size", "thickness", "overrides"]);
     var strokeWidth = (VIEWBOX_SIZE / size) * thickness;
+    var _g = useStyle(), px2rem = _g.px2rem, theme = _g.theme;
     var sharedProps = __assign(__assign({}, add$props({ intent: intent, infinite: infinite, backgroundColor: backgroundColor, value: value, color: color, size: size, thickness: thickness, strokeWidth: strokeWidth })), { $withLabel: !!label });
-    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _g[0], rootProps = _g[1];
-    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BarContainer, StyledBarContainer), 2), BarContainer = _h[0], barContainerProps = _h[1];
-    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, StyledSvg), 2), Svg = _j[0], svgProps = _j[1];
-    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, StyledBar), 2), Bar = _k[0], barProps = _k[1];
-    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _l[0], progressProps = _l[1];
-    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _m[0], labelContainerProps = _m[1];
-    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _o[0], labelProps = _o[1];
-    return (_jsxs(Root, __assign({ className: className, role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, rootProps, { children: [_jsx(BarContainer, __assign({ "data-testid": "bar-container" }, sharedProps, barContainerProps, { children: _jsxs(Svg, __assign({ viewBox: "".concat(VIEWBOX_SIZE / 2, " ").concat(VIEWBOX_SIZE / 2, " ").concat(VIEWBOX_SIZE, " ").concat(VIEWBOX_SIZE) }, sharedProps, svgProps, { children: [_jsx(Bar, __assign({ "data-testid": "bar" }, sharedProps, barProps), void 0), _jsx(Progress, __assign({ inlineStyles: getProgressInlineStyles({ value: value, infinite: infinite, strokeWidth: strokeWidth }) }, sharedProps, progressProps), void 0)] }), void 0) }), void 0), label ? (_jsx(LabelContainer, __assign({}, sharedProps, labelContainerProps, { children: _jsx(Label, __assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0) }), void 0)) : null] }), void 0));
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _h[0], rootProps = _h[1];
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.BarContainer, StyledBarContainer), 2), BarContainer = _j[0], barContainerProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Svg, StyledSvg), 2), Svg = _k[0], svgProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, StyledBar), 2), Bar = _l[0], barProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _m[0], progressProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _o[0], labelContainerProps = _o[1];
+    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _p[0], labelProps = _p[1];
+    return (_jsxs(Root, __assign({ role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, restProps, rootProps, { style: [
+            {
+                '--sw-height': px2rem(size),
+                '--sw-width': px2rem(size),
+            },
+            style,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+        ], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [_jsx(BarContainer, __assign({ "data-testid": "bar-container" }, sharedProps, barContainerProps, { style: [
+                    {
+                        '--sw-color': color || getIntentColor(intent, theme),
+                    },
+                    barContainerProps === null || barContainerProps === void 0 ? void 0 : barContainerProps.style,
+                ] }, { children: _jsxs(Svg, __assign({ viewBox: "".concat(VIEWBOX_SIZE / 2, " ").concat(VIEWBOX_SIZE / 2, " ").concat(VIEWBOX_SIZE, " ").concat(VIEWBOX_SIZE) }, sharedProps, svgProps, { children: [_jsx(Bar, __assign({ "data-testid": "bar" }, sharedProps, barProps, { style: [
+                                {
+                                    '--sw-stroke-width': px2rem(strokeWidth),
+                                    '--sw-stroke': backgroundColor || theme.spr.tag02,
+                                },
+                                getBarInlineStyles({ px2rem: px2rem }, sharedProps),
+                                barProps === null || barProps === void 0 ? void 0 : barProps.style,
+                            ] })), _jsx(Progress, __assign({ "data-testid": "progress" }, sharedProps, progressProps, { style: [
+                                { '--sw-stroke-width': px2rem(strokeWidth) },
+                                getProgressInlineStyles({ px2rem: px2rem }, sharedProps),
+                                progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
+                            ] }))] })) })), label ? (_jsx(LabelContainer, __assign({}, sharedProps, labelContainerProps, { children: _jsx(Label, __assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label })) }))) : null] })));
 };
+CircularProgress.__standard = 'Component';
 export default CircularProgress;

package/esm/progress/circular/styled-component.d.ts

@@ -1,15 +1,29 @@
+import { CircularSharedProps } from './types';
+/**
+ * CircularProgress styles are inspired from material-ui
+ * https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CircularProgress/CircularProgress.js
+ */
 export declare const VIEWBOX_SIZE = 44;
-export declare const getProgressInlineStyles: ({ strokeWidth, value, infinite, }: {
-    strokeWidth: number;
-    value: number;
-    infinite?: boolean | undefined;
-}) => {
+export declare const getProgressInlineStyles: ({ px2rem }: {
+    px2rem: any;
+}, { $strokeWidth, $value, $infinite }: CircularSharedProps) => {
+    strokeDasharray?: string | undefined;
     strokeDashoffset: string;
+    cx: any;
+    cy: any;
+    r: any;
 };
-export declare const StyledRoot: import("../../style/styled").StyledComponent;
-export declare const StyledBarContainer: import("../../style/styled").StyledComponent;
-export declare const StyledSvg: import("../../style/styled").StyledComponent;
-export declare const StyledBar: import("../../style/styled").StyledComponent;
-export declare const StyledProgress: import("../../style/styled").StyledComponent;
-export declare const StyledLabelContainer: import("../../style/styled").StyledComponent;
-export declare const StyledLabel: import("../../style/styled").StyledComponent;
+export declare const StyledRoot: import("../../style").StyledComponent;
+export declare const StyledBarContainer: import("../../style").StyledComponent;
+export declare const StyledSvg: import("../../style").StyledComponent;
+export declare const getBarInlineStyles: ({ px2rem }: {
+    px2rem: any;
+}, { $strokeWidth }: CircularSharedProps) => {
+    cx: any;
+    cy: any;
+    r: any;
+};
+export declare const StyledBar: import("../../style").StyledComponent;
+export declare const StyledProgress: import("../../style").StyledComponent;
+export declare const StyledLabelContainer: import("../../style").StyledComponent;
+export declare const StyledLabel: import("../../style").StyledComponent;

package/esm/progress/circular/styled-component.js

@@ -1,98 +1,35 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { __assign } from "tslib";
 import { styled } from '../../style';
-import { getIntentColor } from '../helper';
 /**
  * CircularProgress styles are inspired from material-ui
  * https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/CircularProgress/CircularProgress.js
  */
-//Setting styles inline, in order prevent multiple styletron classes creation
-var BaseProgress = function (_a) {
-    var inlineStyles = _a.inlineStyles, props = __rest(_a, ["inlineStyles"]);
-    return (_jsx("circle", __assign({ style: inlineStyles }, props), void 0));
-};
 export var VIEWBOX_SIZE = 44;
-export var getProgressInlineStyles = function (_a) {
-    var strokeWidth = _a.strokeWidth, value = _a.value, infinite = _a.infinite;
-    var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - strokeWidth) / 2);
-    return {
-        strokeDashoffset: "".concat((((100 - value) / 100) * circumference).toFixed(3), "px"),
-    };
-};
-export var StyledRoot = styled('span', 'relative inline-flex', function (_a, _b) {
+export var getProgressInlineStyles = function (_a, _b) {
     var px2rem = _a.px2rem;
-    var $size = _b.$size;
-    return ({
-        height: px2rem($size),
-        width: px2rem($size),
-    });
-});
-export var StyledBarContainer = styled('span', 'inline-block h-full w-full', function (_a, _b) {
-    var theme = _a.theme;
-    var $color = _b.$color, $intent = _b.$intent, $infinite = _b.$infinite;
-    return (__assign({ color: $color || getIntentColor($intent, theme) }, (!$infinite
-        ? {
-            transform: 'rotate(-90deg)',
-        }
-        : {
-            animationDuration: '1.4s',
-            animationIterationCount: 'infinite',
-            animationTimingFunction: 'linear',
-            animationName: {
-                '0%': {
-                    transform: 'rotate(0deg)',
-                },
-                '100%': {
-                    transform: 'rotate(360deg)',
-                },
-            },
-        })));
+    var $strokeWidth = _b.$strokeWidth, $value = _b.$value, $infinite = _b.$infinite;
+    var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - $strokeWidth) / 2);
+    return __assign({ strokeDashoffset: "".concat((((100 - $value) / 100) * circumference).toFixed(3), "px"), cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2) }, (!$infinite ? { strokeDasharray: circumference.toFixed(3) } : {}));
+};
+export var StyledRoot = styled('span', 'relative inline-flex h-[--sw-height] w-[--sw-width]');
+export var StyledBarContainer = styled('span', 'inline-block h-full w-full color-[--sw-color]', function (_, _a) {
+    var $infinite = _a.$infinite;
+    return $infinite ? 'animate-spin' : 'rotate-270';
 });
 export var StyledSvg = styled('svg');
-export var StyledBar = styled('circle', function (_a, _b) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var $backgroundColor = _b.$backgroundColor, $strokeWidth = _b.$strokeWidth;
+export var getBarInlineStyles = function (_a, _b) {
+    var px2rem = _a.px2rem;
+    var $strokeWidth = _b.$strokeWidth;
     return ({
-        stroke: $backgroundColor || theme.spr.tag02,
-        fill: 'none',
         cx: px2rem(VIEWBOX_SIZE),
         cy: px2rem(VIEWBOX_SIZE),
         r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2),
-        strokeWidth: $strokeWidth.toString(),
     });
-});
-export var StyledProgress = styled(BaseProgress, 'stroke-current', { fill: 'none' }, function (_a, _b) {
-    var px2rem = _a.px2rem;
-    var $infinite = _b.$infinite, $value = _b.$value, $strokeWidth = _b.$strokeWidth;
-    var circumference = 2 * Math.PI * ((VIEWBOX_SIZE - $strokeWidth) / 2);
-    return __assign({ cx: px2rem(VIEWBOX_SIZE), cy: px2rem(VIEWBOX_SIZE), r: px2rem((VIEWBOX_SIZE - $strokeWidth) / 2), strokeWidth: $strokeWidth.toString() }, (!$infinite
-        ? {
-            willChange: 'strokeDashoffset',
-            transitionTimingFunction: 'ease',
-            transitionDuration: '400ms',
-            strokeDasharray: circumference.toFixed(3),
-        }
-        : {
-            animationDuration: '1.4s',
-            animationIterationCount: 'infinite',
-            animationTimingFunction: 'ease-in-out',
-            strokeDasharray: '80px, 200px',
-            strokeDashoffset: '0px',
-            animationName: {
-                '0%': {
-                    strokeDasharray: '1px, 200px',
-                    strokeDashoffset: '0px',
-                },
-                '50%': {
-                    strokeDasharray: '100px, 200px',
-                    strokeDashoffset: '-15px',
-                },
-                '100%': {
-                    strokeDasharray: '100px, 200px',
-                    strokeDashoffset: '-125px',
-                },
-            },
-        }));
+};
+export var StyledBar = styled('circle', 'fill-none stroke-width-[--sw-stroke-width] stroke-[--sw-stroke]');
+export var StyledProgress = styled('circle', 'stroke-current fill-none stroke-width-[--sw-stroke-width]', function (_, _a) {
+    var $infinite = _a.$infinite;
+    return ($infinite ? 'animate-circular' : 'ease-in-out duration-400 will-change-stroke-dash-offset');
 });
 export var StyledLabelContainer = styled('div', 'absolute flex items-center justify-center inset-0');
-export var StyledLabel = styled('div', 'typography-h6', { fontVariantNumeric: 'tabular-nums' });
+export var StyledLabel = styled('div', 'tabular-nums text-14 leading-5 font-600');

package/esm/progress/circular/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { Override } from '../../overrides';
 import { ProgressSharedProps, ProgressProps } from '../types';
-export declare type CircularSharedProps = ProgressSharedProps & {
+export type CircularSharedProps = ProgressSharedProps & {
     $size: number;
     $thickness: number;
     $strokeWidth: number;
 };
-export declare type CircularProgressProps = ProgressProps & {
+export type CircularProgressProps = ProgressProps & {
     size?: number;
     thickness?: number;
     overrides?: {

package/esm/progress/linear/LinearProgress.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement, PropsWithChildren } from 'react';
-import { LinearProgressProps } from './types';
-declare const LinearProgress: ({ intent, value, backgroundColor, color, label, className, infinite, overrides, children, }: PropsWithChildren<LinearProgressProps>) => ReactElement;
+import type { ReactElement, PropsWithChildren } from 'react';
+import type { LinearProgressProps } from './types';
+declare const LinearProgress: {
+    ({ intent, value, backgroundColor, color, label, style, className, infinite, overrides, children, ...restProps }: PropsWithChildren<LinearProgressProps>): ReactElement;
+    __standard: string;
+};
 export default LinearProgress;

package/esm/progress/linear/LinearProgress.js

@@ -1,15 +1,22 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { add$props } from '../../helpers';
 import { useOverrides } from '../../overrides';
-import { StyledBar, StyledLabel, StyledProgress, StyledRoot, getProgressInlineStyles } from './styled-component';
+import { StyledBar, StyledLabel, StyledProgress, StyledRoot } from './styled-component';
+import { getIntentColor } from '../helper';
+import { useStyle } from '../../style';
 var LinearProgress = function (_a) {
-    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, backgroundColor = _a.backgroundColor, color = _a.color, label = _a.label, className = _a.className, _d = _a.infinite, infinite = _d === void 0 ? false : _d, overrides = _a.overrides, children = _a.children;
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, backgroundColor = _a.backgroundColor, color = _a.color, label = _a.label, style = _a.style, className = _a.className, _d = _a.infinite, infinite = _d === void 0 ? false : _d, overrides = _a.overrides, children = _a.children, restProps = __rest(_a, ["intent", "value", "backgroundColor", "color", "label", "style", "className", "infinite", "overrides", "children"]);
     var sharedProps = __assign(__assign({}, add$props({ intent: intent, value: value, backgroundColor: backgroundColor, color: color, infinite: infinite })), { $withLabel: !!label });
+    var theme = useStyle().theme;
     var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Bar, StyledBar), 2), Bar = _f[0], barProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _g[0], progressProps = _g[1];
     var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _h[0], labelProps = _h[1];
-    return (_jsxs(Root, __assign({ "data-spaceweb": "linear-progress", role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined, className: className }, sharedProps, rootProps, { children: [_jsx(Bar, __assign({ "data-testid": "track" }, sharedProps, barProps, { children: children || (_jsx(Progress, __assign({ "data-testid": "filled-track", inlineStyles: getProgressInlineStyles({ value: value, infinite: infinite }) }, sharedProps, progressProps), void 0)) }), void 0), label ? (_jsx(Label, __assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0)) : null] }), void 0));
+    return (_jsxs(Root, __assign({ "data-spaceweb": "linear-progress", role: "progressbar", "aria-valuenow": !infinite ? Math.round(value) : undefined, "aria-valuemin": !infinite ? 0 : undefined, "aria-valuemax": !infinite ? 100 : undefined }, sharedProps, restProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [_jsx(Bar, __assign({ "data-testid": "track" }, sharedProps, barProps, { style: [{ '--sw-bg-color': backgroundColor || theme.spr.tag02 }, barProps === null || barProps === void 0 ? void 0 : barProps.style] }, { children: children || (_jsx(Progress, __assign({ "data-testid": "filled-track" }, sharedProps, progressProps, { style: [
+                        __assign({ '--sw-bg-color': color || getIntentColor(intent, theme) }, (!infinite ? { '--sw-width': "".concat(value, "%") } : {})),
+                        progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
+                    ] }))) })), label ? (_jsx(Label, __assign({}, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }))) : null] })));
 };
+LinearProgress.__standard = 'Component';
 export default LinearProgress;

package/esm/progress/linear/ProgressSegment.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const ProgressSegment: import("react").ForwardRefExoticComponent<Pick<import("..").ProgressProps, "color" | "className" | "value" | "intent"> & {
+declare const ProgressSegment: import("react").ForwardRefExoticComponent<Pick<import("..").ProgressProps, "value" | "color" | "className" | "intent"> & {
     overrides?: {
         Progress?: import("../../overrides").Override<import("..").ProgressSharedProps & Record<string, any>> | undefined;
     } | undefined;

package/esm/progress/linear/ProgressSegment.js

@@ -1,14 +1,23 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { useOverrides } from '../../overrides';
 import { add$props } from '../../helpers';
-import { StyledProgress, progressSegmentStyles, getProgressInlineStyles } from './styled-component';
+import { StyledProgress } from './styled-component';
+import { getIntentColor } from '../helper';
+import { useStyle } from '../../style';
 var ProgressSegment = forwardRef(function (_a, ref) {
-    var intent = _a.intent, color = _a.color, value = _a.value, overrides = _a.overrides, className = _a.className, _b = _a.first, first = _b === void 0 ? false : _b, _c = _a.last, last = _c === void 0 ? false : _c, props = __rest(_a, ["intent", "color", "value", "overrides", "className", "first", "last"]);
+    var _b = _a.intent, intent = _b === void 0 ? 'default' : _b, color = _a.color, value = _a.value, overrides = _a.overrides, className = _a.className, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, props = __rest(_a, ["intent", "color", "value", "overrides", "className", "first", "last"]);
     var sharedProps = add$props({ intent: intent, color: color, value: value, first: first, last: last });
-    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _d[0], progressProps = _d[1];
-    var mergedClassName = useMemo(function () { return [className, progressSegmentStyles, progressProps.className]; }, [className, progressProps.className]);
-    return (_jsx(Progress, __assign({ "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": "filled-track", ref: ref, inlineStyles: getProgressInlineStyles({ value: value }) }, sharedProps, props, progressProps, { className: mergedClassName }), void 0));
+    var theme = useStyle().theme;
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Progress, StyledProgress), 2), Progress = _e[0], progressProps = _e[1];
+    return (_jsx(Progress, __assign({ "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": "filled-track", ref: ref }, sharedProps, props, progressProps, { style: [
+            {
+                '--sw-bg-color': color || getIntentColor(intent, theme),
+                '--sw-width': "".concat(value, "%"),
+            },
+            progressProps === null || progressProps === void 0 ? void 0 : progressProps.style,
+        ] })));
 });
+ProgressSegment.__standard = 'Component';
 export default ProgressSegment;

package/esm/progress/linear/styled-component.d.ts

@@ -1,14 +1,4 @@
-import React from 'react';
-import { StyleUtils } from '../../types';
-export declare const getProgressInlineStyles: ({ value, infinite, }: {
-    value?: number | undefined;
-    infinite?: boolean | undefined;
-}) => React.CSSProperties;
-export declare const StyledRoot: import("../../style/styled").StyledComponent;
-export declare const StyledBar: import("../../style/styled").StyledComponent;
-export declare const StyledProgress: import("../../style/styled").StyledComponent;
-export declare const StyledLabel: import("../../style/styled").StyledComponent;
-export declare const progressSegmentStyles: ({ isRTL }: StyleUtils, { $first, $last }: {
-    $first: any;
-    $last: any;
-}) => string[];
+export declare const StyledRoot: import("../../style").StyledComponent;
+export declare const StyledBar: import("../../style").StyledComponent;
+export declare const StyledProgress: import("../../style").StyledComponent;
+export declare const StyledLabel: import("../../style").StyledComponent;

package/esm/progress/linear/styled-component.js

@@ -1,67 +1,12 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { borderRadius } from '../../helpers/longHandHelpers';
 import { styled } from '../../style';
-import { getIntentColor } from '../helper';
-//Setting styles inline, in order prevent multiple styletron classes creation
-var BaseProgress = function (_a) {
-    var inlineStyles = _a.inlineStyles, props = __rest(_a, ["inlineStyles"]);
-    return (_jsx("div", __assign({ style: inlineStyles }, props), void 0));
-};
-export var getProgressInlineStyles = function (_a) {
-    var value = _a.value, infinite = _a.infinite;
-    return (infinite ? {} : { width: "".concat(value, "%") });
-};
+import cx from 'classnames';
 export var StyledRoot = styled('div', 'w-full');
-export var StyledBar = styled('div', 'w-full relative overflow-hidden flex', function (_a, _b) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var $backgroundColor = _b.$backgroundColor;
-    return (__assign({ height: px2rem(6), backgroundColor: $backgroundColor || theme.spr.tag02 }, borderRadius(px2rem(3))));
+export var StyledBar = styled('div', 'w-full relative overflow-hidden flex forced-colors:border-1 rounded-3 h-1.5 bg-[--sw-bg-color]');
+export var StyledProgress = styled('div', 'h-full forced-colors:bg-highlight duration-400 ease-in-out bg-[--sw-bg-color] w-[--sw-width]', function (_, _a) {
+    var $infinite = _a.$infinite;
+    return ($infinite ? 'absolute animate-progress transition-width rounded-3 will-change-width' : '');
+}, function (_, _a) {
+    var $first = _a.$first, $last = _a.$last;
+    return cx({ 'rounded-l-0': $first, 'rounded-r-0': $last });
 });
-export var StyledProgress = styled(BaseProgress, 'h-full', function (_a, _b) {
-    var _c, _d, _e;
-    var theme = _a.theme, isRTL = _a.isRTL;
-    var $color = _b.$color, $intent = _b.$intent, $value = _b.$value, $infinite = _b.$infinite;
-    var progressStart = isRTL ? 'right' : 'left';
-    var progressEnd = isRTL ? 'left' : 'right';
-    return __assign(__assign(__assign({ backgroundColor: $color || getIntentColor($intent, theme), willChange: 'width' }, borderRadius('3px')), { transitionProperty: 'width', transitionTimingFunction: 'ease', transitionDuration: '400ms' }), ($infinite && {
-        width: '100%',
-        position: 'absolute',
-        animationDuration: '2.1s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'cubic-bezier(0.65, 0.815, 0.735, 0.395)',
-        animationName: {
-            '0%': (_c = {},
-                _c[progressStart] = '-200%',
-                _c[progressEnd] = '100%',
-                _c),
-            '60%': (_d = {},
-                _d[progressStart] = '107%',
-                _d[progressEnd] = '-8%',
-                _d),
-            '100%': (_e = {},
-                _e[progressStart] = '107%',
-                _e[progressEnd] = '-8%',
-                _e),
-        },
-    }));
-});
-export var StyledLabel = styled('div', 'spr-text-02 mt-3 typography-l2', { fontVariantNumeric: 'tabular-nums' });
-export var progressSegmentStyles = function (_a, _b) {
-    var isRTL = _a.isRTL;
-    var $first = _b.$first, $last = _b.$last;
-    var style = [];
-    if (isRTL) {
-        if (!$first)
-            style.push('rounded-r-0');
-        if (!$last)
-            style.push('rounded-l-0');
-    }
-    else {
-        if (!$first)
-            style.push('rounded-l-0');
-        if (!$last)
-            style.push('rounded-r-0');
-    }
-    return style;
-};
+export var StyledLabel = styled('div', 'spr-text-02 mt-3 text-12 leading-4 font-400 tabular-nums');

package/esm/progress/linear/types.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Override } from '../../overrides';
 import { ProgressProps, ProgressSharedProps } from '../types';
-export declare type LinearSharedProps = ProgressSharedProps;
-export declare type LinearProgressProps = ProgressProps & {
+export type LinearSharedProps = ProgressSharedProps;
+export type LinearProgressProps = ProgressProps & {
     overrides?: {
         Root?: Override<LinearSharedProps & Record<string, any>>;
         Bar?: Override<LinearSharedProps & Record<string, any>>;
@@ -11,7 +11,7 @@ export declare type LinearProgressProps = ProgressProps & {
     };
     label?: React.ReactNode | ((props: LinearSharedProps) => React.ReactNode);
 };
-export declare type ProgressSegmentProps = Pick<ProgressProps, 'className' | 'color' | 'intent' | 'value'> & {
+export type ProgressSegmentProps = Pick<ProgressProps, 'className' | 'color' | 'intent' | 'value'> & {
     overrides?: {
         Progress?: Override<LinearSharedProps & Record<string, any>>;
     };