@hazelcast/ui 1.0.1-next.9 → 1.2.0

package/lib/Button.d.ts

@@ -3,30 +3,28 @@ import { IconProps } from './Icon';
 import { TooltipProps } from './Tooltip';
 import { LinkRel, LinkTarget } from './Link';
 export declare type ButtonKind = 'primary' | 'secondary' | 'danger' | 'transparent';
+export declare type ButtonVariant = 'contained' | 'outlined' | 'text';
+export declare type ButtonColor = 'primary' | 'secondary' | 'warning';
 export declare type ButtonSize = 'medium' | 'small';
 export declare type ButtonAccessibleIconLeftProps = {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string;
 } | {
     iconLeft?: never;
     iconLeftAriaLabel?: never;
-    iconLeftSize?: never;
     iconLeftColor?: never;
     iconLeftClassName?: never;
 };
 export declare type ButtonAccessibleIconRightProps = {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string;
 } | {
     iconRight?: never;
     iconRightAriaLabel?: never;
-    iconRightSize?: never;
     iconRightColor?: never;
     iconRightClassName?: never;
 };
@@ -44,13 +42,18 @@ export declare type ButtonDisabledProps = {
 };
 export declare type ButtonOutlineType = 'outline' | 'inset';
 export declare type ButtonCommonProps = {
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: ButtonKind;
-    size?: ButtonSize;
     children: string;
+    color?: ButtonColor;
     capitalize?: boolean;
     bodyClassName?: string;
+    variant?: ButtonVariant;
     outlineClassName?: string;
     outline?: ButtonOutlineType;
+    tooltip?: string;
 } & Pick<HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, 'className' | 'onClick' | 'tabIndex' | 'style'>;
 export declare type ButtonTypeAnchorProps = {
     component: 'a';
@@ -90,23 +93,26 @@ export declare type ButtonProps<T = ButtonTypeProps> = ButtonCommonProps & Butto
  * - **Transparent**: Use for IconButton and similar use-cases.
  */
 export declare const Button: React.ForwardRefExoticComponent<({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -117,23 +123,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     type?: undefined;
     loading?: undefined;
 } & ButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -143,23 +152,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -169,23 +181,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {
@@ -196,23 +211,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     type?: undefined;
     loading?: undefined;
 } & ButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {
@@ -222,23 +240,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft: IconProps['icon'];
     iconLeftAriaLabel: string;
-    iconLeftSize?: IconProps['size'];
     iconLeftColor?: IconProps['color'];
     iconLeftClassName?: string | undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {
@@ -248,23 +269,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -275,23 +299,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     type?: undefined;
     loading?: undefined;
 } & ButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -301,23 +328,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight: IconProps['icon'];
     iconRightAriaLabel: string;
-    iconRightSize?: IconProps['size'];
     iconRightColor?: IconProps['color'];
     iconRightClassName?: string | undefined;
 } & {
@@ -327,23 +357,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {
@@ -354,23 +387,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     type?: undefined;
     loading?: undefined;
 } & ButtonNotDisabledProps & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {
@@ -380,23 +416,26 @@ export declare const Button: React.ForwardRefExoticComponent<({
     rel?: undefined;
     loading?: boolean | undefined;
 } & ButtonNotDisabledProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "autoFocus"> & React.RefAttributes<HTMLElement>) | ({
+    /**
+     * @deprecated Use variant + color instead
+     */
     kind?: "transparent" | "primary" | "secondary" | "danger" | undefined;
-    size?: "medium" | "small" | undefined;
     children: string;
+    color?: "primary" | "secondary" | "warning" | undefined;
     capitalize?: boolean | undefined;
     bodyClassName?: string | undefined;
+    variant?: "text" | "contained" | "outlined" | undefined;
     outlineClassName?: string | undefined;
     outline?: "inset" | "outline" | undefined;
+    tooltip?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "style" | "className" | "tabIndex" | "onClick"> & {
     iconLeft?: undefined;
     iconLeftAriaLabel?: undefined;
-    iconLeftSize?: undefined;
     iconLeftColor?: undefined;
     iconLeftClassName?: undefined;
 } & {
     iconRight?: undefined;
     iconRightAriaLabel?: undefined;
-    iconRightSize?: undefined;
     iconRightColor?: undefined;
     iconRightClassName?: undefined;
 } & {

package/lib/Button.js

@@ -5,8 +5,34 @@ import { useUID } from 'react-uid';
 import { Icon } from './Icon';
 import { TruncatedText } from './TruncatedText';
 import { Tooltip } from './Tooltip';
-import styles from './Button.module.scss';
 import { Loader } from './Loader';
+import styles from './Button.module.scss';
+const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
+const resolveButtonKindStyles = (kind) => {
+    switch (kind) {
+        case 'secondary':
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantOutlined]: true,
+            };
+        case 'transparent':
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantText]: true,
+            };
+        case 'danger': {
+            return {
+                [styles.colorSecondary]: true,
+                [styles.variantContained]: true,
+            };
+        }
+        default:
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantContained]: true,
+            };
+    }
+};
 /**
  * ### Purpose
  * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
@@ -27,26 +53,28 @@ import { Loader } from './Loader';
  * - **Danger**: Use danger button for potentially destructive actions.
  * - **Transparent**: Use for IconButton and similar use-cases.
  */
-export const Button = forwardRef(({ kind = 'primary', size = 'medium', component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
+export const Button = forwardRef(({ kind, component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
 // Disabled tooltip
 disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, 
 // Left icon
-iconLeft, iconLeftAriaLabel, iconLeftSize, iconLeftColor, iconLeftClassName, 
+iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, 
 // Right icon
-iconRight, iconRightAriaLabel, iconRightSize, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, ...rest }, ref) => {
+iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, ...rest }, ref) => {
     const tooltipId = useUID();
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
-    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : undefined, visible: disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, Object.assign({ "data-test": "button", className: cn(styles.button, {
-            [styles.small]: size === 'small',
-            [styles.primary]: kind === 'primary',
-            [styles.secondary]: kind === 'secondary',
-            [styles.danger]: kind === 'danger',
-            [styles.transparent]: kind === 'transparent',
+    const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, Object.assign({ "data-test": "button", className: cn(styles.button, {
+            ...(kind !== undefined
+                ? resolveButtonKindStyles(kind)
+                : {
+                    [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
+                    [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
+                }),
         }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined }, rest),
         React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
         React.createElement("span", { className: cn(styles.body, bodyClassName), ref: mergeRefs([ref, tooltipRef]) },
-            loading && React.createElement(Loader, { className: styles.iconLeft, size: size }),
-            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconLeftSize, color: iconLeftColor })),
+            loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: 'small' }),
+            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: "small", color: iconLeftColor })),
             React.createElement(TruncatedText, { text: capitalize ? children.toUpperCase() : children, 
                 /*
                   If a button is disabled and text is long we don't want to show 2 popups.
@@ -55,7 +83,8 @@ iconRight, iconRightAriaLabel, iconRightSize, iconRightColor, iconRightClassName
                   the truncated popup -> setting it to undefined will leave the default behaviour.
                 */
                 tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined }),
-            iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconRightSize, color: iconRightColor })))))));
+            loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: "small" }),
+            !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: "small", color: iconRightColor })))))));
 });
 Button.displayName = 'Button';
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAkB,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AA6FzC,MAAM,wBAAwB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1F,MAAM,uBAAuB,GAAG,CAAC,IAAgB,EAAwB,EAAE;IACzE,QAAQ,IAAI,EAAE;QACZ,KAAK,WAAW;YACd,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI;aAC/B,CAAA;QACH,KAAK,aAAa;YAChB,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,IAAI;aAC3B,CAAA;QACH,KAAK,QAAQ,CAAC,CAAC;YACb,OAAO;gBACL,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,IAAI;gBAC7B,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI;aAChC,CAAA;SACF;QACD;YACE,OAAO;gBACL,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI;gBAC3B,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI;aAChC,CAAA;KACJ;AACH,CAAC,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,IAAI,EACJ,SAAS,EAAE,SAAS,GAAG,QAAQ,EAC/B,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,UAAU,GAAG,IAAI;AACjB,mBAAmB;AACnB,QAAQ,EACR,eAAe,EACf,sBAAsB,EACtB,wBAAwB;AACxB,YAAY;AACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,iBAAiB;AACjB,aAAa;AACb,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,GAAG,GAAG,UAAU,EAChB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IACzD,MAAM,uBAAuB,GAAG,OAAO,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IAE9G,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,EAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAC3C,SAAS,EAAE,wBAAwB,IAElC,CAAC,UAAU,EAAE,EAAE,CAAC,CACf,oBAAC,SAAS,+BACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;YACE,GAAG,CAAC,IAAI,KAAK,SAAS;gBACpB,CAAC,CAAC,uBAAuB,CAAC,IAAI,CAAC;gBAC/B,CAAC,CAAC;oBACE,CAAC,MAAM,CAAC,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;oBACzD,CAAC,MAAM,CAAC,UAAU,wBAAwB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;iBAC9D,CAAC;SACP,EACD,SAAS,CACV,sBACiB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAC7B,GAAG,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAC3C,IAAI;QAER,2CAAgB,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,EAAE,EAAE,gBAAgB,CAAC,GAAI;QAC7H,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;YAC/E,OAAO,IAAI,CAAC,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG;YAC1F,QAAQ,IAAI,iBAAiB,IAAI,CAAC,OAAO,IAAI,CAC5C,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,iBAAiB,eAClB,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACjD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACpB,CACH;YACD,oBAAC,aAAa,IACZ,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpD;;;;;kBAKE;gBACF,cAAc,EAAE,QAAQ,IAAI,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF;YACD,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,GAAG;YAC/E,CAAC,uBAAuB,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAC9D,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,kBAAkB,eACnB,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,EACnD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,cAAc,GACrB,CACH,CACI,CACG,CACb,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}