@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

package/components/SimpleUI/InputField.js

@@ -1,19 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Typography = require("@webiny/ui/Typography");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _excluded = ["className", "value", "onChange", "onKeyDown", "label", "description", "validation", "defaultValue"];
-var inputStyle = (0, _emotion.css)({
+import React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+import omit from "lodash/omit";
+import { Typography } from "@webiny/ui/Typography";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+const inputStyle = css({
   boxSizing: "border-box",
   border: "1px solid var(--mdc-theme-on-background)",
   width: "100%",
@@ -46,58 +37,59 @@ var inputStyle = (0, _emotion.css)({
     margin: 0
   }
 });
-var labelStyle = (0, _emotion.css)({
+const labelStyle = css({
   marginBottom: 8,
   padding: "0px 8px",
   "& span": {
     color: "var(--mdc-theme-text-primary-on-background)"
   }
 });
-var getValue = function getValue(params) {
-  var value = params.value,
-    defaultValue = params.defaultValue,
-    type = params.type;
+const getValue = params => {
+  const {
+    value,
+    defaultValue,
+    type
+  } = params;
   if (type === "number") {
     return isNaN(value) ? defaultValue : value;
   }
   return value || defaultValue;
 };
-var InputField = function InputField(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    _onChange = _ref.onChange,
-    onKeyDown = _ref.onKeyDown,
-    label = _ref.label,
-    description = _ref.description,
-    _ref$validation = _ref.validation,
-    validation = _ref$validation === void 0 ? {
-      isValid: true
-    } : _ref$validation,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
+const InputField = ({
+  className,
+  value,
+  onChange,
+  onKeyDown,
+  label,
+  description,
+  validation = {
+    isValid: true
+  },
+  defaultValue = "",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: labelStyle
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     use: "body2"
-  }, label)), /*#__PURE__*/_react.default.createElement("input", Object.assign({
-    className: (0, _classnames.default)(inputStyle, className),
+  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
+    className: classNames(inputStyle, className),
     value: getValue({
-      value: value,
+      value,
       type: props.type || "string",
-      defaultValue: defaultValue
+      defaultValue
     }),
     onKeyDown: onKeyDown,
-    onChange: function onChange(ev) {
-      if (!_onChange) {
+    onChange: ev => {
+      if (!onChange) {
         return;
       }
-      _onChange((ev.target.value || "").toLowerCase());
+      onChange((ev.target.value || "").toLowerCase());
     }
-  }, (0, _omit.default)(props, "validate"))), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
-var _default = exports.default = /*#__PURE__*/_react.default.memo(InputField);
+export default /*#__PURE__*/React.memo(InputField);
 
 //# sourceMappingURL=InputField.js.map

package/components/SimpleUI/InputField.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_classnames","_omit","_Typography","_FormElementMessage","_excluded","inputStyle","css","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","_ref","className","onChange","onKeyDown","label","description","_ref$validation","validation","isValid","_ref$defaultValue","props","_objectWithoutProperties2","default","createElement","Fragment","Typography","use","Object","assign","classNames","ev","target","toLowerCase","omit","FormElementMessage","error","message","_default","exports","React","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\nexport type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> &\n    React.KeyboardEvent<HTMLInputElement>;\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: OnKeyDownProps) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}: InputBoxProps) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","css","classNames","omit","Typography","FormElementMessage","inputStyle","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","createElement","Fragment","use","Object","assign","ev","target","toLowerCase","error","message","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\nexport type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> &\n    React.KeyboardEvent<HTMLInputElement>;\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: OnKeyDownProps) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}: InputBoxProps) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":"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","ignoreList":[]}

package/components/SingleImageUpload.d.ts

@@ -1,6 +1,7 @@
-import * as React from "react";
+import React from "react";
 import { FileManagerFileItem } from "../index";
 import { FormComponentProps } from "@webiny/ui/types";
+import { type FilePickerProps } from "@webiny/admin-ui";
 export interface SingleImageUploadProps extends FormComponentProps {
     /**
      * Accept types
@@ -43,6 +44,7 @@ export interface SingleImageUploadProps extends FormComponentProps {
     includeFileMeta?: boolean;
     /**
      * Is the wrapper round?
+     * @deprecated Provide a custom `renderImagePreview` instead.
      */
     round?: boolean;
     /**
@@ -50,6 +52,22 @@ export interface SingleImageUploadProps extends FormComponentProps {
      * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
      */
     onChangePick?: string[];
+    /**
+     * Render the image preview.
+     */
+    renderFilePreview?: FilePickerProps["renderFilePreview"];
+    /**
+     * Render the trigger button.
+     */
+    renderTrigger?: FilePickerProps["renderTrigger"];
+    /**
+     * Component type.
+     */
+    type?: FilePickerProps["type"];
+    /**
+     * Component variant.
+     */
+    variant?: FilePickerProps["variant"];
 }
 declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;
 export default SingleImageUpload;

package/components/SingleImageUpload.js

@@ -1,50 +1,23 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _Image = require("@webiny/app/components/Image");
-var Ui = _interopRequireWildcard(require("@webiny/ui/ImageUpload"));
-var _ = require("./..");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-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 ImageUploadWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ek1tjbh0"
-} : {
-  target: "ek1tjbh0",
-  label: "ImageUploadWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}"
-} : {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpbmdsZUltYWdlVXBsb2FkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMkIiLCJmaWxlIjoiU2luZ2xlSW1hZ2VVcGxvYWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBJbWFnZSB9IGZyb20gXCJAd2ViaW55L2FwcC9jb21wb25lbnRzL0ltYWdlXCI7XG5pbXBvcnQgKiBhcyBVaSBmcm9tIFwiQHdlYmlueS91aS9JbWFnZVVwbG9hZFwiO1xuaW1wb3J0IHsgRmlsZU1hbmFnZXIsIEZpbGVNYW5hZ2VyRmlsZUl0ZW0gfSBmcm9tIFwifi9pbmRleFwiO1xuaW1wb3J0IHsgRm9ybUNvbXBvbmVudFByb3BzIH0gZnJvbSBcIkB3ZWJpbnkvdWkvdHlwZXNcIjtcbmltcG9ydCB7IEZvcm1FbGVtZW50TWVzc2FnZSB9IGZyb20gXCJAd2ViaW55L3VpL0Zvcm1FbGVtZW50TWVzc2FnZVwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB1c2VDYWxsYmFjayB9IGZyb20gXCJyZWFjdFwiO1xuXG5jb25zdCBJbWFnZVVwbG9hZFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCIuZGlzYWJsZWRcIjoge1xuICAgICAgICBvcGFjaXR5OiAwLjc1LFxuICAgICAgICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIlxuICAgIH0sXG4gICAgXCIubWRjLWZsb2F0aW5nLWxhYmVsLS1mbG9hdC1hYm92ZVwiOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjc1KVwiLFxuICAgICAgICB0b3A6IDEwLFxuICAgICAgICBsZWZ0OiAxMCxcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiLm1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0XCI6IHtcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtc2Vjb25kYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9XG59KTtcblxuZXhwb3J0IGludGVyZmFjZSBTaW5nbGVJbWFnZVVwbG9hZFByb3BzIGV4dGVuZHMgRm9ybUNvbXBvbmVudFByb3BzIHtcbiAgICAvKipcbiAgICAgKiBBY2NlcHQgdHlwZXNcbiAgICAgKi9cbiAgICBhY2NlcHQ/OiBzdHJpbmdbXTtcblxuICAgIC8qKlxuICAgICAqIENvbXBvbmVudCBsYWJlbC5cbiAgICAgKi9cbiAgICBsYWJlbD86IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIElzIGNvbXBvbmVudCBkaXNhYmxlZD9cbiAgICAgKi9cbiAgICBkaXNhYmxlZD86IGJvb2xlYW47XG5cbiAgICAvKipcbiAgICAgKiBEZXNjcmlwdGlvbiBiZW5lYXRoIHRoZSBpbWFnZS5cbiAgICAgKi9cbiAgICBkZXNjcmlwdGlvbj86IFJlYWN0LlJlYWN0Tm9kZTtcblxuICAgIC8qKlxuICAgICAqIEEgY2xhc3NOYW1lIGZvciB0aGUgcm9vdCBlbGVtZW50LlxuICAgICAqL1xuICAgIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIERlZmluZSBmaWxlJ3MgbWF4IGFsbG93ZWQgc2l6ZSAoZGVmYXVsdCBpcyBcIjEwbWJcIikuXG4gICAgICogVXNlcyBcImJ5dGVzXCIgKGh0dHBzOi8vd3d3Lm5wbWpzLmNvbS9wYWNrYWdlL2J5dGVzKSBsaWJyYXJ5IHRvIGNvbnZlcnQgc3RyaW5nIG5vdGF0aW9uIHRvIGFjdHVhbCBudW1iZXIuXG4gICAgICovXG4gICAgbWF4U2l6ZT86IG51bWJlciB8IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIG9uQ2hhbmdlIGNhbGxiYWNrIHdoZW4gYSBmaWxlIGlzIHNldCBvciB1bnNldC5cbiAgICAgKiBJdCBpcyBtYXJrZWQgYXMgYG9wdGlvbmFsYCBiZWNhdXNlIHRoaXMgY29tcG9uZW50IGlzIG9mdGVuIHVzZWQgaW4gY29uanVuY3Rpb24gd2l0aCA8QmluZD4sIHdoaWNoIGluamVjdHMgdGhlXG4gICAgICogYG9uQ2hhbmdlYCBpbnRvIGl0cyBjaGlsZCBlbGVtZW50LiBJbiB0aGF0IGNhc2UsIHRoYXQgcHJvcCBpcyBub3QgcGFzc2VkIGJ5IHRoZSBkZXZlbG9wZXIuXG4gICAgICovXG4gICAgb25DaGFuZ2U/OiAodmFsdWU6IEZpbGVNYW5hZ2VyRmlsZUl0ZW0gfCBudWxsKSA9PiB2b2lkO1xuXG4gICAgLyoqXG4gICAgICogT3B0aW9uYWwgY3VzdG9tIHByb3BzLCBwYXNzZWQgdG8gdGhlIHByZXZpZXcgaW1hZ2UuXG4gICAgICovXG4gICAgaW1hZ2VQcmV2aWV3UHJvcHM/OiBhbnk7XG5cbiAgICAvKipcbiAgICAgKiBCeSBkZWZhdWx0LCBmaWxlIG1ldGEgaXMgbm90IGluY2x1ZGVkIGluIHRoZSBkYXRhIHBhc3NlZCB0byBgb25DaGFuZ2VgLiBJZiB5b3UgbmVlZCBpdCwgc2V0IHRoaXMgZmxhZyB0byB0cnVlLlxuICAgICAqL1xuICAgIGluY2x1ZGVGaWxlTWV0YT86IGJvb2xlYW47XG5cbiAgICAvKipcbiAgICAgKiBJcyB0aGUgd3JhcHBlciByb3VuZD9cbiAgICAgKi9cbiAgICByb3VuZD86IGJvb2xlYW47XG5cbiAgICAvKipcbiAgICAgKiBEZWZpbmUgdGhlIHByb3BlcnRpZXMgdGhhdCBhcmUgcmV0dXJuZWQgb24gZmlsZShzKSBzZWxlY3Rpb24uXG4gICAgICogQGRlcHJlY2F0ZWQgUGljayB0aGUgZGVzaXJlZCBmaWxlIGF0dHJpYnV0ZXMgaW4gdGhlIGBvbkNoYW5nZWAgY2FsbGJhY2ssIG9yIGBiZWZvcmVDaGFuZ2VgIG9uIHRoZSBgPEJpbmQ+YCBlbGVtZW50LlxuICAgICAqL1xuICAgIG9uQ2hhbmdlUGljaz86IHN0cmluZ1tdO1xufVxuXG5jb25zdCBTaW5nbGVJbWFnZVVwbG9hZCA9IChwcm9wczogU2luZ2xlSW1hZ2VVcGxvYWRQcm9wcykgPT4ge1xuICAgIGNvbnN0IHtcbiAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICB2YWx1ZSxcbiAgICAgICAgdmFsaWRhdGlvbixcbiAgICAgICAgbGFiZWwsXG4gICAgICAgIGRlc2NyaXB0aW9uLFxuICAgICAgICBhY2NlcHQsXG4gICAgICAgIGluY2x1ZGVGaWxlTWV0YSA9IGZhbHNlLFxuICAgICAgICBtYXhTaXplLFxuICAgICAgICBpbWFnZVByZXZpZXdQcm9wcyxcbiAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgIHJvdW5kXG4gICAgfSA9IHByb3BzO1xuXG4gICAgY29uc3QgeyBpc1ZhbGlkOiB2YWxpZGF0aW9uSXNWYWxpZCwgbWVzc2FnZTogdmFsaWRhdGlvbk1lc3NhZ2UgfSA9IHZhbGlkYXRpb24gfHwge307XG5cbiAgICBjb25zdCBvbkNoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAodmFsdWU6IEZpbGVNYW5hZ2VyRmlsZUl0ZW0gfCBudWxsKSA9PiB7XG4gICAgICAgICAgICBpZiAoIXByb3BzLm9uQ2hhbmdlKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAodmFsdWUgJiYgIWluY2x1ZGVGaWxlTWV0YSkge1xuICAgICAgICAgICAgICAgIHByb3BzLm9uQ2hhbmdlKHsgaWQ6IHZhbHVlLmlkLCBzcmM6IHZhbHVlLnNyYyB9KTtcbiAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGlmICh2YWx1ZSAmJiBpbmNsdWRlRmlsZU1ldGEpIHtcbiAgICAgICAgICAgICAgICBwcm9wcy5vbkNoYW5nZSh2YWx1ZSk7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBwcm9wcy5vbkNoYW5nZShudWxsKTtcbiAgICAgICAgfSxcbiAgICAgICAgW3Byb3BzLm9uQ2hhbmdlXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8SW1hZ2VVcGxvYWRXcmFwcGVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgICAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJtZGMtZmxvYXRpbmctbGFiZWwgbWRjLWZsb2F0aW5nLWxhYmVsLS1mbG9hdC1hYm92ZVwiPntsYWJlbH08L2Rpdj5cbiAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgIDxGaWxlTWFuYWdlclxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICAgICAgICBhY2NlcHQ9e2FjY2VwdH1cbiAgICAgICAgICAgICAgICBpbWFnZXM9eyFhY2NlcHR9XG4gICAgICAgICAgICAgICAgbWF4U2l6ZT17bWF4U2l6ZX1cbiAgICAgICAgICAgICAgICByZW5kZXI9eyh7IHNob3dGaWxlTWFuYWdlciB9KSA9PiAoXG4gICAgICAgICAgICAgICAgICAgIDxVaS5JbWFnZVxuICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVySW1hZ2VQcmV2aWV3PXtyZW5kZXJJbWFnZVByb3BzID0+IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SW1hZ2Ugey4uLnJlbmRlckltYWdlUHJvcHN9IHsuLi5pbWFnZVByZXZpZXdQcm9wc30gLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17eyB3aWR0aDogXCIxMDAlXCIsIGhlaWdodDogXCJhdXRvXCIgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHVwbG9hZEltYWdlPXtzaG93RmlsZU1hbmFnZXJ9XG4gICAgICAgICAgICAgICAgICAgICAgICByZW1vdmVJbWFnZT17KCkgPT4gb25DaGFuZ2UobnVsbCl9XG4gICAgICAgICAgICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgICAgICAgICAgICByb3VuZD17cm91bmR9XG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIC8+XG5cbiAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2UgZXJyb3I+e3ZhbGlkYXRpb25NZXNzYWdlfTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCAhPT0gZmFsc2UgJiYgZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2U+e2Rlc2NyaXB0aW9ufTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9JbWFnZVVwbG9hZFdyYXBwZXI+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNpbmdsZUltYWdlVXBsb2FkO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var SingleImageUpload = function SingleImageUpload(props) {
-  var className = props.className,
-    value = props.value,
-    validation = props.validation,
-    label = props.label,
-    description = props.description,
-    accept = props.accept,
-    _props$includeFileMet = props.includeFileMeta,
-    includeFileMeta = _props$includeFileMet === void 0 ? false : _props$includeFileMet,
-    maxSize = props.maxSize,
-    imagePreviewProps = props.imagePreviewProps,
-    disabled = props.disabled,
-    round = props.round;
-  var _ref = validation || {},
-    validationIsValid = _ref.isValid,
-    validationMessage = _ref.message;
-  var onChange = (0, _react.useCallback)(function (value) {
+import React, { useCallback } from "react";
+import { FileManager } from "./..";
+import { FileItem, FilePicker } from "@webiny/admin-ui";
+const SingleImageUpload = props => {
+  const {
+    accept,
+    className,
+    description,
+    disabled,
+    includeFileMeta = false,
+    label,
+    maxSize,
+    renderFilePreview,
+    renderTrigger,
+    validation,
+    value,
+    variant,
+    type
+  } = props;
+  const onChange = useCallback(value => {
     if (!props.onChange) {
       return;
     }
@@ -61,38 +34,29 @@ var SingleImageUpload = function SingleImageUpload(props) {
     }
     props.onChange(null);
   }, [props.onChange]);
-  return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-    className: className
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: "mdc-floating-label mdc-floating-label--float-above"
-  }, label), /*#__PURE__*/React.createElement(_.FileManager, {
+  return /*#__PURE__*/React.createElement(FileManager, {
     onChange: onChange,
     accept: accept,
     images: !accept,
     maxSize: maxSize,
-    render: function render(_ref2) {
-      var showFileManager = _ref2.showFileManager;
-      return /*#__PURE__*/React.createElement(Ui.Image, {
-        renderImagePreview: function renderImagePreview(renderImageProps) {
-          return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
-        },
-        style: {
-          width: "100%",
-          height: "auto"
-        },
-        value: value,
-        uploadImage: showFileManager,
-        removeImage: function removeImage() {
-          return onChange(null);
-        },
-        disabled: disabled,
-        round: round
-      });
-    }
-  }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilePicker, {
+      label: label,
+      description: description,
+      validation: validation,
+      className: className,
+      disabled: disabled,
+      value: value ? FileItem.createFromUrl(value.src) : null,
+      onSelectItem: showFileManager,
+      onRemoveItem: () => onChange(null),
+      renderFilePreview: renderFilePreview,
+      renderTrigger: renderTrigger,
+      variant: variant,
+      type: type
+    }))
+  });
 };
-var _default = exports.default = SingleImageUpload;
+export default SingleImageUpload;
 
 //# sourceMappingURL=SingleImageUpload.js.map

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","_Image","Ui","_","_FormElementMessage","_EMOTION_STRINGIFIED_CSS_ERROR__","ImageUploadWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","SingleImageUpload","props","className","value","validation","description","accept","_props$includeFileMet","includeFileMeta","maxSize","imagePreviewProps","disabled","round","_ref","validationIsValid","isValid","validationMessage","message","onChange","useCallback","id","src","createElement","FileManager","images","render","_ref2","showFileManager","Image","renderImagePreview","renderImageProps","Object","assign","style","width","height","uploadImage","removeImage","FormElementMessage","error","_default","exports"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/Image\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { FileManager, FileManagerFileItem } from \"~/index\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport { useCallback } from \"react\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\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     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        className,\n        value,\n        validation,\n        label,\n        description,\n        accept,\n        includeFileMeta = false,\n        maxSize,\n        imagePreviewProps,\n        disabled,\n        round\n    } = props;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <ImageUploadWrapper className={className}>\n            {label && (\n                <div className=\"mdc-floating-label mdc-floating-label--float-above\">{label}</div>\n            )}\n\n            <FileManager\n                onChange={onChange}\n                accept={accept}\n                images={!accept}\n                maxSize={maxSize}\n                render={({ showFileManager }) => (\n                    <Ui.Image\n                        renderImagePreview={renderImageProps => (\n                            <Image {...renderImageProps} {...imagePreviewProps} />\n                        )}\n                        style={{ width: \"100%\", height: \"auto\" }}\n                        value={value}\n                        uploadImage={showFileManager}\n                        removeImage={() => onChange(null)}\n                        disabled={disabled}\n                        round={round}\n                    />\n                )}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </ImageUploadWrapper>\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","FileManager","FileItem","FilePicker","SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","id","src","createElement","images","render","showFileManager","Fragment","createFromUrl","onSelectItem","onRemoveItem"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { FileManager, FileManagerFileItem } from \"~/index\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\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     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW;AAEpB,SAASC,QAAQ,EAAEC,UAAU,QAA8B,kBAAkB;AAoF7E,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EACzD,MAAM;IACFC,MAAM;IACNC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,KAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,aAAa;IACbC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC;EACJ,CAAC,GAAGb,KAAK;EAET,MAAMc,QAAQ,GAAGnB,WAAW,CACvBgB,KAAiC,IAAK;IACnC,IAAI,CAACX,KAAK,CAACc,QAAQ,EAAE;MACjB;IACJ;IAEA,IAAIH,KAAK,IAAI,CAACN,eAAe,EAAE;MAC3BL,KAAK,CAACc,QAAQ,CAAC;QAAEC,EAAE,EAAEJ,KAAK,CAACI,EAAE;QAAEC,GAAG,EAAEL,KAAK,CAACK;MAAI,CAAC,CAAC;MAChD;IACJ;IAEA,IAAIL,KAAK,IAAIN,eAAe,EAAE;MAC1BL,KAAK,CAACc,QAAQ,CAACH,KAAK,CAAC;MACrB;IACJ;IAEAX,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACxB,CAAC,EACD,CAACd,KAAK,CAACc,QAAQ,CACnB,CAAC;EAED,oBACIpB,KAAA,CAAAuB,aAAA,CAACrB,WAAW;IACRkB,QAAQ,EAAEA,QAAS;IACnBb,MAAM,EAAEA,MAAO;IACfiB,MAAM,EAAE,CAACjB,MAAO;IAChBM,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB1B,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAuB,aAAA,CAACnB,UAAU;MACPQ,KAAK,EAAEA,KAAM;MACbH,WAAW,EAAEA,WAAY;MACzBO,UAAU,EAAEA,UAAW;MACvBR,SAAS,EAAEA,SAAU;MACrBE,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAEA,KAAK,GAAGd,QAAQ,CAACyB,aAAa,CAACX,KAAK,CAACK,GAAG,CAAC,GAAG,IAAK;MACxDO,YAAY,EAAEH,eAAgB;MAC9BI,YAAY,EAAEA,CAAA,KAAMV,QAAQ,CAAC,IAAI,CAAE;MACnCN,iBAAiB,EAAEA,iBAAkB;MACrCC,aAAa,EAAEA,aAAc;MAC7BG,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA;IAAK,CACd,CACH;EACJ,CACL,CAAC;AAEV,CAAC;AAED,eAAed,iBAAiB","ignoreList":[]}

package/components/SplitView/SplitView.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { CellProps } from "@webiny/ui/Grid";
+import { ColumnProps } from "@webiny/admin-ui";
 import { PanelProps, PanelGroupProps } from "../ResizablePanels";
-export declare const leftPanel: string;
 interface SplitViewProps extends Omit<PanelGroupProps, "direction" | "id" | "autoSaveId"> {
     layoutId?: string | null;
 }
 declare const SplitView: ({ children, className, layoutId, ...props }: SplitViewProps) => React.JSX.Element;
-interface SplitViewPanelProps extends Omit<CellProps, "style">, Omit<PanelProps, "id"> {
+interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
+    span?: ColumnProps["span"];
 }
 declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-declare const RightPanel: ({ children, ...props }: SplitViewPanelProps) => React.JSX.Element;
+declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
 export { SplitView, LeftPanel, RightPanel };

package/components/SplitView/SplitView.js

@@ -1,104 +1,57 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.leftPanel = exports.SplitView = exports.RightPanel = exports.LeftPanel = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _emotion = require("emotion");
-var _Helpers = require("@webiny/ui/Helpers");
-var _ResizablePanels = require("../ResizablePanels");
-var _excluded = ["children", "className", "layoutId"],
-  _excluded2 = ["children", "className"],
-  _excluded3 = ["children"];
-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 grid = (0, _emotion.css)({
-  "&.mdc-layout-grid": {
-    padding: 0,
-    margin: "-3px auto 0 auto",
-    backgroundColor: "var(--mdc-theme-background)",
-    ">.mdc-layout-grid__inner": {
-      gridGap: 0
-    }
-  }
-});
-var RightPanelWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "em0s1980"
-} : {
-  target: "em0s1980",
-  label: "RightPanelWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "dondn",
-  styles: "background-color:var(--mdc-theme-background);overflow:auto;height:calc(100vh - 64px)"
-} : {
-  name: "dondn",
-  styles: "background-color:var(--mdc-theme-background);overflow:auto;height:calc(100vh - 64px)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwbGl0Vmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUIwQiIsImZpbGUiOiJTcGxpdFZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgY2xhc3NTZXQgZnJvbSBcImNsYXNzbmFtZXNcIjtcbmltcG9ydCB7IENlbGxQcm9wcyB9IGZyb20gXCJAd2ViaW55L3VpL0dyaWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJlbW90aW9uXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGdldENsYXNzZXMgfSBmcm9tIFwiQHdlYmlueS91aS9IZWxwZXJzXCI7XG5pbXBvcnQge1xuICAgIFBhbmVsLFxuICAgIFBhbmVsUHJvcHMsXG4gICAgUGFuZWxHcm91cCxcbiAgICBQYW5lbFJlc2l6ZUhhbmRsZSxcbiAgICBQYW5lbEdyb3VwUHJvcHNcbn0gZnJvbSBcIn4vY29tcG9uZW50cy9SZXNpemFibGVQYW5lbHNcIjtcblxuY29uc3QgZ3JpZCA9IGNzcyh7XG4gICAgXCImLm1kYy1sYXlvdXQtZ3JpZFwiOiB7XG4gICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgIG1hcmdpbjogXCItM3B4IGF1dG8gMCBhdXRvXCIsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIixcbiAgICAgICAgXCI+Lm1kYy1sYXlvdXQtZ3JpZF9faW5uZXJcIjoge1xuICAgICAgICAgICAgZ3JpZEdhcDogMFxuICAgICAgICB9XG4gICAgfVxufSk7XG5cbmNvbnN0IFJpZ2h0UGFuZWxXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLWJhY2tncm91bmQpXCIsXG4gICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgIGhlaWdodDogXCJjYWxjKDEwMHZoIC0gNjRweClcIlxufSk7XG5cbmV4cG9ydCBjb25zdCBsZWZ0UGFuZWwgPSBjc3Moe1xuICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtc3VyZmFjZSlcIixcbiAgICBcIj4ud2ViaW55LWRhdGEtbGlzdFwiOiB7XG4gICAgICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgICAgICBmbGV4RGlyZWN0aW9uOiBcImNvbHVtblwiLFxuICAgICAgICBoZWlnaHQ6IFwiY2FsYygxMDB2aCAtIDcwcHgpXCIsXG4gICAgICAgIFwiLm1kYy1kZXByZWNhdGVkLWxpc3RcIjoge1xuICAgICAgICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiXG4gICAgICAgIH1cbiAgICB9LFxuICAgIFwiPi5tZGMtZGVwcmVjYXRlZC1saXN0XCI6IHtcbiAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAgICAgIG1heEhlaWdodDogXCJjYWxjKDEwMHZoIC0gNjRweClcIixcbiAgICAgICAgb3ZlcmZsb3c6IFwiYXV0b1wiXG4gICAgfVxufSk7XG5cbmludGVyZmFjZSBTcGxpdFZpZXdQcm9wcyBleHRlbmRzIE9taXQ8UGFuZWxHcm91cFByb3BzLCBcImRpcmVjdGlvblwiIHwgXCJpZFwiIHwgXCJhdXRvU2F2ZUlkXCI+IHtcbiAgICBsYXlvdXRJZD86IHN0cmluZyB8IG51bGw7XG59XG5cbmNvbnN0IFNwbGl0VmlldyA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGxheW91dElkLCAuLi5wcm9wcyB9OiBTcGxpdFZpZXdQcm9wcykgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICAgIDxQYW5lbEdyb3VwXG4gICAgICAgICAgICBkaXJlY3Rpb249XCJob3Jpem9udGFsXCJcbiAgICAgICAgICAgIGlkPVwic3BsaXRWaWV3XCJcbiAgICAgICAgICAgIGF1dG9TYXZlSWQ9e2xheW91dElkfVxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc1NldChncmlkLCBjbGFzc05hbWUsIFwid2ViaW55LXNwbGl0LXZpZXdcIil9XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9QYW5lbEdyb3VwPlxuICAgICk7XG59O1xuXG4vLyBHZXQgdGhlIGRlZmF1bHQgc2l6ZSBmb3IgdGhlIHBhbmVsOlxuY29uc3QgZ2V0RGVmYXVsdFNpemUgPSAoc3BhbiA9IDYpID0+IHtcbiAgICByZXR1cm4gKHNwYW4gLyAxMikgKiAxMDA7XG59O1xuXG5pbnRlcmZhY2UgU3BsaXRWaWV3UGFuZWxQcm9wcyBleHRlbmRzIE9taXQ8Q2VsbFByb3BzLCBcInN0eWxlXCI+LCBPbWl0PFBhbmVsUHJvcHMsIFwiaWRcIj4ge31cblxuY29uc3QgTGVmdFBhbmVsID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgLi4ucHJvcHMgfTogU3BsaXRWaWV3UGFuZWxQcm9wcykgPT4ge1xuICAgIGNvbnN0IGRlZmF1bHRTaXplID0gcHJvcHMuZGVmYXVsdFNpemUgPz8gZ2V0RGVmYXVsdFNpemUocHJvcHMuc3BhbiB8fCA1KTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8UGFuZWxcbiAgICAgICAgICAgICAgICBkZWZhdWx0U2l6ZT17ZGVmYXVsdFNpemV9XG4gICAgICAgICAgICAgICAgbWluU2l6ZT17MTB9XG4gICAgICAgICAgICAgICAgaWQ9XCJsZWZ0UGFuZWxcIlxuICAgICAgICAgICAgICAgIHsuLi5nZXRDbGFzc2VzKFxuICAgICAgICAgICAgICAgICAgICBwcm9wcyxcbiAgICAgICAgICAgICAgICAgICAgY2xhc3NTZXQobGVmdFBhbmVsLCBjbGFzc05hbWUsIFwid2ViaW55LXNwbGl0LXZpZXdfX2xlZnQtcGFuZWxcIilcbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1BhbmVsPlxuICAgICAgICAgICAgPFBhbmVsUmVzaXplSGFuZGxlIC8+XG4gICAgICAgIDwvPlxuICAgICk7XG59O1xuXG5jb25zdCBSaWdodFBhbmVsID0gKHsgY2hpbGRyZW4sIC4uLnByb3BzIH06IFNwbGl0Vmlld1BhbmVsUHJvcHMpID0+IHtcbiAgICBjb25zdCBkZWZhdWx0U2l6ZSA9IHByb3BzLmRlZmF1bHRTaXplID8/IGdldERlZmF1bHRTaXplKHByb3BzLnNwYW4gfHwgNyk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8UGFuZWxcbiAgICAgICAgICAgIGRlZmF1bHRTaXplPXtkZWZhdWx0U2l6ZX1cbiAgICAgICAgICAgIG1pblNpemU9ezMwfVxuICAgICAgICAgICAgaWQ9XCJyaWdodFBhbmVsXCJcbiAgICAgICAgICAgIHsuLi5nZXRDbGFzc2VzKHByb3BzLCBcIndlYmlueS1zcGxpdC12aWV3X19yaWdodC1wYW5lbFwiKX1cbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgPlxuICAgICAgICAgICAgPFJpZ2h0UGFuZWxXcmFwcGVyXG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtcIndlYmlueS1zcGxpdC12aWV3X19yaWdodC1wYW5lbC13cmFwcGVyXCJ9XG4gICAgICAgICAgICAgICAgaWQ9e1wid2ViaW55LXNwbGl0LXZpZXctcmlnaHQtcGFuZWxcIn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1JpZ2h0UGFuZWxXcmFwcGVyPlxuICAgICAgICA8L1BhbmVsPlxuICAgICk7XG59O1xuXG5leHBvcnQgeyBTcGxpdFZpZXcsIExlZnRQYW5lbCwgUmlnaHRQYW5lbCB9O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var leftPanel = exports.leftPanel = (0, _emotion.css)({
-  backgroundColor: "var(--mdc-theme-surface)",
-  ">.webiny-data-list": {
-    display: "flex",
-    flexDirection: "column",
-    height: "calc(100vh - 70px)",
-    ".mdc-deprecated-list": {
-      overflow: "auto"
-    }
-  },
-  ">.mdc-deprecated-list": {
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "calc(100vh - 64px)",
-    overflow: "auto"
-  }
-});
-var SplitView = exports.SplitView = function SplitView(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    layoutId = _ref.layoutId,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_ResizablePanels.PanelGroup, Object.assign({
+import * as React from "react";
+import { cn, Separator } from "@webiny/admin-ui";
+import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels";
+const SplitView = ({
+  children,
+  className,
+  layoutId,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(PanelGroup, Object.assign({
     direction: "horizontal",
     id: "splitView",
     autoSaveId: layoutId,
-    className: (0, _classnames.default)(grid, className, "webiny-split-view")
+    className: cn("webiny-split-view", className)
   }, props), children);
 };
 
 // Get the default size for the panel:
-var getDefaultSize = function getDefaultSize() {
-  var span = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
-  return span / 12 * 100;
+const getDefaultSize = span => {
+  const spanValue = typeof span === "number" && span > 0 && span <= 12 ? span : 6;
+  return spanValue / 12 * 100;
 };
-var LeftPanel = exports.LeftPanel = function LeftPanel(_ref2) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ResizablePanels.Panel, Object.assign({
+const LeftPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Panel, Object.assign({
     defaultSize: defaultSize,
     minSize: 10,
-    id: "leftPanel"
-  }, (0, _Helpers.getClasses)(props, (0, _classnames.default)(leftPanel, className, "webiny-split-view__left-panel")), props), children), /*#__PURE__*/React.createElement(_ResizablePanels.PanelResizeHandle, null));
+    id: "leftPanel",
+    className: cn("webiny-split-view__right-panel", className)
+  }, props), children), /*#__PURE__*/React.createElement(PanelResizeHandle, null, /*#__PURE__*/React.createElement(Separator, {
+    orientation: "vertical"
+  })));
 };
-var RightPanel = exports.RightPanel = function RightPanel(_ref3) {
-  var children = _ref3.children,
-    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  var defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
-  return /*#__PURE__*/React.createElement(_ResizablePanels.Panel, Object.assign({
+const RightPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
+  return /*#__PURE__*/React.createElement(Panel, Object.assign({
     defaultSize: defaultSize,
     minSize: 30,
-    id: "rightPanel"
-  }, (0, _Helpers.getClasses)(props, "webiny-split-view__right-panel"), props), /*#__PURE__*/React.createElement(RightPanelWrapper, {
-    className: "webiny-split-view__right-panel-wrapper",
-    id: "webiny-split-view-right-panel"
-  }, children));
+    id: "rightPanel",
+    className: cn("webiny-split-view__right-panel", className)
+  }, props, {
+    style: {
+      overflowY: "scroll"
+    }
+  }), children);
 };
+export { SplitView, LeftPanel, RightPanel };
 
 //# sourceMappingURL=SplitView.js.map

package/components/SplitView/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_emotion","_Helpers","_ResizablePanels","_excluded","_excluded2","_excluded3","_EMOTION_STRINGIFIED_CSS_ERROR__","grid","css","padding","margin","backgroundColor","gridGap","RightPanelWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","leftPanel","exports","display","flexDirection","height","overflow","maxHeight","SplitView","_ref","children","className","layoutId","props","_objectWithoutProperties2","createElement","PanelGroup","Object","assign","direction","id","autoSaveId","classSet","getDefaultSize","span","arguments","length","undefined","LeftPanel","_ref2","defaultSize","Fragment","Panel","minSize","getClasses","PanelResizeHandle","RightPanel","_ref3"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport classSet from \"classnames\";\nimport { CellProps } from \"@webiny/ui/Grid\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { getClasses } from \"@webiny/ui/Helpers\";\nimport {\n    Panel,\n    PanelProps,\n    PanelGroup,\n    PanelResizeHandle,\n    PanelGroupProps\n} from \"~/components/ResizablePanels\";\n\nconst grid = css({\n    \"&.mdc-layout-grid\": {\n        padding: 0,\n        margin: \"-3px auto 0 auto\",\n        backgroundColor: \"var(--mdc-theme-background)\",\n        \">.mdc-layout-grid__inner\": {\n            gridGap: 0\n        }\n    }\n});\n\nconst RightPanelWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    overflow: \"auto\",\n    height: \"calc(100vh - 64px)\"\n});\n\nexport const leftPanel = css({\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    \">.webiny-data-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        height: \"calc(100vh - 70px)\",\n        \".mdc-deprecated-list\": {\n            overflow: \"auto\"\n        }\n    },\n    \">.mdc-deprecated-list\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"calc(100vh - 64px)\",\n        overflow: \"auto\"\n    }\n});\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"direction\" | \"id\" | \"autoSaveId\"> {\n    layoutId?: string | null;\n}\n\nconst SplitView = ({ children, className, layoutId, ...props }: SplitViewProps) => {\n    return (\n        <PanelGroup\n            direction=\"horizontal\"\n            id=\"splitView\"\n            autoSaveId={layoutId}\n            className={classSet(grid, className, \"webiny-split-view\")}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span = 6) => {\n    return (span / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<CellProps, \"style\">, Omit<PanelProps, \"id\"> {}\n\nconst LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                {...getClasses(\n                    props,\n                    classSet(leftPanel, className, \"webiny-split-view__left-panel\")\n                )}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle />\n        </>\n    );\n};\n\nconst RightPanel = ({ children, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            {...getClasses(props, \"webiny-split-view__right-panel\")}\n            {...props}\n        >\n            <RightPanelWrapper\n                className={\"webiny-split-view__right-panel-wrapper\"}\n                id={\"webiny-split-view-right-panel\"}\n            >\n                {children}\n            </RightPanelWrapper>\n        </Panel>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","Separator","Panel","PanelGroup","PanelResizeHandle","SplitView","children","className","layoutId","props","createElement","Object","assign","direction","id","autoSaveId","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Fragment","minSize","orientation","RightPanel","style","overflowY"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, Separator, ColumnProps } from \"@webiny/admin-ui\";\nimport {\n    Panel,\n    PanelProps,\n    PanelGroup,\n    PanelResizeHandle,\n    PanelGroupProps\n} from \"~/components/ResizablePanels\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"direction\" | \"id\" | \"autoSaveId\"> {\n    layoutId?: string | null;\n}\n\nconst SplitView = ({ children, className, layoutId, ...props }: SplitViewProps) => {\n    return (\n        <PanelGroup\n            direction=\"horizontal\"\n            id=\"splitView\"\n            autoSaveId={layoutId}\n            className={cn(\"webiny-split-view\", className)}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nconst LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nconst RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\"}}\n        >\n            {children}\n        </Panel>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,SAAS,QAAqB,kBAAkB;AAC7D,SACIC,KAAK,EAELC,UAAU,EACVC,iBAAiB;AAQrB,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC/E,oBACIV,KAAA,CAAAW,aAAA,CAACP,UAAU,EAAAQ,MAAA,CAAAC,MAAA;IACPC,SAAS,EAAC,YAAY;IACtBC,EAAE,EAAC,WAAW;IACdC,UAAU,EAAEP,QAAS;IACrBD,SAAS,EAAEP,EAAE,CAAC,mBAAmB,EAAEO,SAAS;EAAE,GAC1CE,KAAK,GAERH,QACO,CAAC;AAErB,CAAC;;AAED;AACA,MAAMU,cAAc,GAAIC,IAAyB,IAAK;EAClD,MAAMC,SAAS,GAAG,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,GAAG,CAAC,IAAIA,IAAI,IAAI,EAAE,GAAGA,IAAI,GAAG,CAAC;EAC/E,OAAQC,SAAS,GAAG,EAAE,GAAI,GAAG;AACjC,CAAC;AAMD,MAAMC,SAAS,GAAGA,CAAC;EAAEb,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC1E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAsB,QAAA,qBACItB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,WAAW;IACdP,SAAS,EAAEP,EAAE,CAAC,gCAAgC,EAAEO,SAAS;EAAE,GACvDE,KAAK,GAERH,QACE,CAAC,eACRP,KAAA,CAAAW,aAAA,CAACN,iBAAiB,qBACdL,KAAA,CAAAW,aAAA,CAACT,SAAS;IAACsB,WAAW,EAAE;EAAW,CAAE,CACtB,CACrB,CAAC;AAEX,CAAC;AAED,MAAMC,UAAU,GAAGA,CAAC;EAAElB,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC3E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,YAAY;IACfP,SAAS,EAAEP,EAAE,CAAC,gCAAgC,EAAEO,SAAS;EAAE,GACvDE,KAAK;IACTgB,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAQ;EAAE,IAE7BpB,QACE,CAAC;AAEhB,CAAC;AAED,SAASD,SAAS,EAAEc,SAAS,EAAEK,UAAU","ignoreList":[]}