import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
// Padding value in Chakra spacing units = https://chakra-ui-git-fix-typescript-autocomplete.chakra-ui.vercel.app/docs/theming/theme#spacing
const sectionPadding = 8;
function Section({ variant = 'primary', testId, ...props }) {
    // Note: needs to be defined here as we can't create "variants for Box" or "layerStyles that allow theme changes"
    const variants = {
        primary: {
            border: '1px solid',
            bg: 'white',
            borderColor: 'gray.200',
            boxShadow: '4px 4px 0px 0px var(--chakra-colors-blackAlpha-200)',
            _dark: {
                bg: 'gray.900',
                borderColor: 'gray.700',
                boxShadow: '4px 4px 0px 0px var(--chakra-colors-whiteAlpha-50)'
            }
        },
        secondary: {
            bg: 'blackAlpha.100',
            _dark: {
                bg: 'whiteAlpha.100'
            }
        }
    };
    const theme = variants[variant];
    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        "data-testid": testId,
        as: "section",
        p: sectionPadding,
        rounded: "lg",
        minWidth: "0" // Note - necessary to prevent width blowout
        ,
        __css: {
            hr: {
                mt: '4 !important',
                mb: '2 !important'
            }
        },
        ...theme,
        ...props
    });
}
/* ESM default export */ const Section_rslib_entry_ = Section;
export { Section_rslib_entry_ as default, sectionPadding };
