"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    materialParameters: ()=>materialParameters,
    ConsumptionTabs: ()=>ConsumptionTabs,
    Row: ()=>Row,
    Section: ()=>Section
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const Box_namespaceObject = require("@mui/material/Box");
var Box_default = /*#__PURE__*/ __webpack_require__.n(Box_namespaceObject);
const Stack_namespaceObject = require("@mui/material/Stack");
var Stack_default = /*#__PURE__*/ __webpack_require__.n(Stack_namespaceObject);
const Tab_namespaceObject = require("@mui/material/Tab");
var Tab_default = /*#__PURE__*/ __webpack_require__.n(Tab_namespaceObject);
const Tabs_namespaceObject = require("@mui/material/Tabs");
var Tabs_default = /*#__PURE__*/ __webpack_require__.n(Tabs_namespaceObject);
const Typography_namespaceObject = require("@mui/material/Typography");
var Typography_default = /*#__PURE__*/ __webpack_require__.n(Typography_namespaceObject);
const external_react_namespaceObject = require("react");
const materialParameters = {
    material: true
};
function Section({ title, description, children }) {
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Box_default(), {
        component: "section",
        sx: {
            mb: 6
        },
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Typography_default(), {
                variant: "h6",
                sx: {
                    mb: 0.5
                },
                children: title
            }),
            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Typography_default(), {
                variant: "body2",
                sx: {
                    color: 'text.secondary',
                    mb: 2
                },
                children: description
            }),
            children
        ]
    });
}
function Row({ label, children }) {
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Box_default(), {
        sx: {
            mb: 2
        },
        children: [
            label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Typography_default(), {
                variant: "body2",
                sx: {
                    fontWeight: 600,
                    mb: 1
                },
                children: label
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Stack_default(), {
                direction: "row",
                spacing: 2,
                useFlexGap: true,
                sx: {
                    flexWrap: 'wrap',
                    alignItems: 'center'
                },
                children: children
            })
        ]
    });
}
function ImportLine({ statement }) {
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Box_default(), {
        component: "code",
        sx: (theme)=>({
                display: 'block',
                fontFamily: 'monospace',
                fontSize: 12,
                px: 1.5,
                py: 1,
                mb: 3,
                borderRadius: 1,
                color: theme.palette.semantic.colorForegroundDeEmp,
                backgroundColor: theme.palette.semantic.colorBackgroundSecondary,
                border: `1px solid ${theme.palette.semantic.colorBorderDeEmp}`,
                width: 'fit-content'
            }),
        children: statement
    });
}
function ConsumptionTabs({ mui, ap, muiImport, apImport }) {
    const [tab, setTab] = (0, external_react_namespaceObject.useState)(0);
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Box_default(), {
        children: [
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Tabs_default(), {
                value: tab,
                onChange: (_, value)=>setTab(value),
                sx: {
                    mb: 2
                },
                children: [
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Tab_default(), {
                        label: "MUI + theme overrides"
                    }),
                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Tab_default(), {
                        label: "Ap component"
                    })
                ]
            }),
            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ImportLine, {
                statement: 0 === tab ? muiImport : apImport
            }),
            0 === tab ? mui : ap
        ]
    });
}
exports.ConsumptionTabs = __webpack_exports__.ConsumptionTabs;
exports.Row = __webpack_exports__.Row;
exports.Section = __webpack_exports__.Section;
exports.materialParameters = __webpack_exports__.materialParameters;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "ConsumptionTabs",
    "Row",
    "Section",
    "materialParameters"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
