'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _commonjsHelpers = require('./_commonjsHelpers-aa8da8cd.js');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var createIconComponent = require('./createIconComponent-643fed10.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var plusHeavy = _commonjsHelpers.createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _createIconComponent = _interopRequireDefault(createIconComponent.createIconComponent_1);

  var _react = _interopRequireDefault(React__default['default']);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      "default": obj
    };
  }

  var IconPlusHeavy = (0, _createIconComponent["default"])({
    content: _react["default"].createElement("g", null, _react["default"].createElement("path", {
      d: "M35 64.64a5.34 5.34 0 0 1-5.34-5.34V10.7a5.34 5.34 0 1 1 10.68 0v48.6A5.34 5.34 0 0 1 35 64.64z"
    }), _react["default"].createElement("path", {
      d: "M59.3 40.34H10.7a5.34 5.34 0 1 1 0-10.68h48.6a5.34 5.34 0 1 1 0 10.68z"
    })),
    height: undefined,
    width: undefined
  });
  IconPlusHeavy.displayName = 'IconPlusHeavy';
  var _default = IconPlusHeavy;
  exports["default"] = _default;
});
var PlusIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(plusHeavy);

var BorderedButton = function (_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, customColor = _a.customColor, userProvidedId = _a.id, _c = _a.customCss, customCss = _c === void 0 ? '' : _c, onClick = _a.onClick, icon = _a.icon, _d = _a.removeIcon, removeIcon = _d === void 0 ? false : _d, children = _a.children;
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsx(StyledButton, _tslib.__assign({ id: id, css: resolvedCss, "data-variant": customColor ? 'none' : variant, customColor: customColor, onClick: onClick }, { children: jsxRuntime.jsxs(InnerWrapper, { children: [!removeIcon && (jsxRuntime.jsx(IconCircle, _tslib.__assign({ "data-variant": customColor ? 'none' : variant, customColor: customColor }, { children: jsxRuntime.jsx(IconWrapper, { children: icon ? icon : jsxRuntime.jsx(PlusIcon, {}, void 0) }, void 0) }), void 0)), children] }, void 0) }), void 0));
};
var StyledButton = css.styled('button')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 2px dashed ", ";\n  outline: none;\n  background-color: transparent;\n  border-radius: 8px;\n  width: 100%;\n  padding: 10px;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &[data-variant='secondary'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='danger'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='success'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n  }\n  &[data-variant='none'] {\n    border-color: ", ";\n    color: ", ";\n  }\n"], ["\n  border: 2px dashed ", ";\n  outline: none;\n  background-color: transparent;\n  border-radius: 8px;\n  width: 100%;\n  padding: 10px;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &[data-variant='secondary'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n  &[data-variant='danger'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n  &[data-variant='success'] {\n    border-color: ", ";\n    color: ", ";\n    &:hover {\n      background-color: ",
    ";\n    }\n  }\n  &[data-variant='none'] {\n    border-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 52);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 28);
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 46);
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.secondary, 8);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.danger, 56);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.success, 69);
}, function (_a) {
    var customColor = _a.customColor;
    return customColor;
}, function (_a) {
    var customColor = _a.customColor;
    return customColor;
});
var IconWrapper = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 1em;\n  height: 1em;\n  color: white;\n  fill: white;\n"], ["\n  width: 1em;\n  height: 1em;\n  color: white;\n  fill: white;\n"])));
var IconCircle = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: 3px;\n  border-radius: 30px;\n  background-color: ", ";\n  &[data-variant='secondary'] {\n    background-color: ", ";\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n  }\n  &[data-variant='none'] {\n    background-color: ", ";\n  }\n"], ["\n  padding: 3px;\n  border-radius: 30px;\n  background-color: ", ";\n  &[data-variant='secondary'] {\n    background-color: ",
    ";\n  }\n  &[data-variant='danger'] {\n    background-color: ", ";\n  }\n  &[data-variant='success'] {\n    background-color: ", ";\n  }\n  &[data-variant='none'] {\n    background-color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.secondary, 46);
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var customColor = _a.customColor;
    return customColor;
});
var InnerWrapper = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.BorderedButton = BorderedButton;
//# sourceMappingURL=BorderedButton.js.map
