@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/button/IconButton/types.d.ts

@@ -1,18 +1,18 @@
 import { ButtonProps, ButtonSharedProps } from '../types';
 import { Size } from '../../types';
-import { StatefulTooltipProps } from '../../tooltip';
-declare type BaseIconButtonProps = Omit<ButtonProps, 'size'> & {
+import { StatefulTooltipProps } from '../../tooltip/types';
+type BaseIconButtonProps = Omit<ButtonProps, 'size'> & {
     size?: Size;
     bordered?: boolean;
 };
-declare type IconButtonPropsWithAriaLabel = BaseIconButtonProps & {
+type IconButtonPropsWithAriaLabel = BaseIconButtonProps & {
     'aria-label': string;
 };
-declare type IconButtonPropsWithTooltip = BaseIconButtonProps & {
+type IconButtonPropsWithTooltip = BaseIconButtonProps & {
     tooltipContent: StatefulTooltipProps['content'];
 };
-export declare type IconButtonProps = IconButtonPropsWithAriaLabel | IconButtonPropsWithTooltip;
-export declare type SharedProps = Omit<ButtonSharedProps, '$size'> & {
+export type IconButtonProps = IconButtonPropsWithAriaLabel | IconButtonPropsWithTooltip;
+export type SharedProps = Omit<ButtonSharedProps, '$size'> & {
     $size?: Size;
     $bordered?: boolean;
 };

package/esm/button/IconTextButton/IconTextButton.js

@@ -3,22 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { mergeOverrides } from '../../overrides';
 import Button from '../Button';
-import { iconTextButtonStyle, startEnhancerStyle } from './styled-components';
+import { iconTextButtonStyle } from './styled-components';
 var IconTextButton = forwardRef(function (props, ref) {
     var _a = props.variant, variant = _a === void 0 ? 'default' : _a, bordered = props.bordered, Icon = props.icon, _b = props.size, size = _b === void 0 ? 'md' : _b, buttonProps = __rest(props, ["variant", "bordered", "icon", "size"]);
     var sharedProps = { $iconTextVariant: variant, $bordered: bordered };
     var overrides = mergeOverrides({
         BaseButton: {
-            style: iconTextButtonStyle,
+            className: iconTextButtonStyle,
             props: sharedProps,
         },
         StartEnhancer: {
-            style: startEnhancerStyle,
             props: sharedProps,
         },
     }, props.overrides || {});
-    var StyledIcon = Icon ? _jsx(Icon, { size: 12 }, void 0) : null;
-    return (_jsx(Button, __assign({}, buttonProps, { size: size, ref: ref, variant: "minimal", shape: "default", startEnhancer: StyledIcon, overrides: overrides }), void 0));
+    var StyledIcon = Icon ? _jsx(Icon, { size: 12 }) : null;
+    return (_jsx(Button, __assign({}, buttonProps, { size: size, ref: ref, variant: "minimal", shape: "default", startEnhancer: StyledIcon, overrides: overrides })));
 });
 IconTextButton.displayName = 'IconTextButton';
 export default IconTextButton;

package/esm/button/IconTextButton/styled-components.d.ts

@@ -1,3 +1,2 @@
-import { Styles } from '../../types';
-export declare const iconTextButtonStyle: Styles;
-export declare const startEnhancerStyle: Styles;
+import { ClassName } from '../../types';
+export declare const iconTextButtonStyle: ClassName;

package/esm/button/IconTextButton/styled-components.js

@@ -1,46 +1,17 @@
-import { __assign } from "tslib";
-import { borderColor } from '../../helpers/longHandHelpers';
+import cx from '../../classNames';
 var getVariantStyles = function (_a, _b) {
     var theme = _a.theme;
     var $iconTextVariant = _b.$iconTextVariant, $isSelected = _b.$isSelected;
-    if ($iconTextVariant === 'default') {
-        return {
-            color: $isSelected ? theme.spr.text04 : theme.spr.text01,
-            ':active': {
-                color: theme.spr.text04,
-            },
-            ':active svg': {
-                color: theme.spr.focus01,
-            },
-            backgroundColor: 'transparent',
-        };
-    }
-    return { backgroundColor: 'transparent' };
-};
-var getIconVariantStyles = function (_a, _b) {
-    var theme = _a.theme;
-    var $iconTextVariant = _b.$iconTextVariant, $isSelected = _b.$isSelected;
-    switch ($iconTextVariant) {
-        case 'default':
-        default:
-            return {
-                color: $isSelected ? theme.spr.focus01 : theme.spr.icon02,
-            };
-        case 'bulk':
-            return { color: theme.spr.icon04 };
-    }
+    return $iconTextVariant === 'default'
+        ? cx($isSelected ? 'spr-text-04 spr-icon-secondary' : 'spr-text-01', 'active:spr-text-04 bg-transparent')
+        : 'bg-transparent';
 };
 export var iconTextButtonStyle = [
-    function (utils, props) { return (__assign({}, (props.$bordered
-        ? __assign(__assign({}, borderColor(utils.theme.spr.border03)), { ':hover': __assign(__assign({}, borderColor(utils.theme.spr.border06)), { backgroundColor: utils.theme.spr.ui02 }), ':active': __assign(__assign({}, borderColor(utils.theme.spr.interactive01)), { backgroundColor: utils.theme.spr.ui05 }) }) : borderColor('transparent')))); },
-    getVariantStyles,
-];
-export var startEnhancerStyle = [
-    function (_a) {
-        var px2rem = _a.px2rem;
-        return ({
-            marginRight: px2rem(8),
-        });
+    function (_, _a) {
+        var $bordered = _a.$bordered;
+        return $bordered
+            ? 'spr-border-tertiary hover:spr-border-06 hover:spr-bg-secondary active:spr-bg-quinary active:spr-bg-quaternary'
+            : 'border-transparent';
     },
-    getIconVariantStyles,
+    getVariantStyles,
 ];

package/esm/button/IconTextButton/types.d.ts

@@ -1,13 +1,13 @@
 import { ComponentType } from 'react';
 import { ButtonProps, ButtonSharedProps } from '../types';
 import { IconProps } from '../../icon';
-export declare type Variant = 'default' | 'bulk';
-export declare type IconTextButtonProps = Omit<ButtonProps, 'variant'> & {
+export type Variant = 'default' | 'bulk';
+export type IconTextButtonProps = Omit<ButtonProps, 'variant'> & {
     icon?: ComponentType<React.PropsWithChildren<IconProps>>;
     variant?: Variant;
     bordered?: boolean;
 };
-export declare type SharedProps = ButtonSharedProps & {
+export type SharedProps = ButtonSharedProps & {
     $iconTextVariant?: Variant;
     $bordered?: boolean;
 };

package/esm/button/button-enhancers.d.ts

@@ -0,0 +1,34 @@
+import { ButtonProps, ButtonSharedProps } from './types';
+import * as React from 'react';
+declare const ButtonEnhancers: (props: Omit<{
+    size?: import("./types").Size | undefined;
+    shape?: import("./types").Shape | undefined;
+    variant?: import("..").Variant | undefined;
+    intent?: import("..").Intent | undefined;
+    isLoading?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    animate?: boolean | undefined;
+    dropdownContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    role?: React.AriaRole | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    children?: React.ReactNode;
+    endEnhancer?: React.ReactNode | React.ComponentType<any>;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
+    overrides?: import("./types").ButtonOverrides | undefined;
+    startEnhancer?: React.ReactNode | React.ComponentType<any>;
+    type?: "button" | "reset" | "submit" | undefined;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    tabIndex?: number | undefined;
+}, "className" | "style"> & {
+    $as?: React.ElementType | undefined;
+    className?: import("..").ClassName;
+    style?: import("..").Styles;
+} & {
+    sharedProps: ButtonSharedProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ButtonEnhancers;

package/esm/button/button-enhancers.js

@@ -0,0 +1,22 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ReactIs from 'react-is';
+import { StyledEndEnhancer, StyledStartEnhancer } from './styled-components';
+import { useOverrides } from '../overrides';
+var RenderEnhancer = function (props) {
+    var Enhancer = props.Enhancer, restProps = __rest(props, ["Enhancer"]);
+    if (typeof Enhancer === 'string') {
+        return Enhancer;
+    }
+    if (ReactIs.isValidElementType(Enhancer)) {
+        return _jsx(Enhancer, __assign({}, restProps));
+    }
+    return Enhancer;
+};
+var ButtonEnhancers = function (props) {
+    var children = props.children, _a = props.overrides, overrides = _a === void 0 ? {} : _a, startEnhancer = props.startEnhancer, endEnhancer = props.endEnhancer, sharedProps = props.sharedProps;
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _b[0], startEnhancerProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.EndEnhancer, StyledEndEnhancer), 2), EndEnhancer = _c[0], endEnhancerProps = _c[1];
+    return (_jsxs(_Fragment, { children: [startEnhancer !== null && startEnhancer !== undefined && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: _jsx(RenderEnhancer, { Enhancer: startEnhancer }) }))), children, endEnhancer !== null && endEnhancer !== undefined && (_jsx(EndEnhancer, __assign({}, sharedProps, endEnhancerProps, { children: _jsx(RenderEnhancer, { Enhancer: endEnhancer }) })))] }));
+};
+export default ButtonEnhancers;

package/esm/button/helpers.d.ts

@@ -0,0 +1,47 @@
+import { Size, StyleFn, StyleObject, StyleUtils } from '../types';
+import { ButtonSharedProps, ButtonStyleParams } from './types';
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+/**
+ * className fns that we know will always return a string; used since we directly combine these in template literals
+ */
+type StringClassNameStyleFn<P = any> = (utils: StyleUtils, props: P) => string;
+export declare const addPrefix: (classNames: string, prefix: string) => string;
+export declare const getButtonSizeTheme: (theme: Theme, size?: Size) => any;
+export declare const getPaddingStyleVariables: (_: any, { $size }: {
+    $size: any;
+}) => {
+    '--sw-padding-block-start': string;
+    '--sw-padding-block-end': string;
+} | {
+    '--sw-padding-block-start'?: undefined;
+    '--sw-padding-block-end'?: undefined;
+};
+export declare const getSizeStyles: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getBorderRadius: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getIntentbackgroundColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getIntentBorderColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getTertiaryBorderColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getIntentTextColorAtomic: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getPrimaryHoverColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getPrimaryHighlightColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getSecondaryHoverColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getSecondaryHighlightColor: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getHoverAndActiveOpacity: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getDisabledColorAtomic: StringClassNameStyleFn<ButtonSharedProps>;
+export declare const getFontStyles: StyleFn<ButtonSharedProps>;
+export declare const createButtonStyles: ({ color, hoverColor, activeColor, disabledColor, backgroundColor, disabledBackgroundColor, hoverBackgroundColor, activeBackgroundColor, borderColor, hoverBorderColor, activeBorderColor, disabledBorderColor, background, hoverBackground, activeBackground, disabledBackground, hoverOpacity, activeOpacity, disabledOpacity, }: ButtonStyleParams, { $disabled, $isSelected, $isFocusVisible }: ButtonSharedProps) => StyleObject;
+export declare const createButtonStylesAtomic: (_: StyleUtils, props: ButtonSharedProps, defaultClasses?: string, hoverClasses?: string, activeClasses?: string, disabledClasses?: string) => string;
+export declare const getThemeOverrideStyles: ({ theme }: {
+    theme: any;
+}, props: ButtonSharedProps) => StyleObject[];
+export declare const getLoaderOverrides: ({ theme }: {
+    theme: any;
+}, { $size }: {
+    $size: any;
+}) => StyleObject;
+export declare const getDropdownBorderRadius: ({ $shape, $size, }: {
+    $shape: ButtonSharedProps['$shape'];
+    $size: ButtonSharedProps['$size'];
+}) => string;
+export declare const getDropdownIconSize: ($size?: ButtonSharedProps['$size']) => number;
+export {};

package/esm/button/helpers.js

@@ -0,0 +1,335 @@
+import { __assign } from "tslib";
+import { getComponentSizeTheme, getComponentTheme } from '../helpers/themeHelpers';
+import { borderColor as borderColorLonghand } from '../helpers/longHandHelpers';
+import cx from 'classnames';
+export var addPrefix = function (classNames, prefix) {
+    return !classNames
+        ? ''
+        : classNames
+            .trim()
+            .replace(/\s+/g, ' ')
+            .split(' ')
+            .map(function (className) {
+            // Match and update CSS variable tokens like --sw-color → --sw-color-hover
+            var updatedClass = className.replace(/--sw-[\w-]+/g, function (token) { return "".concat(token, "-").concat(prefix); });
+            return "".concat(prefix, ":").concat(updatedClass);
+        })
+            .join(' ');
+};
+export var getButtonSizeTheme = function (theme, size) { return getComponentSizeTheme(theme, 'button', size, 'lg'); };
+export var getPaddingStyleVariables = function (_, _a) {
+    var $size = _a.$size;
+    switch ($size) {
+        case 'small':
+            return {
+                '--sw-padding-block-start': '0.5px',
+                '--sw-padding-block-end': '0.5px',
+            };
+        case 'medium':
+            return {
+                '--sw-padding-block-start': '4.5px',
+                '--sw-padding-block-end': '4.5px',
+            };
+        default:
+            return {};
+    }
+};
+export var getSizeStyles = function (_, _a) {
+    var $size = _a.$size;
+    switch ($size) {
+        case 'xxxs':
+            return 'min-w-12 py-1 px-1.5 text-12 leading-3.5 font-600';
+        case 'xxs':
+            return 'min-w-14 py-1.5 px-2.75 text-12 leading-3.5 font-600';
+        case 'xs':
+            return 'min-w-18 py-1.75 px-2.75 text-13 leading-4 font-600';
+        case 'sm':
+            return 'min-w-22 py-2.25 px-2.75 text-13 leading-4 font-600';
+        case 'md':
+        default:
+            return 'min-w-25 py-2.5 px-3.75 text-14 leading-4.5 font-600';
+        case 'lg':
+            return 'min-w-28 py-3 px-3.75 text-14 leading-4.5 font-600';
+        case 'xl':
+            return 'min-w-28 py-3 px-3.75 text-14 leading-4.5 font-600';
+        case 'small':
+            return 'px-2 pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] text-14 leading-150 font-600';
+        case 'medium':
+            return 'px-3 pt-[--sw-padding-block-start] pb-[--sw-padding-block-end] text-14 leading-150 font-600';
+        case 'large':
+            return 'py-1.75 px-4 text-16 leading-150 font-600';
+    }
+};
+var getDefaultBorderRadius = function (size) {
+    switch (size) {
+        case 'small':
+            return 'rounded-4';
+        case 'xxxs':
+            return 'rounded-5';
+        case 'xxs':
+            return 'rounded-6';
+        case 'xs':
+            return 'rounded-7';
+        case 'sm':
+        case 'md':
+        case 'lg':
+        case 'xl':
+        case 'medium':
+        case 'large':
+        default:
+            return 'rounded-8';
+    }
+};
+export var getBorderRadius = function (_, _a) {
+    var $size = _a.$size, $shape = _a.$shape;
+    switch ($shape) {
+        case 'round':
+            return 'rounded-full';
+        case 'square':
+            return 'rounded-0';
+        case 'pill':
+            return 'rounded-48';
+        case 'default':
+        default:
+            return getDefaultBorderRadius($size);
+    }
+};
+// background color for primary button
+export var getIntentbackgroundColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return 'spr-interactive-01';
+        case 'success':
+            return 'spr-bg-success';
+        case 'warning':
+            return 'spr-bg-warning';
+        case 'error':
+            return 'sw-btn-bg-error';
+        case 'ai':
+            return 'ai-ui-04';
+    }
+};
+// border color for primary button
+export var getIntentBorderColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return 'spr-border-quinary';
+        case 'success':
+            return 'spr-border-success';
+        case 'warning':
+            return 'spr-border-warning';
+        case 'error':
+            return 'sw-btn-border-error';
+        case 'ai':
+            return 'ai-border-02';
+    }
+};
+export var getTertiaryBorderColor = function (utils, props) {
+    var $intent = props.$intent;
+    switch ($intent) {
+        case 'ai':
+            return 'spr-border-tertiary';
+        default:
+            return getIntentBorderColor(utils, props);
+    }
+    return '';
+};
+// text color for tertiary and minimal buttons
+export var getIntentTextColorAtomic = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent, $isSelected = _b.$isSelected;
+    switch ($intent) {
+        case 'default':
+        default:
+            return theme.name.includes('dark') && $isSelected ? 'spr-text-white' : 'sw-btn-tertiary-text';
+        case 'success':
+            return 'spr-text-success';
+        case 'warning':
+            return 'spr-text-warning';
+        case 'error':
+            return 'spr-text-error';
+        case 'ai':
+            return 'spr-text-primary';
+    }
+};
+export var getPrimaryHoverColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'ai':
+            return 'ai-ui-05 ai-border-03';
+        case 'default':
+            return 'spr-interactive-hover spr-interactive-hover-border';
+        case 'error':
+            return 'sw-btn-bg-error-hover sw-btn-border-error-hover';
+        default:
+            return '';
+    }
+};
+export var getPrimaryHighlightColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return 'bg-[--sw-bg-color] spr-interactive-focus';
+        case 'success':
+            return 'spr-bg-success spr-border-success';
+        case 'warning':
+            return 'spr-bg-warning spr-border-warning';
+        case 'error':
+            return 'sw-btn-bg-error-active sw-btn-border-error-active';
+        case 'ai':
+            return 'ai-ui-06 ai-border-04';
+    }
+};
+export var getSecondaryHoverColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'ai':
+            return 'spr-bg-quaternary ai-border-02';
+        case 'default':
+        default:
+            return 'spr-bg-primary spr-border-quaternary';
+    }
+};
+export var getSecondaryHighlightColor = function (_, _a) {
+    var $intent = _a.$intent;
+    switch ($intent) {
+        case 'default':
+        default:
+            return 'spr-bg-quaternary spr-text-primary spr-border-quaternary';
+        case 'ai':
+            return 'ai-ui-03 spr-text-primary ai-border-02';
+    }
+};
+export var getHoverAndActiveOpacity = function (_, _a) {
+    var $intent = _a.$intent;
+    if ($intent === 'default' || $intent === 'ai')
+        return 'opacity-1';
+    return 'opacity-100';
+};
+export var getDisabledColorAtomic = function (_, _a) {
+    var $intent = _a.$intent, $variant = _a.$variant;
+    if ($intent === 'ai')
+        return 'spr-text-magenta';
+    if ($variant === 'secondary')
+        return 'spr-text-tertiary';
+    return '';
+};
+export var getFontStyles = function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    return getButtonSizeTheme(theme, $size).fontStyles;
+};
+export 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': __assign(__assign(__assign({ color: disabledColor !== null && disabledColor !== void 0 ? disabledColor : color, backgroundColor: disabledBackgroundColor !== null && disabledBackgroundColor !== void 0 ? disabledBackgroundColor : backgroundColor }, (disabledOpacity && { opacity: disabledOpacity })), borderColorLonghand(disabledBorderColor !== null && disabledBorderColor !== void 0 ? disabledBorderColor : borderColor)), (disabledBackground && { background: disabledBackground !== null && disabledBackground !== void 0 ? disabledBackground : background })),
+            __useCssInJs: 1,
+        };
+    }
+    var hoverStyles = __assign(__assign(__assign(__assign(__assign({}, (hoverColor && { color: hoverColor })), (hoverBackgroundColor && { backgroundColor: hoverBackgroundColor })), (hoverBorderColor && borderColorLonghand(hoverBorderColor))), (hoverOpacity && { opacity: hoverOpacity })), (hoverBackground && { background: hoverBackground }));
+    var activeStyles = __assign(__assign(__assign(__assign(__assign({}, (activeColor && { color: activeColor })), (activeBackgroundColor && { backgroundColor: activeBackgroundColor })), (activeBorderColor && borderColorLonghand(activeBorderColor))), (activeOpacity && { opacity: activeOpacity })), (activeBackground && { background: activeBackground }));
+    return __assign(__assign(__assign(__assign(__assign(__assign({ color: color, backgroundColor: backgroundColor }, borderColorLonghand(borderColor)), (background && { background: background })), ($isSelected && activeStyles)), { ':hover': hoverStyles }), ($isFocusVisible
+        ? {
+            ':focus': hoverStyles,
+            __useCssInJs: 1,
+        }
+        : {})), { ':active': activeStyles, ':active:hover': activeStyles, __useCssInJs: 1 });
+};
+export var createButtonStylesAtomic = function (_, props, defaultClasses, hoverClasses, activeClasses, disabledClasses) {
+    if (defaultClasses === void 0) { defaultClasses = ''; }
+    if (hoverClasses === void 0) { hoverClasses = ''; }
+    if (activeClasses === void 0) { activeClasses = ''; }
+    if (disabledClasses === void 0) { disabledClasses = ''; }
+    var $disabled = props.$disabled, $isFocusVisible = props.$isFocusVisible, $isSelected = props.$isSelected;
+    if ($disabled) {
+        return cx(addPrefix(defaultClasses, 'disabled'), addPrefix(disabledClasses, 'disabled'));
+    }
+    return cx(defaultClasses, addPrefix(hoverClasses, 'hover'), addPrefix(activeClasses, 'active'), $isFocusVisible ? addPrefix(hoverClasses, 'focus') : '', $isSelected ? activeClasses : '');
+};
+export var getThemeOverrideStyles = function (_a, props) {
+    var theme = _a.theme;
+    var _b = props.$variant, $variant = _b === void 0 ? 'default' : _b, $size = props.$size, $shape = props.$shape, $fullWidth = props.$fullWidth;
+    var buttonTheme = getComponentTheme(theme, 'button');
+    var variantTheme = buttonTheme === null || buttonTheme === void 0 ? void 0 : buttonTheme[$variant];
+    var variantSecondaryTheme = buttonTheme === null || buttonTheme === void 0 ? void 0 : buttonTheme.variantSecondary;
+    var overrideStyleObj = [];
+    overrideStyleObj.push((buttonTheme === null || buttonTheme === void 0 ? void 0 : buttonTheme.borderRadius) && (!$shape || $shape === 'default') ? { borderRadius: buttonTheme.borderRadius } : {});
+    if ($variant === 'secondary' && variantSecondaryTheme) {
+        var variantSecondaryStyles = createButtonStyles(__assign(__assign({}, variantSecondaryTheme), { disabledColor: theme.spr.text03 }), props);
+        overrideStyleObj.push(variantSecondaryStyles);
+    }
+    if (variantTheme) {
+        var variantThemeStyles = createButtonStyles(variantTheme, props);
+        overrideStyleObj.push(variantThemeStyles);
+    }
+    var buttonSizeTheme = getButtonSizeTheme(theme, $size);
+    if (buttonSizeTheme) {
+        var buttonSizeThemeStyleObj = __assign(__assign(__assign(__assign(__assign({}, ((buttonSizeTheme === null || buttonSizeTheme === void 0 ? void 0 : buttonSizeTheme.minWidth) && !$fullWidth ? { minWidth: buttonSizeTheme.minWidth } : {})), ((buttonSizeTheme === null || buttonSizeTheme === void 0 ? void 0 : buttonSizeTheme.paddingY) && $shape !== 'round' ? { paddingBlock: buttonSizeTheme.paddingY } : {})), ((buttonSizeTheme === null || buttonSizeTheme === void 0 ? void 0 : buttonSizeTheme.paddingX) && $shape !== 'round' ? { paddingInline: buttonSizeTheme.paddingX } : {})), ((buttonSizeTheme === null || buttonSizeTheme === void 0 ? void 0 : buttonSizeTheme.borderRadius) && (!$shape || $shape === 'default')
+            ? { borderRadius: buttonSizeTheme.borderRadius }
+            : {})), ((buttonSizeTheme === null || buttonSizeTheme === void 0 ? void 0 : buttonSizeTheme.fontStyles) ? __assign({}, buttonSizeTheme.fontStyles) : {}));
+        if ($variant === 'minimal') {
+            buttonSizeThemeStyleObj.fontWeight = undefined;
+        }
+        overrideStyleObj.push(buttonSizeThemeStyleObj);
+    }
+    return overrideStyleObj;
+};
+export var getLoaderOverrides = function (_a, _b) {
+    var _c;
+    var theme = _a.theme;
+    var $size = _b.$size;
+    var fontStyles = (_c = getButtonSizeTheme(theme, $size)) === null || _c === void 0 ? void 0 : _c.fontStyles;
+    return (fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles.lineHeight) ? { height: fontStyles.lineHeight, width: fontStyles.lineHeight } : {};
+};
+export var getDropdownBorderRadius = function (_a) {
+    var $shape = _a.$shape, $size = _a.$size;
+    switch ($shape) {
+        case 'pill':
+            return 'rounded-r-48 rounded-l-0';
+        case 'default':
+        default:
+            switch ($size) {
+                case 'small':
+                    return 'rounded-r-4 rounded-l-0';
+                case 'xxxs':
+                    return 'rounded-r-5 rounded-l-0';
+                case 'xxs':
+                    return 'rounded-r-6 rounded-l-0';
+                case 'xs':
+                    return 'rounded-r-7 rounded-l-0';
+                case 'sm':
+                case 'md':
+                case 'lg':
+                case 'xl':
+                case 'medium':
+                case 'large':
+                default:
+                    return 'rounded-r-8 rounded-l-0';
+            }
+    }
+};
+export var getDropdownIconSize = function ($size) {
+    switch ($size) {
+        case 'xxxs':
+        case 'xxs':
+        case 'xs':
+        case 'small':
+            return 8;
+        case 'sm':
+        case 'md':
+        case 'medium':
+        default:
+            return 12;
+        case 'lg':
+        case 'xl':
+        case 'large':
+            return 14;
+    }
+};

package/esm/button/index.d.ts

@@ -1,5 +1,9 @@
 export { default as Button } from './Button';
 export { default as IconButton } from './IconButton';
+export { default as CitationButton } from './CitationButton';
 export { default as IconTextButton } from './IconTextButton';
-export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, } from '../baseui/button';
+export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinnerContainer } from './styled-components';
 export type { ButtonProps, Shape, ButtonSharedProps, Size, ButtonOverrides } from './types';
+export type { IconButtonProps, SharedProps as IconButtonSharedProps } from './IconButton';
+export type { IconTextButtonProps } from './IconTextButton';
+export type { CitationButtonProps } from './CitationButton';

package/esm/button/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
 export { default as IconButton } from './IconButton';
+export { default as CitationButton } from './CitationButton';
 export { default as IconTextButton } from './IconTextButton';
-export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, } from '../baseui/button';
+export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinnerContainer } from './styled-components';

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

@@ -1,45 +1,16 @@
-import { StyleFn, StyleObject, Styles, StyleUtils } from '../types';
+import { ClassName, StyleFn } from '../types';
 import { ButtonSharedProps } from './types';
-declare type ButtonStyleParams = {
-    color: string;
-    hoverColor?: string;
-    activeColor?: string;
-    disabledColor?: string;
-    backgroundColor: string;
-    disabledBackgroundColor?: string;
-    hoverBackgroundColor?: string;
-    activeBackgroundColor?: string;
-    borderColor: string;
-    hoverBorderColor?: string;
-    activeBorderColor?: string;
-    disabledBorderColor?: string;
-    background?: string;
-    hoverBackground?: string;
-    activeBackground?: string;
-    disabledBackground?: string;
-    hoverOpacity?: string;
-    activeOpacity?: string;
-    disabledOpacity?: string;
-};
-export declare const createButtonStyles: ({ color, hoverColor, activeColor, disabledColor, backgroundColor, disabledBackgroundColor, hoverBackgroundColor, activeBackgroundColor, borderColor, hoverBorderColor, activeBorderColor, disabledBorderColor, background, hoverBackground, activeBackground, disabledBackground, hoverOpacity, activeOpacity, disabledOpacity, }: ButtonStyleParams, { $disabled, $isSelected, $isFocusVisible }: ButtonSharedProps) => StyleObject;
-export declare const getSprinklrAIAnimatedBorderStyles: StyleFn;
-export declare const getStylesWithAnimatedBorder: (utils: StyleUtils, props: ButtonSharedProps, initialStyles: StyleObject, borderRadiiStyles: StyleObject) => StyleObject;
-export declare const getButtonStyles: Styles;
-export declare const StyledLoadingSpinnerContainer: import("../style/styled").StyledComponent;
-export declare const getLoaderMajorColor: ({ theme }: {
+export declare const getBorderRadiiStyles: ({ theme, px2rem }: {
     theme: any;
-}, { variant }: {
-    variant: any;
-}) => {
-    borderTopColor: any;
-    borderLeftColor: any;
-    borderRightColor: any;
-};
-export declare const getLoaderMinorColor: ({ theme }: {
-    theme: any;
-}, { variant }: {
-    variant: any;
-}) => {
-    borderBottomColor: any;
-};
-export {};
+    px2rem: any;
+}, { $shape, $size }: ButtonSharedProps) => string;
+export declare const getButtonStyleAtomic: ClassName;
+export declare const getButtonStyles: ClassName;
+export declare const StyledLoadingSpinnerContainer: import("../style").StyledComponent;
+export declare const getLoaderMajorColor: StyleFn<ButtonSharedProps>;
+export declare const getLoaderMinorColor: StyleFn<ButtonSharedProps>;
+export declare const StyledEndEnhancer: import("../style").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const getLoadingSpinnerClasses: ClassName;
+export declare const getLoadingSpinnerStyles: StyleFn<ButtonSharedProps>;
+export declare const StyledTriggerButton: import("../style").StyledComponent;