import React__default from '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 ContextBar = function (_a) {
    var userProvidedId = _a.id, _b = _a.customCss, customCss = _b === void 0 ? '' : _b, _c = _a.elevation, elevation = _c === void 0 ? 'standard' : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? '' : _d, _e = _a.autoLayout, autoLayout = _e === void 0 ? true : _e, _f = _a.childWrapperProps, childWrapperProps = _f === void 0 ? '' : _f, children = _a.children, props = __rest(_a, ["id", "customCss", "elevation", "ariaLabel", "autoLayout", "childWrapperProps", "children"]);
    var id = useId(userProvidedId);
    var resolvedCss = useCustomCss(customCss);
    return (jsx(StyledOuterDiv, __assign({ "aria-label": ariaLabel, id: id, "data-elevation": elevation, css: resolvedCss }, props, { children: jsx(StyledInnerDiv, { children: !autoLayout
                ? children
                : React__default.Children.map(children, function (child) {
                    if (!child)
                        return child;
                    return (jsx(StyledChildDiv, __assign({}, childWrapperProps, { children: child }), void 0));
                }) }, void 0) }), void 0));
};
var StyledOuterDiv = styled('section')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #ffffff;\n  border-radius: 12px;\n  max-width: fit-content;\n  &[data-elevation='standard'] {\n    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.101);\n  }\n  &[data-elevation='high'] {\n    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.294);\n  }\n"], ["\n  background: #ffffff;\n  border-radius: 12px;\n  max-width: fit-content;\n  &[data-elevation='standard'] {\n    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.101);\n  }\n  &[data-elevation='high'] {\n    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.294);\n  }\n"])));
var StyledInnerDiv = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 9px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 9px;\n  align-items: center;\n"])));
var StyledChildDiv = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0px 8px;\n  &:first-of-type {\n    margin-left: 0px;\n  }\n  &:last-of-type {\n    margin-right: 0px;\n  }\n"], ["\n  margin: 0px 8px;\n  &:first-of-type {\n    margin-left: 0px;\n  }\n  &:last-of-type {\n    margin-right: 0px;\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3;

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