@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/esm/grid/Col.js

@@ -1,54 +1,61 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @author Ivan Torres
- */
 import { useMemo } from 'react';
 import { Box } from '../box';
 import useStyle from '../style/useStyle';
 import { filterOwnProps } from './utils';
-var getGridRange = function (column, breakpointMinWidth) {
-    var _a;
+var getClassesAndVars = function (column, breakpoint) {
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var gridRangeStyle = {};
+    var classes = [];
+    var variables = {};
+    var updateColClasses = function (attrib, val) {
+        classes.push("".concat(breakpoint ? "".concat(breakpoint, ":") : '').concat(attrib, "-[--sw-").concat(attrib, "]"));
+        variables["--sw".concat(breakpoint ? "-".concat(breakpoint) : '', "-").concat(attrib)] = val;
+    };
     if (typeof colSpan === 'number') {
-        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
-        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+        updateColClasses('col-start', "span ".concat(colSpan));
+        updateColClasses('col-end', "span ".concat(colSpan));
     }
     if (typeof rowSpan === 'number') {
-        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
-        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+        updateColClasses('row-start', "span ".concat(rowSpan));
+        updateColClasses('row-end', "span ".concat(rowSpan));
     }
     if (typeof colStart === 'number') {
-        gridRangeStyle.gridColumnStart = colStart;
+        updateColClasses('col-start', colStart);
     }
     if (typeof colEnd === 'number') {
-        gridRangeStyle.gridColumnEnd = colEnd;
+        updateColClasses('col-end', colEnd);
     }
     if (typeof rowStart === 'number') {
-        gridRangeStyle.gridRowStart = rowStart;
+        updateColClasses('row-start', rowStart);
     }
     if (typeof rowEnd === 'number') {
-        gridRangeStyle.gridRowEnd = rowEnd;
+        updateColClasses('row-end', rowEnd);
     }
-    return breakpointMinWidth
-        ? (_a = {},
-            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
-            _a) : gridRangeStyle;
+    return { classes: classes, variables: variables };
+};
+var mergeClassesAndVars = function (classesAndVars) {
+    return classesAndVars.reduce(function (acc, _a) {
+        var _b;
+        var classes = _a.classes, variables = _a.variables;
+        (_b = acc.classes).push.apply(_b, __spreadArray([], __read(classes), false));
+        Object.assign(acc.variables, variables);
+        return acc;
+    }, { classes: [], variables: {} });
 };
 export var Col = function (props) {
     var theme = useStyle().theme;
     var screens = theme.screens;
     var className = props.className, style = props.style, children = props.children;
-    var classList = [];
     var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
-    classList.push(getGridRange(props));
-    breakpoints.forEach(function (breakpoint) {
-        if (props[breakpoint]) {
-            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
-        }
-    });
-    return (_jsx(Box, __assign({ "data-testid": "col" }, filterOwnProps(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));
+    var classesAndVars = getClassesAndVars(props);
+    var classesAndVarsForBreakpoints = breakpoints
+        .filter(function (breakpoint) { return props[breakpoint]; })
+        .map(function (breakpoint) { return getClassesAndVars(props[breakpoint], breakpoint); });
+    var _a = mergeClassesAndVars(__spreadArray([
+        classesAndVars
+    ], __read(classesAndVarsForBreakpoints), false)), gridClasses = _a.classes, gridVariables = _a.variables;
+    return (_jsx(Box, __assign({ "data-testid": "col" }, filterOwnProps(breakpoints, props), { className: [gridClasses, className], style: [gridVariables, style] }, { children: children })));
 };
 Col.displayName = 'Col';
 export default Col;

package/esm/grid/Grid.d.ts

@@ -3,12 +3,12 @@
  */
 import { ReactNode } from 'react';
 import { GridProps } from './types';
-export declare type Props = GridProps & {
+export type Props = GridProps & {
     children?: ReactNode | ReactNode[];
 };
-export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & import("./types").Grid & {
     lg?: (number | import("./types").Grid) | undefined;
@@ -18,5 +18,5 @@ export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import
     xs?: (number | import("./types").Grid) | undefined;
 } & {
     children?: ReactNode | ReactNode[];
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Grid;

package/esm/grid/Grid.js

@@ -7,53 +7,70 @@ import { useMemo, forwardRef } from 'react';
 import { Box } from '../box';
 import useStyle from '../style/useStyle';
 import { filterOwnProps } from './utils';
+var SW_SPACING_MULTIPLIER = 4;
 export var Grid = forwardRef(function (props, ref) {
-    var theme = useStyle().theme;
+    var _a = useStyle(), theme = _a.theme, px2rem = _a.px2rem;
     var screens = theme.screens;
     var className = props.className, cols = props.cols, rows = props.rows, gap = props.gap, colGap = props.colGap, rowGap = props.rowGap, style = props.style;
     /* default settings */
     var classList = ['grid'];
+    var styleVariables = {};
     if (rows) {
-        classList.push("grid-rows-".concat(rows, " grid-flow-col"));
+        classList.push('grid-rows-[--sw-grid-rows] grid-flow-col');
+        styleVariables['--sw-grid-rows'] = rows.toString();
     }
     else {
-        classList.push("grid-cols-".concat(cols || 1, " grid-flow-row"));
+        classList.push('grid-cols-[--sw-grid-cols] grid-flow-row');
+        styleVariables['--sw-grid-cols'] = (cols || 1).toString();
     }
-    if (colGap)
-        classList.push("gap-x-".concat(colGap));
-    if (rowGap)
-        classList.push("gap-y-".concat(rowGap));
+    var scaledValue = function (value) { return px2rem(value * SW_SPACING_MULTIPLIER); };
     if (gap && Number.isInteger(gap)) {
-        /* can't combine lang-hand and short-hand */
-        if (colGap) {
-            classList.push("gap-y-".concat(gap));
-        }
-        else if (rowGap) {
-            classList.push("gap-x-".concat(gap));
-        }
-        else {
-            classList.push("gap-".concat(gap));
-        }
+        classList.push('gap-x-[--sw-gap-x]');
+        styleVariables['--sw-gap-x'] = scaledValue(gap);
+        classList.push('gap-y-[--sw-gap-y]');
+        styleVariables['--sw-gap-y'] = scaledValue(gap);
+    }
+    if (colGap) {
+        classList.push('gap-x-[--sw-gap-x]');
+        styleVariables['--sw-gap-x'] = scaledValue(colGap);
+    }
+    if (rowGap) {
+        classList.push('gap-y-[--sw-gap-y]');
+        styleVariables['--sw-gap-y'] = scaledValue(rowGap);
     }
     var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
     breakpoints.forEach(function (name) {
         var breakpoint = props[name];
         if (!breakpoint)
             return;
-        if (Number.isInteger(breakpoint))
-            classList.push("".concat(name, ":grid-cols-").concat(breakpoint));
-        if (breakpoint.cols && !breakpoint.rows)
-            classList.push("".concat(name, ":grid-cols-").concat(breakpoint.cols));
-        if (breakpoint.rows && !breakpoint.cols)
-            classList.push("".concat(name, ":grid-rows-").concat(breakpoint.rows));
-        if (breakpoint.gap)
-            classList.push("".concat(name, ":gap-").concat(breakpoint.gap));
-        if (breakpoint.rowGap)
-            classList.push("".concat(name, ":gap-y-").concat(breakpoint.rowGap));
-        if (breakpoint.colGap)
-            classList.push("".concat(name, ":gap-x-").concat(breakpoint.colGap));
+        if (Number.isInteger(breakpoint)) {
+            classList.push("".concat(name, ":grid-cols-[--sw-grid-cols]"));
+            styleVariables["--sw-".concat(name, "-grid-cols")] = breakpoint;
+        }
+        if (breakpoint.cols && !breakpoint.rows) {
+            classList.push("".concat(name, ":grid-cols-[--sw-grid-cols]"));
+            styleVariables["--sw-".concat(name, "-grid-cols")] = breakpoint.cols;
+        }
+        if (breakpoint.rows && !breakpoint.cols) {
+            classList.push("".concat(name, ":grid-rows-[--sw-grid-rows]"));
+            styleVariables["--sw-".concat(name, "-grid-rows")] = breakpoint.rows;
+        }
+        if (breakpoint.gap) {
+            classList.push("".concat(name, ":gap-x-[--sw-gap-x]"));
+            styleVariables["--sw-".concat(name, "-gap-x")] = scaledValue(breakpoint.gap);
+            classList.push("".concat(name, ":gap-y-[--sw-gap-y]"));
+            styleVariables["--sw-".concat(name, "-gap-y")] = scaledValue(breakpoint.gap);
+        }
+        if (breakpoint.rowGap) {
+            classList.push("".concat(name, ":gap-y-[--sw-gap-y]"));
+            styleVariables["--sw-".concat(name, "-gap-y")] = scaledValue(breakpoint.rowGap);
+        }
+        if (breakpoint.colGap) {
+            classList.push("".concat(name, ":gap-x-[--sw-gap-x]"));
+            styleVariables["--sw-".concat(name, "-gap-x")] = scaledValue(breakpoint.colGap);
+        }
     });
-    return (_jsx(Box, __assign({}, filterOwnProps(breakpoints, props), { className: [classList, className, style], ref: ref }, { children: props.children }), void 0));
+    return (_jsx(Box, __assign({}, filterOwnProps(breakpoints, props), { className: [classList, className], style: [styleVariables, style], ref: ref }, { children: props.children })));
 });
 Grid.displayName = 'Grid';
 export default Grid;

package/esm/grid/types.d.ts

@@ -1,20 +1,20 @@
 import { SpacewebComponentProps } from '../types';
-export declare type Grid = {
+export type Grid = {
     cols?: number;
     rows?: number;
     gap?: number;
     colGap?: number;
     rowGap?: number;
 };
-declare type Breakpoint = number | Grid;
-export declare type GridProps = SpacewebComponentProps & Grid & {
+type Breakpoint = number | Grid;
+export type GridProps = SpacewebComponentProps & Grid & {
     lg?: Breakpoint;
     md?: Breakpoint;
     sm?: Breakpoint;
     xl?: Breakpoint;
     xs?: Breakpoint;
 };
-export declare type Column = {
+export type Column = {
     colSpan?: number;
     colStart?: number;
     colEnd?: number;
@@ -22,7 +22,7 @@ export declare type Column = {
     rowStart?: number;
     rowEnd?: number;
 };
-export declare type ColProps = SpacewebComponentProps & Column & {
+export type ColProps = SpacewebComponentProps & Column & {
     xs?: Column;
     sm?: Column;
     md?: Column;

package/esm/grid/utils.d.ts

@@ -1 +1 @@
-export declare const filterOwnProps: <T>(breakpoints: string[], props: T) => Partial<T>;
+export declare const filterOwnProps: <T extends Record<string, unknown>>(breakpoints: string[], props: T) => Partial<T>;

package/esm/grid/utils.js

@@ -1,4 +1,3 @@
-/* eslint import/prefer-default-export: 0 */
 import { __assign, __read, __spreadArray } from "tslib";
 export var filterOwnProps = function (breakpoints, props) {
     var gridProps = __spreadArray([

package/esm/helpers/ClearIconButton.js

@@ -6,17 +6,16 @@ import { useLocale } from '../locale';
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = __rest(_a, ["size", "$size", "$isOpen"]);
     var locale = useLocale();
-    return (_jsx(IconButton, __assign({ "aria-label": locale.input.clearAriaLabel }, props, { overrides: {
-            BaseButton: {
-                style: [
-                    'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent',
-                    function (_a) {
-                        var px2rem = _a.px2rem;
-                        return ({ minWidth: px2rem(20) });
-                    },
-                ],
-                props: { type: 'button' },
-            },
-        } }, { children: _jsx(Close, { size: 8 }, void 0) }), void 0));
+    var isDeprecatedSize = size !== 'small' && size !== 'medium';
+    return (_jsx(IconButton, __assign({ "aria-label": locale.input.clearAriaLabel }, props, { size: isDeprecatedSize ? undefined : 'small', overrides: isDeprecatedSize
+            ? {
+                BaseButton: {
+                    className: [
+                        'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent min-w-5',
+                    ],
+                    props: { type: 'button' },
+                },
+            }
+            : undefined }, { children: _jsx(Close, { size: isDeprecatedSize ? 8 : undefined }) })));
 };
 export default ClearIconButton;

package/esm/helpers/StyledTombstone.js

@@ -1,17 +1,2 @@
 import styled from '../style/styled';
-export var StyledTombstone = styled('div', 'spr-ui-03 h-full w-full', {
-    animationDuration: '1s',
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'ease-in-out',
-    animationName: {
-        '0%': {
-            opacity: '1',
-        },
-        '50%': {
-            opacity: '0.4',
-        },
-        '100%': {
-            opacity: '1',
-        },
-    },
-});
+export var StyledTombstone = styled('div', 'spr-ui-03 h-full w-full sw-select-value-tombstone-animation');

package/esm/helpers/colors.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="lodash" />
+import type { RGBColor } from 'react-color';
+export type HSLA = [H: number, S: number, L: number, A?: number];
+export declare const isValidHex: (hex: unknown) => string | undefined;
+/**
+ * @return {{r, g, b, a}} an object with rgba
+ */
+export declare function hexToRgb(_hex: string): RGBColor;
+export declare function RgbToHex({ r, g, b, a }: RGBColor): string;
+/**
+ * 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
+ */
+export declare const getRelativeLuminance: (({ r, g, b }: RGBColor) => number) & import("lodash").MemoizedFunction;
+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;

package/esm/helpers/colors.js

@@ -0,0 +1,86 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import _memoize from 'lodash/memoize';
+export var isValidHex = function (hex) {
+    if (typeof hex !== 'string')
+        return undefined;
+    var hexVal = hex.replace(/^#/, '');
+    if (![3, 4, 6, 8].includes(hexVal.length))
+        return undefined;
+    if (/^[0-9a-f]+$/i.test(hexVal))
+        return hexVal;
+    return undefined;
+};
+/**
+ * @return {{r, g, b, a}} an object with rgba
+ */
+export function hexToRgb(_hex) {
+    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);
+    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;
+    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(''));
+}
+/**
+ * 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
+ */
+export var getRelativeLuminance = _memoize(function (_a) {
+    var r = _a.r, g = _a.g, b = _a.b;
+    var _c = __read([r, g, b]
+        .map(function (c) { return c / 255; })
+        .map(function (c) { return (c <= 0.04045 ? c / 12.92 : Math.pow(((c + 0.055) / 1.055), 2.4)); }), 3), _r = _c[0], _g = _c[1], _b = _c[2];
+    return 0.2126 * _r + 0.7152 * _g + 0.0722 * _b;
+}, function (_a) {
+    var r = _a.r, g = _a.g, b = _a.b;
+    return [r, g, b].join(',');
+});
+export function getContrastRatio(color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+// https://www.rapidtables.com/convert/color
+export function RgbToHsl(_a) {
+    var r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    var _c = __read([r / 255, g / 255, b / 255, a], 4), R = _c[0], G = _c[1], B = _c[2], A = _c[3];
+    var L = Math.max(R, G, B);
+    var S = L - Math.min(R, G, B);
+    // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+    var H = S ? (L === R ? (G - B) / S : L === G ? 2 + (B - R) / S : 4 + (R - G) / S) : 0;
+    return __spreadArray([
+        Math.round(60 * H < 0 ? 60 * H + 360 : 60 * H),
+        // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+        Math.round(100 * (S ? (L <= 0.5 ? S / (2 * L - S) : S / (2 - (2 * L - S))) : 0)),
+        Math.round((100 * (2 * L - S)) / 2)
+    ], __read((A < 1 ? [A] : [])), false);
+}
+export function HslToRgb(hsl) {
+    var H = Math.round(hsl[0]);
+    var S = Math.round(hsl[1]) / 100;
+    var L = Math.round(hsl[2]) / 100;
+    var k = function (n) { return (n + H / 30) % 12; };
+    var A = S * Math.min(L, 1 - L);
+    var f = function (n) { return L - A * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
+    return __assign({ r: Math.round(255 * f(0)), g: Math.round(255 * f(8)), b: Math.round(255 * f(4)) }, (hsl[3] < 1 ? { a: hsl[3] } : undefined));
+}
+// Removes alpha values from a hex
+export function noAlphaHex(inputHex) {
+    if (!inputHex)
+        return inputHex;
+    if (/^#?[0-9a-f]{4}$/i.test(inputHex))
+        return inputHex.slice(0, -1);
+    if (/^#?[0-9a-f]{8}$/i.test(inputHex))
+        return inputHex.slice(0, -2);
+    return inputHex;
+}

package/esm/helpers/commonStyles.d.ts

@@ -1,5 +1,8 @@
-import { StyleFn, StyleObject, StyleUtils } from '../types';
-export declare const chevronStyles: StyleFn<{
+import type { CSSStylesStyleFn, StyleObject, StyleUtils, ClassNameStyleFn } from '../types';
+export declare const chevronStyles: CSSStylesStyleFn<{
+    $isOpen?: boolean;
+}>;
+export declare const chevronClassNames: ClassNameStyleFn<{
     $isOpen?: boolean;
 }>;
 /**
@@ -7,7 +10,7 @@ export declare const chevronStyles: StyleFn<{
  * https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/merge_requests/890#note_1765218
  */
 export declare const transparentScrollbarStyles: StyleObject;
-export declare type OutlineProps = {
+export type OutlineProps = {
     $outlineColor?: string;
     $outlineWidth?: StyleObject['outlineWidth'];
     $outlineOffset?: StyleObject['outlineOffset'];
@@ -16,3 +19,4 @@ export declare type OutlineProps = {
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const accessibilityStyles: StyleObject;
+export declare const getSprinklrAIAnimatedGradientBorderClassNames: () => string;

package/esm/helpers/commonStyles.js

@@ -4,7 +4,7 @@ export var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
     var styles = {
-        color: theme.spr.icon03,
+        color: theme.spr.icon01,
         transition: 'transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         height: px2rem(10),
         width: px2rem(10),
@@ -15,6 +15,11 @@ export var chevronStyles = function (_a, _b) {
     }
     return styles;
 };
+export var chevronClassNames = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $isOpen = _b.$isOpen;
+    return "h-2.5 w-2.5 transition-transform duration-200 ml-1 cursor-pointer ".concat($isOpen ? 'spr-icon-04 rotate-180' : 'spr-icon-01');
+};
 /**
  * This utility can be used when scroll track is clipping the border-radius of the container.
  * https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/merge_requests/890#note_1765218
@@ -24,6 +29,7 @@ export var transparentScrollbarStyles = {
         backgroundColor: 'transparent',
     },
     '::-webkit-scrollbar-thumb': __assign(__assign(__assign(__assign(__assign({ backgroundColor: 'darkgrey' }, borderRadius('8px')), borderWidth('4px')), borderStyle('solid')), borderColor('transparent')), { backgroundClip: 'padding-box' }),
+    __useCssInJs: 1,
 };
 export var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;
@@ -41,18 +47,22 @@ export var getFocusVisibleStyles = function (utils, props) {
     if (props === void 0) { props = {}; }
     return ({
         ':focus-visible': getOutlineStyles(utils, props),
+        __useCssInJs: 1,
     });
 };
 export var accessibilityStyles = {
     position: 'fixed',
     width: '0px',
     height: '0px',
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderTopWidth: 0,
-    borderBottomWidth: 0,
+    borderInlineStartWidth: 0,
+    borderInlineEndWidth: 0,
+    borderBlockStartWidth: 0,
+    borderBlockEndWidth: 0,
     padding: 0,
     overflow: 'hidden',
     clip: 'rect(0, 0, 0, 0)',
     clipPath: 'inset(100%)',
 };
+export var getSprinklrAIAnimatedGradientBorderClassNames = function () {
+    return 'sw-ai-deprecated-animated-gradient-border hover:before:content-empty hover:after:content-empty';
+};

package/esm/helpers/deepMerge.d.ts

@@ -0,0 +1,2 @@
+declare const deepMerge: (target?: {} | null, ...sources: Array<null | {} | undefined>) => any;
+export default deepMerge;

package/esm/helpers/deepMerge.js

@@ -0,0 +1,30 @@
+var isPlainObject = function (obj) { return obj !== null && typeof obj === 'object'; };
+var deepMerge = function (target) {
+    var sources = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        sources[_i - 1] = arguments[_i];
+    }
+    target = target || {};
+    sources.forEach(function (source) {
+        if ((isPlainObject(source) && typeof target !== 'object') || target === null) {
+            // if target is primitive and source is object or array it will override it
+            target = Array.isArray(source) ? [] : {};
+        }
+        var obj = source || {};
+        Object.keys(obj).forEach(function (key) {
+            var value = obj[key];
+            if (typeof value !== 'undefined') {
+                if (isPlainObject(value)) {
+                    // @ts-ignore
+                    target[key] = deepMerge(target[key] || (Array.isArray(value) ? [] : {}), value);
+                }
+                else {
+                    // @ts-ignore
+                    target[key] = value;
+                }
+            }
+        });
+    });
+    return target;
+};
+export default deepMerge;

package/esm/helpers/index.d.ts

@@ -17,10 +17,11 @@ export declare const add$props: (props: Record<string, unknown>) => Record<strin
  * @param value
  */
 export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
-export declare const themeTokenToHex: (token: string) => string | null;
+export declare const themeTokenToHex: (token: string) => string;
 /**
- * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
+ * Converts hexadecimal color to CSS string for RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
+ * @return {string} eg: rgb(5,2,3)
  */
-export declare const hex2rgb: (_hex: string, alpha?: string | undefined) => string | null;
+export declare const hex2rgb: (hex: string, alpha?: string) => string | null;

package/esm/helpers/index.js

@@ -1,4 +1,7 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
+import { hexToRgb } from './colors';
+// Return true for 6-digit and 8-digit hexes (to support alpha channels in hexes)
+var VALID_HEX_REGEX = /^#(?:[0-9a-f]{6}|[0-9a-f]{8})$/i;
 /**
  * Omits properties that starts with `$` (Styletron)
  * @param $props properties
@@ -47,27 +50,18 @@ export var covertCSSVariablesToValue = function (value) {
 export var themeTokenToHex = function (token) {
     var hex = covertCSSVariablesToValue(token);
     var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
-        return r + r + g + g + b + b;
-    });
-    return parsed;
+    return hex.replace(shorthandRegex, function (_match, r, g, b) { return r + r + g + g + b + b; });
 };
 /**
- * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
+ * Converts hexadecimal color to CSS string for RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
+ * @return {string} eg: rgb(5,2,3)
  */
-export var hex2rgb = function (_hex, alpha) {
-    var hex = covertCSSVariablesToValue(_hex);
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
-        return r + r + g + g + b + b;
-    });
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsed);
-    if (result) {
-        return alpha
-            ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")")
-            : "rgb(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ")");
-    }
-    return null;
+export var hex2rgb = function (hex, alpha) {
+    var convertedHex = covertCSSVariablesToValue(hex);
+    if (!VALID_HEX_REGEX.test(convertedHex))
+        return null;
+    var _a = hexToRgb(convertedHex), r = _a.r, g = _a.g, b = _a.b;
+    return "rgb".concat(alpha ? 'a' : '', "(").concat(__spreadArray([r, g, b], __read((alpha ? [alpha] : [])), false).join(', '), ")");
 };

package/esm/helpers/intentHelper.d.ts

@@ -1,5 +1,4 @@
-export declare const intentColor: ({ theme }: {
-    theme: any;
-}, { $intent }: {
+import { StyleUtils } from '../types';
+export declare const intentColor: ({ theme, deprecatedAIThemeEnabled }: StyleUtils, { $intent }: {
     $intent?: string | undefined;
-}, defaultColor?: any) => any;
+}, defaultColor?: string) => string;

package/esm/helpers/intentHelper.js

@@ -1,5 +1,5 @@
 export var intentColor = function (_a, _b, defaultColor) {
-    var theme = _a.theme;
+    var theme = _a.theme, deprecatedAIThemeEnabled = _a.deprecatedAIThemeEnabled;
     var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
     if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
     switch ($intent) {
@@ -13,5 +13,7 @@ export var intentColor = function (_a, _b, defaultColor) {
             return theme.spr.supportWarning;
         case 'error':
             return theme.spr.supportError;
+        case 'ai':
+            return deprecatedAIThemeEnabled ? theme.spr.clrMagenta : theme.ai.ui04;
     }
 };

package/esm/helpers/longHandHelpers.d.ts

@@ -1,7 +1,7 @@
-import { StyleObject } from '../types';
-export declare const borderRadius: (value: any) => StyleObject;
-export declare const borderWidth: (value: any) => StyleObject;
-export declare const borderStyle: (value: any) => StyleObject;
-export declare const borderColor: (value: any) => StyleObject;
-export declare const padding: (value: any) => StyleObject;
-export declare const margin: (value: any) => StyleObject;
+import { Properties } from 'csstype';
+export declare const borderRadius: (value: any) => Properties;
+export declare const borderWidth: (value: any) => Properties;
+export declare const borderStyle: (value: any) => Properties;
+export declare const borderColor: (value: any) => Properties;
+export declare const padding: (value: any) => Properties;
+export declare const margin: (value: any) => Properties;