"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Connected = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const responsive_1 = require("../../utilities/responsive");
const hook_1 = require("./hook");
const Connected_css_1 = __importDefault(require("./Connected.css"));
/**
 * Connected groups inputs inline and maintains a consistent height across
 * inputs. It is commonly used for displaying a single-line TextField or Select
 * inline with a Button.
 */
function Connected({ children, spacing = 'base', leading, trailing, stack = false, }) {
    const responsiveClassNames = responsive_1.useResponsive({ stack });
    return (<hook_1.ConnectedContext.Provider value>
      <div className={css_utilities_1.classNames(Connected_css_1.default.Connected, leading && Connected_css_1.default[css_utilities_1.variationName('leading', leading)], trailing && Connected_css_1.default[css_utilities_1.variationName('trailing', trailing)], Connected_css_1.default[css_utilities_1.variationName('spacing', spacing)], responsiveClassNames.map((className) => Connected_css_1.default[className]))}>
        {children}
      </div>
    </hook_1.ConnectedContext.Provider>);
}
exports.Connected = Connected;