@webiny/app-headless-cms 0.0.0-mt-1

package/admin/components/ContentModelEditor/Editor.js

@@ -0,0 +1,138 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { useRef, useState } from "react";
+import { Prompt } from "@webiny/react-router";
+import styled from "@emotion/styled";
+import { css } from "emotion";
+import { i18n } from "@webiny/app/i18n";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
+import { Icon } from "@webiny/ui/Icon";
+import { Typography } from "@webiny/ui/Typography";
+import { Tab, Tabs } from "@webiny/ui/Tabs";
+import { ReactComponent as FormIcon } from "@svgr/webpack!./icons/round-assignment-24px.svg";
+import { FieldsSidebar } from "./FieldsSidebar";
+import { FieldEditor } from "../FieldEditor";
+import { PreviewTab } from "./PreviewTab";
+import Header from "./Header";
+import DragPreview from "../DragPreview";
+import { useContentModelEditor } from "./useContentModelEditor";
+var t = i18n.ns("app-headless-cms/admin/editor");
+var prompt = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["There are some unsaved changes! Are you sure you want to navigate away and discard all changes?"])));
+var ContentContainer = /*#__PURE__*/styled("div", {
+  target: "epn2fgg0",
+  label: "ContentContainer"
+})({
+  paddingTop: 65
+});
+export var EditContainer = /*#__PURE__*/styled("div", {
+  target: "epn2fgg1",
+  label: "EditContainer"
+})({
+  padding: 40,
+  position: "relative"
+});
+var LeftBarTitle = /*#__PURE__*/styled("div", {
+  target: "epn2fgg2",
+  label: "LeftBarTitle"
+})({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  display: "flex",
+  alignItems: "center",
+  padding: 25,
+  color: "var(--mdc-theme-on-surface)"
+});
+var titleIcon = /*#__PURE__*/css({
+  height: 24,
+  marginRight: 15,
+  color: "var(--mdc-theme-primary)"
+}, "label:titleIcon;");
+var LeftBarFieldList = /*#__PURE__*/styled("div", {
+  target: "epn2fgg3",
+  label: "LeftBarFieldList"
+})({
+  padding: 40,
+  overflow: "auto",
+  height: "calc(100vh - 250px)"
+});
+var formTabs = /*#__PURE__*/css({
+  "&.webiny-ui-tabs": {
+    ".webiny-ui-tabs__tab-bar": {
+      backgroundColor: "var(--mdc-theme-surface)"
+    }
+  }
+}, "label:formTabs;");
+export var Editor = function Editor() {
+  var _useContentModelEdito = useContentModelEditor(),
+      data = _useContentModelEdito.data,
+      setData = _useContentModelEdito.setData,
+      isPristine = _useContentModelEdito.isPristine;
+
+  var tabsRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveTabIndex = _useState2[1];
+
+  var onChange = function onChange(_ref) {
+    var fields = _ref.fields,
+        layout = _ref.layout;
+    setData(function (data) {
+      return _objectSpread(_objectSpread({}, data), {}, {
+        fields: fields,
+        layout: layout
+      });
+    });
+  };
+
+  if (!data) {
+    return /*#__PURE__*/React.createElement(CircularProgress, {
+      label: "Loading content model..."
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content-model-editor"
+  }, /*#__PURE__*/React.createElement(Prompt, {
+    when: !isPristine,
+    message: prompt
+  }), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(LeftBarTitle, null, /*#__PURE__*/React.createElement(Icon, {
+    className: titleIcon,
+    icon: /*#__PURE__*/React.createElement(FormIcon, null)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    use: "headline6"
+  }, "Fields")), /*#__PURE__*/React.createElement(LeftBarFieldList, null, /*#__PURE__*/React.createElement(FieldsSidebar, {
+    onFieldDragStart: function onFieldDragStart() {
+      if (tabsRef.current) {
+        tabsRef.current.switchTab(0);
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(RightPanel, {
+    span: 8
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    className: formTabs,
+    ref: tabsRef,
+    onActivate: function onActivate(e) {
+      return setActiveTabIndex(e);
+    }
+  }, /*#__PURE__*/React.createElement(Tab, {
+    label: "Edit",
+    "data-testid": "cms.editor.tab.edit"
+  }, /*#__PURE__*/React.createElement(EditContainer, null, /*#__PURE__*/React.createElement(FieldEditor, {
+    fields: data.fields,
+    layout: data.layout,
+    onChange: onChange
+  }))), /*#__PURE__*/React.createElement(Tab, {
+    label: "Preview",
+    "data-testid": "cms.editor.tab.preview"
+  }, /*#__PURE__*/React.createElement(PreviewTab, {
+    activeTab: activeTabIndex === 1
+  })))))), /*#__PURE__*/React.createElement(DragPreview, null));
+};

package/admin/components/ContentModelEditor/FieldsSidebar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const FieldsSidebar: ({ onFieldDragStart }: {
+    onFieldDragStart: any;
+}) => JSX.Element;

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { plugins } from "@webiny/plugins";
+import styled from "@emotion/styled";
+import { Icon } from "@webiny/ui/Icon";
+import Draggable from "../Draggable";
+var FieldContainer = /*#__PURE__*/styled("div", {
+  target: "e1s2p6i00",
+  label: "FieldContainer"
+})({
+  padding: "10px 15px",
+  marginBottom: 20,
+  display: "flex",
+  width: "100%",
+  backgroundColor: "var(--mdc-theme-on-background)",
+  borderRadius: 15,
+  boxSizing: "border-box",
+  cursor: "grab",
+  opacity: 1,
+  transition: "opacity 225ms",
+  "&:hover": {
+    opacity: 0.8
+  },
+  "&:last-child": {
+    marginBottom: 0
+  }
+});
+var FileInfo = /*#__PURE__*/styled("div", {
+  target: "e1s2p6i01",
+  label: "FileInfo"
+})({});
+var FieldLabel = /*#__PURE__*/styled("div", {
+  target: "e1s2p6i02",
+  label: "FieldLabel"
+})({
+  textTransform: "uppercase",
+  lineHeight: "145%",
+  color: "var(--mdc-theme-on-surface)"
+});
+var FieldDescription = /*#__PURE__*/styled("div", {
+  target: "e1s2p6i03",
+  label: "FieldDescription"
+})({
+  fontSize: 14,
+  color: "var(--mdc-theme-text-secondary-on-background)"
+});
+var FieldHandle = /*#__PURE__*/styled("div", {
+  target: "e1s2p6i04",
+  label: "FieldHandle"
+})({
+  marginRight: 15,
+  color: "var(--mdc-theme-on-surface)"
+});
+
+var Field = function Field(_ref) {
+  var onFieldDragStart = _ref.onFieldDragStart,
+      _ref$fieldType = _ref.fieldType,
+      type = _ref$fieldType.type,
+      label = _ref$fieldType.label,
+      icon = _ref$fieldType.icon,
+      description = _ref$fieldType.description;
+  return /*#__PURE__*/React.createElement(Draggable, {
+    beginDrag: {
+      type: "newField",
+      fieldType: type
+    }
+  }, function (_ref2) {
+    var drag = _ref2.drag;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: drag,
+      style: {
+        marginBottom: 10
+      },
+      "data-testid": "cms-editor-fields-field-".concat(type),
+      onDragStart: onFieldDragStart
+    }, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(FieldHandle, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    })), /*#__PURE__*/React.createElement(FileInfo, null, /*#__PURE__*/React.createElement(FieldLabel, null, label), /*#__PURE__*/React.createElement(FieldDescription, null, description))));
+  });
+};
+
+export var FieldsSidebar = function FieldsSidebar(_ref3) {
+  var onFieldDragStart = _ref3.onFieldDragStart;
+  var fieldTypePlugin = plugins.byType("cms-editor-field-type");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: fieldPlugin.field.type,
+      fieldType: fieldPlugin.field,
+      onFieldDragStart: onFieldDragStart
+    });
+  }));
+};

package/admin/components/ContentModelEditor/Header.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function EditorBar(): JSX.Element;

package/admin/components/ContentModelEditor/Header.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { TopAppBar, TopAppBarSection } from "@webiny/ui/TopAppBar";
+import { renderPlugins } from "@webiny/app/plugins";
+import { css } from "emotion";
+var topBar = /*#__PURE__*/css({
+  boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
+}, "label:topBar;");
+export default function EditorBar() {
+  return /*#__PURE__*/React.createElement(TopAppBar, {
+    className: topBar,
+    fixed: true,
+    "data-testid": "cms-editor-top-bar"
+  }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+    style: {
+      width: "50%"
+    },
+    alignEnd: true
+  }, renderPlugins("content-model-editor-default-bar-left")), /*#__PURE__*/React.createElement(TopAppBarSection, {
+    style: {
+      width: "50%"
+    },
+    alignEnd: true
+  }, renderPlugins("content-model-editor-default-bar-right")));
+}

package/admin/components/ContentModelEditor/PreviewTab.d.ts

@@ -0,0 +1,2 @@
+import { CmsEditorContentTab } from "../../../types";
+export declare const PreviewTab: CmsEditorContentTab;

package/admin/components/ContentModelEditor/PreviewTab.js

@@ -0,0 +1,36 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from "react";
+import { css } from "emotion";
+import { Elevation } from "@webiny/ui/Elevation";
+import { i18n } from "@webiny/app/i18n";
+import { useContentModelEditor } from "./useContentModelEditor";
+import { ContentEntryFormPreview } from "../ContentEntryForm/ContentEntryFormPreview";
+var t = i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
+var formPreviewWrapper = /*#__PURE__*/css({
+  padding: 40,
+  margin: 40,
+  boxSizing: "border-box"
+}, "label:formPreviewWrapper;");
+var style = {
+  noFieldsMessage: /*#__PURE__*/css({
+    textAlign: "center"
+  }, "label:noFieldsMessage;")
+};
+export var PreviewTab = function PreviewTab(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useContentModelEdito = useContentModelEditor(),
+      data = _useContentModelEdito.data;
+
+  return /*#__PURE__*/React.createElement(Elevation, {
+    z: 1,
+    className: formPreviewWrapper
+  }, data.fields && data.fields.length && activeTab ? /*#__PURE__*/React.createElement(ContentEntryFormPreview, {
+    contentModel: data
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: style.noFieldsMessage
+  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Before previewing the form, please add at least one field to the content model."])))));
+};

package/admin/components/ContentModelEditor/icons/round-assignment-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1zm3-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1z"/>
+</svg>

package/admin/components/ContentModelEditor/icons/round-drag_indicator-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+</svg>

package/admin/components/ContentModelEditor/useContentModelEditor.d.ts

@@ -0,0 +1 @@
+export declare function useContentModelEditor(): import("./Context").Context;

package/admin/components/ContentModelEditor/useContentModelEditor.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { contentModelEditorContext } from "./Context";
+export function useContentModelEditor() {
+  var context = React.useContext(contentModelEditorContext);
+
+  if (!context) {
+    throw new Error("useContentModelEditor must be used within a ContentModelEditorProvider");
+  }
+
+  return context;
+}

package/admin/components/DragPreview.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DragPreview(): JSX.Element;

package/admin/components/DragPreview.js

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from "react";
+import { useDragLayer } from "react-dnd";
+var subscribedToOffsetChange = false;
+var dragPreviewRef = null;
+
+var onOffsetChange = function onOffsetChange(monitor) {
+  return function () {
+    if (!dragPreviewRef) {
+      return;
+    }
+
+    var offset = monitor.getClientOffset();
+
+    if (!offset) {
+      return;
+    }
+
+    var transform = "translate(".concat(offset.x - 15, "px, ").concat(offset.y - 15, "px)");
+    dragPreviewRef.style["transform"] = transform;
+    dragPreviewRef.style["-webkit-transform"] = transform;
+  };
+};
+
+export default function DragPreview() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      dragHelperOpacity = _useState2[0],
+      setDragHelperOpacity = _useState2[1];
+
+  var _useDragLayer = useDragLayer(function (monitor) {
+    if (!subscribedToOffsetChange) {
+      // @ts-ignore
+      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+      subscribedToOffsetChange = true;
+    }
+
+    return {
+      isDragging: monitor.isDragging()
+    };
+  }),
+      isDragging = _useDragLayer.isDragging;
+
+  useEffect(function () {
+    return function () {
+      subscribedToOffsetChange = false;
+      dragPreviewRef = null;
+    };
+  }, []); // We track the value of "isDragging" and apply opacity=1 (after 100ms), when it switches to true.
+  // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it
+  // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.
+
+  useEffect(function () {
+    if (isDragging) {
+      setTimeout(function () {
+        setDragHelperOpacity(isDragging ? 1 : 0);
+      }, 100);
+    } else {
+      setDragHelperOpacity(0);
+    }
+  }, [isDragging]);
+
+  if (!isDragging) {
+    return null;
+  }
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "fixed",
+      pointerEvents: "none",
+      zIndex: 1001,
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: function ref(el) {
+      return dragPreviewRef = el;
+    },
+    style: {
+      transition: "opacity .25s ease-in-out",
+      display: "block",
+      opacity: dragHelperOpacity
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: "var(--mdc-theme-primary)",
+      borderRadius: "50%"
+    }
+  })));
+}

package/admin/components/Draggable.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactElement } from "react";
+import { ConnectDragSource } from "react-dnd";
+export declare type DraggableChildrenFunction = (params: {
+    isDragging: boolean;
+    drag: ConnectDragSource;
+}) => ReactElement;
+export declare type DraggableProps = {
+    children: DraggableChildrenFunction;
+    beginDrag?: any;
+    endDrag?: any;
+    target?: string[];
+};
+declare const Draggable: React.MemoExoticComponent<(props: DraggableProps) => JSX.Element>;
+export default Draggable;

package/admin/components/Draggable.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+import { useDrag, DragPreviewImage } from "react-dnd";
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+var Draggable = /*#__PURE__*/React.memo(function (props) {
+  var children = props.children,
+      beginDrag = props.beginDrag,
+      endDrag = props.endDrag,
+      target = props.target;
+
+  var _useDrag = useDrag({
+    item: {
+      type: "element",
+      target: target
+    },
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    },
+    begin: function begin(monitor) {
+      if (typeof beginDrag === "function") {
+        return beginDrag(props, monitor);
+      }
+
+      return beginDrag;
+    },
+    end: function end(item, monitor) {
+      if (typeof endDrag === "function") {
+        return endDrag(item, monitor);
+      }
+
+      return endDrag;
+    }
+  }),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      isDragging = _useDrag2[0].isDragging,
+      drag = _useDrag2[1],
+      preview = _useDrag2[2];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragPreviewImage, {
+    connect: preview,
+    src: emptyImage
+  }), children({
+    isDragging: isDragging,
+    drag: drag
+  }));
+});
+export default Draggable;

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from "react";
+import { DragSource } from "../FieldEditor/FieldEditorContext";
+declare type Props = {
+    type?: string;
+    onDrop(item: DragSource): void;
+    children: React.ReactNode;
+    active?: boolean;
+    highlight?: boolean;
+    style?: CSSProperties;
+};
+export default function Center({ onDrop, children, style }: Props): JSX.Element;
+export {};

package/admin/components/DropZone/Center.js

@@ -0,0 +1,60 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React from "react";
+import styled from "@emotion/styled";
+import Droppable from "./../Droppable";
+// @ts-ignore
+var Container = /*#__PURE__*/styled("div", {
+  target: "e14zhyp10",
+  label: "Container"
+})(function (_ref) {
+  var isOver = _ref.isOver;
+  return {
+    backgroundColor: "transparent",
+    boxSizing: "border-box",
+    height: "100%",
+    minHeight: 100,
+    position: "relative",
+    userSelect: "none",
+    width: "100%",
+    border: isOver ? "2px dashed var(--mdc-theme-primary)" : "2px dashed var(--mdc-theme-secondary)",
+    opacity: 1
+  };
+}); // @ts-ignore
+
+var Add = /*#__PURE__*/styled("div", {
+  target: "e14zhyp11",
+  label: "Add"
+})(function (_ref2) {
+  var isOver = _ref2.isOver;
+  return {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%,-50%)",
+    margin: 0,
+    color: isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
+  };
+});
+export default function Center(_ref3) {
+  var onDrop = _ref3.onDrop,
+      children = _ref3.children,
+      style = _ref3.style;
+  return /*#__PURE__*/React.createElement(Droppable, {
+    onDrop: onDrop
+  }, function (_ref4) {
+    var isOver = _ref4.isOver,
+        drop = _ref4.drop;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: drop,
+      style: _objectSpread({
+        width: "100%",
+        height: "100%"
+      }, style),
+      "data-testid": "cms-editor-first-field-area"
+    }, /*#__PURE__*/React.createElement(Container, {
+      isOver: isOver
+    }, /*#__PURE__*/React.createElement(Add, {
+      isOver: isOver
+    }, children)));
+  });
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DragSource } from "../FieldEditor/FieldEditorContext";
+declare type HorizontalProps = {
+    onDrop(item: DragSource): void;
+    last?: boolean;
+    isVisible?: any;
+};
+declare const Horizontal: ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => JSX.Element;
+export default Horizontal;

package/admin/components/DropZone/Horizontal.js

@@ -0,0 +1,83 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["last", "onDrop", "isVisible"];
+import React from "react";
+import styled from "@emotion/styled";
+import Droppable from "../Droppable";
+var InnerDiv = /*#__PURE__*/styled("div", {
+  target: "e1uuull90",
+  label: "InnerDiv"
+})({
+  height: 15,
+  width: "100%",
+  zIndex: 3,
+  borderRadius: 0,
+  boxSizing: "border-box",
+  display: "none",
+  border: "1px dashed black",
+  borderSpacing: 5
+});
+var BackgroundColorDiv = /*#__PURE__*/styled("div", {
+  target: "e1uuull91",
+  label: "BackgroundColorDiv"
+})({
+  width: "100%",
+  height: "100%"
+});
+var OuterDiv = /*#__PURE__*/styled("div", {
+  target: "e1uuull92",
+  label: "OuterDiv"
+})({
+  margin: 0,
+  padding: 0,
+  width: "calc(100% + 2px)",
+  zIndex: 10,
+  backgroundColor: "transparent",
+  position: "absolute",
+  display: "flex",
+  justifyContent: "center"
+}, function (props) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, props.last ? "bottom" : "top", -15), _defineProperty(_ref, InnerDiv, _defineProperty({
+    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)"
+  })), _ref;
+});
+
+var Horizontal = function Horizontal(_ref2) {
+  var last = _ref2.last,
+      onDrop = _ref2.onDrop,
+      isVisible = _ref2.isVisible,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Droppable, {
+    onDrop: onDrop,
+    isVisible: isVisible
+  }, function (_ref3) {
+    var _ref4;
+
+    var isOver = _ref3.isOver,
+        isDragging = _ref3.isDragging,
+        drop = _ref3.drop;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: drop,
+      "data-testid": rest["data-testid"],
+      style: (_ref4 = {
+        /* For dropzone debugging: border: "1px solid blue",*/
+        height: "15px",
+        width: "100%",
+        position: "absolute"
+      }, _defineProperty(_ref4, last ? "bottom" : "top", 0), _defineProperty(_ref4, "left", 0), _defineProperty(_ref4, "zIndex", isDragging ? 1000 : -1), _ref4)
+    }, /*#__PURE__*/React.createElement(OuterDiv, {
+      isOver: isOver,
+      isDragging: isDragging,
+      last: last
+    }, /*#__PURE__*/React.createElement(InnerDiv, null, /*#__PURE__*/React.createElement(BackgroundColorDiv, null))));
+  });
+};
+
+export default Horizontal;