@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/button/styled-components.js

@@ -1,498 +1,175 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLoaderMinorColor = exports.getLoaderMajorColor = exports.StyledLoadingSpinnerContainer = exports.getButtonStyles = exports.getStylesWithAnimatedBorder = exports.getSprinklrAIAnimatedBorderStyles = exports.createButtonStyles = void 0;
+exports.StyledTriggerButton = exports.getLoadingSpinnerStyles = exports.getLoadingSpinnerClasses = exports.StyledStartEnhancer = exports.StyledEndEnhancer = exports.getLoaderMinorColor = exports.getLoaderMajorColor = exports.StyledLoadingSpinnerContainer = exports.getButtonStyles = exports.getButtonStyleAtomic = exports.getBorderRadiiStyles = void 0;
 var tslib_1 = require("tslib");
 var themeHelpers_1 = require("../helpers/themeHelpers");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var style_1 = require("../style");
-var getButtonSizeTheme = function (theme, size) { return (0, themeHelpers_1.getComponentSizeTheme)(theme, 'button', size, 'lg'); };
-var getIntentTextColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $intent = _b.$intent;
-    switch ($intent) {
-        case 'default':
-        default:
-            return theme.spr.text04;
-        case 'success':
-            return theme.spr.supportSuccessText;
-        case 'warning':
-            return theme.spr.supportWarning;
-        case 'error':
-            return theme.spr.supportErrorText;
-        case 'ai':
-            return theme.spr.text01;
-    }
-};
-var getIntentColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $intent = _b.$intent;
-    switch ($intent) {
-        case 'default':
-        default:
-            return theme.spr.interactive01;
-        case 'success':
-            return theme.spr.supportSuccess;
-        case 'warning':
-            return theme.spr.supportWarning;
-        case 'error':
-            return theme.spr.supportError;
-        case 'ai':
-            return theme.spr.clrMagenta;
-    }
-};
-var getIntentHighlightColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $intent = _b.$intent;
-    switch ($intent) {
-        case 'default':
-        default:
-            return theme.spr.interactiveFocus;
-        case 'success':
-            return theme.spr.supportSuccess;
-        case 'warning':
-            return theme.spr.supportWarning;
-        case 'error':
-            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, _b) {
-    var theme = _a.theme;
-    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 base_button_1 = require("../base-button");
+var helpers_1 = require("./helpers");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var borderRadiusMap = {
+    xxxs: '5px',
+    xxs: '6px',
+    xs: '7px',
+    sm: '8px',
+    md: '8px',
+    lg: '8px',
+    small: '4px',
+    medium: '8px',
+    large: '8px',
 };
 var getBorderRadiiStyles = function (_a, _b) {
-    var _c;
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $shape = _b.$shape, $size = _b.$size;
+    var _c, _d, _e, _f, _g;
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $shape = _b.$shape, _h = _b.$size, $size = _h === void 0 ? 'md' : _h;
     switch ($shape) {
         case 'round':
-            return (0, longHandHelpers_1.borderRadius)(theme.borderRadius.full);
+            return '100%';
         case 'square':
-            return (0, longHandHelpers_1.borderRadius)(theme.borderRadius['0']);
+            return px2rem('0px');
         case 'pill':
-            return (0, longHandHelpers_1.borderRadius)(px2rem(theme.borderRadius['16']));
-        default:
-    }
-    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;
-    var $size = _b.$size, $fullWidth = _b.$fullWidth;
-    if ($fullWidth) {
-        return { width: '100%' };
-    }
-    return {
-        minWidth: getButtonSizeTheme(theme, $size).minWidth,
-    };
-};
-var getFontStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var $size = _b.$size;
-    return getButtonSizeTheme(theme, $size).fontStyles;
-};
-var getPaddingStyles = function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $size = _b.$size, $shape = _b.$shape;
-    if ($shape === 'round') {
-        return {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: 0,
-            paddingRight: 0,
-        };
-    }
-    var buttonPadding = getButtonSizeTheme(theme, $size);
-    return {
-        paddingTop: buttonPadding.paddingY,
-        paddingBottom: buttonPadding.paddingY,
-        paddingLeft: buttonPadding.paddingX,
-        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;
+            return px2rem('48px');
         default:
-            return undefined;
     }
+    return px2rem((_g = (_f = (_d = (_c = (0, helpers_1.getButtonSizeTheme)(theme, $size)) === null || _c === void 0 ? void 0 : _c.borderRadius) !== null && _d !== void 0 ? _d : (_e = (0, themeHelpers_1.getComponentTheme)(theme, 'button')) === null || _e === void 0 ? void 0 : _e.borderRadius) !== null && _f !== void 0 ? _f : borderRadiusMap[$size]) !== null && _g !== void 0 ? _g : borderRadiusMap.md);
 };
-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, 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)((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)((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, _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, $intent = props.$intent, $isIconButton = props.$isIconButton;
+exports.getBorderRadiiStyles = getBorderRadiiStyles;
+var getVariantStyleAtomic = function (utils, props) {
+    var $variant = props.$variant, $intent = props.$intent, $isIconButton = props.$isIconButton, $isRenderedInsideButtonGroup = props.$isRenderedInsideButtonGroup;
     var isAiIntent = $intent === 'ai';
-    if (isAiIntent && $isIconButton)
-        return {};
-    var borderRadiiStyles = getBorderRadiiStyles(utils, props);
+    if (isAiIntent && ($isIconButton || $isRenderedInsideButtonGroup))
+        return '';
     switch ($variant) {
         case 'primary':
         default: {
-            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,
-                hoverBackgroundColor: (_d = primaryButtonTheme.hoverBackgroundColor) !== null && _d !== void 0 ? _d : hoverBackgroundColor,
-                activeBackgroundColor: (_e = primaryButtonTheme.activeBackgroundColor) !== null && _e !== void 0 ? _e : activeBackgroundColor,
-                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)({}, intentStyles), (props.$isSelected && { opacity: '1' }));
+            var defaultClasses = "".concat(isAiIntent ? 'spr-text-inverse' : 'spr-text-white', " ").concat((0, helpers_1.getIntentbackgroundColor)(utils, props), " ").concat((0, helpers_1.getIntentBorderColor)(utils, props), " ").concat(props.$isSelected ? 'opacity-1' : '');
+            var hoverClasses = "".concat((0, helpers_1.getPrimaryHoverColor)(utils, props), " ").concat((0, helpers_1.getHoverAndActiveOpacity)(utils, props));
+            var activeClasses = (0, helpers_1.getPrimaryHighlightColor)(utils, props);
+            var disabledClasses = '';
+            return (0, helpers_1.createButtonStylesAtomic)(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
         }
         case 'secondary': {
-            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) || {};
-            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,
-                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;
+            var borderColor = (function () {
+                if (isAiIntent) {
+                    return 'ai-border-02';
+                }
+                return 'spr-border-primary';
+            })();
+            var defaultClasses = "spr-text-primary spr-bg-primary ".concat(borderColor);
+            var hoverClasses = "".concat((0, helpers_1.getSecondaryHoverColor)(utils, props));
+            var activeClasses = (0, helpers_1.getSecondaryHighlightColor)(utils, props);
+            var disabledClasses = "spr-bg-primary ".concat(isAiIntent ? 'spr-bg-primary ai-border-02' : 'spr-border-primary', " ").concat((0, helpers_1.getDisabledColorAtomic)(utils, props));
+            return (0, helpers_1.createButtonStylesAtomic)(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
         }
         case 'tertiary': {
-            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;
+            var defaultClasses = "spr-bg-primary ".concat((0, helpers_1.getIntentTextColorAtomic)(utils, props), " ").concat((0, helpers_1.getTertiaryBorderColor)(utils, props));
+            var hoverClasses = "sw-btn-tertiary-hover ".concat($intent === 'ai' ? 'spr-bg-primary spr-text-primary ai-border-02' : '');
+            var activeClasses = "sw-btn-tertiary-active ".concat($intent === 'ai' ? 'ai-ui-03 spr-text-primary ai-border-02' : '');
+            var disabledClasses = "spr-bg-primary ".concat($intent === 'ai' ? 'spr-bg-primary' : '', " ").concat((0, helpers_1.getDisabledColorAtomic)(utils, props));
+            return (0, helpers_1.createButtonStylesAtomic)(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
         }
         case 'minimal': {
-            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);
-            intentStyles.fontWeight = theme.fontWeight.normal;
-            return isAiIntent ? (0, exports.getStylesWithAnimatedBorder)(utils, props, intentStyles, borderRadiiStyles) : intentStyles;
+            var defaultClasses = "border-transparent bg-transparent ".concat($intent === 'ai' ? '' : 'font-600', " ").concat((0, helpers_1.getIntentTextColorAtomic)(utils, props));
+            var hoverClasses = "sw-btn-tertiary-hover ".concat($intent === 'ai' ? 'spr-bg-primary spr-text-primary ai-border-02' : '');
+            var activeClasses = "sw-btn-tertiary-active ".concat($intent === 'ai' ? 'ai-ui-03 spr-text-primary ai-border-02' : '');
+            var disabledClasses = "".concat((0, helpers_1.getDisabledColorAtomic)(utils, props));
+            return (0, helpers_1.createButtonStylesAtomic)(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
         }
     }
 };
-var getBaseStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var _c = _b.$isLoading, $isLoading = _c === void 0 ? false : _c;
-    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderWidth)(theme.borderWidth.default)), { borderStyle: 'solid', flexDirection: $isLoading ? 'column' : 'row' }));
-};
+exports.getButtonStyleAtomic = [
+    function (_, _a) {
+        var $disabled = _a.$disabled, $isLoading = _a.$isLoading;
+        return (0, classnames_1.default)($disabled ? 'cursor-not-allowed' : 'cursor-pointer', $isLoading ? 'relative' : '');
+    },
+    'border-solid border-1 outline-0 border-box',
+    helpers_1.getSizeStyles,
+    function (_, _a) {
+        var $fullWidth = _a.$fullWidth;
+        return ($fullWidth ? 'w-full' : '');
+    },
+    helpers_1.getBorderRadius,
+];
 exports.getButtonStyles = [
-    function (utils, props) {
-        var $disabled = props.$disabled, $variant = props.$variant;
-        var theme = utils.theme;
-        return {
-            cursor: $disabled ? 'not-allowed' : 'pointer',
-            boxSizing: 'border-box',
-            outlineWidth: theme.borderWidth['0'],
-        };
+    getVariantStyleAtomic,
+    function (_, _a) {
+        var $disabled = _a.$disabled;
+        return $disabled ? 'forced-colors:opacity-100 opacity-33' : '';
     },
-    getBaseStyles,
-    getDimension,
-    getFontStyles,
-    getPaddingStyles,
-    getVariantStyles,
-    getBorderRadiiStyles,
+    // @ts-ignore -- TS2322: Type 'StyleFn<ButtonSharedProps>' is not assignable to type 'StyleAtom...
+    helpers_1.getThemeOverrideStyles,
 ];
-exports.StyledLoadingSpinnerContainer = (0, style_1.styled)('div', function (utils, props) {
-    var lineHeight = getFontStyles(utils, props).lineHeight;
-    return {
-        height: lineHeight,
-        width: lineHeight,
-    };
-});
+exports.StyledLoadingSpinnerContainer = (0, style_1.styled)('div', 'absolute inset-0 h-full w-full rounded-inherit flex items-center justify-center', function (_, props) { return (props.$variant === 'minimal' ? 'spr-bg-primary' : 'background-inherit bg-inherit'); });
 // 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,
-    };
+    var $variant = _b.$variant;
+    if ($variant === 'primary')
+        return theme.name.includes('light') ? theme.spr.borderWhite : theme.spr.borderQuaternary;
+    return theme.name.includes('light') ? theme.spr.borderPrimary : theme.spr.borderTertiary;
 };
 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,
-        };
+    var $variant = _b.$variant, $intent = _b.$intent;
+    if ($variant === 'primary') {
+        if ($intent === 'error')
+            return theme.spr.supportError;
+        return theme.spr.borderQuinary;
     }
-    return {
-        borderBottomColor: theme.name.includes('light') ? theme.spr.focus01 : theme.spr.border06,
-    };
+    return theme.name.includes('light') ? theme.spr.borderQuinary : theme.spr.borderQuaternary;
 };
 exports.getLoaderMinorColor = getLoaderMinorColor;
+exports.StyledEndEnhancer = (0, style_1.styled)('div', 'flex ml-1');
+exports.StyledEndEnhancer.displayName = 'EndEnhancer';
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'flex mr-1');
+exports.StyledStartEnhancer.displayName = 'StartEnhancer';
+exports.getLoadingSpinnerClasses = [
+    'animate-clip border-2',
+    'border-b-[--sw-border-bottom-color] border-t-[--sw-border-top-color]' +
+        ' border-r-[--sw-border-right-color] border-l-[--sw-border-left-color]',
+    function (_, _a) {
+        var $size = _a.$size;
+        switch ($size) {
+            case 'xxxs':
+            case 'small':
+                return 'w-3.5 h-3.5';
+            case 'xxs':
+                return 'w-3.5 h-3.5';
+            case 'xs':
+                return 'w-4 h-4';
+            case 'sm':
+                return 'w-4 h-4';
+            case 'md':
+            case 'medium':
+            case 'large':
+            default:
+                return 'w-4.5 h-4.5';
+            case 'lg':
+                return 'w-4.5 h-4.5';
+            case 'xl':
+                return 'w-4.5 h-4.5';
+        }
+    },
+    // @ts-ignore -- TS2322: Type 'StyleFn<ButtonSharedProps>' is not assignable to type 'StyleAtom...
+    helpers_1.getLoaderOverrides,
+];
+var getLoadingSpinnerStyles = function (utils, props) { return ({
+    '--sw-border-bottom-color': (0, exports.getLoaderMinorColor)(utils, props),
+    '--sw-border-top-color': (0, exports.getLoaderMajorColor)(utils, props),
+    '--sw-border-right-color': (0, exports.getLoaderMajorColor)(utils, props),
+    '--sw-border-left-color': (0, exports.getLoaderMajorColor)(utils, props),
+}); };
+exports.getLoadingSpinnerStyles = getLoadingSpinnerStyles;
+exports.StyledTriggerButton = (0, style_1.styledWithCssVariables)('button', function (_a, _b) {
+    var theme = _a.theme;
+    var $variant = _b.$variant, $intent = _b.$intent, $isSelected = _b.$isSelected, $isFocusVisible = _b.$isFocusVisible;
+    var isPrimaryDefault = $variant === 'primary' && $intent === 'default';
+    var leftBorder = {
+        borderInlineStartWidth: '1px',
+        borderInlineStartColor: 'inherit',
+        marginInlineStart: '-1px',
+    };
+    return tslib_1.__assign(tslib_1.__assign({ '--sw-bg-color': isPrimaryDefault ? theme.spr.interactiveFocus : '', '--sw-bg-color-active': isPrimaryDefault ? theme.spr.interactiveFocus : '' }, ($variant !== 'primary' && tslib_1.__assign(tslib_1.__assign({}, (($isSelected || $isFocusVisible) && leftBorder)), { ':hover': leftBorder }))), { __useCssInJs: 1 });
+}, base_button_1.buttonResetStyles, exports.getButtonStyleAtomic, exports.getButtonStyles);