@webiny/app-admin 5.23.1 → 5.25.0-beta.0

package/ui/elements/ButtonElement.js

@@ -24,12 +24,18 @@ export var ButtonElement = /*#__PURE__*/function (_UIElement) {
   _createClass(ButtonElement, [{
     key: "setLabel",
     value: function setLabel(label) {
+      /**
+       * TODO @ts-refactor
+       * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'
+       */
+      // @ts-ignore
       this.config.label = label;
     }
   }, {
     key: "getLabel",
     value: function getLabel(props) {
       if (typeof this.config.label === "function") {
+        // TODO @ts-refactor find out correct types to pass
         return this.config.label(props);
       }
 
@@ -44,6 +50,7 @@ export var ButtonElement = /*#__PURE__*/function (_UIElement) {
     key: "getType",
     value: function getType(props) {
       if (typeof this.config.type === "function") {
+        // TODO @ts-refactor find out correct types to pass
         return this.config.type(props);
       }
 

package/ui/elements/ButtonElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ButtonElement.tsx"],"names":["React","ButtonDefault","ButtonPrimary","ButtonSecondary","UIElement","BUTTONS","default","primary","secondary","ButtonElement","label","config","props","type","onClick","Component","getType","getOnClick","getLabel"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,EAAwBC,aAAxB,EAAuCC,eAAvC,QAA8D,mBAA9D;AACA,SAASC,SAAT;AAkBA,IAAMC,OAAO,GAAG;AACZC,EAAAA,OAAO,EAAEL,aADG;AAEZM,EAAAA,OAAO,EAAEL,aAFG;AAGZM,EAAAA,SAAS,EAAEL;AAHC,CAAhB;AAMA,WAAaM,aAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,WAGI,kBACIC,KADJ,EAEQ;AACJ;AACR;AACA;AACA;AACQ;AACA,WAAKC,MAAL,CAAYD,KAAZ,GAAoBA,KAApB;AACH;AAZL;AAAA;AAAA,WAcI,kBAAgBE,KAAhB,EAA8C;AAC1C,UAAI,OAAO,KAAKD,MAAL,CAAYD,KAAnB,KAA6B,UAAjC,EAA6C;AACzC;AACA,eAAO,KAAKC,MAAL,CAAYD,KAAZ,CAAkBE,KAAlB,CAAP;AACH;;AACD,aAAO,KAAKD,MAAL,CAAYD,KAAnB;AACH;AApBL;AAAA;AAAA,WAsBI,iBAAeG,IAAf,EAA8C;AAC1C,WAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;AACH;AAxBL;AAAA;AAAA,WA0BI,iBAAeD,KAAf,EAAwD;AACpD,UAAI,OAAO,KAAKD,MAAL,CAAYE,IAAnB,KAA4B,UAAhC,EAA4C;AACxC;AACA,eAAO,KAAKF,MAAL,CAAYE,IAAZ,CAAiBD,KAAjB,CAAP;AACH;;AACD,aAAO,KAAKD,MAAL,CAAYE,IAAnB;AACH;AAhCL;AAAA;AAAA,WAkCI,oBAAkBC,OAAlB,EAA8D;AAC1D,WAAKH,MAAL,CAAYG,OAAZ,GAAsBA,OAAtB;AACH;AApCL;AAAA;AAAA,WAsCI,sBAAoB;AAChB,aAAO,KAAKH,MAAL,CAAYG,OAAnB;AACH;AAxCL;AAAA;AAAA,WA0CI,gBAAuBF,KAAvB,EAAgE;AAC5D,UAAMG,SAAS,GAAGV,OAAO,CAAC,KAAKW,OAAL,CAAaJ,KAAb,CAAD,CAAzB;;AACA,UAAME,QAAO,GAAG,KAAKG,UAAL,EAAhB;;AAEA,0BAAO,oBAAC,SAAD;AAAW,QAAA,OAAO,EAAE;AAAA,iBAAMH,QAAO,CAACF,KAAD,CAAb;AAAA;AAApB,SAA2C,KAAKM,QAAL,CAAcN,KAAd,CAA3C,CAAP;AACH;AA/CL;;AAAA;AAAA,EAAuDR,SAAvD","sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-ignore\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return <Component onClick={() => onClick(props)}>{this.getLabel(props)}</Component>;\n    }\n}\n"]}

package/ui/elements/ButtonGroupElement.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { UIElement } from "../UIElement";
+import { UIElement, UiElementRenderProps } from "../UIElement";
 export declare class ButtonGroupElement extends UIElement<any> {
     constructor(id: string);
-    render(props?: any): React.ReactNode;
+    render(props?: UiElementRenderProps): React.ReactNode;
 }

package/ui/elements/ButtonGroupElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ButtonGroupElement.tsx"],"names":["React","UIElement","styled","ButtonGroup","display","height","width","alignItems","justifyContent","marginRight","ButtonGroupElement","id","useGrid","props"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,SAAT;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,IAAMC,WAAW,gBAAGD,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC9BE,EAAAA,OAAO,EAAE,MADqB;AAE9BC,EAAAA,MAAM,EAAE,MAFsB;AAG9BC,EAAAA,KAAK,EAAE,MAHuB;AAI9BC,EAAAA,UAAU,EAAE,QAJkB;AAK9BC,EAAAA,cAAc,EAAE,QALc;AAM9B,cAAY;AACRC,IAAAA,WAAW,EAAE;AADL;AANkB,CAAjB,CAAjB;AAWA,WAAaC,kBAAb;AAAA;;AAAA;;AACI,8BAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,OAAL,CAAa,KAAb;;AAH2B;AAI9B;;AALL;AAAA;AAAA,WAOI,gBAAuBC,KAAvB,EAAsE;AAClE,0BAAO,oBAAC,WAAD,uFAA2BA,KAA3B,EAAP;AACH;AATL;;AAAA;AAAA,EAAwCZ,SAAxC","sourcesContent":["import React from \"react\";\n\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\nimport styled from \"@emotion/styled\";\n\nconst ButtonGroup = styled(\"div\")({\n    display: \"flex\",\n    height: \"100%\",\n    width: \"100%\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \"> button\": {\n        marginRight: 15\n    }\n});\n\nexport class ButtonGroupElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props?: UiElementRenderProps): React.ReactNode {\n        return <ButtonGroup>{super.render(props)}</ButtonGroup>;\n    }\n}\n"]}

package/ui/elements/GenericElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GenericElement.tsx"],"names":[],"mappings":"AAAA,cAAc,6CAAd","sourcesContent":["export * from \"@webiny/ui-composer/elements/GenericElement\";\n"]}

package/ui/elements/LabelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LabelElement.tsx"],"names":["UIElement","LabelElement","id","config","applyPlugins","text"],"mappings":";;;;AACA,SAASA,SAAT;;AAMA;AACA;AACA;AACA;AACA;AACA,WAAaC,YAAb;AAAA;;AAAA;;AACI,wBAAmBC,EAAnB,EAA+BC,MAA/B,EAA2D;AAAA;;AAAA;;AACvD,8BAAMD,EAAN,EAAUC,MAAV;;AAEA,UAAKC,YAAL,CAAkBH,YAAlB;;AAHuD;AAI1D;;AALL;AAAA;AAAA,WAOI,mBAAyB;AACrB,aAAO,KAAKE,MAAL,CAAYE,IAAnB;AACH;AATL;AAAA;AAAA,WAWI,iBAAeA,IAAf,EAAmC;AAC/B,WAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;AACH;AAbL;AAAA;AAAA,WAeI,kBAA0C;AACtC,aAAO,KAAKF,MAAL,CAAYE,IAAnB;AACH;AAjBL;;AAAA;AAAA,EAAkCL,SAAlC","sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\n\nexport interface LabelElementConfig extends UIElementConfig {\n    text: string;\n}\n\n/**\n * !GOOD FIRST ISSUE!\n * Add support for `text` config and `setText` setter to accept functions.\n * See example in ButtonElement: packages/app-admin/src/ui/elements/ButtonElement.tsx\n */\nexport class LabelElement extends UIElement<LabelElementConfig> {\n    public constructor(id: string, config: LabelElementConfig) {\n        super(id, config);\n\n        this.applyPlugins(LabelElement);\n    }\n\n    public getText(): string {\n        return this.config.text;\n    }\n\n    public setText(text: string): void {\n        this.config.text = text;\n    }\n\n    public override render(): React.ReactNode {\n        return this.config.text;\n    }\n}\n"]}

package/ui/elements/NavigationMenuElement.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { UIElement, UIElementConfig } from "../UIElement";
+import { UILayoutSorter } from "@webiny/ui-composer/UILayout";
 export interface NavigationMenuElementConfig extends UIElementConfig {
     label: React.ReactNode;
     icon?: React.ReactElement;
@@ -18,7 +19,7 @@ export declare class NavigationMenuElement<TConfig extends NavigationMenuElement
     private _sorters;
     constructor(id: string, config: TConfig);
     addElement<TElement extends UIElement = UIElement>(element: TElement): TElement;
-    addSorter(sorter: Function): void;
+    addSorter(sorter: UILayoutSorter<NavigationMenuElementConfig>): void;
     get isExpanded(): boolean;
     setIcon(icon: React.ReactElement): void;
     setLabel(label: string): void;

package/ui/elements/NavigationMenuElement.js

@@ -121,9 +121,10 @@ export var NavigationMenuElement = /*#__PURE__*/function (_UIElement) {
     value: function toggleElement() {
       if (this._isExpanded) {
         this.collapseElement();
-      } else {
-        this.expandElement();
+        return;
       }
+
+      this.expandElement();
     }
   }, {
     key: "loadState",

package/ui/elements/NavigationMenuElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["NavigationMenuElement.tsx"],"names":["default","localStorage","UIElement","LOCAL_STORAGE_KEY","TAGS","NavigationMenuElement","id","config","useGrid","state","loadState","_isExpanded","includes","addSorter","a","b","hasTag","APP","UTILS","label","localeCompare","applyPlugins","element","runSorters","sorter","_sorters","push","icon","path","storeState","getView","refresh","splice","indexOf","collapseElement","expandElement","get","split","filter","Boolean","set","join","getLayout","sort"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { default as localStorage } from \"store\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { UILayoutSorter } from \"@webiny/ui-composer/UILayout\";\n\nexport interface NavigationMenuElementConfig extends UIElementConfig {\n    label: React.ReactNode;\n    icon?: React.ReactElement;\n    path?: string;\n    onClick?: Function;\n    testId?: string;\n    rel?: string;\n    target?: string;\n}\n\nconst LOCAL_STORAGE_KEY = \"webiny_apps_menu_sections\";\n\nexport enum TAGS {\n    UTILS = \"utils\",\n    APP = \"app\"\n}\n\nexport class NavigationMenuElement<\n    TConfig extends NavigationMenuElementConfig = NavigationMenuElementConfig\n> extends UIElement<TConfig> {\n    private _isExpanded = false;\n    private _sorters: UILayoutSorter<NavigationMenuElementConfig>[] = [];\n\n    public constructor(id: string, config: TConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        const state = this.loadState();\n        this._isExpanded = state.includes(this.id);\n\n        this.addSorter((a, b) => {\n            if (a.hasTag(TAGS.APP) && b.hasTag(TAGS.UTILS)) {\n                return -1;\n            }\n\n            if (a.hasTag(TAGS.UTILS) && b.hasTag(TAGS.APP)) {\n                return 1;\n            }\n\n            return (a.config.label as string).localeCompare(b.config.label as string);\n        });\n\n        // Apply plugins\n        this.applyPlugins(NavigationMenuElement);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        super.addElement(element);\n        this.runSorters();\n        return element;\n    }\n\n    public addSorter(sorter: UILayoutSorter<NavigationMenuElementConfig>): void {\n        this._sorters.push(sorter);\n    }\n\n    get isExpanded(): boolean {\n        return this._isExpanded;\n    }\n\n    public setIcon(icon: React.ReactElement): void {\n        this.config.icon = icon;\n    }\n\n    public setLabel(label: string): void {\n        this.config.label = label;\n    }\n\n    public setPath(path: string): void {\n        this.config.path = path;\n    }\n\n    public expandElement(): void {\n        this._isExpanded = true;\n        const state = this.loadState();\n        if (!state.includes(this.id)) {\n            state.push(this.id);\n        }\n        this.storeState(state);\n        this.getView().refresh();\n    }\n\n    public collapseElement(): void {\n        this._isExpanded = false;\n        const state = this.loadState();\n        if (state.includes(this.id)) {\n            state.splice(state.indexOf(this.id), 1);\n        }\n        this.storeState(state);\n        this.getView().refresh();\n    }\n\n    public toggleElement(): void {\n        if (this._isExpanded) {\n            this.collapseElement();\n            return;\n        }\n        this.expandElement();\n    }\n\n    private loadState(): string[] {\n        return (localStorage.get(LOCAL_STORAGE_KEY) || \"\").split(\",\").filter(Boolean);\n    }\n\n    private storeState(state: string[]): void {\n        localStorage.set(LOCAL_STORAGE_KEY, state.join(\",\"));\n    }\n\n    private runSorters(): void {\n        for (const sorter of this._sorters) {\n            this.getLayout().sort(sorter);\n        }\n    }\n}\n"]}

package/ui/elements/PanelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PanelElement.tsx"],"names":["UIElement","PanelElement"],"mappings":";;;;AAAA,SAASA,SAAT;AAEA,WAAaC,YAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA,EAAkCD,SAAlC","sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class PanelElement extends UIElement<any> {}\n"]}

package/ui/elements/PlaceholderElement.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { UIElement } from "../UIElement";
 export declare class PlaceholderElement extends UIElement {
-    render(): any;
+    render(): React.ReactNode;
     remove(): void;
 }

package/ui/elements/PlaceholderElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PlaceholderElement.tsx"],"names":["UIElement","PlaceholderElement"],"mappings":";;;;AAAA,SAASA,SAAT;AAEA,WAAaC,kBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,WACI,kBAA0C;AACtC,aAAO,IAAP;AACH;AAHL;AAAA;AAAA,WAKI,kBAA+B;AAC3B;AACH;AAPL;;AAAA;AAAA,EAAwCD,SAAxC","sourcesContent":["import { UIElement } from \"../UIElement\";\n\nexport class PlaceholderElement extends UIElement {\n    public override render(): React.ReactNode {\n        return null;\n    }\n\n    public override remove(): void {\n        return;\n    }\n}\n"]}

package/ui/elements/SmallButtonElement.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 import { ButtonElement, ButtonElementConfig } from "./ButtonElement";
 export declare class SmallButtonElement<TRenderProps = any> extends ButtonElement<TRenderProps> {
     constructor(id: string, config: ButtonElementConfig<TRenderProps>);
-    render(props: any): React.ReactElement;
+    render(props: TRenderProps): React.ReactElement;
 }

package/ui/elements/SmallButtonElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SmallButtonElement.tsx"],"names":["React","ButtonDefault","ButtonPrimary","ButtonSecondary","ButtonElement","BUTTONS","default","primary","secondary","SmallButtonElement","id","config","applyPlugins","props","Component","getType","onClick","getOnClick","getLabel"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,EAAwBC,aAAxB,EAAuCC,eAAvC,QAA8D,mBAA9D;AACA,SAASC,aAAT;AAEA,IAAMC,OAAO,GAAG;AACZC,EAAAA,OAAO,EAAEL,aADG;AAEZM,EAAAA,OAAO,EAAEL,aAFG;AAGZM,EAAAA,SAAS,EAAEL;AAHC,CAAhB;AAMA,WAAaM,kBAAb;AAAA;;AAAA;;AACI,8BAAmBC,EAAnB,EAA+BC,MAA/B,EAA0E;AAAA;;AAAA;;AACtE,8BAAMD,EAAN,EAAUC,MAAV;;AAEA,UAAKC,YAAL,CAAkBH,kBAAlB;;AAHsE;AAIzE;;AALL;AAAA;AAAA,WAOI,gBAAuBI,KAAvB,EAAgE;AAC5D,UAAMC,SAAS,GAAGT,OAAO,CAAC,KAAKU,OAAL,EAAD,CAAzB;;AACA,UAAMC,QAAO,GAAG,KAAKC,UAAL,EAAhB;;AAEA,0BACI,oBAAC,SAAD;AAAW,QAAA,KAAK,MAAhB;AAAiB,QAAA,OAAO,EAAE;AAAA,iBAAMD,QAAO,CAACH,KAAD,CAAb;AAAA;AAA1B,SACK,KAAKK,QAAL,EADL,CADJ;AAKH;AAhBL;;AAAA;AAAA,EAA4Dd,aAA5D","sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { ButtonElement, ButtonElementConfig } from \"~/ui/elements/ButtonElement\";\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class SmallButtonElement<TRenderProps = any> extends ButtonElement<TRenderProps> {\n    public constructor(id: string, config: ButtonElementConfig<TRenderProps>) {\n        super(id, config);\n\n        this.applyPlugins(SmallButtonElement);\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType()];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component small onClick={() => onClick(props)}>\n                {this.getLabel()}\n            </Component>\n        );\n    }\n}\n"]}

package/ui/elements/TypographyElement.d.ts

@@ -6,7 +6,7 @@ interface TypographyElementConfig extends UIElementConfig {
 }
 export declare class TypographyElement extends UIElement<TypographyElementConfig> {
     constructor(id: string, config: TypographyElementConfig);
-    getTypography(): import("@rmwc/typography").TypographyT;
+    getTypography(): TypographyT;
     setTypography(typography: TypographyT): void;
     render(props: any): React.ReactNode;
 }

package/ui/elements/TypographyElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TypographyElement.tsx"],"names":["React","UIElement","Typography","TypographyElement","id","config","useGrid","applyPlugins","typography","props","getTypography"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT;AACA,SAASC,UAAT,QAA2B,uBAA3B;AAqBA,WAAaC,iBAAb;AAAA;;AAAA;;AACI,6BAAYC,EAAZ,EAAwBC,MAAxB,EAAyD;AAAA;;AAAA;;AACrD,8BAAMD,EAAN,EAAUC,MAAV;;AACA,UAAKC,OAAL,CAAa,KAAb;;AAEA,UAAKC,YAAL,CAAkBJ,iBAAlB;;AAJqD;AAKxD;;AANL;AAAA;AAAA,WAQI,yBAAoC;AAChC,aAAO,KAAKE,MAAL,CAAYG,UAAnB;AACH;AAVL;AAAA;AAAA,WAYI,uBAAqBA,UAArB,EAAoD;AAChD,WAAKH,MAAL,CAAYG,UAAZ,GAAyBA,UAAzB;AACH;AAdL;AAAA;AAAA,WAgBI,gBAAuBC,KAAvB,EAAoD;AAChD,0BAAO,oBAAC,UAAD;AAAY,QAAA,GAAG,EAAE,KAAKC,aAAL;AAAjB,uFAAqDD,KAArD,EAAP;AACH;AAlBL;;AAAA;AAAA,EAAuCR,SAAvC","sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport type TypographyT =\n    | \"headline1\"\n    | \"headline2\"\n    | \"headline3\"\n    | \"headline4\"\n    | \"headline5\"\n    | \"headline6\"\n    | \"subtitle1\"\n    | \"subtitle2\"\n    | \"body1\"\n    | \"body2\"\n    | \"caption\"\n    | \"button\"\n    | \"overline\";\n\ninterface TypographyElementConfig extends UIElementConfig {\n    typography: TypographyT;\n}\n\nexport class TypographyElement extends UIElement<TypographyElementConfig> {\n    constructor(id: string, config: TypographyElementConfig) {\n        super(id, config);\n        this.useGrid(false);\n\n        this.applyPlugins(TypographyElement);\n    }\n\n    public getTypography(): TypographyT {\n        return this.config.typography;\n    }\n\n    public setTypography(typography: TypographyT): void {\n        this.config.typography = typography;\n    }\n\n    public override render(props: any): React.ReactNode {\n        return <Typography use={this.getTypography()}>{super.render(props)}</Typography>;\n    }\n}\n"]}

package/ui/elements/ViewElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ViewElement.tsx"],"names":[],"mappings":"AAAA,cAAc,0CAAd","sourcesContent":["export * from \"@webiny/ui-composer/elements/ViewElement\";\n"]}

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { UIElement } from "../../../UIElement";
+import { UIElement, UiElementRenderProps } from "../../../UIElement";
 export declare class DynamicFieldsetRowElement extends UIElement<any> {
     constructor(id: string);
-    render(props?: any): React.ReactNode;
+    render(props?: UiElementRenderProps): React.ReactNode;
 }

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js

@@ -4,15 +4,11 @@ import _get from "@babel/runtime/helpers/get";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import { UIElement } from "../../../UIElement";
-import styled from "@emotion/styled";
-var DynamicFieldsetRow = /*#__PURE__*/styled("div", {
-  target: "e1huneaw0",
-  label: "DynamicFieldsetRow"
-})({
-  paddingBottom: 10
-}); // !GOOD FIRST ISSUE!
+import { UIElement } from "../../../UIElement"; // import styled from "@emotion/styled";
+// const DynamicFieldsetRow = styled("div")({
+//     paddingBottom: 10
+// });
+// !GOOD FIRST ISSUE!
 // Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.
 
 export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
@@ -36,7 +32,11 @@ export var DynamicFieldsetRowElement = /*#__PURE__*/function (_UIElement) {
     key: "render",
     value: function render(props) {
       return _get(_getPrototypeOf(DynamicFieldsetRowElement.prototype), "render", this).call(this, props);
-      return /*#__PURE__*/React.createElement(DynamicFieldsetRow, null);
+      /**
+       * TODO @ts-refactor @pavel
+       * Why was this left here?
+       */
+      // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;
     }
   }]);
 

package/ui/elements/form/DynamicFieldsetElement/DynamicFieldsetRowElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DynamicFieldsetRowElement.tsx"],"names":["UIElement","DynamicFieldsetRowElement","id","applyPlugins","props"],"mappings":";;;;;;AACA,SAASA,SAAT,6B,CACA;AAEA;AACA;AACA;AAEA;AACA;;AAEA,WAAaC,yBAAb;AAAA;;AAAA;;AACI,qCAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,YAAL,CAAkBF,yBAAlB;;AAH2B;AAI9B;;AALL;AAAA;AAAA,WAOI,gBAAuBG,KAAvB,EAAsE;AAClE,mGAAoBA,KAApB;AACA;AACR;AACA;AACA;AACQ;AACH;AAdL;;AAAA;AAAA,EAA+CJ,SAA/C","sourcesContent":["import React from \"react\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n// import styled from \"@emotion/styled\";\n\n// const DynamicFieldsetRow = styled(\"div\")({\n//     paddingBottom: 10\n// });\n\n// !GOOD FIRST ISSUE!\n// Extract rendering and styling into a DynamicFieldsetRowElementRenderer class.\n\nexport class DynamicFieldsetRowElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.applyPlugins(DynamicFieldsetRowElement);\n    }\n\n    public override render(props?: UiElementRenderProps): React.ReactNode {\n        return super.render(props);\n        /**\n         * TODO @ts-refactor @pavel\n         * Why was this left here?\n         */\n        // return <DynamicFieldsetRow>{}</DynamicFieldsetRow>;\n    }\n}\n"]}

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

@@ -6,35 +6,36 @@ interface DynamicFieldsetActions {
     add: (index?: number) => () => void;
     remove: (index: number) => () => void;
 }
-export interface DynamicFieldsetElementConfig extends FormFieldElementConfig {
-    createHeader?: (params: {
+interface CreateHeaderCallable {
+    (params: {
         actions: DynamicFieldsetActions;
-    }) => UIElement;
-    createRow?: (params: {
+    }): UIElement;
+}
+interface CreateRowCallable {
+    (params: {
         actions: DynamicFieldsetActions;
         index: number;
         row: DynamicFieldsetRowElement;
-    }) => UIElement;
-    createEmpty?: (params: {
+    }): UIElement;
+}
+interface CreateEmptyCallable {
+    (params: {
         actions: DynamicFieldsetActions;
-    }) => UIElement;
+    }): UIElement;
+}
+export interface DynamicFieldsetElementConfig extends FormFieldElementConfig {
+    createHeader?: CreateHeaderCallable;
+    createRow?: CreateRowCallable;
+    createEmpty?: CreateEmptyCallable;
 }
 export declare class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {
     constructor(id: string, config: DynamicFieldsetElementConfig);
-    getCreateHeaderElement(): (params: {
-        actions: DynamicFieldsetActions;
-    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    getCreateHeaderElement(): CreateHeaderCallable | undefined;
     setHeaderElement(element: UIElement): void;
     setCreateHeaderElement(cb: DynamicFieldsetElementConfig["createHeader"]): void;
-    getCreateRowElement(): (params: {
-        actions: DynamicFieldsetActions;
-        index: number;
-        row: DynamicFieldsetRowElement;
-    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    getCreateRowElement(): CreateRowCallable | undefined;
     setCreateRowElement(cb: DynamicFieldsetElementConfig["createRow"]): void;
-    getCreateEmptyElement(): (params: {
-        actions: DynamicFieldsetActions;
-    }) => UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
+    getCreateEmptyElement(): CreateEmptyCallable | undefined;
     setEmptyElement(element: UIElement): void;
     setCreateEmptyElement(cb: DynamicFieldsetElementConfig["createEmpty"]): void;
     render(props: FormFieldElementRenderProps): React.ReactNode;

package/ui/elements/form/DynamicFieldsetElement.js

@@ -92,6 +92,10 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
             row = _ref.row,
             empty = _ref.empty;
         return /*#__PURE__*/React.createElement(React.Fragment, null, header(function () {
+          if (!createHeader) {
+            return null;
+          }
+
           var headerElement = createHeader({
             actions: actions
           }); // This element is not created via `this.addElement()` API.
@@ -101,6 +105,11 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
           return headerElement ? headerElement.render(props) : null;
         }), row(function (_ref2) {
           var index = _ref2.index;
+
+          if (!createRow) {
+            return null;
+          }
+
           var rowElement = createRow({
             actions: actions,
             index: index,
@@ -111,6 +120,10 @@ export var DynamicFieldsetElement = /*#__PURE__*/function (_FormFieldElement) {
           rowElement && rowElement.setParent(_this2);
           return rowElement ? /*#__PURE__*/React.createElement(Grid, null, rowElement.render(props)) : null;
         }), empty(function () {
+          if (!createEmpty) {
+            return null;
+          }
+
           var emptyElement = createEmpty({
             actions: actions
           }); // This element is not created via `this.addElement()` API.

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

@@ -0,0 +1 @@
+{"version":3,"sources":["DynamicFieldsetElement.tsx"],"names":["React","FormFieldElement","DynamicFieldset","Grid","DynamicFieldsetRowElement","DynamicFieldsetElement","id","config","useGrid","applyPlugins","createHeader","element","cb","createRow","createEmpty","props","formProps","Error","Bind","getCreateHeaderElement","getCreateRowElement","getCreateEmptyElement","getName","getDefaultValue","actions","header","row","empty","headerElement","setParent","render","index","rowElement","emptyElement"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n    FormFieldElement,\n    FormFieldElementConfig,\n    FormFieldElementRenderProps\n} from \"~/ui/elements/form/FormFieldElement\";\nimport { UIElement } from \"~/ui/UIElement\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Grid } from \"@webiny/ui/Grid\";\nimport { DynamicFieldsetRowElement } from \"./DynamicFieldsetElement/DynamicFieldsetRowElement\";\n\ninterface DynamicFieldsetActions {\n    add: (index?: number) => () => void;\n    remove: (index: number) => () => void;\n}\n\ninterface CreateHeaderCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\ninterface CreateRowCallable {\n    (params: {\n        actions: DynamicFieldsetActions;\n        index: number;\n        row: DynamicFieldsetRowElement;\n    }): UIElement;\n}\n\ninterface CreateEmptyCallable {\n    (params: { actions: DynamicFieldsetActions }): UIElement;\n}\n\nexport interface DynamicFieldsetElementConfig extends FormFieldElementConfig {\n    createHeader?: CreateHeaderCallable;\n    createRow?: CreateRowCallable;\n    createEmpty?: CreateEmptyCallable;\n}\n\nexport class DynamicFieldsetElement extends FormFieldElement<DynamicFieldsetElementConfig> {\n    public constructor(id: string, config: DynamicFieldsetElementConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.applyPlugins(DynamicFieldsetElement);\n    }\n\n    public getCreateHeaderElement() {\n        return this.config.createHeader;\n    }\n\n    public setHeaderElement(element: UIElement): void {\n        this.config.createHeader = () => element;\n    }\n\n    public setCreateHeaderElement(cb: DynamicFieldsetElementConfig[\"createHeader\"]): void {\n        this.config.createHeader = cb;\n    }\n\n    public getCreateRowElement() {\n        return this.config.createRow;\n    }\n\n    public setCreateRowElement(cb: DynamicFieldsetElementConfig[\"createRow\"]): void {\n        this.config.createRow = cb;\n    }\n\n    public getCreateEmptyElement() {\n        return this.config.createEmpty;\n    }\n\n    public setEmptyElement(element: UIElement): void {\n        this.config.createEmpty = () => element;\n    }\n\n    public setCreateEmptyElement(cb: DynamicFieldsetElementConfig[\"createEmpty\"]): void {\n        this.config.createEmpty = cb;\n    }\n\n    public override render(props: FormFieldElementRenderProps): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`DynamicFieldsetElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n        const createHeader = this.getCreateHeaderElement();\n        const createRow = this.getCreateRowElement();\n        const createEmpty = this.getCreateEmptyElement();\n\n        return (\n            <Bind name={this.getName()} defaultValue={this.getDefaultValue(props)}>\n                <DynamicFieldset>\n                    {({ actions, header, row, empty }) => (\n                        <React.Fragment>\n                            {header(() => {\n                                if (!createHeader) {\n                                    return null;\n                                }\n                                const headerElement = createHeader({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                headerElement && headerElement.setParent(this);\n\n                                return headerElement ? headerElement.render(props) : null;\n                            })}\n                            {row(({ index }) => {\n                                if (!createRow) {\n                                    return null;\n                                }\n                                const rowElement = createRow({\n                                    actions: actions as DynamicFieldsetActions,\n                                    index,\n                                    row: new DynamicFieldsetRowElement(`${this.id}.row.${index}`)\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                rowElement && rowElement.setParent(this);\n\n                                return rowElement ? <Grid>{rowElement.render(props)}</Grid> : null;\n                            })}\n                            {empty(() => {\n                                if (!createEmpty) {\n                                    return null;\n                                }\n                                const emptyElement = createEmpty({\n                                    actions: actions as DynamicFieldsetActions\n                                });\n\n                                // This element is not created via `this.addElement()` API.\n                                // We need to manually give it a parent to enable proper grid rendering.\n                                emptyElement && emptyElement.setParent(this);\n\n                                return emptyElement ? emptyElement.render(props) : null;\n                            })}\n                        </React.Fragment>\n                    )}\n                </DynamicFieldset>\n            </Bind>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["EmptyStateElement.tsx"],"names":["UIElement","EmptyStateElementRenderer","EmptyStateElement","id","addRenderer"],"mappings":";;;;AAAA,SAASA,SAAT;AACA,SAASC,yBAAT;AAEA,WAAaC,iBAAb;AAAA;;AAAA;;AACI,6BAAmBC,EAAnB,EAA+B;AAAA;;AAAA;;AAC3B,8BAAMA,EAAN;;AAEA,UAAKC,WAAL,CAAiB,IAAIH,yBAAJ,EAAjB;;AAH2B;AAI9B;;AALL;AAAA,EAAuCD,SAAvC","sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\nimport { EmptyStateElementRenderer } from \"./EmptyStateElementRenderer\";\n\nexport class EmptyStateElement extends UIElement<any> {\n    public constructor(id: string) {\n        super(id);\n\n        this.addRenderer(new EmptyStateElementRenderer());\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["EmptyStateElementRenderer.tsx"],"names":["React","UIRenderer","Ui","Image","AddImageIconWrapper","AddImageWrapper","FilePreviewWrapper","RemoveImage","ReactComponent","AddFileIcon","Typography","RemoveImageIcon","EmptyStateElementRenderer","props","accept","fileManagerElement","getAccept","acceptsOnlyImages","every","el","startsWith","renderImageProps","width","height","value","showFileManager","onChange","src","split","pop"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT;AACA,OAAO,KAAKC,EAAZ,MAAoB,wBAApB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AAEA,SAASC,mBAAT,EAA8BC,eAA9B,EAA+CC,kBAA/C,EAAmEC,WAAnE;AACA,SAASC,cAAc,IAAIC,WAA3B;AACA,SAASC,UAAT,QAA2B,uBAA3B;AACA,SAASF,cAAc,IAAIG,eAA3B,QAAkD,mDAAlD;AAEA,WAAaC,yBAAb;AAAA;;AAAA;;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA,WAII,sBAEsF;AAAA,UADlFC,KACkF,QADlFA,KACkF;AAClF,UAAMC,MAAM,GAAGD,KAAK,CAACE,kBAAN,CAAyBC,SAAzB,EAAf;AACA,UAAMC,iBAAiB,GAAG,CAACH,MAAD,IAAWA,MAAM,CAACI,KAAP,CAAa,UAAAC,EAAE;AAAA,eAAIA,EAAE,CAACC,UAAH,CAAc,QAAd,CAAJ;AAAA,OAAf,CAArC;;AAEA,UAAIH,iBAAJ,EAAuB;AACnB,4BACI,oBAAC,EAAD,CAAI,KAAJ;AACI,UAAA,WAAW,EAAE,iBADjB;AAEI,UAAA,kBAAkB,EAAE,4BAAAI,gBAAgB;AAAA,gCAAI,oBAAC,KAAD,EAAWA,gBAAX,CAAJ;AAAA,WAFxC;AAGI,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAE,MAAT;AAAiBC,YAAAA,MAAM,EAAE;AAAzB,WAHX;AAII,UAAA,KAAK,EAAEV,KAAK,CAACW,KAJjB;AAKI,UAAA,WAAW,EAAEX,KAAK,CAACY,eALvB;AAMI,UAAA,WAAW,EAAEZ,KAAK,CAACa;AANvB,UADJ;AAUH;;AAED,UAAIb,KAAK,CAACW,KAAV,EAAiB;AACb,4BACI,oBAAC,kBAAD,qBACI,kEACmB,oCAASX,KAAK,CAACW,KAAN,CAAYG,GAAZ,CAAgBC,KAAhB,CAAsB,GAAtB,EAA2BC,GAA3B,EAAT,CADnB,CADJ,eAKI,oBAAC,WAAD;AAAa,UAAA,OAAO,EAAE;AAAA,mBAAMhB,KAAK,CAACa,QAAN,CAAe,IAAf,CAAN;AAAA;AAAtB,wBACI,oBAAC,eAAD,OADJ,CALJ,eASI,oBAAC,eAAD;AAAiB,uBAAW,aAA5B;AAA2C,UAAA,OAAO,EAAEb,KAAK,CAACY;AAA1D,wBACI,oBAAC,mBAAD,qBACI,oBAAC,WAAD,OADJ,eAEI,oBAAC,UAAD;AAAY,UAAA,GAAG,EAAE;AAAjB,2BAFJ,CADJ,CATJ,CADJ;AAkBH;;AAED,0BACI,oBAAC,eAAD;AAAiB,qBAAW,aAA5B;AAA2C,QAAA,OAAO,EAAEZ,KAAK,CAACY;AAA1D,sBACI,oBAAC,mBAAD,qBACI,oBAAC,WAAD,OADJ,eAEI,oBAAC,UAAD;AAAY,QAAA,GAAG,EAAE;AAAjB,yBAFJ,CADJ,CADJ;AAQH;AApDL;;AAAA;AAAA,EAA+CxB,UAA/C","sourcesContent":["import React from \"react\";\nimport { EmptyStateElement } from \"./EmptyStateElement\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport * as Ui from \"@webiny/ui/ImageUpload\";\nimport { Image } from \"@webiny/app/components\";\nimport { FileManagerElementRenderProps } from \"~/ui/elements/form/FileManagerElement/FileManagerElementRenderer\";\nimport { AddImageIconWrapper, AddImageWrapper, FilePreviewWrapper, RemoveImage } from \"./styled\";\nimport { ReactComponent as AddFileIcon } from \"~/assets/icons/attach_file_black_24dp.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as RemoveImageIcon } from \"@webiny/ui/ImageUpload/icons/round-close-24px.svg\";\n\nexport class EmptyStateElementRenderer extends UIRenderer<\n    EmptyStateElement,\n    FileManagerElementRenderProps\n> {\n    public override render({\n        props\n    }: UIRenderParams<EmptyStateElement, FileManagerElementRenderProps>): React.ReactNode {\n        const accept = props.fileManagerElement.getAccept();\n        const acceptsOnlyImages = !accept || accept.every(el => el.startsWith(\"image/\"));\n\n        if (acceptsOnlyImages) {\n            return (\n                <Ui.Image\n                    placeholder={\"Select an image\"}\n                    renderImagePreview={renderImageProps => <Image {...renderImageProps} />}\n                    style={{ width: \"100%\", height: \"auto\" }}\n                    value={props.value}\n                    uploadImage={props.showFileManager}\n                    removeImage={props.onChange}\n                />\n            );\n        }\n\n        if (props.value) {\n            return (\n                <FilePreviewWrapper>\n                    <span>\n                        Attached file: <strong>{props.value.src.split(\"/\").pop()}</strong>\n                    </span>\n\n                    <RemoveImage onClick={() => props.onChange(null)}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n\n                    <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                        <AddImageIconWrapper>\n                            <AddFileIcon />\n                            <Typography use={\"caption\"}>Select a file</Typography>\n                        </AddImageIconWrapper>\n                    </AddImageWrapper>\n                </FilePreviewWrapper>\n            );\n        }\n\n        return (\n            <AddImageWrapper data-role={\"select-file\"} onClick={props.showFileManager}>\n                <AddImageIconWrapper>\n                    <AddFileIcon />\n                    <Typography use={\"caption\"}>Select a file</Typography>\n                </AddImageIconWrapper>\n            </AddImageWrapper>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FileManagerElementRenderer.tsx"],"names":["React","styled","UIRenderer","FormElementMessage","FileManager","ImageUploadWrapper","position","opacity","pointerEvents","transform","top","left","color","FileManagerElementRenderer","element","props","formProps","Error","Bind","accept","getAccept","label","getLabel","description","getDescription","getName","getValidators","getDefaultValue","value","cb","onBeforeChange","form","onAfterChange","onChange","validation","getOnChangePickAttributes","getMaxSize","getMultipleMaxCount","getMultipleMaxSize","showFileManager","getEmptyStateElement","render","fileManagerElement","isValid","message"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport { FileManager } from \"~/components\";\nimport { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\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 FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={onChange}\n                            onChangePick={element.getOnChangePickAttributes()}\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            multipleMaxCount={element.getMultipleMaxCount()}\n                            multipleMaxSize={element.getMultipleMaxSize()}\n                        >\n                            {({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange\n                                })\n                            }\n                        </FileManager>\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"]}

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

@@ -1,14 +1,18 @@
 /// <reference types="react" />
-export declare const AddImageIconWrapper: 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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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>;
-export declare const AddImageWrapper: 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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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>;
-export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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">, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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"> & {
-    theme?: object;
-}>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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" | "theme"> & {
-    ref?: ((instance: HTMLDivElement) => void) | import("react").RefObject<HTMLDivElement>;
-}, Pick<Pick<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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">, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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"> & {
-    theme?: object;
-}>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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" | "theme"> & {
-    ref?: ((instance: HTMLDivElement) => void) | import("react").RefObject<HTMLDivElement>;
-}, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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" | "theme">, object>;
-export declare const RemoveImage: 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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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>;
-export declare const FilePreviewWrapper: 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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "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>;
+export declare const AddImageIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const AddImageWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    theme?: object | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    theme?: object | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
+export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const FilePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;