How to use the @artsy/palette.Flex function in @artsy/palette

oneSlideVisible = _this$props3.oneSlideVisible,
          render = _this$props3.render; // FIXME: During SSR pass want to hide other images. Work around for lack
      // of SSR support in Flickity. This will only render the first 6 slides on SRR pass.

      var isServer = typeof window === "undefined";
      var carouselImages;

      if (isServer && oneSlideVisible) {
        carouselImages = [data[0]];
      } else if (isServer && data.length > 5) {
        carouselImages = data.slice(0, 6);
      } else {
        carouselImages = data;
      }

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_palette.Flex, {
        flexDirection: "row",
        position: "relative",
        justifyContent: "space-around",
        alignItems: "center",
        height: height
      }, this.renderLeftArrow(), _react.default.createElement(CarouselContainer, {
        height: height,
        isMounted: isMounted
      }, _react.default.createElement(FlickityCarousel, {
        isMounted: isMounted,
        ref: function ref(c) {
          return _this3.carouselRef = c;
        }
      }, carouselImages.map(function (slide, slideIndex) {
        return _react.default.createElement(_react.Fragment, {
          key: slideIndex

lineItem: order.lineItems.edges[0].node
        }), _react.default.createElement(_palette.Spacer, {
          mb: 3
        }), _react.default.createElement(_palette.Button, {
          size: "large",
          width: "100%",
          loading: isCommittingMutation,
          onClick: function onClick() {
            return _this4.onSubmit();
          }
        }, "Submit"), _react.default.createElement(_palette.Spacer, {
          mb: 2
        }), _react.default.createElement(_ConditionsOfSaleDisclaimer.ConditionsOfSaleDisclaimer, {
          textAlign: "center"
        })))),
        Sidebar: _react.default.createElement(_palette.Flex, {
          flexDirection: "column"
        }, _react.default.createElement(_palette.Flex, {
          flexDirection: "column"
        }, _react.default.createElement(_ArtworkSummaryItem.ArtworkSummaryItemFragmentContainer, {
          order: order
        }), _react.default.createElement(_TransactionDetailsSummaryItem.TransactionDetailsSummaryItemFragmentContainer, {
          order: order
        })), _react.default.createElement(_palette.Spacer, {
          mb: [2, 3]
        }), _react.default.createElement(_Responsive.Media, {
          at: "xs"
        }, _react.default.createElement(_palette.Button, {
          size: "large",
          width: "100%",
          loading: isCommittingMutation,
          onClick: function onClick() {

exports.ArtworkGridContainer = ArtworkGridContainer;

_defineProperty(ArtworkGridContainer, "defaultProps", {
  columnCount: [3],
  sectionMargin: 20,
  itemMargin: 20,
  preloadImageCount: 6
});

var ArtworkGrid = (0, _styledComponents.default)(ArtworkGridContainer).withConfig({
  displayName: "ArtworkGrid",
  componentId: "sc-1o6jos7-0"
})(["display:flex;flex-direction:row;flex-wrap:wrap;"]);
exports.ArtworkGrid = ArtworkGrid;
var InnerContainer = (0, _styledComponents.default)(_palette.Flex).withConfig({
  displayName: "ArtworkGrid__InnerContainer",
  componentId: "sc-1o6jos7-1"
})(["width:100%;"]);

var _default = (0, _reactRelay.createFragmentContainer)(ArtworkGrid, {
  artworks: function artworks() {
    var node = require("../../__generated__/ArtworkGrid_artworks.graphql");

    if (node.hash && node.hash !== "b14f0927b10e6b5c53d7bd2ca546a2cf") {
      console.error("The definition of 'ArtworkGrid_artworks' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
    }

    return require("../../__generated__/ArtworkGrid_artworks.graphql");
  }
});
/**

})(["display:", ";"], function (props) {
  return props.isMounted ? "block" : "flex";
});

var CarouselContainer = _styledComponents.default.div.withConfig({
  displayName: "Carousel__CarouselContainer",
  componentId: "sc-1swuwer-1"
})(["width:100%;position:relative;overflow:", ";.flickity-viewport{overflow:hidden;width:100%;}.flickity-slider{img{user-select:none;}}.flickity-page-dots{text-align:center;height:0;padding-top:", "px;.dot{width:4px;height:4px;border-radius:100%;display:inline-block;margin:", "px;background-color:", ";}.dot.is-selected{background-color:", ";}}", ";"], function (props) {
  return props.isMounted ? "visible" : "hidden";
}, (0, _palette.space)(1), (0, _palette.space)(0.5), (0, _palette.color)("black10"), (0, _palette.color)("black100"), function (props) {
  if (props.height) {
    return "\n        height: ".concat(props.height, ";\n      ");
  }
});

var ArrowButton = (0, _styledComponents.default)(_palette.Flex).withConfig({
  displayName: "Carousel__ArrowButton",
  componentId: "sc-1swuwer-2"
})(["position:relative;cursor:pointer;display:flex;align-items:center;user-select:none;opacity:0.3;transition:opacity 0.25s;height:", ";&:hover{opacity:1;}"], function (p) {
  return p.height || "200px";
});
exports.ArrowButton = ArrowButton;

var ArrowWrapper = _styledComponents.default.div.withConfig({
  displayName: "Carousel__ArrowWrapper",
  componentId: "sc-1swuwer-3"
})(["position:absolute;top:50%;transform:translateY(-50%);min-width:30px;z-index:10;transition:opacity 0.25s;opacity:", ";pointer-events:", ";height:100%;", ";", ";"], function (props) {
  return props.showArrow ? 1 : 0;
}, function (props) {
  return props.showArrow ? "auto" : "none";
}, _styledSystem.left, _styledSystem.right);
//# sourceMappingURL=Carousel.js.map

render: function render(_ref3) {
      var values = _ref3.values,
          touched = _ref3.touched,
          errors = _ref3.errors,
          isSubmitting = _ref3.isSubmitting,
          setFieldValue = _ref3.setFieldValue,
          setFieldTouched = _ref3.setFieldTouched,
          status = _ref3.status;
      return _react.default.createElement(_formik.Form, null, _react.default.createElement(_palette.Flex, {
        flexDirection: "column"
      }, _react.default.createElement(_palette.Flex, {
        flexDirection: "column",
        py: 4
      }, _react.default.createElement(_palette.Serif, {
        pb: 0.5,
        size: "4t",
        weight: "semibold",
        color: "black100"
      }, "Set your max bid"), _react.default.createElement(_palette.LargeSelect, {
        selected: values.selectedBid,
        onSelect: function onSelect(value) {
          setFieldValue("selectedBid", value);
          setFieldTouched("selectedBid");
        },
        options: displayIncrements

var _this4 = this;

      var _this$props = this.props,
          order = _this$props.order,
          isCommittingMutation = _this$props.isCommittingMutation;
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_HorizontalPadding.HorizontalPadding, {
        px: [0, 4]
      }, _react.default.createElement(_palette.Row, null, _react.default.createElement(_palette.Col, null, _react.default.createElement(_OrderStepper.OrderStepper, {
        currentStep: "Review",
        steps: order.mode === "OFFER" ? _OrderStepper.offerFlowSteps : _OrderStepper.buyNowFlowSteps
      })))), _react.default.createElement(_HorizontalPadding.HorizontalPadding, null, _react.default.createElement(_TwoColumnLayout.TwoColumnLayout, {
        Content: _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_palette.Join, {
          separator: _react.default.createElement(_palette.Spacer, {
            mb: 3
          })
        }, _react.default.createElement(_palette.Flex, {
          flexDirection: "column",
          mb: [2, 3]
        }, order.mode === "OFFER" && _react.default.createElement(_OfferSummaryItem.OfferSummaryItemFragmentContainer, {
          order: order,
          onChange: this.onChangeOffer
        }), _react.default.createElement(_ShippingSummaryItem.ShippingSummaryItemFragmentContainer, {
          order: order,
          onChange: this.onChangeShipping
        }), _react.default.createElement(_CreditCardSummaryItem.CreditCardSummaryItemFragmentContainer, {
          order: order,
          onChange: this.onChangePayment,
          title: "Payment method"
        })), _react.default.createElement(_Responsive.Media, {
          greaterThan: "xs"
        }, _react.default.createElement(_ItemReview.ItemReviewFragmentContainer, {
          lineItem: order.lineItems.edges[0].node

render: function render(_ref3) {
      var values = _ref3.values,
          touched = _ref3.touched,
          errors = _ref3.errors,
          isSubmitting = _ref3.isSubmitting,
          setFieldValue = _ref3.setFieldValue,
          setFieldTouched = _ref3.setFieldTouched,
          status = _ref3.status;
      return _react.default.createElement(_formik.Form, null, _react.default.createElement(_palette.Flex, {
        flexDirection: "column"
      }, _react.default.createElement(_palette.Flex, {
        flexDirection: "column",
        py: 4
      }, _react.default.createElement(_palette.Serif, {
        pb: 0.5,
        size: "4t",
        weight: "semibold",
        color: "black100"
      }, "Set your max bid"), _react.default.createElement(_palette.LargeSelect, {
        selected: values.selectedBid,
        onSelect: function onSelect(value) {
          setFieldValue("selectedBid", value);
          setFieldTouched("selectedBid");
        },
        options: displayIncrements
      }), touched.selectedBid && errors.selectedBid && _react.default.createElement(_palette.Sans, {
        mt: 1,

value: function render() {
      return _react.default.createElement(_palette.Flex, {
        mx: [-2, 0]
      }, _react.default.createElement(_v.TabCarousel, {
        tabs: this.tabs()
      }));
    }
  }]);

message: errors.creditCard
    }
  }))), _react.default.createElement(_palette.Box, {
    mt: 4
  }, _react.default.createElement(_palette.Box, {
    mt: 2
  }, _react.default.createElement(_AddressForm.AddressForm, {
    value: values.address,
    onChange: function onChange(address, _key) {
      setFieldValue("address", address);
    },
    errors: errors.address,
    touched: touched.address,
    billing: true,
    showPhoneNumberInput: true
  }))), _react.default.createElement(_palette.Flex, {
    mt: 4,
    mb: 2,
    flexDirection: "column",
    justifyContent: "center"
  }, _react.default.createElement(_palette.Box, {
    mx: "auto"
  }, _react.default.createElement(_ConditionsOfSaleCheckbox.ConditionsOfSaleCheckbox, {
    selected: values.agreeToTerms,
    onSelect: function onSelect(value) {
      setFieldValue("agreeToTerms", value);
      setFieldTouched("agreeToTerms");
    }
  })), touched.agreeToTerms && errors.agreeToTerms && _react.default.createElement(_palette.Sans, {
    mt: 1,
    color: "red100",
    size: "2",