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

package/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.js

@@ -1,117 +1,45 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TemplateItem = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _appAdmin = require("@webiny/app-admin");
-var _Typography = require("@webiny/ui/Typography");
-var _Button = require("@webiny/ui/Button");
-var _TemplateIcon = require("./TemplateIcon");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var CardContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e11lfux75"
-} : {
-  target: "e11lfux75",
-  label: "CardContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "qkl7ol",
-  styles: "display:flex;flex-direction:column;width:170px;height:200px;margin:5px;border:1px solid var(--mdc-theme-background)"
-} : {
-  name: "qkl7ol",
-  styles: "display:flex;flex-direction:column;width:170px;height:200px;margin:5px;border:1px solid var(--mdc-theme-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdDIiwiZmlsZSI6IlRlbXBsYXRlSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IG1ha2VEZWNvcmF0YWJsZSB9IGZyb20gXCJAd2ViaW55L2FwcC1hZG1pblwiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IEJ1dHRvblNlY29uZGFyeSB9IGZyb20gXCJAd2ViaW55L3VpL0J1dHRvblwiO1xuaW1wb3J0IHsgQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSB9IGZyb20gXCJ+L3R5cGVzXCI7XG5pbXBvcnQgeyBUZW1wbGF0ZUljb24gfSBmcm9tIFwifi9hZG1pbi9wbHVnaW5zL2ZpZWxkUmVuZGVyZXJzL2R5bmFtaWNab25lL1RlbXBsYXRlSWNvblwiO1xuXG5jb25zdCBDYXJkQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgd2lkdGg6IDE3MHB4O1xuICAgIGhlaWdodDogMjAwcHg7XG4gICAgbWFyZ2luOiA1cHg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLWJhY2tncm91bmQpO1xuYDtcblxuY29uc3QgQ2FyZEljb24gPSBzdHlsZWQuZGl2YFxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBwYWRkaW5nOiAyNXB4O1xuICAgIGZvbnQtc2l6ZTogMS41cmVtO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRCb2R5ID0gc3R5bGVkLmRpdmBcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgZmxleDogMTtcbiAgICBwYWRkaW5nOiAxMHB4O1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG5gO1xuXG5jb25zdCBDYXJkVGl0bGUgPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbmA7XG5cbmNvbnN0IENhcmREZXNjcmlwdGlvbiA9IHN0eWxlZChUeXBvZ3JhcGh5KWBcbiAgICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmNvbnN0IENhcmRCdXR0b24gPSBzdHlsZWQoQnV0dG9uU2Vjb25kYXJ5KWBcbiAgICBmb250LXNpemU6IDAuN3JlbTtcbiAgICBsaW5lLWhlaWdodDogMTAwJTtcbiAgICBtYXJnaW4tdG9wOiBhdXRvO1xuYDtcblxuZXhwb3J0IGludGVyZmFjZSBUZW1wbGF0ZUNhcmRQcm9wcyB7XG4gICAgdGVtcGxhdGU6IENtc0R5bmFtaWNab25lVGVtcGxhdGU7XG4gICAgb25UZW1wbGF0ZTogKHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgVGVtcGxhdGVJdGVtID0gbWFrZURlY29yYXRhYmxlKFxuICAgIFwiVGVtcGxhdGVJdGVtXCIsXG4gICAgKHsgdGVtcGxhdGUsIG9uVGVtcGxhdGUgfTogVGVtcGxhdGVDYXJkUHJvcHMpID0+IHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxDYXJkQ29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxDYXJkSWNvbj5cbiAgICAgICAgICAgICAgICAgICAgPFRlbXBsYXRlSWNvbiBpY29uPXt0ZW1wbGF0ZS5pY29ufSAvPlxuICAgICAgICAgICAgICAgIDwvQ2FyZEljb24+XG4gICAgICAgICAgICAgICAgPENhcmRCb2R5PlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZFRpdGxlIHRhZz17XCJwXCJ9IHVzZT17XCJzdWJ0aXRsZTJcIn0+XG4gICAgICAgICAgICAgICAgICAgICAgICB7dGVtcGxhdGUubmFtZX1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkVGl0bGU+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkRGVzY3JpcHRpb24gdGFnPXtcInBcIn0gdXNlPXtcImJvZHkyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLmRlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgICA8L0NhcmREZXNjcmlwdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRCdXR0b24gb25DbGljaz17KCkgPT4gb25UZW1wbGF0ZSh0ZW1wbGF0ZSl9PisgSW5zZXJ0IFRlbXBsYXRlPC9DYXJkQnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvQ2FyZEJvZHk+XG4gICAgICAgICAgICA8L0NhcmRDb250YWluZXI+XG4gICAgICAgICk7XG4gICAgfVxuKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CardIcon = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e11lfux74"
-} : {
-  target: "e11lfux74",
-  label: "CardIcon"
-})(process.env.NODE_ENV === "production" ? {
-  name: "rjec2i",
-  styles: "text-align:center;padding:25px;font-size:1.5rem;background-color:var(--mdc-theme-background)"
-} : {
-  name: "rjec2i",
-  styles: "text-align:center;padding:25px;font-size:1.5rem;background-color:var(--mdc-theme-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIyQiIsImZpbGUiOiJUZW1wbGF0ZUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgVGVtcGxhdGVJY29uIH0gZnJvbSBcIn4vYWRtaW4vcGx1Z2lucy9maWVsZFJlbmRlcmVycy9keW5hbWljWm9uZS9UZW1wbGF0ZUljb25cIjtcblxuY29uc3QgQ2FyZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxNzBweDtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRJY29uID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMjVweDtcbiAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZCk7XG5gO1xuXG5jb25zdCBDYXJkQm9keSA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXg6IDE7XG4gICAgcGFkZGluZzogMTBweDtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuYDtcblxuY29uc3QgQ2FyZFRpdGxlID0gc3R5bGVkKFR5cG9ncmFwaHkpYFxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG5gO1xuXG5jb25zdCBDYXJkRGVzY3JpcHRpb24gPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5jb25zdCBDYXJkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblNlY29uZGFyeSlgXG4gICAgZm9udC1zaXplOiAwLjdyZW07XG4gICAgbGluZS1oZWlnaHQ6IDEwMCU7XG4gICAgbWFyZ2luLXRvcDogYXV0bztcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVDYXJkUHJvcHMge1xuICAgIHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlO1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IFRlbXBsYXRlSXRlbSA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIlRlbXBsYXRlSXRlbVwiLFxuICAgICh7IHRlbXBsYXRlLCBvblRlbXBsYXRlIH06IFRlbXBsYXRlQ2FyZFByb3BzKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Q2FyZENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8Q2FyZEljb24+XG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUljb24gaWNvbj17dGVtcGxhdGUuaWNvbn0gLz5cbiAgICAgICAgICAgICAgICA8L0NhcmRJY29uPlxuICAgICAgICAgICAgICAgIDxDYXJkQm9keT5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRUaXRsZSB0YWc9e1wicFwifSB1c2U9e1wic3VidGl0bGUyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIDwvQ2FyZFRpdGxlPlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZERlc2NyaXB0aW9uIHRhZz17XCJwXCJ9IHVzZT17XCJib2R5MlwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt0ZW1wbGF0ZS5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkRGVzY3JpcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkQnV0dG9uIG9uQ2xpY2s9eygpID0+IG9uVGVtcGxhdGUodGVtcGxhdGUpfT4rIEluc2VydCBUZW1wbGF0ZTwvQ2FyZEJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L0NhcmRCb2R5PlxuICAgICAgICAgICAgPC9DYXJkQ29udGFpbmVyPlxuICAgICAgICApO1xuICAgIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CardBody = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e11lfux73"
-} : {
-  target: "e11lfux73",
-  label: "CardBody"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ezosu2",
-  styles: "display:flex;flex-direction:column;flex:1;padding:10px;text-align:left"
-} : {
-  name: "ezosu2",
-  styles: "display:flex;flex-direction:column;flex:1;padding:10px;text-align:left",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0IyQiIsImZpbGUiOiJUZW1wbGF0ZUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgVGVtcGxhdGVJY29uIH0gZnJvbSBcIn4vYWRtaW4vcGx1Z2lucy9maWVsZFJlbmRlcmVycy9keW5hbWljWm9uZS9UZW1wbGF0ZUljb25cIjtcblxuY29uc3QgQ2FyZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxNzBweDtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRJY29uID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMjVweDtcbiAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZCk7XG5gO1xuXG5jb25zdCBDYXJkQm9keSA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXg6IDE7XG4gICAgcGFkZGluZzogMTBweDtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuYDtcblxuY29uc3QgQ2FyZFRpdGxlID0gc3R5bGVkKFR5cG9ncmFwaHkpYFxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG5gO1xuXG5jb25zdCBDYXJkRGVzY3JpcHRpb24gPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5jb25zdCBDYXJkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblNlY29uZGFyeSlgXG4gICAgZm9udC1zaXplOiAwLjdyZW07XG4gICAgbGluZS1oZWlnaHQ6IDEwMCU7XG4gICAgbWFyZ2luLXRvcDogYXV0bztcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVDYXJkUHJvcHMge1xuICAgIHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlO1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IFRlbXBsYXRlSXRlbSA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIlRlbXBsYXRlSXRlbVwiLFxuICAgICh7IHRlbXBsYXRlLCBvblRlbXBsYXRlIH06IFRlbXBsYXRlQ2FyZFByb3BzKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Q2FyZENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8Q2FyZEljb24+XG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUljb24gaWNvbj17dGVtcGxhdGUuaWNvbn0gLz5cbiAgICAgICAgICAgICAgICA8L0NhcmRJY29uPlxuICAgICAgICAgICAgICAgIDxDYXJkQm9keT5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRUaXRsZSB0YWc9e1wicFwifSB1c2U9e1wic3VidGl0bGUyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIDwvQ2FyZFRpdGxlPlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZERlc2NyaXB0aW9uIHRhZz17XCJwXCJ9IHVzZT17XCJib2R5MlwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt0ZW1wbGF0ZS5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkRGVzY3JpcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkQnV0dG9uIG9uQ2xpY2s9eygpID0+IG9uVGVtcGxhdGUodGVtcGxhdGUpfT4rIEluc2VydCBUZW1wbGF0ZTwvQ2FyZEJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L0NhcmRCb2R5PlxuICAgICAgICAgICAgPC9DYXJkQ29udGFpbmVyPlxuICAgICAgICApO1xuICAgIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CardTitle = /*#__PURE__*/(0, _base.default)(_Typography.Typography, process.env.NODE_ENV === "production" ? {
-  target: "e11lfux72"
-} : {
-  target: "e11lfux72",
-  label: "CardTitle"
-})(process.env.NODE_ENV === "production" ? {
-  name: "pr10xp",
-  styles: "margin-bottom:10px"
-} : {
-  name: "pr10xp",
-  styles: "margin-bottom:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NvQyIsImZpbGUiOiJUZW1wbGF0ZUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgVGVtcGxhdGVJY29uIH0gZnJvbSBcIn4vYWRtaW4vcGx1Z2lucy9maWVsZFJlbmRlcmVycy9keW5hbWljWm9uZS9UZW1wbGF0ZUljb25cIjtcblxuY29uc3QgQ2FyZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxNzBweDtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRJY29uID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMjVweDtcbiAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZCk7XG5gO1xuXG5jb25zdCBDYXJkQm9keSA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXg6IDE7XG4gICAgcGFkZGluZzogMTBweDtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuYDtcblxuY29uc3QgQ2FyZFRpdGxlID0gc3R5bGVkKFR5cG9ncmFwaHkpYFxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG5gO1xuXG5jb25zdCBDYXJkRGVzY3JpcHRpb24gPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5jb25zdCBDYXJkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblNlY29uZGFyeSlgXG4gICAgZm9udC1zaXplOiAwLjdyZW07XG4gICAgbGluZS1oZWlnaHQ6IDEwMCU7XG4gICAgbWFyZ2luLXRvcDogYXV0bztcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVDYXJkUHJvcHMge1xuICAgIHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlO1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IFRlbXBsYXRlSXRlbSA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIlRlbXBsYXRlSXRlbVwiLFxuICAgICh7IHRlbXBsYXRlLCBvblRlbXBsYXRlIH06IFRlbXBsYXRlQ2FyZFByb3BzKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Q2FyZENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8Q2FyZEljb24+XG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUljb24gaWNvbj17dGVtcGxhdGUuaWNvbn0gLz5cbiAgICAgICAgICAgICAgICA8L0NhcmRJY29uPlxuICAgICAgICAgICAgICAgIDxDYXJkQm9keT5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRUaXRsZSB0YWc9e1wicFwifSB1c2U9e1wic3VidGl0bGUyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIDwvQ2FyZFRpdGxlPlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZERlc2NyaXB0aW9uIHRhZz17XCJwXCJ9IHVzZT17XCJib2R5MlwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt0ZW1wbGF0ZS5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkRGVzY3JpcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkQnV0dG9uIG9uQ2xpY2s9eygpID0+IG9uVGVtcGxhdGUodGVtcGxhdGUpfT4rIEluc2VydCBUZW1wbGF0ZTwvQ2FyZEJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L0NhcmRCb2R5PlxuICAgICAgICAgICAgPC9DYXJkQ29udGFpbmVyPlxuICAgICAgICApO1xuICAgIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CardDescription = /*#__PURE__*/(0, _base.default)(_Typography.Typography, process.env.NODE_ENV === "production" ? {
-  target: "e11lfux71"
-} : {
-  target: "e11lfux71",
-  label: "CardDescription"
-})(process.env.NODE_ENV === "production" ? {
-  name: "jkd7yu",
-  styles: "text-overflow:ellipsis;margin-bottom:10px;white-space:nowrap;overflow:hidden"
-} : {
-  name: "jkd7yu",
-  styles: "text-overflow:ellipsis;margin-bottom:10px;white-space:nowrap;overflow:hidden",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0MwQyIsImZpbGUiOiJUZW1wbGF0ZUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgVGVtcGxhdGVJY29uIH0gZnJvbSBcIn4vYWRtaW4vcGx1Z2lucy9maWVsZFJlbmRlcmVycy9keW5hbWljWm9uZS9UZW1wbGF0ZUljb25cIjtcblxuY29uc3QgQ2FyZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxNzBweDtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRJY29uID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMjVweDtcbiAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZCk7XG5gO1xuXG5jb25zdCBDYXJkQm9keSA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXg6IDE7XG4gICAgcGFkZGluZzogMTBweDtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuYDtcblxuY29uc3QgQ2FyZFRpdGxlID0gc3R5bGVkKFR5cG9ncmFwaHkpYFxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG5gO1xuXG5jb25zdCBDYXJkRGVzY3JpcHRpb24gPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5jb25zdCBDYXJkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblNlY29uZGFyeSlgXG4gICAgZm9udC1zaXplOiAwLjdyZW07XG4gICAgbGluZS1oZWlnaHQ6IDEwMCU7XG4gICAgbWFyZ2luLXRvcDogYXV0bztcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVDYXJkUHJvcHMge1xuICAgIHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlO1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IFRlbXBsYXRlSXRlbSA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIlRlbXBsYXRlSXRlbVwiLFxuICAgICh7IHRlbXBsYXRlLCBvblRlbXBsYXRlIH06IFRlbXBsYXRlQ2FyZFByb3BzKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Q2FyZENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8Q2FyZEljb24+XG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUljb24gaWNvbj17dGVtcGxhdGUuaWNvbn0gLz5cbiAgICAgICAgICAgICAgICA8L0NhcmRJY29uPlxuICAgICAgICAgICAgICAgIDxDYXJkQm9keT5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRUaXRsZSB0YWc9e1wicFwifSB1c2U9e1wic3VidGl0bGUyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIDwvQ2FyZFRpdGxlPlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZERlc2NyaXB0aW9uIHRhZz17XCJwXCJ9IHVzZT17XCJib2R5MlwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt0ZW1wbGF0ZS5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkRGVzY3JpcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkQnV0dG9uIG9uQ2xpY2s9eygpID0+IG9uVGVtcGxhdGUodGVtcGxhdGUpfT4rIEluc2VydCBUZW1wbGF0ZTwvQ2FyZEJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L0NhcmRCb2R5PlxuICAgICAgICAgICAgPC9DYXJkQ29udGFpbmVyPlxuICAgICAgICApO1xuICAgIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var CardButton = /*#__PURE__*/(0, _base.default)(_Button.ButtonSecondary, process.env.NODE_ENV === "production" ? {
-  target: "e11lfux70"
-} : {
-  target: "e11lfux70",
-  label: "CardButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82d3qa",
-  styles: "font-size:0.7rem;line-height:100%;margin-top:auto"
-} : {
-  name: "82d3qa",
-  styles: "font-size:0.7rem;line-height:100%;margin-top:auto",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRlbXBsYXRlSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkMwQyIsImZpbGUiOiJUZW1wbGF0ZUl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IENtc0R5bmFtaWNab25lVGVtcGxhdGUgfSBmcm9tIFwifi90eXBlc1wiO1xuaW1wb3J0IHsgVGVtcGxhdGVJY29uIH0gZnJvbSBcIn4vYWRtaW4vcGx1Z2lucy9maWVsZFJlbmRlcmVycy9keW5hbWljWm9uZS9UZW1wbGF0ZUljb25cIjtcblxuY29uc3QgQ2FyZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIHdpZHRoOiAxNzBweDtcbiAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIG1hcmdpbjogNXB4O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1iYWNrZ3JvdW5kKTtcbmA7XG5cbmNvbnN0IENhcmRJY29uID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgcGFkZGluZzogMjVweDtcbiAgICBmb250LXNpemU6IDEuNXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZCk7XG5gO1xuXG5jb25zdCBDYXJkQm9keSA9IHN0eWxlZC5kaXZgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXg6IDE7XG4gICAgcGFkZGluZzogMTBweDtcbiAgICB0ZXh0LWFsaWduOiBsZWZ0O1xuYDtcblxuY29uc3QgQ2FyZFRpdGxlID0gc3R5bGVkKFR5cG9ncmFwaHkpYFxuICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG5gO1xuXG5jb25zdCBDYXJkRGVzY3JpcHRpb24gPSBzdHlsZWQoVHlwb2dyYXBoeSlgXG4gICAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5jb25zdCBDYXJkQnV0dG9uID0gc3R5bGVkKEJ1dHRvblNlY29uZGFyeSlgXG4gICAgZm9udC1zaXplOiAwLjdyZW07XG4gICAgbGluZS1oZWlnaHQ6IDEwMCU7XG4gICAgbWFyZ2luLXRvcDogYXV0bztcbmA7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGVtcGxhdGVDYXJkUHJvcHMge1xuICAgIHRlbXBsYXRlOiBDbXNEeW5hbWljWm9uZVRlbXBsYXRlO1xuICAgIG9uVGVtcGxhdGU6ICh0ZW1wbGF0ZTogQ21zRHluYW1pY1pvbmVUZW1wbGF0ZSkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGNvbnN0IFRlbXBsYXRlSXRlbSA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIlRlbXBsYXRlSXRlbVwiLFxuICAgICh7IHRlbXBsYXRlLCBvblRlbXBsYXRlIH06IFRlbXBsYXRlQ2FyZFByb3BzKSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8Q2FyZENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8Q2FyZEljb24+XG4gICAgICAgICAgICAgICAgICAgIDxUZW1wbGF0ZUljb24gaWNvbj17dGVtcGxhdGUuaWNvbn0gLz5cbiAgICAgICAgICAgICAgICA8L0NhcmRJY29uPlxuICAgICAgICAgICAgICAgIDxDYXJkQm9keT5cbiAgICAgICAgICAgICAgICAgICAgPENhcmRUaXRsZSB0YWc9e1wicFwifSB1c2U9e1wic3VidGl0bGUyXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RlbXBsYXRlLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIDwvQ2FyZFRpdGxlPlxuICAgICAgICAgICAgICAgICAgICA8Q2FyZERlc2NyaXB0aW9uIHRhZz17XCJwXCJ9IHVzZT17XCJib2R5MlwifT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt0ZW1wbGF0ZS5kZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICAgICAgPC9DYXJkRGVzY3JpcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkQnV0dG9uIG9uQ2xpY2s9eygpID0+IG9uVGVtcGxhdGUodGVtcGxhdGUpfT4rIEluc2VydCBUZW1wbGF0ZTwvQ2FyZEJ1dHRvbj5cbiAgICAgICAgICAgICAgICA8L0NhcmRCb2R5PlxuICAgICAgICAgICAgPC9DYXJkQ29udGFpbmVyPlxuICAgICAgICApO1xuICAgIH1cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var TemplateItem = exports.TemplateItem = (0, _appAdmin.makeDecoratable)("TemplateItem", function (_ref) {
-  var template = _ref.template,
-    onTemplate = _ref.onTemplate;
-  return /*#__PURE__*/_react.default.createElement(CardContainer, null, /*#__PURE__*/_react.default.createElement(CardIcon, null, /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
-    icon: template.icon
-  })), /*#__PURE__*/_react.default.createElement(CardBody, null, /*#__PURE__*/_react.default.createElement(CardTitle, {
-    tag: "p",
-    use: "subtitle2"
-  }, template.name), /*#__PURE__*/_react.default.createElement(CardDescription, {
-    tag: "p",
-    use: "body2"
-  }, template.description), /*#__PURE__*/_react.default.createElement(CardButton, {
-    onClick: function onClick() {
-      return onTemplate(template);
+import React, { useState } from "react";
+import { makeDecoratable } from "@webiny/app-admin";
+import { TemplateIcon } from "./TemplateIcon.js";
+import { Text, Button } from "@webiny/admin-ui";
+import { Dialog } from "@webiny/admin-ui";
+import { ReactComponent as PlusIcon } from "@webiny/icons/add_circle_outline.svg";
+export const TemplateItem = makeDecoratable("TemplateItem", ({
+  template,
+  onTemplate
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(TemplateIcon, {
+    icon: template.icon,
+    style: {
+      width: 40,
+      height: 40
     }
-  }, "+ Insert Template")));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "py-sm-extra px-md"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    className: "mb-xs text-neutral-primary font-semibold"
+  }, template.name), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "text-neutral-muted"
+  }, template.description))), isHovered && /*#__PURE__*/React.createElement(Dialog.Close, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer",
+    onClick: () => onTemplate(template)
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "lg",
+    variant: "primary",
+    icon: /*#__PURE__*/React.createElement(PlusIcon, null)
+  }, "Insert"))));
 });
 
 //# sourceMappingURL=TemplateItem.js.map

package/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_appAdmin","_Typography","_Button","_TemplateIcon","_EMOTION_STRINGIFIED_CSS_ERROR__","CardContainer","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","CardIcon","CardBody","CardTitle","Typography","CardDescription","CardButton","ButtonSecondary","TemplateItem","exports","makeDecoratable","_ref","template","onTemplate","createElement","TemplateIcon","icon","tag","use","description","onClick"],"sources":["TemplateItem.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonSecondary } from \"@webiny/ui/Button\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\n\nconst CardContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 170px;\n    height: 200px;\n    margin: 5px;\n    border: 1px solid var(--mdc-theme-background);\n`;\n\nconst CardIcon = styled.div`\n    text-align: center;\n    padding: 25px;\n    font-size: 1.5rem;\n    background-color: var(--mdc-theme-background);\n`;\n\nconst CardBody = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding: 10px;\n    text-align: left;\n`;\n\nconst CardTitle = styled(Typography)`\n    margin-bottom: 10px;\n`;\n\nconst CardDescription = styled(Typography)`\n    text-overflow: ellipsis;\n    margin-bottom: 10px;\n    white-space: nowrap;\n    overflow: hidden;\n`;\n\nconst CardButton = styled(ButtonSecondary)`\n    font-size: 0.7rem;\n    line-height: 100%;\n    margin-top: auto;\n`;\n\nexport interface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateItem = makeDecoratable(\n    \"TemplateItem\",\n    ({ template, onTemplate }: TemplateCardProps) => {\n        return (\n            <CardContainer>\n                <CardIcon>\n                    <TemplateIcon icon={template.icon} />\n                </CardIcon>\n                <CardBody>\n                    <CardTitle tag={\"p\"} use={\"subtitle2\"}>\n                        {template.name}\n                    </CardTitle>\n                    <CardDescription tag={\"p\"} use={\"body2\"}>\n                        {template.description}\n                    </CardDescription>\n                    <CardButton onClick={() => onTemplate(template)}>+ Insert Template</CardButton>\n                </CardBody>\n            </CardContainer>\n        );\n    }\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","makeDecoratable","TemplateIcon","Text","Button","Dialog","ReactComponent","PlusIcon","TemplateItem","template","onTemplate","isHovered","setIsHovered","createElement","onMouseEnter","onMouseLeave","className","icon","style","width","height","size","name","as","description","Close","asChild","onClick","variant"],"sources":["TemplateItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types.js\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js\";\nimport { Text, Button } from \"@webiny/admin-ui\";\nimport { Dialog } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\n\nexport interface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateItem = makeDecoratable(\n    \"TemplateItem\",\n    ({ template, onTemplate }: TemplateCardProps) => {\n        const [isHovered, setIsHovered] = useState(false);\n\n        return (\n            <div\n                onMouseEnter={() => setIsHovered(true)}\n                onMouseLeave={() => setIsHovered(false)}\n                className={\n                    \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n                }\n            >\n                <div>\n                    <div\n                        className={\n                            \"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"\n                        }\n                    >\n                        <TemplateIcon icon={template.icon} style={{ width: 40, height: 40 }} />\n                    </div>\n                    <div className={\"py-sm-extra px-md\"}>\n                        <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                            {template.name}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted\"}>\n                            {template.description}\n                        </Text>\n                    </div>\n                </div>\n\n                {isHovered && (\n                    <Dialog.Close asChild>\n                        <div\n                            className=\"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                            onClick={() => onTemplate(template)}\n                        >\n                            <Button size={\"lg\"} variant=\"primary\" icon={<PlusIcon />}>\n                                Insert\n                            </Button>\n                        </div>\n                    </Dialog.Close>\n                )}\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,YAAY;AACrB,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,IAAIC,QAAQ,QAAQ,sCAAsC;AAOjF,OAAO,MAAMC,YAAY,GAAGP,eAAe,CACvC,cAAc,EACd,CAAC;EAAEQ,QAAQ;EAAEC;AAA8B,CAAC,KAAK;EAC7C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAEjD,oBACID,KAAA,CAAAc,aAAA;IACIC,YAAY,EAAEA,CAAA,KAAMF,YAAY,CAAC,IAAI,CAAE;IACvCG,YAAY,EAAEA,CAAA,KAAMH,YAAY,CAAC,KAAK,CAAE;IACxCI,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAAc,aAAA,2BACId,KAAA,CAAAc,aAAA;IACIG,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAAc,aAAA,CAACX,YAAY;IAACe,IAAI,EAAER,QAAQ,CAACQ,IAAK;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EAAE,CAAE,CACrE,CAAC,eACNrB,KAAA,CAAAc,aAAA;IAAKG,SAAS,EAAE;EAAoB,gBAChCjB,KAAA,CAAAc,aAAA,CAACV,IAAI;IAACkB,IAAI,EAAE,IAAK;IAACL,SAAS,EAAE;EAA2C,GACnEP,QAAQ,CAACa,IACR,CAAC,eACPvB,KAAA,CAAAc,aAAA,CAACV,IAAI;IAACkB,IAAI,EAAE,IAAK;IAACE,EAAE,EAAE,KAAM;IAACP,SAAS,EAAE;EAAqB,GACxDP,QAAQ,CAACe,WACR,CACL,CACJ,CAAC,EAELb,SAAS,iBACNZ,KAAA,CAAAc,aAAA,CAACR,MAAM,CAACoB,KAAK;IAACC,OAAO;EAAA,gBACjB3B,KAAA,CAAAc,aAAA;IACIG,SAAS,EAAC,8EAA8E;IACxFW,OAAO,EAAEA,CAAA,KAAMjB,UAAU,CAACD,QAAQ;EAAE,gBAEpCV,KAAA,CAAAc,aAAA,CAACT,MAAM;IAACiB,IAAI,EAAE,IAAK;IAACO,OAAO,EAAC,SAAS;IAACX,IAAI,eAAElB,KAAA,CAAAc,aAAA,CAACN,QAAQ,MAAE;EAAE,GAAC,QAElD,CACP,CACK,CAEjB,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsDynamicZoneTemplate } from "@webiny/app-headless-cms-common/types";
+import type { CmsDynamicZoneTemplate } from "@webiny/app-headless-cms-common/types/index.js";
 export interface TemplateContext {
     template: CmsDynamicZoneTemplate;
 }

package/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js

@@ -1,27 +1,18 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TemplateProvider = void 0;
-exports.useTemplate = useTemplate;
-var _react = _interopRequireWildcard(require("react"));
-var TemplateContext = /*#__PURE__*/_react.default.createContext(undefined);
-var TemplateProvider = exports.TemplateProvider = function TemplateProvider(_ref) {
-  var template = _ref.template,
-    children = _ref.children;
-  var context = (0, _react.useMemo)(function () {
-    return {
-      template: template
-    };
-  }, [template.id]);
-  return /*#__PURE__*/_react.default.createElement(TemplateContext.Provider, {
+import React, { useMemo } from "react";
+const TemplateContext = /*#__PURE__*/React.createContext(undefined);
+export const TemplateProvider = ({
+  template,
+  children
+}) => {
+  const context = useMemo(() => ({
+    template
+  }), [template.id]);
+  return /*#__PURE__*/React.createElement(TemplateContext.Provider, {
     value: context
   }, children);
 };
-function useTemplate() {
-  return _react.default.useContext(TemplateContext);
+export function useTemplate() {
+  return React.useContext(TemplateContext);
 }
 
 //# sourceMappingURL=TemplateProvider.js.map

package/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","TemplateContext","React","createContext","undefined","TemplateProvider","exports","_ref","template","children","context","useMemo","id","default","createElement","Provider","value","useTemplate","useContext"],"sources":["TemplateProvider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { CmsDynamicZoneTemplate } from \"@webiny/app-headless-cms-common/types\";\n\nexport interface TemplateContext {\n    template: CmsDynamicZoneTemplate;\n}\n\nconst TemplateContext = React.createContext<TemplateContext | undefined>(undefined);\n\nexport interface TemplateProviderProps {\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const TemplateProvider = ({ template, children }: TemplateProviderProps) => {\n    const context = useMemo(() => ({ template }), [template.id]);\n    return <TemplateContext.Provider value={context}>{children}</TemplateContext.Provider>;\n};\n\nexport function useTemplate() {\n    return React.useContext(TemplateContext);\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAOA,IAAMC,eAAe,gBAAGC,cAAK,CAACC,aAAa,CAA8BC,SAAS,CAAC;AAO5E,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAAE,IAAA,EAAsD;EAAA,IAAhDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EACjD,IAAMC,OAAO,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAO;MAAEH,QAAQ,EAARA;IAAS,CAAC;EAAA,CAAC,EAAE,CAACA,QAAQ,CAACI,EAAE,CAAC,CAAC;EAC5D,oBAAOd,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,eAAe,CAACc,QAAQ;IAACC,KAAK,EAAEN;EAAQ,GAAED,QAAmC,CAAC;AAC1F,CAAC;AAEM,SAASQ,WAAWA,CAAA,EAAG;EAC1B,OAAOf,cAAK,CAACgB,UAAU,CAACjB,eAAe,CAAC;AAC5C","ignoreList":[]}
+{"version":3,"names":["React","useMemo","TemplateContext","createContext","undefined","TemplateProvider","template","children","context","id","createElement","Provider","value","useTemplate","useContext"],"sources":["TemplateProvider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { CmsDynamicZoneTemplate } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nexport interface TemplateContext {\n    template: CmsDynamicZoneTemplate;\n}\n\nconst TemplateContext = React.createContext<TemplateContext | undefined>(undefined);\n\nexport interface TemplateProviderProps {\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const TemplateProvider = ({ template, children }: TemplateProviderProps) => {\n    const context = useMemo(() => ({ template }), [template.id]);\n    return <TemplateContext.Provider value={context}>{children}</TemplateContext.Provider>;\n};\n\nexport function useTemplate() {\n    return React.useContext(TemplateContext);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAOtC,MAAMC,eAAe,gBAAGF,KAAK,CAACG,aAAa,CAA8BC,SAAS,CAAC;AAOnF,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAgC,CAAC,KAAK;EAC/E,MAAMC,OAAO,GAAGP,OAAO,CAAC,OAAO;IAAEK;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAACG,EAAE,CAAC,CAAC;EAC5D,oBAAOT,KAAA,CAAAU,aAAA,CAACR,eAAe,CAACS,QAAQ;IAACC,KAAK,EAAEJ;EAAQ,GAAED,QAAmC,CAAC;AAC1F,CAAC;AAED,OAAO,SAASM,WAAWA,CAAA,EAAG;EAC1B,OAAOb,KAAK,CAACc,UAAU,CAACZ,eAAe,CAAC;AAC5C","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { BindComponent, BindComponentRenderProp, CmsModel, CmsModelField, CmsModelFieldRendererPlugin } from "../../../../types";
-export declare type DynamicZoneContainerProps = {
+import type { BindComponent, BindComponentRenderProp, CmsModel, CmsModelField, CmsModelFieldRendererPlugin } from "../../../../types.js";
+export type DynamicZoneContainerProps = {
     field: CmsModelField;
     getBind: (index?: number, key?: string) => BindComponent;
     contentModel: CmsModel;
@@ -9,12 +9,25 @@ export declare type DynamicZoneContainerProps = {
     title?: string;
     description?: string;
     className?: string;
+    actions?: JSX.Element;
 };
-export declare const DynamicZoneContainer: import("@webiny/react-composition").GenericComponent<DynamicZoneContainerProps> & {
-    original: import("@webiny/react-composition").GenericComponent<DynamicZoneContainerProps>;
+export declare const DynamicZoneContainer: ((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+    original: (props: DynamicZoneContainerProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: DynamicZoneContainerProps) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    original: ((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+        original: (props: DynamicZoneContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: DynamicZoneContainerProps) => React.JSX.Element) & {
+        original: (props: DynamicZoneContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 };
 export declare const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin;

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js

@@ -1,86 +1,101 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React from "react";
+import { css } from "@emotion/css";
+import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
+import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings.js";
+import { makeDecoratable } from "@webiny/react-composition";
+import { Accordion, FormComponentErrorMessage } from "@webiny/admin-ui";
+import { ReactComponent as HorizontalRuleIcon } from "@webiny/icons/horizontal_rule.svg";
+const noBottomPadding = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "1n8outh",
+  styles: ">.webiny-ui-accordion-item__content{padding-bottom:0!important;}"
+} : {
+  name: "lyg8qk-noBottomPadding",
+  styles: ">.webiny-ui-accordion-item__content{padding-bottom:0!important;};label:noBottomPadding;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImR5bmFtaWNab25lUmVuZGVyZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMkIiLCJmaWxlIjoiZHluYW1pY1pvbmVSZW5kZXJlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgdHlwZSB7XG4gICAgQmluZENvbXBvbmVudCxcbiAgICBCaW5kQ29tcG9uZW50UmVuZGVyUHJvcCxcbiAgICBDbXNNb2RlbCxcbiAgICBDbXNNb2RlbEZpZWxkLFxuICAgIENtc01vZGVsRmllbGRSZW5kZXJlclBsdWdpbixcbiAgICBDbXNNb2RlbEZpZWxkUmVuZGVyZXJQcm9wc1xufSBmcm9tIFwifi90eXBlcy5qc1wiO1xuaW1wb3J0IHsgU2luZ2xlVmFsdWVEeW5hbWljWm9uZSB9IGZyb20gXCIuL1NpbmdsZVZhbHVlRHluYW1pY1pvbmUuanNcIjtcbmltcG9ydCB7IE11bHRpVmFsdWVEeW5hbWljWm9uZSB9IGZyb20gXCIuL011bHRpVmFsdWVEeW5hbWljWm9uZS5qc1wiO1xuaW1wb3J0IHsgQWNjb3JkaW9uUmVuZGVyU2V0dGluZ3MsIGdldEFjY29yZGlvblJlbmRlclNldHRpbmdzIH0gZnJvbSBcIi4uL0FjY29yZGlvblJlbmRlclNldHRpbmdzLmpzXCI7XG5pbXBvcnQgeyBtYWtlRGVjb3JhdGFibGUgfSBmcm9tIFwiQHdlYmlueS9yZWFjdC1jb21wb3NpdGlvblwiO1xuaW1wb3J0IHsgQWNjb3JkaW9uLCBGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEhvcml6b250YWxSdWxlSWNvbiB9IGZyb20gXCJAd2ViaW55L2ljb25zL2hvcml6b250YWxfcnVsZS5zdmdcIjtcblxuY29uc3Qgbm9Cb3R0b21QYWRkaW5nID0gY3NzYFxuICAgID4gLndlYmlueS11aS1hY2NvcmRpb24taXRlbV9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAwICFpbXBvcnRhbnQ7XG4gICAgfVxuYDtcblxuZXhwb3J0IHR5cGUgRHluYW1pY1pvbmVDb250YWluZXJQcm9wcyA9IHtcbiAgICBmaWVsZDogQ21zTW9kZWxGaWVsZDtcbiAgICBnZXRCaW5kOiAoaW5kZXg/OiBudW1iZXIsIGtleT86IHN0cmluZykgPT4gQmluZENvbXBvbmVudDtcbiAgICBjb250ZW50TW9kZWw6IENtc01vZGVsO1xuICAgIGJpbmQ6IEJpbmRDb21wb25lbnRSZW5kZXJQcm9wO1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgdGl0bGU/OiBzdHJpbmc7XG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gICAgY2xhc3NOYW1lPzogc3RyaW5nO1xuICAgIGFjdGlvbnM/OiBKU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCBjb25zdCBEeW5hbWljWm9uZUNvbnRhaW5lciA9IG1ha2VEZWNvcmF0YWJsZShcbiAgICBcIkR5bmFtaWNab25lQ29udGFpbmVyXCIsXG4gICAgKHByb3BzOiBEeW5hbWljWm9uZUNvbnRhaW5lclByb3BzKSA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIGZpZWxkLFxuICAgICAgICAgICAgYmluZDoge1xuICAgICAgICAgICAgICAgIHZhbGlkYXRpb246IHsgaXNWYWxpZCwgbWVzc2FnZSB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgdGl0bGUgPSBmaWVsZC5sYWJlbCxcbiAgICAgICAgICAgIGRlc2NyaXB0aW9uID0gZmllbGQuZGVzY3JpcHRpb24sXG4gICAgICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICB9ID0gcHJvcHM7XG5cbiAgICAgICAgY29uc3QgZGVmYXVsdENsYXNzTmFtZSA9IGZpZWxkLmxpc3QgPyBub0JvdHRvbVBhZGRpbmcgOiB1bmRlZmluZWQ7XG4gICAgICAgIGNvbnN0IHsgb3BlbiB9ID0gZ2V0QWNjb3JkaW9uUmVuZGVyU2V0dGluZ3MoZmllbGQpO1xuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgIDxBY2NvcmRpb24gYmFja2dyb3VuZD17XCJiYXNlXCJ9IHZhcmlhbnQ9e1wiY29udGFpbmVyXCJ9PlxuICAgICAgICAgICAgICAgICAgICA8QWNjb3JkaW9uLkl0ZW1cbiAgICAgICAgICAgICAgICAgICAgICAgIGljb249e1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxBY2NvcmRpb24uSXRlbS5JY29uXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbG9yPXtcImFjY2VudFwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsYWJlbD1cIkFjY29yZGlvbiBJdGVtXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWNvbj17PEhvcml6b250YWxSdWxlSWNvbiAvPn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAgICAgdGl0bGU9e3RpdGxlfVxuICAgICAgICAgICAgICAgICAgICAgICAgZGVzY3JpcHRpb249e2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWUgfHwgZGVmYXVsdENsYXNzTmFtZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGRlZmF1bHRPcGVuPXtvcGVufVxuICAgICAgICAgICAgICAgICAgICAgICAgYWN0aW9ucz17cHJvcHMuYWN0aW9ucyA/PyBudWxsfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICAgICAgICAgIDwvQWNjb3JkaW9uLkl0ZW0+XG4gICAgICAgICAgICAgICAgPC9BY2NvcmRpb24+XG4gICAgICAgICAgICAgICAge2lzVmFsaWQgPT09IGZhbHNlICYmIDxGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlIHRleHQ9e21lc3NhZ2V9IC8+fVxuICAgICAgICAgICAgPC8+XG4gICAgICAgICk7XG4gICAgfVxuKTtcblxuY29uc3QgRHluYW1pY1pvbmVDb250ZW50ID0gKHsgZmllbGQsIGdldEJpbmQsIGNvbnRlbnRNb2RlbCB9OiBDbXNNb2RlbEZpZWxkUmVuZGVyZXJQcm9wcykgPT4ge1xuICAgIGNvbnN0IHRlbXBsYXRlcyA9IGZpZWxkLnNldHRpbmdzPy50ZW1wbGF0ZXMgfHwgW107XG4gICAgaWYgKCF0ZW1wbGF0ZXMubGVuZ3RoKSB7XG4gICAgICAgIGNvbnNvbGUuaW5mbyhcbiAgICAgICAgICAgIGBTa2lwcGluZyBcIiR7ZmllbGQuZmllbGRJZH1cIiBmaWVsZC4gVGhlcmUgYXJlIG5vIHRlbXBsYXRlcyBkZWZpbmVkIGZvciB0aGlzIGR5bmFtaWMgem9uZS5gXG4gICAgICAgICk7XG4gICAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIGNvbnN0IEJpbmQgPSBnZXRCaW5kKCk7XG5cbiAgICBjb25zdCBDb21wb25lbnQgPSBmaWVsZC5saXN0ID8gTXVsdGlWYWx1ZUR5bmFtaWNab25lIDogU2luZ2xlVmFsdWVEeW5hbWljWm9uZTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDxCaW5kPlxuICAgICAgICAgICAge2JpbmQgPT4ge1xuICAgICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgICAgIDxCaW5kLlZhbGlkYXRpb25Db250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8RHluYW1pY1pvbmVDb250YWluZXJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWVsZD17ZmllbGR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYmluZD17YmluZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBnZXRCaW5kPXtnZXRCaW5kfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRlbnRNb2RlbD17Y29udGVudE1vZGVsfVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxDb21wb25lbnRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYmluZD17YmluZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZmllbGQ9e2ZpZWxkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBnZXRCaW5kPXtnZXRCaW5kfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZW50TW9kZWw9e2NvbnRlbnRNb2RlbH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9EeW5hbWljWm9uZUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPC9CaW5kLlZhbGlkYXRpb25Db250YWluZXI+XG4gICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIH19XG4gICAgICAgIDwvQmluZD5cbiAgICApO1xufTtcblxuZXhwb3J0IGNvbnN0IGR5bmFtaWNab25lRmllbGRSZW5kZXJlcjogQ21zTW9kZWxGaWVsZFJlbmRlcmVyUGx1Z2luID0ge1xuICAgIHR5cGU6IFwiY21zLWVkaXRvci1maWVsZC1yZW5kZXJlclwiLFxuICAgIG5hbWU6IFwiY21zLWVkaXRvci1maWVsZC1yZW5kZXJlci1keW5hbWljLXpvbmVcIixcbiAgICByZW5kZXJlcjoge1xuICAgICAgICByZW5kZXJlck5hbWU6IFwiZHluYW1pY1pvbmVcIixcbiAgICAgICAgbmFtZTogXCJEeW5hbWljIFpvbmVcIixcbiAgICAgICAgZGVzY3JpcHRpb246IFwiUmVuZGVycyBhIGR5bmFtaWMgem9uZS5cIixcbiAgICAgICAgY2FuVXNlKHsgZmllbGQgfSkge1xuICAgICAgICAgICAgcmV0dXJuIGZpZWxkLnR5cGUgPT09IFwiZHluYW1pY1pvbmVcIjtcbiAgICAgICAgfSxcbiAgICAgICAgcmVuZGVyKHByb3BzKSB7XG4gICAgICAgICAgICByZXR1cm4gPER5bmFtaWNab25lQ29udGVudCB7Li4ucHJvcHN9IC8+O1xuICAgICAgICB9LFxuICAgICAgICByZW5kZXJTZXR0aW5ncyh7IGZpZWxkIH0pIHtcbiAgICAgICAgICAgIHJldHVybiA8QWNjb3JkaW9uUmVuZGVyU2V0dGluZ3MgZmllbGQ9e2ZpZWxkfSAvPjtcbiAgICAgICAgfVxuICAgIH1cbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.dynamicZoneFieldRenderer = exports.DynamicZoneContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _Accordion = require("@webiny/ui/Accordion");
-var _SingleValueDynamicZone = require("./SingleValueDynamicZone");
-var _MultiValueDynamicZone = require("./MultiValueDynamicZone");
-var _AccordionRenderSettings = require("../AccordionRenderSettings");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _reactComposition = require("@webiny/react-composition");
-var _templateObject;
-var noBottomPadding = (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    > .webiny-ui-accordion-item__content {\n        padding-bottom: 0 !important;\n    }\n"])));
-var DynamicZoneContainer = exports.DynamicZoneContainer = (0, _reactComposition.makeDecoratable)("DynamicZoneContainer", function (props) {
-  var field = props.field,
-    _props$bind$validatio = props.bind.validation,
-    isValid = _props$bind$validatio.isValid,
-    message = _props$bind$validatio.message,
-    _props$title = props.title,
-    title = _props$title === void 0 ? field.label : _props$title,
-    _props$description = props.description,
-    description = _props$description === void 0 ? field.helpText : _props$description,
-    className = props.className,
-    children = props.children;
-  var defaultClassName = field.multipleValues ? noBottomPadding : undefined;
-  var _getAccordionRenderSe = (0, _AccordionRenderSettings.getAccordionRenderSettings)(field),
-    open = _getAccordionRenderSe.open;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+export const DynamicZoneContainer = makeDecoratable("DynamicZoneContainer", props => {
+  const {
+    field,
+    bind: {
+      validation: {
+        isValid,
+        message
+      }
+    },
+    title = field.label,
+    description = field.description,
+    className,
+    children
+  } = props;
+  const defaultClassName = field.list ? noBottomPadding : undefined;
+  const {
+    open
+  } = getAccordionRenderSettings(field);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container"
+  }, /*#__PURE__*/React.createElement(Accordion.Item, {
+    icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
+      color: "accent",
+      label: "Accordion Item",
+      icon: /*#__PURE__*/React.createElement(HorizontalRuleIcon, null)
+    }),
     title: title,
     description: description,
     className: className || defaultClassName,
-    open: open
-  }, children)), isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, message));
+    defaultOpen: open,
+    actions: props.actions ?? null
+  }, children)), isValid === false && /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: message
+  }));
 });
-var DynamicZoneContent = function DynamicZoneContent(_ref) {
-  var field = _ref.field,
-    getBind = _ref.getBind,
-    contentModel = _ref.contentModel;
-  var templates = field.settings?.templates || [];
+const DynamicZoneContent = ({
+  field,
+  getBind,
+  contentModel
+}) => {
+  const templates = field.settings?.templates || [];
   if (!templates.length) {
-    console.info("Skipping \"".concat(field.fieldId, "\" field. There are no templates defined for this dynamic zone."));
+    console.info(`Skipping "${field.fieldId}" field. There are no templates defined for this dynamic zone.`);
     return null;
   }
-  var Bind = getBind();
-  var Component = field.multipleValues ? _MultiValueDynamicZone.MultiValueDynamicZone : _SingleValueDynamicZone.SingleValueDynamicZone;
-  return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
-    return /*#__PURE__*/_react.default.createElement(DynamicZoneContainer, {
+  const Bind = getBind();
+  const Component = field.list ? MultiValueDynamicZone : SingleValueDynamicZone;
+  return /*#__PURE__*/React.createElement(Bind, null, bind => {
+    return /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DynamicZoneContainer, {
       field: field,
       bind: bind,
       getBind: getBind,
       contentModel: contentModel
-    }, /*#__PURE__*/_react.default.createElement(Component, {
+    }, /*#__PURE__*/React.createElement(Component, {
       bind: bind,
       field: field,
       getBind: getBind,
       contentModel: contentModel
-    }));
+    })));
   });
 };
-var dynamicZoneFieldRenderer = exports.dynamicZoneFieldRenderer = {
+export const dynamicZoneFieldRenderer = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-dynamic-zone",
   renderer: {
     rendererName: "dynamicZone",
     name: "Dynamic Zone",
     description: "Renders a dynamic zone.",
-    canUse: function canUse(_ref2) {
-      var field = _ref2.field;
+    canUse({
+      field
+    }) {
       return field.type === "dynamicZone";
     },
-    render: function render(props) {
-      return /*#__PURE__*/_react.default.createElement(DynamicZoneContent, props);
+    render(props) {
+      return /*#__PURE__*/React.createElement(DynamicZoneContent, props);
     },
-    renderSettings: function renderSettings(_ref3) {
-      var field = _ref3.field;
-      return /*#__PURE__*/_react.default.createElement(_AccordionRenderSettings.AccordionRenderSettings, {
+    renderSettings({
+      field
+    }) {
+      return /*#__PURE__*/React.createElement(AccordionRenderSettings, {
         field: field
       });
     }

package/admin/plugins/fieldRenderers/dynamicZone/dynamicZoneRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_Accordion","_SingleValueDynamicZone","_MultiValueDynamicZone","_AccordionRenderSettings","_FormElementMessage","_reactComposition","_templateObject","noBottomPadding","css","_taggedTemplateLiteral2","default","DynamicZoneContainer","exports","makeDecoratable","props","field","_props$bind$validatio","bind","validation","isValid","message","_props$title","title","label","_props$description","description","helpText","className","children","defaultClassName","multipleValues","undefined","_getAccordionRenderSe","getAccordionRenderSettings","open","createElement","Fragment","Accordion","AccordionItem","FormElementMessage","error","DynamicZoneContent","_ref","getBind","contentModel","templates","settings","length","console","info","concat","fieldId","Bind","Component","MultiValueDynamicZone","SingleValueDynamicZone","dynamicZoneFieldRenderer","type","name","renderer","rendererName","canUse","_ref2","render","renderSettings","_ref3","AccordionRenderSettings"],"sources":["dynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsModel,\n    CmsModelField,\n    CmsModelFieldRendererPlugin,\n    CmsModelFieldRendererProps\n} from \"~/types\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst noBottomPadding = css`\n    > .webiny-ui-accordion-item__content {\n        padding-bottom: 0 !important;\n    }\n`;\n\nexport type DynamicZoneContainerProps = {\n    field: CmsModelField;\n    getBind: (index?: number, key?: string) => BindComponent;\n    contentModel: CmsModel;\n    bind: BindComponentRenderProp;\n    children: React.ReactNode;\n    title?: string;\n    description?: string;\n    className?: string;\n};\n\nexport const DynamicZoneContainer = makeDecoratable(\n    \"DynamicZoneContainer\",\n    (props: DynamicZoneContainerProps) => {\n        const {\n            field,\n            bind: {\n                validation: { isValid, message }\n            },\n            title = field.label,\n            description = field.helpText,\n            className,\n            children\n        } = props;\n\n        const defaultClassName = field.multipleValues ? noBottomPadding : undefined;\n        const { open } = getAccordionRenderSettings(field);\n\n        return (\n            <>\n                <Accordion>\n                    <AccordionItem\n                        title={title}\n                        description={description}\n                        className={className || defaultClassName}\n                        open={open}\n                    >\n                        {children}\n                    </AccordionItem>\n                </Accordion>\n                {isValid === false && (\n                    <FormElementMessage error={true}>{message}</FormElementMessage>\n                )}\n            </>\n        );\n    }\n);\n\nconst DynamicZoneContent = ({ field, getBind, contentModel }: CmsModelFieldRendererProps) => {\n    const templates = field.settings?.templates || [];\n    if (!templates.length) {\n        console.info(\n            `Skipping \"${field.fieldId}\" field. There are no templates defined for this dynamic zone.`\n        );\n        return null;\n    }\n\n    const Bind = getBind();\n\n    const Component = field.multipleValues ? MultiValueDynamicZone : SingleValueDynamicZone;\n\n    return (\n        <Bind>\n            {bind => {\n                return (\n                    <DynamicZoneContainer\n                        field={field}\n                        bind={bind}\n                        getBind={getBind}\n                        contentModel={contentModel}\n                    >\n                        <Component\n                            bind={bind}\n                            field={field}\n                            getBind={getBind}\n                            contentModel={contentModel}\n                        />\n                    </DynamicZoneContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-dynamic-zone\",\n    renderer: {\n        rendererName: \"dynamicZone\",\n        name: \"Dynamic Zone\",\n        description: \"Renders a dynamic zone.\",\n        canUse({ field }) {\n            return field.type === \"dynamicZone\";\n        },\n        render(props) {\n            return <DynamicZoneContent {...props} />;\n        },\n        renderSettings({ field }) {\n            return <AccordionRenderSettings field={field} />;\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","css","SingleValueDynamicZone","MultiValueDynamicZone","AccordionRenderSettings","getAccordionRenderSettings","makeDecoratable","Accordion","FormComponentErrorMessage","ReactComponent","HorizontalRuleIcon","noBottomPadding","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","DynamicZoneContainer","props","field","bind","validation","isValid","message","title","label","description","className","children","defaultClassName","list","undefined","open","createElement","Fragment","background","variant","Item","icon","Icon","color","defaultOpen","actions","text","DynamicZoneContent","getBind","contentModel","templates","settings","length","console","info","fieldId","Bind","Component","ValidationContainer","dynamicZoneFieldRenderer","type","renderer","rendererName","canUse","render","renderSettings"],"sources":["dynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsModel,\n    CmsModelField,\n    CmsModelFieldRendererPlugin,\n    CmsModelFieldRendererProps\n} from \"~/types.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone.js\";\nimport { AccordionRenderSettings, getAccordionRenderSettings } from \"../AccordionRenderSettings.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { Accordion, FormComponentErrorMessage } from \"@webiny/admin-ui\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\n\nconst noBottomPadding = css`\n    > .webiny-ui-accordion-item__content {\n        padding-bottom: 0 !important;\n    }\n`;\n\nexport type DynamicZoneContainerProps = {\n    field: CmsModelField;\n    getBind: (index?: number, key?: string) => BindComponent;\n    contentModel: CmsModel;\n    bind: BindComponentRenderProp;\n    children: React.ReactNode;\n    title?: string;\n    description?: string;\n    className?: string;\n    actions?: JSX.Element;\n};\n\nexport const DynamicZoneContainer = makeDecoratable(\n    \"DynamicZoneContainer\",\n    (props: DynamicZoneContainerProps) => {\n        const {\n            field,\n            bind: {\n                validation: { isValid, message }\n            },\n            title = field.label,\n            description = field.description,\n            className,\n            children\n        } = props;\n\n        const defaultClassName = field.list ? noBottomPadding : undefined;\n        const { open } = getAccordionRenderSettings(field);\n\n        return (\n            <>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item\n                        icon={\n                            <Accordion.Item.Icon\n                                color={\"accent\"}\n                                label=\"Accordion Item\"\n                                icon={<HorizontalRuleIcon />}\n                            />\n                        }\n                        title={title}\n                        description={description}\n                        className={className || defaultClassName}\n                        defaultOpen={open}\n                        actions={props.actions ?? null}\n                    >\n                        {children}\n                    </Accordion.Item>\n                </Accordion>\n                {isValid === false && <FormComponentErrorMessage text={message} />}\n            </>\n        );\n    }\n);\n\nconst DynamicZoneContent = ({ field, getBind, contentModel }: CmsModelFieldRendererProps) => {\n    const templates = field.settings?.templates || [];\n    if (!templates.length) {\n        console.info(\n            `Skipping \"${field.fieldId}\" field. There are no templates defined for this dynamic zone.`\n        );\n        return null;\n    }\n\n    const Bind = getBind();\n\n    const Component = field.list ? MultiValueDynamicZone : SingleValueDynamicZone;\n\n    return (\n        <Bind>\n            {bind => {\n                return (\n                    <Bind.ValidationContainer>\n                        <DynamicZoneContainer\n                            field={field}\n                            bind={bind}\n                            getBind={getBind}\n                            contentModel={contentModel}\n                        >\n                            <Component\n                                bind={bind}\n                                field={field}\n                                getBind={getBind}\n                                contentModel={contentModel}\n                            />\n                        </DynamicZoneContainer>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport const dynamicZoneFieldRenderer: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-dynamic-zone\",\n    renderer: {\n        rendererName: \"dynamicZone\",\n        name: \"Dynamic Zone\",\n        description: \"Renders a dynamic zone.\",\n        canUse({ field }) {\n            return field.type === \"dynamicZone\";\n        },\n        render(props) {\n            return <DynamicZoneContent {...props} />;\n        },\n        renderSettings({ field }) {\n            return <AccordionRenderSettings field={field} />;\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/index.d.ts

@@ -1,4 +1,4 @@
-export { DynamicZoneContainerProps, DynamicZoneContainer } from "./dynamicZoneRenderer";
-export { TemplateGallery } from "./TemplateGallery";
-export { MultiValueItemContainer, MultiValueContainer, MultiValueItem } from "./MultiValueDynamicZone";
-export * from "./TemplateProvider";
+export { type DynamicZoneContainerProps, DynamicZoneContainer } from "./dynamicZoneRenderer.js";
+export { TemplateGallery } from "./TemplateGallery.js";
+export { MultiValueItemContainer, MultiValueContainer, MultiValueItem } from "./MultiValueDynamicZone.js";
+export * from "./TemplateProvider.js";