import 'react';
import '@emotion/core';
import { a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsx, jsxs } 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-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var CollapsibleSidebar = function (_a) {
    var title = _a.title, closeButtonIcon = _a.closeButtonIcon, onClose = _a.onClose, width = _a.width, height = _a.height, _b = _a.autoLayout, autoLayout = _b === void 0 ? true : _b, customCss = _a.customCss, userProvidedId = _a.id, children = _a.children;
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    var closeIcon = closeButtonIcon ? (closeButtonIcon) : (jsx("i", { className: "fa fa-arrow-right" }, void 0));
    return (jsxs(SidebarWrapper, __assign({ id: id, css: resolvedCss, width: width ? width : '180px', height: height ? height : '600px', autoLayout: autoLayout }, { children: [jsxs(Header, { children: [jsx(HeaderText, { children: title }, void 0),
                    jsx(IconWrapper, __assign({ "aria-label": 'close ' + title, "aria-expanded": true, onClick: onClose }, { children: closeIcon }), void 0)] }, void 0),
            !autoLayout ? children : jsx(InnerWrapper, { children: children }, void 0)] }), void 0));
};
var SidebarWrapper = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.16);\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"], ["\n  background: white;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.16);\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: ",
    ";\n"])), function (_a) {
    var height = _a.height;
    return height;
}, function (_a) {
    var width = _a.width;
    return width;
}, function (_a) {
    var autoLayout = _a.autoLayout;
    return autoLayout ? 'space-between' : 'flex-start';
});
var InnerWrapper = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  padding-bottom: 16px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  padding-bottom: 16px;\n"])));
var Header = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: #439aff;\n  width: 100%;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  color: white;\n"], ["\n  background-color: #439aff;\n  width: 100%;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  color: white;\n"])));
var HeaderText = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 8px;\n  padding-left: 15px;\n  padding-top: 10px;\n  padding-bottom: 8px;\n"], ["\n  padding: 8px;\n  padding-left: 15px;\n  padding-top: 10px;\n  padding-bottom: 8px;\n"])));
var IconWrapper = styled('button')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-right: 6px;\n  margin-right: 4px;\n  background: none;\n  border: none;\n  outline: none;\n  color: white;\n  &:hover {\n    color: lightgray;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    border-radius: 5px;\n  }\n"], ["\n  padding-right: 6px;\n  margin-right: 4px;\n  background: none;\n  border: none;\n  outline: none;\n  color: white;\n  &:hover {\n    color: lightgray;\n  }\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n    border-radius: 5px;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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