@cleartrip/ct-design-button 1.0.0-beta

package/dist/button.esm.js

@@ -0,0 +1,292 @@
+import { __rest, __assign } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import styled from 'styled-components';
+import Typography, { TypographyVariant } from '@cleartrip/ct-design-typography';
+import Container from '@cleartrip/ct-design-container';
+import useTheme from '@cleartrip/ct-design-use-theme';
+import DottedLoader from '@cleartrip/ct-design-dotted-loader';
+
+var getStyledButtonStyles = function (_a) {
+    var cursor = _a.cursor, backgroundColor = _a.backgroundColor, borderStyle = _a.borderStyle, height = _a.height, minWidth = _a.minWidth, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, borderColor = _a.borderColor, borderWidth = _a.borderWidth, theme = _a.theme, rest = __rest(_a, ["cursor", "backgroundColor", "borderStyle", "height", "minWidth", "paddingTop", "paddingBottom", "borderColor", "borderWidth", "theme"]);
+    return (__assign(__assign({ display: 'flex', border: 'none', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box', position: 'relative', userSelect: 'none', textDecoration: 'none', paddingLeft: theme.spacing[3], paddingRight: theme.spacing[3], cursor: cursor, borderRadius: theme.border.radius[8], borderWidth: borderWidth, backgroundColor: backgroundColor, borderStyle: borderStyle, height: height, paddingTop: paddingTop, paddingBottom: paddingBottom, borderColor: borderColor, minWidth: minWidth }, rest), { '&:hover': {
+            backgroundColor: theme.color.button.hover(backgroundColor),
+        } }));
+};
+
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["SMALL"] = "small";
+    ButtonSize["MEDIUM"] = "medium";
+    ButtonSize["LARGE"] = "large";
+})(ButtonSize || (ButtonSize = {}));
+var IconPosition;
+(function (IconPosition) {
+    IconPosition["LEFT"] = "left";
+    IconPosition["RIGHT"] = "right";
+})(IconPosition || (IconPosition = {}));
+var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["OUTLINE"] = "outline";
+    ButtonVariant["CONTAINED"] = "contained";
+    ButtonVariant["BARE"] = "bare";
+})(ButtonVariant || (ButtonVariant = {}));
+var ButtonColor;
+(function (ButtonColor) {
+    ButtonColor["PRIMARY"] = "primary";
+    ButtonColor["SECONDARY"] = "secondary";
+    ButtonColor["TERTIARY"] = "tertiary";
+})(ButtonColor || (ButtonColor = {}));
+
+var getButtonSizeStyles = function (theme, size) {
+    switch (size) {
+        case ButtonSize.SMALL: {
+            return {
+                height: theme.size[8],
+                paddingTop: theme.spacing[1],
+                paddingBottom: theme.spacing[1],
+            };
+        }
+        case ButtonSize.MEDIUM: {
+            return {
+                height: theme.size[10],
+                paddingTop: theme.spacing[2],
+                paddingBottom: theme.spacing[2],
+            };
+        }
+        case ButtonSize.LARGE: {
+            return {
+                height: theme.size[12],
+                paddingTop: theme.spacing[3],
+                paddingBottom: theme.spacing[3],
+            };
+        }
+        default: {
+            return {
+                height: theme.size[10],
+                paddingTop: theme.spacing[2],
+                paddingBottom: theme.spacing[2],
+            };
+        }
+    }
+};
+var getButtonVariantStyles = function (theme, variant, disabled) {
+    if (disabled) {
+        return {
+            borderWidth: theme.border.width.none,
+        };
+    }
+    switch (variant) {
+        case ButtonVariant.OUTLINE: {
+            return {
+                borderWidth: theme.border.width.sm,
+                borderStyle: theme.border.style.solid,
+            };
+        }
+        case ButtonVariant.CONTAINED:
+        case ButtonVariant.BARE: {
+            return {
+                borderWidth: theme.border.width.none,
+            };
+        }
+        default: {
+            return {
+                borderWidth: theme.border.width.none,
+            };
+        }
+    }
+};
+var getContainedButtonColorStyles = function (theme, color, disabled) {
+    if (disabled) {
+        return {
+            backgroundColor: theme.color.button.containedDisabledBg,
+        };
+    }
+    switch (color) {
+        case ButtonColor.PRIMARY: {
+            return {
+                backgroundColor: theme.color.button.containedPrimaryBg,
+            };
+        }
+        case ButtonColor.SECONDARY: {
+            return {
+                backgroundColor: theme.color.button.containedSecondaryBg,
+            };
+        }
+        case ButtonColor.TERTIARY: {
+            return {
+                backgroundColor: theme.color.button.containedTertiaryBg,
+            };
+        }
+        default: {
+            return {
+                backgroundColor: theme.color.button.containedPrimaryBg,
+            };
+        }
+    }
+};
+var getOutlinedButtonColorStyles = function (theme, color, disabled) {
+    if (disabled) {
+        return {
+            backgroundColor: theme.color.button.outlinedDisabledBg,
+        };
+    }
+    switch (color) {
+        case ButtonColor.PRIMARY: {
+            return {
+                backgroundColor: theme.color.button.outlinedPrimaryBg,
+                borderColor: theme.color.button.outlinedPrimaryBorder,
+            };
+        }
+        case ButtonColor.SECONDARY: {
+            return {
+                backgroundColor: theme.color.button.outlinedSecondaryBg,
+                borderColor: theme.color.button.outlinedSecondaryBorder,
+            };
+        }
+        case ButtonColor.TERTIARY: {
+            return {
+                backgroundColor: theme.color.button.outlinedTertiaryBg,
+                borderColor: theme.color.button.outlinedTertiaryBorder,
+            };
+        }
+        default: {
+            return {
+                backgroundColor: theme.color.button.outlinedPrimaryBg,
+                borderColor: theme.color.button.outlinedPrimaryBorder,
+            };
+        }
+    }
+};
+var getButtonVariantColorStyles = function (theme, color, variant, disabled) {
+    switch (variant) {
+        case ButtonVariant.CONTAINED: {
+            return getContainedButtonColorStyles(theme, color, disabled);
+        }
+        case ButtonVariant.OUTLINE:
+        case ButtonVariant.BARE: {
+            return getOutlinedButtonColorStyles(theme, color, disabled);
+        }
+        default: {
+            return getContainedButtonColorStyles(theme, color, disabled);
+        }
+    }
+};
+var getContainedButtonLabelColor = function (color, disabled, theme) {
+    if (disabled) {
+        return theme.color.button.containedDisabledLabel;
+    }
+    switch (color) {
+        case ButtonColor.PRIMARY: {
+            return theme.color.button.containedPrimaryLabel;
+        }
+        case ButtonColor.SECONDARY: {
+            return theme.color.button.containedSecondaryLabel;
+        }
+        case ButtonColor.TERTIARY: {
+            return theme.color.button.containedTertiaryLabel;
+        }
+        default: {
+            return theme.color.button.containedPrimaryLabel;
+        }
+    }
+};
+var getOutlinedButtonLabelColor = function (color, disabled, theme) {
+    if (disabled) {
+        return theme.color.button.outlinedDisabledLabel;
+    }
+    switch (color) {
+        case ButtonColor.PRIMARY: {
+            return theme.color.button.outlinedPrimaryLabel;
+        }
+        case ButtonColor.SECONDARY: {
+            return theme.color.button.outlinedSecondaryLabel;
+        }
+        case ButtonColor.TERTIARY: {
+            return theme.color.button.outlinedTertiaryLabel;
+        }
+        default: {
+            return theme.color.button.outlinedPrimaryLabel;
+        }
+    }
+};
+var getButtonVariantLabelColor = function (variant, color, disabled, theme, loading) {
+    switch (variant) {
+        case ButtonVariant.CONTAINED: {
+            return getContainedButtonLabelColor(color, disabled || loading, theme);
+        }
+        case ButtonVariant.OUTLINE: {
+            return getOutlinedButtonLabelColor(color, disabled || loading, theme);
+        }
+        case ButtonVariant.BARE: {
+            return getOutlinedButtonLabelColor(color, disabled, theme);
+        }
+        default: {
+            return getContainedButtonLabelColor(color, disabled || loading, theme);
+        }
+    }
+};
+var getTypographyVariant = function (size) {
+    switch (size) {
+        case ButtonSize.SMALL: {
+            return TypographyVariant.HM4;
+        }
+        case ButtonSize.MEDIUM: {
+            return TypographyVariant.HM4;
+        }
+        case ButtonSize.LARGE: {
+            return TypographyVariant.HM3;
+        }
+        default: {
+            return TypographyVariant.HM4;
+        }
+    }
+};
+var getDefaultButtonStyles = function (disabled) {
+    if (disabled) {
+        return {
+            cursor: 'not-allowed',
+        };
+    }
+    else {
+        return {
+            cursor: 'pointer',
+        };
+    }
+};
+var getButtonStyles = function (_a) {
+    var theme = _a.theme, size = _a.size, variant = _a.variant, color = _a.color, disabled = _a.disabled, minWidth = _a.minWidth, isFullWidth = _a.isFullWidth, loading = _a.loading;
+    return __assign(__assign(__assign(__assign(__assign({}, getButtonSizeStyles(theme, size)), getButtonVariantStyles(theme, variant, disabled || loading)), getButtonVariantColorStyles(theme, color, variant, disabled || loading)), getDefaultButtonStyles(disabled || loading)), { minWidth: isFullWidth ? '100%' : minWidth || 'auto' });
+};
+
+var StyledButton = styled.button(function (_a) {
+    var css = _a.css, theme = _a.theme;
+    return getStyledButtonStyles(__assign(__assign({}, css), { theme: theme }));
+});
+var Button = forwardRef(function (_a, forwardedRef) {
+    var _b = _a.size, size = _b === void 0 ? ButtonSize.MEDIUM : _b, _c = _a.variant, variant = _c === void 0 ? ButtonVariant.CONTAINED : _c, _d = _a.color, color = _d === void 0 ? ButtonColor.PRIMARY : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.onClick, onClick = _g === void 0 ? function () { } : _g, _h = _a.minWidth, minWidth = _h === void 0 ? '' : _h, _j = _a.showLeftIcon, showLeftIcon = _j === void 0 ? false : _j, _k = _a.LeftIcon, LeftIcon = _k === void 0 ? null : _k, _l = _a.showRightIcon, showRightIcon = _l === void 0 ? false : _l, _m = _a.RightIcon, RightIcon = _m === void 0 ? null : _m, css = _a.css, children = _a.children, _o = _a.loading, loading = _o === void 0 ? false : _o, rest = __rest(_a, ["size", "variant", "color", "isFullWidth", "disabled", "onClick", "minWidth", "showLeftIcon", "LeftIcon", "showRightIcon", "RightIcon", "css", "children", "loading"]);
+    var theme = useTheme();
+    var buttonStyles = getButtonStyles({
+        theme: theme,
+        size: size,
+        variant: variant,
+        color: color,
+        disabled: disabled,
+        minWidth: minWidth,
+        isFullWidth: isFullWidth,
+        loading: loading,
+    });
+    var Icon = useCallback(function (show, IconComponent) {
+        return show ? (jsx(Container, __assign({ paddingLeft: theme.spacing[1], display: 'flex', alignItems: 'center', justifyContent: 'center' }, { children: IconComponent }))) : null;
+    }, []);
+    var handleClick = useCallback(function (event) {
+        if (!disabled && onClick && !loading)
+            onClick(event);
+        if (disabled || loading)
+            event.preventDefault();
+    }, [disabled, onClick, loading]);
+    return (jsxs(StyledButton, __assign({ ref: forwardedRef, onClick: handleClick, css: __assign(__assign({}, buttonStyles), css), theme: theme }, rest, { children: [Icon(showLeftIcon, LeftIcon), jsx(Container, __assign({ paddingLeft: theme.spacing[1], paddingRight: theme.spacing[1] }, { children: jsx(Typography, __assign({ variant: getTypographyVariant(size), colorCode: getButtonVariantLabelColor(variant, color, disabled, theme, loading) }, { children: loading ? jsx(DottedLoader, {}) : children })) })), Icon(showRightIcon, RightIcon)] })));
+});
+
+export { ButtonColor, ButtonSize, ButtonVariant, IconPosition, Button as default };
+//# sourceMappingURL=button.esm.js.map

package/dist/button.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.esm.js","sources":["../../packages/components/Button/src/StyledButton/style.ts","../../packages/components/Button/src/type.ts","../../packages/components/Button/src/style.ts","../../packages/components/Button/src/Button.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/button.umd.js

@@ -0,0 +1,340 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('styled-components'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-use-theme'), require('@cleartrip/ct-design-dotted-loader')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'styled-components', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-container', '@cleartrip/ct-design-use-theme', '@cleartrip/ct-design-dotted-loader'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystem = {}, global.jsxRuntime, global.React, global.styled, global.Typography, global.Container, global.useTheme, global.DottedLoader));
+})(this, (function (exports, jsxRuntime, react, styled, Typography, Container, useTheme, DottedLoader) { 'use strict';
+
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+    var styled__default = /*#__PURE__*/_interopDefault(styled);
+    var Typography__default = /*#__PURE__*/_interopDefault(Typography);
+    var Container__default = /*#__PURE__*/_interopDefault(Container);
+    var useTheme__default = /*#__PURE__*/_interopDefault(useTheme);
+    var DottedLoader__default = /*#__PURE__*/_interopDefault(DottedLoader);
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
+    var __assign = function () {
+      __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+      return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+      }
+      return t;
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    var getStyledButtonStyles = function (_a) {
+        var cursor = _a.cursor, backgroundColor = _a.backgroundColor, borderStyle = _a.borderStyle, height = _a.height, minWidth = _a.minWidth, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, borderColor = _a.borderColor, borderWidth = _a.borderWidth, theme = _a.theme, rest = __rest(_a, ["cursor", "backgroundColor", "borderStyle", "height", "minWidth", "paddingTop", "paddingBottom", "borderColor", "borderWidth", "theme"]);
+        return (__assign(__assign({ display: 'flex', border: 'none', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box', position: 'relative', userSelect: 'none', textDecoration: 'none', paddingLeft: theme.spacing[3], paddingRight: theme.spacing[3], cursor: cursor, borderRadius: theme.border.radius[8], borderWidth: borderWidth, backgroundColor: backgroundColor, borderStyle: borderStyle, height: height, paddingTop: paddingTop, paddingBottom: paddingBottom, borderColor: borderColor, minWidth: minWidth }, rest), { '&:hover': {
+                backgroundColor: theme.color.button.hover(backgroundColor),
+            } }));
+    };
+
+    exports.ButtonSize = void 0;
+    (function (ButtonSize) {
+        ButtonSize["SMALL"] = "small";
+        ButtonSize["MEDIUM"] = "medium";
+        ButtonSize["LARGE"] = "large";
+    })(exports.ButtonSize || (exports.ButtonSize = {}));
+    exports.IconPosition = void 0;
+    (function (IconPosition) {
+        IconPosition["LEFT"] = "left";
+        IconPosition["RIGHT"] = "right";
+    })(exports.IconPosition || (exports.IconPosition = {}));
+    exports.ButtonVariant = void 0;
+    (function (ButtonVariant) {
+        ButtonVariant["OUTLINE"] = "outline";
+        ButtonVariant["CONTAINED"] = "contained";
+        ButtonVariant["BARE"] = "bare";
+    })(exports.ButtonVariant || (exports.ButtonVariant = {}));
+    exports.ButtonColor = void 0;
+    (function (ButtonColor) {
+        ButtonColor["PRIMARY"] = "primary";
+        ButtonColor["SECONDARY"] = "secondary";
+        ButtonColor["TERTIARY"] = "tertiary";
+    })(exports.ButtonColor || (exports.ButtonColor = {}));
+
+    var getButtonSizeStyles = function (theme, size) {
+        switch (size) {
+            case exports.ButtonSize.SMALL: {
+                return {
+                    height: theme.size[8],
+                    paddingTop: theme.spacing[1],
+                    paddingBottom: theme.spacing[1],
+                };
+            }
+            case exports.ButtonSize.MEDIUM: {
+                return {
+                    height: theme.size[10],
+                    paddingTop: theme.spacing[2],
+                    paddingBottom: theme.spacing[2],
+                };
+            }
+            case exports.ButtonSize.LARGE: {
+                return {
+                    height: theme.size[12],
+                    paddingTop: theme.spacing[3],
+                    paddingBottom: theme.spacing[3],
+                };
+            }
+            default: {
+                return {
+                    height: theme.size[10],
+                    paddingTop: theme.spacing[2],
+                    paddingBottom: theme.spacing[2],
+                };
+            }
+        }
+    };
+    var getButtonVariantStyles = function (theme, variant, disabled) {
+        if (disabled) {
+            return {
+                borderWidth: theme.border.width.none,
+            };
+        }
+        switch (variant) {
+            case exports.ButtonVariant.OUTLINE: {
+                return {
+                    borderWidth: theme.border.width.sm,
+                    borderStyle: theme.border.style.solid,
+                };
+            }
+            case exports.ButtonVariant.CONTAINED:
+            case exports.ButtonVariant.BARE: {
+                return {
+                    borderWidth: theme.border.width.none,
+                };
+            }
+            default: {
+                return {
+                    borderWidth: theme.border.width.none,
+                };
+            }
+        }
+    };
+    var getContainedButtonColorStyles = function (theme, color, disabled) {
+        if (disabled) {
+            return {
+                backgroundColor: theme.color.button.containedDisabledBg,
+            };
+        }
+        switch (color) {
+            case exports.ButtonColor.PRIMARY: {
+                return {
+                    backgroundColor: theme.color.button.containedPrimaryBg,
+                };
+            }
+            case exports.ButtonColor.SECONDARY: {
+                return {
+                    backgroundColor: theme.color.button.containedSecondaryBg,
+                };
+            }
+            case exports.ButtonColor.TERTIARY: {
+                return {
+                    backgroundColor: theme.color.button.containedTertiaryBg,
+                };
+            }
+            default: {
+                return {
+                    backgroundColor: theme.color.button.containedPrimaryBg,
+                };
+            }
+        }
+    };
+    var getOutlinedButtonColorStyles = function (theme, color, disabled) {
+        if (disabled) {
+            return {
+                backgroundColor: theme.color.button.outlinedDisabledBg,
+            };
+        }
+        switch (color) {
+            case exports.ButtonColor.PRIMARY: {
+                return {
+                    backgroundColor: theme.color.button.outlinedPrimaryBg,
+                    borderColor: theme.color.button.outlinedPrimaryBorder,
+                };
+            }
+            case exports.ButtonColor.SECONDARY: {
+                return {
+                    backgroundColor: theme.color.button.outlinedSecondaryBg,
+                    borderColor: theme.color.button.outlinedSecondaryBorder,
+                };
+            }
+            case exports.ButtonColor.TERTIARY: {
+                return {
+                    backgroundColor: theme.color.button.outlinedTertiaryBg,
+                    borderColor: theme.color.button.outlinedTertiaryBorder,
+                };
+            }
+            default: {
+                return {
+                    backgroundColor: theme.color.button.outlinedPrimaryBg,
+                    borderColor: theme.color.button.outlinedPrimaryBorder,
+                };
+            }
+        }
+    };
+    var getButtonVariantColorStyles = function (theme, color, variant, disabled) {
+        switch (variant) {
+            case exports.ButtonVariant.CONTAINED: {
+                return getContainedButtonColorStyles(theme, color, disabled);
+            }
+            case exports.ButtonVariant.OUTLINE:
+            case exports.ButtonVariant.BARE: {
+                return getOutlinedButtonColorStyles(theme, color, disabled);
+            }
+            default: {
+                return getContainedButtonColorStyles(theme, color, disabled);
+            }
+        }
+    };
+    var getContainedButtonLabelColor = function (color, disabled, theme) {
+        if (disabled) {
+            return theme.color.button.containedDisabledLabel;
+        }
+        switch (color) {
+            case exports.ButtonColor.PRIMARY: {
+                return theme.color.button.containedPrimaryLabel;
+            }
+            case exports.ButtonColor.SECONDARY: {
+                return theme.color.button.containedSecondaryLabel;
+            }
+            case exports.ButtonColor.TERTIARY: {
+                return theme.color.button.containedTertiaryLabel;
+            }
+            default: {
+                return theme.color.button.containedPrimaryLabel;
+            }
+        }
+    };
+    var getOutlinedButtonLabelColor = function (color, disabled, theme) {
+        if (disabled) {
+            return theme.color.button.outlinedDisabledLabel;
+        }
+        switch (color) {
+            case exports.ButtonColor.PRIMARY: {
+                return theme.color.button.outlinedPrimaryLabel;
+            }
+            case exports.ButtonColor.SECONDARY: {
+                return theme.color.button.outlinedSecondaryLabel;
+            }
+            case exports.ButtonColor.TERTIARY: {
+                return theme.color.button.outlinedTertiaryLabel;
+            }
+            default: {
+                return theme.color.button.outlinedPrimaryLabel;
+            }
+        }
+    };
+    var getButtonVariantLabelColor = function (variant, color, disabled, theme, loading) {
+        switch (variant) {
+            case exports.ButtonVariant.CONTAINED: {
+                return getContainedButtonLabelColor(color, disabled || loading, theme);
+            }
+            case exports.ButtonVariant.OUTLINE: {
+                return getOutlinedButtonLabelColor(color, disabled || loading, theme);
+            }
+            case exports.ButtonVariant.BARE: {
+                return getOutlinedButtonLabelColor(color, disabled, theme);
+            }
+            default: {
+                return getContainedButtonLabelColor(color, disabled || loading, theme);
+            }
+        }
+    };
+    var getTypographyVariant = function (size) {
+        switch (size) {
+            case exports.ButtonSize.SMALL: {
+                return Typography.TypographyVariant.HM4;
+            }
+            case exports.ButtonSize.MEDIUM: {
+                return Typography.TypographyVariant.HM4;
+            }
+            case exports.ButtonSize.LARGE: {
+                return Typography.TypographyVariant.HM3;
+            }
+            default: {
+                return Typography.TypographyVariant.HM4;
+            }
+        }
+    };
+    var getDefaultButtonStyles = function (disabled) {
+        if (disabled) {
+            return {
+                cursor: 'not-allowed',
+            };
+        }
+        else {
+            return {
+                cursor: 'pointer',
+            };
+        }
+    };
+    var getButtonStyles = function (_a) {
+        var theme = _a.theme, size = _a.size, variant = _a.variant, color = _a.color, disabled = _a.disabled, minWidth = _a.minWidth, isFullWidth = _a.isFullWidth, loading = _a.loading;
+        return __assign(__assign(__assign(__assign(__assign({}, getButtonSizeStyles(theme, size)), getButtonVariantStyles(theme, variant, disabled || loading)), getButtonVariantColorStyles(theme, color, variant, disabled || loading)), getDefaultButtonStyles(disabled || loading)), { minWidth: isFullWidth ? '100%' : minWidth || 'auto' });
+    };
+
+    var StyledButton = styled__default.default.button(function (_a) {
+        var css = _a.css, theme = _a.theme;
+        return getStyledButtonStyles(__assign(__assign({}, css), { theme: theme }));
+    });
+    var Button = react.forwardRef(function (_a, forwardedRef) {
+        var _b = _a.size, size = _b === void 0 ? exports.ButtonSize.MEDIUM : _b, _c = _a.variant, variant = _c === void 0 ? exports.ButtonVariant.CONTAINED : _c, _d = _a.color, color = _d === void 0 ? exports.ButtonColor.PRIMARY : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.onClick, onClick = _g === void 0 ? function () { } : _g, _h = _a.minWidth, minWidth = _h === void 0 ? '' : _h, _j = _a.showLeftIcon, showLeftIcon = _j === void 0 ? false : _j, _k = _a.LeftIcon, LeftIcon = _k === void 0 ? null : _k, _l = _a.showRightIcon, showRightIcon = _l === void 0 ? false : _l, _m = _a.RightIcon, RightIcon = _m === void 0 ? null : _m, css = _a.css, children = _a.children, _o = _a.loading, loading = _o === void 0 ? false : _o, rest = __rest(_a, ["size", "variant", "color", "isFullWidth", "disabled", "onClick", "minWidth", "showLeftIcon", "LeftIcon", "showRightIcon", "RightIcon", "css", "children", "loading"]);
+        var theme = useTheme__default.default();
+        var buttonStyles = getButtonStyles({
+            theme: theme,
+            size: size,
+            variant: variant,
+            color: color,
+            disabled: disabled,
+            minWidth: minWidth,
+            isFullWidth: isFullWidth,
+            loading: loading,
+        });
+        var Icon = react.useCallback(function (show, IconComponent) {
+            return show ? (jsxRuntime.jsx(Container__default.default, __assign({ paddingLeft: theme.spacing[1], display: 'flex', alignItems: 'center', justifyContent: 'center' }, { children: IconComponent }))) : null;
+        }, []);
+        var handleClick = react.useCallback(function (event) {
+            if (!disabled && onClick && !loading)
+                onClick(event);
+            if (disabled || loading)
+                event.preventDefault();
+        }, [disabled, onClick, loading]);
+        return (jsxRuntime.jsxs(StyledButton, __assign({ ref: forwardedRef, onClick: handleClick, css: __assign(__assign({}, buttonStyles), css), theme: theme }, rest, { children: [Icon(showLeftIcon, LeftIcon), jsxRuntime.jsx(Container__default.default, __assign({ paddingLeft: theme.spacing[1], paddingRight: theme.spacing[1] }, { children: jsxRuntime.jsx(Typography__default.default, __assign({ variant: getTypographyVariant(size), colorCode: getButtonVariantLabelColor(variant, color, disabled, theme, loading) }, { children: loading ? jsxRuntime.jsx(DottedLoader__default.default, {}) : children })) })), Icon(showRightIcon, RightIcon)] })));
+    });
+
+    exports.default = Button;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=button.umd.js.map