@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

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

@@ -0,0 +1 @@
+{"version":3,"names":["Text","styled","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","Remove","entry","onRemove","useConfirmationDialog","title","message","acceptLabel","showConfirmation","onRemoveClick","useCallback","entryId"],"sources":["Remove.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React, { useCallback } from \"react\";\nimport { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ReactComponent as RemoveIcon } from \"./assets/remove.svg\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { ButtonLink } from \"./elements/ButtonLink\";\n\nconst Text = styled(\"span\")({\n    fontFamily: \"Source Sans Pro\",\n    fontWeight: 500,\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"0.1px\",\n    textTransform: \"uppercase\"\n});\n\ninterface Props {\n    entry: CmsReferenceContentEntry;\n    onRemove: (entryId: string) => void;\n}\n\nexport const Remove: React.VFC<Props> = ({ entry, onRemove }) => {\n    const { showConfirmation } = useConfirmationDialog({\n        title: \"Remove referenced entry\",\n        message: `Are you sure you want to remove the referenced entry \"${entry.title}\"?`,\n        acceptLabel: \"Yes, I'm sure!\"\n    });\n\n    const onRemoveClick = useCallback(() => {\n        showConfirmation(() => {\n            onRemove(entry.entryId);\n        });\n    }, [entry, onRemove]);\n\n    return (\n        <ButtonLink onClick={onRemoveClick} maxWidth={\"100px\"}>\n            <RemoveIcon />\n            <Text>Remove</Text>\n        </ButtonLink>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAEA,IAAMA,IAAI,oBAAGC,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,GAAE;EACxBC,UAAU,EAAE,iBAAiB;EAC7BC,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,aAAa,EAAE,OAAO;EACtBC,aAAa,EAAE;AACnB,CAAC,CAAC;AAOK,IAAMC,MAAwB,GAAG,SAA3BA,MAAwB,OAA4B;EAAA,IAAtBC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EACtD,4BAA6B,IAAAC,+BAAqB,EAAC;MAC/CC,KAAK,EAAE,yBAAyB;MAChCC,OAAO,mEAA2DJ,KAAK,CAACG,KAAK,QAAI;MACjFE,WAAW,EAAE;IACjB,CAAC,CAAC;IAJMC,gBAAgB,yBAAhBA,gBAAgB;EAMxB,IAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACpCF,gBAAgB,CAAC,YAAM;MACnBL,QAAQ,CAACD,KAAK,CAACS,OAAO,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC,EAAE,CAACT,KAAK,EAAEC,QAAQ,CAAC,CAAC;EAErB,oBACI,6BAAC,sBAAU;IAAC,OAAO,EAAEM,aAAc;IAAC,QAAQ,EAAE;EAAQ,gBAClD,6BAAC,sBAAU,OAAG,eACd,6BAAC,IAAI,QAAC,QAAM,CAAO,CACV;AAErB,CAAC;AAAC"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { CmsReferenceContentEntry, CmsReferenceValue } from "../../../components/types";
+interface Props {
+    entry: CmsReferenceContentEntry;
+    selected?: boolean;
+    onChange: (value: CmsReferenceValue) => void;
+}
+export declare const Select: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,82 @@
+"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.Select = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireWildcard(require("react"));
+var _selected = require("./assets/selected.svg");
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1f9xw140",
+  label: "Container"
+})({
+  width: "140px",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "end"
+});
+var SelectButton = /*#__PURE__*/(0, _styled.default)("button", {
+  target: "e1f9xw141",
+  label: "SelectButton"
+})({
+  border: 0,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  background: "transparent",
+  color: "var(--mdc-theme-primary)",
+  cursor: "pointer",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+var Icon = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1f9xw142",
+  label: "Icon"
+})(function (_ref) {
+  var selected = _ref.selected;
+  return {
+    backgroundColor: selected ? "var(--mdc-theme-primary)" : "transparent",
+    border: "1px solid var(--mdc-theme-primary)",
+    borderRadius: "3px",
+    width: "16px",
+    height: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer"
+  };
+});
+var Text = /*#__PURE__*/(0, _styled.default)("span", {
+  target: "e1f9xw143",
+  label: "Text"
+})({
+  fontFamily: "Source Sans Pro",
+  fontWeight: 500,
+  fontSize: "14px",
+  lineHeight: "20px",
+  letterSpacing: "0.1px",
+  textTransform: "uppercase",
+  marginLeft: "10px"
+});
+var Select = function Select(_ref2) {
+  var entry = _ref2.entry,
+    selected = _ref2.selected,
+    onChange = _ref2.onChange;
+  var onIconClick = (0, _react.useCallback)(function () {
+    onChange({
+      id: entry.id,
+      modelId: entry.model.modelId
+    });
+  }, [entry, onChange]);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(SelectButton, {
+    onClick: onIconClick
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    selected: selected
+  }, selected && /*#__PURE__*/_react.default.createElement(_selected.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(Text, null, selected ? "Selected" : "Select")));
+};
+exports.Select = Select;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","width","display","flexDirection","alignItems","justifyContent","SelectButton","border","background","color","cursor","textDecoration","Icon","selected","backgroundColor","borderRadius","height","Text","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","marginLeft","Select","entry","onChange","onIconClick","useCallback","id","modelId","model"],"sources":["Select.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React, { useCallback } from \"react\";\nimport {\n    CmsReferenceContentEntry,\n    CmsReferenceValue\n} from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ReactComponent as SelectedIcon } from \"./assets/selected.svg\";\n\nconst Container = styled(\"div\")({\n    width: \"140px\",\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"end\"\n});\n\nconst SelectButton = styled(\"button\")({\n    border: 0,\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    background: \"transparent\",\n    color: \"var(--mdc-theme-primary)\",\n    cursor: \"pointer\",\n    \"&:hover\": {\n        textDecoration: \"underline\"\n    }\n});\n\ninterface IconProps {\n    selected?: boolean;\n}\nconst Icon = styled(\"div\")(({ selected }: IconProps) => {\n    return {\n        backgroundColor: selected ? \"var(--mdc-theme-primary)\" : \"transparent\",\n        border: \"1px solid var(--mdc-theme-primary)\",\n        borderRadius: \"3px\",\n        width: \"16px\",\n        height: \"16px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        cursor: \"pointer\"\n    };\n});\n\nconst Text = styled(\"span\")({\n    fontFamily: \"Source Sans Pro\",\n    fontWeight: 500,\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"0.1px\",\n    textTransform: \"uppercase\",\n    marginLeft: \"10px\"\n});\n\ninterface Props {\n    entry: CmsReferenceContentEntry;\n    selected?: boolean;\n    onChange: (value: CmsReferenceValue) => void;\n}\nexport const Select: React.VFC<Props> = ({ entry, selected, onChange }) => {\n    const onIconClick = useCallback(() => {\n        onChange({\n            id: entry.id,\n            modelId: entry.model.modelId\n        });\n    }, [entry, onChange]);\n    return (\n        <Container>\n            <SelectButton onClick={onIconClick}>\n                <Icon selected={selected}>{selected && <SelectedIcon />}</Icon>\n                <Text>{selected ? \"Selected\" : \"Select\"}</Text>\n            </SelectButton>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAKA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE;AACpB,CAAC,CAAC;AAEF,IAAMC,YAAY,oBAAGN,eAAM,EAAC,QAAQ;EAAA;EAAA;AAAA,GAAE;EAClCO,MAAM,EAAE,CAAC;EACTL,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,QAAQ;EACpBI,UAAU,EAAE,aAAa;EACzBC,KAAK,EAAE,0BAA0B;EACjCC,MAAM,EAAE,SAAS;EACjB,SAAS,EAAE;IACPC,cAAc,EAAE;EACpB;AACJ,CAAC,CAAC;AAKF,IAAMC,IAAI,oBAAGZ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE,gBAA6B;EAAA,IAA1Ba,QAAQ,QAARA,QAAQ;EAClC,OAAO;IACHC,eAAe,EAAED,QAAQ,GAAG,0BAA0B,GAAG,aAAa;IACtEN,MAAM,EAAE,oCAAoC;IAC5CQ,YAAY,EAAE,KAAK;IACnBd,KAAK,EAAE,MAAM;IACbe,MAAM,EAAE,MAAM;IACdd,OAAO,EAAE,MAAM;IACfE,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBK,MAAM,EAAE;EACZ,CAAC;AACL,CAAC,CAAC;AAEF,IAAMO,IAAI,oBAAGjB,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,GAAE;EACxBkB,UAAU,EAAE,iBAAiB;EAC7BC,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,aAAa,EAAE,OAAO;EACtBC,aAAa,EAAE,WAAW;EAC1BC,UAAU,EAAE;AAChB,CAAC,CAAC;AAOK,IAAMC,MAAwB,GAAG,SAA3BA,MAAwB,QAAsC;EAAA,IAAhCC,KAAK,SAALA,KAAK;IAAEb,QAAQ,SAARA,QAAQ;IAAEc,QAAQ,SAARA,QAAQ;EAChE,IAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAClCF,QAAQ,CAAC;MACLG,EAAE,EAAEJ,KAAK,CAACI,EAAE;MACZC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAACD;IACzB,CAAC,CAAC;EACN,CAAC,EAAE,CAACL,KAAK,EAAEC,QAAQ,CAAC,CAAC;EACrB,oBACI,6BAAC,SAAS,qBACN,6BAAC,YAAY;IAAC,OAAO,EAAEC;EAAY,gBAC/B,6BAAC,IAAI;IAAC,QAAQ,EAAEf;EAAS,GAAEA,QAAQ,iBAAI,6BAAC,wBAAY,OAAG,CAAQ,eAC/D,6BAAC,IAAI,QAAEA,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAQ,CACpC,CACP;AAEpB,CAAC;AAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { CmsContentEntryStatusType } from "../../../../../../../types";
+interface Props {
+    status: CmsContentEntryStatusType;
+}
+export declare const Status: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Status = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _statusDraft = require("./assets/status-draft.svg");
+var _statusPublished = require("./assets/status-published.svg");
+var _statusUnpublished = require("./assets/status-unpublished.svg");
+var _Box = require("./Box");
+var getIcon = function getIcon(status) {
+  switch (status) {
+    case "published":
+      return /*#__PURE__*/_react.default.createElement(_statusPublished.ReactComponent, null);
+    case "unpublished":
+      return /*#__PURE__*/_react.default.createElement(_statusUnpublished.ReactComponent, null);
+    case "draft":
+      return /*#__PURE__*/_react.default.createElement(_statusDraft.ReactComponent, null);
+    default:
+      return null;
+  }
+};
+var Status = function Status(_ref) {
+  var status = _ref.status;
+  return /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    icon: getIcon(status),
+    name: "Status"
+  }, status.toUpperCase());
+};
+exports.Status = Status;

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

@@ -0,0 +1 @@
+{"version":3,"names":["getIcon","status","Status","toUpperCase"],"sources":["Status.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DraftIcon } from \"./assets/status-draft.svg\";\nimport { ReactComponent as PublishedIcon } from \"./assets/status-published.svg\";\nimport { ReactComponent as UnpublishedIcon } from \"./assets/status-unpublished.svg\";\nimport { Box } from \"./Box\";\nimport { CmsContentEntryStatusType } from \"~/types\";\n\nconst getIcon = (status: CmsContentEntryStatusType) => {\n    switch (status) {\n        case \"published\":\n            return <PublishedIcon />;\n        case \"unpublished\":\n            return <UnpublishedIcon />;\n        case \"draft\":\n            return <DraftIcon />;\n        default:\n            return null;\n    }\n};\n\ninterface Props {\n    status: CmsContentEntryStatusType;\n}\nexport const Status: React.VFC<Props> = ({ status }) => {\n    return (\n        <Box icon={getIcon(status)} name={\"Status\"}>\n            {status.toUpperCase()}\n        </Box>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,MAAiC,EAAK;EACnD,QAAQA,MAAM;IACV,KAAK,WAAW;MACZ,oBAAO,6BAAC,+BAAa,OAAG;IAC5B,KAAK,aAAa;MACd,oBAAO,6BAAC,iCAAe,OAAG;IAC9B,KAAK,OAAO;MACR,oBAAO,6BAAC,2BAAS,OAAG;IACxB;MACI,OAAO,IAAI;EAAC;AAExB,CAAC;AAKM,IAAMC,MAAwB,GAAG,SAA3BA,MAAwB,OAAmB;EAAA,IAAbD,MAAM,QAANA,MAAM;EAC7C,oBACI,6BAAC,QAAG;IAAC,IAAI,EAAED,OAAO,CAACC,MAAM,CAAE;IAAC,IAAI,EAAE;EAAS,GACtCA,MAAM,CAACE,WAAW,EAAE,CACnB;AAEd,CAAC;AAAC"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    title: string;
+}
+export declare const Title: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var Content = /*#__PURE__*/(0, _styled.default)("h3", {
+  target: "e1cdao7m0",
+  label: "Content"
+})({
+  fontStyle: "normal",
+  fontWeight: 400,
+  fontSize: 24,
+  lineHeight: "32px",
+  marginBottom: "5px"
+});
+var Title = function Title(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(Content, null, title);
+};
+exports.Title = Title;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Content","styled","fontStyle","fontWeight","fontSize","lineHeight","marginBottom","Title","title"],"sources":["Title.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Content = styled(\"h3\")({\n    fontStyle: \"normal\",\n    fontWeight: 400,\n    fontSize: 24,\n    lineHeight: \"32px\",\n    marginBottom: \"5px\"\n});\n\ninterface Props {\n    title: string;\n}\nexport const Title: React.VFC<Props> = ({ title }) => {\n    return <Content>{title}</Content>;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,OAAO,oBAAGC,eAAM,EAAC,IAAI;EAAA;EAAA;AAAA,GAAE;EACzBC,SAAS,EAAE,QAAQ;EACnBC,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,MAAM;EAClBC,YAAY,EAAE;AAClB,CAAC,CAAC;AAKK,IAAMC,KAAuB,GAAG,SAA1BA,KAAuB,OAAkB;EAAA,IAAZC,KAAK,QAALA,KAAK;EAC3C,oBAAO,6BAAC,OAAO,QAAEA,KAAK,CAAW;AACrC,CAAC;AAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { CmsReferenceContentEntry } from "../../../components/types";
+interface Props {
+    entry: CmsReferenceContentEntry;
+}
+export declare const View: React.VFC<Props>;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.View = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _view = require("./assets/view.svg");
+var _ButtonLink = require("./elements/ButtonLink");
+var createEntryUrl = function createEntryUrl(entry) {
+  return "/cms/content-entries/".concat(entry.model.modelId, "?id=").concat(entry.id);
+};
+var View = function View(_ref) {
+  var entry = _ref.entry;
+  return /*#__PURE__*/_react.default.createElement(_ButtonLink.ButtonLink, {
+    href: createEntryUrl(entry),
+    target: "_blank",
+    maxWidth: "95px"
+  }, /*#__PURE__*/_react.default.createElement(_view.ReactComponent, null), " ", /*#__PURE__*/_react.default.createElement("span", null, "View"));
+};
+exports.View = View;

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

@@ -0,0 +1 @@
+{"version":3,"names":["createEntryUrl","entry","model","modelId","id","View"],"sources":["View.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { ReactComponent as ViewIcon } from \"./assets/view.svg\";\nimport { ButtonLink } from \"./elements/ButtonLink\";\n\nconst createEntryUrl = (entry: CmsReferenceContentEntry) => {\n    return `/cms/content-entries/${entry.model.modelId}?id=${entry.id}`;\n};\n\ninterface Props {\n    entry: CmsReferenceContentEntry;\n}\nexport const View: React.VFC<Props> = ({ entry }) => {\n    return (\n        <ButtonLink href={createEntryUrl(entry)} target=\"_blank\" maxWidth={\"95px\"}>\n            <ViewIcon /> <span>View</span>\n        </ButtonLink>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAA+B,EAAK;EACxD,sCAA+BA,KAAK,CAACC,KAAK,CAACC,OAAO,iBAAOF,KAAK,CAACG,EAAE;AACrE,CAAC;AAKM,IAAMC,IAAsB,GAAG,SAAzBA,IAAsB,OAAkB;EAAA,IAAZJ,KAAK,QAALA,KAAK;EAC1C,oBACI,6BAAC,sBAAU;IAAC,IAAI,EAAED,cAAc,CAACC,KAAK,CAAE;IAAC,MAAM,EAAC,QAAQ;IAAC,QAAQ,EAAE;EAAO,gBACtE,6BAAC,oBAAQ,OAAG,KAAC,0DAAM,MAAI,CAAO,CACrB;AAErB,CAAC;AAAC"}

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

@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L5 5L10 0H0Z" fill="currentColor"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/move-up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5L5 0L10 5H0Z" fill="currentColor"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/remove.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 1.8075L10.1925 0.75L6 4.9425L1.8075 0.75L0.75 1.8075L4.9425 6L0.75 10.1925L1.8075 11.25L6 7.0575L10.1925 11.25L11.25 10.1925L7.0575 6L11.25 1.8075Z" fill="#FA5723"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/selected.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z" fill="white"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/status-draft.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6667 24C14.4 24 14.1667 23.9 13.9667 23.7C13.7667 23.5 13.6667 23.2667 13.6667 23C13.6667 22.7111 13.7667 22.4722 13.9667 22.2833C14.1667 22.0944 14.4 22 14.6667 22C15.9778 22 17.0833 21.7333 17.9833 21.2C18.8833 20.6667 19.3333 20.0444 19.3333 19.3333C19.3333 18.8222 19.0056 18.3222 18.35 17.8333C17.6944 17.3444 16.8111 16.9667 15.7 16.7L17.2667 15.1333C18.6667 15.5556 19.6944 16.1389 20.35 16.8833C21.0056 17.6278 21.3333 18.4444 21.3333 19.3333C21.3333 20.8222 20.6556 21.9722 19.3 22.7833C17.9444 23.5944 16.4 24 14.6667 24ZM4 14.2C2.57778 13.8889 1.55556 13.4 0.933333 12.7333C0.311111 12.0667 0 11.3778 0 10.6667C0 9.88889 0.288889 9.18889 0.866667 8.56667C1.44444 7.94445 2.77778 7.25556 4.86667 6.5C6.33333 5.96667 7.27778 5.53333 7.7 5.2C8.12222 4.86667 8.33333 4.47778 8.33333 4.03333C8.33333 3.47778 8.08889 3 7.6 2.6C7.11111 2.2 6.35556 2 5.33333 2C4.73333 2 4.22222 2.07778 3.8 2.23333C3.37778 2.38889 3 2.63333 2.66667 2.96667C2.48889 3.14444 2.26111 3.25 1.98333 3.28333C1.70556 3.31667 1.45556 3.24444 1.23333 3.06667C0.988889 2.88889 0.861111 2.66667 0.85 2.4C0.838889 2.13333 0.922222 1.9 1.1 1.7C1.47778 1.21111 2.04444 0.805556 2.8 0.483333C3.55556 0.161111 4.4 0 5.33333 0C6.84444 0 8.05556 0.361111 8.96667 1.08333C9.87778 1.80556 10.3333 2.78889 10.3333 4.03333C10.3333 4.94444 10.0167 5.71667 9.38333 6.35C8.75 6.98333 7.51111 7.64444 5.66667 8.33333C4.17778 8.88889 3.19444 9.32778 2.71667 9.65C2.23889 9.97222 2 10.3111 2 10.6667C2 11.0222 2.3 11.3611 2.9 11.6833C3.5 12.0056 4.4 12.3111 5.6 12.6L4 14.2ZM20.5333 9.06667L16.2667 4.8L17.7667 3.3C18.1667 2.9 18.6111 2.7 19.1 2.7C19.5889 2.7 20.0333 2.9 20.4333 3.3L22.0333 4.9C22.4333 5.3 22.6333 5.74444 22.6333 6.23333C22.6333 6.72222 22.4333 7.16667 22.0333 7.56667L20.5333 9.06667ZM3.33333 22H4.73333L16.2333 10.5L14.8333 9.1L3.33333 20.6V22ZM1.33333 24V19.7333L14.8333 6.23333L19.1 10.5L5.6 24H1.33333Z" fill="#CDA417"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/status-published.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 27.3333C12.1111 27.3333 10.3555 26.9944 8.73332 26.3167C7.1111 25.6389 5.69999 24.7 4.49999 23.5C3.29999 22.3 2.3611 20.8889 1.68332 19.2667C1.00555 17.6444 0.666656 15.8889 0.666656 14C0.666656 12.1333 1.00555 10.3889 1.68332 8.76667C2.3611 7.14445 3.29999 5.73334 4.49999 4.53333C5.69999 3.33333 7.1111 2.38889 8.73332 1.7C10.3555 1.01111 12.1111 0.666668 14 0.666668C15.6667 0.666668 17.2222 0.933334 18.6667 1.46667C20.1111 2 21.4111 2.73333 22.5667 3.66667L21.1333 5.1C20.1555 4.32222 19.0667 3.72222 17.8667 3.3C16.6667 2.87778 15.3778 2.66667 14 2.66667C10.7778 2.66667 8.08332 3.75 5.91666 5.91667C3.74999 8.08333 2.66666 10.7778 2.66666 14C2.66666 17.2222 3.74999 19.9167 5.91666 22.0833C8.08332 24.25 10.7778 25.3333 14 25.3333C17.2222 25.3333 19.9167 24.25 22.0833 22.0833C24.25 19.9167 25.3333 17.2222 25.3333 14C25.3333 13.3333 25.2833 12.6833 25.1833 12.05C25.0833 11.4167 24.9333 10.8 24.7333 10.2L26.2667 8.66667C26.6222 9.48889 26.8889 10.3444 27.0667 11.2333C27.2444 12.1222 27.3333 13.0444 27.3333 14C27.3333 15.8889 26.9889 17.6444 26.3 19.2667C25.6111 20.8889 24.6667 22.3 23.4667 23.5C22.2667 24.7 20.8555 25.6389 19.2333 26.3167C17.6111 26.9944 15.8667 27.3333 14 27.3333ZM12.0333 20.0667L6.53332 14.5333L8.03332 13.0333L12.0333 17.0333L25.8333 3.23333L27.3667 4.73334L12.0333 20.0667Z" fill="#5DC9B1"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/status-unpublished.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 27.3333C12.1111 27.3333 10.3555 26.9944 8.73332 26.3167C7.1111 25.6389 5.69999 24.7 4.49999 23.5C3.29999 22.3 2.3611 20.8889 1.68332 19.2667C1.00555 17.6444 0.666656 15.8889 0.666656 14C0.666656 12.1333 1.00555 10.3889 1.68332 8.76666C2.3611 7.14443 3.29999 5.73332 4.49999 4.53332C5.69999 3.33332 7.1111 2.38888 8.73332 1.69999C10.3555 1.0111 12.1111 0.666656 14 0.666656C15.8667 0.666656 17.6111 1.0111 19.2333 1.69999C20.8555 2.38888 22.2667 3.33332 23.4667 4.53332C24.6667 5.73332 25.6111 7.14443 26.3 8.76666C26.9889 10.3889 27.3333 12.1333 27.3333 14C27.3333 14.1778 27.3278 14.3555 27.3167 14.5333C27.3055 14.7111 27.2889 14.8889 27.2667 15.0667C26.9778 14.8889 26.6611 14.7 26.3167 14.5C25.9722 14.3 25.6444 14.1333 25.3333 14C25.3333 10.7778 24.25 8.08332 22.0833 5.91666C19.9167 3.74999 17.2222 2.66666 14 2.66666C12.5333 2.66666 11.1667 2.90555 9.89999 3.38332C8.63332 3.8611 7.53332 4.5111 6.59999 5.33332L15.7 14.4333C15.4111 14.5667 15.1333 14.7111 14.8667 14.8667C14.6 15.0222 14.3333 15.1889 14.0667 15.3667L5.29999 6.59999C4.47777 7.55554 3.83332 8.66666 3.36666 9.93332C2.89999 11.2 2.66666 12.5555 2.66666 14C2.66666 16.7778 3.49443 19.1833 5.14999 21.2167C6.80555 23.25 8.93332 24.5333 11.5333 25.0667C11.8667 25.4444 12.2555 25.8444 12.7 26.2667C13.1444 26.6889 13.5778 27.0444 14 27.3333ZM20.6667 25.3333C22.0889 25.3333 23.4333 24.9722 24.7 24.25C25.9667 23.5278 27 22.5555 27.8 21.3333C27 20.1111 25.9667 19.1389 24.7 18.4167C23.4333 17.6944 22.0889 17.3333 20.6667 17.3333C19.2444 17.3333 17.9 17.6944 16.6333 18.4167C15.3667 19.1389 14.3333 20.1111 13.5333 21.3333C14.3333 22.5555 15.3667 23.5278 16.6333 24.25C17.9 24.9722 19.2444 25.3333 20.6667 25.3333ZM20.6667 27.3333C18.5333 27.3333 16.6278 26.7722 14.95 25.65C13.2722 24.5278 12.0667 23.0889 11.3333 21.3333C12.0667 19.5778 13.2722 18.1389 14.95 17.0167C16.6278 15.8944 18.5333 15.3333 20.6667 15.3333C22.8 15.3333 24.7055 15.8944 26.3833 17.0167C28.0611 18.1389 29.2667 19.5778 30 21.3333C29.2667 23.0889 28.0611 24.5278 26.3833 25.65C24.7055 26.7722 22.8 27.3333 20.6667 27.3333ZM20.6667 23.3333C20.1111 23.3333 19.6389 23.1389 19.25 22.75C18.8611 22.3611 18.6667 21.8889 18.6667 21.3333C18.6667 20.7778 18.8611 20.3055 19.25 19.9167C19.6389 19.5278 20.1111 19.3333 20.6667 19.3333C21.2222 19.3333 21.6944 19.5278 22.0833 19.9167C22.4722 20.3055 22.6667 20.7778 22.6667 21.3333C22.6667 21.8889 22.4722 22.3611 22.0833 22.75C21.6944 23.1389 21.2222 23.3333 20.6667 23.3333Z" fill="#FA5723"/>
+</svg>

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/assets/view.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8.8125C9.8875 8.8125 10.6406 8.50313 11.2594 7.88437C11.8781 7.26562 12.1875 6.5125 12.1875 5.625C12.1875 4.7375 11.8781 3.98438 11.2594 3.36563C10.6406 2.74688 9.8875 2.4375 9 2.4375C8.1125 2.4375 7.35938 2.74688 6.74063 3.36563C6.12188 3.98438 5.8125 4.7375 5.8125 5.625C5.8125 6.5125 6.12188 7.26562 6.74063 7.88437C7.35938 8.50313 8.1125 8.8125 9 8.8125ZM9 7.725C8.4125 7.725 7.91563 7.52188 7.50937 7.11563C7.10312 6.70937 6.9 6.2125 6.9 5.625C6.9 5.0375 7.10312 4.54063 7.50937 4.13437C7.91563 3.72812 8.4125 3.525 9 3.525C9.5875 3.525 10.0844 3.72812 10.4906 4.13437C10.8969 4.54063 11.1 5.0375 11.1 5.625C11.1 6.2125 10.8969 6.70937 10.4906 7.11563C10.0844 7.52188 9.5875 7.725 9 7.725ZM9 11.25C7.175 11.25 5.525 10.7312 4.05 9.69375C2.575 8.65625 1.475 7.3 0.75 5.625C1.475 3.95 2.575 2.59375 4.05 1.55625C5.525 0.51875 7.175 0 9 0C10.825 0 12.475 0.51875 13.95 1.55625C15.425 2.59375 16.525 3.95 17.25 5.625C16.525 7.3 15.425 8.65625 13.95 9.69375C12.475 10.7312 10.825 11.25 9 11.25ZM9 10.125C10.5125 10.125 11.9031 9.71562 13.1719 8.89688C14.4406 8.07812 15.4062 6.9875 16.0687 5.625C15.4062 4.2625 14.4406 3.17188 13.1719 2.35312C11.9031 1.53437 10.5125 1.125 9 1.125C7.4875 1.125 6.09688 1.53437 4.82812 2.35312C3.55938 3.17188 2.5875 4.2625 1.9125 5.625C2.5875 6.9875 3.55938 8.07812 4.82812 8.89688C6.09688 9.71562 7.4875 10.125 9 10.125Z" fill="#FA5723"/>
+</svg>

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

@@ -0,0 +1,18 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    maxWidth?: `${string}px`;
+}
+interface PropsWithClick extends Props {
+    href?: never;
+    target?: never;
+    onClick: (ev: React.MouseEvent) => void;
+}
+interface PropsWithHref extends Props {
+    href: string;
+    target: "_blank" | string;
+    onClick?: never;
+}
+export declare const ButtonLink: React.VFC<PropsWithClick | PropsWithHref>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/entry/elements/ButtonLink.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonLink = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "href", "target", "onClick", "className"];
+var Button = /*#__PURE__*/(0, _styled.default)("a", {
+  target: "e1i1c9s0",
+  label: "Button"
+})({
+  display: "flex",
+  height: 35,
+  fontWeight: 500,
+  fontSize: "14px",
+  lineHeight: "20px",
+  letterSpacing: "0.1px",
+  textTransform: "uppercase",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  color: "var(--mdc-theme-primary)",
+  " > svg": {
+    marginRight: "10px",
+    color: "var(--mdc-theme-primary)"
+  },
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "e1i1c9s1",
+  label: "Container"
+})(function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return {
+    maxWidth: maxWidth || "140px",
+    width: "auto",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    "&.has-tooltip": (0, _defineProperty2.default)({}, Button, {
+      ">span": {
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        " > svg": {
+          marginRight: "10px"
+        }
+      }
+    }),
+    "&.disabled": (0, _defineProperty2.default)({
+      pointerEvents: "none",
+      cursor: "not-allowed"
+    }, Button, {
+      color: "var(--mdc-theme-on-background)",
+      ">svg": {
+        color: "var(--mdc-theme-on-background)"
+      }
+    })
+  };
+});
+var ButtonLink = function ButtonLink(props) {
+  var children = props.children,
+    href = props.href,
+    target = props.target,
+    onClick = props.onClick,
+    className = props.className,
+    styles = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
+    className: className
+  }, styles), /*#__PURE__*/_react.default.createElement(Button, {
+    href: href,
+    target: target,
+    onClick: onClick
+  }, children));
+};
+exports.ButtonLink = ButtonLink;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Button","styled","display","height","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","alignItems","justifyContent","cursor","color","marginRight","textDecoration","Container","maxWidth","width","flexDirection","pointerEvents","ButtonLink","props","children","href","target","onClick","className","styles"],"sources":["ButtonLink.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Button: any = styled(\"a\")({\n    display: \"flex\",\n    height: 35,\n    fontWeight: 500,\n    fontSize: \"14px\",\n    lineHeight: \"20px\",\n    letterSpacing: \"0.1px\",\n    textTransform: \"uppercase\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"pointer\",\n    color: \"var(--mdc-theme-primary)\",\n    \" > svg\": {\n        marginRight: \"10px\",\n        color: \"var(--mdc-theme-primary)\"\n    },\n    \"&:hover\": {\n        textDecoration: \"underline\"\n    }\n});\n\nconst Container = styled(\"div\")(({ maxWidth }: Props) => {\n    return {\n        maxWidth: maxWidth || \"140px\",\n        width: \"auto\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        \"&.has-tooltip\": {\n            [Button]: {\n                \">span\": {\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    display: \"flex\",\n                    \" > svg\": {\n                        marginRight: \"10px\"\n                    }\n                }\n            }\n        },\n        \"&.disabled\": {\n            pointerEvents: \"none\",\n            cursor: \"not-allowed\",\n            [Button]: {\n                color: \"var(--mdc-theme-on-background)\",\n                \">svg\": {\n                    color: \"var(--mdc-theme-on-background)\"\n                }\n            }\n        }\n    };\n});\n\ninterface Props {\n    children: React.ReactNode;\n    className?: string;\n    maxWidth?: `${string}px`;\n}\n\ninterface PropsWithClick extends Props {\n    href?: never;\n    target?: never;\n    onClick: (ev: React.MouseEvent) => void;\n}\n\ninterface PropsWithHref extends Props {\n    href: string;\n    target: \"_blank\" | string;\n    onClick?: never;\n}\n\nexport const ButtonLink: React.VFC<PropsWithClick | PropsWithHref> = props => {\n    const { children, href, target, onClick, className, ...styles } = props;\n    return (\n        <Container className={className} {...styles}>\n            <Button href={href} target={target} onClick={onClick}>\n                {children}\n            </Button>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AAA0B;AAE1B,IAAMA,MAAW,oBAAGC,eAAM,EAAC,GAAG;EAAA;EAAA;AAAA,GAAE;EAC5BC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,EAAE;EACVC,UAAU,EAAE,GAAG;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,aAAa,EAAE,OAAO;EACtBC,aAAa,EAAE,WAAW;EAC1BC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EACxBC,MAAM,EAAE,SAAS;EACjBC,KAAK,EAAE,0BAA0B;EACjC,QAAQ,EAAE;IACNC,WAAW,EAAE,MAAM;IACnBD,KAAK,EAAE;EACX,CAAC;EACD,SAAS,EAAE;IACPE,cAAc,EAAE;EACpB;AACJ,CAAC,CAAC;AAEF,IAAMC,SAAS,oBAAGd,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE,gBAAyB;EAAA,IAAtBe,QAAQ,QAARA,QAAQ;EACvC,OAAO;IACHA,QAAQ,EAAEA,QAAQ,IAAI,OAAO;IAC7BC,KAAK,EAAE,MAAM;IACbf,OAAO,EAAE,MAAM;IACfgB,aAAa,EAAE,KAAK;IACpBT,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,eAAe,oCACVV,MAAM,EAAG;MACN,OAAO,EAAE;QACLS,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBR,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE;UACNW,WAAW,EAAE;QACjB;MACJ;IACJ,CAAC,CACJ;IACD,YAAY;MACRM,aAAa,EAAE,MAAM;MACrBR,MAAM,EAAE;IAAa,GACpBX,MAAM,EAAG;MACNY,KAAK,EAAE,gCAAgC;MACvC,MAAM,EAAE;QACJA,KAAK,EAAE;MACX;IACJ,CAAC;EAET,CAAC;AACL,CAAC,CAAC;AAoBK,IAAMQ,UAAqD,GAAG,SAAxDA,UAAqD,CAAGC,KAAK,EAAI;EAC1E,IAAQC,QAAQ,GAAkDD,KAAK,CAA/DC,QAAQ;IAAEC,IAAI,GAA4CF,KAAK,CAArDE,IAAI;IAAEC,MAAM,GAAoCH,KAAK,CAA/CG,MAAM;IAAEC,OAAO,GAA2BJ,KAAK,CAAvCI,OAAO;IAAEC,SAAS,GAAgBL,KAAK,CAA9BK,SAAS;IAAKC,MAAM,0CAAKN,KAAK;EACvE,oBACI,6BAAC,SAAS;IAAC,SAAS,EAAEK;EAAU,GAAKC,MAAM,gBACvC,6BAAC,MAAM;IAAC,IAAI,EAAEJ,IAAK;IAAC,MAAM,EAAEC,MAAO;IAAC,OAAO,EAAEC;EAAQ,GAChDH,QAAQ,CACJ,CACD;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsModel } from "../../../../../../../types";
+interface Props {
+    models: CmsModel[];
+    onClick: (modelId: string) => void;
+}
+export declare const OptionsModelList: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsModelList = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var _Elevation = require("@webiny/ui/Elevation");
+var _OptionsModelListItem = require("./OptionsModelListItem");
+var _downArrow = require("../assets/down-arrow.svg");
+var Container = /*#__PURE__*/(0, _styled.default)("span", {
+  target: "e94sp4o0",
+  label: "Container"
+})({
+  display: "flex",
+  marginLeft: "5px",
+  width: 32,
+  ">svg": {
+    color: "var(--mdc-theme-primary)",
+    width: "24px",
+    height: "24px"
+  }
+});
+var ModelsContainer = /*#__PURE__*/(0, _styled.default)(_Elevation.Elevation, {
+  target: "e94sp4o1",
+  label: "ModelsContainer"
+})({
+  position: "absolute",
+  zIndex: 1,
+  top: "40px",
+  left: 0,
+  width: "215px",
+  backgroundColor: "#FFFFFF",
+  display: "flex",
+  flexDirection: "column"
+});
+var OptionsModelList = function OptionsModelList(_ref) {
+  var models = _ref.models,
+    onClick = _ref.onClick;
+  if (models.length <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_downArrow.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(ModelsContainer, {
+    z: 1
+  }, models.map(function (model) {
+    return /*#__PURE__*/_react.default.createElement(_OptionsModelListItem.OptionsModelListItem, {
+      onClick: onClick,
+      key: "model-".concat(model.modelId),
+      model: model
+    });
+  })));
+};
+exports.OptionsModelList = OptionsModelList;

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled","display","marginLeft","width","color","height","ModelsContainer","Elevation","position","zIndex","top","left","backgroundColor","flexDirection","OptionsModelList","models","onClick","length","map","model","modelId"],"sources":["OptionsModelList.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { CmsModel } from \"~/types\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { OptionsModelListItem } from \"./OptionsModelListItem\";\nimport { ReactComponent as DownIcon } from \"../assets/down-arrow.svg\";\n\nconst Container = styled(\"span\")({\n    display: \"flex\",\n    marginLeft: \"5px\",\n    width: 32,\n    \">svg\": {\n        color: \"var(--mdc-theme-primary)\",\n        width: \"24px\",\n        height: \"24px\"\n    }\n});\nconst ModelsContainer = styled(Elevation)({\n    position: \"absolute\",\n    zIndex: 1,\n    top: \"40px\",\n    left: 0,\n    width: \"215px\",\n    backgroundColor: \"#FFFFFF\",\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\ninterface Props {\n    models: CmsModel[];\n    onClick: (modelId: string) => void;\n}\nexport const OptionsModelList: React.VFC<Props> = ({ models, onClick }) => {\n    if (models.length <= 1) {\n        return null;\n    }\n\n    return (\n        <>\n            <Container>\n                <DownIcon />\n            </Container>\n            <ModelsContainer z={1}>\n                {models.map(model => {\n                    return (\n                        <OptionsModelListItem\n                            onClick={onClick}\n                            key={`model-${model.modelId}`}\n                            model={model}\n                        />\n                    );\n                })}\n            </ModelsContainer>\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAEA,IAAMA,SAAS,oBAAGC,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,GAAE;EAC7BC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE,EAAE;EACT,MAAM,EAAE;IACJC,KAAK,EAAE,0BAA0B;IACjCD,KAAK,EAAE,MAAM;IACbE,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AACF,IAAMC,eAAe,oBAAGN,eAAM,EAACO,oBAAS;EAAA;EAAA;AAAA,GAAE;EACtCC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE,CAAC;EACTC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,CAAC;EACPR,KAAK,EAAE,OAAO;EACdS,eAAe,EAAE,SAAS;EAC1BX,OAAO,EAAE,MAAM;EACfY,aAAa,EAAE;AACnB,CAAC,CAAC;AAMK,IAAMC,gBAAkC,GAAG,SAArCA,gBAAkC,OAA4B;EAAA,IAAtBC,MAAM,QAANA,MAAM;IAAEC,OAAO,QAAPA,OAAO;EAChE,IAAID,MAAM,CAACE,MAAM,IAAI,CAAC,EAAE;IACpB,OAAO,IAAI;EACf;EAEA,oBACI,yEACI,6BAAC,SAAS,qBACN,6BAAC,yBAAQ,OAAG,CACJ,eACZ,6BAAC,eAAe;IAAC,CAAC,EAAE;EAAE,GACjBF,MAAM,CAACG,GAAG,CAAC,UAAAC,KAAK,EAAI;IACjB,oBACI,6BAAC,0CAAoB;MACjB,OAAO,EAAEH,OAAQ;MACjB,GAAG,kBAAWG,KAAK,CAACC,OAAO,CAAG;MAC9B,KAAK,EAAED;IAAM,EACf;EAEV,CAAC,CAAC,CACY,CACnB;AAEX,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsModel } from "../../../../../../../types";
+interface Props {
+    model: Pick<CmsModel, "modelId" | "name" | "description" | "icon">;
+    onClick: (modelId: string) => void;
+}
+export declare const OptionsModelListItem: React.VFC<Props>;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.js

@@ -0,0 +1,98 @@
+"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.OptionsModelListItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var Title = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eeo17o80",
+  label: "Title"
+})({
+  width: "100%",
+  boxSizing: "border-box",
+  paddingTop: 5,
+  "&.hasDescription": {
+    paddingTop: 0
+  }
+});
+var Content = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eeo17o81",
+  label: "Content"
+})({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+});
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eeo17o82",
+  label: "Container"
+})({
+  color: "--var(mdc-theme-primary)",
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  cursor: "pointer",
+  padding: 15,
+  boxSizing: "border-box",
+  borderBottom: "1px solid var(--mdc-theme-background)",
+  ":hover": {
+    backgroundColor: "var(--mdc-theme-background)"
+  },
+  "&:last-of-type": {
+    borderBottom: "none"
+  }
+});
+var Description = /*#__PURE__*/(0, _styled.default)("p", {
+  target: "eeo17o83",
+  label: "Description"
+})({
+  fontSize: 12,
+  marginTop: 10,
+  lineHeight: "125%",
+  color: "#666"
+});
+var Icon = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eeo17o84",
+  label: "Icon"
+})({
+  width: "24px",
+  height: "24px",
+  marginRight: "15px",
+  flex: "0 0 24px",
+  svg: {
+    color: "var(--mdc-theme-text-icon-on-light)",
+    width: "100%",
+    height: "auto",
+    maxWidth: 24,
+    maxHeight: 24
+  }
+});
+var DisplayIcon = function DisplayIcon(_ref) {
+  var model = _ref.model;
+  if (!model.icon) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: (model.icon || "").split("/")
+  });
+};
+var OptionsModelListItem = function OptionsModelListItem(_ref2) {
+  var model = _ref2.model,
+    originalOnClick = _ref2.onClick;
+  var onClick = (0, _react.useCallback)(function () {
+    originalOnClick(model.modelId);
+  }, [originalOnClick]);
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(DisplayIcon, {
+    model: model
+  })), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(Title, {
+    className: model.description && "hasDescription"
+  }, model.name), model.description && /*#__PURE__*/_react.default.createElement(Description, null, model.description)));
+};
+exports.OptionsModelListItem = OptionsModelListItem;

package/admin/plugins/fieldRenderers/ref/advanced/components/options/OptionsModelListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Title","styled","width","boxSizing","paddingTop","Content","display","flexDirection","Container","color","cursor","padding","borderBottom","backgroundColor","Description","fontSize","marginTop","lineHeight","Icon","height","marginRight","flex","svg","maxWidth","maxHeight","DisplayIcon","model","icon","split","OptionsModelListItem","originalOnClick","onClick","useCallback","modelId","description","name"],"sources":["OptionsModelListItem.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { CmsModel } from \"~/types\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { IconProp } from \"@fortawesome/fontawesome-svg-core\";\n\nconst Title = styled(\"div\")({\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    paddingTop: 5,\n    \"&.hasDescription\": {\n        paddingTop: 0\n    }\n});\n\nconst Content = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\"\n});\n\nconst Container = styled(\"div\")({\n    color: \"--var(mdc-theme-primary)\",\n    display: \"flex\",\n    flexDirection: \"row\",\n    width: \"100%\",\n    cursor: \"pointer\",\n    padding: 15,\n    boxSizing: \"border-box\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    \":hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\"\n    },\n    \"&:last-of-type\": {\n        borderBottom: \"none\"\n    }\n});\n\nconst Description = styled(\"p\")({\n    fontSize: 12,\n    marginTop: 10,\n    lineHeight: \"125%\",\n    color: \"#666\"\n});\n\nconst Icon = styled(\"div\")({\n    width: \"24px\",\n    height: \"24px\",\n    marginRight: \"15px\",\n    flex: \"0 0 24px\",\n    svg: {\n        color: \"var(--mdc-theme-text-icon-on-light)\",\n        width: \"100%\",\n        height: \"auto\",\n        maxWidth: 24,\n        maxHeight: 24\n    }\n});\n\ninterface IconProps {\n    model: Pick<CmsModel, \"icon\">;\n}\n\nconst DisplayIcon: React.VFC<IconProps> = ({ model }) => {\n    if (!model.icon) {\n        return null;\n    }\n    return <FontAwesomeIcon icon={(model.icon || \"\").split(\"/\") as IconProp} />;\n};\n\ninterface Props {\n    model: Pick<CmsModel, \"modelId\" | \"name\" | \"description\" | \"icon\">;\n    onClick: (modelId: string) => void;\n}\n\nexport const OptionsModelListItem: React.VFC<Props> = ({ model, onClick: originalOnClick }) => {\n    const onClick = useCallback(() => {\n        originalOnClick(model.modelId);\n    }, [originalOnClick]);\n    return (\n        <Container onClick={onClick}>\n            <Icon>\n                <DisplayIcon model={model} />\n            </Icon>\n            <Content>\n                <Title className={model.description && \"hasDescription\"}>{model.name}</Title>\n                {model.description && <Description>{model.description}</Description>}\n            </Content>\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AAGA,IAAMA,KAAK,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACxBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,YAAY;EACvBC,UAAU,EAAE,CAAC;EACb,kBAAkB,EAAE;IAChBA,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAEF,IAAMC,OAAO,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BK,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBL,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMM,SAAS,oBAAGP,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC5BQ,KAAK,EAAE,0BAA0B;EACjCH,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBL,KAAK,EAAE,MAAM;EACbQ,MAAM,EAAE,SAAS;EACjBC,OAAO,EAAE,EAAE;EACXR,SAAS,EAAE,YAAY;EACvBS,YAAY,EAAE,uCAAuC;EACrD,QAAQ,EAAE;IACNC,eAAe,EAAE;EACrB,CAAC;EACD,gBAAgB,EAAE;IACdD,YAAY,EAAE;EAClB;AACJ,CAAC,CAAC;AAEF,IAAME,WAAW,oBAAGb,eAAM,EAAC,GAAG;EAAA;EAAA;AAAA,GAAE;EAC5Bc,QAAQ,EAAE,EAAE;EACZC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,MAAM;EAClBR,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMS,IAAI,oBAAGjB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvBC,KAAK,EAAE,MAAM;EACbiB,MAAM,EAAE,MAAM;EACdC,WAAW,EAAE,MAAM;EACnBC,IAAI,EAAE,UAAU;EAChBC,GAAG,EAAE;IACDb,KAAK,EAAE,qCAAqC;IAC5CP,KAAK,EAAE,MAAM;IACbiB,MAAM,EAAE,MAAM;IACdI,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAMF,IAAMC,WAAiC,GAAG,SAApCA,WAAiC,OAAkB;EAAA,IAAZC,KAAK,QAALA,KAAK;EAC9C,IAAI,CAACA,KAAK,CAACC,IAAI,EAAE;IACb,OAAO,IAAI;EACf;EACA,oBAAO,6BAAC,iCAAe;IAAC,IAAI,EAAE,CAACD,KAAK,CAACC,IAAI,IAAI,EAAE,EAAEC,KAAK,CAAC,GAAG;EAAc,EAAG;AAC/E,CAAC;AAOM,IAAMC,oBAAsC,GAAG,SAAzCA,oBAAsC,QAA4C;EAAA,IAAtCH,KAAK,SAALA,KAAK;IAAWI,eAAe,SAAxBC,OAAO;EACnE,IAAMA,OAAO,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAC9BF,eAAe,CAACJ,KAAK,CAACO,OAAO,CAAC;EAClC,CAAC,EAAE,CAACH,eAAe,CAAC,CAAC;EACrB,oBACI,6BAAC,SAAS;IAAC,OAAO,EAAEC;EAAQ,gBACxB,6BAAC,IAAI,qBACD,6BAAC,WAAW;IAAC,KAAK,EAAEL;EAAM,EAAG,CAC1B,eACP,6BAAC,OAAO,qBACJ,6BAAC,KAAK;IAAC,SAAS,EAAEA,KAAK,CAACQ,WAAW,IAAI;EAAiB,GAAER,KAAK,CAACS,IAAI,CAAS,EAC5ET,KAAK,CAACQ,WAAW,iBAAI,6BAAC,WAAW,QAAER,KAAK,CAACQ,WAAW,CAAe,CAC9D,CACF;AAEpB,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.d.ts

@@ -0,0 +1,2 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../../types";
+export declare const createAdvancedSingleRenderer: () => CmsEditorFieldRendererPlugin;