text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  // @codepen
  var React = require("react");
  var Stack_1 = require("../Stack");
  var Styling_1 = require("office-ui-fabric-react/lib/Styling");
  var VerticalStackSpacingExample = /** @class */ (function (_super) {
      tslib_1.__extends(VerticalStackSpacingExample, _super);
      function VerticalStackSpacingExample() {
          return _super !== null && _super.apply(this, arguments) || this;
      }
      VerticalStackSpacingExample.prototype.render = function () {
          var styles = Styling_1.mergeStyleSets({
              root: {
                  background: Styling_1.DefaultPalette.themeTertiary
              },
              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, gap: 50 },
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Numerical spacing"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: 10, padding: 10 },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))),
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Custom spacing"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: "20%", padding: "m 40px" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "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, { className: styles.root, gap: "s2", padding: "s2" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))),
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Themed spacing (small)"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: "s1", padding: "s2" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))),
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Themed spacing (medium)"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: "m", padding: "m" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))),
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Themed spacing (large)"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: "l1", padding: "l1" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))),
                  React.createElement(Stack_1.Stack, null,
                      React.createElement("span", null, "Themed spacing (extra large)"),
                      React.createElement(Stack_1.Stack, { className: styles.root, gap: "l2", padding: "l2" },
                          React.createElement("span", { className: styles.item }, "1"),
                          React.createElement("span", { className: styles.item }, "2"),
                          React.createElement("span", { className: styles.item }, "3"))))));
      };
      return VerticalStackSpacingExample;
  }(React.Component));
  exports.VerticalStackSpacingExample = VerticalStackSpacingExample;
  //# sourceMappingURL=Stack.Vertical.Spacing.Example.js.map