@sprinklrjs/spaceweb 14.14.0 → 14.14.2

package/banner/banner.js

@@ -11,8 +11,8 @@ var button_1 = require("../button");
 var typography_1 = require("../typography");
 var base_button_1 = require("../base-button");
 // icons
-var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
-var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var warning_clr_1 = tslib_1.__importDefault(require("../icon/components/warning-clr"));
+var error_solid_1 = tslib_1.__importDefault(require("../icon/components/error-solid"));
 var info_circle_1 = tslib_1.__importDefault(require("../icon/components/info-circle"));
 var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
 var close_1 = tslib_1.__importDefault(require("../icon/components/close"));
@@ -29,8 +29,8 @@ var styled_components_1 = require("../link/styled-components");
 var cvaConfig_1 = require("./cvaConfig");
 var box_1 = require("../box");
 var intentToIconMap = {
-    error: { BaseIcon: alert_solid_1.default },
-    warning: { BaseIcon: warning_solid_1.default },
+    error: { BaseIcon: error_solid_1.default },
+    warning: { BaseIcon: warning_clr_1.default },
     success: { BaseIcon: tickCircle_solid_1.default },
     info: { BaseIcon: info_circle_1.default },
 };

package/color-picker/CustomColorSelector.js

@@ -10,6 +10,7 @@ var stack_1 = require("../stack");
 var box_1 = require("../box");
 var colors_1 = require("../helpers/colors");
 var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
+var constants_1 = require("./constants");
 var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
         return rtlCompatible({ transform: 'translate(-50%, -2px)' });
@@ -64,6 +65,11 @@ var CustomEditableInput = function (_a) {
         // @ts-ignore -- @types/react-color doesn't properly include types for input
         var input = editableInput.input;
         var fireChange = function () {
+            var inputValue = input.value;
+            if (inputValue === String(value))
+                return;
+            if (label === 'Hex' && (0, colors_1.normalizeHex)(inputValue) === (0, colors_1.normalizeHex)(String(value)))
+                return;
             onChange(typedValue.current);
         };
         var keydownHandler = function (event) {
@@ -76,16 +82,15 @@ var CustomEditableInput = function (_a) {
             input.removeEventListener('blur', fireChange);
             input.removeEventListener('keydown', keydownHandler);
         };
-    }, [editableInput, label, onChange]);
+    }, [editableInput, label, onChange, value]);
     return ((0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
 };
 function getNumberWithFallback(input, fallback) {
-    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
-    if (!input)
-        return _fallback;
-    if (Number.isNaN(+input))
-        return _fallback;
-    return parseInt(input);
+    if (fallback === void 0) { fallback = 0; }
+    var trimmedInput = input === null || input === void 0 ? void 0 : input.trim();
+    if (!trimmedInput || Number.isNaN(+trimmedInput))
+        return fallback;
+    return parseInt(trimmedInput);
 }
 var ColorPickerComponent = function (_props) {
     // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
@@ -99,8 +104,9 @@ var ColorPickerComponent = function (_props) {
     // 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;
+    var hexInput = (_hex === null || _hex === void 0 ? void 0 : _hex.toLowerCase()) === 'transparent' ? '#000000' : _hex;
     // react-color doesn't support alpha hexes, so we need to insert it ourselves
-    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, a);
+    var hex = (0, colors_1.normalizeHexWithAlpha)(hexInput, 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) {
@@ -113,15 +119,19 @@ var ColorPickerComponent = function (_props) {
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
             var newHex = data.Hex;
-            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
+            if (newHex.toLowerCase() === 'transparent' && hex !== constants_1.TRANSPARENT_HEX) {
+                onChange(constants_1.TRANSPARENT_RGBA);
+                onChangeComplete({ rgb: constants_1.TRANSPARENT_RGBA });
+                return;
+            }
+            if (!(0, colors_1.isValidHex)(newHex))
+                return;
+            var parsedRgba = (0, colors_1.hexToRgb)(newHex);
             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
-            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
-            if ((0, colors_1.isValidHex)(newHex))
-                onChangeComplete({ rgb: newRgba });
+            onChangeComplete({ rgb: newRgba });
         }
-        else if (data.R || data.G || data.B || data.A) {
+        else if ('R' in data || 'G' in data || 'B' in data || 'A' in data) {
             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
@@ -135,7 +145,7 @@ var ColorPickerComponent = function (_props) {
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
-    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a, hex]);
     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: {

package/color-picker/constants.d.ts

@@ -1,3 +1,4 @@
+import type { RGBColor } from 'react-color';
 export declare const GRADIENT_TYPE: {
     LINEAR: string;
     RADIAL: string;
@@ -12,3 +13,5 @@ export declare const COLOR_TYPE: {
     readonly GRADIENT: "gradient";
 };
 export declare const SWATCHES_PER_ROW = 10;
+export declare const TRANSPARENT_HEX = "#00000000";
+export declare const TRANSPARENT_RGBA: RGBColor;

package/color-picker/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
+exports.TRANSPARENT_RGBA = exports.TRANSPARENT_HEX = exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
 exports.GRADIENT_TYPE = {
     LINEAR: 'linear',
     RADIAL: 'radial',
@@ -11,3 +11,5 @@ exports.COLOR_TYPE = {
     GRADIENT: 'gradient',
 };
 exports.SWATCHES_PER_ROW = 10;
+exports.TRANSPARENT_HEX = '#00000000';
+exports.TRANSPARENT_RGBA = { r: 0, g: 0, b: 0, a: 0 };

package/date-picker/StatelessDatePicker.js

@@ -27,9 +27,9 @@ var themeHelpers_1 = require("../helpers/themeHelpers");
 var style_1 = require("../style");
 // eslint-disable-next-line max-statements -- required for function component
 var StatelessDatePicker = function (_props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var theme = (0, style_1.useStyle)().theme;
-    var _d = (0, context_1.useContextualFormProps)(_props), onChange = _d.onChange, onBlur = _d.onBlur, _e = _d.adapter, adapter = _e === void 0 ? date_fns_adapter_1.default : _e, _f = _d.size, size = _f === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _f, _g = _d.formatString, formatString = _g === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _g, _h = _d.isOpen, isOpen = _h === void 0 ? false : _h, onFocus = _d.onFocus, clearable = _d.clearable, _displayValueAtRangeIndex = _d.displayValueAtRangeIndex, _j = _d.variant, variant = _j === void 0 ? 'default' : _j, overrides = _d.overrides, intent = _d.intent, _value = _d.value, formatDisplayValue = _d.formatDisplayValue, _k = _d.autoSizeInput, autoSizeInput = _k === void 0 ? false : _k, weekStartsOn = _d.weekStartsOn, _l = _d.timezone, timezone = _l === void 0 ? (0, getSystemTzName_1.getSystemTzName)() : _l, _m = _d.showTimezone, showTimezone = _m === void 0 ? false : _m, timezoneOptions = _d.timezoneOptions, props = tslib_1.__rest(_d, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
+    var _e = (0, context_1.useContextualFormProps)(_props), onChange = _e.onChange, onBlur = _e.onBlur, _f = _e.adapter, adapter = _f === void 0 ? date_fns_adapter_1.default : _f, _g = _e.size, size = _g === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _g, _h = _e.formatString, formatString = _h === void 0 ? constants_1.DEFAULT_FORMAT_STRING : _h, _j = _e.isOpen, isOpen = _j === void 0 ? false : _j, onFocus = _e.onFocus, clearable = _e.clearable, _displayValueAtRangeIndex = _e.displayValueAtRangeIndex, _k = _e.variant, variant = _k === void 0 ? 'default' : _k, overrides = _e.overrides, intent = _e.intent, _value = _e.value, formatDisplayValue = _e.formatDisplayValue, _l = _e.autoSizeInput, autoSizeInput = _l === void 0 ? false : _l, weekStartsOn = _e.weekStartsOn, _m = _e.timezone, timezone = _m === void 0 ? (0, getSystemTzName_1.getSystemTzName)() : _m, _o = _e.showTimezone, showTimezone = _o === void 0 ? false : _o, timezoneOptions = _e.timezoneOptions, props = tslib_1.__rest(_e, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
     var locale = (0, locale_1.useLocale)();
     var dateHelpers = React.useMemo(function () { return new date_helpers_1.default(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return (0, utils_1.prepareLocale)(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -44,8 +44,8 @@ var StatelessDatePicker = function (_props) {
     }, [_value, timezone, timezoneOptions]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _o = tslib_1.__read(React.useState(false), 2), autoFocusCalendar = _o[0], setAutoFocusCalendar = _o[1];
-    var _p = tslib_1.__read(React.useState(false), 2), error = _p[0], setError = _p[1];
+    var _p = tslib_1.__read(React.useState(false), 2), autoFocusCalendar = _p[0], setAutoFocusCalendar = _p[1];
+    var _q = tslib_1.__read(React.useState(false), 2), error = _q[0], setError = _q[1];
     React.useEffect(function () {
         var _a = (0, utils_2.getMinMaxDateInTimezone)({
             maxDate: props.maxDate,
@@ -61,7 +61,9 @@ var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers, timezone, timezoneOptions]);
     var screenReaderMsgId = (0, useUniqueId_1.default)();
-    var _q = props["aria-describedby"], ariaDescribedBy = _q === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _q;
+    var screenReaderMsgDescribedById = "datepicker--screenreader--message--input-".concat(screenReaderMsgId);
+    var baseAriaDescribedBy = (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : '';
+    var ariaDescribedBy = "".concat(screenReaderMsgDescribedById, " ").concat(baseAriaDescribedBy).trim();
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = (0, utils_1.normalizeDashes)(formatString);
         if (formatDisplayValue) {
@@ -140,11 +142,11 @@ var StatelessDatePicker = function (_props) {
     var _r = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput_1.default), 2), InputComponent = _r[0], inputProps = _r[1];
     var _s = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, popover_2.Popover), 2), PopoverComponent = _s[0], popoverProps = _s[1];
     var _t = tslib_1.__read((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, styled_components_1.StyledInputWrapper), 2), InputWrapper = _t[0], inputWrapperProps = _t[1];
-    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : formatString.toLowerCase();
+    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : formatString.toLowerCase();
     // if calendar is close, open it on click otherwise close the calendar
     var popoverHandleClick = isOpen ? onBlur : onFocus;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, tslib_1.__assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : popoverHandleClick, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, tslib_1.__assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, tslib_1.__assign({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, tslib_1.__assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_c = props.required) !== null && _c !== void 0 ? _c : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopoverComponent, tslib_1.__assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: popover_1.PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? noop_1.default : popoverHandleClick, content: (0, jsx_runtime_1.jsx)(DatePickerContent_1.DatePickerContent, tslib_1.__assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: (0, jsx_runtime_1.jsx)(InputWrapper, tslib_1.__assign({}, inputWrapperProps, { children: (0, jsx_runtime_1.jsx)(InputComponent, tslib_1.__assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_d = props.required) !== null && _d !== void 0 ? _d : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
-                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "relative" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ id: ariaDescribedBy, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "relative" }, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ id: screenReaderMsgDescribedById, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
 };
 exports.StatelessDatePicker = StatelessDatePicker;

package/esm/banner/banner.js

@@ -9,8 +9,8 @@ import { IconButton } from '../button';
 import { Typography } from '../typography';
 import { BaseButton } from '../base-button';
 // icons
-import WarningIcon from '../icon/components/warning-solid';
-import AlertIcon from '../icon/components/alert-solid';
+import WarningIcon from '../icon/components/warning-clr';
+import ErrorIcon from '../icon/components/error-solid';
 import InfoCircle from '../icon/components/info-circle';
 import TickCircleIcon from '../icon/components/tickCircle-solid';
 import CloseIcon from '../icon/components/close';
@@ -27,7 +27,7 @@ import { linkStyles } from '../link/styled-components';
 import { bannerIconFillColor } from './cvaConfig';
 import { Box } from '../box';
 var intentToIconMap = {
-    error: { BaseIcon: AlertIcon },
+    error: { BaseIcon: ErrorIcon },
     warning: { BaseIcon: WarningIcon },
     success: { BaseIcon: TickCircleIcon },
     info: { BaseIcon: InfoCircle },

package/esm/color-picker/CustomColorSelector.js

@@ -5,8 +5,9 @@ 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, normalizeHexWithAlpha } from '../helpers/colors';
+import { hexToRgb, isValidHex, normalizeHexWithAlpha, normalizeHex } from '../helpers/colors';
 import TransparentBackground from '../icon/components/transparentBackground';
+import { TRANSPARENT_HEX, TRANSPARENT_RGBA } from './constants';
 var CustomPointer = function () { return (_jsx(Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
         return rtlCompatible({ transform: 'translate(-50%, -2px)' });
@@ -60,6 +61,11 @@ var CustomEditableInput = function (_a) {
         // @ts-ignore -- @types/react-color doesn't properly include types for input
         var input = editableInput.input;
         var fireChange = function () {
+            var inputValue = input.value;
+            if (inputValue === String(value))
+                return;
+            if (label === 'Hex' && normalizeHex(inputValue) === normalizeHex(String(value)))
+                return;
             onChange(typedValue.current);
         };
         var keydownHandler = function (event) {
@@ -72,16 +78,15 @@ var CustomEditableInput = function (_a) {
             input.removeEventListener('blur', fireChange);
             input.removeEventListener('keydown', keydownHandler);
         };
-    }, [editableInput, label, onChange]);
+    }, [editableInput, label, onChange, value]);
     return (_jsx(EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
 };
 function getNumberWithFallback(input, fallback) {
-    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
-    if (!input)
-        return _fallback;
-    if (Number.isNaN(+input))
-        return _fallback;
-    return parseInt(input);
+    if (fallback === void 0) { fallback = 0; }
+    var trimmedInput = input === null || input === void 0 ? void 0 : input.trim();
+    if (!trimmedInput || Number.isNaN(+trimmedInput))
+        return fallback;
+    return parseInt(trimmedInput);
 }
 var ColorPickerComponent = function (_props) {
     // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
@@ -95,8 +100,9 @@ var ColorPickerComponent = function (_props) {
     // 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;
+    var hexInput = (_hex === null || _hex === void 0 ? void 0 : _hex.toLowerCase()) === 'transparent' ? '#000000' : _hex;
     // react-color doesn't support alpha hexes, so we need to insert it ourselves
-    var hex = normalizeHexWithAlpha(_hex, a);
+    var hex = normalizeHexWithAlpha(hexInput, 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) {
@@ -109,15 +115,19 @@ var ColorPickerComponent = function (_props) {
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
             var newHex = data.Hex;
-            var parsedRgba = hexToRgb(data.Hex);
+            if (newHex.toLowerCase() === 'transparent' && hex !== TRANSPARENT_HEX) {
+                onChange(TRANSPARENT_RGBA);
+                onChangeComplete({ rgb: TRANSPARENT_RGBA });
+                return;
+            }
+            if (!isValidHex(newHex))
+                return;
+            var parsedRgba = hexToRgb(newHex);
             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
-            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
-            if (isValidHex(newHex))
-                onChangeComplete({ rgb: newRgba });
+            onChangeComplete({ rgb: newRgba });
         }
-        else if (data.R || data.G || data.B || data.A) {
+        else if ('R' in data || 'G' in data || 'B' in data || 'A' in data) {
             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
@@ -131,7 +141,7 @@ var ColorPickerComponent = function (_props) {
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
-    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a, hex]);
     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: {

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

@@ -1,3 +1,4 @@
+import type { RGBColor } from 'react-color';
 export declare const GRADIENT_TYPE: {
     LINEAR: string;
     RADIAL: string;
@@ -12,3 +13,5 @@ export declare const COLOR_TYPE: {
     readonly GRADIENT: "gradient";
 };
 export declare const SWATCHES_PER_ROW = 10;
+export declare const TRANSPARENT_HEX = "#00000000";
+export declare const TRANSPARENT_RGBA: RGBColor;

package/esm/color-picker/constants.js

@@ -8,3 +8,5 @@ export var COLOR_TYPE = {
     GRADIENT: 'gradient',
 };
 export var SWATCHES_PER_ROW = 10;
+export var TRANSPARENT_HEX = '#00000000';
+export var TRANSPARENT_RGBA = { r: 0, g: 0, b: 0, a: 0 };

package/esm/date-picker/StatelessDatePicker.js

@@ -24,9 +24,9 @@ import { getDefaultSize } from '../helpers/themeHelpers';
 import { useStyle } from '../style';
 // eslint-disable-next-line max-statements -- required for function component
 export var StatelessDatePicker = function (_props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var theme = useStyle().theme;
-    var _d = useContextualFormProps(_props), onChange = _d.onChange, onBlur = _d.onBlur, _e = _d.adapter, adapter = _e === void 0 ? dateFnsAdapter : _e, _f = _d.size, size = _f === void 0 ? getDefaultSize(theme) : _f, _g = _d.formatString, formatString = _g === void 0 ? DEFAULT_FORMAT_STRING : _g, _h = _d.isOpen, isOpen = _h === void 0 ? false : _h, onFocus = _d.onFocus, clearable = _d.clearable, _displayValueAtRangeIndex = _d.displayValueAtRangeIndex, _j = _d.variant, variant = _j === void 0 ? 'default' : _j, overrides = _d.overrides, intent = _d.intent, _value = _d.value, formatDisplayValue = _d.formatDisplayValue, _k = _d.autoSizeInput, autoSizeInput = _k === void 0 ? false : _k, weekStartsOn = _d.weekStartsOn, _l = _d.timezone, timezone = _l === void 0 ? getSystemTzName() : _l, _m = _d.showTimezone, showTimezone = _m === void 0 ? false : _m, timezoneOptions = _d.timezoneOptions, props = __rest(_d, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
+    var _e = useContextualFormProps(_props), onChange = _e.onChange, onBlur = _e.onBlur, _f = _e.adapter, adapter = _f === void 0 ? dateFnsAdapter : _f, _g = _e.size, size = _g === void 0 ? getDefaultSize(theme) : _g, _h = _e.formatString, formatString = _h === void 0 ? DEFAULT_FORMAT_STRING : _h, _j = _e.isOpen, isOpen = _j === void 0 ? false : _j, onFocus = _e.onFocus, clearable = _e.clearable, _displayValueAtRangeIndex = _e.displayValueAtRangeIndex, _k = _e.variant, variant = _k === void 0 ? 'default' : _k, overrides = _e.overrides, intent = _e.intent, _value = _e.value, formatDisplayValue = _e.formatDisplayValue, _l = _e.autoSizeInput, autoSizeInput = _l === void 0 ? false : _l, weekStartsOn = _e.weekStartsOn, _m = _e.timezone, timezone = _m === void 0 ? getSystemTzName() : _m, _o = _e.showTimezone, showTimezone = _o === void 0 ? false : _o, timezoneOptions = _e.timezoneOptions, props = __rest(_e, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone", "timezoneOptions"]);
     var locale = useLocale();
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -41,8 +41,8 @@ export var StatelessDatePicker = function (_props) {
     }, [_value, timezone, timezoneOptions]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _o = __read(React.useState(false), 2), autoFocusCalendar = _o[0], setAutoFocusCalendar = _o[1];
-    var _p = __read(React.useState(false), 2), error = _p[0], setError = _p[1];
+    var _p = __read(React.useState(false), 2), autoFocusCalendar = _p[0], setAutoFocusCalendar = _p[1];
+    var _q = __read(React.useState(false), 2), error = _q[0], setError = _q[1];
     React.useEffect(function () {
         var _a = getMinMaxDateInTimezone({
             maxDate: props.maxDate,
@@ -58,7 +58,9 @@ export var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers, timezone, timezoneOptions]);
     var screenReaderMsgId = useUniqueId();
-    var _q = props["aria-describedby"], ariaDescribedBy = _q === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _q;
+    var screenReaderMsgDescribedById = "datepicker--screenreader--message--input-".concat(screenReaderMsgId);
+    var baseAriaDescribedBy = (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : '';
+    var ariaDescribedBy = "".concat(screenReaderMsgDescribedById, " ").concat(baseAriaDescribedBy).trim();
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = normalizeDashes(formatString);
         if (formatDisplayValue) {
@@ -137,10 +139,10 @@ export var StatelessDatePicker = function (_props) {
     var _r = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _r[0], inputProps = _r[1];
     var _s = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _s[0], popoverProps = _s[1];
     var _t = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _t[0], inputWrapperProps = _t[1];
-    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : formatString.toLowerCase();
+    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : formatString.toLowerCase();
     // if calendar is close, open it on click otherwise close the calendar
     var popoverHandleClick = isOpen ? onBlur : onFocus;
-    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : popoverHandleClick, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_c = props.required) !== null && _c !== void 0 ? _c : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : popoverHandleClick, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale, showTimezone: showTimezone, timezone: timezone, timezoneOptions: timezoneOptions, formatDisplayValue: defaultFormatDisplayValue })) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ id: props.id, "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-invalid": props['aria-invalid'], "aria-errormessage": props['aria-errormessage'], "aria-required": (_d = props.required) !== null && _d !== void 0 ? _d : props['aria-required'], disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
-                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), _jsxs(Box, __assign({ className: "relative" }, { children: [_jsx(Typography, __assign({ id: ariaDescribedBy, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), _jsx(Typography, __assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
+                        onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps)) })) })), _jsxs(Box, __assign({ className: "relative" }, { children: [_jsx(Typography, __assign({ id: screenReaderMsgDescribedById, className: "sr-only" }, { children: locale.timeRangePicker.screenReaderMessageInput })), _jsx(Typography, __assign({ "aria-live": "assertive", className: "sr-only" }, { children: dateAriaLabel }))] }))] }));
 };

package/esm/form-control/form-control.js

@@ -7,8 +7,8 @@ import { add$props } from '../helpers';
 import { Stack, StackItem } from '../stack';
 import { Box } from '../box';
 import InfoIcon from './info-icon';
-import WarningIcon from '../icon/components/warning-solid';
-import AlertIcon from '../icon/components/alert-solid';
+import WarningIcon from '../icon/components/warning-clr';
+import ErrorIcon from '../icon/components/error-solid';
 import TickCircleIcon from '../icon/components/tickCircle-solid';
 import { useOverrides } from '../overrides';
 import { StatefulTooltip } from '../tooltip';
@@ -19,7 +19,7 @@ import classNames from '../classNames';
 import { getTextFromNode } from '../utils/generalUtils';
 var addConditionalIds = classNames;
 var intentToIconMap = {
-    error: AlertIcon,
+    error: ErrorIcon,
     warning: WarningIcon,
     success: TickCircleIcon,
 };

package/esm/helpers/colors.d.ts

@@ -7,6 +7,7 @@ export declare const isValidHex: (hex: unknown) => string | undefined;
  */
 export declare function hexToRgb(_hex: string): RGBColor;
 export declare function RgbToHex({ r, g, b, a }: RGBColor): string;
+export declare function normalizeHex(hex: string): string | undefined;
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio

package/esm/helpers/colors.js

@@ -7,7 +7,7 @@ export var isValidHex = function (hex) {
     if (![3, 4, 6, 8].includes(hexVal.length))
         return undefined;
     if (/^[0-9a-f]+$/i.test(hexVal))
-        return hexVal;
+        return hexVal.toUpperCase();
     return undefined;
 };
 /**
@@ -30,6 +30,18 @@ export function RgbToHex(_a) {
     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(''));
 }
+export function normalizeHex(hex) {
+    if (!isValidHex(hex))
+        return undefined;
+    var _a = hexToRgb(hex), r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    return "#".concat([r, g, b, Math.round((a !== null && a !== void 0 ? a : 1) * 255)]
+        .map(function (n) {
+        return Math.round(Math.min(Math.max(n, 0), 255))
+            .toString(16)
+            .padStart(2, '0');
+    })
+        .join(''));
+}
 /**
  * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
  * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
@@ -86,7 +98,7 @@ export function noAlphaHex(inputHex) {
     return inputHex;
 }
 export function normalizeHexWithAlpha(hex, alpha) {
-    if (typeof alpha !== 'number' || alpha === 1 || !hex)
+    if (typeof alpha !== 'number' || alpha === 1 || !hex || !isValidHex(hex))
         return hex;
     return (hex +
         Math.floor(alpha * 255)

package/esm/icon/components/{alert-solid.d.ts → error-solid.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { IconProps } from '../types';
-export default function AlertSolid(props: IconProps): React.ReactElement;
+export default function ErrorSolid(props: IconProps): React.ReactElement;

package/esm/icon/components/error-solid.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function ErrorSolid(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsx(Icon, __assign({ viewBox: "0 0 14 14", "data-icon-name": "ErrorSolid" }, props, { children: _jsx("path", { d: "M7.063.012a6.994 6.994 0 106.994 6.994A6.996 6.996 0 007.063.012zm0 7.693a.701.701 0 01-.7-.699V4.21a.701.701 0 01.7-.7.701.701 0 01.7.7v2.797a.701.701 0 01-.7.7zm0 2.798a.701.701 0 01-.7-.7.701.701 0 01.7-.699.701.701 0 01.7.7.701.701 0 01-.7.699z" }) })));
+}

package/{icon/components/alert-solid.d.ts → esm/icon/components/warning-clr.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { IconProps } from '../types';
-export default function AlertSolid(props: IconProps): React.ReactElement;
+export default function WarningClr(props: IconProps): React.ReactElement;

package/esm/icon/components/warning-clr.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../../style';
+import Icon from '../icon';
+export default function WarningClr(props) {
+    var _a = useStyle(), theme = _a.theme, isRTL = _a.isRTL;
+    return (_jsxs(Icon, __assign({ viewBox: "0 0 16 16", "data-icon-name": "WarningClr" }, props, { children: [_jsx("path", { fillRule: "evenodd", d: "M16 13.518c0 .96-.778 1.738-1.738 1.738H1.738a1.738 1.738 0 0 1-1.515-2.59L6.405 1.677l.064-.105a1.83 1.83 0 0 1 3.126.105l6.182 10.99.052.098c.112.235.171.492.171.753", clipRule: "evenodd" }), _jsx("path", { fill: "currentColor", d: "M8 .744c.661 0 1.271.357 1.596.934l6.181 10.988.051.1a1.738 1.738 0 0 1-1.565 2.49H1.737a1.738 1.738 0 0 1-1.514-2.59L6.405 1.678l.064-.106A1.83 1.83 0 0 1 8 .744m0 1a.83.83 0 0 0-.694.376l-.03.048-6.181 10.988a.738.738 0 0 0 .643 1.1h12.525a.738.738 0 0 0 .664-1.058l-.022-.042L8.724 2.168A.83.83 0 0 0 8 1.744" }), _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M8 9.99a.75.75 0 0 1-.75-.75V5.868a.75.75 0 0 1 1.5 0V9.24a.75.75 0 0 1-.75.75m-.75 1.88a.75.75 0 1 0 1.5-.007.75.75 0 1 0-1.5.007", clipRule: "evenodd" })] })));
+}

package/esm/modal/modal.d.ts

@@ -1,11 +1,11 @@
 import { type ReactElement } from 'react';
 import type { ModalProps } from './types';
-import Alert from '../icon/components/alert-solid';
+import Error from '../icon/components/error-solid';
 import Tick from '../icon/components/tickCircle-solid';
-import Warning from '../icon/components/warning-solid';
+import Warning from '../icon/components/warning-clr';
 export declare const INTENT_TO_ICON: {
     success: typeof Tick;
-    error: typeof Alert;
+    error: typeof Error;
     warning: typeof Warning;
 };
 declare const _default: import("react").MemoExoticComponent<{

package/esm/modal/modal.js

@@ -12,14 +12,14 @@ import { useLocale } from '../locale';
 import { mergeOverrides } from '../overrides';
 import { ModalContextProvider } from './ModalContext';
 import useUniqueId from '../hooks/useUniqueId';
-import Alert from '../icon/components/alert-solid';
+import Error from '../icon/components/error-solid';
 import Tick from '../icon/components/tickCircle-solid';
-import Warning from '../icon/components/warning-solid';
+import Warning from '../icon/components/warning-clr';
 import { isDarkTheme } from '../helpers/themeHelpers';
 var CloseButton = function (closeProps) { return (_jsx(IconButton, __assign({}, closeProps, { children: _jsx(Close, {}) }))); };
 export var INTENT_TO_ICON = {
     success: Tick,
-    error: Alert,
+    error: Error,
     warning: Warning,
 };
 var getWarningIconClassName = function (_a) {

package/esm/progressSteps/step.js

@@ -4,10 +4,10 @@ import { memo } from 'react';
 import { useOverrides } from '../overrides';
 import { StyledStep, StyledIconContainer, StyledInnerIcon, StyledContent, StyledContentTitle, StyledContentSubTitle, StyledContentTail, StyledContentDescription, getContentTailStyle, getIconContainerStyle, } from './styled-components';
 import TickCircleIcon from '../icon/components/tickCircle-solid';
-import Alert from '../icon/components/alert-solid';
+import Error from '../icon/components/error-solid';
 import { ORIENTATION } from './constants';
 var INTENT_TO_ICON_MAP = {
-    error: _jsx(Alert, { size: 16, className: "spr-support-error-text" }),
+    error: _jsx(Error, { size: 16, className: "spr-support-error-text" }),
 };
 var Step = function (_a) {
     var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, isCompleted = _a.isCompleted, isCurrent = _a.isCurrent, isActive = _a.isActive, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, isRightBeforeActive = _a.isRightBeforeActive, _d = _a.isLast, isLast = _d === void 0 ? false : _d, childrenCount = _a.childrenCount, _e = _a.orientation, orientation = _e === void 0 ? ORIENTATION.vertical : _e, title = _a.title, subTitle = _a.subTitle, alwaysShowDescription = _a.alwaysShowDescription, children = _a.children, className = _a.className, onClick = _a.onClick, variant = _a.variant, role = _a.role, style = _a.style, step = _a.step, showStepNumber = _a.showStepNumber, restProps = __rest(_a, ["overrides", "isCompleted", "isCurrent", "isActive", "intent", "isRightBeforeActive", "isLast", "childrenCount", "orientation", "title", "subTitle", "alwaysShowDescription", "children", "className", "onClick", "variant", "role", "style", "step", "showStepNumber"]);

package/esm/snackbar/constants.js

@@ -1,11 +1,11 @@
-import Alert from '../icon/components/alert-solid';
-import Warning from '../icon/components/warning-solid';
+import Error from '../icon/components/error-solid';
+import Warning from '../icon/components/warning-clr';
 import Tick from '../icon/components/tickCircle-solid';
 import Delete from '../icon/components/delete-solid';
 export var TRANSITION_DURATION = 1000;
 export var INTENT_TO_ICON = {
     success: Tick,
-    error: Alert,
+    error: Error,
     warning: Warning,
     delete: Delete,
 };

package/esm/time-range-picker/RangeSelectorContainer.js

@@ -10,7 +10,7 @@ import { Button } from '../button';
 import { StyledHeader } from './styled-component';
 import { Stack, StackItem } from '../stack';
 import DefaultTimezonePicker from './TimezonePicker';
-import ErrorIcon from '../icon/components/error';
+import ErrorIcon from '../icon/components/error-solid';
 import { StyledFooter, StyledFooterBeforeEnhancer } from '../date-picker/styled-components';
 import { useLocale } from '../locale';
 import { getRangeError, getSelectedTimeRange, getValidRange, getMinMaxDateInTimezone, convertDateFromSystemTzToTargetTz, } from './utils';
@@ -114,9 +114,7 @@ var RangeSelectorContainer = function (_a) {
                         fill: theme.spr.clrRed,
                     });
                 } }), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), _jsx(RangeSelector, __assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, 
-                                // @ts-ignore -- CSS-in-JS
-                                className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), _jsx(RangeSelector, __assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: monthsShown !== 1 ? 'items-center' : undefined, style: { maxWidth: 'fit-content' } }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 export default RangeSelectorContainer;