import 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var IconButton = function (_a) {
    var label = _a.label, onClick = _a.onClick, icon = _a.icon, _b = _a.customCss, customCss = _b === void 0 ? '' : _b, props = __rest(_a, ["label", "onClick", "icon", "customCss"]);
    var id = useId(props.id);
    var resolvedCss = useCustomCss(customCss);
    return (jsx(Button, __assign({ title: label, css: resolvedCss, onClick: onClick, "aria-label": label, id: id }, { children: jsx(IconWrapper, { children: icon }, void 0) }), void 0));
};
var Button = styled('button')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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;

export { IconButton };
//# sourceMappingURL=IconButton.js.map
