var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(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);
};
var __rest = (this && this.__rest) || function (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;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled, { css } from "styled-components";
import { theme } from "../../../css/globalStyle";
import { Flex } from "../../layout";
var sizes = {
    xs: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.25rem 0.5rem;\n    font-size: 0.625rem;\n  "], ["\n    padding: 0.25rem 0.5rem;\n    font-size: 0.625rem;\n  "]))),
    sm: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: 0.5rem 0.75rem;\n    font-size: 0.75rem;\n  "], ["\n    padding: 0.5rem 0.75rem;\n    font-size: 0.75rem;\n  "]))),
    md: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: 0.625rem 1rem;\n    font-size: 0.875rem;\n  "], ["\n    padding: 0.625rem 1rem;\n    font-size: 0.875rem;\n  "]))),
    lg: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0.75rem 1.75rem;\n    font-size: 1rem;\n  "], ["\n    padding: 0.75rem 1.75rem;\n    font-size: 1rem;\n  "])))
};
var ButtonBaseStyle = styled.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  pointer-events: ", ";\n  opacity: ", ";\n  width: ", ";\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-weight: 500;\n  text-transform: ", ";\n  letter-spacing: 1.25px;\n  transition: box-shadow 200ms, background-color 200ms;\n  box-sizing: border-box;\n  line-height: 16px;\n"], ["\n  pointer-events: ", ";\n  opacity: ", ";\n  width: ", ";\n  height: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-weight: 500;\n  text-transform: ", ";\n  letter-spacing: 1.25px;\n  transition: box-shadow 200ms, background-color 200ms;\n  box-sizing: border-box;\n  line-height: 16px;\n"])), function (_a) {
    var disabled = _a.disabled, isLoading = _a.isLoading;
    return (disabled || isLoading) && "none";
}, function (_a) {
    var disabled = _a.disabled;
    return disabled && "0.5";
}, function (_a) {
    var fullWidth = _a.fullWidth;
    return (fullWidth ? "100%" : "fit-content");
}, function (_a) {
    var lowercase = _a.lowercase;
    return lowercase ? "capitalize" : "uppercase";
});
var Filled = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: none;\n  background: ", ";\n  color: white;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n    outline: none;\n  }\n\n  &:active {\n    box-shadow: ", ";\n  }\n"], ["\n  border: none;\n  background: ", ";\n  color: white;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n    outline: none;\n  }\n\n  &:active {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
    var color = _a.color;
    return theme.color[color ? color : "primary"][500];
}, function (_a) {
    var color = _a.color;
    return theme.color[color ? color : "primary"][600];
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.shadow.input[color ? color : "primary"]);
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.shadow.input[color ? color : "primary"]);
});
var Outlined = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: ", ";\n  background: white;\n  color: ", ";\n\n  &:hover {\n    background: white;\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  &:active {\n    box-shadow: ", ";\n  }\n"], ["\n  border: ", ";\n  background: white;\n  color: ", ";\n\n  &:hover {\n    background: white;\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  &:active {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
    var color = _a.color;
    return "1px solid ".concat(theme.color[color ? color : "primary"][500]);
}, function (_a) {
    var color = _a.color;
    return theme.color[color ? color : "primary"][500];
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.color[color ? color : "primary"][100]);
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.shadow.input[color ? color : "primary"]);
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.shadow.input[color ? color : "primary"]);
});
var Ghost = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid transparent;\n  background: inherit;\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  &:active {\n    border: ", ";\n  }\n"], ["\n  border: 1px solid transparent;\n  background: inherit;\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:focus {\n    box-shadow: ", ";\n  }\n\n  &:active {\n    border: ", ";\n  }\n"])), function (_a) {
    var color = _a.color;
    return theme.color[color ? color : "primary"][500];
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.color[color ? color : "primary"][100]);
}, function (_a) {
    var color = _a.color;
    return "".concat(theme.shadow.input[color ? color : "primary"]);
}, function (_a) {
    var color = _a.color;
    return "1px solid ".concat(theme.color[color ? color : "primary"][500]);
});
var Link = styled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  color: ", ";\n\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  background: none;\n  border: none;\n  color: ", ";\n\n  &:hover {\n    text-decoration: underline;\n  }\n"])), function (_a) {
    var color = _a.color;
    return theme.color[color ? color : "primary"][500];
});
var Prefix = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
var Suffix = styled.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
var Loader = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  margin: 0 16px;\n  border: 4px solid transparent;\n  border-top-color: inherit;\n  border-radius: 50%;\n  animation: button-loading-spinner 1s ease infinite;\n\n  @keyframes button-loading-spinner {\n    from {\n      transform: rotate(0turn);\n    }\n\n    to {\n      transform: rotate(1turn);\n    }\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  margin: 0 16px;\n  border: 4px solid transparent;\n  border-top-color: inherit;\n  border-radius: 50%;\n  animation: button-loading-spinner 1s ease infinite;\n\n  @keyframes button-loading-spinner {\n    from {\n      transform: rotate(0turn);\n    }\n\n    to {\n      transform: rotate(1turn);\n    }\n  }\n"])));
var Variants = {
    filled: Filled,
    ghost: Ghost,
    outlined: Outlined,
    link: Link
};
var ButtonBase = React.forwardRef(function (_a, ref) {
    var isLoading = _a.isLoading, _b = _a.type, type = _b === void 0 ? "button" : _b, value = _a.value, _c = _a.lowercase, lowercase = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "filled" : _d, success = _a.success, error = _a.error, warning = _a.warning, prefix = _a.prefix, suffix = _a.suffix, customLoader = _a.customLoader, size = _a.size, rest = __rest(_a, ["isLoading", "type", "value", "lowercase", "variant", "success", "error", "warning", "prefix", "suffix", "customLoader", "size"]);
    var color = success
        ? "success"
        : error
            ? "error"
            : warning
                ? "warning"
                : "";
    return (_jsx(ButtonBaseStyle, __assign({ as: Variants[variant], type: type, lowercase: lowercase, color: color, ref: ref }, rest, { children: isLoading ? (customLoader ? (customLoader) : (_jsx(Loader, {}))) : (_jsxs(Flex, __assign({ align: "center", justify: "center", gap: 2 }, { children: [prefix && _jsx(Prefix, { children: prefix }), _jsx(_Fragment, { children: value }), suffix && _jsx(Suffix, { children: suffix })] }))) })));
});
export var Button = styled(ButtonBase)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
    var _b = _a.size, size = _b === void 0 ? "md" : _b;
    return sizes[size];
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
//# sourceMappingURL=index.js.map