@webiny/app-headless-cms 0.0.0-ee-vpcs.549378cf03

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,OAAO,EAAE,WADwB;EAEjCC,YAAY,EAAE,EAFmB;EAGjCC,OAAO,EAAE,MAHwB;EAIjCC,KAAK,EAAE,MAJ0B;EAKjCC,eAAe,EAAE,gCALgB;EAMjCC,YAAY,EAAE,EANmB;EAOjCC,SAAS,EAAE,YAPsB;EAQjCC,MAAM,EAAE,MARyB;EASjCC,OAAO,EAAE,CATwB;EAUjCC,UAAU,EAAE,eAVqB;EAWjC,WAAW;IACPD,OAAO,EAAE;EADF,CAXsB;EAcjC,gBAAgB;IACZP,YAAY,EAAE;EADF;AAdiB,CAAjB,CAApB;AAmBA,IAAMS,QAAQ,oBAAGX,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB,EAAjB,CAAd;AAEA,IAAMY,UAAU,oBAAGZ,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC7Ba,aAAa,EAAE,WADc;EAE7BC,UAAU,EAAE,MAFiB;EAG7BC,KAAK,EAAE;AAHsB,CAAjB,CAAhB;AAMA,IAAMC,gBAAgB,oBAAGhB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACnCiB,QAAQ,EAAE,EADyB;EAEnCF,KAAK,EAAE;AAF4B,CAAjB,CAAtB;AAKA,IAAMG,WAAW,oBAAGlB,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAC9BmB,WAAW,EAAE,EADiB;EAE9BJ,KAAK,EAAE;AAFuB,CAAjB,CAAjB;;AASA,IAAMK,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IACIC,gBADJ,GAGID,KAHJ,CACIC,gBADJ;EAAA,uBAGID,KAHJ,CAEIE,SAFJ;EAAA,IAEiBC,IAFjB,oBAEiBA,IAFjB;EAAA,IAEuBC,KAFvB,oBAEuBA,KAFvB;EAAA,IAE8BC,IAF9B,oBAE8BA,IAF9B;EAAA,IAEoCC,WAFpC,oBAEoCA,WAFpC;EAIA,oBACI,6BAAC,kBAAD;IAAW,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAR;MAAoBD,SAAS,EAAEC;IAA/B;EAAtB,GACK;IAAA,IAAGI,IAAH,QAAGA,IAAH;IAAA,oBACG;MACI,GAAG,EAAEA,IADT;MAEI,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAhB,CAFX;MAGI,iDAAwCsB,IAAxC,CAHJ;MAII,WAAW,EAAEF;IAJjB,gBAMI,6BAAC,cAAD,qBACI,6BAAC,WAAD,qBACI,6BAAC,UAAD;MAAM,IAAI,EAAEI;IAAZ,EADJ,CADJ,eAII,6BAAC,QAAD,qBACI,6BAAC,UAAD,QAAaD,KAAb,CADJ,eAEI,6BAAC,gBAAD,QAAmBE,WAAnB,CAFJ,CAJJ,CANJ,CADH;EAAA,CADL,CADJ;AAsBH,CA3BD;;AAgCO,IAAME,aAA2C,GAAG,SAA9CA,aAA8C,QAA0B;EAAA,IAAvBP,gBAAuB,SAAvBA,gBAAuB;;EACjF,IAAMQ,eAAe,GAAGC,gBAAA,CAAQC,MAAR,CAAwC,uBAAxC,CAAxB;;EAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKF,eAAe,CAACG,GAAhB,CAAoB,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAD;MACI,GAAG,EAAEA,WAAW,CAACC,KAAZ,CAAkBX,IAD3B;MAEI,SAAS,EAAEU,WAAW,CAACC,KAF3B;MAGI,gBAAgB,EAAEb;IAHtB,EAD4B;EAAA,CAA/B,CADL,CADJ;AAWH,CAdM"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const EditorBar: React.FC;
+export default EditorBar;

package/admin/components/ContentModelEditor/Header.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TopAppBar = require("@webiny/ui/TopAppBar");
+
+var _plugins = require("@webiny/app/plugins");
+
+var _emotion = require("emotion");
+
+var topBar = /*#__PURE__*/(0, _emotion.css)({
+  boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
+}, "label:topBar;");
+
+var EditorBar = function EditorBar() {
+  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, {
+    className: topBar,
+    fixed: true,
+    "data-testid": "cms-editor-top-bar"
+  }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
+    style: {
+      width: "50%"
+    },
+    alignEnd: true
+  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-left")), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
+    style: {
+      width: "50%"
+    },
+    alignEnd: true
+  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-right")));
+};
+
+var _default = EditorBar;
+exports.default = _default;

package/admin/components/ContentModelEditor/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAA,EAAI;EACfC,SAAS,EAAE;AADI,CAAJ,kBAAf;;AAIA,IAAMC,SAAmB,GAAG,SAAtBA,SAAsB,GAAM;EAC9B,oBACI,6BAAC,oBAAD;IAAW,SAAS,EAAEH,MAAtB;IAA8B,KAAK,MAAnC;IAAoC,eAAa;EAAjD,gBACI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,uCAAd,CADL,CADJ,eAKI,6BAAC,2BAAD;IAAkB,KAAK,EAAE;MAAED,KAAK,EAAE;IAAT,CAAzB;IAA2C,QAAQ;EAAnD,GACK,IAAAC,sBAAA,EAAc,wCAAd,CADL,CALJ,CADJ;AAWH,CAZD;;eAceF,S"}

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,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewTab = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _emotion = require("emotion");
+
+var _Elevation = require("@webiny/ui/Elevation");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _hooks = require("../../hooks");
+
+var _ContentEntryFormPreview = require("../ContentEntryForm/ContentEntryFormPreview");
+
+var _templateObject;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/tabs/preview");
+
+var formPreviewWrapper = /*#__PURE__*/(0, _emotion.css)({
+  padding: 40,
+  margin: 40,
+  boxSizing: "border-box"
+}, "label:formPreviewWrapper;");
+var style = {
+  noFieldsMessage: /*#__PURE__*/(0, _emotion.css)({
+    textAlign: "center"
+  }, "label:noFieldsMessage;")
+};
+
+var PreviewTab = function PreviewTab(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useModelEditor = (0, _hooks.useModelEditor)(),
+      data = _useModelEditor.data;
+
+  return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
+    z: 1,
+    className: formPreviewWrapper
+  }, data.fields && data.fields.length && activeTab ? /*#__PURE__*/_react.default.createElement(_ContentEntryFormPreview.ContentEntryFormPreview, {
+    contentModel: data
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: style.noFieldsMessage
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Before previewing the form, please add at least one field to the content model."])))));
+};
+
+exports.PreviewTab = PreviewTab;

package/admin/components/ContentModelEditor/PreviewTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","formPreviewWrapper","css","padding","margin","boxSizing","style","noFieldsMessage","textAlign","PreviewTab","activeTab","useModelEditor","data","fields","length"],"sources":["PreviewTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorContentTab } from \"~/types\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { ContentEntryFormPreview } from \"../ContentEntryForm/ContentEntryFormPreview\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/tabs/preview\");\n\nconst formPreviewWrapper = css({\n    padding: 40,\n    margin: 40,\n    boxSizing: \"border-box\"\n});\n\nconst style = {\n    noFieldsMessage: css({\n        textAlign: \"center\"\n    })\n};\n\nexport const PreviewTab: CmsEditorContentTab = ({ activeTab }) => {\n    const { data } = useModelEditor();\n\n    return (\n        <Elevation z={1} className={formPreviewWrapper}>\n            {data.fields && data.fields.length && activeTab ? (\n                <ContentEntryFormPreview contentModel={data} />\n            ) : (\n                <div className={style.noFieldsMessage}>\n                    {t`Before previewing the form, please add at least one field to the content model.`}\n                </div>\n            )}\n        </Elevation>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,uDAAR,CAAV;;AAEA,IAAMC,kBAAkB,gBAAG,IAAAC,YAAA,EAAI;EAC3BC,OAAO,EAAE,EADkB;EAE3BC,MAAM,EAAE,EAFmB;EAG3BC,SAAS,EAAE;AAHgB,CAAJ,8BAA3B;AAMA,IAAMC,KAAK,GAAG;EACVC,eAAe,eAAE,IAAAL,YAAA,EAAI;IACjBM,SAAS,EAAE;EADM,CAAJ;AADP,CAAd;;AAMO,IAAMC,UAA+B,GAAG,SAAlCA,UAAkC,OAAmB;EAAA,IAAhBC,SAAgB,QAAhBA,SAAgB;;EAC9D,sBAAiB,IAAAC,qBAAA,GAAjB;EAAA,IAAQC,IAAR,mBAAQA,IAAR;;EAEA,oBACI,6BAAC,oBAAD;IAAW,CAAC,EAAE,CAAd;IAAiB,SAAS,EAAEX;EAA5B,GACKW,IAAI,CAACC,MAAL,IAAeD,IAAI,CAACC,MAAL,CAAYC,MAA3B,IAAqCJ,SAArC,gBACG,6BAAC,gDAAD;IAAyB,YAAY,EAAEE;EAAvC,EADH,gBAGG;IAAK,SAAS,EAAEN,KAAK,CAACC;EAAtB,GACKT,CADL,mKAJR,CADJ;AAWH,CAdM"}

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/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ContentModelEditorProvider";
+export * from "./useModelEditor";

package/admin/components/ContentModelEditor/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+
+Object.keys(_ContentModelEditorProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ContentModelEditorProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ContentModelEditorProvider[key];
+    }
+  });
+});
+
+var _useModelEditor = require("./useModelEditor");
+
+Object.keys(_useModelEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModelEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useModelEditor[key];
+    }
+  });
+});

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ContentModelEditorProvider\";\nexport * from \"./useModelEditor\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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

@@ -0,0 +1 @@
+export declare function useModelEditor(): import("./ContentModelEditorProvider").ContentModelEditorProviderContext;

package/admin/components/ContentModelEditor/useModelEditor.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModelEditor = useModelEditor;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ContentModelEditorProvider = require("./ContentModelEditorProvider");
+
+function useModelEditor() {
+  var context = _react.default.useContext(_ContentModelEditorProvider.contentModelEditorContext);
+
+  if (!context) {
+    throw new Error("useContentModelEditor must be used within a ContentModelEditorProvider");
+  }
+
+  return context;
+}

package/admin/components/ContentModelEditor/useModelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useModelEditor","context","React","useContext","contentModelEditorContext","Error"],"sources":["useModelEditor.ts"],"sourcesContent":["import React from \"react\";\nimport { contentModelEditorContext } from \"./ContentModelEditorProvider\";\n\nexport function useModelEditor() {\n    const context = React.useContext(contentModelEditorContext);\n    if (!context) {\n        throw new Error(\"useContentModelEditor must be used within a ContentModelEditorProvider\");\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,SAASA,cAAT,GAA0B;EAC7B,IAAMC,OAAO,GAAGC,cAAA,CAAMC,UAAN,CAAiBC,qDAAjB,CAAhB;;EACA,IAAI,CAACH,OAAL,EAAc;IACV,MAAM,IAAII,KAAJ,CAAU,wEAAV,CAAN;EACH;;EAED,OAAOJ,OAAP;AACH"}

package/admin/components/DelayedOnChange.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+interface OnChangeCbCallable {
+    (value: string): void;
+}
+interface OnChangeCallable {
+    (value: string, cb?: OnChangeCbCallable): void;
+}
+interface ChildrenParams {
+    value: string;
+    onChange: OnChangeCallable;
+}
+interface DelayedOnChangeProps {
+    delay?: number;
+    value?: string;
+    onChange: OnChangeCallable;
+    onKeyDown?: (ev: React.SyntheticEvent) => void;
+    onBlur?: (ev: React.SyntheticEvent) => void;
+    children: (params: ChildrenParams) => React.ReactElement;
+}
+interface DelayedOnChangeState {
+    value?: string;
+}
+declare class DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {
+    static defaultProps: Partial<DelayedOnChangeProps>;
+    private delay;
+    readonly state: DelayedOnChangeState;
+    componentDidMount(): void;
+    private applyValue;
+    private onChange;
+    private changed;
+    render(): React.ReactNode;
+}
+export default DelayedOnChange;

package/admin/components/DelayedOnChange.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _excluded = ["children"];
+
+var DelayedOnChange = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DelayedOnChange, _React$Component);
+
+  var _super = (0, _createSuper2.default)(DelayedOnChange);
+
+  function DelayedOnChange() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, DelayedOnChange);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "delay", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      value: ""
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyValue", function (value) {
+      var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop.default;
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+
+      _this.props.onChange(value, callback);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
+      _this.setState({
+        value: value
+      }, _this.changed);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changed", function () {
+      _this.delay && clearTimeout(_this.delay);
+      _this.delay = null;
+      _this.delay = setTimeout(function () {
+        return _this.applyValue(_this.state.value);
+      }, _this.props.delay);
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(DelayedOnChange, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        value: this.props.value
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+        value: this.state.value,
+        onChange: this.onChange
+      });
+      var renderProp = typeof children === "function" ? children : false;
+      var child = renderProp ? renderProp(newProps) : /*#__PURE__*/React.cloneElement(children, newProps);
+      var props = (0, _objectSpread2.default)({}, child.props);
+      var realOnKeyDown = props.onKeyDown || _noop.default;
+      var realOnBlur = props.onBlur || _noop.default; // Need to apply value if input lost focus
+
+      props.onBlur = function (ev) {
+        ev.persist();
+
+        _this2.applyValue(ev.target.value, function () {
+          return realOnBlur(ev);
+        });
+      }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+
+
+      props.onKeyDown = function (ev) {
+        ev.persist();
+
+        if (ev.key === "Tab") {
+          _this2.applyValue(ev.target.value, function () {
+            return realOnKeyDown(ev);
+          });
+        } else if (ev.key === "Enter" && props["data-on-enter"]) {
+          _this2.applyValue(ev.target.value, function () {
+            return realOnKeyDown(ev);
+          });
+        } else {
+          realOnKeyDown(ev);
+        }
+      };
+
+      return /*#__PURE__*/React.cloneElement(child, props);
+    }
+  }]);
+  return DelayedOnChange;
+}(React.Component);
+
+(0, _defineProperty2.default)(DelayedOnChange, "defaultProps", {
+  delay: 400
+});
+var _default = DelayedOnChange;
+exports.default = _default;

package/admin/components/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DelayedOnChange","value","callback","noop","delay","clearTimeout","props","onChange","setState","changed","setTimeout","applyValue","state","children","other","newProps","renderProp","child","React","cloneElement","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","Component"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import * as React from \"react\";\nimport noop from \"lodash/noop\";\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCbCallable {\n    (value: string): void;\n}\ninterface OnChangeCallable {\n    (value: string, cb?: OnChangeCbCallable): void;\n}\ninterface ChildrenParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface DelayedOnChangeProps {\n    delay?: number;\n    value?: string;\n    onChange: OnChangeCallable;\n    onKeyDown?: (ev: React.SyntheticEvent) => void;\n    onBlur?: (ev: React.SyntheticEvent) => void;\n    children: (params: ChildrenParams) => React.ReactElement;\n}\ninterface DelayedOnChangeState {\n    value?: string;\n}\nclass DelayedOnChange extends React.Component<DelayedOnChangeProps, DelayedOnChangeState> {\n    static defaultProps: Partial<DelayedOnChangeProps> = {\n        delay: 400\n    };\n\n    private delay: number | null = null;\n\n    public override readonly state: DelayedOnChangeState = {\n        value: \"\"\n    };\n\n    public override componentDidMount() {\n        this.setState({ value: this.props.value });\n    }\n\n    private applyValue = (value: any, callback: OnChangeCbCallable = noop): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.props.onChange(value, callback);\n    };\n\n    private onChange = (value: string): void => {\n        this.setState({ value }, this.changed);\n    };\n\n    private changed = (): void => {\n        this.delay && clearTimeout(this.delay);\n        this.delay = null;\n        this.delay = setTimeout(\n            () => this.applyValue(this.state.value),\n            this.props.delay\n        ) as unknown as number;\n    };\n\n    public override render(): React.ReactNode {\n        const { children, ...other } = this.props;\n        const newProps: Omit<DelayedOnChangeProps, \"children\"> = {\n            ...other,\n            value: this.state.value,\n            onChange: this.onChange\n        };\n\n        const renderProp = typeof children === \"function\" ? children : false;\n        const child = renderProp\n            ? renderProp(newProps as Required<DelayedOnChangeProps>)\n            : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n        const props = { ...child.props };\n        const realOnKeyDown = props.onKeyDown || noop;\n        const realOnBlur = props.onBlur || noop;\n\n        // Need to apply value if input lost focus\n        props.onBlur = (ev: React.SyntheticEvent) => {\n            ev.persist();\n            this.applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n        };\n\n        // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n        props.onKeyDown = (ev: React.KeyboardEvent) => {\n            ev.persist();\n            if (ev.key === \"Tab\") {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n                this.applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n            } else {\n                realOnKeyDown(ev);\n            }\n        };\n\n        return React.cloneElement(child, props);\n    }\n}\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/admin/components/Dialog.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
+export * from "@webiny/ui/Dialog";
+export declare const Dialog: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, Pick<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, keyof import("@webiny/ui/Dialog").DialogProps>, object>;

package/admin/components/Dialog.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Dialog: true
+};
+exports.Dialog = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Dialog = require("@webiny/ui/Dialog");
+
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});
+var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  label: "Dialog",
+  target: "e1q5k1p00"
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+exports.Dialog = Dialog;

package/admin/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n    .mdc-dialog__surface {\n        width: 600px;\n        min-width: 600px;\n        overflow: initial;\n    }\n\n    .mdc-dialog__content {\n        overflow: initial !important;\n        .mdc-list:first-of-type {\n            padding: 0;\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA;;AACA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAH,EAAUC,cAAV;EAAA;EAAA;AAAA,8JAAZ"}

package/admin/components/DragPreview.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const DragPreview: React.FC;
+export default DragPreview;

package/admin/components/DragPreview.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDnd = require("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; // TODO @ts-refactor figure out better type
+
+    dragPreviewRef.style["-webkit-transform"] = transform;
+  };
+};
+
+var DragPreview = function DragPreview() {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      dragHelperOpacity = _useState2[0],
+      setDragHelperOpacity = _useState2[1];
+
+  var _useDragLayer = (0, _reactDnd.useDragLayer)(function (initialMonitor) {
+    /**
+     * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.
+     */
+    var monitor = initialMonitor;
+
+    if (!subscribedToOffsetChange) {
+      monitor.subscribeToOffsetChange(onOffsetChange(monitor));
+      subscribedToOffsetChange = true;
+    }
+
+    return {
+      isDragging: monitor.isDragging()
+    };
+  }),
+      isDragging = _useDragLayer.isDragging;
+
+  (0, _react.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.
+
+  (0, _react.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.default.createElement("div", {
+    style: {
+      position: "fixed",
+      pointerEvents: "none",
+      zIndex: 1001,
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: function ref(el) {
+      return dragPreviewRef = el;
+    },
+    style: {
+      transition: "opacity .25s ease-in-out",
+      display: "block",
+      opacity: dragHelperOpacity
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 30,
+      height: 30,
+      backgroundColor: "var(--mdc-theme-primary)",
+      borderRadius: "50%"
+    }
+  })));
+};
+
+var _default = DragPreview;
+exports.default = _default;

package/admin/components/DragPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","getClientOffset","transform","x","y","style","DragPreview","useState","dragHelperOpacity","setDragHelperOpacity","useDragLayer","initialMonitor","subscribeToOffsetChange","isDragging","useEffect","setTimeout","position","pointerEvents","zIndex","left","top","width","height","el","transition","display","opacity","backgroundColor","borderRadius"],"sources":["DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport { DragSourceMonitor } from \"react-dnd/lib/interfaces/monitors\";\nimport { DragSourceMonitorImpl } from \"react-dnd/lib/common/DragSourceMonitorImpl\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type\n    dragPreviewRef.style[\"-webkit-transform\" as any] = transform;\n};\n\nconst DragPreview: React.FC = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{\n                position: \"fixed\",\n                pointerEvents: \"none\",\n                zIndex: 1001,\n                left: 0,\n                top: 0,\n                width: \"100%\",\n                height: \"100%\"\n            }}\n        >\n            <div\n                ref={el => (dragPreviewRef = el)}\n                style={{\n                    transition: \"opacity .25s ease-in-out\",\n                    display: \"block\",\n                    opacity: dragHelperOpacity\n                }}\n            >\n                <div\n                    style={{\n                        width: 30,\n                        height: 30,\n                        backgroundColor: \"var(--mdc-theme-primary)\",\n                        borderRadius: \"50%\"\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAIA,IAAIA,wBAAwB,GAAG,KAA/B;AAEA,IAAIC,cAAqC,GAAG,IAA5C;;AAEA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,OAAD;EAAA,OAAgC,YAAM;IACzD,IAAI,CAACF,cAAL,EAAqB;MACjB;IACH;;IAED,IAAMG,MAAM,GAAGD,OAAO,CAACE,eAAR,EAAf;;IACA,IAAI,CAACD,MAAL,EAAa;MACT;IACH;;IAED,IAAME,SAAS,uBAAgBF,MAAM,CAACG,CAAP,GAAW,EAA3B,iBAAoCH,MAAM,CAACI,CAAP,GAAW,EAA/C,QAAf;IACAP,cAAc,CAACQ,KAAf,CAAqB,WAArB,IAAoCH,SAApC,CAXyD,CAYzD;;IACAL,cAAc,CAACQ,KAAf,CAAqB,mBAArB,IAAmDH,SAAnD;EACH,CAdsB;AAAA,CAAvB;;AAgBA,IAAMI,WAAqB,GAAG,SAAxBA,WAAwB,GAAM;EAChC,gBAAkD,IAAAC,eAAA,EAAS,CAAT,CAAlD;EAAA;EAAA,IAAOC,iBAAP;EAAA,IAA0BC,oBAA1B;;EACA,oBAAuB,IAAAC,sBAAA,EAAa,UAAAC,cAAc,EAAI;IAClD;AACR;AACA;IACQ,IAAMZ,OAAO,GAAGY,cAAhB;;IACA,IAAI,CAACf,wBAAL,EAA+B;MAC3BG,OAAO,CAACa,uBAAR,CAAgCd,cAAc,CAACC,OAAD,CAA9C;MACAH,wBAAwB,GAAG,IAA3B;IACH;;IAED,OAAO;MACHiB,UAAU,EAAEd,OAAO,CAACc,UAAR;IADT,CAAP;EAGH,CAbsB,CAAvB;EAAA,IAAQA,UAAR,iBAAQA,UAAR;;EAeA,IAAAC,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACTlB,wBAAwB,GAAG,KAA3B;MACAC,cAAc,GAAG,IAAjB;IACH,CAHD;EAIH,CALD,EAKG,EALH,EAjBgC,CAwBhC;EACA;EACA;;EACA,IAAAiB,gBAAA,EAAU,YAAM;IACZ,IAAID,UAAJ,EAAgB;MACZE,UAAU,CAAC,YAAM;QACbN,oBAAoB,CAACI,UAAU,GAAG,CAAH,GAAO,CAAlB,CAApB;MACH,CAFS,EAEP,GAFO,CAAV;IAGH,CAJD,MAIO;MACHJ,oBAAoB,CAAC,CAAD,CAApB;IACH;EACJ,CARD,EAQG,CAACI,UAAD,CARH;;EAUA,IAAI,CAACA,UAAL,EAAiB;IACb,OAAO,IAAP;EACH;;EAED,IAAI,CAACA,UAAL,EAAiB;IACb,OAAO,IAAP;EACH;;EAED,oBACI;IACI,KAAK,EAAE;MACHG,QAAQ,EAAE,OADP;MAEHC,aAAa,EAAE,MAFZ;MAGHC,MAAM,EAAE,IAHL;MAIHC,IAAI,EAAE,CAJH;MAKHC,GAAG,EAAE,CALF;MAMHC,KAAK,EAAE,MANJ;MAOHC,MAAM,EAAE;IAPL;EADX,gBAWI;IACI,GAAG,EAAE,aAAAC,EAAE;MAAA,OAAK1B,cAAc,GAAG0B,EAAtB;IAAA,CADX;IAEI,KAAK,EAAE;MACHC,UAAU,EAAE,0BADT;MAEHC,OAAO,EAAE,OAFN;MAGHC,OAAO,EAAElB;IAHN;EAFX,gBAQI;IACI,KAAK,EAAE;MACHa,KAAK,EAAE,EADJ;MAEHC,MAAM,EAAE,EAFL;MAGHK,eAAe,EAAE,0BAHd;MAIHC,YAAY,EAAE;IAJX;EADX,EARJ,CAXJ,CADJ;AA+BH,CA5ED;;eA6EetB,W"}

package/admin/components/Draggable.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactElement } from "react";
+import { ConnectDragSource } from "react-dnd";
+interface DraggableChildrenFunctionParams {
+    isDragging: boolean;
+    drag: ConnectDragSource;
+}
+export interface DraggableChildrenFunction {
+    (params: DraggableChildrenFunctionParams): ReactElement;
+}
+export interface DraggableProps {
+    children: DraggableChildrenFunction;
+    beginDrag?: any;
+    endDrag?: any;
+    target?: string[];
+}
+declare const MemoizedDraggable: React.FC<DraggableProps>;
+export default MemoizedDraggable;