var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/MediaOverlay/docs/examples/content.jsx",
  _this = this;
import React from 'react';
import Box from '../../../Box';
import FillPreview from '../../../FillPreview';
import MediaOverlay from '../..';
export var dragHandle = [/*#__PURE__*/React.createElement(MediaOverlay.Content, {
  key: "dragHandle",
  visible: "hover",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 8,
    columnNumber: 3
  }
}, /*#__PURE__*/React.createElement(MediaOverlay.DragHandle, {
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 9,
    columnNumber: 5
  }
}))];
var renderExampleContent = function renderExampleContent(placement, visible) {
  var fill = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['lime', 'lime'];
  return /*#__PURE__*/React.createElement(MediaOverlay.Content, {
    key: "".concat(visible, "-").concat(placement),
    placement: placement,
    visible: visible,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 14,
      columnNumber: 3
    }
  }, fill.map(function (fillContent, index) {
    return /*#__PURE__*/React.createElement(Box, {
      key: index,
      width: "24px",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 20,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement(FillPreview, {
      key: index,
      fill: fillContent,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 21,
        columnNumber: 9
      }
    }));
  }));
};
export var allPlacements = [renderExampleContent('top-start', 'always'), renderExampleContent('top-end', 'always'), renderExampleContent('middle', 'always'), renderExampleContent('bottom-start', 'always'), renderExampleContent('bottom-end', 'always')];
export var topHoverMiddleAlwaysBottomDefault = [renderExampleContent('top-start', 'hover'), renderExampleContent('top-end', 'hover'), renderExampleContent('middle', 'always'), renderExampleContent('bottom-start', 'default'), renderExampleContent('bottom-end', 'default')];
export var numberedPlacements = [renderExampleContent('top-start', 'always', [/*#__PURE__*/React.createElement(React.Fragment, null, "0"), /*#__PURE__*/React.createElement(React.Fragment, null, "1")]), renderExampleContent('top-end', 'always', [/*#__PURE__*/React.createElement(React.Fragment, null, "2"), /*#__PURE__*/React.createElement(React.Fragment, null, "3")]), renderExampleContent('middle', 'always', [/*#__PURE__*/React.createElement(React.Fragment, null, "4"), /*#__PURE__*/React.createElement(React.Fragment, null, "5")]), renderExampleContent('bottom-start', 'always', [/*#__PURE__*/React.createElement(React.Fragment, null, "6"), /*#__PURE__*/React.createElement(React.Fragment, null, "7")]), renderExampleContent('bottom-end', 'always', [/*#__PURE__*/React.createElement(React.Fragment, null, "8"), /*#__PURE__*/React.createElement(React.Fragment, null, "9")])];