@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/ui/elements/form/FileManagerElement/styled.js

@@ -1,77 +1,67 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-var _hover, _styled;
-
-// @ts-nocheck
-import styled from "@emotion/styled";
-export var AddImageIconWrapper = /*#__PURE__*/styled("div", {
-  target: "e185ja7p0",
+import _styled from "@emotion/styled/base";
+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)."; }
+export const AddImageIconWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e185ja7p4"
+} : {
+  target: "e185ja7p4",
   label: "AddImageIconWrapper"
-})({
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  ">svg": {
-    width: "100%",
-    height: "100%",
-    maxWidth: 50,
-    maxHeight: 50,
-    display: "block",
-    opacity: 0.5,
-    margin: "0 auto"
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "dkc958",
+  styles: "color:var(--mdc-theme-text-secondary-on-background);>svg{width:100%;height:100%;max-width:50px;max-height:50px;display:block;opacity:0.5;margin:0 auto;}"
+} : {
+  name: "dkc958",
+  styles: "color:var(--mdc-theme-text-secondary-on-background);>svg{width:100%;height:100%;max-width:50px;max-height:50px;display:block;opacity:0.5;margin:0 auto;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoic3R5bGVkLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBBZGRJbWFnZUljb25XcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1zZWNvbmRhcnktb24tYmFja2dyb3VuZClcIixcbiAgICBcIj5zdmdcIjoge1xuICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIG1heFdpZHRoOiA1MCxcbiAgICAgICAgbWF4SGVpZ2h0OiA1MCxcbiAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICBvcGFjaXR5OiAwLjUsXG4gICAgICAgIG1hcmdpbjogXCIwIGF1dG9cIlxuICAgIH1cbn0pO1xuXG5leHBvcnQgY29uc3QgQWRkSW1hZ2VXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBtaW5IZWlnaHQ6IDUwLFxuICAgIG1pbldpZHRoOiA1MCxcbiAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS10ZXh0LWhpbnQtb24tYmFja2dyb3VuZClcIixcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgdHJhbnNpdGlvbjogXCJjb2xvciAwLjJzXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBwYWRkaW5nOiAxMCxcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJyZ2JhKDAsMCwwLCAwLjUpXCIsXG4gICAgICAgIGJvcmRlckJvdHRvbTogXCIxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLXN1cmZhY2UpXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGNvbnN0IEFkZEltYWdlV3JhcHBlclJvdW5kID0gc3R5bGVkKEFkZEltYWdlV3JhcHBlcikoe1xuICAgIG1hcmdpbjogXCJhdXRvXCIsXG4gICAgd2lkdGg6IFwiMTUwcHhcIixcbiAgICBoZWlnaHQ6IFwiMTUwcHhcIixcbiAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCJcbn0pO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlSW1hZ2UgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICB0b3A6IDEwLFxuICAgIHJpZ2h0OiAxMCxcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICBjb2xvcjogXCJ3aGl0ZVwiLFxuICAgIG9wYWNpdHk6IDAuNSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLjc1XG4gICAgfVxufSk7XG5cbmV4cG9ydCBjb25zdCBGaWxlUHJldmlld1dyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIG1pbkhlaWdodDogOTAsXG4gICAgbWluV2lkdGg6IDUwLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYXJvdW5kXCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS10ZXh0LWhpbnQtb24tYmFja2dyb3VuZClcIixcbiAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgW0FkZEltYWdlV3JhcHBlcl06IHtcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSgwLDAsMCwgMC43NSlcIixcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbQWRkSW1hZ2VJY29uV3JhcHBlcl06IHtcbiAgICAgICAgICAgIHRvcDogXCI1MCVcIixcbiAgICAgICAgICAgIGxlZnQ6IFwiNTAlXCIsXG4gICAgICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgtNTAlKSB0cmFuc2xhdGVYKC01MCUpXCIsXG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgY29sb3I6IFwid2hpdGVcIlxuICAgICAgICB9XG4gICAgfSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgIFtBZGRJbWFnZVdyYXBwZXJdOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCJcbiAgICAgICAgfSxcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbUmVtb3ZlSW1hZ2VdOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgICAgICAgICB6SW5kZXg6IDJcbiAgICAgICAgfVxuICAgIH1cbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export var AddImageWrapper = /*#__PURE__*/styled("div", {
-  target: "e185ja7p1",
+export const AddImageWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e185ja7p3"
+} : {
+  target: "e185ja7p3",
   label: "AddImageWrapper"
-})({
-  width: "100%",
-  height: "100%",
-  minHeight: 50,
-  minWidth: 50,
-  textAlign: "center",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 0,
-  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-around",
-  flexDirection: "column",
-  transition: "color 0.2s",
-  cursor: "pointer",
-  padding: 10,
-  boxSizing: "border-box",
-  "&:hover": {
-    backgroundColor: "rgba(0,0,0, 0.5)",
-    borderBottom: "1px solid var(--mdc-theme-on-surface)"
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "4pf0ii",
+  styles: "width:100%;height:100%;min-height:50px;min-width:50px;text-align:center;background-color:var(--mdc-theme-on-background);border-radius:0;border-bottom:1px solid var(--mdc-theme-text-hint-on-background);display:flex;align-items:center;justify-content:space-around;flex-direction:column;transition:color 0.2s;cursor:pointer;padding:10px;box-sizing:border-box;&:hover{background-color:rgba(0,0,0, 0.5);border-bottom:1px solid var(--mdc-theme-on-surface);}"
+} : {
+  name: "4pf0ii",
+  styles: "width:100%;height:100%;min-height:50px;min-width:50px;text-align:center;background-color:var(--mdc-theme-on-background);border-radius:0;border-bottom:1px solid var(--mdc-theme-text-hint-on-background);display:flex;align-items:center;justify-content:space-around;flex-direction:column;transition:color 0.2s;cursor:pointer;padding:10px;box-sizing:border-box;&:hover{background-color:rgba(0,0,0, 0.5);border-bottom:1px solid var(--mdc-theme-on-surface);}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlK0IiLCJmaWxlIjoic3R5bGVkLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBBZGRJbWFnZUljb25XcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1zZWNvbmRhcnktb24tYmFja2dyb3VuZClcIixcbiAgICBcIj5zdmdcIjoge1xuICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIG1heFdpZHRoOiA1MCxcbiAgICAgICAgbWF4SGVpZ2h0OiA1MCxcbiAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICBvcGFjaXR5OiAwLjUsXG4gICAgICAgIG1hcmdpbjogXCIwIGF1dG9cIlxuICAgIH1cbn0pO1xuXG5leHBvcnQgY29uc3QgQWRkSW1hZ2VXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBtaW5IZWlnaHQ6IDUwLFxuICAgIG1pbldpZHRoOiA1MCxcbiAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS10ZXh0LWhpbnQtb24tYmFja2dyb3VuZClcIixcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgdHJhbnNpdGlvbjogXCJjb2xvciAwLjJzXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBwYWRkaW5nOiAxMCxcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJyZ2JhKDAsMCwwLCAwLjUpXCIsXG4gICAgICAgIGJvcmRlckJvdHRvbTogXCIxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLXN1cmZhY2UpXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGNvbnN0IEFkZEltYWdlV3JhcHBlclJvdW5kID0gc3R5bGVkKEFkZEltYWdlV3JhcHBlcikoe1xuICAgIG1hcmdpbjogXCJhdXRvXCIsXG4gICAgd2lkdGg6IFwiMTUwcHhcIixcbiAgICBoZWlnaHQ6IFwiMTUwcHhcIixcbiAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCJcbn0pO1xuXG5leHBvcnQgY29uc3QgUmVtb3ZlSW1hZ2UgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICB0b3A6IDEwLFxuICAgIHJpZ2h0OiAxMCxcbiAgICBkaXNwbGF5OiBcIm5vbmVcIixcbiAgICBjb2xvcjogXCJ3aGl0ZVwiLFxuICAgIG9wYWNpdHk6IDAuNSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLjc1XG4gICAgfVxufSk7XG5cbmV4cG9ydCBjb25zdCBGaWxlUHJldmlld1dyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIG1pbkhlaWdodDogOTAsXG4gICAgbWluV2lkdGg6IDUwLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYXJvdW5kXCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIGJvcmRlclJhZGl1czogMCxcbiAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS10ZXh0LWhpbnQtb24tYmFja2dyb3VuZClcIixcbiAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgW0FkZEltYWdlV3JhcHBlcl06IHtcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgICAgIHRvcDogMCxcbiAgICAgICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgekluZGV4OiAxLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSgwLDAsMCwgMC43NSlcIixcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbQWRkSW1hZ2VJY29uV3JhcHBlcl06IHtcbiAgICAgICAgICAgIHRvcDogXCI1MCVcIixcbiAgICAgICAgICAgIGxlZnQ6IFwiNTAlXCIsXG4gICAgICAgICAgICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgtNTAlKSB0cmFuc2xhdGVYKC01MCUpXCIsXG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgY29sb3I6IFwid2hpdGVcIlxuICAgICAgICB9XG4gICAgfSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAvLyBAdHMtZXhwZWN0LWVycm9yXG4gICAgICAgIFtBZGRJbWFnZVdyYXBwZXJdOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCJcbiAgICAgICAgfSxcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbUmVtb3ZlSW1hZ2VdOiB7XG4gICAgICAgICAgICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gICAgICAgICAgICB6SW5kZXg6IDJcbiAgICAgICAgfVxuICAgIH1cbn0pO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export var AddImageWrapperRound = /*#__PURE__*/styled(AddImageWrapper, {
+export const AddImageWrapperRound = /*#__PURE__*/_styled(AddImageWrapper, process.env.NODE_ENV === "production" ? {
+  target: "e185ja7p2"
+} : {
   target: "e185ja7p2",
   label: "AddImageWrapperRound"
-})({
-  margin: "auto",
-  width: "150px",
-  height: "150px",
-  borderRadius: "50%"
+})(process.env.NODE_ENV === "production" ? {
+  name: "k3f3kd",
+  styles: "margin:auto;width:150px;height:150px;border-radius:50%"
+} : {
+  name: "k3f3kd",
+  styles: "margin:auto;width:150px;height:150px;border-radius:50%",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ29DIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgQWRkSW1hZ2VJY29uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgXCI+c3ZnXCI6IHtcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBtYXhXaWR0aDogNTAsXG4gICAgICAgIG1heEhlaWdodDogNTAsXG4gICAgICAgIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICBtYXJnaW46IFwiMCBhdXRvXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGNvbnN0IEFkZEltYWdlV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgbWluSGVpZ2h0OiA1MCxcbiAgICBtaW5XaWR0aDogNTAsXG4gICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1hcm91bmRcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIHRyYW5zaXRpb246IFwiY29sb3IgMC4yc1wiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgcGFkZGluZzogMTAsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSgwLDAsMCwgMC41KVwiLFxuICAgICAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zdXJmYWNlKVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBjb25zdCBBZGRJbWFnZVdyYXBwZXJSb3VuZCA9IHN0eWxlZChBZGRJbWFnZVdyYXBwZXIpKHtcbiAgICBtYXJnaW46IFwiYXV0b1wiLFxuICAgIHdpZHRoOiBcIjE1MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjE1MHB4XCIsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiXG59KTtcblxuZXhwb3J0IGNvbnN0IFJlbW92ZUltYWdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgdG9wOiAxMCxcbiAgICByaWdodDogMTAsXG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgY29sb3I6IFwid2hpdGVcIixcbiAgICBvcGFjaXR5OiAwLjUsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC43NVxuICAgIH1cbn0pO1xuXG5leHBvcnQgY29uc3QgRmlsZVByZXZpZXdXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBtaW5IZWlnaHQ6IDkwLFxuICAgIG1pbldpZHRoOiA1MCxcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgIFtBZGRJbWFnZVdyYXBwZXJdOiB7XG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoMCwwLDAsIDAuNzUpXCIsXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW0FkZEltYWdlSWNvbldyYXBwZXJdOiB7XG4gICAgICAgICAgICB0b3A6IFwiNTAlXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjUwJVwiLFxuICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoLTUwJSkgdHJhbnNsYXRlWCgtNTAlKVwiLFxuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGNvbG9yOiBcIndoaXRlXCJcbiAgICAgICAgfVxuICAgIH0sXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbQWRkSW1hZ2VXcmFwcGVyXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW1JlbW92ZUltYWdlXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICAgICAgekluZGV4OiAyXG4gICAgICAgIH1cbiAgICB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export var RemoveImage = /*#__PURE__*/styled("div", {
-  target: "e185ja7p3",
+export const RemoveImage = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e185ja7p1"
+} : {
+  target: "e185ja7p1",
   label: "RemoveImage"
-})({
-  position: "absolute",
-  cursor: "pointer",
-  top: 10,
-  right: 10,
-  display: "none",
-  color: "white",
-  opacity: 0.5,
-  "&:hover": {
-    opacity: 0.75
-  }
+})(process.env.NODE_ENV === "production" ? {
+  name: "1opwi5t",
+  styles: "position:absolute;cursor:pointer;top:10px;right:10px;display:none;color:white;opacity:0.5;&:hover{opacity:0.75;}"
+} : {
+  name: "1opwi5t",
+  styles: "position:absolute;cursor:pointer;top:10px;right:10px;display:none;color:white;opacity:0.5;&:hover{opacity:0.75;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QzJCIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgQWRkSW1hZ2VJY29uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgXCI+c3ZnXCI6IHtcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBtYXhXaWR0aDogNTAsXG4gICAgICAgIG1heEhlaWdodDogNTAsXG4gICAgICAgIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICBtYXJnaW46IFwiMCBhdXRvXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGNvbnN0IEFkZEltYWdlV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgbWluSGVpZ2h0OiA1MCxcbiAgICBtaW5XaWR0aDogNTAsXG4gICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1hcm91bmRcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIHRyYW5zaXRpb246IFwiY29sb3IgMC4yc1wiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgcGFkZGluZzogMTAsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSgwLDAsMCwgMC41KVwiLFxuICAgICAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zdXJmYWNlKVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBjb25zdCBBZGRJbWFnZVdyYXBwZXJSb3VuZCA9IHN0eWxlZChBZGRJbWFnZVdyYXBwZXIpKHtcbiAgICBtYXJnaW46IFwiYXV0b1wiLFxuICAgIHdpZHRoOiBcIjE1MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjE1MHB4XCIsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiXG59KTtcblxuZXhwb3J0IGNvbnN0IFJlbW92ZUltYWdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgdG9wOiAxMCxcbiAgICByaWdodDogMTAsXG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgY29sb3I6IFwid2hpdGVcIixcbiAgICBvcGFjaXR5OiAwLjUsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC43NVxuICAgIH1cbn0pO1xuXG5leHBvcnQgY29uc3QgRmlsZVByZXZpZXdXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBtaW5IZWlnaHQ6IDkwLFxuICAgIG1pbldpZHRoOiA1MCxcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgIFtBZGRJbWFnZVdyYXBwZXJdOiB7XG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoMCwwLDAsIDAuNzUpXCIsXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW0FkZEltYWdlSWNvbldyYXBwZXJdOiB7XG4gICAgICAgICAgICB0b3A6IFwiNTAlXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjUwJVwiLFxuICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoLTUwJSkgdHJhbnNsYXRlWCgtNTAlKVwiLFxuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGNvbG9yOiBcIndoaXRlXCJcbiAgICAgICAgfVxuICAgIH0sXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbQWRkSW1hZ2VXcmFwcGVyXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW1JlbW92ZUltYWdlXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICAgICAgekluZGV4OiAyXG4gICAgICAgIH1cbiAgICB9XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export var FilePreviewWrapper = /*#__PURE__*/styled("div", {
-  target: "e185ja7p4",
+export const FilePreviewWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e185ja7p0"
+} : {
+  target: "e185ja7p0",
   label: "FilePreviewWrapper"
-})((_styled = {
+})({
   width: "100%",
   height: "100%",
   minHeight: 90,
@@ -84,23 +74,35 @@ export var FilePreviewWrapper = /*#__PURE__*/styled("div", {
   position: "relative",
   backgroundColor: "var(--mdc-theme-on-background)",
   borderRadius: 0,
-  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)"
-}, _defineProperty(_styled, AddImageWrapper, _defineProperty({
-  position: "absolute",
-  display: "none",
-  top: 0,
-  height: "100%",
-  zIndex: 1,
-  backgroundColor: "rgba(0,0,0, 0.75)"
-}, AddImageIconWrapper, {
-  top: "50%",
-  left: "50%",
-  transform: "translateY(-50%) translateX(-50%)",
-  position: "absolute",
-  color: "white"
-})), _defineProperty(_styled, "&:hover", (_hover = {}, _defineProperty(_hover, AddImageWrapper, {
-  display: "block"
-}), _defineProperty(_hover, RemoveImage, {
-  display: "block",
-  zIndex: 2
-}), _hover)), _styled));
+  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
+  // @ts-expect-error
+  [AddImageWrapper]: {
+    position: "absolute",
+    display: "none",
+    top: 0,
+    height: "100%",
+    zIndex: 1,
+    backgroundColor: "rgba(0,0,0, 0.75)",
+    // @ts-expect-error
+    [AddImageIconWrapper]: {
+      top: "50%",
+      left: "50%",
+      transform: "translateY(-50%) translateX(-50%)",
+      position: "absolute",
+      color: "white"
+    }
+  },
+  "&:hover": {
+    // @ts-expect-error
+    [AddImageWrapper]: {
+      display: "block"
+    },
+    // @ts-expect-error
+    [RemoveImage]: {
+      display: "block",
+      zIndex: 2
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRGtDIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5leHBvcnQgY29uc3QgQWRkSW1hZ2VJY29uV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCIsXG4gICAgXCI+c3ZnXCI6IHtcbiAgICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgICAgICBtYXhXaWR0aDogNTAsXG4gICAgICAgIG1heEhlaWdodDogNTAsXG4gICAgICAgIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICBtYXJnaW46IFwiMCBhdXRvXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGNvbnN0IEFkZEltYWdlV3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgbWluSGVpZ2h0OiA1MCxcbiAgICBtaW5XaWR0aDogNTAsXG4gICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJzcGFjZS1hcm91bmRcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIHRyYW5zaXRpb246IFwiY29sb3IgMC4yc1wiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgcGFkZGluZzogMTAsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmdiYSgwLDAsMCwgMC41KVwiLFxuICAgICAgICBib3JkZXJCb3R0b206IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1zdXJmYWNlKVwiXG4gICAgfVxufSk7XG5cbmV4cG9ydCBjb25zdCBBZGRJbWFnZVdyYXBwZXJSb3VuZCA9IHN0eWxlZChBZGRJbWFnZVdyYXBwZXIpKHtcbiAgICBtYXJnaW46IFwiYXV0b1wiLFxuICAgIHdpZHRoOiBcIjE1MHB4XCIsXG4gICAgaGVpZ2h0OiBcIjE1MHB4XCIsXG4gICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiXG59KTtcblxuZXhwb3J0IGNvbnN0IFJlbW92ZUltYWdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgdG9wOiAxMCxcbiAgICByaWdodDogMTAsXG4gICAgZGlzcGxheTogXCJub25lXCIsXG4gICAgY29sb3I6IFwid2hpdGVcIixcbiAgICBvcGFjaXR5OiAwLjUsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC43NVxuICAgIH1cbn0pO1xuXG5leHBvcnQgY29uc3QgRmlsZVByZXZpZXdXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBtaW5IZWlnaHQ6IDkwLFxuICAgIG1pbldpZHRoOiA1MCxcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtdGV4dC1oaW50LW9uLWJhY2tncm91bmQpXCIsXG4gICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgIFtBZGRJbWFnZVdyYXBwZXJdOiB7XG4gICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgIGRpc3BsYXk6IFwibm9uZVwiLFxuICAgICAgICB0b3A6IDAsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIHpJbmRleDogMSxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEoMCwwLDAsIDAuNzUpXCIsXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW0FkZEltYWdlSWNvbldyYXBwZXJdOiB7XG4gICAgICAgICAgICB0b3A6IFwiNTAlXCIsXG4gICAgICAgICAgICBsZWZ0OiBcIjUwJVwiLFxuICAgICAgICAgICAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVkoLTUwJSkgdHJhbnNsYXRlWCgtNTAlKVwiLFxuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGNvbG9yOiBcIndoaXRlXCJcbiAgICAgICAgfVxuICAgIH0sXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgLy8gQHRzLWV4cGVjdC1lcnJvclxuICAgICAgICBbQWRkSW1hZ2VXcmFwcGVyXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiXG4gICAgICAgIH0sXG4gICAgICAgIC8vIEB0cy1leHBlY3QtZXJyb3JcbiAgICAgICAgW1JlbW92ZUltYWdlXToge1xuICAgICAgICAgICAgZGlzcGxheTogXCJibG9ja1wiLFxuICAgICAgICAgICAgekluZGV4OiAyXG4gICAgICAgIH1cbiAgICB9XG59KTtcbiJdfQ== */");
+
+//# sourceMappingURL=styled.js.map

package/ui/elements/form/FileManagerElement/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AddImageIconWrapper","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","AddImageWrapper","AddImageWrapperRound","RemoveImage","FilePreviewWrapper","width","height","minHeight","minWidth","display","alignItems","justifyContent","flexDirection","boxSizing","position","backgroundColor","borderRadius","borderBottom","top","zIndex","left","transform","color"],"sources":["styled.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const FilePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 90,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    // @ts-expect-error\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        // @ts-expect-error\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        // @ts-expect-error\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        // @ts-expect-error\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":";;AAEA,OAAO,MAAMA,mBAAmB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAW/C,CAAC;AAEF,OAAO,MAAMC,eAAe,gBAAGX,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAqB3C,CAAC;AAEF,OAAO,MAAME,oBAAoB,gBAAGZ,OAAA,CAAOW,eAAe,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAK1D,CAAC;AAEF,OAAO,MAAMG,WAAW,gBAAGb,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAWvC,CAAC;AAEF,OAAO,MAAMI,kBAAkB,gBAAGd,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EAC5CU,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,EAAE;EACZC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,cAAc;EAC9BC,aAAa,EAAE,QAAQ;EACvBC,SAAS,EAAE,YAAY;EACvBC,QAAQ,EAAE,UAAU;EACpBC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,oDAAoD;EAClE;EACA,CAAChB,eAAe,GAAG;IACfa,QAAQ,EAAE,UAAU;IACpBL,OAAO,EAAE,MAAM;IACfS,GAAG,EAAE,CAAC;IACNZ,MAAM,EAAE,MAAM;IACda,MAAM,EAAE,CAAC;IACTJ,eAAe,EAAE,mBAAmB;IACpC;IACA,CAAC1B,mBAAmB,GAAG;MACnB6B,GAAG,EAAE,KAAK;MACVE,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE,mCAAmC;MAC9CP,QAAQ,EAAE,UAAU;MACpBQ,KAAK,EAAE;IACX;EACJ,CAAC;EACD,SAAS,EAAE;IACP;IACA,CAACrB,eAAe,GAAG;MACfQ,OAAO,EAAE;IACb,CAAC;IACD;IACA,CAACN,WAAW,GAAG;MACXM,OAAO,EAAE,OAAO;MAChBU,MAAM,EAAE;IACZ;EACJ;AACJ,CAAC,EAAA5B,OAAA,CAAAC,GAAA,CAAAC,QAAA,uxHAAC","ignoreList":[]}

package/ui/elements/form/FileManagerElement.d.ts

@@ -1,5 +1,6 @@
-import { UIElement } from "../../UIElement";
-import { FormFieldElement, FormFieldElementConfig } from "./FormFieldElement";
+import type { UIElement } from "../../UIElement";
+import type { FormFieldElementConfig } from "./FormFieldElement";
+import { FormFieldElement } from "./FormFieldElement";
 export interface FileManagerElementConfig extends FormFieldElementConfig {
     accept?: string[];
     maxSize?: number | string;
@@ -8,17 +9,17 @@ export interface FileManagerElementConfig extends FormFieldElementConfig {
     onChangePickAttributes?: string[];
 }
 export declare class FileManagerElement extends FormFieldElement<FileManagerElementConfig> {
-    private _emptyStateElement;
+    private readonly _emptyStateElement;
     constructor(id: string, config: FileManagerElementConfig);
     getEmptyStateElement(): UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
-    getAccept(): string[];
+    getAccept(): string[] | undefined;
     setAccept(accept: string[]): void;
-    getMaxSize(): string | number;
+    getMaxSize(): string | number | undefined;
     setMaxSize(maxSize: number | string): void;
-    getMultipleMaxCount(): number;
+    getMultipleMaxCount(): number | undefined;
     setMultipleMaxCount(multipleMaxCount: number): void;
-    getMultipleMaxSize(): string | number;
+    getMultipleMaxSize(): string | number | undefined;
     setMultipleMaxSize(multipleMaxSize: number | string): void;
-    getOnChangePickAttributes(): string[];
+    getOnChangePickAttributes(): string[] | undefined;
     setOnChangePickAttributes(attributes: string[]): void;
 }

package/ui/elements/form/FileManagerElement.js

@@ -1,91 +1,46 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormFieldElement } from "./FormFieldElement";
 import { FileManagerElementRenderer } from "./FileManagerElement/FileManagerElementRenderer";
 import { EmptyStateElement } from "./FileManagerElement/EmptyStateElement";
-export var FileManagerElement = /*#__PURE__*/function (_FormFieldElement) {
-  _inherits(FileManagerElement, _FormFieldElement);
-
-  var _super = _createSuper(FileManagerElement);
-
-  function FileManagerElement(id, config) {
-    var _this;
-
-    _classCallCheck(this, FileManagerElement);
-
-    _this = _super.call(this, id, config);
-
-    _defineProperty(_assertThisInitialized(_this), "_emptyStateElement", void 0);
-
-    _this.addRenderer(new FileManagerElementRenderer());
-
-    _this._emptyStateElement = new EmptyStateElement("emptyState");
-
-    _this.applyPlugins(FileManagerElement);
-
-    return _this;
+export class FileManagerElement extends FormFieldElement {
+  constructor(id, config) {
+    super(id, config);
+    this.addRenderer(new FileManagerElementRenderer());
+    this._emptyStateElement = new EmptyStateElement("emptyState");
+    this.applyPlugins(FileManagerElement);
   }
+  getEmptyStateElement() {
+    return this._emptyStateElement;
+  }
+  getAccept() {
+    return this.config.accept;
+  }
+  setAccept(accept) {
+    this.config.accept = accept;
+  }
+  getMaxSize() {
+    return this.config.maxSize;
+  }
+  setMaxSize(maxSize) {
+    this.config.maxSize = maxSize;
+  }
+  getMultipleMaxCount() {
+    return this.config.multipleMaxCount;
+  }
+  setMultipleMaxCount(multipleMaxCount) {
+    this.config.multipleMaxCount = multipleMaxCount;
+  }
+  getMultipleMaxSize() {
+    return this.config.multipleMaxSize;
+  }
+  setMultipleMaxSize(multipleMaxSize) {
+    this.config.multipleMaxSize = multipleMaxSize;
+  }
+  getOnChangePickAttributes() {
+    return this.config.onChangePickAttributes;
+  }
+  setOnChangePickAttributes(attributes) {
+    this.config.onChangePickAttributes = attributes;
+  }
+}
 
-  _createClass(FileManagerElement, [{
-    key: "getEmptyStateElement",
-    value: function getEmptyStateElement() {
-      return this._emptyStateElement;
-    }
-  }, {
-    key: "getAccept",
-    value: function getAccept() {
-      return this.config.accept;
-    }
-  }, {
-    key: "setAccept",
-    value: function setAccept(accept) {
-      this.config.accept = accept;
-    }
-  }, {
-    key: "getMaxSize",
-    value: function getMaxSize() {
-      return this.config.maxSize;
-    }
-  }, {
-    key: "setMaxSize",
-    value: function setMaxSize(maxSize) {
-      this.config.maxSize = maxSize;
-    }
-  }, {
-    key: "getMultipleMaxCount",
-    value: function getMultipleMaxCount() {
-      return this.config.multipleMaxCount;
-    }
-  }, {
-    key: "setMultipleMaxCount",
-    value: function setMultipleMaxCount(multipleMaxCount) {
-      this.config.multipleMaxCount = multipleMaxCount;
-    }
-  }, {
-    key: "getMultipleMaxSize",
-    value: function getMultipleMaxSize() {
-      return this.config.multipleMaxSize;
-    }
-  }, {
-    key: "setMultipleMaxSize",
-    value: function setMultipleMaxSize(multipleMaxSize) {
-      this.config.multipleMaxSize = multipleMaxSize;
-    }
-  }, {
-    key: "getOnChangePickAttributes",
-    value: function getOnChangePickAttributes() {
-      return this.config.onChangePickAttributes;
-    }
-  }, {
-    key: "setOnChangePickAttributes",
-    value: function setOnChangePickAttributes(attributes) {
-      this.config.onChangePickAttributes = attributes;
-    }
-  }]);
-
-  return FileManagerElement;
-}(FormFieldElement);
+//# sourceMappingURL=FileManagerElement.js.map

package/ui/elements/form/FileManagerElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormFieldElement","FileManagerElementRenderer","EmptyStateElement","FileManagerElement","constructor","id","config","addRenderer","_emptyStateElement","applyPlugins","getEmptyStateElement","getAccept","accept","setAccept","getMaxSize","maxSize","setMaxSize","getMultipleMaxCount","multipleMaxCount","setMultipleMaxCount","getMultipleMaxSize","multipleMaxSize","setMultipleMaxSize","getOnChangePickAttributes","onChangePickAttributes","setOnChangePickAttributes","attributes"],"sources":["FileManagerElement.tsx"],"sourcesContent":["import type { UIElement } from \"~/ui/UIElement\";\nimport type { FormFieldElementConfig } from \"./FormFieldElement\";\nimport { FormFieldElement } from \"./FormFieldElement\";\nimport { FileManagerElementRenderer } from \"./FileManagerElement/FileManagerElementRenderer\";\nimport { EmptyStateElement } from \"./FileManagerElement/EmptyStateElement\";\n\nexport interface FileManagerElementConfig extends FormFieldElementConfig {\n    // Define mime types that will be shown and accepted by FileManager\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize?: number | string;\n\n    // Max number of files in a single batch.\n    multipleMaxCount?: number;\n\n    // Max size of files in a single batch.\n    multipleMaxSize?: number | string;\n\n    // Define properties that are returned on file(s) selection.\n    onChangePickAttributes?: string[];\n\n    // Define whether multiple files can be selected1.\n    // TODO: multiple?: boolean; - create a new renderer for \"multiple=true\" to render multiple files\n    // It should work as in Headless CMS content entry form, see that for an example.\n}\n\nexport class FileManagerElement extends FormFieldElement<FileManagerElementConfig> {\n    private readonly _emptyStateElement: UIElement;\n\n    public constructor(id: string, config: FileManagerElementConfig) {\n        super(id, config);\n\n        this.addRenderer(new FileManagerElementRenderer());\n\n        this._emptyStateElement = new EmptyStateElement(\"emptyState\");\n\n        this.applyPlugins(FileManagerElement);\n    }\n\n    public getEmptyStateElement() {\n        return this._emptyStateElement;\n    }\n\n    public getAccept() {\n        return this.config.accept;\n    }\n\n    public setAccept(accept: string[]) {\n        this.config.accept = accept;\n    }\n\n    public getMaxSize() {\n        return this.config.maxSize;\n    }\n\n    public setMaxSize(maxSize: number | string) {\n        this.config.maxSize = maxSize;\n    }\n\n    public getMultipleMaxCount() {\n        return this.config.multipleMaxCount;\n    }\n\n    public setMultipleMaxCount(multipleMaxCount: number) {\n        this.config.multipleMaxCount = multipleMaxCount;\n    }\n\n    public getMultipleMaxSize() {\n        return this.config.multipleMaxSize;\n    }\n\n    public setMultipleMaxSize(multipleMaxSize: number | string) {\n        this.config.multipleMaxSize = multipleMaxSize;\n    }\n\n    public getOnChangePickAttributes() {\n        return this.config.onChangePickAttributes;\n    }\n\n    public setOnChangePickAttributes(attributes: string[]) {\n        this.config.onChangePickAttributes = attributes;\n    }\n}\n"],"mappings":"AAEA,SAASA,gBAAgB;AACzB,SAASC,0BAA0B;AACnC,SAASC,iBAAiB;AAwB1B,OAAO,MAAMC,kBAAkB,SAASH,gBAAgB,CAA2B;EAGxEI,WAAWA,CAACC,EAAU,EAAEC,MAAgC,EAAE;IAC7D,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,WAAW,CAAC,IAAIN,0BAA0B,CAAC,CAAC,CAAC;IAElD,IAAI,CAACO,kBAAkB,GAAG,IAAIN,iBAAiB,CAAC,YAAY,CAAC;IAE7D,IAAI,CAACO,YAAY,CAACN,kBAAkB,CAAC;EACzC;EAEOO,oBAAoBA,CAAA,EAAG;IAC1B,OAAO,IAAI,CAACF,kBAAkB;EAClC;EAEOG,SAASA,CAAA,EAAG;IACf,OAAO,IAAI,CAACL,MAAM,CAACM,MAAM;EAC7B;EAEOC,SAASA,CAACD,MAAgB,EAAE;IAC/B,IAAI,CAACN,MAAM,CAACM,MAAM,GAAGA,MAAM;EAC/B;EAEOE,UAAUA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACR,MAAM,CAACS,OAAO;EAC9B;EAEOC,UAAUA,CAACD,OAAwB,EAAE;IACxC,IAAI,CAACT,MAAM,CAACS,OAAO,GAAGA,OAAO;EACjC;EAEOE,mBAAmBA,CAAA,EAAG;IACzB,OAAO,IAAI,CAACX,MAAM,CAACY,gBAAgB;EACvC;EAEOC,mBAAmBA,CAACD,gBAAwB,EAAE;IACjD,IAAI,CAACZ,MAAM,CAACY,gBAAgB,GAAGA,gBAAgB;EACnD;EAEOE,kBAAkBA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACd,MAAM,CAACe,eAAe;EACtC;EAEOC,kBAAkBA,CAACD,eAAgC,EAAE;IACxD,IAAI,CAACf,MAAM,CAACe,eAAe,GAAGA,eAAe;EACjD;EAEOE,yBAAyBA,CAAA,EAAG;IAC/B,OAAO,IAAI,CAACjB,MAAM,CAACkB,sBAAsB;EAC7C;EAEOC,yBAAyBA,CAACC,UAAoB,EAAE;IACnD,IAAI,CAACpB,MAAM,CAACkB,sBAAsB,GAAGE,UAAU;EACnD;AACJ","ignoreList":[]}

package/ui/elements/form/FormElement.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import { FormOnSubmit, FormRenderPropParams } from "@webiny/form";
-import { UIElement, UIElementConfig } from "../../UIElement";
+import React from "react";
+import type { FormOnSubmit, FormRenderPropParams } from "@webiny/form";
+import type { UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import { UIElement } from "../../UIElement";
 interface FormElementConfig extends UIElementConfig {
     onSubmit: FormOnSubmit;
     getData(): Record<string, any>;
@@ -11,11 +12,11 @@ interface FormElementConfig extends UIElementConfig {
     submitOnEnter?: boolean;
     validateOnFirstSubmit?: boolean;
 }
-export interface FormElementRenderProps {
+export interface FormElementRenderProps extends UiElementRenderProps {
     formProps: FormRenderPropParams;
 }
 export declare class FormElement extends UIElement<FormElementConfig> {
-    constructor(id: any, config: any);
-    render(props: any): JSX.Element;
+    constructor(id: string, config: FormElementConfig);
+    render(props: FormElementRenderProps): React.ReactNode;
 }
 export {};

package/ui/elements/form/FormElement.js

@@ -1,45 +1,20 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
 import React, { Fragment } from "react";
 import { Form } from "@webiny/form";
 import { UIElement } from "../../UIElement";
-export var FormElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(FormElement, _UIElement);
-
-  var _super = _createSuper(FormElement);
-
-  function FormElement(id, config) {
-    var _this;
-
-    _classCallCheck(this, FormElement);
-
-    _this = _super.call(this, id, config);
-
-    _this.useGrid(false);
-
-    return _this;
+export class FormElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.useGrid(false);
   }
+  render(props) {
+    return /*#__PURE__*/React.createElement(Form, {
+      onSubmit: this.config.onSubmit,
+      data: this.config.getData()
+    }, formProps => /*#__PURE__*/React.createElement(Fragment, null, super.render({
+      ...props,
+      formProps
+    })));
+  }
+}
 
-  _createClass(FormElement, [{
-    key: "render",
-    value: function render(props) {
-      var _this2 = this;
-
-      return /*#__PURE__*/React.createElement(Form, {
-        onSubmit: this.config.onSubmit,
-        data: this.config.getData()
-      }, function (formProps) {
-        return /*#__PURE__*/React.createElement(Fragment, null, _get(_getPrototypeOf(FormElement.prototype), "render", _this2).call(_this2, _objectSpread(_objectSpread({}, props), {}, {
-          formProps: formProps
-        })));
-      });
-    }
-  }]);
-
-  return FormElement;
-}(UIElement);
+//# sourceMappingURL=FormElement.js.map

package/ui/elements/form/FormElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","Form","UIElement","FormElement","constructor","id","config","useGrid","render","props","createElement","onSubmit","data","getData","formProps"],"sources":["FormElement.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport type { FormOnSubmit, FormRenderPropParams } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport type { UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } from \"~/ui/UIElement\";\n\ninterface FormElementConfig extends UIElementConfig {\n    onSubmit: FormOnSubmit;\n    getData(): Record<string, any>;\n    getInvalidFields?(): Record<string, any>;\n    isDisabled?(): boolean;\n    onChange?: FormOnSubmit;\n    onInvalid?: () => void;\n    submitOnEnter?: boolean;\n    validateOnFirstSubmit?: boolean;\n}\n\nexport interface FormElementRenderProps extends UiElementRenderProps {\n    formProps: FormRenderPropParams;\n}\n\nexport class FormElement extends UIElement<FormElementConfig> {\n    public constructor(id: string, config: FormElementConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        return (\n            <Form onSubmit={this.config.onSubmit} data={this.config.getData()}>\n                {formProps => <Fragment>{super.render({ ...props, formProps })}</Fragment>}\n            </Form>\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,SAAS;AAiBlB,OAAO,MAAMC,WAAW,SAASD,SAAS,CAAoB;EACnDE,WAAWA,CAACC,EAAU,EAAEC,MAAyB,EAAE;IACtD,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA6B,EAAmB;IACnE,oBACIV,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,QAAQ,EAAE,IAAI,CAACL,MAAM,CAACK,QAAS;MAACC,IAAI,EAAE,IAAI,CAACN,MAAM,CAACO,OAAO,CAAC;IAAE,GAC7DC,SAAS,iBAAIf,KAAA,CAAAW,aAAA,CAACV,QAAQ,QAAE,KAAK,CAACQ,MAAM,CAAC;MAAE,GAAGC,KAAK;MAAEK;IAAU,CAAC,CAAY,CACvE,CAAC;EAEf;AACJ","ignoreList":[]}

package/ui/elements/form/FormFieldElement.d.ts

@@ -1,10 +1,12 @@
-import React from "react";
-import { FormRenderPropParams, FormAPI } from "@webiny/form";
-import { UIElement, UIElementConfig } from "../../UIElement";
-import { FormElementRenderProps } from "./FormElement";
+import type React from "react";
+import type { FormRenderPropParams, FormAPI } from "@webiny/form";
+import type { UIElementConfig } from "../../UIElement";
+import { UIElement } from "../../UIElement";
+import type { FormElementRenderProps } from "./FormElement";
+import type { Validator } from "@webiny/validation/types";
 export interface FormFieldElementConfig<TRenderProps = FormRenderPropParams> extends UIElementConfig<TRenderProps> {
     name: string;
-    validators?: GetterWithProps<Function | Function[]>;
+    validators?: GetterWithProps<Validator | Validator[]>;
     beforeChange?: BeforeChange;
     afterChange?: AfterChange;
     defaultValue?: any | GetterWithProps<any>;
@@ -22,8 +24,8 @@ interface BeforeChange {
 interface BeforeChangeCallback {
     (value: any): void;
 }
-interface AfterChange {
-    (value: any, form: FormAPI): void;
+interface AfterChange<T = any, D extends Record<string, any> = Record<string, any>> {
+    (value: T, form: FormAPI<D>): void;
 }
 interface GetterWithProps<T> {
     (props: FormElementRenderProps): T;
@@ -33,7 +35,7 @@ export declare class FormFieldElement<TConfig extends FormFieldElementConfig = F
     private _afterChange;
     constructor(id: string, config: TConfig);
     getName(): string;
-    getValidators(props?: FormFieldElementRenderProps): Function | Function[];
+    getValidators(props?: FormFieldElementRenderProps): Validator | Validator[];
     getDefaultValue(props?: FormFieldElementRenderProps): any;
     getLabel(props?: FormFieldElementRenderProps): string;
     getDescription(props?: FormFieldElementRenderProps): string | React.ReactElement;
@@ -44,11 +46,11 @@ export declare class FormFieldElement<TConfig extends FormFieldElementConfig = F
     setDefaultValue(value: any | GetterWithProps<any>): void;
     getIsDisabled(props?: FormFieldElementRenderProps): boolean;
     setIsDisabled(isDisabled: boolean | GetterWithProps<boolean>): void;
-    setValidators(validators: GetterWithProps<Function>): void;
-    onBeforeChange(value: any, cb: any): void;
-    onAfterChange(value: any, form: any): void;
+    setValidators(validators: GetterWithProps<Validator>): void;
+    onBeforeChange(value: string, cb: (value: string) => void): void;
+    onAfterChange(value: string, form: FormAPI): void;
     addBeforeChange(cb: BeforeChange): void;
-    addAfterChange(cb: AfterChange): void;
+    addAfterChange<T = any, D extends Record<string, any> = Record<string, any>>(cb: AfterChange<T, D>): void;
     setBeforeChange(cb: BeforeChange): void;
     setAfterChange(cb: AfterChange): void;
 }