@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.13771d80a8

package/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.js

@@ -0,0 +1,183 @@
+"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.ReferencesDialog = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _DialogHeader = require("./dialog/DialogHeader");
+var _Search = require("./Search");
+var _Entry = require("./Entry");
+var _Dialog = require("../../../../../components/Dialog");
+var _Button = require("@webiny/ui/Button");
+var _appAdmin = require("@webiny/app-admin");
+var _utils = require("@webiny/utils");
+var _Dialog2 = require("./dialog/Dialog");
+var _Loader = require("./Loader");
+var _useEntries2 = require("../hooks/useEntries");
+var _Entries = require("./Entries");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "er576qx0",
+  label: "Container"
+})({
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "20px"
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "er576qx1",
+  label: "Content"
+})({
+  display: "flex",
+  flex: "1",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  minHeight: "100px",
+  boxSizing: "border-box",
+  padding: "20px 0 20px 20px",
+  backgroundColor: "var(--mdc-theme-background)",
+  border: "1px solid var(--mdc-theme-on-background)",
+  overflowX: "hidden"
+});
+var DialogContent = /*#__PURE__*/(0, _styled.default)(_Dialog.DialogContent, {
+  target: "er576qx2",
+  label: "DialogContent"
+})({
+  padding: "0 !important"
+});
+var isSelected = function isSelected(entryId, values) {
+  if (!entryId) {
+    return false;
+  }
+  return values.some(function (value) {
+    var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
+      valueEntryId = _parseIdentifier.id;
+    return entryId === valueEntryId;
+  });
+};
+var ReferencesDialog = function ReferencesDialog(props) {
+  var contentModel = props.contentModel,
+    onDialogClose = props.onDialogClose,
+    storeValues = props.storeValues,
+    initialValues = props.values,
+    multiple = props.multiple;
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var _useState = (0, _react.useState)(initialValues || []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    values = _useState2[0],
+    setValues = _useState2[1];
+
+  /**
+   * On change needs to handle the adding or removing of a reference.
+   *
+   * This is for both single and multiple reference fields.
+   */
+  var onChange = (0, _react.useCallback)(function (reference) {
+    var _parseIdentifier2 = (0, _utils.parseIdentifier)(reference.id),
+      referenceEntryId = _parseIdentifier2.id;
+    /**
+     * Let's handle the single usage first as it is quite simple.
+     */
+    if (!multiple) {
+      var _values = (0, _slicedToArray2.default)(values, 1),
+        value = _values[0];
+      if (!(value !== null && value !== void 0 && value.id)) {
+        setValues([reference]);
+        return;
+      }
+      var _parseIdentifier3 = (0, _utils.parseIdentifier)(value.id),
+        valueEntryId = _parseIdentifier3.id;
+      if (referenceEntryId === valueEntryId) {
+        setValues([]);
+        return;
+      }
+      setValues([reference]);
+      return;
+    }
+    var newValues = values.filter(function (value) {
+      if (!(value !== null && value !== void 0 && value.id)) {
+        return false;
+      }
+      var _parseIdentifier4 = (0, _utils.parseIdentifier)(value.id),
+        valueEntryId = _parseIdentifier4.id;
+      return referenceEntryId !== valueEntryId;
+    });
+    if (newValues.length === values.length) {
+      setValues([].concat((0, _toConsumableArray2.default)(values), [reference]));
+      return;
+    }
+    setValues(newValues);
+  }, [setValues, values]);
+  var onDialogSave = (0, _react.useCallback)(function () {
+    storeValues(values);
+    onDialogClose();
+  }, [values]);
+  /**
+   * Searching and list of reference entries.
+   */
+  var _useEntries = (0, _useEntries2.useEntries)({
+      model: contentModel,
+      limit: 10
+    }),
+    entries = _useEntries.entries,
+    loading = _useEntries.loading,
+    error = _useEntries.error,
+    runSearch = _useEntries.runSearch,
+    loadMore = _useEntries.loadMore;
+  (0, _react.useEffect)(function () {
+    runSearch("");
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!error) {
+      return;
+    }
+    showSnackbar(error);
+  }, [error]);
+  var debouncedSearch = (0, _react.useRef)(null);
+  var onInput = (0, _react.useCallback)(function (ev) {
+    var value = (String(ev.target.value) || "").trim();
+    if (debouncedSearch.current) {
+      clearTimeout(debouncedSearch.current);
+      debouncedSearch.current = null;
+    }
+    /**
+     * We can safely cast as setTimeout really produces a number.
+     * There is an error while coding because Storm thinks this is NodeJS timeout.
+     */
+    debouncedSearch.current = setTimeout(function () {
+      runSearch(value);
+    }, 200);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog2.Dialog, {
+    open: true,
+    onClose: onDialogClose
+  }, /*#__PURE__*/_react.default.createElement(_DialogHeader.DialogHeader, {
+    model: contentModel,
+    onClose: onDialogClose
+  }), /*#__PURE__*/_react.default.createElement(DialogContent, null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Search.Search, {
+    onInput: onInput
+  }), /*#__PURE__*/_react.default.createElement(Content, null, loading && /*#__PURE__*/_react.default.createElement(_Loader.AbsoluteLoader, null), /*#__PURE__*/_react.default.createElement(_Entries.Entries, {
+    entries: entries,
+    loadMore: loadMore
+  }, function (entry) {
+    return /*#__PURE__*/_react.default.createElement(_Entry.Entry, {
+      model: contentModel,
+      key: "reference-entry-".concat(entry.id),
+      entry: entry,
+      selected: isSelected(entry.entryId, values),
+      onChange: onChange
+    });
+  })))), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    onClick: onDialogClose
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    onClick: onDialogSave
+  }, "Save"))));
+};
+exports.ReferencesDialog = ReferencesDialog;

package/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","width","boxSizing","padding","Content","display","flex","flexDirection","position","minHeight","backgroundColor","border","overflowX","DialogContent","BaseDialogContent","isSelected","entryId","values","some","value","parseIdentifier","id","valueEntryId","ReferencesDialog","props","contentModel","onDialogClose","storeValues","initialValues","multiple","useSnackbar","showSnackbar","useState","setValues","onChange","useCallback","reference","referenceEntryId","newValues","filter","length","onDialogSave","useEntries","model","limit","entries","loading","error","runSearch","loadMore","useEffect","debouncedSearch","useRef","onInput","ev","String","target","trim","current","clearTimeout","setTimeout","entry"],"sources":["ReferencesDialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DialogHeader } from \"./dialog/DialogHeader\";\nimport { Search } from \"./Search\";\nimport { Entry } from \"./Entry\";\nimport { DialogActions, DialogContent as BaseDialogContent } from \"~/admin/components/Dialog\";\nimport { CmsEditorFieldRendererProps } from \"~/types\";\nimport { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ButtonDefault, ButtonPrimary } from \"@webiny/ui/Button\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Dialog } from \"./dialog/Dialog\";\nimport { AbsoluteLoader } from \"~/admin/plugins/fieldRenderers/ref/advanced/components/Loader\";\nimport { useEntries } from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries\";\nimport { Entries } from \"./Entries\";\n\nconst Container = styled(\"div\")({\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    padding: \"20px\"\n});\n\nconst Content = styled(\"div\")({\n    display: \"flex\",\n    flex: \"1\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    width: \"100%\",\n    minHeight: \"100px\",\n    boxSizing: \"border-box\",\n    padding: \"20px 0 20px 20px\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    overflowX: \"hidden\"\n});\n\nconst DialogContent = styled(BaseDialogContent)({\n    padding: \"0 !important\"\n});\n\nconst isSelected = (entryId: string, values: CmsReferenceValue[]) => {\n    if (!entryId) {\n        return false;\n    }\n    return values.some(value => {\n        const { id: valueEntryId } = parseIdentifier(value.id);\n        return entryId === valueEntryId;\n    });\n};\n\ninterface Props extends CmsEditorFieldRendererProps {\n    values?: CmsReferenceValue[] | null;\n    onDialogClose: () => void;\n    storeValues: (values: CmsReferenceValue[]) => void;\n    multiple: boolean;\n}\n\nexport const ReferencesDialog: React.VFC<Props> = props => {\n    const { contentModel, onDialogClose, storeValues, values: initialValues, multiple } = props;\n    const { showSnackbar } = useSnackbar();\n\n    const [values, setValues] = useState<CmsReferenceValue[]>(initialValues || []);\n\n    /**\n     * On change needs to handle the adding or removing of a reference.\n     *\n     * This is for both single and multiple reference fields.\n     */\n    const onChange = useCallback(\n        (reference: CmsReferenceValue) => {\n            const { id: referenceEntryId } = parseIdentifier(reference.id);\n            /**\n             * Let's handle the single usage first as it is quite simple.\n             */\n            if (!multiple) {\n                const [value] = values;\n                if (!value?.id) {\n                    setValues([reference]);\n                    return;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                if (referenceEntryId === valueEntryId) {\n                    setValues([]);\n                    return;\n                }\n                setValues([reference]);\n                return;\n            }\n\n            const newValues = values.filter(value => {\n                if (!value?.id) {\n                    return false;\n                }\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return referenceEntryId !== valueEntryId;\n            });\n            if (newValues.length === values.length) {\n                setValues([...values, reference]);\n                return;\n            }\n            setValues(newValues);\n        },\n        [setValues, values]\n    );\n\n    const onDialogSave = useCallback(() => {\n        storeValues(values);\n        onDialogClose();\n    }, [values]);\n    /**\n     * Searching and list of reference entries.\n     */\n    const { entries, loading, error, runSearch, loadMore } = useEntries({\n        model: contentModel,\n        limit: 10\n    });\n\n    useEffect(() => {\n        runSearch(\"\");\n    }, []);\n\n    useEffect(() => {\n        if (!error) {\n            return;\n        }\n        showSnackbar(error);\n    }, [error]);\n\n    const debouncedSearch = useRef<number | null>(null);\n\n    const onInput = useCallback(ev => {\n        const value = (String(ev.target.value) || \"\").trim();\n        if (debouncedSearch.current) {\n            clearTimeout(debouncedSearch.current);\n            debouncedSearch.current = null;\n        }\n        /**\n         * We can safely cast as setTimeout really produces a number.\n         * There is an error while coding because Storm thinks this is NodeJS timeout.\n         */\n        debouncedSearch.current = setTimeout(() => {\n            runSearch(value);\n        }, 200) as unknown as number;\n    }, []);\n\n    return (\n        <>\n            <Dialog open={true} onClose={onDialogClose}>\n                <DialogHeader model={contentModel} onClose={onDialogClose} />\n                <DialogContent>\n                    <Container>\n                        <Search onInput={onInput} />\n                        <Content>\n                            {loading && <AbsoluteLoader />}\n                            <Entries entries={entries} loadMore={loadMore}>\n                                {entry => {\n                                    return (\n                                        <Entry\n                                            model={contentModel}\n                                            key={`reference-entry-${entry.id}`}\n                                            entry={entry}\n                                            selected={isSelected(entry.entryId, values)}\n                                            onChange={onChange}\n                                        />\n                                    );\n                                }}\n                            </Entries>\n                        </Content>\n                    </Container>\n                </DialogContent>\n                <DialogActions>\n                    <ButtonDefault onClick={onDialogClose}>Cancel</ButtonDefault>\n                    <ButtonPrimary onClick={onDialogSave}>Save</ButtonPrimary>\n                </DialogActions>\n            </Dialog>\n        </>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/Search.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="web" />
+import React from "react";
+interface Props {
+    onInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const Search: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/Search.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _search = _interopRequireDefault(require("./assets/search.svg"));
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "el59n9e0",
+  label: "Container"
+})({
+  display: "flex",
+  width: "100%",
+  position: "relative",
+  height: "36px",
+  marginBottom: "16px",
+  padding: "5px 0",
+  border: "1px solid var(--mdc-theme-on-background)",
+  backgroundColor: "var(--mdc-theme-background)"
+});
+var Icon = /*#__PURE__*/(0, _styled.default)("img", {
+  target: "el59n9e1",
+  label: "Icon"
+})({
+  position: "absolute",
+  top: "12px",
+  left: "10px",
+  width: "24px",
+  height: "24px"
+});
+var Input = /*#__PURE__*/(0, _styled.default)("input", {
+  target: "el59n9e2",
+  label: "Input"
+})({
+  display: "block",
+  boxSizing: "border-box",
+  border: "none",
+  backgroundColor: "transparent",
+  width: "100%",
+  height: "100%",
+  fontSize: "14px",
+  lineHeight: "36px",
+  paddingLeft: "45px",
+  ":focus-visible": {
+    outline: "none"
+  }
+});
+var Search = function Search(_ref) {
+  var onInput = _ref.onInput;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _search.default
+  }), /*#__PURE__*/_react.default.createElement(Input, {
+    placeholder: "Search entries",
+    onKeyUp: onInput
+  }));
+};
+exports.Search = Search;

package/admin/plugins/fieldRenderers/ref/advanced/components/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","display","width","position","height","marginBottom","padding","border","backgroundColor","Icon","top","left","Input","boxSizing","fontSize","lineHeight","paddingLeft","outline","Search","onInput","searchIcon"],"sources":["Search.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport searchIcon from \"./assets/search.svg\";\n\nconst Container = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\",\n    height: \"36px\",\n    marginBottom: \"16px\",\n    padding: \"5px 0\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    backgroundColor: \"var(--mdc-theme-background)\"\n});\n\nconst Icon = styled(\"img\")({\n    position: \"absolute\",\n    top: \"12px\",\n    left: \"10px\",\n    width: \"24px\",\n    height: \"24px\"\n});\n\nconst Input = styled(\"input\")({\n    display: \"block\",\n    boxSizing: \"border-box\",\n    border: \"none\",\n    backgroundColor: \"transparent\",\n    width: \"100%\",\n    height: \"100%\",\n    fontSize: \"14px\",\n    lineHeight: \"36px\",\n    paddingLeft: \"45px\",\n    \":focus-visible\": {\n        outline: \"none\"\n    }\n});\n\ninterface Props {\n    onInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport const Search: React.VFC<Props> = ({ onInput }) => {\n    return (\n        <Container>\n            <Icon src={searchIcon} />\n            <Input placeholder={\"Search entries\"} onKeyUp={onInput} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BC,OAAO,EAAE,MAAM;EACfC,KAAK,EAAE,MAAM;EACbC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE,MAAM;EACdC,YAAY,EAAE,MAAM;EACpBC,OAAO,EAAE,OAAO;EAChBC,MAAM,EAAE,0CAA0C;EAClDC,eAAe,EAAE;AACrB,CAAC,CAAC;AAEF,IAAMC,IAAI,oBAAGT,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvBG,QAAQ,EAAE,UAAU;EACpBO,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,MAAM;EACZT,KAAK,EAAE,MAAM;EACbE,MAAM,EAAE;AACZ,CAAC,CAAC;AAEF,IAAMQ,KAAK,oBAAGZ,eAAM,EAAC,OAAO;EAAA;EAAA;AAAA,GAAE;EAC1BC,OAAO,EAAE,OAAO;EAChBY,SAAS,EAAE,YAAY;EACvBN,MAAM,EAAE,MAAM;EACdC,eAAe,EAAE,aAAa;EAC9BN,KAAK,EAAE,MAAM;EACbE,MAAM,EAAE,MAAM;EACdU,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE;IACdC,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAMK,IAAMC,MAAwB,GAAG,SAA3BA,MAAwB,OAAoB;EAAA,IAAdC,OAAO,QAAPA,OAAO;EAC9C,oBACI,6BAAC,SAAS,qBACN,6BAAC,IAAI;IAAC,GAAG,EAAEC;EAAW,EAAG,eACzB,6BAAC,KAAK;IAAC,WAAW,EAAE,gBAAiB;IAAC,OAAO,EAAED;EAAQ,EAAG,CAClD;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/add-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.65 34h3v-8.3H34v-3h-8.35V14h-3v8.7H14v3h8.65ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 23.95q0-4.1 1.575-7.75 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24.05 4q4.1 0 7.75 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm.05-3q7.05 0 12-4.975T41 23.95q0-7.05-4.95-12T24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24.05 41ZM24 24Z" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/down-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.5 34H14q-4.15 0-7.075-2.925T4 24q0-4.15 2.925-7.075T14 14h8.5v3H14q-2.9 0-4.95 2.05Q7 21.1 7 24q0 2.9 2.05 4.95Q11.1 31 14 31h8.5Zm-6.25-8.5v-3h15.5v3ZM25.5 34v-3H34q2.9 0 4.95-2.05Q41 26.9 41 24q0-2.9-2.05-4.95Q36.9 17 34 17h-8.5v-3H34q4.15 0 7.075 2.925T44 24q0 4.15-2.925 7.075T34 34Z" fill="var(--mdc-theme-primary)" fill="currentColor"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/assets/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" fill="#666"/></svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const Dialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    ref?: import("react").Ref<import("@webiny/ui/Dialog").Dialog> | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const FullWidthDialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    ref?: import("react").Ref<import("@webiny/ui/Dialog").Dialog> | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/Dialog.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthDialog = exports.Dialog = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Dialog = require("../../../../../../components/Dialog");
+var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  target: "ewi9ovj0",
+  label: "Dialog"
+})({
+  minWidth: "800px",
+  ".mdc-dialog__surface": {
+    width: "auto",
+    minWidth: "800px",
+    maxHeight: "calc(100vh - 100px)"
+  }
+});
+exports.Dialog = Dialog;
+var FullWidthDialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
+  target: "ewi9ovj1",
+  label: "FullWidthDialog"
+})({
+  maxWidth: "100%",
+  minWidth: "90%",
+  ".mdc-dialog__surface": {
+    width: "auto",
+    maxWidth: "100%",
+    minWidth: "90%",
+    maxHeight: "calc(100vh - 100px)"
+  }
+});
+exports.FullWidthDialog = FullWidthDialog;

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","styled","BaseDialog","minWidth","width","maxHeight","FullWidthDialog","maxWidth"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"~/admin/components/Dialog\";\n\nexport const Dialog = styled(BaseDialog)({\n    minWidth: \"800px\",\n    \".mdc-dialog__surface\": {\n        width: \"auto\",\n        minWidth: \"800px\",\n        maxHeight: \"calc(100vh - 100px)\"\n    }\n});\n\nexport const FullWidthDialog = styled(BaseDialog)({\n    maxWidth: \"100%\",\n    minWidth: \"90%\",\n    \".mdc-dialog__surface\": {\n        width: \"auto\",\n        maxWidth: \"100%\",\n        minWidth: \"90%\",\n        maxHeight: \"calc(100vh - 100px)\"\n    }\n});\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,GAAE;EACrCC,QAAQ,EAAE,OAAO;EACjB,sBAAsB,EAAE;IACpBC,KAAK,EAAE,MAAM;IACbD,QAAQ,EAAE,OAAO;IACjBE,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAAC;AAEI,IAAMC,eAAe,oBAAGL,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,GAAE;EAC9CK,QAAQ,EAAE,MAAM;EAChBJ,QAAQ,EAAE,KAAK;EACf,sBAAsB,EAAE;IACpBC,KAAK,EAAE,MAAM;IACbG,QAAQ,EAAE,MAAM;IAChBJ,QAAQ,EAAE,KAAK;IACfE,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/DialogHeader.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsModel } from "../../../../../../../types";
+interface Props {
+    model: CmsModel;
+    onClose: () => void;
+}
+export declare const DialogHeader: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/DialogHeader.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogHeader = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var _close = require("./assets/close.svg");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e10n4aa70",
+  label: "Container"
+})({
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "20px",
+  display: "flex",
+  flexDirection: "row",
+  backgroundColor: "var(--mdc-theme-secondary)",
+  color: "#FFF"
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e10n4aa71",
+  label: "Content"
+})({
+  display: "flex",
+  flex: "1",
+  flexDirection: "column"
+});
+var Title = /*#__PURE__*/(0, _styled.default)("h2", {
+  target: "e10n4aa72",
+  label: "Title"
+})({
+  display: "block",
+  fontSize: "24px",
+  lineHeight: "34px"
+});
+var Model = /*#__PURE__*/(0, _styled.default)("h3", {
+  target: "e10n4aa73",
+  label: "Model"
+})({
+  display: "block",
+  fontSize: "14px",
+  fontWeight: "normal",
+  " > strong": {
+    fontWeight: "bold"
+  }
+});
+var CloseContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e10n4aa74",
+  label: "CloseContainer"
+})({
+  width: "20px",
+  height: "20px",
+  paddingTop: "5px"
+});
+var CloseButton = /*#__PURE__*/(0, _styled.default)("button", {
+  target: "e10n4aa75",
+  label: "CloseButton"
+})({
+  background: "transparent",
+  border: "0 none",
+  outline: "none",
+  cursor: "pointer",
+  display: "block",
+  width: "100%",
+  height: "100%",
+  padding: "0",
+  margin: "0",
+  " > svg": {
+    display: "block",
+    width: "100%",
+    height: "100%"
+  }
+});
+var Close = function Close(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement(CloseContainer, null, /*#__PURE__*/_react.default.createElement(CloseButton, {
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null)));
+};
+var DialogHeader = function DialogHeader(_ref2) {
+  var model = _ref2.model,
+    onClose = _ref2.onClose;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(Title, null, "Select an existing record"), /*#__PURE__*/_react.default.createElement(Model, null, "Content model: ", /*#__PURE__*/_react.default.createElement("strong", null, model.name))), /*#__PURE__*/_react.default.createElement(Close, {
+    onClick: onClose
+  }));
+};
+exports.DialogHeader = DialogHeader;

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","width","boxSizing","padding","display","flexDirection","backgroundColor","color","Content","flex","Title","fontSize","lineHeight","Model","fontWeight","CloseContainer","height","paddingTop","CloseButton","background","border","outline","cursor","margin","Close","onClick","DialogHeader","model","onClose","name"],"sources":["DialogHeader.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { CmsModel } from \"~/types\";\nimport { ReactComponent as CloseIcon } from \"./assets/close.svg\";\n\nconst Container = styled(\"div\")({\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    padding: \"20px\",\n    display: \"flex\",\n    flexDirection: \"row\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    color: \"#FFF\"\n});\n\nconst Content = styled(\"div\")({\n    display: \"flex\",\n    flex: \"1\",\n    flexDirection: \"column\"\n});\n\nconst Title = styled(\"h2\")({\n    display: \"block\",\n    fontSize: \"24px\",\n    lineHeight: \"34px\"\n});\n\nconst Model = styled(\"h3\")({\n    display: \"block\",\n    fontSize: \"14px\",\n    fontWeight: \"normal\",\n    \" > strong\": {\n        fontWeight: \"bold\"\n    }\n});\n\nconst CloseContainer = styled(\"div\")({\n    width: \"20px\",\n    height: \"20px\",\n    paddingTop: \"5px\"\n});\n\nconst CloseButton = styled(\"button\")({\n    background: \"transparent\",\n    border: \"0 none\",\n    outline: \"none\",\n    cursor: \"pointer\",\n    display: \"block\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"0\",\n    margin: \"0\",\n    \" > svg\": {\n        display: \"block\",\n        width: \"100%\",\n        height: \"100%\"\n    }\n});\n\ninterface CloseProps {\n    onClick: () => void;\n}\n\nconst Close: React.VFC<CloseProps> = ({ onClick }) => {\n    return (\n        <CloseContainer>\n            <CloseButton onClick={onClick}>\n                <CloseIcon />\n            </CloseButton>\n        </CloseContainer>\n    );\n};\n\ninterface Props {\n    model: CmsModel;\n    onClose: () => void;\n}\n\nexport const DialogHeader: React.VFC<Props> = ({ model, onClose }) => {\n    return (\n        <Container>\n            <Content>\n                <Title>Select an existing record</Title>\n                <Model>\n                    Content model: <strong>{model.name}</strong>\n                </Model>\n            </Content>\n            <Close onClick={onClose} />\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,eAAe,EAAE,4BAA4B;EAC7CC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,OAAO,oBAAGR,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BI,OAAO,EAAE,MAAM;EACfK,IAAI,EAAE,GAAG;EACTJ,aAAa,EAAE;AACnB,CAAC,CAAC;AAEF,IAAMK,KAAK,oBAAGV,eAAM,EAAC,IAAI;EAAA;EAAA;AAAA,GAAE;EACvBI,OAAO,EAAE,OAAO;EAChBO,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE;AAChB,CAAC,CAAC;AAEF,IAAMC,KAAK,oBAAGb,eAAM,EAAC,IAAI;EAAA;EAAA;AAAA,GAAE;EACvBI,OAAO,EAAE,OAAO;EAChBO,QAAQ,EAAE,MAAM;EAChBG,UAAU,EAAE,QAAQ;EACpB,WAAW,EAAE;IACTA,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAEF,IAAMC,cAAc,oBAAGf,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,KAAK,EAAE,MAAM;EACbe,MAAM,EAAE,MAAM;EACdC,UAAU,EAAE;AAChB,CAAC,CAAC;AAEF,IAAMC,WAAW,oBAAGlB,eAAM,EAAC,QAAQ;EAAA;EAAA;AAAA,GAAE;EACjCmB,UAAU,EAAE,aAAa;EACzBC,MAAM,EAAE,QAAQ;EAChBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,SAAS;EACjBlB,OAAO,EAAE,OAAO;EAChBH,KAAK,EAAE,MAAM;EACbe,MAAM,EAAE,MAAM;EACdb,OAAO,EAAE,GAAG;EACZoB,MAAM,EAAE,GAAG;EACX,QAAQ,EAAE;IACNnB,OAAO,EAAE,OAAO;IAChBH,KAAK,EAAE,MAAM;IACbe,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AAMF,IAAMQ,KAA4B,GAAG,SAA/BA,KAA4B,OAAoB;EAAA,IAAdC,OAAO,QAAPA,OAAO;EAC3C,oBACI,6BAAC,cAAc,qBACX,6BAAC,WAAW;IAAC,OAAO,EAAEA;EAAQ,gBAC1B,6BAAC,qBAAS,OAAG,CACH,CACD;AAEzB,CAAC;AAOM,IAAMC,YAA8B,GAAG,SAAjCA,YAA8B,QAA2B;EAAA,IAArBC,KAAK,SAALA,KAAK;IAAEC,OAAO,SAAPA,OAAO;EAC3D,oBACI,6BAAC,SAAS,qBACN,6BAAC,OAAO,qBACJ,6BAAC,KAAK,QAAC,2BAAyB,CAAQ,eACxC,6BAAC,KAAK,QAAC,iBACY,4DAASD,KAAK,CAACE,IAAI,CAAU,CACxC,CACF,eACV,6BAAC,KAAK;IAAC,OAAO,EAAED;EAAQ,EAAG,CACnB;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/dialog/assets/close.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#fff"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/Box.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface Props {
+    icon: React.ReactElement | null;
+    name: string;
+    children?: React.ReactNode;
+}
+export declare const Box: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/Box.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Box = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11zzake0",
+  label: "Container"
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var Icon = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11zzake1",
+  label: "Icon"
+})({
+  width: "32px",
+  height: "32px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e11zzake2",
+  label: "Content"
+})({
+  flex: "1",
+  paddingLeft: "10px"
+});
+var Name = /*#__PURE__*/(0, _styled.default)("h4", {
+  target: "e11zzake3",
+  label: "Name"
+})({
+  fontWeight: 500,
+  fontSize: 11,
+  lineHeight: "16px",
+  letterSpacing: "0.5px",
+  color: "#938F99",
+  textTransform: "uppercase"
+});
+var Text = /*#__PURE__*/(0, _styled.default)("h5", {
+  target: "e11zzake4",
+  label: "Text"
+})({
+  fontWeight: 500,
+  fontSize: 11,
+  lineHeight: "16px",
+  letterSpacing: "0.5px",
+  color: "#49454F"
+});
+var Box = function Box(_ref) {
+  var icon = _ref.icon,
+    name = _ref.name,
+    children = _ref.children;
+  if (!children) {
+    return /*#__PURE__*/_react.default.createElement(Container, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Icon, null, icon), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(Name, null, name), /*#__PURE__*/_react.default.createElement(Text, null, children)));
+};
+exports.Box = Box;

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","display","flexDirection","Icon","width","height","alignItems","justifyContent","Content","flex","paddingLeft","Name","fontWeight","fontSize","lineHeight","letterSpacing","color","textTransform","Text","Box","icon","name","children"],"sources":["Box.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nconst Container = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\"\n});\n\nconst Icon = styled(\"div\")({\n    width: \"32px\",\n    height: \"32px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\"\n});\nconst Content = styled(\"div\")({\n    flex: \"1\",\n    paddingLeft: \"10px\"\n});\nconst Name = styled(\"h4\")({\n    fontWeight: 500,\n    fontSize: 11,\n    lineHeight: \"16px\",\n    letterSpacing: \"0.5px\",\n    color: \"#938F99\",\n    textTransform: \"uppercase\"\n});\nconst Text = styled(\"h5\")({\n    fontWeight: 500,\n    fontSize: 11,\n    lineHeight: \"16px\",\n    letterSpacing: \"0.5px\",\n    color: \"#49454F\"\n});\n\ninterface Props {\n    icon: React.ReactElement | null;\n    name: string;\n    children?: React.ReactNode;\n}\n\nexport const Box: React.VFC<Props> = ({ icon, name, children }) => {\n    if (!children) {\n        return <Container />;\n    }\n    return (\n        <Container>\n            <Icon>{icon}</Icon>\n            <Content>\n                <Name>{name}</Name>\n                <Text>{children}</Text>\n            </Content>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACnB,CAAC,CAAC;AAEF,IAAMC,IAAI,oBAAGH,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvBI,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdJ,OAAO,EAAE,MAAM;EACfK,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE;AACpB,CAAC,CAAC;AACF,IAAMC,OAAO,oBAAGR,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BS,IAAI,EAAE,GAAG;EACTC,WAAW,EAAE;AACjB,CAAC,CAAC;AACF,IAAMC,IAAI,oBAAGX,eAAM,EAAC,IAAI;EAAA;EAAA;AAAA,GAAE;EACtBY,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,MAAM;EAClBC,aAAa,EAAE,OAAO;EACtBC,KAAK,EAAE,SAAS;EAChBC,aAAa,EAAE;AACnB,CAAC,CAAC;AACF,IAAMC,IAAI,oBAAGlB,eAAM,EAAC,IAAI;EAAA;EAAA;AAAA,GAAE;EACtBY,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,MAAM;EAClBC,aAAa,EAAE,OAAO;EACtBC,KAAK,EAAE;AACX,CAAC,CAAC;AAQK,IAAMG,GAAqB,GAAG,SAAxBA,GAAqB,OAAiC;EAAA,IAA3BC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;EACxD,IAAI,CAACA,QAAQ,EAAE;IACX,oBAAO,6BAAC,SAAS,OAAG;EACxB;EACA,oBACI,6BAAC,SAAS,qBACN,6BAAC,IAAI,QAAEF,IAAI,CAAQ,eACnB,6BAAC,OAAO,qBACJ,6BAAC,IAAI,QAAEC,IAAI,CAAQ,eACnB,6BAAC,IAAI,QAAEC,QAAQ,CAAQ,CACjB,CACF;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsIdentity } from "../../../../../../../types";
+interface Props {
+    createdBy: CmsIdentity;
+    createdOn: Date;
+}
+export declare const CreatedBy: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreatedBy = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = require("./Box");
+var _timeagoReact = _interopRequireDefault(require("timeago-react"));
+/**
+ * Package timeago-react does not have types.
+ */
+// @ts-ignore
+
+var CreatedBy = function CreatedBy(_ref) {
+  var createdBy = _ref.createdBy,
+    createdOn = _ref.createdOn;
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    icon: null,
+    name: "Created By"
+  }, createdBy.displayName, " ", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
+    datetime: createdOn
+  }));
+};
+exports.CreatedBy = CreatedBy;

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/CreatedBy.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CreatedBy","createdBy","createdOn","displayName"],"sources":["CreatedBy.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsIdentity } from \"~/types\";\nimport { Box } from \"./Box\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\n\ninterface Props {\n    createdBy: CmsIdentity;\n    createdOn: Date;\n}\nexport const CreatedBy: React.VFC<Props> = ({ createdBy, createdOn }) => {\n    return (\n        <Box icon={null} name={\"Created By\"}>\n            {createdBy.displayName} <br />\n            <TimeAgo datetime={createdOn} />\n        </Box>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAKA;AAJA;AACA;AACA;AACA;;AAOO,IAAMA,SAA2B,GAAG,SAA9BA,SAA2B,OAAiC;EAAA,IAA3BC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;EAC9D,oBACI,6BAAC,QAAG;IAAC,IAAI,EAAE,IAAK;IAAC,IAAI,EAAE;EAAa,GAC/BD,SAAS,CAACE,WAAW,EAAC,GAAC,uDAAM,eAC9B,6BAAC,qBAAO;IAAC,QAAQ,EAAED;EAAU,EAAG,CAC9B;AAEd,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    description?: string | null;
+}
+export declare const Description: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/Description.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var Content = /*#__PURE__*/(0, _styled.default)("p", {
+  target: "e9zatxd0",
+  label: "Content"
+})({
+  fontStyle: "normal",
+  fontWeight: 400,
+  fontSize: 14,
+  lineHeight: "20px",
+  letterSpacing: "0.25px",
+  boxSizing: "border-box",
+  paddingRight: 20,
+  paddingBottom: 10
+});
+var Description = function Description(_ref) {
+  var description = _ref.description;
+  var MAX_LENGTH = 320;
+  if (!description) {
+    return /*#__PURE__*/_react.default.createElement(Content, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(Content, null, description.length > MAX_LENGTH ? description.substring(0, MAX_LENGTH) + "..." : description);
+};
+exports.Description = Description;