"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = require("react-dom");
var _core = require("@dnd-kit/core");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _flex = _interopRequireDefault(require("../../../templates/flex"));
var _typography = require("../../../typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var OverlayContainer = (0, _styledComponents["default"])(_flex["default"]).attrs({
  background: "mainBackground",
  padding: [2, 4],
  round: 1,
  border: true
}).withConfig({
  displayName: "dragOverlay__OverlayContainer",
  componentId: "sc-z0f8hc-0"
})(["box-shadow:0 2px 8px rgba(0,0,0,0.15);opacity:0.9;"]);
var DragOverlay = function DragOverlay(_ref) {
  var activeColumn = _ref.activeColumn;
  if (!activeColumn) return null;
  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, /*#__PURE__*/_react["default"].createElement(OverlayContainer, {
    alignItems: "center",
    gap: 2
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    strong: true
  }, activeColumn.columnDef.header || activeColumn.id))), document.body);
};
var _default = exports["default"] = DragOverlay;