@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/components/DropZone/Center.js

@@ -1,61 +1,56 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _Droppable = require("./../Droppable");
-var getColor = function getColor(_ref) {
-  var isOver = _ref.isOver,
-    isDroppable = _ref.isDroppable;
-  if (isOver) {
-    return "var(--mdc-theme-primary)";
-  }
-  if (!isDroppable) {
-    return "var(--mdc-theme-background)";
+import React from "react";
+import { Droppable } from "./../Droppable.js";
+import { cn, cva } from "@webiny/admin-ui";
+const droppableContainerVariants = cva("bg-transparent box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed", {
+  variants: {
+    isOver: {
+      true: "border-accent-default text-accent-primary",
+      false: "border-success-default text-success-primary"
+    },
+    isDroppable: {
+      false: "border-success-default text-accent-primary"
+    }
+  },
+  defaultVariants: {
+    isOver: false,
+    isDroppable: true
   }
-  return "var(--mdc-theme-secondary)";
-};
-var Container = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e14zhyp10"
-} : {
-  target: "e14zhyp10",
-  label: "Container"
-})("background-color:transparent;box-sizing:border-box;height:100%;min-height:100px;position:relative;user-select:none;width:100%;border:2px dashed ", getColor, ";opacity:1;>div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin:0;color:", getColor, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNlbnRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUI0QiIsImZpbGUiOiJDZW50ZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRHJvcHBhYmxlLCBEcm9wcGFibGVQcm9wcywgT25Ecm9wQ2FsbGFibGUgfSBmcm9tIFwiLi8uLi9Ecm9wcGFibGVcIjtcblxuaW50ZXJmYWNlIERyb3BwYWJsZUZsYWdzIHtcbiAgICBpc092ZXI6IGJvb2xlYW47XG4gICAgaXNEcm9wcGFibGU6IGJvb2xlYW47XG59XG5cbmNvbnN0IGdldENvbG9yID0gKHsgaXNPdmVyLCBpc0Ryb3BwYWJsZSB9OiBEcm9wcGFibGVGbGFncykgPT4ge1xuICAgIGlmIChpc092ZXIpIHtcbiAgICAgICAgcmV0dXJuIFwidmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCI7XG4gICAgfVxuXG4gICAgaWYgKCFpc0Ryb3BwYWJsZSkge1xuICAgICAgICByZXR1cm4gXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIjtcbiAgICB9XG5cbiAgICByZXR1cm4gXCJ2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiO1xufTtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtaW4taGVpZ2h0OiAxMDBweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgYm9yZGVyOiAycHggZGFzaGVkICR7Z2V0Q29sb3J9O1xuICAgIG9wYWNpdHk6IDE7XG4gICAgPiBkaXYge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIHRvcDogNTAlO1xuICAgICAgICBsZWZ0OiA1MCU7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpO1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgIGNvbG9yOiAke2dldENvbG9yfTtcbiAgICB9XG5gO1xuXG5pbnRlcmZhY2UgQ2VudGVyUHJvcHMge1xuICAgIHR5cGU/OiBzdHJpbmc7XG4gICAgb25Ecm9wOiBPbkRyb3BDYWxsYWJsZTtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICAgIGFjdGl2ZT86IGJvb2xlYW47XG4gICAgaGlnaGxpZ2h0PzogYm9vbGVhbjtcbiAgICBzdHlsZT86IENTU1Byb3BlcnRpZXM7XG4gICAgaXNEcm9wcGFibGU/OiBEcm9wcGFibGVQcm9wc1tcImlzRHJvcHBhYmxlXCJdO1xufVxuXG5jb25zdCBnZXRJbmVydCA9IChpc0Ryb3BwYWJsZTogYm9vbGVhbikgPT4ge1xuICAgIHJldHVybiBpc0Ryb3BwYWJsZSA/IHt9IDogeyBpbmVydDogXCJcIiB9O1xufTtcblxuY29uc3QgQ2VudGVyID0gKHsgb25Ecm9wLCBjaGlsZHJlbiwgc3R5bGUsIGlzRHJvcHBhYmxlIH06IENlbnRlclByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPERyb3BwYWJsZSBvbkRyb3A9e29uRHJvcH0gaXNEcm9wcGFibGU9e2lzRHJvcHBhYmxlfT5cbiAgICAgICAgICAgIHsoeyBpc092ZXIsIGRyb3AsIGlzRHJvcHBhYmxlIH0pID0+IChcbiAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgIHJlZj17ZHJvcH1cbiAgICAgICAgICAgICAgICAgICAgc3R5bGU9e3sgd2lkdGg6IFwiMTAwJVwiLCBoZWlnaHQ6IFwiMTAwJVwiLCAuLi5zdHlsZSB9fVxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17XCJjbXMtZWRpdG9yLWZpcnN0LWZpZWxkLWFyZWFcIn1cbiAgICAgICAgICAgICAgICAgICAgey4uLmdldEluZXJ0KGlzRHJvcHBhYmxlKX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxDb250YWluZXIgaXNPdmVyPXtpc092ZXJ9IGlzRHJvcHBhYmxlPXtpc0Ryb3BwYWJsZX0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2PntjaGlsZHJlbn08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9Db250YWluZXI+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L0Ryb3BwYWJsZT5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2VudGVyO1xuIl19 */"));
-var getInert = function getInert(isDroppable) {
+});
+const getInert = isDroppable => {
   return isDroppable ? {} : {
     inert: ""
   };
 };
-var Center = function Center(_ref2) {
-  var onDrop = _ref2.onDrop,
-    children = _ref2.children,
-    style = _ref2.style,
-    isDroppable = _ref2.isDroppable;
-  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+const Center = ({
+  onDrop,
+  children,
+  style,
+  isDroppable
+}) => {
+  return /*#__PURE__*/React.createElement(Droppable, {
     onDrop: onDrop,
     isDroppable: isDroppable
-  }, function (_ref3) {
-    var isOver = _ref3.isOver,
-      drop = _ref3.drop,
-      isDroppable = _ref3.isDroppable;
-    return /*#__PURE__*/_react.default.createElement("div", Object.assign({
-      ref: drop,
-      style: (0, _objectSpread2.default)({
-        width: "100%",
-        height: "100%"
-      }, style),
-      "data-testid": "cms-editor-first-field-area"
-    }, getInert(isDroppable)), /*#__PURE__*/_react.default.createElement(Container, {
-      isOver: isOver,
-      isDroppable: isDroppable
-    }, /*#__PURE__*/_react.default.createElement("div", null, children)));
-  });
+  }, ({
+    isOver,
+    drop,
+    isDroppable
+  }) => /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: drop,
+    style: {
+      width: "100%",
+      height: "100%",
+      ...style
+    },
+    "data-testid": "cms-editor-first-field-area"
+  }, getInert(isDroppable)), /*#__PURE__*/React.createElement("div", {
+    className: cn(droppableContainerVariants({
+      isOver,
+      isDroppable
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0"
+  }, children))));
 };
-var _default = exports.default = Center;
+export default Center;
 
 //# sourceMappingURL=Center.js.map

package/admin/components/DropZone/Center.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Droppable","getColor","_ref","isOver","isDroppable","Container","_base","default","process","env","NODE_ENV","target","label","getInert","inert","Center","_ref2","onDrop","children","style","createElement","Droppable","_ref3","drop","Object","assign","ref","_objectSpread2","width","height","_default","exports"],"sources":["Center.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, DroppableProps, OnDropCallable } from \"./../Droppable\";\n\ninterface DroppableFlags {\n    isOver: boolean;\n    isDroppable: boolean;\n}\n\nconst getColor = ({ isOver, isDroppable }: DroppableFlags) => {\n    if (isOver) {\n        return \"var(--mdc-theme-primary)\";\n    }\n\n    if (!isDroppable) {\n        return \"var(--mdc-theme-background)\";\n    }\n\n    return \"var(--mdc-theme-secondary)\";\n};\n\nconst Container = styled.div`\n    background-color: transparent;\n    box-sizing: border-box;\n    height: 100%;\n    min-height: 100px;\n    position: relative;\n    user-select: none;\n    width: 100%;\n    border: 2px dashed ${getColor};\n    opacity: 1;\n    > div {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        margin: 0;\n        color: ${getColor};\n    }\n`;\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: \"\" };\n};\n\nconst Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <Container isOver={isOver} isDroppable={isDroppable}>\n                        <div>{children}</div>\n                    </Container>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAOA,IAAME,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAgD;EAAA,IAA1CC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;EACnC,IAAID,MAAM,EAAE;IACR,OAAO,0BAA0B;EACrC;EAEA,IAAI,CAACC,WAAW,EAAE;IACd,OAAO,6BAA6B;EACxC;EAEA,OAAO,4BAA4B;AACvC,CAAC;AAED,IAAMC,SAAS,oBAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,uJAQUX,QAAQ,wGAQhBA,QAAQ,UAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA,g5FAExB;AAYD,IAAMG,QAAQ,GAAG,SAAXA,QAAQA,CAAIT,WAAoB,EAAK;EACvC,OAAOA,WAAW,GAAG,CAAC,CAAC,GAAG;IAAEU,KAAK,EAAE;EAAG,CAAC;AAC3C,CAAC;AAED,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,KAAA,EAA8D;EAAA,IAAxDC,MAAM,GAAAD,KAAA,CAANC,MAAM;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEC,KAAK,GAAAH,KAAA,CAALG,KAAK;IAAEf,WAAW,GAAAY,KAAA,CAAXZ,WAAW;EAClD,oBACIP,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACpB,UAAA,CAAAqB,SAAS;IAACJ,MAAM,EAAEA,MAAO;IAACb,WAAW,EAAEA;EAAY,GAC/C,UAAAkB,KAAA;IAAA,IAAGnB,MAAM,GAAAmB,KAAA,CAANnB,MAAM;MAAEoB,IAAI,GAAAD,KAAA,CAAJC,IAAI;MAAEnB,WAAW,GAAAkB,KAAA,CAAXlB,WAAW;IAAA,oBACzBP,MAAA,CAAAU,OAAA,CAAAa,aAAA,QAAAI,MAAA,CAAAC,MAAA;MACIC,GAAG,EAAEH,IAAK;MACVJ,KAAK,MAAAQ,cAAA,CAAApB,OAAA;QAAIqB,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE;MAAM,GAAKV,KAAK,CAAG;MACnD,eAAa;IAA8B,GACvCN,QAAQ,CAACT,WAAW,CAAC,gBAEzBP,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACf,SAAS;MAACF,MAAM,EAAEA,MAAO;MAACC,WAAW,EAAEA;IAAY,gBAChDP,MAAA,CAAAU,OAAA,CAAAa,aAAA,cAAMF,QAAc,CACb,CACV,CAAC;EAAA,CAEH,CAAC;AAEpB,CAAC;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAEaQ,MAAM","ignoreList":[]}
+{"version":3,"names":["React","Droppable","cn","cva","droppableContainerVariants","variants","isOver","true","false","isDroppable","defaultVariants","getInert","inert","Center","onDrop","children","style","createElement","drop","Object","assign","ref","width","height","className"],"sources":["Center.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React from \"react\";\nimport type { DroppableProps, OnDropCallable } from \"./../Droppable.js\";\nimport { Droppable } from \"./../Droppable.js\";\nimport { cn, cva } from \"@webiny/admin-ui\";\n\nconst droppableContainerVariants = cva(\n    \"bg-transparent box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed\",\n    {\n        variants: {\n            isOver: {\n                true: \"border-accent-default text-accent-primary\",\n                false: \"border-success-default text-success-primary\"\n            },\n            isDroppable: {\n                false: \"border-success-default text-accent-primary\"\n            }\n        },\n        defaultVariants: {\n            isOver: false,\n            isDroppable: true\n        }\n    }\n);\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: \"\" };\n};\n\nconst Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={drop}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <div className={cn(droppableContainerVariants({ isOver, isDroppable }))}>\n                        <div className=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0\">\n                            {children}\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAClB,SAASC,EAAE,EAAEC,GAAG,QAAQ,kBAAkB;AAE1C,MAAMC,0BAA0B,GAAGD,GAAG,CAClC,yGAAyG,EACzG;EACIE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE,2CAA2C;MACjDC,KAAK,EAAE;IACX,CAAC;IACDC,WAAW,EAAE;MACTD,KAAK,EAAE;IACX;EACJ,CAAC;EACDE,eAAe,EAAE;IACbJ,MAAM,EAAE,KAAK;IACbG,WAAW,EAAE;EACjB;AACJ,CACJ,CAAC;AAYD,MAAME,QAAQ,GAAIF,WAAoB,IAAK;EACvC,OAAOA,WAAW,GAAG,CAAC,CAAC,GAAG;IAAEG,KAAK,EAAE;EAAG,CAAC;AAC3C,CAAC;AAED,MAAMC,MAAM,GAAGA,CAAC;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAEP;AAAyB,CAAC,KAAK;EACtE,oBACIT,KAAA,CAAAiB,aAAA,CAAChB,SAAS;IAACa,MAAM,EAAEA,MAAO;IAACL,WAAW,EAAEA;EAAY,GAC/C,CAAC;IAAEH,MAAM;IAAEY,IAAI;IAAET;EAAY,CAAC,kBAC3BT,KAAA,CAAAiB,aAAA,QAAAE,MAAA,CAAAC,MAAA;IACIC,GAAG,EAAEH,IAAK;IACVF,KAAK,EAAE;MAAEM,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAE,GAAGP;IAAM,CAAE;IACnD,eAAa;EAA8B,GACvCL,QAAQ,CAACF,WAAW,CAAC,gBAEzBT,KAAA,CAAAiB,aAAA;IAAKO,SAAS,EAAEtB,EAAE,CAACE,0BAA0B,CAAC;MAAEE,MAAM;MAAEG;IAAY,CAAC,CAAC;EAAE,gBACpET,KAAA,CAAAiB,aAAA;IAAKO,SAAS,EAAC;EAA2E,GACrFT,QACA,CACJ,CACJ,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeF,MAAM","ignoreList":[]}

package/admin/components/DropZone/Horizontal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { IsVisibleCallable } from "../Droppable";
-import { DragSource } from "../../../types";
+import type { IsVisibleCallable } from "../Droppable.js";
+import type { DragSource } from "../../../types.js";
 interface HorizontalProps {
     onDrop(item: DragSource): void;
     last?: boolean;

package/admin/components/DropZone/Horizontal.js

@@ -1,87 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _Droppable = require("../Droppable");
-var _excluded = ["last", "onDrop", "isVisible"];
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var InnerDiv = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1uuull92"
-} : {
-  target: "e1uuull92",
-  label: "InnerDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "u4oja6",
-  styles: "height:15px;width:100%;z-index:3;border-radius:0;box-sizing:border-box;display:none;border:1px dashed black;border-spacing:5px"
-} : {
-  name: "u4oja6",
-  styles: "height:15px;width:100%;z-index:3;border-radius:0;box-sizing:border-box;display:none;border:1px dashed black;border-spacing:5px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtpQiIsImZpbGUiOiJIb3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRHJvcHBhYmxlLCBJc1Zpc2libGVDYWxsYWJsZSB9IGZyb20gXCIuLi9Ecm9wcGFibGVcIjtcbmltcG9ydCB7IERyYWdTb3VyY2UgfSBmcm9tIFwifi90eXBlc1wiO1xuXG5jb25zdCBJbm5lckRpdiA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgaGVpZ2h0OiAxNSxcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgekluZGV4OiAzLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgIGJvcmRlcjogXCIxcHggZGFzaGVkIGJsYWNrXCIsXG4gICAgYm9yZGVyU3BhY2luZzogNVxufSk7XG5cbmNvbnN0IEJhY2tncm91bmRDb2xvckRpdiA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCJcbn0pO1xuXG5pbnRlcmZhY2UgT3V0ZXJEaXZQcm9wcyB7XG4gICAgaXNPdmVyOiBib29sZWFuO1xuICAgIGlzRHJhZ2dpbmc6IGJvb2xlYW47XG4gICAgbGFzdDogYm9vbGVhbjtcbn1cblxuY29uc3QgT3V0ZXJEaXYgPSBzdHlsZWQoXCJkaXZcIikoXG4gICAge1xuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgIHdpZHRoOiBcImNhbGMoMTAwJSArIDJweClcIixcbiAgICAgICAgekluZGV4OiAxMCxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIlxuICAgIH0sXG4gICAgKHByb3BzOiBPdXRlckRpdlByb3BzKSA9PiAoe1xuICAgICAgICBbcHJvcHMubGFzdCA/IFwiYm90dG9tXCIgOiBcInRvcFwiXTogLTE1LFxuICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgIFtJbm5lckRpdl06IHtcbiAgICAgICAgICAgIGJvcmRlckNvbG9yOiBwcm9wcy5pc092ZXIgPyBcInZhcigtLW1kYy10aGVtZS1wcmltYXJ5KVwiIDogXCJ2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiLFxuICAgICAgICAgICAgZGlzcGxheTogcHJvcHMuaXNEcmFnZ2luZyA/IFwiYmxvY2tcIiA6IFwibm9uZVwiLFxuICAgICAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICAgICAgW0JhY2tncm91bmRDb2xvckRpdl06IHtcbiAgICAgICAgICAgICAgICBvcGFjaXR5OiAwLjUsXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBwcm9wcy5pc092ZXJcbiAgICAgICAgICAgICAgICAgICAgPyBcInZhcigtLW1kYy10aGVtZS1wcmltYXJ5KVwiXG4gICAgICAgICAgICAgICAgICAgIDogXCJ2YXIoLS1tZGMtdGhlbWUtc2Vjb25kYXJ5KVwiXG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICB9KVxuKTtcblxuaW50ZXJmYWNlIEhvcml6b250YWxQcm9wcyB7XG4gICAgb25Ecm9wKGl0ZW06IERyYWdTb3VyY2UpOiB2b2lkO1xuICAgIGxhc3Q/OiBib29sZWFuO1xuICAgIGlzVmlzaWJsZT86IElzVmlzaWJsZUNhbGxhYmxlO1xuICAgIFtcImRhdGEtdGVzdGlkXCJdPzogc3RyaW5nO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHsgbGFzdCwgb25Ecm9wLCBpc1Zpc2libGUsIC4uLnJlc3QgfTogSG9yaXpvbnRhbFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPERyb3BwYWJsZSBvbkRyb3A9e29uRHJvcH0gaXNWaXNpYmxlPXtpc1Zpc2libGV9PlxuICAgICAgICAgICAgeyh7IGlzT3ZlciwgaXNEcmFnZ2luZywgZHJvcCB9KSA9PiAoXG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICByZWY9e2Ryb3B9XG4gICAgICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtyZXN0W1wiZGF0YS10ZXN0aWRcIl19XG4gICAgICAgICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgICAgICAgICAvKiBGb3IgZHJvcHpvbmUgZGVidWdnaW5nOiBib3JkZXI6IFwiMXB4IHNvbGlkIGJsdWVcIiwqL1xuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiBcIjE1cHhcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBbbGFzdCA/IFwiYm90dG9tXCIgOiBcInRvcFwiXTogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQ6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICB6SW5kZXg6IGlzRHJhZ2dpbmcgPyAxMDAwIDogLTFcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxPdXRlckRpdiBpc092ZXI9e2lzT3Zlcn0gaXNEcmFnZ2luZz17aXNEcmFnZ2luZ30gbGFzdD17bGFzdCA/IHRydWUgOiBmYWxzZX0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8SW5uZXJEaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJhY2tncm91bmRDb2xvckRpdiAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Jbm5lckRpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9PdXRlckRpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvRHJvcHBhYmxlPlxuICAgICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBIb3Jpem9udGFsO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var BackgroundColorDiv = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1uuull91"
-} : {
-  target: "e1uuull91",
-  label: "BackgroundColorDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "w1atjl",
-  styles: "width:100%;height:100%"
-} : {
-  name: "w1atjl",
-  styles: "width:100%;height:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCMkIiLCJmaWxlIjoiSG9yaXpvbnRhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IERyb3BwYWJsZSwgSXNWaXNpYmxlQ2FsbGFibGUgfSBmcm9tIFwiLi4vRHJvcHBhYmxlXCI7XG5pbXBvcnQgeyBEcmFnU291cmNlIH0gZnJvbSBcIn4vdHlwZXNcIjtcblxuY29uc3QgSW5uZXJEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGhlaWdodDogMTUsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIHpJbmRleDogMyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICBib3JkZXI6IFwiMXB4IGRhc2hlZCBibGFja1wiLFxuICAgIGJvcmRlclNwYWNpbmc6IDVcbn0pO1xuXG5jb25zdCBCYWNrZ3JvdW5kQ29sb3JEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiXG59KTtcblxuaW50ZXJmYWNlIE91dGVyRGl2UHJvcHMge1xuICAgIGlzT3ZlcjogYm9vbGVhbjtcbiAgICBpc0RyYWdnaW5nOiBib29sZWFuO1xuICAgIGxhc3Q6IGJvb2xlYW47XG59XG5cbmNvbnN0IE91dGVyRGl2ID0gc3R5bGVkKFwiZGl2XCIpKFxuICAgIHtcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICB3aWR0aDogXCJjYWxjKDEwMCUgKyAycHgpXCIsXG4gICAgICAgIHpJbmRleDogMTAsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCJcbiAgICB9LFxuICAgIChwcm9wczogT3V0ZXJEaXZQcm9wcykgPT4gKHtcbiAgICAgICAgW3Byb3BzLmxhc3QgPyBcImJvdHRvbVwiIDogXCJ0b3BcIl06IC0xNSxcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbSW5uZXJEaXZdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogcHJvcHMuaXNPdmVyID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIiA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgICAgIGRpc3BsYXk6IHByb3BzLmlzRHJhZ2dpbmcgPyBcImJsb2NrXCIgOiBcIm5vbmVcIixcbiAgICAgICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgICAgIFtCYWNrZ3JvdW5kQ29sb3JEaXZdOiB7XG4gICAgICAgICAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuaXNPdmVyXG4gICAgICAgICAgICAgICAgICAgID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIlxuICAgICAgICAgICAgICAgICAgICA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIlxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfSlcbik7XG5cbmludGVyZmFjZSBIb3Jpem9udGFsUHJvcHMge1xuICAgIG9uRHJvcChpdGVtOiBEcmFnU291cmNlKTogdm9pZDtcbiAgICBsYXN0PzogYm9vbGVhbjtcbiAgICBpc1Zpc2libGU/OiBJc1Zpc2libGVDYWxsYWJsZTtcbiAgICBbXCJkYXRhLXRlc3RpZFwiXT86IHN0cmluZztcbn1cblxuY29uc3QgSG9yaXpvbnRhbCA9ICh7IGxhc3QsIG9uRHJvcCwgaXNWaXNpYmxlLCAuLi5yZXN0IH06IEhvcml6b250YWxQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxEcm9wcGFibGUgb25Ecm9wPXtvbkRyb3B9IGlzVmlzaWJsZT17aXNWaXNpYmxlfT5cbiAgICAgICAgICAgIHsoeyBpc092ZXIsIGlzRHJhZ2dpbmcsIGRyb3AgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgcmVmPXtkcm9wfVxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17cmVzdFtcImRhdGEtdGVzdGlkXCJdfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgLyogRm9yIGRyb3B6b25lIGRlYnVnZ2luZzogYm9yZGVyOiBcIjFweCBzb2xpZCBibHVlXCIsKi9cbiAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogXCIxNXB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgW2xhc3QgPyBcImJvdHRvbVwiIDogXCJ0b3BcIl06IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBsZWZ0OiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgekluZGV4OiBpc0RyYWdnaW5nID8gMTAwMCA6IC0xXG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICA8T3V0ZXJEaXYgaXNPdmVyPXtpc092ZXJ9IGlzRHJhZ2dpbmc9e2lzRHJhZ2dpbmd9IGxhc3Q9e2xhc3QgPyB0cnVlIDogZmFsc2V9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPElubmVyRGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCYWNrZ3JvdW5kQ29sb3JEaXYgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvSW5uZXJEaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvT3V0ZXJEaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L0Ryb3BwYWJsZT5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSG9yaXpvbnRhbDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var OuterDiv = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1uuull90"
-} : {
-  target: "e1uuull90",
-  label: "OuterDiv"
-})("margin:0;padding:0;width:calc(100% + 2px);z-index:10;background-color:transparent;position:absolute;display:flex;justify-content:center;", function (props) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, props.last ? "bottom" : "top", -15), InnerDiv, (0, _defineProperty2.default)({
-    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)",
-    display: props.isDragging ? "block" : "none"
-  }, BackgroundColorDiv, {
-    opacity: 0.5,
-    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }));
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCaUIiLCJmaWxlIjoiSG9yaXpvbnRhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IERyb3BwYWJsZSwgSXNWaXNpYmxlQ2FsbGFibGUgfSBmcm9tIFwiLi4vRHJvcHBhYmxlXCI7XG5pbXBvcnQgeyBEcmFnU291cmNlIH0gZnJvbSBcIn4vdHlwZXNcIjtcblxuY29uc3QgSW5uZXJEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGhlaWdodDogMTUsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIHpJbmRleDogMyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICBib3JkZXI6IFwiMXB4IGRhc2hlZCBibGFja1wiLFxuICAgIGJvcmRlclNwYWNpbmc6IDVcbn0pO1xuXG5jb25zdCBCYWNrZ3JvdW5kQ29sb3JEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiXG59KTtcblxuaW50ZXJmYWNlIE91dGVyRGl2UHJvcHMge1xuICAgIGlzT3ZlcjogYm9vbGVhbjtcbiAgICBpc0RyYWdnaW5nOiBib29sZWFuO1xuICAgIGxhc3Q6IGJvb2xlYW47XG59XG5cbmNvbnN0IE91dGVyRGl2ID0gc3R5bGVkKFwiZGl2XCIpKFxuICAgIHtcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICB3aWR0aDogXCJjYWxjKDEwMCUgKyAycHgpXCIsXG4gICAgICAgIHpJbmRleDogMTAsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCJcbiAgICB9LFxuICAgIChwcm9wczogT3V0ZXJEaXZQcm9wcykgPT4gKHtcbiAgICAgICAgW3Byb3BzLmxhc3QgPyBcImJvdHRvbVwiIDogXCJ0b3BcIl06IC0xNSxcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbSW5uZXJEaXZdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogcHJvcHMuaXNPdmVyID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIiA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgICAgIGRpc3BsYXk6IHByb3BzLmlzRHJhZ2dpbmcgPyBcImJsb2NrXCIgOiBcIm5vbmVcIixcbiAgICAgICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgICAgIFtCYWNrZ3JvdW5kQ29sb3JEaXZdOiB7XG4gICAgICAgICAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuaXNPdmVyXG4gICAgICAgICAgICAgICAgICAgID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIlxuICAgICAgICAgICAgICAgICAgICA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIlxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfSlcbik7XG5cbmludGVyZmFjZSBIb3Jpem9udGFsUHJvcHMge1xuICAgIG9uRHJvcChpdGVtOiBEcmFnU291cmNlKTogdm9pZDtcbiAgICBsYXN0PzogYm9vbGVhbjtcbiAgICBpc1Zpc2libGU/OiBJc1Zpc2libGVDYWxsYWJsZTtcbiAgICBbXCJkYXRhLXRlc3RpZFwiXT86IHN0cmluZztcbn1cblxuY29uc3QgSG9yaXpvbnRhbCA9ICh7IGxhc3QsIG9uRHJvcCwgaXNWaXNpYmxlLCAuLi5yZXN0IH06IEhvcml6b250YWxQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxEcm9wcGFibGUgb25Ecm9wPXtvbkRyb3B9IGlzVmlzaWJsZT17aXNWaXNpYmxlfT5cbiAgICAgICAgICAgIHsoeyBpc092ZXIsIGlzRHJhZ2dpbmcsIGRyb3AgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgcmVmPXtkcm9wfVxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17cmVzdFtcImRhdGEtdGVzdGlkXCJdfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgLyogRm9yIGRyb3B6b25lIGRlYnVnZ2luZzogYm9yZGVyOiBcIjFweCBzb2xpZCBibHVlXCIsKi9cbiAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogXCIxNXB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgW2xhc3QgPyBcImJvdHRvbVwiIDogXCJ0b3BcIl06IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBsZWZ0OiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgekluZGV4OiBpc0RyYWdnaW5nID8gMTAwMCA6IC0xXG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICA8T3V0ZXJEaXYgaXNPdmVyPXtpc092ZXJ9IGlzRHJhZ2dpbmc9e2lzRHJhZ2dpbmd9IGxhc3Q9e2xhc3QgPyB0cnVlIDogZmFsc2V9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPElubmVyRGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCYWNrZ3JvdW5kQ29sb3JEaXYgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvSW5uZXJEaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvT3V0ZXJEaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L0Ryb3BwYWJsZT5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSG9yaXpvbnRhbDtcbiJdfQ== */");
-var Horizontal = function Horizontal(_ref2) {
-  var last = _ref2.last,
-    onDrop = _ref2.onDrop,
-    isVisible = _ref2.isVisible,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+import React from "react";
+import { Droppable } from "../Droppable.js";
+import { cn } from "@webiny/admin-ui";
+const OuterDiv = ({
+  isOver,
+  isDragging,
+  last
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn("absolute w-full z-10 bg-transparent flex justify-center", last ? "-bottom-md" : "-top-md")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("h-md w-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", isDragging && "block")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
+})));
+const Horizontal = ({
+  last,
+  onDrop,
+  isVisible,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(Droppable, {
     onDrop: onDrop,
     isVisible: isVisible
-  }, function (_ref3) {
-    var isOver = _ref3.isOver,
-      isDragging = _ref3.isDragging,
-      drop = _ref3.drop;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: drop,
-      "data-testid": rest["data-testid"],
-      style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-        /* For dropzone debugging: border: "1px solid blue",*/
-        height: "15px",
-        width: "100%",
-        position: "absolute"
-      }, last ? "bottom" : "top", 0), "left", 0), "zIndex", isDragging ? 1000 : -1)
-    }, /*#__PURE__*/_react.default.createElement(OuterDiv, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last ? true : false
-    }, /*#__PURE__*/_react.default.createElement(InnerDiv, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
-  });
+  }, ({
+    isOver,
+    isDragging,
+    drop
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: drop,
+    "data-testid": rest["data-testid"],
+    style: {
+      /* For dropzone debugging: border: "1px solid blue",*/
+      height: "16px",
+      width: "100%",
+      position: "absolute",
+      [last ? "bottom" : "top"]: 0,
+      left: 0,
+      zIndex: isDragging ? 1000 : -1
+    }
+  }, /*#__PURE__*/React.createElement(OuterDiv, {
+    isOver: isOver,
+    isDragging: isDragging,
+    last: last ?? false
+  })));
 };
-var _default = exports.default = Horizontal;
+export default Horizontal;
 
 //# sourceMappingURL=Horizontal.js.map

package/admin/components/DropZone/Horizontal.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Droppable","_excluded","_EMOTION_STRINGIFIED_CSS_ERROR__","InnerDiv","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","BackgroundColorDiv","OuterDiv","props","_defineProperty2","last","borderColor","isOver","display","isDragging","opacity","backgroundColor","Horizontal","_ref2","onDrop","isVisible","rest","_objectWithoutProperties2","createElement","Droppable","_ref3","drop","ref","style","height","width","position","_default","exports"],"sources":["Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/types\";\n\nconst InnerDiv = styled(\"div\")({\n    height: 15,\n    width: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    boxSizing: \"border-box\",\n    display: \"none\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = styled(\"div\")(\n    {\n        margin: 0,\n        padding: 0,\n        width: \"calc(100% + 2px)\",\n        zIndex: 10,\n        backgroundColor: \"transparent\",\n        position: \"absolute\",\n        display: \"flex\",\n        justifyContent: \"center\"\n    },\n    (props: OuterDivProps) => ({\n        [props.last ? \"bottom\" : \"top\"]: -15,\n        // @ts-expect-error\n        [InnerDiv]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-expect-error\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    data-testid={rest[\"data-testid\"]}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        height: \"15px\",\n                        width: \"100%\",\n                        position: \"absolute\",\n                        [last ? \"bottom\" : \"top\"]: 0,\n                        left: 0,\n                        zIndex: isDragging ? 1000 : -1\n                    }}\n                >\n                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ? true : false}>\n                        <InnerDiv>\n                            <BackgroundColorDiv />\n                        </InnerDiv>\n                    </OuterDiv>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Droppable","cn","OuterDiv","isOver","isDragging","last","createElement","className","Horizontal","onDrop","isVisible","rest","drop","ref","style","height","width","position","left","zIndex"],"sources":["Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (\n    <div\n        className={cn(\n            \"absolute w-full z-10 bg-transparent flex justify-center\",\n            last ? \"-bottom-md\" : \"-top-md\"\n        )}\n    >\n        <div\n            className={cn(\n                \"h-md w-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\n                isDragging && \"block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"w-full h-full opacity-50\",\n                    isOver ? \"bg-primary-muted\" : \"bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    data-testid={rest[\"data-testid\"]}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        height: \"16px\",\n                        width: \"100%\",\n                        position: \"absolute\",\n                        [last ? \"bottom\" : \"top\"]: 0,\n                        left: 0,\n                        zIndex: isDragging ? 1000 : -1\n                    }}\n                >\n                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ?? false} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAElB,SAASC,EAAE,QAAQ,kBAAkB;AAQrC,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC;AAAoB,CAAC,kBACzDN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,yDAAyD,EACzDI,IAAI,GAAG,YAAY,GAAG,SAC1B;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,gDAAgD,EAChDE,MAAM,GAAG,uBAAuB,GAAG,wBAAwB,EAC3DC,UAAU,IAAI,OAClB;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,0BAA0B,EAC1BE,MAAM,GAAG,kBAAkB,GAAG,kBAClC;AAAE,CACL,CACA,CACJ,CACR;AASD,MAAMK,UAAU,GAAGA,CAAC;EAAEH,IAAI;EAAEI,MAAM;EAAEC,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC1E,oBACIZ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACS,MAAM,EAAEA,MAAO;IAACC,SAAS,EAAEA;EAAU,GAC3C,CAAC;IAAEP,MAAM;IAAEC,UAAU;IAAEQ;EAAK,CAAC,kBAC1Bb,KAAA,CAAAO,aAAA;IACIO,GAAG,EAAED,IAAK;IACV,eAAaD,IAAI,CAAC,aAAa,CAAE;IACjCG,KAAK,EAAE;MACH;MACAC,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE,UAAU;MACpB,CAACZ,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC;MAC5Ba,IAAI,EAAE,CAAC;MACPC,MAAM,EAAEf,UAAU,GAAG,IAAI,GAAG,CAAC;IACjC;EAAE,gBAEFL,KAAA,CAAAO,aAAA,CAACJ,QAAQ;IAACC,MAAM,EAAEA,MAAO;IAACC,UAAU,EAAEA,UAAW;IAACC,IAAI,EAAEA,IAAI,IAAI;EAAM,CAAE,CACvE,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeG,UAAU","ignoreList":[]}

package/admin/components/DropZone/Vertical.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { DragSource } from "../../../types";
+import type { IsVisibleCallable } from "../Droppable.js";
+import type { DragSource } from "../../../types.js";
 interface VerticalProps {
     depth?: number;
     onDrop(item: DragSource): void;
     last?: boolean;
-    isVisible?: any;
+    isVisible?: IsVisibleCallable;
 }
 declare const Vertical: ({ depth, last, onDrop, isVisible }: VerticalProps) => React.JSX.Element;
 export default Vertical;

package/admin/components/DropZone/Vertical.js

@@ -1,85 +1,48 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _Droppable = require("../Droppable");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var InnerDivVertical = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yx4w3z2"
-} : {
-  target: "e1yx4w3z2",
-  label: "InnerDivVertical"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1oslt3m",
-  styles: "position:absolute;width:10px;height:100%;z-index:3;border-radius:0;display:none;box-sizing:border-box;border:1px dashed black;border-spacing:5px"
-} : {
-  name: "1oslt3m",
-  styles: "position:absolute;width:10px;height:100%;z-index:3;border-radius:0;display:none;box-sizing:border-box;border:1px dashed black;border-spacing:5px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZlcnRpY2FsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLeUIiLCJmaWxlIjoiVmVydGljYWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBEcm9wcGFibGUsIElzVmlzaWJsZUNhbGxhYmxlIH0gZnJvbSBcIi4uL0Ryb3BwYWJsZVwiO1xuaW1wb3J0IHsgRHJhZ1NvdXJjZSB9IGZyb20gXCJ+L3R5cGVzXCI7XG5cbmNvbnN0IElubmVyRGl2VmVydGljYWwgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgd2lkdGg6IDEwLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgekluZGV4OiAzLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIGJvcmRlcjogXCIxcHggZGFzaGVkIGJsYWNrXCIsXG4gICAgYm9yZGVyU3BhY2luZzogNVxufSk7XG5cbmNvbnN0IEJhY2tncm91bmRDb2xvckRpdiA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCJcbn0pO1xuXG5pbnRlcmZhY2UgT3V0ZXJEaXZWZXJ0aWNhbFByb3BzIHtcbiAgICBpc092ZXI6IGJvb2xlYW47XG4gICAgbGFzdD86IGJvb2xlYW47XG4gICAgaXNWaXNpYmxlPzogSXNWaXNpYmxlQ2FsbGFibGU7XG4gICAgaXNEcmFnZ2luZz86IGJvb2xlYW47XG59XG5cbmNvbnN0IE91dGVyRGl2VmVydGljYWwgPSBzdHlsZWQoXCJkaXZcIikoXG4gICAge1xuICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICB3aWR0aDogXCIzMCVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICB6SW5kZXg6IDEwLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIlxuICAgIH0sXG4gICAgKHByb3BzOiBPdXRlckRpdlZlcnRpY2FsUHJvcHMpID0+ICh7XG4gICAgICAgIFtwcm9wcy5sYXN0ID8gXCJyaWdodFwiIDogXCJsZWZ0XCJdOiAtOSxcbiAgICAgICAgdGV4dEFsaWduOiBwcm9wcy5sYXN0ID8gXCJyaWdodFwiIDogXCJsZWZ0XCIsXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW0lubmVyRGl2VmVydGljYWxdOiB7XG4gICAgICAgICAgICBib3JkZXJDb2xvcjogcHJvcHMuaXNPdmVyID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIiA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIixcbiAgICAgICAgICAgIFtwcm9wcy5sYXN0ID8gXCJyaWdodFwiIDogXCJsZWZ0XCJdOiAtMixcbiAgICAgICAgICAgIGRpc3BsYXk6IHByb3BzLmlzRHJhZ2dpbmcgPyBcImJsb2NrXCIgOiBcIm5vbmVcIixcbiAgICAgICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgICAgIFtCYWNrZ3JvdW5kQ29sb3JEaXZdOiB7XG4gICAgICAgICAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuaXNPdmVyXG4gICAgICAgICAgICAgICAgICAgID8gXCJ2YXIoLS1tZGMtdGhlbWUtcHJpbWFyeSlcIlxuICAgICAgICAgICAgICAgICAgICA6IFwidmFyKC0tbWRjLXRoZW1lLXNlY29uZGFyeSlcIlxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfSlcbik7XG5cbmludGVyZmFjZSBWZXJ0aWNhbFByb3BzIHtcbiAgICBkZXB0aD86IG51bWJlcjtcbiAgICBvbkRyb3AoaXRlbTogRHJhZ1NvdXJjZSk6IHZvaWQ7XG4gICAgbGFzdD86IGJvb2xlYW47XG4gICAgaXNWaXNpYmxlPzogYW55O1xufVxuXG5jb25zdCBWZXJ0aWNhbCA9ICh7IGRlcHRoLCBsYXN0LCBvbkRyb3AsIGlzVmlzaWJsZSB9OiBWZXJ0aWNhbFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPERyb3BwYWJsZSBvbkRyb3A9e29uRHJvcH0gaXNWaXNpYmxlPXtpc1Zpc2libGV9PlxuICAgICAgICAgICAgeyh7IGlzT3ZlciwgaXNEcmFnZ2luZywgZHJvcCB9KSA9PiAoXG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICByZWY9e2Ryb3B9XG4gICAgICAgICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgICAgICAgICAvKiBGb3IgZHJvcHpvbmUgZGVidWdnaW5nOiBib3JkZXI6IFwiMXB4IHNvbGlkIGJsdWVcIiwqL1xuICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IFwiMzAlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBtYXhXaWR0aDogXCIxMDBweFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBbbGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiXTogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIHpJbmRleDogaXNEcmFnZ2luZyA/IDEwMDAgKyAoZGVwdGggfHwgMCkgOiAtMVxuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPE91dGVyRGl2VmVydGljYWwgaXNPdmVyPXtpc092ZXJ9IGlzRHJhZ2dpbmc9e2lzRHJhZ2dpbmd9IGxhc3Q9e2xhc3R9PlxuICAgICAgICAgICAgICAgICAgICAgICAgPElubmVyRGl2VmVydGljYWw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJhY2tncm91bmRDb2xvckRpdiAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9Jbm5lckRpdlZlcnRpY2FsPlxuICAgICAgICAgICAgICAgICAgICA8L091dGVyRGl2VmVydGljYWw+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L0Ryb3BwYWJsZT5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgVmVydGljYWw7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var BackgroundColorDiv = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yx4w3z1"
-} : {
-  target: "e1yx4w3z1",
-  label: "BackgroundColorDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "w1atjl",
-  styles: "width:100%;height:100%"
-} : {
-  name: "w1atjl",
-  styles: "width:100%;height:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZlcnRpY2FsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjJCIiwiZmlsZSI6IlZlcnRpY2FsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRHJvcHBhYmxlLCBJc1Zpc2libGVDYWxsYWJsZSB9IGZyb20gXCIuLi9Ecm9wcGFibGVcIjtcbmltcG9ydCB7IERyYWdTb3VyY2UgfSBmcm9tIFwifi90eXBlc1wiO1xuXG5jb25zdCBJbm5lckRpdlZlcnRpY2FsID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHdpZHRoOiAxMCxcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIHpJbmRleDogMyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBib3JkZXI6IFwiMXB4IGRhc2hlZCBibGFja1wiLFxuICAgIGJvcmRlclNwYWNpbmc6IDVcbn0pO1xuXG5jb25zdCBCYWNrZ3JvdW5kQ29sb3JEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiXG59KTtcblxuaW50ZXJmYWNlIE91dGVyRGl2VmVydGljYWxQcm9wcyB7XG4gICAgaXNPdmVyOiBib29sZWFuO1xuICAgIGxhc3Q/OiBib29sZWFuO1xuICAgIGlzVmlzaWJsZT86IElzVmlzaWJsZUNhbGxhYmxlO1xuICAgIGlzRHJhZ2dpbmc/OiBib29sZWFuO1xufVxuXG5jb25zdCBPdXRlckRpdlZlcnRpY2FsID0gc3R5bGVkKFwiZGl2XCIpKFxuICAgIHtcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgd2lkdGg6IFwiMzAlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAxMCxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCJcbiAgICB9LFxuICAgIChwcm9wczogT3V0ZXJEaXZWZXJ0aWNhbFByb3BzKSA9PiAoe1xuICAgICAgICBbcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiXTogLTksXG4gICAgICAgIHRleHRBbGlnbjogcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiLFxuICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgIFtJbm5lckRpdlZlcnRpY2FsXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IHByb3BzLmlzT3ZlciA/IFwidmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCIgOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgICAgICBbcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiXTogLTIsXG4gICAgICAgICAgICBkaXNwbGF5OiBwcm9wcy5pc0RyYWdnaW5nID8gXCJibG9ja1wiIDogXCJub25lXCIsXG4gICAgICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgICAgICBbQmFja2dyb3VuZENvbG9yRGl2XToge1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNSxcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmlzT3ZlclxuICAgICAgICAgICAgICAgICAgICA/IFwidmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCJcbiAgICAgICAgICAgICAgICAgICAgOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCJcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pXG4pO1xuXG5pbnRlcmZhY2UgVmVydGljYWxQcm9wcyB7XG4gICAgZGVwdGg/OiBudW1iZXI7XG4gICAgb25Ecm9wKGl0ZW06IERyYWdTb3VyY2UpOiB2b2lkO1xuICAgIGxhc3Q/OiBib29sZWFuO1xuICAgIGlzVmlzaWJsZT86IGFueTtcbn1cblxuY29uc3QgVmVydGljYWwgPSAoeyBkZXB0aCwgbGFzdCwgb25Ecm9wLCBpc1Zpc2libGUgfTogVmVydGljYWxQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxEcm9wcGFibGUgb25Ecm9wPXtvbkRyb3B9IGlzVmlzaWJsZT17aXNWaXNpYmxlfT5cbiAgICAgICAgICAgIHsoeyBpc092ZXIsIGlzRHJhZ2dpbmcsIGRyb3AgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgcmVmPXtkcm9wfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgLyogRm9yIGRyb3B6b25lIGRlYnVnZ2luZzogYm9yZGVyOiBcIjFweCBzb2xpZCBibHVlXCIsKi9cbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiBcIjMwJVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg6IFwiMTAwcHhcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgW2xhc3QgPyBcInJpZ2h0XCIgOiBcImxlZnRcIl06IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICB6SW5kZXg6IGlzRHJhZ2dpbmcgPyAxMDAwICsgKGRlcHRoIHx8IDApIDogLTFcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxPdXRlckRpdlZlcnRpY2FsIGlzT3Zlcj17aXNPdmVyfSBpc0RyYWdnaW5nPXtpc0RyYWdnaW5nfSBsYXN0PXtsYXN0fT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxJbm5lckRpdlZlcnRpY2FsPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCYWNrZ3JvdW5kQ29sb3JEaXYgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvSW5uZXJEaXZWZXJ0aWNhbD5cbiAgICAgICAgICAgICAgICAgICAgPC9PdXRlckRpdlZlcnRpY2FsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9Ecm9wcGFibGU+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZlcnRpY2FsO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var OuterDivVertical = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yx4w3z0"
-} : {
-  target: "e1yx4w3z0",
-  label: "OuterDivVertical"
-})("position:absolute;width:30%;top:0;height:100%;z-index:10;background-color:transparent;", function (props) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, props.last ? "right" : "left", -9), "textAlign", props.last ? "right" : "left"), InnerDivVertical, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }, props.last ? "right" : "left", -2), "display", props.isDragging ? "block" : "none"), BackgroundColorDiv, {
-    opacity: 0.5,
-    backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }));
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlZlcnRpY2FsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnlCIiwiZmlsZSI6IlZlcnRpY2FsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRHJvcHBhYmxlLCBJc1Zpc2libGVDYWxsYWJsZSB9IGZyb20gXCIuLi9Ecm9wcGFibGVcIjtcbmltcG9ydCB7IERyYWdTb3VyY2UgfSBmcm9tIFwifi90eXBlc1wiO1xuXG5jb25zdCBJbm5lckRpdlZlcnRpY2FsID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHdpZHRoOiAxMCxcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIHpJbmRleDogMyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBib3JkZXI6IFwiMXB4IGRhc2hlZCBibGFja1wiLFxuICAgIGJvcmRlclNwYWNpbmc6IDVcbn0pO1xuXG5jb25zdCBCYWNrZ3JvdW5kQ29sb3JEaXYgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiXG59KTtcblxuaW50ZXJmYWNlIE91dGVyRGl2VmVydGljYWxQcm9wcyB7XG4gICAgaXNPdmVyOiBib29sZWFuO1xuICAgIGxhc3Q/OiBib29sZWFuO1xuICAgIGlzVmlzaWJsZT86IElzVmlzaWJsZUNhbGxhYmxlO1xuICAgIGlzRHJhZ2dpbmc/OiBib29sZWFuO1xufVxuXG5jb25zdCBPdXRlckRpdlZlcnRpY2FsID0gc3R5bGVkKFwiZGl2XCIpKFxuICAgIHtcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgd2lkdGg6IFwiMzAlXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAxMCxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCJcbiAgICB9LFxuICAgIChwcm9wczogT3V0ZXJEaXZWZXJ0aWNhbFByb3BzKSA9PiAoe1xuICAgICAgICBbcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiXTogLTksXG4gICAgICAgIHRleHRBbGlnbjogcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiLFxuICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgIFtJbm5lckRpdlZlcnRpY2FsXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IHByb3BzLmlzT3ZlciA/IFwidmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCIgOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCIsXG4gICAgICAgICAgICBbcHJvcHMubGFzdCA/IFwicmlnaHRcIiA6IFwibGVmdFwiXTogLTIsXG4gICAgICAgICAgICBkaXNwbGF5OiBwcm9wcy5pc0RyYWdnaW5nID8gXCJibG9ja1wiIDogXCJub25lXCIsXG4gICAgICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgICAgICBbQmFja2dyb3VuZENvbG9yRGl2XToge1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNSxcbiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmlzT3ZlclxuICAgICAgICAgICAgICAgICAgICA/IFwidmFyKC0tbWRjLXRoZW1lLXByaW1hcnkpXCJcbiAgICAgICAgICAgICAgICAgICAgOiBcInZhcigtLW1kYy10aGVtZS1zZWNvbmRhcnkpXCJcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH0pXG4pO1xuXG5pbnRlcmZhY2UgVmVydGljYWxQcm9wcyB7XG4gICAgZGVwdGg/OiBudW1iZXI7XG4gICAgb25Ecm9wKGl0ZW06IERyYWdTb3VyY2UpOiB2b2lkO1xuICAgIGxhc3Q/OiBib29sZWFuO1xuICAgIGlzVmlzaWJsZT86IGFueTtcbn1cblxuY29uc3QgVmVydGljYWwgPSAoeyBkZXB0aCwgbGFzdCwgb25Ecm9wLCBpc1Zpc2libGUgfTogVmVydGljYWxQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxEcm9wcGFibGUgb25Ecm9wPXtvbkRyb3B9IGlzVmlzaWJsZT17aXNWaXNpYmxlfT5cbiAgICAgICAgICAgIHsoeyBpc092ZXIsIGlzRHJhZ2dpbmcsIGRyb3AgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgcmVmPXtkcm9wfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgLyogRm9yIGRyb3B6b25lIGRlYnVnZ2luZzogYm9yZGVyOiBcIjFweCBzb2xpZCBibHVlXCIsKi9cbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiBcIjMwJVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgbWF4V2lkdGg6IFwiMTAwcHhcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgW2xhc3QgPyBcInJpZ2h0XCIgOiBcImxlZnRcIl06IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICB6SW5kZXg6IGlzRHJhZ2dpbmcgPyAxMDAwICsgKGRlcHRoIHx8IDApIDogLTFcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxPdXRlckRpdlZlcnRpY2FsIGlzT3Zlcj17aXNPdmVyfSBpc0RyYWdnaW5nPXtpc0RyYWdnaW5nfSBsYXN0PXtsYXN0fT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxJbm5lckRpdlZlcnRpY2FsPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCYWNrZ3JvdW5kQ29sb3JEaXYgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvSW5uZXJEaXZWZXJ0aWNhbD5cbiAgICAgICAgICAgICAgICAgICAgPC9PdXRlckRpdlZlcnRpY2FsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9Ecm9wcGFibGU+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFZlcnRpY2FsO1xuIl19 */");
-var Vertical = function Vertical(_ref2) {
-  var depth = _ref2.depth,
-    last = _ref2.last,
-    onDrop = _ref2.onDrop,
-    isVisible = _ref2.isVisible;
-  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
+import React from "react";
+import { Droppable } from "../Droppable.js";
+import { cn } from "@webiny/admin-ui";
+const OuterDivVertical = ({
+  isOver,
+  last,
+  isDragging
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn("absolute top-0 h-full w-[30%] z-10 bg-transparent", last ? "text-right -right-sm" : "text-left -left-sm")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("absolute w-md h-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", last ? "-right-sm" : "-left-sm", isDragging && "block")
+}, /*#__PURE__*/React.createElement("div", {
+  className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
+})));
+const Vertical = ({
+  depth,
+  last,
+  onDrop,
+  isVisible
+}) => {
+  return /*#__PURE__*/React.createElement(Droppable, {
     onDrop: onDrop,
     isVisible: isVisible
-  }, function (_ref3) {
-    var isOver = _ref3.isOver,
-      isDragging = _ref3.isDragging,
-      drop = _ref3.drop;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: drop,
-      style: (0, _defineProperty2.default)((0, _defineProperty2.default)({
-        /* For dropzone debugging: border: "1px solid blue",*/
-        width: "30%",
-        maxWidth: "100px",
-        height: "100%",
-        position: "absolute",
-        top: 0
-      }, last ? "right" : "left", 0), "zIndex", isDragging ? 1000 + (depth || 0) : -1)
-    }, /*#__PURE__*/_react.default.createElement(OuterDivVertical, {
-      isOver: isOver,
-      isDragging: isDragging,
-      last: last
-    }, /*#__PURE__*/_react.default.createElement(InnerDivVertical, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
-  });
+  }, ({
+    isOver,
+    isDragging,
+    drop
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: drop,
+    style: {
+      /* For dropzone debugging: border: "1px solid blue",*/
+      width: "30%",
+      maxWidth: "100px",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      [last ? "right" : "left"]: 0,
+      zIndex: isDragging ? 1000 + (depth || 0) : -1
+    }
+  }, /*#__PURE__*/React.createElement(OuterDivVertical, {
+    isOver: isOver,
+    isDragging: isDragging,
+    last: last
+  })));
 };
-var _default = exports.default = Vertical;
+export default Vertical;
 
 //# sourceMappingURL=Vertical.js.map

package/admin/components/DropZone/Vertical.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Droppable","_EMOTION_STRINGIFIED_CSS_ERROR__","InnerDivVertical","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","BackgroundColorDiv","OuterDivVertical","props","_defineProperty2","last","borderColor","isOver","isDragging","opacity","backgroundColor","Vertical","_ref2","depth","onDrop","isVisible","createElement","Droppable","_ref3","drop","ref","style","width","maxWidth","height","position","top","_default","exports"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/types\";\n\nconst InnerDivVertical = styled(\"div\")({\n    position: \"absolute\",\n    width: 10,\n    height: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    display: \"none\",\n    boxSizing: \"border-box\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = styled(\"div\")(\n    {\n        position: \"absolute\",\n        width: \"30%\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 10,\n        backgroundColor: \"transparent\"\n    },\n    (props: OuterDivVerticalProps) => ({\n        [props.last ? \"right\" : \"left\"]: -9,\n        textAlign: props.last ? \"right\" : \"left\",\n        // @ts-expect-error\n        [InnerDivVertical]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            [props.last ? \"right\" : \"left\"]: -2,\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-expect-error\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: any;\n}\n\nconst Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last}>\n                        <InnerDivVertical>\n                            <BackgroundColorDiv />\n                        </InnerDivVertical>\n                    </OuterDivVertical>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Droppable","cn","OuterDivVertical","isOver","last","isDragging","createElement","className","Vertical","depth","onDrop","isVisible","drop","ref","style","width","maxWidth","height","position","top","zIndex"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = ({ isOver, last, isDragging }: OuterDivVerticalProps) => (\n    <div\n        className={cn(\n            \"absolute top-0 h-full w-[30%] z-10 bg-transparent\",\n            last ? \"text-right -right-sm\" : \"text-left -left-sm\"\n        )}\n    >\n        <div\n            className={cn(\n                \"absolute w-md h-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\n                last ? \"-right-sm\" : \"-left-sm\",\n                isDragging && \"block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"w-full h-full opacity-50\",\n                    isOver ? \"bg-primary-muted\" : \"bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n}\n\nconst Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,SAAS;AAElB,SAASC,EAAE,QAAQ,kBAAkB;AAQrC,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAkC,CAAC,kBACzEN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,mDAAmD,EACnDG,IAAI,GAAG,sBAAsB,GAAG,oBACpC;AAAE,gBAEFL,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,yDAAyD,EACzDE,MAAM,GAAG,uBAAuB,GAAG,wBAAwB,EAC3DC,IAAI,GAAG,WAAW,GAAG,UAAU,EAC/BC,UAAU,IAAI,OAClB;AAAE,gBAEFN,KAAA,CAAAO,aAAA;EACIC,SAAS,EAAEN,EAAE,CACT,0BAA0B,EAC1BE,MAAM,GAAG,kBAAkB,GAAG,kBAClC;AAAE,CACL,CACA,CACJ,CACR;AASD,MAAMK,QAAQ,GAAGA,CAAC;EAAEC,KAAK;EAAEL,IAAI;EAAEM,MAAM;EAAEC;AAAyB,CAAC,KAAK;EACpE,oBACIZ,KAAA,CAAAO,aAAA,CAACN,SAAS;IAACU,MAAM,EAAEA,MAAO;IAACC,SAAS,EAAEA;EAAU,GAC3C,CAAC;IAAER,MAAM;IAAEE,UAAU;IAAEO;EAAK,CAAC,kBAC1Bb,KAAA,CAAAO,aAAA;IACIO,GAAG,EAAED,IAAK;IACVE,KAAK,EAAE;MACH;MACAC,KAAK,EAAE,KAAK;MACZC,QAAQ,EAAE,OAAO;MACjBC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACN,CAACf,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,CAAC;MAC5BgB,MAAM,EAAEf,UAAU,GAAG,IAAI,IAAII,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC;IAChD;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACJ,gBAAgB;IAACC,MAAM,EAAEA,MAAO;IAACE,UAAU,EAAEA,UAAW;IAACD,IAAI,EAAEA;EAAK,CAAE,CACtE,CAEF,CAAC;AAEpB,CAAC;AAED,eAAeI,QAAQ","ignoreList":[]}

package/admin/components/DropZone/index.d.ts

@@ -1,4 +1,4 @@
-import Center from "./Center";
-import Horizontal from "./Horizontal";
-import Vertical from "./Vertical";
+import Center from "./Center.js";
+import Horizontal from "./Horizontal.js";
+import Vertical from "./Vertical.js";
 export { Center, Horizontal, Vertical };

package/admin/components/DropZone/index.js

@@ -1,29 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Center", {
-  enumerable: true,
-  get: function get() {
-    return _Center.default;
-  }
-});
-Object.defineProperty(exports, "Horizontal", {
-  enumerable: true,
-  get: function get() {
-    return _Horizontal.default;
-  }
-});
-Object.defineProperty(exports, "Vertical", {
-  enumerable: true,
-  get: function get() {
-    return _Vertical.default;
-  }
-});
-var _Center = _interopRequireDefault(require("./Center"));
-var _Horizontal = _interopRequireDefault(require("./Horizontal"));
-var _Vertical = _interopRequireDefault(require("./Vertical"));
+import Center from "./Center.js";
+import Horizontal from "./Horizontal.js";
+import Vertical from "./Vertical.js";
+export { Center, Horizontal, Vertical };
 
 //# sourceMappingURL=index.js.map

package/admin/components/DropZone/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Center","_interopRequireDefault","require","_Horizontal","_Vertical"],"sources":["index.ts"],"sourcesContent":["import Center from \"./Center\";\nimport Horizontal from \"./Horizontal\";\nimport Vertical from \"./Vertical\";\n\nexport { Center, Horizontal, Vertical };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["Center","Horizontal","Vertical"],"sources":["index.ts"],"sourcesContent":["import Center from \"./Center.js\";\nimport Horizontal from \"./Horizontal.js\";\nimport Vertical from \"./Vertical.js\";\n\nexport { Center, Horizontal, Vertical };\n"],"mappings":"AAAA,OAAOA,MAAM;AACb,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AAEf,SAASF,MAAM,EAAEC,UAAU,EAAEC,QAAQ","ignoreList":[]}