@webiny/app-admin 6.0.0-beta.0 → 6.0.0-rc.1

package/components/Dialogs/useDialogs.js

@@ -1,20 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useCustomDialog", {
-  enumerable: true,
-  get: function get() {
-    return _CustomDialog.useCustomDialog;
-  }
-});
-exports.useDialogs = void 0;
-var _react = require("react");
-var _DialogsContext = require("./DialogsContext");
-var _CustomDialog = require("./CustomDialog");
-var useDialogs = exports.useDialogs = function useDialogs() {
-  var context = (0, _react.useContext)(_DialogsContext.DialogsContext);
+import { useContext } from "react";
+import { DialogsContext } from "./DialogsContext.js";
+export const useDialogs = () => {
+  const context = useContext(DialogsContext);
   if (!context) {
     throw new Error("useDialogs must be used within a DialogsContext.Provider");
   }

package/components/Dialogs/useDialogs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_DialogsContext","_CustomDialog","useDialogs","exports","context","useContext","DialogsContext","Error"],"sources":["useDialogs.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { DialogsContext } from \"./DialogsContext\";\n\nexport const useDialogs = () => {\n    const context = useContext(DialogsContext);\n\n    if (!context) {\n        throw new Error(\"useDialogs must be used within a DialogsContext.Provider\");\n    }\n\n    return context;\n};\n\nexport { useCustomDialog } from \"./CustomDialog\";\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AAYA,IAAAE,aAAA,GAAAF,OAAA;AAVO,IAAMG,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAME,OAAO,GAAG,IAAAC,iBAAU,EAACC,8BAAc,CAAC;EAE1C,IAAI,CAACF,OAAO,EAAE;IACV,MAAM,IAAIG,KAAK,CAAC,0DAA0D,CAAC;EAC/E;EAEA,OAAOH,OAAO;AAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["useContext","DialogsContext","useDialogs","context","Error"],"sources":["useDialogs.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { DialogsContext } from \"./DialogsContext.js\";\n\nexport const useDialogs = () => {\n    const context = useContext(DialogsContext);\n\n    if (!context) {\n        throw new Error(\"useDialogs must be used within a DialogsContext.Provider\");\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc;AAEvB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAGH,UAAU,CAACC,cAAc,CAAC;EAE1C,IAAI,CAACE,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,0DAA0D,CAAC;EAC/E;EAEA,OAAOD,OAAO;AAClB,CAAC","ignoreList":[]}

package/components/EmptyView.d.ts

@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 export interface EmptyViewProps {
     icon?: ReactElement;
     title: string;
-    action: ReactElement | null;
+    action?: ReactElement | null;
 }
-declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => React.JSX.Element;
-export default EmptyView;
+export declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => React.JSX.Element;

package/components/EmptyView.js

@@ -1,45 +1,34 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _Typography = require("@webiny/ui/Typography");
-var _touch_app = require("@material-design-icons/svg/filled/touch_app.svg");
-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 EmptyViewWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "eu81oh40"
-} : {
-  target: "eu81oh40",
-  label: "EmptyViewWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vdn6wi",
-  styles: "width:100%;height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;& .media{& svg{width:75px;height:75px;fill:var(--mdc-theme-text-icon-on-background);}margin-bottom:30px;}& .title__container{max-width:276px;text-align:center;margin-bottom:24px;& .title{color:var(--mdc-theme-text-secondary-on-background);}}& .action__container{& .mdc-button{padding:0px 16px;background-color:var(--mdc-theme-surface);}}"
-} : {
-  name: "1vdn6wi",
-  styles: "width:100%;height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;& .media{& svg{width:75px;height:75px;fill:var(--mdc-theme-text-icon-on-background);}margin-bottom:30px;}& .title__container{max-width:276px;text-align:center;margin-bottom:24px;& .title{color:var(--mdc-theme-text-secondary-on-background);}}& .action__container{& .mdc-button{padding:0px 16px;background-color:var(--mdc-theme-surface);}}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtcHR5Vmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3lCIiwiZmlsZSI6IkVtcHR5Vmlldy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3RFbGVtZW50IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tIFwiQHdlYmlueS91aS9UeXBvZ3JhcGh5XCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBUb3VjaEljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvZmlsbGVkL3RvdWNoX2FwcC5zdmdcIjtcblxuY29uc3QgRW1wdHlWaWV3V3JhcHBlciA9IHN0eWxlZChcImRpdlwiKSh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGhlaWdodDogXCI4MCVcIixcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG5cbiAgICBcIiYgLm1lZGlhXCI6IHtcbiAgICAgICAgXCImIHN2Z1wiOiB7XG4gICAgICAgICAgICB3aWR0aDogNzUsXG4gICAgICAgICAgICBoZWlnaHQ6IDc1LFxuICAgICAgICAgICAgZmlsbDogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1pY29uLW9uLWJhY2tncm91bmQpXCJcbiAgICAgICAgfSxcbiAgICAgICAgbWFyZ2luQm90dG9tOiAzMFxuICAgIH0sXG4gICAgXCImIC50aXRsZV9fY29udGFpbmVyXCI6IHtcbiAgICAgICAgbWF4V2lkdGg6IDI3NixcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBtYXJnaW5Cb3R0b206IDI0LFxuICAgICAgICBcIiYgLnRpdGxlXCI6IHtcbiAgICAgICAgICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgICAgIH1cbiAgICB9LFxuICAgIFwiJiAuYWN0aW9uX19jb250YWluZXJcIjoge1xuICAgICAgICBcIiYgLm1kYy1idXR0b25cIjoge1xuICAgICAgICAgICAgcGFkZGluZzogXCIwcHggMTZweFwiLFxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1zdXJmYWNlKVwiXG4gICAgICAgIH1cbiAgICB9XG59KTtcbmV4cG9ydCBpbnRlcmZhY2UgRW1wdHlWaWV3UHJvcHMge1xuICAgIGljb24/OiBSZWFjdEVsZW1lbnQ7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICBhY3Rpb246IFJlYWN0RWxlbWVudCB8IG51bGw7XG59XG5jb25zdCBFbXB0eVZpZXcgPSAoeyBpY29uID0gPFRvdWNoSWNvbiAvPiwgdGl0bGUsIGFjdGlvbiB9OiBFbXB0eVZpZXdQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxFbXB0eVZpZXdXcmFwcGVyPlxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wibWVkaWFcIn0+e2ljb259PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInRpdGxlX19jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB1c2U9e1wic3VidGl0bGUxXCJ9IGNsYXNzTmFtZT17XCJ0aXRsZVwifT5cbiAgICAgICAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgICAgIDwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhY3Rpb25fX2NvbnRhaW5lclwiPnthY3Rpb259PC9kaXY+XG4gICAgICAgIDwvRW1wdHlWaWV3V3JhcHBlcj5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRW1wdHlWaWV3O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var EmptyView = function EmptyView(_ref) {
-  var _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_touch_app.ReactComponent, null) : _ref$icon,
-    title = _ref.title,
-    action = _ref.action;
-  return /*#__PURE__*/_react.default.createElement(EmptyViewWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "media"
-  }, icon), /*#__PURE__*/_react.default.createElement("div", {
-    className: "title__container"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "subtitle1",
-    className: "title"
-  }, title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "action__container"
+import React from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as FileIcon } from "@webiny/icons/description.svg";
+export const EmptyView = ({
+  icon = /*#__PURE__*/React.createElement(FileIcon, null),
+  title,
+  action
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full flex flex-col items-center justify-center gap-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 128,
+      height: 128
+    },
+    className: "flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    label: "Empty"
+  }))), /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    className: "text-center text-neutral-strong",
+    as: "div",
+    style: {
+      maxWidth: 276
+    }
+  }, title), action && /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center gap-sm"
   }, action));
 };
-var _default = exports.default = EmptyView;
 
 //# sourceMappingURL=EmptyView.js.map

package/components/EmptyView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Typography","_touch_app","_EMOTION_STRINGIFIED_CSS_ERROR__","EmptyViewWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","EmptyView","_ref","_ref$icon","icon","createElement","ReactComponent","title","action","className","Typography","use","_default","exports"],"sources":["EmptyView.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as TouchIcon } from \"@material-design-icons/svg/filled/touch_app.svg\";\n\nconst EmptyViewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"80%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"& .media\": {\n        \"& svg\": {\n            width: 75,\n            height: 75,\n            fill: \"var(--mdc-theme-text-icon-on-background)\"\n        },\n        marginBottom: 30\n    },\n    \"& .title__container\": {\n        maxWidth: 276,\n        textAlign: \"center\",\n        marginBottom: 24,\n        \"& .title\": {\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    },\n    \"& .action__container\": {\n        \"& .mdc-button\": {\n            padding: \"0px 16px\",\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action: ReactElement | null;\n}\nconst EmptyView = ({ icon = <TouchIcon />, title, action }: EmptyViewProps) => {\n    return (\n        <EmptyViewWrapper>\n            <div className={\"media\"}>{icon}</div>\n            <div className=\"title__container\">\n                <Typography use={\"subtitle1\"} className={\"title\"}>\n                    {title}\n                </Typography>\n            </div>\n            <div className=\"action__container\">{action}</div>\n        </EmptyViewWrapper>\n    );\n};\n\nexport default EmptyView;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAA8F,SAAAG,iCAAA;AAE9F,IAAMC,gBAAgB,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,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,EAAAZ;AAAA,CA8BrC,CAAC;AAMF,IAAMa,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAAgE;EAAA,IAAAC,SAAA,GAAAD,IAAA,CAA1DE,IAAI;IAAJA,IAAI,GAAAD,SAAA,2BAAGpB,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAAClB,UAAA,CAAAmB,cAAS,MAAE,CAAC,GAAAH,SAAA;IAAEI,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,MAAM,GAAAN,IAAA,CAANM,MAAM;EACpD,oBACIzB,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAAChB,gBAAgB,qBACbN,MAAA,CAAAQ,OAAA,CAAAc,aAAA;IAAKI,SAAS,EAAE;EAAQ,GAAEL,IAAU,CAAC,eACrCrB,MAAA,CAAAQ,OAAA,CAAAc,aAAA;IAAKI,SAAS,EAAC;EAAkB,gBAC7B1B,MAAA,CAAAQ,OAAA,CAAAc,aAAA,CAACnB,WAAA,CAAAwB,UAAU;IAACC,GAAG,EAAE,WAAY;IAACF,SAAS,EAAE;EAAQ,GAC5CF,KACO,CACX,CAAC,eACNxB,MAAA,CAAAQ,OAAA,CAAAc,aAAA;IAAKI,SAAS,EAAC;EAAmB,GAAED,MAAY,CAClC,CAAC;AAE3B,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAtB,OAAA,GAEaU,SAAS","ignoreList":[]}
+{"version":3,"names":["React","Icon","Text","ReactComponent","FileIcon","EmptyView","icon","createElement","title","action","className","style","width","height","label","size","as","maxWidth"],"sources":["EmptyView.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as FileIcon } from \"@webiny/icons/description.svg\";\n\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action?: ReactElement | null;\n}\n\nexport const EmptyView = ({ icon = <FileIcon />, title, action }: EmptyViewProps) => {\n    return (\n        <div className=\"w-full h-full flex flex-col items-center justify-center gap-md\">\n            <div className=\"flex justify-center\">\n                <div\n                    style={{ width: 128, height: 128 }}\n                    className=\"flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl\"\n                >\n                    <Icon icon={icon} label={\"Empty\"} />\n                </div>\n            </div>\n            <Text\n                size={\"md\"}\n                className={\"text-center text-neutral-strong\"}\n                as={\"div\"}\n                style={{ maxWidth: 276 }}\n            >\n                {title}\n            </Text>\n            {action && <div className={\"flex justify-center gap-sm\"}>{action}</div>}\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,QAAQ,QAAQ,+BAA+B;AAQ1E,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,IAAI,gBAAGN,KAAA,CAAAO,aAAA,CAACH,QAAQ,MAAE,CAAC;EAAEI,KAAK;EAAEC;AAAuB,CAAC,KAAK;EACjF,oBACIT,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAC;EAAgE,gBAC3EV,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAC;EAAqB,gBAChCV,KAAA,CAAAO,aAAA;IACII,KAAK,EAAE;MAAEC,KAAK,EAAE,GAAG;MAAEC,MAAM,EAAE;IAAI,CAAE;IACnCH,SAAS,EAAC;EAAsG,gBAEhHV,KAAA,CAAAO,aAAA,CAACN,IAAI;IAACK,IAAI,EAAEA,IAAK;IAACQ,KAAK,EAAE;EAAQ,CAAE,CAClC,CACJ,CAAC,eACNd,KAAA,CAAAO,aAAA,CAACL,IAAI;IACDa,IAAI,EAAE,IAAK;IACXL,SAAS,EAAE,iCAAkC;IAC7CM,EAAE,EAAE,KAAM;IACVL,KAAK,EAAE;MAAEM,QAAQ,EAAE;IAAI;EAAE,GAExBT,KACC,CAAC,EACNC,MAAM,iBAAIT,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAE;EAA6B,GAAED,MAAY,CACrE,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Filters/Filters.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
-import { FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
-declare type Filter = {
+import type { FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
+type Filter = {
     name: string;
     element: React.ReactElement;
 };
-export declare type GenericFiltersData = GenericFormData;
-export declare type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;
-export interface FiltersProps<T> extends Pick<FormProps<T>, "data" | "onChange"> {
+export type GenericFiltersData = GenericFormData;
+export type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;
+export interface FiltersProps<T extends GenericFormData = GenericFormData> extends Pick<FormProps<T>, "data" | "onChange"> {
     filters: Filter[];
     show: boolean;
     children?: React.ReactNode;
     ["data-testid"]?: string;
 }
-export declare const Filters: <T extends GenericFormData = GenericFormData>(props: FiltersProps<T>) => React.JSX.Element | null;
+export declare const Filters: <T extends GenericFiltersData = GenericFiltersData>(props: FiltersProps<T>) => React.JSX.Element | null;
 export {};

package/components/Filters/Filters.js

@@ -1,29 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Filters = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _form = require("@webiny/form");
-var _Filters = require("./Filters.styled");
-var Filters = exports.Filters = function Filters(props) {
+import React from "react";
+import { Separator } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
+export const Filters = props => {
   if (!props.show || !props.filters.length) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_Filters.FiltersContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full bg-neutral-base px-md my-sm",
     "data-testid": props["data-testid"] || "filters-container"
-  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+  }, /*#__PURE__*/React.createElement(Form, {
     data: props.data,
     onChange: props.onChange
-  }, function () {
-    return /*#__PURE__*/_react.default.createElement(_Filters.FormContainer, null, props.filters.map(function (filter) {
-      return /*#__PURE__*/_react.default.createElement(_Filters.FilterContainer, {
-        key: filter.name
-      }, filter.element);
-    }), props.children);
-  }));
+  }, () => /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex gap-sm flex-wrap"
+  }, props.filters.map(filter => /*#__PURE__*/React.createElement("div", {
+    key: filter.name
+  }, filter.element)), props.children))), /*#__PURE__*/React.createElement(Separator, null));
 };
 
 //# sourceMappingURL=Filters.js.map

package/components/Filters/Filters.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_form","_Filters","Filters","exports","props","show","filters","length","default","createElement","FiltersContainer","Form","data","onChange","FormContainer","map","filter","FilterContainer","key","name","element","children"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport { Form, FormOnSubmit, FormProps, GenericFormData } from \"@webiny/form\";\n\nimport { FilterContainer, FiltersContainer, FormContainer } from \"./Filters.styled\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\nexport type GenericFiltersData = GenericFormData;\n\nexport type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;\n\nexport interface FiltersProps<T> extends Pick<FormProps<T>, \"data\" | \"onChange\"> {\n    filters: Filter[];\n    show: boolean;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const Filters = <T extends GenericFiltersData = GenericFiltersData>(\n    props: FiltersProps<T>\n) => {\n    if (!props.show || !props.filters.length) {\n        return null;\n    }\n\n    return (\n        <FiltersContainer data-testid={props[\"data-testid\"] || \"filters-container\"}>\n            <Form data={props.data} onChange={props.onChange}>\n                {() => (\n                    <FormContainer>\n                        {props.filters.map(filter => (\n                            <FilterContainer key={filter.name}>{filter.element}</FilterContainer>\n                        ))}\n                        {props.children}\n                    </FormContainer>\n                )}\n            </Form>\n        </FiltersContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AAkBO,IAAMG,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAChBE,KAAsB,EACrB;EACD,IAAI,CAACA,KAAK,CAACC,IAAI,IAAI,CAACD,KAAK,CAACE,OAAO,CAACC,MAAM,EAAE;IACtC,OAAO,IAAI;EACf;EAEA,oBACIV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAS,gBAAgB;IAAC,eAAaN,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,gBACvEP,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,KAAA,CAAAW,IAAI;IAACC,IAAI,EAAER,KAAK,CAACQ,IAAK;IAACC,QAAQ,EAAET,KAAK,CAACS;EAAS,GAC5C;IAAA,oBACGhB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAa,aAAa,QACTV,KAAK,CAACE,OAAO,CAACS,GAAG,CAAC,UAAAC,MAAM;MAAA,oBACrBnB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAgB,eAAe;QAACC,GAAG,EAAEF,MAAM,CAACG;MAAK,GAAEH,MAAM,CAACI,OAAyB,CAAC;IAAA,CACxE,CAAC,EACDhB,KAAK,CAACiB,QACI,CAAC;EAAA,CAElB,CACQ,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Separator","Form","Filters","props","show","filters","length","createElement","Fragment","className","data","onChange","map","filter","key","name","element","children"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"@webiny/admin-ui\";\nimport type { FormOnSubmit, FormProps, GenericFormData } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\nexport type GenericFiltersData = GenericFormData;\n\nexport type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;\n\nexport interface FiltersProps<T extends GenericFormData = GenericFormData>\n    extends Pick<FormProps<T>, \"data\" | \"onChange\"> {\n    filters: Filter[];\n    show: boolean;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const Filters = <T extends GenericFiltersData = GenericFiltersData>(\n    props: FiltersProps<T>\n) => {\n    if (!props.show || !props.filters.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <div\n                className={\"w-full bg-neutral-base px-md my-sm\"}\n                data-testid={props[\"data-testid\"] || \"filters-container\"}\n            >\n                <Form data={props.data} onChange={props.onChange}>\n                    {() => (\n                        <div className={\"w-full flex gap-sm flex-wrap\"}>\n                            {props.filters.map(filter => (\n                                <div key={filter.name}>{filter.element}</div>\n                            ))}\n                            {props.children}\n                        </div>\n                    )}\n                </Form>\n            </div>\n            <Separator />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,IAAI,QAAQ,cAAc;AAmBnC,OAAO,MAAMC,OAAO,GAChBC,KAAsB,IACrB;EACD,IAAI,CAACA,KAAK,CAACC,IAAI,IAAI,CAACD,KAAK,CAACE,OAAO,CAACC,MAAM,EAAE;IACtC,OAAO,IAAI;EACf;EAEA,oBACIP,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA;IACIE,SAAS,EAAE,oCAAqC;IAChD,eAAaN,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,gBAEzDJ,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACS,IAAI,EAAEP,KAAK,CAACO,IAAK;IAACC,QAAQ,EAAER,KAAK,CAACQ;EAAS,GAC5C,mBACGZ,KAAA,CAAAQ,aAAA;IAAKE,SAAS,EAAE;EAA+B,GAC1CN,KAAK,CAACE,OAAO,CAACO,GAAG,CAACC,MAAM,iBACrBd,KAAA,CAAAQ,aAAA;IAAKO,GAAG,EAAED,MAAM,CAACE;EAAK,GAAEF,MAAM,CAACG,OAAa,CAC/C,CAAC,EACDb,KAAK,CAACc,QACN,CAEP,CACL,CAAC,eACNlB,KAAA,CAAAQ,aAAA,CAACP,SAAS,MAAE,CACd,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/Filters/FiltersToggle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FiltersToggleProps {
+    onFiltersToggle: () => void;
+    showingFilters: boolean;
+    "data-testid"?: string;
+}
+export declare const FiltersToggle: (props: FiltersToggleProps) => React.JSX.Element;

package/components/Filters/FiltersToggle.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FilterIcon } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as CloseFilterIcon } from "@webiny/icons/filter_list_off.svg";
+const Icon = ({
+  showingFilters
+}) => {
+  return showingFilters ? /*#__PURE__*/React.createElement(CloseFilterIcon, null) : /*#__PURE__*/React.createElement(FilterIcon, null);
+};
+const IconComponent = /*#__PURE__*/React.memo(Icon);
+export const FiltersToggle = props => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    side: "bottom",
+    content: props.showingFilters ? "Hide filters" : "Show filters",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      icon: /*#__PURE__*/React.createElement(IconComponent, {
+        showingFilters: props.showingFilters
+      }),
+      onClick: props.onFiltersToggle,
+      "data-testid": props["data-testid"]
+    })
+  });
+};
+
+//# sourceMappingURL=FiltersToggle.js.map

package/components/Filters/FiltersToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconButton","Tooltip","ReactComponent","FilterIcon","CloseFilterIcon","Icon","showingFilters","createElement","IconComponent","memo","FiltersToggle","props","side","content","trigger","variant","icon","onClick","onFiltersToggle"],"sources":["FiltersToggle.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { ReactComponent as CloseFilterIcon } from \"@webiny/icons/filter_list_off.svg\";\n\ninterface IconProps {\n    showingFilters?: boolean;\n}\n\nconst Icon = ({ showingFilters }: IconProps) => {\n    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;\n};\nconst IconComponent = React.memo(Icon);\n\nexport interface FiltersToggleProps {\n    onFiltersToggle: () => void;\n    showingFilters: boolean;\n    \"data-testid\"?: string;\n}\n\nexport const FiltersToggle = (props: FiltersToggleProps) => {\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            content={props.showingFilters ? \"Hide filters\" : \"Show filters\"}\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<IconComponent showingFilters={props.showingFilters} />}\n                    onClick={props.onFiltersToggle}\n                    data-testid={props[\"data-testid\"]}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AACtD,SAASC,cAAc,IAAIC,UAAU,QAAQ,+BAA+B;AAC5E,SAASD,cAAc,IAAIE,eAAe,QAAQ,mCAAmC;AAMrF,MAAMC,IAAI,GAAGA,CAAC;EAAEC;AAA0B,CAAC,KAAK;EAC5C,OAAOA,cAAc,gBAAGP,KAAA,CAAAQ,aAAA,CAACH,eAAe,MAAE,CAAC,gBAAGL,KAAA,CAAAQ,aAAA,CAACJ,UAAU,MAAE,CAAC;AAChE,CAAC;AACD,MAAMK,aAAa,gBAAGT,KAAK,CAACU,IAAI,CAACJ,IAAI,CAAC;AAQtC,OAAO,MAAMK,aAAa,GAAIC,KAAyB,IAAK;EACxD,oBACIZ,KAAA,CAAAQ,aAAA,CAACN,OAAO;IACJW,IAAI,EAAE,QAAS;IACfC,OAAO,EAAEF,KAAK,CAACL,cAAc,GAAG,cAAc,GAAG,cAAe;IAChEQ,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACP,UAAU;MACPe,OAAO,EAAE,OAAQ;MACjBC,IAAI,eAAEjB,KAAA,CAAAQ,aAAA,CAACC,aAAa;QAACF,cAAc,EAAEK,KAAK,CAACL;MAAe,CAAE,CAAE;MAC9DW,OAAO,EAAEN,KAAK,CAACO,eAAgB;MAC/B,eAAaP,KAAK,CAAC,aAAa;IAAE,CACrC;EACJ,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/Filters/index.d.ts

@@ -1 +1,2 @@
-export * from "./Filters";
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";

package/components/Filters/index.js

@@ -1,18 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Filters = require("./Filters");
-Object.keys(_Filters).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Filters[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Filters[key];
-    }
-  });
-});
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";
 
 //# sourceMappingURL=index.js.map

package/components/Filters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Filters","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Filters\";\n"],"mappings":";;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,QAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,QAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,QAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Filters.js\";\nexport * from \"./FiltersToggle.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/components/FloatingActionButton.js

@@ -1,24 +1,18 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FloatingActionButton = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Button = require("@webiny/ui/Button");
-var _add = require("@material-design-icons/svg/outlined/add.svg");
+import * as React from "react";
+import { ButtonFloating } from "@webiny/ui/Button/index.js";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 // Set "styles" inline, since no customizations are possible / needed here.
-var FloatingActionButton = exports.FloatingActionButton = function FloatingActionButton(props) {
+const FloatingActionButton = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
       bottom: 20,
       right: 20
     }
-  }, /*#__PURE__*/React.createElement(_Button.ButtonFloating, Object.assign({}, props, {
-    icon: /*#__PURE__*/React.createElement(_add.ReactComponent, null)
+  }, /*#__PURE__*/React.createElement(ButtonFloating, Object.assign({}, props, {
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
   })));
 };
+export { FloatingActionButton };
 
 //# sourceMappingURL=FloatingActionButton.js.map

package/components/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_Button","_add","FloatingActionButton","exports","props","createElement","style","position","bottom","right","ButtonFloating","Object","assign","icon","ReactComponent"],"sources":["FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ButtonFloating } from \"@webiny/ui/Button\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/outlined/add.svg\";\n\ninterface FloatingActionButtonProps {\n    children: React.ReactNode;\n}\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton = (props: FloatingActionButtonProps) => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <ButtonFloating {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AAMA;AACA,IAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAIE,KAAgC,EAAK;EAC/D,oBACIP,KAAA,CAAAQ,aAAA;IACIC,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,EAAE;MACVC,KAAK,EAAE;IACX;EAAE,gBAEFZ,KAAA,CAAAQ,aAAA,CAACL,OAAA,CAAAU,cAAc,EAAAC,MAAA,CAAAC,MAAA,KAAKR,KAAK;IAAES,IAAI,eAAEhB,KAAA,CAAAQ,aAAA,CAACJ,IAAA,CAAAa,cAAO,MAAE;EAAE,EAAE,CAC9C,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ButtonFloating","ReactComponent","AddIcon","FloatingActionButton","props","createElement","style","position","bottom","right","Object","assign","icon"],"sources":["FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ButtonFloating } from \"@webiny/ui/Button/index.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface FloatingActionButtonProps {\n    children: React.ReactNode;\n}\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton = (props: FloatingActionButtonProps) => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <ButtonFloating {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AAMjE;AACA,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,oBACIL,KAAA,CAAAM,aAAA;IACIC,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,EAAE;MACVC,KAAK,EAAE;IACX;EAAE,gBAEFV,KAAA,CAAAM,aAAA,CAACL,cAAc,EAAAU,MAAA,CAAAC,MAAA,KAAKP,KAAK;IAAEQ,IAAI,eAAEb,KAAA,CAAAM,aAAA,CAACH,OAAO,MAAE;EAAE,EAAE,CAC9C,CAAC;AAEd,CAAC;AAED,SAASC,oBAAoB","ignoreList":[]}

package/components/FloatingPanel.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface FloatingPanelRenderProp {
+    (params: {
+        height: number;
+        width: number;
+    }): React.ReactNode;
+}
+export interface FloatingPanelProps {
+    shortcut: string;
+    dragHandle: string;
+    children: FloatingPanelRenderProp;
+}
+export declare const FloatingPanel: ({ dragHandle, shortcut, children }: FloatingPanelProps) => React.ReactPortal;

package/components/FloatingPanel.js

@@ -0,0 +1,94 @@
+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)."; }
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import Draggable from "react-draggable";
+import { Resizable } from "react-resizable";
+import { useKeyHandler } from "../hooks/index.js";
+const PanelRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e4wugyk1"
+} : {
+  target: "e4wugyk1",
+  label: "PanelRoot"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a2cm7e",
+  styles: "position:fixed;top:0;left:0;z-index:100000;width:0;height:0"
+} : {
+  name: "1a2cm7e",
+  styles: "position:fixed;top:0;left:0;z-index:100000;width:0;height:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZsb2F0aW5nUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVE0QiIsImZpbGUiOiJGbG9hdGluZ1BhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVQb3J0YWwgfSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgRHJhZ2dhYmxlLCB7IHR5cGUgRHJhZ2dhYmxlRXZlbnRIYW5kbGVyIH0gZnJvbSBcInJlYWN0LWRyYWdnYWJsZVwiO1xuaW1wb3J0IHR5cGUgeyBSZXNpemFibGVQcm9wcyB9IGZyb20gXCJyZWFjdC1yZXNpemFibGVcIjtcbmltcG9ydCB7IFJlc2l6YWJsZSB9IGZyb20gXCJyZWFjdC1yZXNpemFibGVcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdXNlS2V5SGFuZGxlciB9IGZyb20gXCJ+L2hvb2tzL2luZGV4LmpzXCI7XG5cbmNvbnN0IFBhbmVsUm9vdCA9IHN0eWxlZC5kaXZgXG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHotaW5kZXg6IDEwMDAwMDtcbiAgICB3aWR0aDogMDtcbiAgICBoZWlnaHQ6IDA7XG5gO1xuXG5jb25zdCBSZXNpemVIYW5kbGUgPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMjBweDtcbiAgICBoZWlnaHQ6IDIwcHg7XG4gICAgYm90dG9tOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIHBhZGRpbmc6IDAgM3B4IDNweCAwO1xuICAgIGJhY2tncm91bmQ6IHVybChcImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEQ5NGJXd2dkbVZ5YzJsdmJqMGlNUzR3SWlCemRHRnVaR0ZzYjI1bFBTSnVieUkvUGcwOElTMHRJRWRsYm1WeVlYUnZjam9nUVdSdlltVWdSbWx5WlhkdmNtdHpJRU5UTml3Z1JYaHdiM0owSUZOV1J5QkZlSFJsYm5OcGIyNGdZbmtnUVdGeWIyNGdRbVZoYkd3Z0tHaDBkSEE2THk5bWFYSmxkMjl5YTNNdVlXSmxZV3hzTG1OdmJTa2dMaUJXWlhKemFXOXVPaUF3TGpZdU1TQWdMUzArRFR3aFJFOURWRmxRUlNCemRtY2dVRlZDVEVsRElDSXRMeTlYTTBNdkwwUlVSQ0JUVmtjZ01TNHhMeTlGVGlJZ0ltaDBkSEE2THk5M2QzY3Vkek11YjNKbkwwZHlZWEJvYVdOekwxTldSeTh4TGpFdlJGUkVMM04yWnpFeExtUjBaQ0krRFR4emRtY2dhV1E5SWxWdWRHbDBiR1ZrTFZCaFoyVWxNakF4SWlCMmFXVjNRbTk0UFNJd0lEQWdOaUEySWlCemRIbHNaVDBpWW1GamEyZHliM1Z1WkMxamIyeHZjam9qWm1abVptWm1NREFpSUhabGNuTnBiMjQ5SWpFdU1TSU5DWGh0Ykc1elBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHlNREF3TDNOMlp5SWdlRzFzYm5NNmVHeHBibXM5SW1oMGRIQTZMeTkzZDNjdWR6TXViM0puTHpFNU9Ua3ZlR3hwYm1zaUlIaHRiRHB6Y0dGalpUMGljSEpsYzJWeWRtVWlEUWw0UFNJd2NIZ2lJSGs5SWpCd2VDSWdkMmxrZEdnOUlqWndlQ0lnYUdWcFoyaDBQU0kyY0hnaURUNE5DVHhuSUc5d1lXTnBkSGs5SWpBdU16QXlJajROQ1FrOGNHRjBhQ0JrUFNKTklEWWdOaUJNSURBZ05pQk1JREFnTkM0eUlFd2dOQ0EwTGpJZ1RDQTBMaklnTkM0eUlFd2dOQzR5SURBZ1RDQTJJREFnVENBMklEWWdUQ0EySURZZ1dpSWdabWxzYkQwaUl6QXdNREF3TUNJdlBnMEpQQzluUGcwOEwzTjJaejQ9XCIpXG4gICAgICAgIG5vLXJlcGVhdCBib3R0b20gcmlnaHQ7XG4gICAgYmFja2dyb3VuZC1vcmlnaW46IGNvbnRlbnQtYm94O1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgY3Vyc29yOiBzZS1yZXNpemU7XG5gO1xuXG5leHBvcnQgaW50ZXJmYWNlIEZsb2F0aW5nUGFuZWxSZW5kZXJQcm9wIHtcbiAgICAocGFyYW1zOiB7IGhlaWdodDogbnVtYmVyOyB3aWR0aDogbnVtYmVyIH0pOiBSZWFjdC5SZWFjdE5vZGU7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmxvYXRpbmdQYW5lbFByb3BzIHtcbiAgICBzaG9ydGN1dDogc3RyaW5nO1xuICAgIGRyYWdIYW5kbGU6IHN0cmluZztcbiAgICBjaGlsZHJlbjogRmxvYXRpbmdQYW5lbFJlbmRlclByb3A7XG59XG5cbmV4cG9ydCBjb25zdCBGbG9hdGluZ1BhbmVsID0gKHsgZHJhZ0hhbmRsZSwgc2hvcnRjdXQsIGNoaWxkcmVuIH06IEZsb2F0aW5nUGFuZWxQcm9wcykgPT4ge1xuICAgIGNvbnN0IFtpc1Zpc2libGUsIHNldElzVmlzaWJsZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgY29uc3QgW3NpemUsIHNldFNpemVdID0gdXNlU3RhdGUoeyB3aWR0aDogNzAwLCBoZWlnaHQ6IDYwMCB9KTtcbiAgICBjb25zdCBbcG9zaXRpb24sIHNldFBvc2l0aW9uXSA9IHVzZVN0YXRlKHsgeDogMTAwLCB5OiAxMDAgfSk7XG4gICAgY29uc3QgeyBhZGRLZXlIYW5kbGVyLCByZW1vdmVLZXlIYW5kbGVyIH0gPSB1c2VLZXlIYW5kbGVyKCk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBhZGRLZXlIYW5kbGVyKHNob3J0Y3V0LCBlID0+IHtcbiAgICAgICAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIHNldElzVmlzaWJsZShpc1Zpc2libGUgPT4gIWlzVmlzaWJsZSk7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHJldHVybiAoKSA9PiByZW1vdmVLZXlIYW5kbGVyKHNob3J0Y3V0KTtcbiAgICB9LCBbc2V0SXNWaXNpYmxlXSk7XG5cbiAgICBjb25zdCBvbkRyYWdTdG9wOiBEcmFnZ2FibGVFdmVudEhhbmRsZXIgPSAoXywgZGF0YSkgPT4ge1xuICAgICAgICBzZXRQb3NpdGlvbih7IHg6IGRhdGEueCwgeTogZGF0YS55IH0pO1xuICAgIH07XG5cbiAgICBjb25zdCBvblJlc2l6ZTogUmVzaXphYmxlUHJvcHNbXCJvblJlc2l6ZVwiXSA9IChfLCB7IHNpemUgfSkgPT4ge1xuICAgICAgICBzZXRTaXplKHsgd2lkdGg6IHNpemUud2lkdGgsIGhlaWdodDogc2l6ZS5oZWlnaHQgfSk7XG4gICAgfTtcblxuICAgIHJldHVybiBjcmVhdGVQb3J0YWwoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8UGFuZWxSb290PlxuICAgICAgICAgICAgICAgIDxEcmFnZ2FibGUgaGFuZGxlPXtkcmFnSGFuZGxlfSBvblN0b3A9e29uRHJhZ1N0b3B9IHBvc2l0aW9uPXtwb3NpdGlvbn0+XG4gICAgICAgICAgICAgICAgICAgIDxSZXNpemFibGVcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoPXtzaXplLndpZHRofVxuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0PXtzaXplLmhlaWdodH1cbiAgICAgICAgICAgICAgICAgICAgICAgIG9uUmVzaXplPXtvblJlc2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGhhbmRsZT17PFJlc2l6ZUhhbmRsZSAvPn1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17XCJiZy1uZXV0cmFsLWJhc2UgcmVsYXRpdmUgYm9yZGVyLXNtIGJvcmRlci1hY2NlbnQtZGVmYXVsdFwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlzVmlzaWJsZSA/IFwiYmxvY2tcIiA6IFwibm9uZVwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogc2l6ZS53aWR0aCArIFwicHhcIixcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiBzaXplLmhlaWdodCArIFwicHhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e1wiZmxvYXRpbmctcGFuZWxcIn0+e2NoaWxkcmVuKHNpemUpfTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvUmVzaXphYmxlPlxuICAgICAgICAgICAgICAgIDwvRHJhZ2dhYmxlPlxuICAgICAgICAgICAgPC9QYW5lbFJvb3Q+XG4gICAgICAgIDwvPixcbiAgICAgICAgZG9jdW1lbnQuYm9keVxuICAgICk7XG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ResizeHandle = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e4wugyk0"
+} : {
+  target: "e4wugyk0",
+  label: "ResizeHandle"
+})(process.env.NODE_ENV === "production" ? {
+  name: "oq4jmq",
+  styles: "position:absolute;width:20px;height:20px;bottom:0;right:0;padding:0 3px 3px 0;background:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\") no-repeat bottom right;background-origin:content-box;box-sizing:border-box;cursor:se-resize"
+} : {
+  name: "oq4jmq",
+  styles: "position:absolute;width:20px;height:20px;bottom:0;right:0;padding:0 3px 3px 0;background:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\") no-repeat bottom right;background-origin:content-box;box-sizing:border-box;cursor:se-resize/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZsb2F0aW5nUGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCK0IiLCJmaWxlIjoiRmxvYXRpbmdQYW5lbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IERyYWdnYWJsZSwgeyB0eXBlIERyYWdnYWJsZUV2ZW50SGFuZGxlciB9IGZyb20gXCJyZWFjdC1kcmFnZ2FibGVcIjtcbmltcG9ydCB0eXBlIHsgUmVzaXphYmxlUHJvcHMgfSBmcm9tIFwicmVhY3QtcmVzaXphYmxlXCI7XG5pbXBvcnQgeyBSZXNpemFibGUgfSBmcm9tIFwicmVhY3QtcmVzaXphYmxlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHVzZUtleUhhbmRsZXIgfSBmcm9tIFwifi9ob29rcy9pbmRleC5qc1wiO1xuXG5jb25zdCBQYW5lbFJvb3QgPSBzdHlsZWQuZGl2YFxuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB6LWluZGV4OiAxMDAwMDA7XG4gICAgd2lkdGg6IDA7XG4gICAgaGVpZ2h0OiAwO1xuYDtcblxuY29uc3QgUmVzaXplSGFuZGxlID0gc3R5bGVkLmRpdmBcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIGJvdHRvbTogMDtcbiAgICByaWdodDogMDtcbiAgICBwYWRkaW5nOiAwIDNweCAzcHggMDtcbiAgICBiYWNrZ3JvdW5kOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQnpkR0Z1WkdGc2IyNWxQU0p1YnlJL1BnMDhJUzB0SUVkbGJtVnlZWFJ2Y2pvZ1FXUnZZbVVnUm1seVpYZHZjbXR6SUVOVE5pd2dSWGh3YjNKMElGTldSeUJGZUhSbGJuTnBiMjRnWW5rZ1FXRnliMjRnUW1WaGJHd2dLR2gwZEhBNkx5OW1hWEpsZDI5eWEzTXVZV0psWVd4c0xtTnZiU2tnTGlCV1pYSnphVzl1T2lBd0xqWXVNU0FnTFMwK0RUd2hSRTlEVkZsUVJTQnpkbWNnVUZWQ1RFbERJQ0l0THk5WE0wTXZMMFJVUkNCVFZrY2dNUzR4THk5RlRpSWdJbWgwZEhBNkx5OTNkM2N1ZHpNdWIzSm5MMGR5WVhCb2FXTnpMMU5XUnk4eExqRXZSRlJFTDNOMlp6RXhMbVIwWkNJK0RUeHpkbWNnYVdROUlsVnVkR2wwYkdWa0xWQmhaMlVsTWpBeElpQjJhV1YzUW05NFBTSXdJREFnTmlBMklpQnpkSGxzWlQwaVltRmphMmR5YjNWdVpDMWpiMnh2Y2pvalptWm1abVptTURBaUlIWmxjbk5wYjI0OUlqRXVNU0lOQ1hodGJHNXpQU0pvZEhSd09pOHZkM2QzTG5jekxtOXlaeTh5TURBd0wzTjJaeUlnZUcxc2JuTTZlR3hwYm1zOUltaDBkSEE2THk5M2QzY3Vkek11YjNKbkx6RTVPVGt2ZUd4cGJtc2lJSGh0YkRwemNHRmpaVDBpY0hKbGMyVnlkbVVpRFFsNFBTSXdjSGdpSUhrOUlqQndlQ0lnZDJsa2RHZzlJalp3ZUNJZ2FHVnBaMmgwUFNJMmNIZ2lEVDROQ1R4bklHOXdZV05wZEhrOUlqQXVNekF5SWo0TkNRazhjR0YwYUNCa1BTSk5JRFlnTmlCTUlEQWdOaUJNSURBZ05DNHlJRXdnTkNBMExqSWdUQ0EwTGpJZ05DNHlJRXdnTkM0eUlEQWdUQ0EySURBZ1RDQTJJRFlnVENBMklEWWdXaUlnWm1sc2JEMGlJekF3TURBd01DSXZQZzBKUEM5blBnMDhMM04yWno0PVwiKVxuICAgICAgICBuby1yZXBlYXQgYm90dG9tIHJpZ2h0O1xuICAgIGJhY2tncm91bmQtb3JpZ2luOiBjb250ZW50LWJveDtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGN1cnNvcjogc2UtcmVzaXplO1xuYDtcblxuZXhwb3J0IGludGVyZmFjZSBGbG9hdGluZ1BhbmVsUmVuZGVyUHJvcCB7XG4gICAgKHBhcmFtczogeyBoZWlnaHQ6IG51bWJlcjsgd2lkdGg6IG51bWJlciB9KTogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZsb2F0aW5nUGFuZWxQcm9wcyB7XG4gICAgc2hvcnRjdXQ6IHN0cmluZztcbiAgICBkcmFnSGFuZGxlOiBzdHJpbmc7XG4gICAgY2hpbGRyZW46IEZsb2F0aW5nUGFuZWxSZW5kZXJQcm9wO1xufVxuXG5leHBvcnQgY29uc3QgRmxvYXRpbmdQYW5lbCA9ICh7IGRyYWdIYW5kbGUsIHNob3J0Y3V0LCBjaGlsZHJlbiB9OiBGbG9hdGluZ1BhbmVsUHJvcHMpID0+IHtcbiAgICBjb25zdCBbaXNWaXNpYmxlLCBzZXRJc1Zpc2libGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuICAgIGNvbnN0IFtzaXplLCBzZXRTaXplXSA9IHVzZVN0YXRlKHsgd2lkdGg6IDcwMCwgaGVpZ2h0OiA2MDAgfSk7XG4gICAgY29uc3QgW3Bvc2l0aW9uLCBzZXRQb3NpdGlvbl0gPSB1c2VTdGF0ZSh7IHg6IDEwMCwgeTogMTAwIH0pO1xuICAgIGNvbnN0IHsgYWRkS2V5SGFuZGxlciwgcmVtb3ZlS2V5SGFuZGxlciB9ID0gdXNlS2V5SGFuZGxlcigpO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgYWRkS2V5SGFuZGxlcihzaG9ydGN1dCwgZSA9PiB7XG4gICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICBzZXRJc1Zpc2libGUoaXNWaXNpYmxlID0+ICFpc1Zpc2libGUpO1xuICAgICAgICB9KTtcblxuICAgICAgICByZXR1cm4gKCkgPT4gcmVtb3ZlS2V5SGFuZGxlcihzaG9ydGN1dCk7XG4gICAgfSwgW3NldElzVmlzaWJsZV0pO1xuXG4gICAgY29uc3Qgb25EcmFnU3RvcDogRHJhZ2dhYmxlRXZlbnRIYW5kbGVyID0gKF8sIGRhdGEpID0+IHtcbiAgICAgICAgc2V0UG9zaXRpb24oeyB4OiBkYXRhLngsIHk6IGRhdGEueSB9KTtcbiAgICB9O1xuXG4gICAgY29uc3Qgb25SZXNpemU6IFJlc2l6YWJsZVByb3BzW1wib25SZXNpemVcIl0gPSAoXywgeyBzaXplIH0pID0+IHtcbiAgICAgICAgc2V0U2l6ZSh7IHdpZHRoOiBzaXplLndpZHRoLCBoZWlnaHQ6IHNpemUuaGVpZ2h0IH0pO1xuICAgIH07XG5cbiAgICByZXR1cm4gY3JlYXRlUG9ydGFsKFxuICAgICAgICA8PlxuICAgICAgICAgICAgPFBhbmVsUm9vdD5cbiAgICAgICAgICAgICAgICA8RHJhZ2dhYmxlIGhhbmRsZT17ZHJhZ0hhbmRsZX0gb25TdG9wPXtvbkRyYWdTdG9wfSBwb3NpdGlvbj17cG9zaXRpb259PlxuICAgICAgICAgICAgICAgICAgICA8UmVzaXphYmxlXG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aD17c2l6ZS53aWR0aH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodD17c2l6ZS5oZWlnaHR9XG4gICAgICAgICAgICAgICAgICAgICAgICBvblJlc2l6ZT17b25SZXNpemV9XG4gICAgICAgICAgICAgICAgICAgICAgICBoYW5kbGU9ezxSZXNpemVIYW5kbGUgLz59XG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1wiYmctbmV1dHJhbC1iYXNlIHJlbGF0aXZlIGJvcmRlci1zbSBib3JkZXItYWNjZW50LWRlZmF1bHRcIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBpc1Zpc2libGUgPyBcImJsb2NrXCIgOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IHNpemUud2lkdGggKyBcInB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogc2l6ZS5oZWlnaHQgKyBcInB4XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtcImZsb2F0aW5nLXBhbmVsXCJ9PntjaGlsZHJlbihzaXplKX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L1Jlc2l6YWJsZT5cbiAgICAgICAgICAgICAgICA8L0RyYWdnYWJsZT5cbiAgICAgICAgICAgIDwvUGFuZWxSb290PlxuICAgICAgICA8Lz4sXG4gICAgICAgIGRvY3VtZW50LmJvZHlcbiAgICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const FloatingPanel = ({
+  dragHandle,
+  shortcut,
+  children
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [size, setSize] = useState({
+    width: 700,
+    height: 600
+  });
+  const [position, setPosition] = useState({
+    x: 100,
+    y: 100
+  });
+  const {
+    addKeyHandler,
+    removeKeyHandler
+  } = useKeyHandler();
+  useEffect(() => {
+    addKeyHandler(shortcut, e => {
+      e.preventDefault();
+      setIsVisible(isVisible => !isVisible);
+    });
+    return () => removeKeyHandler(shortcut);
+  }, [setIsVisible]);
+  const onDragStop = (_, data) => {
+    setPosition({
+      x: data.x,
+      y: data.y
+    });
+  };
+  const onResize = (_, {
+    size
+  }) => {
+    setSize({
+      width: size.width,
+      height: size.height
+    });
+  };
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PanelRoot, null, /*#__PURE__*/React.createElement(Draggable, {
+    handle: dragHandle,
+    onStop: onDragStop,
+    position: position
+  }, /*#__PURE__*/React.createElement(Resizable, {
+    width: size.width,
+    height: size.height,
+    onResize: onResize,
+    handle: /*#__PURE__*/React.createElement(ResizeHandle, null)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-base relative border-sm border-accent-default",
+    style: {
+      display: isVisible ? "block" : "none",
+      width: size.width + "px",
+      height: size.height + "px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "floating-panel"
+  }, children(size))))))), document.body);
+};
+
+//# sourceMappingURL=FloatingPanel.js.map

package/components/FloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","createPortal","Draggable","Resizable","useKeyHandler","PanelRoot","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ResizeHandle","FloatingPanel","dragHandle","shortcut","children","isVisible","setIsVisible","size","setSize","width","height","position","setPosition","x","y","addKeyHandler","removeKeyHandler","e","preventDefault","onDragStop","_","data","onResize","createElement","Fragment","handle","onStop","className","style","display","document","body"],"sources":["FloatingPanel.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Draggable, { type DraggableEventHandler } from \"react-draggable\";\nimport type { ResizableProps } from \"react-resizable\";\nimport { Resizable } from \"react-resizable\";\nimport styled from \"@emotion/styled\";\nimport { useKeyHandler } from \"~/hooks/index.js\";\n\nconst PanelRoot = styled.div`\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 100000;\n    width: 0;\n    height: 0;\n`;\n\nconst ResizeHandle = styled.div`\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    bottom: 0;\n    right: 0;\n    padding: 0 3px 3px 0;\n    background: url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=\")\n        no-repeat bottom right;\n    background-origin: content-box;\n    box-sizing: border-box;\n    cursor: se-resize;\n`;\n\nexport interface FloatingPanelRenderProp {\n    (params: { height: number; width: number }): React.ReactNode;\n}\n\nexport interface FloatingPanelProps {\n    shortcut: string;\n    dragHandle: string;\n    children: FloatingPanelRenderProp;\n}\n\nexport const FloatingPanel = ({ dragHandle, shortcut, children }: FloatingPanelProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    const [size, setSize] = useState({ width: 700, height: 600 });\n    const [position, setPosition] = useState({ x: 100, y: 100 });\n    const { addKeyHandler, removeKeyHandler } = useKeyHandler();\n\n    useEffect(() => {\n        addKeyHandler(shortcut, e => {\n            e.preventDefault();\n            setIsVisible(isVisible => !isVisible);\n        });\n\n        return () => removeKeyHandler(shortcut);\n    }, [setIsVisible]);\n\n    const onDragStop: DraggableEventHandler = (_, data) => {\n        setPosition({ x: data.x, y: data.y });\n    };\n\n    const onResize: ResizableProps[\"onResize\"] = (_, { size }) => {\n        setSize({ width: size.width, height: size.height });\n    };\n\n    return createPortal(\n        <>\n            <PanelRoot>\n                <Draggable handle={dragHandle} onStop={onDragStop} position={position}>\n                    <Resizable\n                        width={size.width}\n                        height={size.height}\n                        onResize={onResize}\n                        handle={<ResizeHandle />}\n                    >\n                        <div\n                            className={\"bg-neutral-base relative border-sm border-accent-default\"}\n                            style={{\n                                display: isVisible ? \"block\" : \"none\",\n                                width: size.width + \"px\",\n                                height: size.height + \"px\"\n                            }}\n                        >\n                            <div className={\"floating-panel\"}>{children(size)}</div>\n                        </div>\n                    </Resizable>\n                </Draggable>\n            </PanelRoot>\n        </>,\n        document.body\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,YAAY,QAAQ,WAAW;AACxC,OAAOC,SAAS,MAAsC,iBAAiB;AAEvE,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,SAASC,aAAa;AAEtB,MAAMC,SAAS,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAOd;AAED,MAAMC,YAAY,gBAAAV,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAYjB;AAYD,OAAO,MAAME,aAAa,GAAGA,CAAC;EAAEC,UAAU;EAAEC,QAAQ;EAAEC;AAA6B,CAAC,KAAK;EACrF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAACuB,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAAC;IAAEyB,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAI,CAAC,CAAC;EAC7D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,QAAQ,CAAC;IAAE6B,CAAC,EAAE,GAAG;IAAEC,CAAC,EAAE;EAAI,CAAC,CAAC;EAC5D,MAAM;IAAEC,aAAa;IAAEC;EAAiB,CAAC,GAAG5B,aAAa,CAAC,CAAC;EAE3DL,SAAS,CAAC,MAAM;IACZgC,aAAa,CAACZ,QAAQ,EAAEc,CAAC,IAAI;MACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBZ,YAAY,CAACD,SAAS,IAAI,CAACA,SAAS,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,MAAMW,gBAAgB,CAACb,QAAQ,CAAC;EAC3C,CAAC,EAAE,CAACG,YAAY,CAAC,CAAC;EAElB,MAAMa,UAAiC,GAAGA,CAACC,CAAC,EAAEC,IAAI,KAAK;IACnDT,WAAW,CAAC;MAAEC,CAAC,EAAEQ,IAAI,CAACR,CAAC;MAAEC,CAAC,EAAEO,IAAI,CAACP;IAAE,CAAC,CAAC;EACzC,CAAC;EAED,MAAMQ,QAAoC,GAAGA,CAACF,CAAC,EAAE;IAAEb;EAAK,CAAC,KAAK;IAC1DC,OAAO,CAAC;MAAEC,KAAK,EAAEF,IAAI,CAACE,KAAK;MAAEC,MAAM,EAAEH,IAAI,CAACG;IAAO,CAAC,CAAC;EACvD,CAAC;EAED,oBAAOzB,YAAY,cACfH,KAAA,CAAAyC,aAAA,CAAAzC,KAAA,CAAA0C,QAAA,qBACI1C,KAAA,CAAAyC,aAAA,CAAClC,SAAS,qBACNP,KAAA,CAAAyC,aAAA,CAACrC,SAAS;IAACuC,MAAM,EAAEvB,UAAW;IAACwB,MAAM,EAAEP,UAAW;IAACR,QAAQ,EAAEA;EAAS,gBAClE7B,KAAA,CAAAyC,aAAA,CAACpC,SAAS;IACNsB,KAAK,EAAEF,IAAI,CAACE,KAAM;IAClBC,MAAM,EAAEH,IAAI,CAACG,MAAO;IACpBY,QAAQ,EAAEA,QAAS;IACnBG,MAAM,eAAE3C,KAAA,CAAAyC,aAAA,CAACvB,YAAY,MAAE;EAAE,gBAEzBlB,KAAA,CAAAyC,aAAA;IACII,SAAS,EAAE,0DAA2D;IACtEC,KAAK,EAAE;MACHC,OAAO,EAAExB,SAAS,GAAG,OAAO,GAAG,MAAM;MACrCI,KAAK,EAAEF,IAAI,CAACE,KAAK,GAAG,IAAI;MACxBC,MAAM,EAAEH,IAAI,CAACG,MAAM,GAAG;IAC1B;EAAE,gBAEF5B,KAAA,CAAAyC,aAAA;IAAKI,SAAS,EAAE;EAAiB,GAAEvB,QAAQ,CAACG,IAAI,CAAO,CACtD,CACE,CACJ,CACJ,CACb,CAAC,EACHuB,QAAQ,CAACC,IACb,CAAC;AACL,CAAC","ignoreList":[]}

package/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { IconPickerProps } from "./IconPickerComponent.js";
+import type { Icon } from "./types.js";
+declare const IconPicker: {
+    (props: IconPickerProps): React.JSX.Element;
+    Icon: ({ icon, ...props }: IconRendererWithProviderProps) => React.JSX.Element | null;
+    IconPickerTab: ({ label, value, actions, onChange, cellDecorator }: import("./IconPickerTab.js").IconPickerTabProps) => React.JSX.Element;
+};
+interface IconRendererWithProviderProps {
+    icon?: Icon;
+    size?: number;
+}
+export { IconPicker };

package/components/IconPicker/IconPicker.js

@@ -0,0 +1,39 @@
+import React, { useMemo, useEffect } from "react";
+import { useIconPickerConfig } from "./config/index.js";
+import { iconRepositoryFactory } from "./IconRepositoryFactory.js";
+import { IconPickerPresenter } from "./IconPickerPresenter.js";
+import { IconPickerComponent } from "./IconPickerComponent.js";
+import { IconProvider, IconRenderer } from "./IconRenderer.js";
+import { IconPickerTab } from "./IconPickerTab.js";
+const IconPicker = props => {
+  const {
+    iconTypes,
+    iconPackProviders
+  } = useIconPickerConfig();
+  const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);
+  const presenter = useMemo(() => {
+    return new IconPickerPresenter(repository, props.size);
+  }, [repository, props.size]);
+  useEffect(() => {
+    presenter.load(props.value);
+  }, [repository, props.value]);
+  return /*#__PURE__*/React.createElement(IconPickerComponent, Object.assign({
+    presenter: presenter
+  }, props));
+};
+const IconRendererWithProvider = ({
+  icon,
+  ...props
+}) => {
+  if (!icon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(IconProvider, Object.assign({
+    icon: icon
+  }, props), /*#__PURE__*/React.createElement(IconRenderer, null));
+};
+IconPicker.Icon = IconRendererWithProvider;
+IconPicker.IconPickerTab = IconPickerTab;
+export { IconPicker };
+
+//# sourceMappingURL=IconPicker.js.map

package/components/IconPicker/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useEffect","useIconPickerConfig","iconRepositoryFactory","IconPickerPresenter","IconPickerComponent","IconProvider","IconRenderer","IconPickerTab","IconPicker","props","iconTypes","iconPackProviders","repository","getRepository","presenter","size","load","value","createElement","Object","assign","IconRendererWithProvider","icon","Icon"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo, useEffect } from \"react\";\nimport { useIconPickerConfig } from \"./config/index.js\";\nimport { iconRepositoryFactory } from \"./IconRepositoryFactory.js\";\nimport { IconPickerPresenter } from \"./IconPickerPresenter.js\";\nimport type { IconPickerProps } from \"./IconPickerComponent.js\";\nimport { IconPickerComponent } from \"./IconPickerComponent.js\";\nimport { IconProvider, IconRenderer } from \"./IconRenderer.js\";\nimport { IconPickerTab } from \"./IconPickerTab.js\";\nimport type { Icon } from \"./types.js\";\n\nconst IconPicker = (props: IconPickerProps) => {\n    const { iconTypes, iconPackProviders } = useIconPickerConfig();\n    const repository = iconRepositoryFactory.getRepository(iconTypes, iconPackProviders);\n\n    const presenter = useMemo(() => {\n        return new IconPickerPresenter(repository, props.size);\n    }, [repository, props.size]);\n\n    useEffect(() => {\n        presenter.load(props.value);\n    }, [repository, props.value]);\n\n    return <IconPickerComponent presenter={presenter} {...props} />;\n};\n\ninterface IconRendererWithProviderProps {\n    icon?: Icon;\n    size?: number;\n}\n\nconst IconRendererWithProvider = ({ icon, ...props }: IconRendererWithProviderProps) => {\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <IconProvider icon={icon} {...props}>\n            <IconRenderer />\n        </IconProvider>\n    );\n};\n\nIconPicker.Icon = IconRendererWithProvider;\nIconPicker.IconPickerTab = IconPickerTab;\n\nexport { IconPicker };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,SAAS,QAAQ,OAAO;AACjD,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,SAASC,mBAAmB;AAE5B,SAASC,mBAAmB;AAC5B,SAASC,YAAY,EAAEC,YAAY;AACnC,SAASC,aAAa;AAGtB,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EAC3C,MAAM;IAAEC,SAAS;IAAEC;EAAkB,CAAC,GAAGV,mBAAmB,CAAC,CAAC;EAC9D,MAAMW,UAAU,GAAGV,qBAAqB,CAACW,aAAa,CAACH,SAAS,EAAEC,iBAAiB,CAAC;EAEpF,MAAMG,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAII,mBAAmB,CAACS,UAAU,EAAEH,KAAK,CAACM,IAAI,CAAC;EAC1D,CAAC,EAAE,CAACH,UAAU,EAAEH,KAAK,CAACM,IAAI,CAAC,CAAC;EAE5Bf,SAAS,CAAC,MAAM;IACZc,SAAS,CAACE,IAAI,CAACP,KAAK,CAACQ,KAAK,CAAC;EAC/B,CAAC,EAAE,CAACL,UAAU,EAAEH,KAAK,CAACQ,KAAK,CAAC,CAAC;EAE7B,oBAAOnB,KAAA,CAAAoB,aAAA,CAACd,mBAAmB,EAAAe,MAAA,CAAAC,MAAA;IAACN,SAAS,EAAEA;EAAU,GAAKL,KAAK,CAAG,CAAC;AACnE,CAAC;AAOD,MAAMY,wBAAwB,GAAGA,CAAC;EAAEC,IAAI;EAAE,GAAGb;AAAqC,CAAC,KAAK;EACpF,IAAI,CAACa,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAoB,aAAA,CAACb,YAAY,EAAAc,MAAA,CAAAC,MAAA;IAACE,IAAI,EAAEA;EAAK,GAAKb,KAAK,gBAC/BX,KAAA,CAAAoB,aAAA,CAACZ,YAAY,MAAE,CACL,CAAC;AAEvB,CAAC;AAEDE,UAAU,CAACe,IAAI,GAAGF,wBAAwB;AAC1Cb,UAAU,CAACD,aAAa,GAAGA,aAAa;AAExC,SAASC,UAAU","ignoreList":[]}

package/components/IconPicker/IconPickerComponent.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { FormComponentProps } from "@webiny/admin-ui";
+import type { IconPickerPresenter } from "./IconPickerPresenter.js";
+import type { Icon } from "./types.js";
+import { ICON_PICKER_SIZE } from "./types.js";
+export interface IconPickerProps extends FormComponentProps {
+    size?: ICON_PICKER_SIZE;
+    removable?: boolean;
+    value?: Icon;
+    onChange?: (value: Icon | undefined) => void;
+}
+export interface IconPickerComponentProps extends IconPickerProps {
+    presenter: IconPickerPresenter;
+}
+export declare const IconPickerComponent: (({ presenter, label, description, removable, required, disabled, ...props }: IconPickerComponentProps) => React.JSX.Element) & {
+    displayName: string;
+};