text: define(["require", "exports", "tslib", "react", "../Stack", "office-ui-fabric-react/lib/Styling"], function (require, exports, tslib_1, React, Stack_1, Styling_1) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var HorizontalStackSpacingExample = /** @class */ (function (_super) {
          tslib_1.__extends(HorizontalStackSpacingExample, _super);
          function HorizontalStackSpacingExample() {
              return _super !== null && _super.apply(this, arguments) || this;
          }
          HorizontalStackSpacingExample.prototype.render = function () {
              var styles = Styling_1.mergeStyleSets({
                  root: {
                      background: Styling_1.DefaultPalette.themeTertiary,
                      width: 300,
                      selectors: {
                          '> *': {
                              width: 50,
                              height: 50,
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              background: Styling_1.DefaultPalette.themePrimary,
                              color: Styling_1.DefaultPalette.white
                          }
                      }
                  },
                  item: {
                      width: 50,
                      height: 50,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: Styling_1.DefaultPalette.themePrimary,
                      color: Styling_1.DefaultPalette.white
                  }
              });
              return (React.createElement(Stack_1.Stack, { gap: 10 },
                  React.createElement(Stack_1.Stack, { horizontal: true, disableShrink: true, horizontalAlign: "space-between" },
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Numerical spacing"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: 10, padding: 10 },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3"))),
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Custom spacing"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "10%", padding: "s1 15%" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3")))),
                  React.createElement(Stack_1.Stack, { horizontal: true, disableShrink: true, horizontalAlign: "space-between" },
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Themed spacing (extra small)"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "s2", padding: "s2" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3"))),
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Themed spacing (small)"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "s1", padding: "s1" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3"))),
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Themed spacing (medium)"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "m", padding: "m" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3")))),
                  React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Themed spacing (large)"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "l1", padding: "l1" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3"))),
                      React.createElement(Stack_1.Stack, null,
                          React.createElement("span", null, "Themed spacing (extra large)"),
                          React.createElement(Stack_1.Stack, { horizontal: true, className: styles.root, gap: "l2", padding: "l2" },
                              React.createElement("span", null, "1"),
                              React.createElement("span", null, "2"),
                              React.createElement("span", null, "3"))))));
          };
          return HorizontalStackSpacingExample;
      }(React.Component));
      exports.HorizontalStackSpacingExample = HorizontalStackSpacingExample;
  });
  //# sourceMappingURL=Stack.Horizontal.Spacing.Example.js.map