'use strict';

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

var React = 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-f9c7d71b.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 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 = _tslib.__rest(_a, ["id", "customCss", "elevation", "ariaLabel", "autoLayout", "childWrapperProps", "children"]);
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsx(StyledOuterDiv, _tslib.__assign({ "aria-label": ariaLabel, id: id, "data-elevation": elevation, css: resolvedCss }, props, { children: jsxRuntime.jsx(StyledInnerDiv, { children: !autoLayout
                ? children
                : React__default['default'].Children.map(children, function (child) {
                    if (!child)
                        return child;
                    return (jsxRuntime.jsx(StyledChildDiv, _tslib.__assign({}, childWrapperProps, { children: child }), void 0));
                }) }, void 0) }), void 0));
};
var StyledOuterDiv = css.styled('section')(templateObject_1 || (templateObject_1 = _tslib.__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 = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__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 = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__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;

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