@webiny/app-headless-cms 5.18.3 → 5.19.0-beta.3

package/admin/plugins/fieldRenderers/file/File.d.ts

@@ -1,14 +1,15 @@
-/// <reference types="react" />
-declare function File(props: any): JSX.Element;
-declare namespace File {
-    var defaultProps: {
-        validation: {
-            isValid: any;
-        };
-        styles: {
-            width: string;
-            height: string;
-        };
+import React from "react";
+export interface Props {
+    url: string;
+    onRemove: Function;
+    placeholder: string;
+    styles?: Record<string, any>;
+    showFileManager?: Function;
+    validation?: {
+        isValid?: boolean;
+        message?: string;
     };
+    description?: string;
 }
+declare const File: React.FunctionComponent<Props>;
 export default File;

package/admin/plugins/fieldRenderers/file/File.js

@@ -3,6 +3,7 @@ import { Image } from "@webiny/app/components";
 import * as Ui from "@webiny/ui/ImageUpload";
 import { createRenderImagePreview, imageExtensions } from "./utils";
 import fileIcon from "../../fields/icons/round_insert_drive_file-24px.svg";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 var imagePreviewProps = {
   transform: {
     width: 300
@@ -13,13 +14,23 @@ var imagePreviewProps = {
     objectFit: "cover"
   }
 };
+var defaultStyles = {
+  width: "100%",
+  height: "auto"
+};
+var defaultValidation = {
+  isValid: null,
+  message: null
+};
 
-function File(props) {
+var File = function File(props) {
   var url = props.url,
       onRemove = props.onRemove,
       placeholder = props.placeholder,
-      styles = props.styles,
-      showFileManager = props.showFileManager;
+      showFileManager = props.showFileManager,
+      description = props.description;
+  var styles = props.styles || defaultStyles;
+  var validation = props.validation || defaultValidation;
   var isImage = useCallback(function (url) {
     return imageExtensions.some(function (extension) {
       return url.includes(extension);
@@ -48,7 +59,7 @@ function File(props) {
     return defaultRenderImagePreview;
   };
 
-  return /*#__PURE__*/React.createElement(Ui.Image, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Ui.Image, {
     renderImagePreview: renderImagePreview(url),
     style: styles,
     value: url ? {
@@ -60,16 +71,9 @@ function File(props) {
     containerStyle: {
       height: "auto"
     }
-  });
-}
-
-File.defaultProps = {
-  validation: {
-    isValid: null
-  },
-  styles: {
-    width: "100%",
-    height: "auto"
-  }
+  }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+    error: true
+  }, validation.message || "Invalid value."), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
+
 export default File;

package/admin/plugins/fieldRenderers/file/fileField.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 import React from "react";
 import { i18n } from "@webiny/app/i18n";
@@ -25,32 +25,37 @@ var plugin = {
           getBind = _ref2.getBind,
           Label = _ref2.Label;
       var Bind = getBind();
+      var imagesOnly = field.settings && field.settings.imagesOnly;
       return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
         span: 12
-      }, /*#__PURE__*/React.createElement(Label, null, field.label), /*#__PURE__*/React.createElement(Bind, null, function (_ref3) {
-        var value = _ref3.value,
-            onChange = _ref3.onChange;
+      }, /*#__PURE__*/React.createElement(Label, null, field.label), /*#__PURE__*/React.createElement(Bind, null, function (bind) {
+        var value = bind.value,
+            onChange = bind.onChange;
         return /*#__PURE__*/React.createElement(FileManager, {
-          multiple: false
-        }, function (_ref4) {
-          var showFileManager = _ref4.showFileManager;
+          multiple: false,
+          images: imagesOnly
+        }, function (_ref3) {
+          var showFileManager = _ref3.showFileManager;
 
           var selectFile = function selectFile() {
             showFileManager(function (newFile) {
-              if (newFile !== null) {
-                onChange(newFile.src);
+              if (newFile === null) {
+                return;
               }
+
+              onChange(newFile.src);
             });
           };
 
-          return /*#__PURE__*/React.createElement(File, {
+          return /*#__PURE__*/React.createElement(File, Object.assign({}, bind, {
             url: value,
             onRemove: function onRemove() {
               return onChange(null);
             },
             showFileManager: selectFile,
-            placeholder: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Select a file\""])))
-          });
+            placeholder: field.placeholderText,
+            description: field.helpText
+          }));
         });
       }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)));
     }

package/admin/plugins/fieldRenderers/file/fileFields.js

@@ -11,7 +11,6 @@ import { imageWrapperStyles } from "./utils";
 import { FileManager } from "@webiny/app-admin/components";
 import styled from "@emotion/styled";
 import File from "./File";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 var t = i18n.ns("app-headless-cms/admin/fields/file");
 var FileUploadWrapper = /*#__PURE__*/styled("div", {
   target: "eq80mh0",
@@ -32,16 +31,17 @@ function FieldRenderer(_ref) {
       Label = _ref.Label,
       field = _ref.field;
   var Bind = getBind();
-  return /*#__PURE__*/React.createElement(Bind, null, function (_ref2) {
-    var value = _ref2.value,
-        onChange = _ref2.onChange,
-        validation = _ref2.validation;
+  var imagesOnly = field.settings && field.settings.imagesOnly;
+  return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
+    var value = bind.value,
+        onChange = bind.onChange;
     return /*#__PURE__*/React.createElement(FileUploadWrapper, {
       className: imageWrapperStyles
     }, /*#__PURE__*/React.createElement(FileManager, {
-      multiple: true
-    }, function (_ref3) {
-      var showFileManager = _ref3.showFileManager;
+      multiple: true,
+      images: imagesOnly
+    }, function (_ref2) {
+      var showFileManager = _ref2.showFileManager;
 
       var selectFiles = function selectFiles() {
         var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
@@ -80,16 +80,12 @@ function FieldRenderer(_ref) {
         }));
       }), /*#__PURE__*/React.createElement(Cell, {
         span: 3
-      }, /*#__PURE__*/React.createElement(File, {
+      }, /*#__PURE__*/React.createElement(File, Object.assign({}, bind, {
         showFileManager: function showFileManager() {
           return selectFiles();
         },
         placeholder: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Select a file\""])))
-      })), validation.isValid === false && /*#__PURE__*/React.createElement(Cell, {
-        span: 12
-      }, /*#__PURE__*/React.createElement(FormElementMessage, {
-        error: true
-      }, validation.message)));
+      }))));
     }));
   });
 }
@@ -110,14 +106,14 @@ var plugin = {
     rendererName: "file-inputs",
     name: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["File Inputs"]))),
     description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Enables selecting multiple files via File Manager."]))),
-    canUse: function canUse(_ref4) {
-      var field = _ref4.field;
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
       return field.type === "file" && field.multipleValues;
     },
-    render: function render(_ref5) {
-      var field = _ref5.field,
-          getBind = _ref5.getBind,
-          Label = _ref5.Label;
+    render: function render(_ref4) {
+      var field = _ref4.field,
+          getBind = _ref4.getBind,
+          Label = _ref4.Label;
       return /*#__PURE__*/React.createElement(FieldRenderer, {
         field: field,
         getBind: getBind,

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React from "react";
 import debounce from "lodash/debounce";
@@ -9,8 +9,10 @@ import { i18n } from "@webiny/app/i18n";
 import { Link } from "@webiny/react-router";
 import { useReference } from "./useReference";
 import { renderItem } from "./renderItem";
+import { createEntryUrl } from "./createEntryUrl";
 var t = i18n.ns("app-headless-cms/admin/fields/ref");
-var label = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
+var unpublishedLabel = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
+var publishedLabel = t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Selected content entry is published. You can view it {here}."])));
 
 function ContentEntriesAutocomplete(_ref) {
   var bind = _ref.bind,
@@ -26,14 +28,22 @@ function ContentEntriesAutocomplete(_ref) {
       loading = _useReference.loading,
       onChange = _useReference.onChange;
 
-  var unpublishedEntryInfo = null;
+  var entryInfo = null;
 
   if (value && !value.published) {
-    var link = "/cms/content-entries/".concat(value.modelId, "?id=").concat(encodeURIComponent(value.id));
-    unpublishedEntryInfo = label({
+    var link = createEntryUrl(value);
+    entryInfo = unpublishedLabel({
       publishItLink: /*#__PURE__*/React.createElement(Link, {
         to: link
-      }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["publish it"]))))
+      }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["publish it"]))))
+    });
+  } else if (value) {
+    var _link = createEntryUrl(value);
+
+    entryInfo = publishedLabel({
+      here: /*#__PURE__*/React.createElement(Link, {
+        to: _link
+      }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["here"]))))
     });
   }
 
@@ -44,7 +54,7 @@ function ContentEntriesAutocomplete(_ref) {
     value: value ? value.id : null,
     options: options,
     label: field.label,
-    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.helpText, unpublishedEntryInfo),
+    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.helpText, entryInfo),
     onInput: debounce(function (search) {
       return setSearch(search);
     }, 250)

package/admin/plugins/fieldRenderers/ref/components/createEntryUrl.d.ts

@@ -0,0 +1,5 @@
+export interface Params {
+    id: string;
+    modelId: string;
+}
+export declare const createEntryUrl: ({ modelId, id }: Params) => string;

package/admin/plugins/fieldRenderers/ref/components/createEntryUrl.js

@@ -0,0 +1,5 @@
+export var createEntryUrl = function createEntryUrl(_ref) {
+  var modelId = _ref.modelId,
+      id = _ref.id;
+  return "/cms/content-entries/".concat(modelId, "?id=").concat(encodeURIComponent(id));
+};

package/admin/plugins/fieldRenderers/ref/components/renderItem.d.ts

@@ -1,2 +1,8 @@
 /// <reference types="react" />
-export declare const renderItem: (item: any) => JSX.Element;
+export interface Props {
+    name: string;
+    modelName: string;
+    modelId: string;
+    id: string;
+}
+export declare const renderItem: (props: Props) => JSX.Element;

package/admin/plugins/fieldRenderers/ref/components/renderItem.js

@@ -1,14 +1,18 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { Typography } from "@webiny/ui/Typography";
+import { createEntryUrl } from "./createEntryUrl";
+import { Link } from "@webiny/react-router";
 var ModelId = /*#__PURE__*/styled("span", {
   target: "ejkg0kv0",
   label: "ModelId"
 })({
   color: "var(--mdc-theme-text-secondary-on-background) !important"
 });
-export var renderItem = function renderItem(item) {
+export var renderItem = function renderItem(props) {
   return /*#__PURE__*/React.createElement(Typography, {
     use: "body2"
-  }, item.name, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ModelId, null, "Model: ", item.modelName));
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: createEntryUrl(props)
+  }, props.name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ModelId, null, "Model: ", props.modelName));
 };

package/admin/plugins/fieldRenderers/ref/components/useReference.js

@@ -176,7 +176,7 @@ export var useReference = function useReference(_ref) {
       variables: {
         entry: {
           modelId: value.modelId,
-          entryId: value.entryId
+          id: value.id
         }
       }
     }).then(function (res) {
@@ -205,7 +205,7 @@ export var useReference = function useReference(_ref) {
       });
       return bind.onChange({
         modelId: entry.modelId,
-        entryId: entry.id
+        id: entry.id
       });
     }
 

package/admin/plugins/fieldRenderers/ref/components/useReferences.js

@@ -156,7 +156,7 @@ export var useReferences = function useReferences(_ref) {
     bind.onChange(values.map(function (item) {
       return {
         modelId: item.modelId,
-        entryId: item.id
+        id: item.id
       };
     }));
   }, []); // Format options for the Autocomplete component.

package/admin/plugins/fieldValidators/patternPlugins/lowerCaseSpace.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldValidatorPatternPlugin } from "../../../../types";
+declare const _default: CmsEditorFieldValidatorPatternPlugin;
+export default _default;

package/admin/plugins/fieldValidators/patternPlugins/lowerCaseSpace.js

@@ -0,0 +1,9 @@
+export default {
+  type: "cms-editor-field-validator-pattern",
+  name: "cms-editor-field-validator-pattern-lower-case-space",
+  pattern: {
+    message: "Only lower case characters and space are allowed.",
+    name: "lowerCaseSpace",
+    label: "Lower case + space"
+  }
+};

package/admin/plugins/fieldValidators/patternPlugins/upperCaseSpace.d.ts

@@ -0,0 +1,3 @@
+import { CmsEditorFieldValidatorPatternPlugin } from "../../../../types";
+declare const _default: CmsEditorFieldValidatorPatternPlugin;
+export default _default;

package/admin/plugins/fieldValidators/patternPlugins/upperCaseSpace.js

@@ -0,0 +1,9 @@
+export default {
+  type: "cms-editor-field-validator-pattern",
+  name: "cms-editor-field-validator-pattern-upper-case-space",
+  pattern: {
+    message: "Only upper case characters and space are allowed.",
+    name: "upperCaseSpace",
+    label: "Upper case + space"
+  }
+};

package/admin/plugins/fields/file.js

@@ -1,10 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import React from "react";
 import { ReactComponent as FileIcon } from "@svgr/webpack!./icons/round_insert_drive_file-24px.svg";
 import { i18n } from "@webiny/app/i18n";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Radio } from "@webiny/ui/Radio";
 var t = i18n.ns("app-headless-cms/admin/fields");
 var plugin = {
   type: "cms-editor-field-type",
@@ -15,6 +17,7 @@ var plugin = {
     description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Images, videos and other files."]))),
     icon: /*#__PURE__*/React.createElement(FileIcon, null),
     validators: ["required"],
+    listValidators: ["minLength", "maxLength"],
     allowMultipleValues: true,
     allowPredefinedValues: false,
     multipleValuesLabel: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Use as a list of files or an image gallery"]))),
@@ -26,6 +29,17 @@ var plugin = {
           name: ""
         }
       };
+    },
+    renderSettings: function renderSettings(_ref) {
+      var Bind = _ref.form.Bind;
+      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Bind, {
+        name: "settings.imagesOnly"
+      }, /*#__PURE__*/React.createElement(Radio, {
+        label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Images only"]))),
+        description: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Allow only images to be selected"])))
+      }))));
     }
   }
 };

package/admin/plugins/fields/ref.js

@@ -21,7 +21,8 @@ var plugin = {
   name: "cms-editor-field-type-ref",
   field: {
     type: "ref",
-    validators: [],
+    validators: ["required"],
+    listValidators: ["minLength", "maxLength"],
     label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Reference"]))),
     description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Reference existing content entries. For example, a book can reference one or more authors."]))),
     icon: /*#__PURE__*/React.createElement(RefIcon, null),
@@ -136,7 +137,7 @@ var plugin = {
     graphql: {
       queryField:
       /* GraphQL */
-      "\n                {\n                    modelId\n                    entryId\n                }\n            "
+      "\n                {\n                    modelId\n                    id\n                }\n            "
     }
   }
 };

package/admin/plugins/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app/types").CacheGetObjectIdPlugin | import("@webiny/app/types").RoutePlugin[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("@webiny/ui-composer/UIView").UIViewPlugin<import("@webiny/app-admin/ui/views/NavigationView").NavigationView>[] | import("@webiny/plugins/types").Plugin<{
+declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app/types").CacheGetObjectIdPlugin | import("@webiny/app/types").RoutePlugin[] | import("@webiny/ui-composer/UIView").UIViewPlugin<import("@webiny/app-admin/ui/views/NavigationView").NavigationView>[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/plugins/types").Plugin<{
     type: "graphql-playground-tab";
     tab(params: {
         locale: string;
         identity: import("@webiny/app-security/types").SecurityIdentity;
     }): import("@webiny/app-graphql-playground/types").GraphQLPlaygroundTab;
-}>[] | import("../../types").CmsContentDetailsPlugin[] | {
+}>[] | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsContentDetailsPlugin[] | {
     name: string;
     type: string;
     render(): JSX.Element;

package/admin/plugins/install.js

@@ -122,6 +122,13 @@ var plugin = {
         return import("./upgrades/v5.8.0");
       });
     }
+  }, {
+    version: "5.19.0",
+    getComponent: function getComponent() {
+      return /*#__PURE__*/lazy(function () {
+        return import("./upgrades/v5.19.0");
+      });
+    }
   }]
 };
 export default plugin;

package/admin/plugins/permissionRenderer/components/StyledComponents.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Note: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "onError" | "className" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "placeholder" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture">, object>;
+export declare const Note: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "translate" | "children" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;