@sprinklrjs/spaceweb 14.11.0 → 14.11.3

package/baseui/datepicker/styled-components.js

@@ -49,7 +49,7 @@ exports.StyledCalendarHeader = (0, style_1.styled)('div', 'box-border spr-text-p
     return ($density === constants_1.DENSITY.high ? 'min-h-6.5 w-full' : 'min-h-9 w-98');
 });
 exports.StyledCalendarHeader.displayName = 'StyledCalendarHeader';
-exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-bg-primary px-1 whitespace-no-wrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
+exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-bg-primary px-1 whitespace-nowrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
 exports.StyledMonthHeader.displayName = 'StyledMonthHeader';
 exports.StyledMonthYearSelectButton = (0, style_1.styled)('button', 'px-2 gap-1 items-center justify-around flex cursor-pointer spr-bg-primary spr-text-01 h-8', 'border-1 spr-border-primary rounded-8 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[--spr-focus-01]');
 exports.StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
@@ -57,7 +57,7 @@ exports.StyledMonthYearSelectIconContainer = (0, style_1.styled)('span', 'flex i
 exports.StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 exports.StyledMonth = (0, style_1.styled)('div', 'inline-block w-full');
 exports.StyledMonth.displayName = 'StyledMonth';
-exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-center flex w-full whitespace-no-wrap');
+exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-center flex w-full whitespace-nowrap');
 exports.StyledWeek.displayName = 'StyledWeek';
 // @ts-ignore
 function generateDayStyles(defaultCode, defaultStyle) {

package/color-picker/CustomColorSelector.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type RGBColor } from 'react-color';
 import type { CustomColorSelectorProps } from './types';
-import { ClassName, Styles } from '../types';
+import type { ClassName, Styles } from '../types';
 export declare const ColorPreview: ({ color, className, style, }: {
     color?: RGBColor | undefined;
     className?: ClassName;

package/color-picker/CustomColorSelector.js

@@ -52,6 +52,12 @@ var CustomEditableInput = function (_a) {
     var handleChange = (0, react_1.useCallback)(function (data) {
         typedValue.current = data;
     }, []);
+    (0, react_1.useEffect)(function () {
+        // Sync typedValue to value if value changes due to another input being edited
+        if (label in typedValue.current && typedValue.current[label] !== value) {
+            typedValue.current[label] = value;
+        }
+    }, [label, value]);
     (0, react_1.useEffect)(function () {
         if (!editableInput)
             return undefined;
@@ -86,21 +92,28 @@ var ColorPickerComponent = function (_props) {
     // but @types/react-color simply passes the types through CustomPicker as-is
     // We forward CustomColorSelectorProps to the component signature but internally use InternalCustomColorSelectorProps
     var props = _props;
-    var hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
+    var _hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
     // Bug in the react-color lib
     // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
     // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
     // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
     var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // react-color doesn't support alpha hexes, so we need to insert it ourselves
+    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, a);
+    var handleHueChange = (0, react_1.useCallback)(function (data) {
+        // If alpha was zero and the saturation/lightness is changed, reset alpha to full
+        if ('a' in data && data.a === 0) {
+            onChange(tslib_1.__assign(tslib_1.__assign({}, data), { a: 1 }));
+        }
+        else
+            onChange(data);
+    }, [onChange]);
     var handleChange = (0, react_1.useCallback)(function (data) {
-        var _a;
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
-            var hexValue = data.Hex;
-            var alpha = (_a = (data.A < 100 ? data.A / 100 : a)) !== null && _a !== void 0 ? _a : 1;
-            var newHex = alpha !== undefined && alpha !== 1 ? hexValue + Math.floor(alpha * 255).toString(16) : hexValue;
-            var parsedRgba = (0, colors_1.hexToRgb)(newHex);
+            var newHex = data.Hex;
+            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
             var newRgba = enableAlphaSelector ? parsedRgba : tslib_1.__assign(tslib_1.__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
             onChange(newRgba);
             // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
@@ -109,17 +122,21 @@ var ColorPickerComponent = function (_props) {
                 onChangeComplete({ rgb: newRgba });
         }
         else if (data.R || data.G || data.B || data.A) {
+            var _a = tslib_1.__read(Object.keys(data), 1), changedKey = _a[0];
+            // Reset alpha IF:
+            // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
+            var resetAlpha = changedKey !== 'A' && a === 0 && data[changedKey] !== { R: r, G: g, B: b }[changedKey];
             var newRgba = {
                 r: getNumberWithFallback(data.R, r),
                 g: getNumberWithFallback(data.G, g),
                 b: getNumberWithFallback(data.B, b),
-                a: enableAlphaSelector ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
+                a: enableAlphaSelector && !resetAlpha ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
             };
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
     }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
-    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative w-full rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props)) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex gap-2 justify-between ml-2" }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col items-start gap-2" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, tslib_1.__assign({ pointer: CustomPointer, radius: "24px" }, props)) })), (0, jsx_runtime_1.jsx)(exports.ColorPreview, { color: rgb })] })), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: '261px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Alpha, tslib_1.__assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "grid w-full gap-2", 
+    return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex gap-2 justify-between ml-2" }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col items-start gap-2" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, tslib_1.__assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsx)(exports.ColorPreview, { color: rgb })] })), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: '261px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Alpha, tslib_1.__assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "grid w-full gap-2", 
                         // 5 columns with alpha, 4 columns without
                         style: {
                             gridTemplateColumns: "".concat(enableAlphaSelector ? '73' : '99', "fr").concat(' 51fr'.repeat(enableAlphaSelector ? 4 : 3)),

package/date-picker/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { InputProps } from '../input';
+import { type ReactElement } from 'react';
+import { type InputProps } from '../input';
 type DatePickerInputProps = InputProps & {
     isOpen?: boolean;
     autoSizeInput?: boolean;

package/date-picker/DatePickerInput.js

@@ -84,6 +84,7 @@ var DatePickerInput = function (_a) {
                     var $intent = _a.$intent;
                     return (0, classNames_1.default)({
                         'spr-focus-01': isOpen && $intent === 'default',
+                        'focus-within:spr-focus-01': $intent === 'default',
                         'w-auto': autoSizeInput,
                     });
                 },

package/esm/baseui/datepicker/styled-components.js

@@ -46,7 +46,7 @@ export var StyledCalendarHeader = styled('div', 'box-border spr-text-primary ite
     return ($density === DENSITY.high ? 'min-h-6.5 w-full' : 'min-h-9 w-98');
 });
 StyledCalendarHeader.displayName = 'StyledCalendarHeader';
-export var StyledMonthHeader = styled('div', 'spr-text-01 spr-bg-primary px-1 whitespace-no-wrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
+export var StyledMonthHeader = styled('div', 'spr-text-01 spr-bg-primary px-1 whitespace-nowrap border-0 border-b-1 spr-border-secondary border-b-solid spr-text-primary block text-center flex justify-center');
 StyledMonthHeader.displayName = 'StyledMonthHeader';
 export var StyledMonthYearSelectButton = styled('button', 'px-2 gap-1 items-center justify-around flex cursor-pointer spr-bg-primary spr-text-01 h-8', 'border-1 spr-border-primary rounded-8 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[--spr-focus-01]');
 StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
@@ -54,7 +54,7 @@ export var StyledMonthYearSelectIconContainer = styled('span', 'flex items-cente
 StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
 export var StyledMonth = styled('div', 'inline-block w-full');
 StyledMonth.displayName = 'StyledMonth';
-export var StyledWeek = styled('div', 'mb-0.5 justify-center flex w-full whitespace-no-wrap');
+export var StyledWeek = styled('div', 'mb-0.5 justify-center flex w-full whitespace-nowrap');
 StyledWeek.displayName = 'StyledWeek';
 // @ts-ignore
 function generateDayStyles(defaultCode, defaultStyle) {

package/esm/color-picker/CustomColorSelector.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import { type RGBColor } from 'react-color';
 import type { CustomColorSelectorProps } from './types';
-import { ClassName, Styles } from '../types';
+import type { ClassName, Styles } from '../types';
 export declare const ColorPreview: ({ color, className, style, }: {
     color?: RGBColor | undefined;
     className?: ClassName;

package/esm/color-picker/CustomColorSelector.js

@@ -5,7 +5,7 @@ import { CustomPicker } from 'react-color';
 import { Alpha, EditableInput, Hue, Saturation } from 'react-color/lib/components/common';
 import { Stack } from '../stack';
 import { Box } from '../box';
-import { hexToRgb, isValidHex } from '../helpers/colors';
+import { hexToRgb, isValidHex, normalizeHexWithAlpha } from '../helpers/colors';
 import TransparentBackground from '../icon/components/transparentBackground';
 var CustomPointer = function () { return (_jsx(Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
@@ -48,6 +48,12 @@ var CustomEditableInput = function (_a) {
     var handleChange = useCallback(function (data) {
         typedValue.current = data;
     }, []);
+    useEffect(function () {
+        // Sync typedValue to value if value changes due to another input being edited
+        if (label in typedValue.current && typedValue.current[label] !== value) {
+            typedValue.current[label] = value;
+        }
+    }, [label, value]);
     useEffect(function () {
         if (!editableInput)
             return undefined;
@@ -82,21 +88,28 @@ var ColorPickerComponent = function (_props) {
     // but @types/react-color simply passes the types through CustomPicker as-is
     // We forward CustomColorSelectorProps to the component signature but internally use InternalCustomColorSelectorProps
     var props = _props;
-    var hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
+    var _hex = props.hex, rgb = props.rgb, enableAlphaSelector = props.enableAlphaSelector, onChange = props.onChange, onChangeComplete = props.onChangeComplete, renderColorSuggestionPanel = props.renderColorSuggestionPanel;
     // Bug in the react-color lib
     // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/hue.js#L33
     // when left === containerWidth it return 360 which return 0 in hsl value the pointer shifts to the left most
     // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
     var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // react-color doesn't support alpha hexes, so we need to insert it ourselves
+    var hex = normalizeHexWithAlpha(_hex, a);
+    var handleHueChange = useCallback(function (data) {
+        // If alpha was zero and the saturation/lightness is changed, reset alpha to full
+        if ('a' in data && data.a === 0) {
+            onChange(__assign(__assign({}, data), { a: 1 }));
+        }
+        else
+            onChange(data);
+    }, [onChange]);
     var handleChange = useCallback(function (data) {
-        var _a;
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
-            var hexValue = data.Hex;
-            var alpha = (_a = (data.A < 100 ? data.A / 100 : a)) !== null && _a !== void 0 ? _a : 1;
-            var newHex = alpha !== undefined && alpha !== 1 ? hexValue + Math.floor(alpha * 255).toString(16) : hexValue;
-            var parsedRgba = hexToRgb(newHex);
+            var newHex = data.Hex;
+            var parsedRgba = hexToRgb(data.Hex);
             var newRgba = enableAlphaSelector ? parsedRgba : __assign(__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
             onChange(newRgba);
             // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
@@ -105,17 +118,21 @@ var ColorPickerComponent = function (_props) {
                 onChangeComplete({ rgb: newRgba });
         }
         else if (data.R || data.G || data.B || data.A) {
+            var _a = __read(Object.keys(data), 1), changedKey = _a[0];
+            // Reset alpha IF:
+            // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
+            var resetAlpha = changedKey !== 'A' && a === 0 && data[changedKey] !== { R: r, G: g, B: b }[changedKey];
             var newRgba = {
                 r: getNumberWithFallback(data.R, r),
                 g: getNumberWithFallback(data.G, g),
                 b: getNumberWithFallback(data.B, b),
-                a: enableAlphaSelector ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
+                a: enableAlphaSelector && !resetAlpha ? getNumberWithFallback(data.A, (a !== null && a !== void 0 ? a : 1) * 100) / 100 : 1,
             };
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
     }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
-    return (_jsxs(Stack, __assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, _jsx(Box, __assign({ className: "relative w-full rounded-16 overflow-hidden", style: { height: '150px' } }, { children: _jsx(Saturation, __assign({}, props)) })), _jsxs(Stack, __assign({ direction: "vertical", gap: 2 }, { children: [_jsx(Box, __assign({ className: "flex gap-2 justify-between ml-2" }, { children: _jsxs(Box, __assign({ className: "flex flex-col items-start gap-2" }, { children: [_jsxs(Box, __assign({ className: "flex items-center gap-2" }, { children: [_jsx(Box, __assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: _jsx(Hue, __assign({ pointer: CustomPointer, radius: "24px" }, props)) })), _jsx(ColorPreview, { color: rgb })] })), enableAlphaSelector ? (_jsx(Box, __assign({ className: "relative h-3", style: { width: '261px' } }, { children: _jsx(Alpha, __assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), _jsxs(Box, __assign({ className: "grid w-full gap-2", 
+    return (_jsxs(Stack, __assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, _jsx(Box, __assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: _jsx(Saturation, __assign({}, props, { onChange: handleHueChange })) })), _jsxs(Stack, __assign({ direction: "vertical", gap: 2 }, { children: [_jsx(Box, __assign({ className: "flex gap-2 justify-between ml-2" }, { children: _jsxs(Box, __assign({ className: "flex flex-col items-start gap-2" }, { children: [_jsxs(Box, __assign({ className: "flex items-center gap-2" }, { children: [_jsx(Box, __assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: _jsx(Hue, __assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), _jsx(ColorPreview, { color: rgb })] })), enableAlphaSelector ? (_jsx(Box, __assign({ className: "relative h-3", style: { width: '261px' } }, { children: _jsx(Alpha, __assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), _jsxs(Box, __assign({ className: "grid w-full gap-2", 
                         // 5 columns with alpha, 4 columns without
                         style: {
                             gridTemplateColumns: "".concat(enableAlphaSelector ? '73' : '99', "fr").concat(' 51fr'.repeat(enableAlphaSelector ? 4 : 3)),

package/esm/date-picker/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { InputProps } from '../input';
+import { type ReactElement } from 'react';
+import { type InputProps } from '../input';
 type DatePickerInputProps = InputProps & {
     isOpen?: boolean;
     autoSizeInput?: boolean;

package/esm/date-picker/DatePickerInput.js

@@ -79,6 +79,7 @@ var DatePickerInput = function (_a) {
                     var $intent = _a.$intent;
                     return cx({
                         'spr-focus-01': isOpen && $intent === 'default',
+                        'focus-within:spr-focus-01': $intent === 'default',
                         'w-auto': autoSizeInput,
                     });
                 },

package/esm/helpers/colors.d.ts

@@ -16,3 +16,4 @@ export declare function getContrastRatio(color1: string, color2: string): number
 export declare function RgbToHsl({ r, g, b, a }: RGBColor): HSLA;
 export declare function HslToRgb(hsl: HSLA): RGBColor;
 export declare function noAlphaHex(inputHex?: string): string | undefined;
+export declare function normalizeHexWithAlpha<T extends string | undefined>(hex: T, alpha: number | undefined): T;

package/esm/helpers/colors.js

@@ -14,18 +14,19 @@ export var isValidHex = function (hex) {
  * @return {{r, g, b, a}} an object with rgba
  */
 export function hexToRgb(_hex) {
-    var hex = _hex.replace(/^#?/, '#');
+    var hex = _hex.replace(/^#?/, '');
     if (!isValidHex(hex))
         return { r: 0, g: 0, b: 0 };
     var isShortHand = hex.length === 3 || hex.length === 4;
-    var r = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(1, 3), 16);
-    var g = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(3, 5), 16);
-    var b = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(5, 7), 16);
-    var a = parseInt(isShortHand ? hex.substring(4, 5).repeat(2) : hex.substring(7, 9), 16);
+    var r = parseInt(isShortHand ? hex.substring(0, 1).repeat(2) : hex.substring(0, 2), 16);
+    var g = parseInt(isShortHand ? hex.substring(1, 2).repeat(2) : hex.substring(2, 4), 16);
+    var b = parseInt(isShortHand ? hex.substring(2, 3).repeat(2) : hex.substring(4, 6), 16);
+    var a = parseInt(isShortHand ? hex.substring(3, 4).repeat(2) : hex.substring(6, 8), 16);
     return __assign({ r: r, g: g, b: b }, (a < 255 ? { a: a / 255 } : undefined));
 }
 export function RgbToHex(_a) {
     var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    // eslint-disable-next-line react-google-translate/no-return-text-nodes -- This isn't a React Element
     return "#".concat(__spreadArray([r, g, b], __read((a < 1 ? [Math.round(a * 255)] : [])), false).map(function (n) { return (Number.isNaN(n) ? 10 : Math.round(Math.min(Math.max(n, 0), 255))).toString(16).padStart(2, '0'); })
         .join(''));
 }
@@ -84,3 +85,11 @@ export function noAlphaHex(inputHex) {
         return inputHex.slice(0, -2);
     return inputHex;
 }
+export function normalizeHexWithAlpha(hex, alpha) {
+    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+        return hex;
+    return (hex +
+        Math.floor(alpha * 255)
+            .toString(16)
+            .padStart(2, '0'));
+}

package/esm/list/list.d.ts

@@ -6,6 +6,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
 } & {
     children?: React.ReactNode;
     virtual?: boolean | undefined;
+    keepFirstItemMounted?: boolean | undefined;
     overrides?: {
         Root?: import("../overrides").Override<Record<string, any>> | undefined;
     } | undefined;

package/esm/list/list.js

@@ -1,12 +1,12 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { useOverrides } from '../overrides';
 import useCombinedRef, { combineRefs } from '../hooks/useCombinedRef';
 import { LIST_MIN_WIDTH, StyledList } from './styled-component';
 import { Box } from '../box';
-import { measureElement } from './utils';
+import { customRangeExtractor, measureElement } from './utils';
 import { DEFAULT_LIST_ITEM_HEIGHT, DEFAULT_OVER_SCAN_COUNT } from './constants';
 import { useStyle } from '../style';
 var getCloneElement = function (item, virtualRow, totalCount) {
@@ -21,8 +21,8 @@ var getCloneElement = function (item, virtualRow, totalCount) {
     });
 };
 var List = React.forwardRef(function (_a, forwardedRef) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className"]);
-    var _f = __read(useOverrides(overrides.Root, StyledList), 2), Root = _f[0], rootProps = _f[1];
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, virtual = _a.virtual, scrollElement = _a.scrollElement, _c = _a.overscanCount, overscanCount = _c === void 0 ? DEFAULT_OVER_SCAN_COUNT : _c, _d = _a.estimateItemSize, estimateItemSize = _d === void 0 ? DEFAULT_LIST_ITEM_HEIGHT : _d, _e = _a.role, role = _e === void 0 ? 'list' : _e, autoScrollToSelectedItem = _a.autoScrollToSelectedItem, style = _a.style, className = _a.className, _f = _a.keepFirstItemMounted, keepFirstItemMounted = _f === void 0 ? false : _f, restProps = __rest(_a, ["overrides", "children", "virtual", "scrollElement", "overscanCount", "estimateItemSize", "role", "autoScrollToSelectedItem", "style", "className", "keepFirstItemMounted"]);
+    var _g = __read(useOverrides(overrides.Root, StyledList), 2), Root = _g[0], rootProps = _g[1];
     var parentRef = React.useRef(null);
     var combinedRef = useCombinedRef(parentRef, forwardedRef);
     var childrenArr = React.Children.toArray(children);
@@ -33,6 +33,7 @@ var List = React.forwardRef(function (_a, forwardedRef) {
         estimateSize: function () { return estimateItemSize; },
         overscan: overscanCount,
         measureElement: measureElement,
+        rangeExtractor: keepFirstItemMounted ? customRangeExtractor : defaultRangeExtractor,
     });
     React.useEffect(function () {
         if (!autoScrollToSelectedItem) {

package/esm/list/types.d.ts

@@ -1,7 +1,7 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { Override } from '../overrides/types';
-import { SpacewebComponentProps } from '../types';
-import { StatefulTooltipProps } from '../tooltip';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { Override } from '../overrides/types';
+import type { SpacewebComponentProps } from '../types';
+import type { StatefulTooltipProps } from '../tooltip';
 export type AlignItems = 'start' | 'center';
 export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
 export type ListItemSharedProps = {
@@ -36,6 +36,10 @@ export type ListItemProps = SpacewebComponentProps & {
 export type ListProps = SpacewebComponentProps & {
     children?: ReactNode;
     virtual?: boolean;
+    /**
+     * Forces the first item to stay mounted even when out of overscan range in virtualized list
+     */
+    keepFirstItemMounted?: boolean;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };

package/esm/list/utils.d.ts

@@ -1,2 +1,6 @@
-import type { measureElement as measureElementType } from '@tanstack/react-virtual';
+import type { measureElement as measureElementType, Range } from '@tanstack/react-virtual';
 export declare const measureElement: typeof measureElementType;
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export declare const customRangeExtractor: (range: Range) => number[];

package/esm/list/utils.js

@@ -1,3 +1,5 @@
+import { __read, __spreadArray } from "tslib";
+import { defaultRangeExtractor } from '@tanstack/react-virtual';
 var parseMeasurement = function (str) { return parseFloat(str) || 0; };
 // by default react-virtual uses getBoundingClientRect to calculate dimensions.
 // overriding it to use height + margin, so that we do not have to wrap each ListItem with another element
@@ -8,3 +10,16 @@ export var measureElement = function (element, instance) {
     var boundingRect = element.getBoundingClientRect();
     return instance.options.horizontal ? boundingRect.width + marginX : boundingRect.height + marginY;
 };
+/**
+ * Keeps the first item mounted even when it falls outside the range.
+ */
+export var customRangeExtractor = function (range) {
+    var defaultIndices = defaultRangeExtractor(range);
+    // Find the actual start index of the range including overscan
+    var virtualRangeStart = Math.max(range.startIndex - range.overscan, 0);
+    // If the first item is already in the virtual range, return the default indices.
+    if (virtualRangeStart === 0)
+        return defaultIndices;
+    // Otherwise, prepend the first item to the default indices.
+    return __spreadArray([0], __read(defaultIndices), false);
+};

package/esm/menu/ActionsIconButton.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import { type IconButtonProps } from '../button';
-export type ActionsIconButtonProps = IconButtonProps;
-declare const ActionsIconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type ActionsIconButtonProps = IconButtonProps & {
+    /** When true, the action stays visible even when the row is not hovered or keyboard-highlighted. */
+    alwaysVisible?: boolean;
+};
+declare const ActionsIconButton: import("react").ForwardRefExoticComponent<ActionsIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default ActionsIconButton;

package/esm/menu/StatefulSubMenu.d.ts

@@ -31,6 +31,7 @@ declare const StatefulSubMenu: import("react").ForwardRefExoticComponent<Omit<Me
                 } & {
                     children?: ReactNode;
                     virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
                     overrides?: {
                         Root?: Override<Record<string, any>> | undefined;
                     } | undefined;

package/esm/menu/SubMenu.d.ts

@@ -32,6 +32,7 @@ declare const SubMenu: import("react").ForwardRefExoticComponent<Omit<MenuProps,
                 } & {
                     children?: ReactNode;
                     virtual?: boolean | undefined;
+                    keepFirstItemMounted?: boolean | undefined;
                     overrides?: {
                         Root?: Override<Record<string, any>> | undefined;
                     } | undefined;

package/esm/menu/SubMenu.js

@@ -34,7 +34,8 @@ var SubMenu = forwardRef(function (_a, ref) {
     var itemsToRender = items.length
         ? _flatten(items.map(function (item) { var _a; return (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(item, onItemSelect)) !== null && _a !== void 0 ? _a : defaultItemRenderer(item, onItemSelect); }))
         : (_c = emptyStateRenderer === null || emptyStateRenderer === void 0 ? void 0 : emptyStateRenderer(currentHeaderItem)) !== null && _c !== void 0 ? _c : null;
-    return (_jsxs(MenuOverriden, __assign({ "aria-label": "Menu" }, props, menuProps, { ref: ref }, { children: [currentHeaderItem && (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), _jsx(HeaderMenuItem, __assign({ startEnhancer: _jsx(ChevronLeft, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
+    var shouldPinHeader = !!(props.virtual && currentHeaderItem !== undefined);
+    return (_jsxs(MenuOverriden, __assign({ "aria-label": "Menu" }, props, menuProps, { keepFirstItemMounted: shouldPinHeader, ref: ref }, { children: [currentHeaderItem && (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), _jsx(HeaderMenuItem, __assign({ startEnhancer: _jsx(ChevronLeft, {}), "aria-label": locale.menu.subMenuBackButtonAriaLabel }, (_b = {}, _b[SUBMENU_BACK_ROW_ATTR] = '', _b), menuItemProps, { className: [
                             'sticky top-0 w-full z-1 mb-1',
                             function (_, _a) {
                                 var $highlighted = _a.$highlighted;

package/esm/menu/menu-item.js

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 import { Box } from '../box';
@@ -62,7 +62,9 @@ var ACTION_CONTAINER_HANDLER_PROPS = {
 };
 function MenuActionContainer(_a) {
     var sharedProps = _a.sharedProps, endEnhancer = _a.endEnhancer, renderedActions = _a.renderedActions;
-    return (_jsxs(Box, __assign({ className: cx('flex items-center gap-1 opacity-0 pointer-events-none', 'group-hover:opacity-100 group-hover:pointer-events-auto', 'group-focus-within:opacity-100 group-focus-within:pointer-events-auto', sharedProps.$highlighted ? 'opacity-100 pointer-events-auto' : ''), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions, typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
+    return (_jsxs(Box, __assign({ className: cx('flex items-center gap-1 pointer-events-none', 'group-hover:visible group-hover:pointer-events-auto', 'group-focus-within:visible group-focus-within:pointer-events-auto', 
+        // Use visibility (not opacity) so alwaysVisible children can override with `visible`.
+        sharedProps.$highlighted ? 'visible pointer-events-auto' : 'invisible'), "data-menu-action-container": "true", role: "group" }, ACTION_CONTAINER_HANDLER_PROPS, { children: [renderedActions.map(function (action) { return (_jsx(Box, __assign({ className: action.props.alwaysVisible ? 'visible opacity-100 pointer-events-auto' : undefined }, { children: action }), action.key)); }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer !== null && endEnhancer !== void 0 ? endEnhancer : null] })));
 }
 function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     var props = {};
@@ -74,20 +76,28 @@ function buildListItemAriaProps(itemRole, selected, ChildMenu) {
     }
     return props;
 }
+function flattenActionElements(actions) {
+    return React.Children.toArray(actions).flatMap(function (node) {
+        if (React.isValidElement(node)) {
+            return node.type === React.Fragment ? flattenActionElements(node.props.children) : [node];
+        }
+        return [];
+    });
+}
 function useResolvedMenuEndEnhancer(resolvedItemActions, shouldRenderActions, endEnhancer, ChildMenu) {
     var renderedActions = useMemo(function () {
         return shouldRenderActions
-            ? React.Children.map(resolvedItemActions, function (action, index) {
+            ? flattenActionElements(resolvedItemActions).map(function (action, index) {
                 var _a;
-                if (!React.isValidElement(action))
-                    return action;
-                return React.cloneElement(action, { key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index) });
+                return React.cloneElement(action, {
+                    key: (_a = action.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index),
+                });
             })
             : null;
     }, [resolvedItemActions, shouldRenderActions]);
     return useMemo(function () {
         if (shouldRenderActions) {
-            return function (sharedProps) { return (_jsx(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions })); };
+            return function (sharedProps) { return (_jsx(MenuActionContainer, { sharedProps: sharedProps, endEnhancer: endEnhancer, renderedActions: renderedActions !== null && renderedActions !== void 0 ? renderedActions : [] })); };
         }
         if (endEnhancer)
             return endEnhancer;

package/esm/menu/menu.d.ts

@@ -14,6 +14,7 @@ declare const _default: import("react").MemoExoticComponent<import("react").Forw
         } & {
             children?: import("react").ReactNode;
             virtual?: boolean | undefined;
+            keepFirstItemMounted?: boolean | undefined;
             overrides?: {
                 Root?: import("../overrides").Override<Record<string, any>> | undefined;
             } | undefined;

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

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { CircularProgressProps } from './types';
+import type { ReactElement } from 'react';
+import type { CircularProgressProps } from './types';
 declare const CircularProgress: {
-    ({ intent, infinite, label, backgroundColor, value, className, style, color, size, thickness, overrides, }: CircularProgressProps): ReactElement;
+    ({ 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,4 +1,4 @@
-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';
@@ -6,7 +6,7 @@ import { StyledBar, StyledBarContainer, StyledLabel, StyledLabelContainer, Style
 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, 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;
+    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 });
@@ -17,7 +17,7 @@ var CircularProgress = function (_a) {
     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, rootProps, { style: [
+    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),

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

@@ -1,7 +1,7 @@
-import { ReactElement, PropsWithChildren } from 'react';
-import { LinearProgressProps } from './types';
+import type { ReactElement, PropsWithChildren } from 'react';
+import type { LinearProgressProps } from './types';
 declare const LinearProgress: {
-    ({ intent, value, backgroundColor, color, label, style, className, infinite, overrides, children, }: PropsWithChildren<LinearProgressProps>): ReactElement;
+    ({ 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,4 +1,4 @@
-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';
@@ -6,14 +6,14 @@ import { StyledBar, StyledLabel, StyledProgress, StyledRoot } from './styled-com
 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, style = _a.style, 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 }, sharedProps, 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: [
+    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] })));