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-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var Card = function (_a) {
    var userProvidedId = _a.id, customCss = _a.customCss, _b = _a.elevation, elevation = _b === void 0 ? 'standard' : _b, children = _a.children, props = __rest(_a, ["id", "customCss", "elevation", "children"]);
    var id = useId(userProvidedId);
    var resolvedCss = useCustomCss(customCss);
    return (jsx(StyledCard, __assign({ id: id, "data-elevation": elevation, css: resolvedCss }, props, { children: children }), void 0));
};
var StyledCard = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #ffffff;\n  border-radius: 5px;\n  padding: 6px;\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: 5px;\n  padding: 6px;\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 templateObject_1;

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