import React__default from 'react';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { InfoIcon } from './InfoIcon.mjs';
import { Typography } from './Typography.mjs';
import useTheme from '../../../../../node_modules/@mui/material/styles/useTheme.mjs';

const SettingsSection = ({ children, title, tooltipText, titleVariant = 'h4' })=>{
    const theme = useTheme();
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 0.5
    }, /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        flexDirection: "row",
        gap: 0.5
    }, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: titleVariant
    }, title), tooltipText && /*#__PURE__*/ React__default.createElement(InfoIcon, {
        color: theme.styleConfig.colors.primary,
        tooltipText: tooltipText
    })), children);
};

export { SettingsSection };
//# sourceMappingURL=SettingsSection.mjs.map
