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

var TabPanel = function (_a) {
    var userProvidedId = _a.id, _b = _a.customCss, customCss = _b === void 0 ? '' : _b, children = _a.children, hidden = _a.hidden, tabId = _a.tabId, props = __rest(_a, ["id", "customCss", "children", "hidden", "tabId"]);
    var id = useId(userProvidedId);
    var resolvedCss = useCustomCss(customCss);
    var tabContext = React__default.useContext(TabContext);
    return (jsx("div", __assign({ className: "tab-panel", id: id, role: "tabpanel", "aria-labelledby": tabId, hidden: hidden || (tabContext !== null && tabId !== tabContext.activeTabId), css: resolvedCss }, props, { children: children }), void 0));
};

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