@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/button/Button.d.ts

@@ -9,19 +9,22 @@ declare const Button: React.ForwardRefExoticComponent<Omit<{
     intent?: import("..").Intent | undefined;
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
+    animate?: boolean | undefined;
     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;
+    endEnhancer?: React.ReactNode | React.ComponentType<any>;
     onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
     overrides?: import("./types").ButtonOverrides | undefined;
-    startEnhancer?: React.ReactNode;
+    startEnhancer?: React.ReactNode | React.ComponentType<any>;
     type?: "button" | "reset" | "submit" | undefined;
-    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    tabIndex?: number | undefined;
 }, "style" | "className"> & {
     $as?: React.ElementType<any> | undefined;
     className?: import("..").Styles;

package/button/Button.js

@@ -5,8 +5,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
-var button_1 = require("baseui/button");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var button_1 = require("../baseui/button");
 var overrides_1 = require("../overrides");
 var styled_components_1 = require("./styled-components");
 var basewebAdapter_1 = (0, tslib_1.__importDefault)(require("./basewebAdapter"));
@@ -14,16 +13,22 @@ var helpers_1 = require("../helpers");
 var base_button_1 = require("../base-button");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("../form-control/context");
+var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var styled_component_1 = require("../loader/styled-component");
 button_1.Button.displayName = 'BaseUIButton';
 var Button = React.forwardRef(function (props, ref) {
     var buttonRef = ref;
-    var _a = (0, context_1.useContextualFormProps)(props), _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, _d = _a.size, size = _d === void 0 ? 'lg' : _d, fullWidth = _a.fullWidth, className = _a.className, style = _a.style, overrides = _a.overrides, tooltipContent = _a.tooltipContent, restProps = (0, tslib_1.__rest)(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent"]);
+    var _a = (0, context_1.useContextualFormProps)(props), _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, _size = _a.size, fullWidth = _a.fullWidth, className = _a.className, style = _a.style, overrides = _a.overrides, tooltipContent = _a.tooltipContent, animate = _a.animate, restProps = (0, tslib_1.__rest)(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent", "animate"]);
+    var isSelected = restProps.isSelected;
+    var _d = (0, useStyle_1.default)(), getStyle = _d.getStyle, isRTL = _d.isRTL, theme = _d.theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var buttonOverrides = React.useMemo(function () { return (0, omit_1.default)(overrides, 'StatefulTooltip'); }, [overrides]);
     var adaptedProps = (0, basewebAdapter_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { variant: variant, overrides: buttonOverrides }));
-    var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)(adaptedProps.overrides || {});
+    var convertedOverrides = (0, overrides_1.mergeOverrides)(adaptedProps.overrides || {});
     var mergedOverrides = (0, overrides_1.mergeOverrides)({
         BaseButton: {
-            props: (0, tslib_1.__assign)({ className: [styled_components_1.getButtonStyles, className, style] }, (0, helpers_1.add$props)({ variant: variant, intent: intent, size: size, fullWidth: fullWidth })),
+            props: (0, tslib_1.__assign)({ className: [styled_components_1.getButtonStyles, className, style] }, (0, helpers_1.add$props)({ variant: variant, intent: intent, size: size, fullWidth: fullWidth, animate: animate })),
             component: base_button_1.StyledBaseButton, //using StyledBaseButton instead of BaseButton as all the handling is done by baseui's Button.
         },
         LoadingSpinnerContainer: {
@@ -33,18 +38,35 @@ var Button = React.forwardRef(function (props, ref) {
             },
         },
         LoadingSpinner: {
-            style: {
-                height: '100%',
-                width: '100%',
-            },
+            component: styled_component_1.StyledClipLoader,
+            style: [
+                (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ height: '100%', width: '100%' }, (0, styled_components_1.getLoaderMajorColor)({ theme: theme }, { variant: variant })), (0, styled_components_1.getLoaderMinorColor)({ theme: theme }, { variant: variant })), { animationName: {
+                        '0%': {
+                            transform: 'rotate(0deg) scale(1)',
+                        },
+                        '50%': {
+                            transform: 'rotate(180deg) scale(1)',
+                        },
+                        '100%': {
+                            transform: 'rotate(360deg) scale(1)',
+                        },
+                    } }),
+                'border-2',
+            ],
+        },
+        StartEnhancer: {
+            style: 'mr-1',
+        },
+        EndEnhancer: {
+            style: 'ml-1',
         },
     }, (0, pick_1.default)(adaptedProps.overrides, 'BaseButton'));
     var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _e[0], statefulTooltipProps = _e[1];
     var buttonEl = ((0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { onClick: adaptedProps.onClick, overrides: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
     if (adaptedProps.disabled && tooltipContent) {
-        return ((0, jsx_runtime_1.jsx)(tooltip_1.DisabledTooltipContainer, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), void 0));
+        return ((0, jsx_runtime_1.jsx)(tooltip_1.DisabledTooltipContainer, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0));
     }
-    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: buttonEl }), void 0)) : (buttonEl);
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0)) : (buttonEl);
 });
 Button.displayName = 'Button';
 exports.default = Button;

package/button/IconButton/IconButton.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "size"> & {
-    size?: import("..").Size | undefined;
-    bordered?: boolean | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+import { IconButtonProps } from './types';
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/button/IconButton/IconButton.js

@@ -7,16 +7,25 @@ var overrides_1 = require("../../overrides");
 var style_1 = require("../../style");
 var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
 var styled_components_1 = require("./styled-components");
+var themeHelpers_1 = require("../../helpers/themeHelpers");
 var IconButton = (0, react_1.forwardRef)(function (props, ref) {
     var theme = (0, style_1.useStyle)().theme;
-    var bordered = props.bordered, _a = props.size, size = _a === void 0 ? 'md' : _a, className = props.className, style = props.style, _b = props.variant, variant = _b === void 0 ? 'minimal' : _b, _c = props.shape, shape = _c === void 0 ? 'round' : _c, buttonProps = (0, tslib_1.__rest)(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var bordered = props.bordered, _size = props.size, className = props.className, style = props.style, _a = props.variant, variant = _a === void 0 ? 'minimal' : _a, _b = props.shape, shape = _b === void 0 ? 'round' : _b, buttonProps = (0, tslib_1.__rest)(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
     var overrides = (0, overrides_1.mergeOverrides)({
         BaseButton: {
             style: [styled_components_1.iconButtonStyles, className, style],
-            props: { $bordered: bordered, $size: size, $isIconButton: true },
+            props: {
+                $bordered: bordered,
+                $size: size,
+                $isIconButton: true,
+                $intent: props.intent,
+                $variant: variant,
+            },
         },
     }, buttonProps.overrides);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, (0, tslib_1.__assign)({ variant: variant, shape: shape }, buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) }), void 0));
+    var ariaLabel = typeof buttonProps.tooltipContent === 'string' && !buttonProps.isLoading ? buttonProps.tooltipContent : undefined;
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, (0, tslib_1.__assign)({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) }), void 0));
 });
 IconButton.displayName = 'IconButton';
 exports.default = IconButton;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconProps } from '../../icon';
 import { Styles } from '../../types';
+export declare const getBorderRadiiStyles: (utils: any, props: any) => import("styletron-standard").StyleObject | undefined;
 export declare const iconButtonStyles: Styles;
 export declare const renderIconButtonChild: (theme: any, size: any, child: React.ReactElement<IconProps>) => React.ReactElement<IconProps, string | React.JSXElementConstructor<any>> | null;

package/button/IconButton/styled-components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderIconButtonChild = exports.iconButtonStyles = void 0;
+exports.renderIconButtonChild = exports.iconButtonStyles = exports.getBorderRadiiStyles = void 0;
 var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
 var themeHelpers_1 = require("../../helpers/themeHelpers");
@@ -18,6 +18,18 @@ var getDimensions = function (_a, _b) {
     var size = getButtonSizeTheme(theme, $size).buttonSize;
     return { height: px2rem(size), width: px2rem(size) };
 };
+var getBorderRadiiStyles = function (utils, props) {
+    var theme = utils.theme;
+    var $size = props.$size, $shape = props.$shape;
+    if ($shape !== 'square')
+        return undefined;
+    var squareButtonSizeRadius = getButtonSizeTheme(theme, $size).squareBorderRadius;
+    var squareBorderRadius = squareButtonSizeRadius
+        ? "".concat(squareButtonSizeRadius, "px")
+        : theme.iconButton.shapeSquare.borderRadius;
+    return (0, longHandHelpers_1.borderRadius)(squareBorderRadius);
+};
+exports.getBorderRadiiStyles = getBorderRadiiStyles;
 var resetPadding = function (_a) {
     var theme = _a.theme;
     return (0, longHandHelpers_1.padding)(theme.padding['0']);
@@ -33,11 +45,32 @@ var makeGetStyleFromTheme = function (theme, shape, bordered) {
         return bordered ? (_b = iconButton["".concat(btnShapeKey, "Bordered")][btnStateKey]) !== null && _b !== void 0 ? _b : defaultColor : defaultColor;
     };
 };
-var getVariantStyles = function (_a, props) {
-    var theme = _a.theme;
-    var _b = props.$bordered, $bordered = _b === void 0 ? false : _b, _c = props.$shape, $shape = _c === void 0 ? 'round' : _c;
+var getAiIntentStyle = function (utils, props) {
+    var theme = utils.theme;
+    var $bordered = props.$bordered, $shape = props.$shape;
+    var aiIntentStyle = (0, styled_components_1.createButtonStyles)({
+        color: theme.spr.icon01,
+        borderColor: theme.borderColor.transparent,
+        hoverBorderColor: theme.borderColor.transparent,
+        activeBorderColor: theme.borderColor.transparent,
+        disabledBorderColor: theme.borderColor.transparent,
+        backgroundColor: theme.spr.ui01,
+        hoverBackgroundColor: theme.spr.ui01,
+        activeBackgroundColor: theme.spr.ui01,
+        background: $bordered ? theme.ai.border01.background : undefined,
+        hoverBackground: theme.ai.border01.background,
+        activeBackground: "".concat(theme.ai.ui02, " padding-box , ").concat(theme.ai.ui01, " border-box"),
+        disabledBackground: theme.ai.border01.background,
+        disabledOpacity: '0.2',
+    }, props);
+    var borderRadiiStyles = ($shape === 'round' ? (0, longHandHelpers_1.borderRadius)('100%') : (0, exports.getBorderRadiiStyles)(utils, props));
+    return (0, styled_components_1.getStylesWithAnimatedBorder)(utils, props, aiIntentStyle, borderRadiiStyles);
+};
+var getIntentStyles = function (utils, props) {
+    var theme = utils.theme;
+    var _a = props.$bordered, $bordered = _a === void 0 ? false : _a, _b = props.$shape, $shape = _b === void 0 ? 'round' : _b, $intent = props.$intent;
     var styleFromThemeGetter = makeGetStyleFromTheme(theme, $shape, $bordered);
-    return (0, styled_components_1.createButtonStyles)({
+    var defaultStyle = (0, styled_components_1.createButtonStyles)({
         color: styleFromThemeGetter('color'),
         activeColor: styleFromThemeGetter('activeColor'),
         hoverColor: styleFromThemeGetter('hoverColor'),
@@ -51,22 +84,22 @@ var getVariantStyles = function (_a, props) {
         activeBackgroundColor: styleFromThemeGetter('activeBackgroundColor'),
         disabledBackgroundColor: styleFromThemeGetter('disabledBackgroundColor'),
     }, props);
+    switch ($intent) {
+        case 'ai':
+            return getAiIntentStyle(utils, props);
+        default:
+            return defaultStyle;
+    }
 };
 exports.iconButtonStyles = [
     function (_a) {
         var theme = _a.theme;
         return ({ minWidth: theme.iconButton.minWidth });
     },
-    function (_a, _b) {
-        var theme = _a.theme;
-        var $shape = _b.$shape, $size = _b.$size;
-        var squareButtonSizeRadius = getButtonSizeTheme(theme, $size).squareBorderRadius;
-        var squareBorderRadius = squareButtonSizeRadius ? "".concat(squareButtonSizeRadius, "px") : theme.iconButton.shapeSquare.borderRadius;
-        return $shape === 'square' ? (0, longHandHelpers_1.borderRadius)(squareBorderRadius) : undefined;
-    },
+    exports.getBorderRadiiStyles,
     resetPadding,
     getDimensions,
-    getVariantStyles,
+    getIntentStyles,
 ];
 var renderIconButtonChild = function (theme, size, child) {
     return React.isValidElement(child)

package/button/IconButton/types.d.ts

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

package/button/IconTextButton/IconTextButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const IconTextButton: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "variant"> & {
-    icon?: import("react").ComponentType<import("../../icon").IconProps> | undefined;
+    icon?: import("react").ComponentType<import("react").PropsWithChildren<import("../../icon").IconProps>> | undefined;
     variant?: import("./types").Variant | undefined;
     bordered?: boolean | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/button/IconTextButton/types.d.ts

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

package/button/basewebAdapter.d.ts

@@ -6,25 +6,28 @@ declare const _default: (props: Omit<ButtonProps, 'size'>) => {
         readonly secondary: "secondary";
         readonly tertiary: "tertiary";
     }>;
+    children?: import("react").ReactNode;
     style?: import("..").Styles;
     disabled?: boolean | undefined;
     className?: import("..").Styles;
-    children?: import("react").ReactNode;
-    overrides?: import("./types").ButtonOverrides | undefined;
-    autoFocus?: boolean | undefined;
+    animate?: boolean | undefined;
     href?: string | undefined;
-    rel?: string | undefined;
     shape?: import("./types").Shape | undefined;
     target?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
+    autoFocus?: boolean | undefined;
+    tabIndex?: number | undefined;
+    role?: import("react").AriaRole | undefined;
+    rel?: string | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
     $as?: import("react").ElementType<any> | undefined;
-    startEnhancer?: import("react").ReactNode;
-    endEnhancer?: import("react").ReactNode;
+    overrides?: import("./types").ButtonOverrides | undefined;
     intent?: import("..").Intent | undefined;
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
+    startEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
+    endEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
     fullWidth?: boolean | undefined;
-    tooltipContent?: import("react").ReactNode | import("baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: import("react").ReactNode | import("../baseui/popover").ContentRenderProp;
 };
 export default _default;

package/button/basewebAdapter.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var button_1 = require("baseui/button");
+var button_1 = require("../baseui/button");
 var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 var variantMap = {
     primary: button_1.KIND.primary,

package/button/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Button } from './Button';
 export { default as IconButton } from './IconButton';
 export { default as IconTextButton } from './IconTextButton';
-export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, } from 'baseui/button';
+export { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer, } from '../baseui/button';
 export type { ButtonProps, Shape, ButtonSharedProps, Size, ButtonOverrides } from './types';

package/button/index.js

@@ -10,7 +10,7 @@ var IconButton_1 = require("./IconButton");
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return __importDefault(IconButton_1).default; } });
 var IconTextButton_1 = require("./IconTextButton");
 Object.defineProperty(exports, "IconTextButton", { enumerable: true, get: function () { return __importDefault(IconTextButton_1).default; } });
-var button_1 = require("baseui/button");
+var button_1 = require("../baseui/button");
 Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return button_1.StyledStartEnhancer; } });
 Object.defineProperty(exports, "StyledEndEnhancer", { enumerable: true, get: function () { return button_1.StyledEndEnhancer; } });
 Object.defineProperty(exports, "StyledLoadingSpinner", { enumerable: true, get: function () { return button_1.StyledLoadingSpinner; } });

package/button/styled-components.d.ts

@@ -1,4 +1,4 @@
-import { StyleObject, Styles } from '../types';
+import { StyleFn, StyleObject, Styles, StyleUtils } from '../types';
 import { ButtonSharedProps } from './types';
 declare type ButtonStyleParams = {
     color: string;
@@ -13,8 +13,33 @@ declare type ButtonStyleParams = {
     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, }: ButtonStyleParams, { $disabled, $isSelected, $isFocusVisible }: ButtonSharedProps) => StyleObject;
+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 }: {
+    theme: any;
+}, { variant }: {
+    variant: any;
+}) => {
+    borderTopColor: any;
+    borderLeftColor: any;
+    borderRightColor: any;
+};
+export declare const getLoaderMinorColor: ({ theme }: {
+    theme: any;
+}, { variant }: {
+    variant: any;
+}) => {
+    borderBottomColor: any;
+};
 export {};