"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormLayoutGroup = exports.FormLayout = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const BlockStack_1 = require("../BlockStack");
const Theme_1 = require("../Theme");
const FormLayout_css_1 = __importDefault(require("./FormLayout.css"));
function FormLayout({ children }) {
    const { formLayout: { spacing }, } = Theme_1.useThemeConfiguration();
    const normalizedSpacing = spacing === 'base' ? undefined : spacing;
    return <BlockStack_1.BlockStack spacing={normalizedSpacing}>{children}</BlockStack_1.BlockStack>;
}
exports.FormLayout = FormLayout;
function FormLayoutGroup({ children, }) {
    const { formLayout: { spacing }, } = Theme_1.useThemeConfiguration();
    return (<div className={css_utilities_1.classNames(FormLayout_css_1.default.Group, spacing &&
        spacing !== 'base' &&
        FormLayout_css_1.default[css_utilities_1.variationName('spacing', spacing)])}>
      {children}
    </div>);
}
exports.FormLayoutGroup = FormLayoutGroup;