'use strict';

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

require('react');
require('@emotion/core');
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-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');

var IconButton = function (_a) {
    var label = _a.label, onClick = _a.onClick, icon = _a.icon, _b = _a.customCss, customCss = _b === void 0 ? '' : _b, props = _tslib.__rest(_a, ["label", "onClick", "icon", "customCss"]);
    var id = autoId_esm.useId(props.id);
    var resolvedCss = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsx(Button, _tslib.__assign({ title: label, css: resolvedCss, onClick: onClick, "aria-label": label, id: id }, { children: jsxRuntime.jsx(IconWrapper, { children: icon }, void 0) }), void 0));
};
var Button = css.styled('button')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n  padding: 0px;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.101);\n  }\n"], ["\n  background-color: transparent;\n  border: none;\n  border-radius: 4px;\n  padding: 0px;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.101);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var IconWrapper = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 1em;\n  height: 1em;\n  margin: 2px;\n"], ["\n  width: 1em;\n  height: 1em;\n  margin: 2px;\n"])));
var templateObject_1, templateObject_2;

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