"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 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, leading, trailing, }) {
    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)], spacing && Connected_css_1.default[css_utilities_1.variationName('spacing', spacing)])}>
        {children}
      </div>
    </hook_1.ConnectedContext.Provider>);
}
exports.Connected = Connected;