@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/button/styled-components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLoadingSpinnerContainer = exports.getButtonStyles = exports.createButtonStyles = void 0;
+exports.getLoaderMinorColor = exports.getLoaderMajorColor = exports.StyledLoadingSpinnerContainer = exports.getButtonStyles = exports.getStylesWithAnimatedBorder = exports.getSprinklrAIAnimatedBorderStyles = exports.createButtonStyles = void 0;
 var tslib_1 = require("tslib");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
@@ -19,6 +19,8 @@ var getIntentTextColor = function (_a, _b) {
             return theme.spr.supportWarning;
         case 'error':
             return theme.spr.supportErrorText;
+        case 'ai':
+            return theme.spr.text01;
     }
 };
 var getIntentColor = function (_a, _b) {
@@ -34,6 +36,8 @@ var getIntentColor = function (_a, _b) {
             return theme.spr.supportWarning;
         case 'error':
             return theme.spr.supportError;
+        case 'ai':
+            return theme.spr.clrMagenta;
     }
 };
 var getIntentHighlightColor = function (_a, _b) {
@@ -44,27 +48,54 @@ var getIntentHighlightColor = function (_a, _b) {
         default:
             return theme.spr.interactiveFocus;
         case 'success':
-            return theme.spr.supportSuccessHighlight;
+            return theme.spr.supportSuccess;
         case 'warning':
-            return theme.spr.supportWarningHighlight;
+            return theme.spr.supportWarning;
         case 'error':
-            return theme.spr.supportErrorHighlight;
+            return theme.spr.supportError;
+        case 'ai':
+            return theme.spr.clrViolet;
     }
 };
 var getPrimaryHighlightColor = function (utils, props) { return ({
     backgroundColor: getIntentHighlightColor(utils, props),
     borderColor: getIntentHighlightColor(utils, props),
 }); };
-var getPrimaryHoverColor = function (_a) {
+var getPrimaryHoverColor = function (_a, _b) {
     var theme = _a.theme;
-    return ({
-        backgroundColor: theme.spr.interactiveHover,
-        borderColor: theme.spr.interactiveHover,
-    });
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'ai':
+            return {
+                backgroundColor: theme.spr.clrFuschia,
+                borderColor: theme.spr.clrFuschia,
+            };
+        case 'default':
+            return {
+                backgroundColor: theme.spr.interactiveHover,
+                borderColor: theme.spr.interactiveHover,
+            };
+        default:
+            return {
+                backgroundColor: undefined,
+                borderColor: undefined,
+            };
+    }
+};
+var getTertiaryBorderColor = function (utils, props) {
+    var $intent = props.$intent;
+    var theme = utils.theme;
+    switch ($intent) {
+        case 'ai':
+            return theme.spr.border03;
+        default:
+            return getIntentColor(utils, props);
+    }
 };
 var getBorderRadiiStyles = function (_a, _b) {
+    var _c;
     var px2rem = _a.px2rem, theme = _a.theme;
-    var $shape = _b.$shape;
+    var $shape = _b.$shape, $size = _b.$size;
     switch ($shape) {
         case 'round':
             return (0, longHandHelpers_1.borderRadius)(theme.borderRadius.full);
@@ -74,7 +105,7 @@ var getBorderRadiiStyles = function (_a, _b) {
             return (0, longHandHelpers_1.borderRadius)(px2rem(theme.borderRadius['16']));
         default:
     }
-    return (0, longHandHelpers_1.borderRadius)(theme.button.borderRadius);
+    return (0, longHandHelpers_1.borderRadius)(((_c = getButtonSizeTheme(theme, $size)) === null || _c === void 0 ? void 0 : _c.borderRadius) || theme.button.borderRadius);
 };
 var getDimension = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
@@ -110,33 +141,190 @@ var getPaddingStyles = function (_a, _b) {
         paddingRight: buttonPadding.paddingX,
     };
 };
+var getBackground = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'ai':
+            return theme.ai.border01.background;
+        default:
+            return undefined;
+    }
+};
+var getActiveBackground = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'ai':
+            return "".concat(theme.ai.ui02, " padding-box, ").concat(theme.ai.ui01, " border-box");
+        default:
+            return undefined;
+    }
+};
+var getHoverColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'ai':
+            return theme.spr.textMagenta;
+        default:
+            return undefined;
+    }
+};
+var getActiveColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'ai':
+            return theme.spr.textMagenta;
+        default:
+            return undefined;
+    }
+};
+var getDisabledColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent, $variant = _b.$variant;
+    switch ($intent) {
+        case 'ai':
+            return theme.spr.textMagenta;
+        default:
+            return $variant === 'secondary' ? theme.spr.text03 : undefined;
+    }
+};
+var getHoverOpacity = function (_a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'ai':
+        case 'default':
+            return '1';
+        default:
+            return '0.8';
+    }
+};
+var getActiveOpacity = function (_a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'ai':
+        case 'default':
+            return '1';
+        default:
+            return '0.8';
+    }
+};
+var getDisabledOpacity = function (_a) {
+    var $intent = _a.$intent, $variant = _a.$variant;
+    switch ($intent) {
+        case 'ai':
+            return '0.2';
+        default:
+            // for secondary variant disabled state, we are using correct tokens instead of relying on opacity
+            return $variant === 'secondary' ? '1' : '0.6';
+    }
+};
 var createButtonStyles = function (_a, _b) {
-    var color = _a.color, hoverColor = _a.hoverColor, activeColor = _a.activeColor, disabledColor = _a.disabledColor, backgroundColor = _a.backgroundColor, disabledBackgroundColor = _a.disabledBackgroundColor, hoverBackgroundColor = _a.hoverBackgroundColor, activeBackgroundColor = _a.activeBackgroundColor, borderColor = _a.borderColor, hoverBorderColor = _a.hoverBorderColor, activeBorderColor = _a.activeBorderColor, disabledBorderColor = _a.disabledBorderColor;
+    var color = _a.color, hoverColor = _a.hoverColor, activeColor = _a.activeColor, disabledColor = _a.disabledColor, backgroundColor = _a.backgroundColor, disabledBackgroundColor = _a.disabledBackgroundColor, hoverBackgroundColor = _a.hoverBackgroundColor, activeBackgroundColor = _a.activeBackgroundColor, borderColor = _a.borderColor, hoverBorderColor = _a.hoverBorderColor, activeBorderColor = _a.activeBorderColor, disabledBorderColor = _a.disabledBorderColor, background = _a.background, hoverBackground = _a.hoverBackground, activeBackground = _a.activeBackground, disabledBackground = _a.disabledBackground, hoverOpacity = _a.hoverOpacity, activeOpacity = _a.activeOpacity, disabledOpacity = _a.disabledOpacity;
     var $disabled = _b.$disabled, $isSelected = _b.$isSelected, $isFocusVisible = _b.$isFocusVisible;
     if ($disabled) {
         return {
-            ':disabled': (0, tslib_1.__assign)({ color: disabledColor !== null && disabledColor !== void 0 ? disabledColor : color, backgroundColor: disabledBackgroundColor !== null && disabledBackgroundColor !== void 0 ? disabledBackgroundColor : backgroundColor }, (0, longHandHelpers_1.borderColor)(disabledBorderColor !== null && disabledBorderColor !== void 0 ? disabledBorderColor : borderColor)),
+            ':disabled': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ color: disabledColor !== null && disabledColor !== void 0 ? disabledColor : color, backgroundColor: disabledBackgroundColor !== null && disabledBackgroundColor !== void 0 ? disabledBackgroundColor : backgroundColor }, (disabledOpacity && { opacity: disabledOpacity })), (0, longHandHelpers_1.borderColor)(disabledBorderColor !== null && disabledBorderColor !== void 0 ? disabledBorderColor : borderColor)), (disabledBackground && { background: disabledBackground })),
         };
     }
-    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (hoverColor && { color: hoverColor })), (hoverBackgroundColor && { backgroundColor: hoverBackgroundColor })), (hoverBorderColor && (0, longHandHelpers_1.borderColor)(hoverBorderColor)));
-    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (activeColor && { color: activeColor })), (activeBackgroundColor && { backgroundColor: activeBackgroundColor })), (activeBorderColor && (0, longHandHelpers_1.borderColor)(activeBorderColor)));
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ color: color, backgroundColor: backgroundColor }, (0, longHandHelpers_1.borderColor)(borderColor)), ($isSelected && activeStyles)), { ':hover': hoverStyles }), ($isFocusVisible
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (hoverColor && { color: hoverColor })), (hoverBackgroundColor && { backgroundColor: hoverBackgroundColor })), (hoverBorderColor && (0, longHandHelpers_1.borderColor)(hoverBorderColor))), (hoverOpacity && { opacity: hoverOpacity })), (hoverBackground && { background: hoverBackground }));
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (activeColor && { color: activeColor })), (activeBackgroundColor && { backgroundColor: activeBackgroundColor })), (activeBorderColor && (0, longHandHelpers_1.borderColor)(activeBorderColor))), (activeOpacity && { opacity: activeOpacity })), (activeBackground && { background: activeBackground }));
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ color: color, backgroundColor: backgroundColor }, (0, longHandHelpers_1.borderColor)(borderColor)), (background && { background: background })), ($isSelected && activeStyles)), { ':hover': hoverStyles }), ($isFocusVisible
         ? {
             ':focus': hoverStyles,
         }
         : {})), { ':active': activeStyles });
 };
 exports.createButtonStyles = createButtonStyles;
+var getSprinklrAIAnimatedBorderStyles = function (utils, _a) {
+    var animate = _a.$animate;
+    var theme = utils.theme;
+    var beforeElementStyles = {
+        top: "".concat(-theme.borderWidth.default),
+        left: "".concat(-theme.borderWidth.default),
+        content: '""',
+        background: theme.ai.ui01,
+        position: 'absolute',
+        backgroundSize: '300% 300%',
+        zIndex: -1,
+        width: "calc(100% + ".concat(2 * parseFloat(theme.borderWidth.default), "px)"),
+        height: "calc(100% + ".concat(2 * parseFloat(theme.borderWidth.default), "px)"),
+        filter: 'blur(3px)',
+        animationDuration: '1000ms',
+        animationPlayState: animate ? 'running' : 'paused',
+        animationIterationCount: 'infinite',
+        animationName: {
+            '0%': {
+                backgroundPosition: '0% 50%',
+            },
+            '50%': {
+                backgroundPosition: '100% 50%',
+            },
+            '100%': {
+                backgroundPosition: '0% 50%',
+            },
+        },
+    };
+    var afterElementStyles = {
+        zIndex: -1,
+        content: '""',
+        top: '0px',
+        left: '0px',
+        position: 'absolute',
+        background: theme.spr.ui01,
+        width: '100%',
+        height: '100%',
+    };
+    return {
+        '::before': beforeElementStyles,
+        '::after': afterElementStyles,
+    };
+};
+exports.getSprinklrAIAnimatedBorderStyles = getSprinklrAIAnimatedBorderStyles;
+var getStylesWithAnimatedBorder = function (utils, props, initialStyles, borderRadiiStyles) {
+    var theme = utils.theme;
+    var afterElementBorderRadiiStyles = {
+        borderBottomLeftRadius: "calc(".concat(borderRadiiStyles.borderBottomLeftRadius, " - ").concat(theme.borderWidth.default, ")"),
+        borderBottomRightRadius: "calc(".concat(borderRadiiStyles.borderBottomRightRadius, " - ").concat(theme.borderWidth.default, ")"),
+        borderTopLeftRadius: "calc(".concat(borderRadiiStyles.borderTopLeftRadius, " - ").concat(theme.borderWidth.default, ")"),
+        borderTopRightRadius: "calc(".concat(borderRadiiStyles.borderTopRightRadius, " - ").concat(theme.borderWidth.default, ")"),
+    };
+    var isDisabled = props.$disabled, isFocused = props.$isFocusVisible;
+    var animatedBorderStyles = (0, exports.getSprinklrAIAnimatedBorderStyles)(utils, props);
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, initialStyles === null || initialStyles === void 0 ? void 0 : initialStyles[':hover']), (!isDisabled && {
+        '::after': (0, tslib_1.__assign)((0, tslib_1.__assign)({}, animatedBorderStyles === null || animatedBorderStyles === void 0 ? void 0 : animatedBorderStyles['::after']), afterElementBorderRadiiStyles),
+        '::before': (0, tslib_1.__assign)((0, tslib_1.__assign)({}, animatedBorderStyles === null || animatedBorderStyles === void 0 ? void 0 : animatedBorderStyles['::before']), borderRadiiStyles),
+    }));
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, initialStyles === null || initialStyles === void 0 ? void 0 : initialStyles[':active']), {
+        '::after': { content: 'none' },
+        '::before': { content: 'none' },
+    });
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, initialStyles), { ':hover': hoverStyles }), (isFocused
+        ? {
+            ':focus': hoverStyles,
+        }
+        : {})), { ':active': activeStyles, position: 'relative', zIndex: 0 });
+};
+exports.getStylesWithAnimatedBorder = getStylesWithAnimatedBorder;
 var getVariantStyles = function (utils, props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
     var theme = utils.theme;
-    var $variant = props.$variant, $isFocusVisible = props.$isFocusVisible, $intent = props.$intent, $isSelected = props.$isSelected;
+    var $variant = props.$variant, $intent = props.$intent, $isIconButton = props.$isIconButton;
+    var isAiIntent = $intent === 'ai';
+    if (isAiIntent && $isIconButton)
+        return {};
+    var borderRadiiStyles = getBorderRadiiStyles(utils, props);
     switch ($variant) {
         case 'primary':
         default: {
-            var _4 = getPrimaryHighlightColor(utils, props), activeBackgroundColor = _4.backgroundColor, activeBorderColor = _4.borderColor, _5 = getPrimaryHoverColor(utils), hoverBackgroundColor = _5.backgroundColor, hoverBorderColor = _5.borderColor;
+            var _28 = getPrimaryHighlightColor(utils, props), activeBackgroundColor = _28.backgroundColor, activeBorderColor = _28.borderColor, _29 = getPrimaryHoverColor(utils, props), hoverBackgroundColor = _29.backgroundColor, hoverBorderColor = _29.borderColor;
             var backgroundColor = getIntentColor(utils, props), color = theme.spr.text05, borderColor = getIntentColor(utils, props);
             var primaryButtonTheme = ((_a = theme.button) === null || _a === void 0 ? void 0 : _a.primary) || {};
+            var hoverOpacity = getHoverOpacity(props);
+            var activeOpacity = getActiveOpacity(props);
+            var disabledOpacity = getDisabledOpacity(props);
             var defaultIntentStyles = (0, exports.createButtonStyles)({
                 color: (_b = primaryButtonTheme.color) !== null && _b !== void 0 ? _b : color,
                 backgroundColor: (_c = primaryButtonTheme.backgroundColor) !== null && _c !== void 0 ? _c : backgroundColor,
@@ -145,52 +333,108 @@ var getVariantStyles = function (utils, props) {
                 borderColor: (_f = primaryButtonTheme.borderColor) !== null && _f !== void 0 ? _f : borderColor,
                 hoverBorderColor: (_g = primaryButtonTheme.hoverBorderColor) !== null && _g !== void 0 ? _g : hoverBorderColor,
                 activeBorderColor: (_h = primaryButtonTheme.activeBorderColor) !== null && _h !== void 0 ? _h : activeBorderColor,
+                disabledOpacity: disabledOpacity,
             }, props);
             var intentStyles = (0, exports.createButtonStyles)({
                 color: color,
                 backgroundColor: backgroundColor,
+                hoverBackgroundColor: hoverBackgroundColor,
+                activeBackgroundColor: activeBackgroundColor,
                 borderColor: borderColor,
                 hoverBorderColor: hoverBorderColor,
                 activeBorderColor: activeBorderColor,
+                hoverOpacity: hoverOpacity,
+                activeOpacity: activeOpacity,
+                disabledOpacity: disabledOpacity,
             }, props);
             return $intent === 'default'
                 ? defaultIntentStyles
-                : (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, intentStyles), { ':hover': { opacity: '0.8' }, ':active': { opacity: '0.8' } }), ($isFocusVisible && { ':focus': { opacity: '0.8' } }));
+                : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, intentStyles), (props.$isSelected && { opacity: '1' }));
         }
         case 'secondary': {
-            var _6 = theme.button.variantSecondary, color = _6.color, hoverBackgroundColor = _6.hoverBackgroundColor, activeBackgroundColor = _6.activeBackgroundColor;
+            var _30 = theme.button.variantSecondary, color = _30.color, hoverBackgroundColor = _30.hoverBackgroundColor, activeBackgroundColor = _30.activeBackgroundColor;
+            var hoverColor = getHoverColor(utils, props);
+            var activeColor = getActiveColor(utils, props);
+            var disabledColor = getDisabledColor(utils, props);
+            var background = getBackground(utils, props);
+            var activeBackground = getActiveBackground(utils, props);
             var secondaryButtonTheme = ((_j = theme.button) === null || _j === void 0 ? void 0 : _j.secondary) || {};
-            return (0, exports.createButtonStyles)({
+            var disabledOpacity = getDisabledOpacity(props);
+            var borderColor = isAiIntent ? theme.borderColor.transparent : theme.spr.interactive02;
+            var hoverBorderColor = isAiIntent ? theme.borderColor.transparent : theme.spr.border06;
+            var activeBorderColor = isAiIntent ? theme.borderColor.transparent : theme.spr.interactive01;
+            var disabledBorderColor = isAiIntent ? theme.borderColor.transparent : theme.spr.border02;
+            var intentStyles = (0, exports.createButtonStyles)({
                 color: (_k = secondaryButtonTheme.color) !== null && _k !== void 0 ? _k : color,
-                backgroundColor: (_l = secondaryButtonTheme.backgroundColor) !== null && _l !== void 0 ? _l : theme.spr.ui01,
-                hoverBackgroundColor: (_m = secondaryButtonTheme.hoverBackgroundColor) !== null && _m !== void 0 ? _m : hoverBackgroundColor,
-                activeBackgroundColor: (_o = secondaryButtonTheme.activeBackgroundColor) !== null && _o !== void 0 ? _o : activeBackgroundColor,
-                borderColor: (_p = secondaryButtonTheme.borderColor) !== null && _p !== void 0 ? _p : theme.spr.interactive02,
-                hoverBorderColor: (_q = secondaryButtonTheme.hoverBorderColor) !== null && _q !== void 0 ? _q : theme.spr.border06,
-                activeBorderColor: (_r = secondaryButtonTheme.activeBorderColor) !== null && _r !== void 0 ? _r : theme.spr.interactive01,
+                hoverColor: (_l = secondaryButtonTheme.color) !== null && _l !== void 0 ? _l : hoverColor,
+                activeColor: (_m = secondaryButtonTheme.activeColor) !== null && _m !== void 0 ? _m : activeColor,
+                disabledColor: (_o = secondaryButtonTheme.disabledColor) !== null && _o !== void 0 ? _o : disabledColor,
+                backgroundColor: (_p = secondaryButtonTheme.backgroundColor) !== null && _p !== void 0 ? _p : theme.spr.ui01,
+                hoverBackgroundColor: (_q = secondaryButtonTheme.hoverBackgroundColor) !== null && _q !== void 0 ? _q : hoverBackgroundColor,
+                activeBackgroundColor: (_r = secondaryButtonTheme.activeBackgroundColor) !== null && _r !== void 0 ? _r : activeBackgroundColor,
+                disabledBackgroundColor: (_s = secondaryButtonTheme.disabledBackgroundColor) !== null && _s !== void 0 ? _s : theme.spr.ui05,
+                borderColor: (_t = secondaryButtonTheme.borderColor) !== null && _t !== void 0 ? _t : borderColor,
+                hoverBorderColor: (_u = secondaryButtonTheme.hoverBorderColor) !== null && _u !== void 0 ? _u : hoverBorderColor,
+                activeBorderColor: (_v = secondaryButtonTheme.activeBorderColor) !== null && _v !== void 0 ? _v : activeBorderColor,
+                disabledBorderColor: (_w = secondaryButtonTheme.disabledBorderColor) !== null && _w !== void 0 ? _w : disabledBorderColor,
+                background: (_x = secondaryButtonTheme.background) !== null && _x !== void 0 ? _x : background,
+                hoverBackground: (_y = secondaryButtonTheme.hoverBackground) !== null && _y !== void 0 ? _y : background,
+                activeBackground: (_z = secondaryButtonTheme.activeBackground) !== null && _z !== void 0 ? _z : activeBackground,
+                disabledBackground: (_0 = secondaryButtonTheme.disabledBackground) !== null && _0 !== void 0 ? _0 : background,
+                disabledOpacity: (_1 = secondaryButtonTheme.disabledOpacity) !== null && _1 !== void 0 ? _1 : disabledOpacity,
             }, props);
+            return isAiIntent ? (0, exports.getStylesWithAnimatedBorder)(utils, props, intentStyles, borderRadiiStyles) : intentStyles;
         }
         case 'tertiary': {
-            var tertiaryButtonTheme = ((_s = theme.button) === null || _s === void 0 ? void 0 : _s.tertiary) || {};
-            return (0, exports.createButtonStyles)({
-                color: (_t = tertiaryButtonTheme.color) !== null && _t !== void 0 ? _t : getIntentTextColor(utils, props),
-                backgroundColor: (_u = tertiaryButtonTheme.backgroundColor) !== null && _u !== void 0 ? _u : theme.spr.ui01,
-                hoverBackgroundColor: (_v = tertiaryButtonTheme.hoverBackgroundColor) !== null && _v !== void 0 ? _v : theme.spr.uiHover,
-                activeBackgroundColor: (_w = tertiaryButtonTheme.activeBackgroundColor) !== null && _w !== void 0 ? _w : theme.spr.uiFocus,
-                borderColor: (_x = tertiaryButtonTheme.borderColor) !== null && _x !== void 0 ? _x : getIntentColor(utils, props),
+            var tertiaryButtonTheme = ((_2 = theme.button) === null || _2 === void 0 ? void 0 : _2.tertiary) || {};
+            var hoverColor = getHoverColor(utils, props);
+            var activeColor = getActiveColor(utils, props);
+            var disabledColor = getDisabledColor(utils, props);
+            var disabledOpacity = getDisabledOpacity(props);
+            var hoverBackground = getBackground(utils, props);
+            var activeBackground = getActiveBackground(utils, props);
+            var hoverBorderColor = isAiIntent ? theme.borderColor.transparent : undefined;
+            var activeBorderColor = isAiIntent ? theme.borderColor.transparent : undefined;
+            var intentStyles = (0, exports.createButtonStyles)({
+                color: (_3 = tertiaryButtonTheme.color) !== null && _3 !== void 0 ? _3 : getIntentTextColor(utils, props),
+                hoverColor: (_4 = tertiaryButtonTheme.hoverColor) !== null && _4 !== void 0 ? _4 : hoverColor,
+                activeColor: (_5 = tertiaryButtonTheme.activeColor) !== null && _5 !== void 0 ? _5 : activeColor,
+                disabledColor: (_6 = tertiaryButtonTheme.disabledColor) !== null && _6 !== void 0 ? _6 : disabledColor,
+                backgroundColor: (_7 = tertiaryButtonTheme.backgroundColor) !== null && _7 !== void 0 ? _7 : theme.spr.ui01,
+                hoverBackgroundColor: (_8 = tertiaryButtonTheme.hoverBackgroundColor) !== null && _8 !== void 0 ? _8 : theme.spr.uiHover,
+                activeBackgroundColor: (_9 = tertiaryButtonTheme.activeBackgroundColor) !== null && _9 !== void 0 ? _9 : theme.spr.uiFocus,
+                borderColor: (_10 = tertiaryButtonTheme.borderColor) !== null && _10 !== void 0 ? _10 : getTertiaryBorderColor(utils, props),
+                hoverBorderColor: (_11 = tertiaryButtonTheme.hoverBorderColor) !== null && _11 !== void 0 ? _11 : hoverBorderColor,
+                activeBorderColor: (_12 = tertiaryButtonTheme.activeBorderColor) !== null && _12 !== void 0 ? _12 : activeBorderColor,
+                hoverBackground: (_13 = tertiaryButtonTheme.hoverBackground) !== null && _13 !== void 0 ? _13 : hoverBackground,
+                activeBackground: (_14 = tertiaryButtonTheme.activeBackground) !== null && _14 !== void 0 ? _14 : activeBackground,
+                disabledOpacity: (_15 = tertiaryButtonTheme.disabledOpacity) !== null && _15 !== void 0 ? _15 : disabledOpacity,
             }, props);
+            return isAiIntent ? (0, exports.getStylesWithAnimatedBorder)(utils, props, intentStyles, borderRadiiStyles) : intentStyles;
         }
         case 'minimal': {
-            var minimalButtonTheme = ((_y = theme.button) === null || _y === void 0 ? void 0 : _y.minimal) || {};
-            var styles = (0, exports.createButtonStyles)({
-                color: (_z = minimalButtonTheme.color) !== null && _z !== void 0 ? _z : getIntentTextColor(utils, props),
-                backgroundColor: (_0 = minimalButtonTheme.backgroundColor) !== null && _0 !== void 0 ? _0 : 'transparent',
-                hoverBackgroundColor: (_1 = minimalButtonTheme.hoverBackgroundColor) !== null && _1 !== void 0 ? _1 : theme.spr.uiHover,
-                activeBackgroundColor: (_2 = minimalButtonTheme.activeBackgroundColor) !== null && _2 !== void 0 ? _2 : theme.spr.uiFocus,
-                borderColor: (_3 = minimalButtonTheme.borderColor) !== null && _3 !== void 0 ? _3 : 'transparent',
+            var minimalButtonTheme = ((_16 = theme.button) === null || _16 === void 0 ? void 0 : _16.minimal) || {};
+            var hoverColor = getHoverColor(utils, props);
+            var activeColor = getActiveColor(utils, props);
+            var disabledColor = getDisabledColor(utils, props);
+            var hoverBackground = getBackground(utils, props);
+            var activeBackground = getActiveBackground(utils, props);
+            var disabledOpacity = getDisabledOpacity(props);
+            var intentStyles = (0, exports.createButtonStyles)({
+                color: (_17 = minimalButtonTheme.color) !== null && _17 !== void 0 ? _17 : getIntentTextColor(utils, props),
+                hoverColor: (_18 = minimalButtonTheme.hoverColor) !== null && _18 !== void 0 ? _18 : hoverColor,
+                activeColor: (_19 = minimalButtonTheme.activeColor) !== null && _19 !== void 0 ? _19 : activeColor,
+                disabledColor: (_20 = minimalButtonTheme.disabledColor) !== null && _20 !== void 0 ? _20 : disabledColor,
+                backgroundColor: (_21 = minimalButtonTheme.backgroundColor) !== null && _21 !== void 0 ? _21 : 'transparent',
+                hoverBackgroundColor: (_22 = minimalButtonTheme.hoverBackgroundColor) !== null && _22 !== void 0 ? _22 : theme.spr.uiHover,
+                activeBackgroundColor: (_23 = minimalButtonTheme.activeBackgroundColor) !== null && _23 !== void 0 ? _23 : theme.spr.uiFocus,
+                borderColor: (_24 = minimalButtonTheme.borderColor) !== null && _24 !== void 0 ? _24 : 'transparent',
+                hoverBackground: (_25 = minimalButtonTheme.background) !== null && _25 !== void 0 ? _25 : hoverBackground,
+                activeBackground: (_26 = minimalButtonTheme.activeBackground) !== null && _26 !== void 0 ? _26 : activeBackground,
+                disabledOpacity: (_27 = minimalButtonTheme.disabledOpacity) !== null && _27 !== void 0 ? _27 : disabledOpacity,
             }, props);
-            styles.fontWeight = theme.fontWeight.normal;
-            return styles;
+            intentStyles.fontWeight = theme.fontWeight.normal;
+            return isAiIntent ? (0, exports.getStylesWithAnimatedBorder)(utils, props, intentStyles, borderRadiiStyles) : intentStyles;
         }
     }
 };
@@ -201,11 +445,10 @@ var getBaseStyles = function (_a, _b) {
 };
 exports.getButtonStyles = [
     function (utils, props) {
-        var $disabled = props.$disabled;
+        var $disabled = props.$disabled, $variant = props.$variant;
         var theme = utils.theme;
         return {
             cursor: $disabled ? 'not-allowed' : 'pointer',
-            opacity: $disabled ? '0.6' : '1',
             boxSizing: 'border-box',
             outlineWidth: theme.borderWidth['0'],
         };
@@ -224,3 +467,32 @@ exports.StyledLoadingSpinnerContainer = (0, style_1.styled)('div', function (uti
         width: lineHeight,
     };
 });
+// decides the color for 3/4 of the loader
+var getLoaderMajorColor = function (_a, _b) {
+    var theme = _a.theme;
+    var variant = _b.variant;
+    var majorTheme = theme.name.includes('light') ? theme.spr.border05 : theme.spr.border04;
+    if (variant === 'tertiary' || variant === 'minimal') {
+        majorTheme = theme.name.includes('light') ? theme.spr.border01 : theme.spr.border03;
+    }
+    return {
+        borderTopColor: majorTheme,
+        borderLeftColor: majorTheme,
+        borderRightColor: majorTheme,
+    };
+};
+exports.getLoaderMajorColor = getLoaderMajorColor;
+// decides the color for 1/4 of the loader
+var getLoaderMinorColor = function (_a, _b) {
+    var theme = _a.theme;
+    var variant = _b.variant;
+    if (variant === 'primary') {
+        return {
+            borderBottomColor: theme.name.includes('light') ? theme.spr.focus01 : theme.spr.border05,
+        };
+    }
+    return {
+        borderBottomColor: theme.name.includes('light') ? theme.spr.focus01 : theme.spr.border06,
+    };
+};
+exports.getLoaderMinorColor = getLoaderMinorColor;

package/button/types.d.ts

@@ -1,9 +1,10 @@
-import { ButtonOverrides as BaseUIButtonOverrides, KIND } from 'baseui/button';
+import { ButtonOverrides as BaseUIButtonOverrides, KIND, ButtonProps as BaseuiButtonProps } from '../baseui/button';
 import * as React from 'react';
 import { Override, StyleOverride } from '../overrides';
-import { StatefulTooltipProps } from '../tooltip';
+import { TooltipProps } from '../tooltip';
 import { ClassName, Intent, Variant, SpacewebComponentProps, Size } from '../types';
 import { ValueOf } from '../utility-types';
+import { AriaRole } from 'react';
 export declare type Shape = 'default' | 'round' | 'square' | 'pill';
 export type { Size };
 export declare type ButtonOverrides = {
@@ -21,6 +22,8 @@ export declare type ButtonSharedProps = {
     $variant?: Variant;
     $fullWidth?: boolean;
     $isFocusVisible?: boolean;
+    $isIconButton?: boolean;
+    $animate?: boolean;
 };
 export declare type ButtonProps = SpacewebComponentProps<{
     $as?: React.ElementType;
@@ -32,18 +35,21 @@ export declare type ButtonProps = SpacewebComponentProps<{
     intent?: Intent;
     isLoading?: boolean;
     isSelected?: boolean;
+    animate?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;
     autoFocus?: boolean;
+    role?: AriaRole | undefined;
     href?: string;
     target?: string;
     rel?: string;
     children?: React.ReactNode;
-    endEnhancer?: React.ReactNode;
+    endEnhancer?: BaseuiButtonProps['endEnhancer'];
     onClick?: (event: React.MouseEvent<HTMLElement>) => any;
     overrides?: ButtonOverrides;
-    startEnhancer?: React.ReactNode;
+    startEnhancer?: BaseuiButtonProps['startEnhancer'];
     type?: 'submit' | 'reset' | 'button';
-    tooltipContent?: StatefulTooltipProps['content'];
+    tooltipContent?: TooltipProps['content'];
+    tabIndex?: number | undefined;
 }>;
 export declare type VariantAdapterProps = Record<Variant, ValueOf<typeof KIND>>;

package/button-group/ButtonGroup.d.ts

@@ -14,6 +14,7 @@ declare const ButtonGroup: import("react").ForwardRefExoticComponent<Omit<{
     intent?: import("..").Intent | undefined;
     variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: import("react").AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;

package/button-group/ButtonGroup.js

@@ -9,14 +9,18 @@ var overrides_1 = require("../overrides");
 var styled_components_1 = require("./styled-components");
 var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../hooks/useCombinedRef"));
 var useTabsKeyboardNavigation_1 = require("../hooks/useTabsKeyboardNavigation");
+var style_1 = require("../style");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var ButtonGroup = (0, react_1.forwardRef)(function (_a, ref) {
-    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, props = (0, tslib_1.__rest)(_a, ["className", "style", "activateOnFocus", "overrides"]);
-    var _c = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({ activateOnFocus: activateOnFocus }), parentElementRef = _c.parentElementRef, onKeyDown = _c.onKeyDown;
+    var _b;
+    var className = _a.className, style = _a.style, activateOnFocus = _a.activateOnFocus, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, role = _a.role, props = (0, tslib_1.__rest)(_a, ["className", "style", "activateOnFocus", "overrides", "role"]);
+    var _d = (0, useTabsKeyboardNavigation_1.useTabsKeyboardNavigation)({ activateOnFocus: activateOnFocus }), parentElementRef = _d.parentElementRef, onKeyDown = _d.onKeyDown;
     var combinedRef = (0, useCombinedRef_1.default)(ref, parentElementRef);
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _d[0], rootProps = _d[1];
+    var theme = (0, style_1.useStyle)().theme;
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var renderChild = (0, react_1.useMemo)(function () { return styled_components_1.renderButtonGroupChild.bind(null, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { onKeyDown: onKeyDown })); }, [props, onKeyDown]);
-    var sharedProps = (0, helpers_1.add$props)((0, pick_1.default)(props, ['intent', 'size', 'variant', 'shape', 'mode']));
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef }, sharedProps, rootProps, { children: react_1.Children.map(props.children, renderChild) }), void 0));
+    var sharedProps = (0, helpers_1.add$props)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, pick_1.default)(props, ['intent', 'variant', 'shape', 'mode'])), { size: (_b = props.size) !== null && _b !== void 0 ? _b : (0, themeHelpers_1.getDefaultSize)(theme) }));
+    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "button-group", "aria-multiselectable": props.mode === 'checkbox', className: className, style: style, ref: combinedRef, role: role }, sharedProps, rootProps, { children: react_1.Children.map(props.children, renderChild) }), void 0));
 });
 ButtonGroup.defaultProps = {
     mode: 'radio',

package/button-group/StatefulButtonGroup.d.ts

@@ -14,6 +14,7 @@ declare const StatefulButtonGroup: import("react").ForwardRefExoticComponent<Omi
     intent?: import("..").Intent | undefined;
     variant?: import("..").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: import("react").AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;

package/button-group/styled-components.d.ts

@@ -1,6 +1,39 @@
 import * as React from 'react';
 import { StyleObject, StyleUtils } from '../types';
 import { ButtonGroupChildProps, ButtonGroupProps } from './types';
+export declare const buttonGroupButtonSizeMap: {
+    xxxs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    xs: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    sm: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    md: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+    lg: {
+        height: string;
+        marginTop: string;
+        marginBottom: string;
+        containerBorderRadius: string;
+    };
+};
+export declare const getButtonGroupSizeTheme: (theme: any, size: any, prop: any) => any;
 export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const hyperspaceButtonOverrides: (utils: StyleUtils, props: any) => StyleObject;
 export declare const renderButtonGroupChild: (props: Omit<{
@@ -18,6 +51,7 @@ export declare const renderButtonGroupChild: (props: Omit<{
     intent?: import("../types").Intent | undefined;
     variant?: import("../types").Variant | import("../button/IconTextButton").Variant | undefined;
     activateOnFocus?: boolean | undefined;
+    role?: React.AriaRole | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("../types").Styles;