@webiny/ui 5.36.2 → 5.37.0-beta.1

package/ImageEditor/toolbar/flip.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton\n                    icon={<FlipIcon />}\n                    onClick={() => activateTool(\"flip\")}\n                    data-testid={\"flip-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_flip","_cropperjs","_Button","_Tooltip","cropper","flipped","x","y","renderForm","default","createElement","style","textAlign","ButtonDefault","onClick","scaleX","scaleY","tool","name","icon","_ref","activateTool","Tooltip","placement","content","IconButton","ReactComponent","cancel","destroy","onActivate","_ref2","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","_ref3","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height","_default","exports"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton\n                    icon={<FlipIcon />}\n                    onClick={() => activateTool(\"flip\")}\n                    data-testid={\"flip-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":["_crop","require","_draw","_filter","_flip","_redo","_rotateLeft","_rotateRight","_undo"],"sources":["index.ts"],"sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA"}

package/ImageEditor/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}
+{"version":3,"names":["_crop","_interopRequireDefault","require","_flip","_filter","_rotate"],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA"}

package/ImageEditor/toolbar/rotate.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_rotateRight","_Slider","_Tooltip","_Button","_cropperjs","cropper","RenderForm","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","rangeInput","_createClass2","key","value","render","_this2","createElement","style","width","margin","Slider","label","state","min","max","step","discrete","displayMarkers","onInput","setState","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","rotateTo","parseInt","stop","React","Component","tool","name","icon","_ref2","activateTool","Tooltip","placement","content","IconButton","ReactComponent","onClick","renderForm","props","onActivate","_ref3","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","_ref4","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height","_default","exports"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageUpload/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","placeholder","removeImage","editImage","value","renderImagePreview","imagePreviewProps","src","style","onClick","width","height","imagePreview","disabled","containerStyle","classNames","loading","renderImg","renderBlank","React","Component"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_classnames","_roundAdd_photo_alternate24px","_roundClose24px","_roundEdit24px","_Typography","_Progress","_styled","Image","_React$Component","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","renderBlank","_this$props","props","uploadImage","round","ImageWrapper","AddImageWrapperRound","AddImageWrapper","createElement","onClick","AddImageIconWrapper","ReactComponent","Typography","use","placeholder","renderImg","_this$props2","removeImage","editImage","renderImagePreview","imagePreviewProps","src","style","width","height","imagePreview","ImagePreviewWrapper","RemoveImage","EditImage","render","_this$props3","disabled","containerStyle","className","classNames","loading","CircularProgress","React","Component","_defineProperty2","_default","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ReactComponent as AddImageIcon } from \"./icons/round-add_photo_alternate-24px.svg\";\nimport { ReactComponent as RemoveImageIcon } from \"./icons/round-close-24px.svg\";\nimport { ReactComponent as EditImageIcon } from \"./icons/round-edit-24px.svg\";\nimport { Typography } from \"../Typography\";\nimport { CircularProgress } from \"../Progress\";\nimport {\n    AddImageIconWrapper,\n    AddImageWrapper,\n    AddImageWrapperRound,\n    EditImage,\n    ImagePreviewWrapper,\n    RemoveImage\n} from \"./styled\";\n\ninterface ImageProps {\n    uploadImage: () => void;\n    removeImage?: (value: string | null) => void;\n    editImage?: Function;\n    value?: any;\n    disabled?: boolean;\n    loading?: boolean;\n    placeholder: string;\n    style?: React.CSSProperties;\n    renderImagePreview?: (props: any) => React.ReactElement<any>;\n    round?: boolean;\n    containerStyle?: React.CSSProperties;\n}\n\nclass Image extends React.Component<ImageProps> {\n    static defaultProps = {\n        placeholder: \"Select an image\",\n        containerStyle: { height: \"100%\" }\n    };\n\n    renderBlank() {\n        const { uploadImage, round } = this.props;\n\n        const ImageWrapper = round ? AddImageWrapperRound : AddImageWrapper;\n\n        return (\n            <ImageWrapper\n                data-role={\"select-image\"}\n                onClick={() => {\n                    uploadImage();\n                }}\n            >\n                <AddImageIconWrapper>\n                    <AddImageIcon />\n                    <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                </AddImageIconWrapper>\n            </ImageWrapper>\n        );\n    }\n\n    renderImg() {\n        const { removeImage, editImage, uploadImage, value, renderImagePreview } = this.props;\n\n        const imagePreviewProps: any = {\n            src: value ? value.src : null,\n            style: this.props.style ? this.props.style : null,\n            onClick: () => uploadImage()\n        };\n\n        if (!imagePreviewProps.style) {\n            imagePreviewProps.style = {};\n        }\n\n        if (!imagePreviewProps.style.width && !imagePreviewProps.style.height) {\n            imagePreviewProps.style.width = \"100%\";\n            imagePreviewProps.style.height = \"100%\";\n        }\n\n        let imagePreview = null;\n        if (typeof renderImagePreview === \"function\") {\n            imagePreview = renderImagePreview(imagePreviewProps);\n        } else {\n            imagePreview = <img {...imagePreviewProps} />;\n        }\n\n        return (\n            <ImagePreviewWrapper data-testid={\"image-preview\"}>\n                {imagePreview}\n\n                {typeof removeImage === \"function\" && (\n                    <RemoveImage onClick={() => removeImage(null)} data-testid={\"remove-image\"}>\n                        <RemoveImageIcon />\n                    </RemoveImage>\n                )}\n\n                {typeof editImage === \"function\" && (\n                    <EditImage onClick={() => editImage(value)}>\n                        <EditImageIcon />\n                    </EditImage>\n                )}\n\n                <AddImageWrapper\n                    data-role={\"select-image\"}\n                    onClick={() => {\n                        uploadImage();\n                    }}\n                >\n                    <AddImageIconWrapper>\n                        <AddImageIcon />\n                        <Typography use={\"caption\"}>{this.props.placeholder}</Typography>\n                    </AddImageIconWrapper>\n                </AddImageWrapper>\n            </ImagePreviewWrapper>\n        );\n    }\n\n    public override render() {\n        const { value, disabled, containerStyle } = this.props;\n        return (\n            <div className={classNames({ disabled })} style={containerStyle}>\n                {this.props.loading && <CircularProgress />}\n                {value && value.src ? this.renderImg() : this.renderBlank()}\n            </div>\n        );\n    }\n}\n\nexport default Image;\n"],"mappings":"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"}

package/ImageUpload/ImageEditorDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAsBzC,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,qBAAa;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAgB,CACtC,gBAEV,6BAAC,qBAAa;UACV,eAAY,eAAe;UAC3B,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAlD2Bb,cAAK,CAACgB,SAAS;AAAA,eAoDhCjB,iBAAiB;AAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_ImageEditor","_Tooltip","_emotion","_Dialog","_Button","_excluded","imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","_createClass2","key","value","render","_this2","_this$props","props","src","options","onAccept","open","dialogZIndex","dialogProps","_objectWithoutProperties2","createElement","Dialog","Object","assign","className","style","zIndex","ImageEditor","ref","imageEditor","_ref","activeTool","Fragment","DialogContent","DialogActions","DialogCancel","Tooltip","content","placement","ButtonPrimary","disabled","onClick","url","current","getCanvasDataUrl","Component","_default","exports"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":"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"}

package/ImageUpload/MultiImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","errors","undefined","selectedImages","loading","imageEditor","open","image","index","value","props","onChange","validate","images","selectedIndex","setState","i","length","newValue","Array","isArray","convertedImages","push","src","base64","name","size","type","splice","indexOf","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","imageEditorImageIndex","files","handleSelectedImages","handleErrors","browseFiles","getDropZoneProps","map","file","removeImage","onSuccess","onError","error","errorType","errorMessages","errorFileName","default","React","Component","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAMA,WAAW,gBAAG,IAAAC,YAAG,EAAC;EACpB,WAAW,EAAE;IACTC,OAAO,EAAE,IAAI;IACbC,aAAa,EAAE;EACnB,CAAC;EACD,WAAW,EAAE;IACTC,SAAS,EAAE,MAAM;IACjBC,EAAE,EAAE;MACAC,aAAa,EAAE,KAAK;MACpBC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,cAAc;MACvBC,KAAK,EAAE,GAAG;MACVC,MAAM,EAAE,GAAG;MACX,cAAc,EAAE;QACZC,MAAM,EAAE,qBAAqB;QAC7BC,MAAM,EAAE,SAAS;QACjBC,SAAS,EAAE;MACf;IACJ;EACJ;AACJ,CAAC,uBAAC;;AAEF;AACA;AAAA,IAgDMC,gBAAgB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,oFAYa;MAC3BC,MAAM,EAAEC,SAAS;MACjBC,cAAc,EAAE,CAAC,CAAC;MAClBC,OAAO,EAAE,KAAK;MACdC,WAAW,EAAE;QACTC,IAAI,EAAE,KAAK;QACXC,KAAK,EAAE,IAAI;QACXC,KAAK,EAAEN;MACX;IACJ,CAAC;IAAA;MAAA,kGAEU,iBAAOO,KAAU;QAAA;QAAA;UAAA;YAAA;cAAA,cACO,MAAKC,KAAK,EAAjCC,QAAQ,eAARA,QAAQ,EAAEC,QAAQ,eAARA,QAAQ;cAAA,cAC1BD,QAAQ;cAAA;gBAAA;gBAAA;cAAA;cAAA;cAAA,OAAWA,QAAQ,CAACF,KAAK,CAAC;YAAA;cAAA,cAClCG,QAAQ;cAAA;gBAAA;gBAAA;cAAA;cAAA;cAAA,OAAWA,QAAQ,EAAE;YAAA;YAAA;cAAA;UAAA;QAAA;MAAA,CAChC;MAAA;QAAA;MAAA;IAAA;IAAA;MAAA,mGAEsB,kBAAOC,MAA2B;QAAA;UAAA;QAAA;UAAA;YAAA;cAAEC,aAAa,8DAAG,CAAC;cACxE,MAAKC,QAAQ,CACT;gBACId,MAAM,EAAEC,SAAS;gBACjBE,OAAO,EAAE;cACb,CAAC,sGACD;gBAAA;gBAAA;kBAAA;oBAAA;sBACUD,cAAmC,GAAG,CAAC,CAAC;sBAC9C,KAASa,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,MAAM,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;wBAC9BT,KAAK,GAAGM,MAAM,CAACG,CAAC,CAAC;wBACvBb,cAAc,CAACW,aAAa,GAAGE,CAAC,CAAC,mCAAQT,KAAK,CAAE;sBACpD;sBAEA,MAAKQ,QAAQ,CAAC;wBAAEZ,cAAc,EAAdA;sBAAe,CAAC,sGAAE;wBAAA;wBAAA;0BAAA;4BAAA;8BACxBe,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAKV,KAAK,CAACD,KAAK,CAAC,oCAAO,MAAKC,KAAK,CAACD,KAAK,IAAI,EAAE;8BAEvEY,eAAe,GAAG,EAAE;8BAC1B,KAASL,EAAC,GAAG,CAAC,EAAEA,EAAC,GAAGH,MAAM,CAACI,MAAM,EAAED,EAAC,EAAE,EAAE;gCAC9BT,MAAK,GAAGM,MAAM,CAACG,EAAC,CAAC;gCACvBK,eAAe,CAACC,IAAI,CAAC;kCACjBC,GAAG,EAAEhB,MAAK,CAACgB,GAAG,CAACC,MAAM;kCACrBC,IAAI,EAAElB,MAAK,CAACkB,IAAI;kCAChBC,IAAI,EAAEnB,MAAK,CAACmB,IAAI;kCAChBC,IAAI,EAAEpB,MAAK,CAACoB;gCAChB,CAAC,CAAC;8BACN;8BAEAT,QAAQ,CAACU,MAAM,OAAfV,QAAQ,GAAQJ,aAAa,EAAE,CAAC,SAAKO,eAAe,EAAC;8BAAC;8BAAA,OAChD,MAAKV,QAAQ,CAACO,QAAQ,CAAC;4BAAA;8BAC7B,MAAKH,QAAQ,CAAC;gCAAEX,OAAO,EAAE;8BAAM,CAAC,CAAC;4BAAC;4BAAA;8BAAA;0BAAA;wBAAA;sBAAA,CACrC,GAAC;oBAAC;oBAAA;sBAAA;kBAAA;gBAAA;cAAA,CACN,GACJ;YAAC;YAAA;cAAA;UAAA;QAAA;MAAA,CACL;MAAA;QAAA;MAAA;IAAA;IAAA,2FAEc,UAACH,MAAwB,EAAK;MACzC,MAAKc,QAAQ,CAAC;QAAEd,MAAM,EAANA;MAAO,CAAC,CAAC;IAC7B,CAAC;IAAA,0FAEa,UAACM,KAAmB,EAAK;MACnC,mBAA4B,MAAKG,KAAK;QAA9BD,KAAK,gBAALA,KAAK;QAAEE,QAAQ,gBAARA,QAAQ;MACvB,IAAI,CAACA,QAAQ,EAAE;QACX;MACJ;MAEA,IAAME,MAAM,GAAGM,KAAK,CAACC,OAAO,CAACX,KAAK,CAAC,oCAAOA,KAAK,IAAI,EAAE;MACrDI,MAAM,CAACe,MAAM,CAACf,MAAM,CAACgB,OAAO,CAACtB,KAAK,CAAC,EAAE,CAAC,CAAC;MACvCI,QAAQ,CAACE,MAAM,CAAC;IACpB,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MAAA;MACrB,mBAUI,IAAI,CAACH,KAAK;QATVD,KAAK,gBAALA,KAAK;QACLqB,UAAU,gBAAVA,UAAU;QACVC,KAAK,gBAALA,KAAK;QACLC,WAAW,gBAAXA,WAAW;QACXC,QAAQ,gBAARA,QAAQ;QACR5B,WAAW,gBAAXA,WAAW;QACX6B,MAAM,gBAANA,MAAM;QACNC,OAAO,gBAAPA,OAAO;QACPC,SAAS,gBAATA,SAAS;MAEb;AACR;AACA;MACQ,IAAIC,mBAAmB,GAAG,EAAE;MAC5B,IAAI,IAAI,CAACC,KAAK,CAACjC,WAAW,CAACE,KAAK,EAAE;QAC9B;QACA8B,mBAAmB,GAAG,IAAI,CAACC,KAAK,CAACjC,WAAW,CAACE,KAAK,CAACgB,GAAG;QACtDgB,OAAO,CAACC,IAAI,CAAC,6DAA6D,CAAC;QAC3ED,OAAO,CAACE,GAAG,CAAC,IAAI,CAACH,KAAK,CAACjC,WAAW,CAACE,KAAK,CAACgB,GAAG,CAAC;MACjD;MAEA,YAAmEO,UAAU,IAAI,CAAC,CAAC;QAAlEY,iBAAiB,SAA1BC,OAAO;QAA8BC,iBAAiB,SAA1BC,OAAO;MAC3C;AACR;AACA;MACQ,oBACI;QAAK,SAAS,EAAE,IAAAC,mBAAU,EAAC5D,WAAW,EAAEkD,SAAS;MAAE,GAC9CL,KAAK,iBACF;QAAK,SAAS,EAAC;MAAoD,GAC9DA,KAAK,CAEb,eAED,6BAAC,0BAAiB;QACd,OAAO,EAAE1B,WAAY;QACrB,IAAI,EAAE,IAAI,CAACiC,KAAK,CAACjC,WAAW,CAACC,IAAK;QAClC,GAAG,EAAE+B,mBAAoB;QACzB,OAAO,EAAE,mBAAM;UACX,MAAI,CAACtB,QAAQ,CAAC,UAAAuB,KAAK,EAAI;YACnBA,KAAK,CAACjC,WAAW,CAACC,IAAI,GAAG,KAAK;YAC9B,OAAOgC,KAAK;UAChB,CAAC,CAAC;QACN,CAAE;QACF,QAAQ,EAAE,kBAAAf,GAAG,EAAI;UACb;UACAwB,UAAU,CAAC,YAAM;YACb,MAAI,CAAChC,QAAQ,CAAC;cAAEX,OAAO,EAAE;YAAK,CAAC,sGAAE;cAAA;cAAA;gBAAA;kBAAA;oBACvBc,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,MAAI,CAACV,KAAK,CAACD,KAAK,CAAC,oCACtC,MAAI,CAACC,KAAK,CAACD,KAAK,IACpB,EAAE;oBAEFuC,qBAAqB,GAAG,MAAI,CAACV,KAAK,CAACjC,WAAW,CAC/CG,KAAK;oBACVU,QAAQ,CAAC8B,qBAAqB,CAAC,CAACzB,GAAG,GAAGA,GAAG;oBAAC;oBAAA,OAEpC,MAAI,CAACZ,QAAQ,CAACO,QAAQ,CAAC;kBAAA;oBAC7B,MAAI,CAACH,QAAQ,CAAC;sBACVX,OAAO,EAAE,KAAK;sBACdC,WAAW,EAAE;wBACTE,KAAK,EAAE,IAAI;wBACXD,IAAI,EAAE,KAAK;wBACXE,KAAK,EAAEN;sBACX;oBACJ,CAAC,CAAC;kBAAC;kBAAA;oBAAA;gBAAA;cAAA;YAAA,CACN,GAAC;UACN,CAAC,CAAC;QACN;MAAE,EACJ,eAEF,6BAAC,yBAAW;QACR,MAAM,EAAEgC,MAAmB;QAC3B,OAAO,EAAEC,OAAQ;QACjB,QAAQ;QACR,eAAe;QACf,SAAS,EAAE,mBAAAc,KAAK,EAAI;UAChB,MAAI,CAACC,oBAAoB,CAACD,KAAK,EAAE9B,KAAK,CAACC,OAAO,CAACX,KAAK,CAAC,GAAGA,KAAK,CAACQ,MAAM,GAAG,CAAC,CAAC;QAC7E,CAAE;QACF,OAAO,EAAE,iBAAAhB,MAAM;UAAA,OAAI,MAAI,CAACkD,YAAY,CAAClD,MAAM,CAAC;QAAA;MAAC,GAE5C,iBAAuC;QAAA,IAApCmD,WAAW,SAAXA,WAAW;UAAEC,gBAAgB,SAAhBA,gBAAgB;QAC7B,IAAMxC,MAAM,GAAGM,KAAK,CAACC,OAAO,CAACX,KAAK,CAAC,oCAAOA,KAAK,IAAI,EAAE;QAErD,oBACI,oCAAS4C,gBAAgB,CAAC;UAAEjB,SAAS,EAAE,IAAAU,mBAAU,EAAC;YAAEb,QAAQ,EAARA;UAAS,CAAC;QAAE,CAAC,CAAC,eAC9D;UAAI,SAAS,EAAC;QAAQ,GACjBpB,MAAM,CAACyC,GAAG,CAAC,UAAC/C,KAAK,EAAEC,KAAK;UAAA,oBACrB;YAAI,GAAG,EAAEA;UAAM,gBACX,6BAAC,cAAK;YACF,OAAO,EACH,MAAI,CAAC8B,KAAK,CAACnC,cAAc,CAACK,KAAK,CAAC,IAChC,MAAI,CAAC8B,KAAK,CAAClC,OACd;YACD,KAAK,EAAEG,KAAK,CAACgD,IAAI,IAAIhD,KAAM;YAC3B,WAAW,EAAE;cAAA,OACT,MAAI,CAACiD,WAAW,CAACjD,KAAK,CAACgD,IAAI,IAAIhD,KAAK,CAAC;YAAA,CACxC;YACD,SAAS,EACL,MAAI,CAAC+B,KAAK,CAACnC,cAAc,CAACK,KAAK,CAAC,IAC/B,YAAM;cACH,MAAI,CAACO,QAAQ,CAAC;gBACVV,WAAW,EAAE;kBACTG,KAAK,EAALA,KAAK;kBACLF,IAAI,EAAE,IAAI;kBACVC,KAAK,EAAE,MAAI,CAAC+B,KAAK,CAACnC,cAAc,CAC5BK,KAAK;gBAEb;cACJ,CAAC,CAAC;YACN,CACH;YACD,WAAW,EAAE,uBAAM;cACf4C,WAAW,CAAC;gBACRK,SAAS,EAAE,mBAAAR,KAAK,EAAI;kBAChB,MAAI,CAACC,oBAAoB,CACrBD,KAAK,EACLzC,KAAK,GAAG,CAAC,CACZ;gBACL,CAAC;gBACDkD,OAAO,EAAE,iBAAAzD,MAAM;kBAAA,OAAI,MAAI,CAACkD,YAAY,CAAClD,MAAM,CAAC;gBAAA;cAChD,CAAC,CAAC;YACN;UAAE,EACJ,CACD;QAAA,CACR,CAAC,eACF,sDACI,6BAAC,cAAK;UACF,QAAQ,EAAE,MAAI,CAACqC,KAAK,CAAClC,OAAQ;UAC7B,WAAW,EAAE,uBAAM;YACfgD,WAAW,CAAC;cACRK,SAAS,EAAE,mBAAAR,KAAK,EAAI;gBAChB,MAAI,CAACC,oBAAoB,CACrBD,KAAK,EACL9B,KAAK,CAACC,OAAO,CAACX,KAAK,CAAC,GAAGA,KAAK,CAACQ,MAAM,GAAG,CAAC,CAC1C;cACL,CAAC;cACDyC,OAAO,EAAE,iBAAAzD,MAAM;gBAAA,OAAI,MAAI,CAACkD,YAAY,CAAClD,MAAM,CAAC;cAAA;YAChD,CAAC,CAAC;UACN;QAAE,EACJ,CACD,CACJ,CACH;MAEd,CAAC,CACS,EAEbyC,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIV,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,EAEAb,KAAK,CAACC,OAAO,CAAC,IAAI,CAACkB,KAAK,CAACrC,MAAM,CAAC,iBAC7B,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAC,kEAEtB,wDACK,IAAI,CAACqC,KAAK,CAACrC,MAAM,CAACqD,GAAG,CAAC,UAACK,KAAgB,EAAEnD,KAAK,EAAK;QAChD;AAChC;AACA;QACgC,IAAMoD,SAAS,GAAGD,KAAK,CAAChC,IAGT;QACf,IAAMkB,OAAO,GAAG,MAAI,CAACnC,KAAK,CAACmD,aAAa,CAACD,SAAS,CAAC;QAEnD,IAAME,aAAa,GAAGH,KAAK,CAACJ,IAAI,GAAGI,KAAK,CAACJ,IAAI,CAAC9B,IAAI,GAAG,EAAE;QAEvD,oBACI;UAAI,GAAG,EAAEqC,aAAa,GAAGtD;QAAM,GAC1BA,KAAK,GAAG,CAAC,EAAC,IAAE,4DAASsD,aAAa,CAAU,UAC7C,EAACjB,OAAO,IAAI,MAAI,CAACnC,KAAK,CAACmD,aAAa,CAACE,OAAO,CAC3C;MAEb,CAAC,CAAC,CACD,CAEZ,CACC;IAEd;EAAC;EAAA;AAAA,EAvQ0BC,cAAK,CAACC,SAAS;AAAA;AAAA,8BAAxCjE,gBAAgB,kBACoC;EAClDkC,MAAM,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC;EACjEC,OAAO,EAAE,KAAK;EACd9B,WAAW,EAAE,CAAC,CAAC;EACfwD,aAAa,EAAE;IACXK,eAAe,EAAE,oBAAoB;IACrCC,mBAAmB,EAAE,wBAAwB;IAC7CJ,OAAO,EAAE;EACb;AACJ,CAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_emotion","_classnames","_FormElementMessage","_Image","_ImageEditorDialog","imagesStyle","css","opacity","pointerEvents","listStyle","li","verticalAlign","margin","display","width","height","border","cursor","textAlign","MultiImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","errors","undefined","selectedImages","loading","imageEditor","open","image","index","_ref","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","value","_this$props","onChange","validate","wrap","_callee$","_context","prev","next","props","t0","t1","stop","_x","_ref2","_callee4","images","selectedIndex","_args4","_callee4$","_context4","setState","_callee3","i","_callee3$","_context3","_objectSpread2","_callee2","newValue","convertedImages","_i","_image","_callee2$","_context2","isArray","_toConsumableArray2","push","src","base64","name","size","type","splice","_x2","_this$props2","indexOf","_createClass2","key","render","_this2","_this$props3","validation","label","description","disabled","accept","maxSize","className","imageEditorImageSrc","state","console","warn","log","_ref5","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","_callee5","imageEditorImageIndex","_callee5$","_context5","multiple","convertToBase64","onSuccess","files","handleSelectedImages","onError","handleErrors","_ref7","browseFiles","getDropZoneProps","map","file","removeImage","editImage","uploadImage","FormElementMessage","error","errorType","errorMessages","errorFileName","React","Component","exports","maxSizeExceeded","unsupportedFileType"],"sources":["MultiImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormElementMessage } from \"../FormElementMessage\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\nimport { FormComponentProps } from \"../types\";\n\nconst imagesStyle = css({\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \"ul.images\": {\n        listStyle: \"none\",\n        li: {\n            verticalAlign: \"top\",\n            margin: 2,\n            display: \"inline-block\",\n            width: 150,\n            height: 150,\n            \"&:last-child\": {\n                border: \"1px solid lightgray\",\n                cursor: \"pointer\",\n                textAlign: \"center\"\n            }\n        }\n    }\n});\n\n// Do not apply editping for following image types.\n// const noImageEditorTypes = [\"image/svg+xml\", \"image/gif\"];\n\ninterface MultiImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"5mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n    };\n\n    // Cropper options\n    cropper?: { [key: string]: any };\n}\n\ninterface State {\n    errors?: FileError[];\n    selectedImages: Record<string, any>;\n    loading: boolean;\n    imageEditor: {\n        image: SelectedFile | null;\n        open: boolean;\n        index?: number;\n    };\n}\n\nclass MultiImageUpload extends React.Component<MultiImageUploadProps, State> {\n    static defaultProps: Partial<MultiImageUploadProps> = {\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        maxSize: \"5mb\",\n        imageEditor: {},\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        errors: undefined,\n        selectedImages: {},\n        loading: false,\n        imageEditor: {\n            open: false,\n            image: null,\n            index: undefined\n        }\n    };\n\n    onChange = async (value: any) => {\n        const { onChange, validate } = this.props;\n        onChange && (await onChange(value));\n        validate && (await validate());\n    };\n\n    handleSelectedImages = async (images: Array<SelectedFile>, selectedIndex = 0) => {\n        this.setState(\n            {\n                errors: undefined,\n                loading: true\n            },\n            async () => {\n                const selectedImages: Record<number, any> = {};\n                for (let i = 0; i < images.length; i++) {\n                    const image = images[i];\n                    selectedImages[selectedIndex + i] = { ...image };\n                }\n\n                this.setState({ selectedImages }, async () => {\n                    const newValue = Array.isArray(this.props.value) ? [...this.props.value] : [];\n\n                    const convertedImages = [];\n                    for (let i = 0; i < images.length; i++) {\n                        const image = images[i];\n                        convertedImages.push({\n                            src: image.src.base64,\n                            name: image.name,\n                            size: image.size,\n                            type: image.type\n                        });\n                    }\n\n                    newValue.splice(selectedIndex, 0, ...convertedImages);\n                    await this.onChange(newValue);\n                    this.setState({ loading: false });\n                });\n            }\n        );\n    };\n\n    handleErrors = (errors: Array<FileError>) => {\n        this.setState({ errors });\n    };\n\n    removeImage = (image: SelectedFile) => {\n        const { value, onChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        const images = Array.isArray(value) ? [...value] : [];\n        images.splice(images.indexOf(image), 1);\n        onChange(images);\n    };\n\n    public override render() {\n        const {\n            value,\n            validation,\n            label,\n            description,\n            disabled,\n            imageEditor,\n            accept,\n            maxSize,\n            className\n        } = this.props;\n        /**\n         * TODO: figure out the correct type\n         */\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image) {\n            // @ts-ignore\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n            console.warn(\"Figure out correct type if this.state.imageEditor.image.src\");\n            console.log(this.state.imageEditor.image.src);\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can safely be cast because we have default value\n         */\n        return (\n            <div className={classNames(imagesStyle, className)}>\n                {label && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                const newValue = Array.isArray(this.props.value)\n                                    ? [...this.props.value]\n                                    : [];\n\n                                const imageEditorImageIndex = this.state.imageEditor\n                                    .index as number;\n                                newValue[imageEditorImageIndex].src = src;\n\n                                await this.onChange(newValue);\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false,\n                                        index: undefined\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    multiple\n                    convertToBase64\n                    onSuccess={files => {\n                        this.handleSelectedImages(files, Array.isArray(value) ? value.length : 0);\n                    }}\n                    onError={errors => this.handleErrors(errors)}\n                >\n                    {({ browseFiles, getDropZoneProps }) => {\n                        const images = Array.isArray(value) ? [...value] : [];\n\n                        return (\n                            <div {...getDropZoneProps({ className: classNames({ disabled }) })}>\n                                <ul className=\"images\">\n                                    {images.map((image, index) => (\n                                        <li key={index}>\n                                            <Image\n                                                loading={\n                                                    this.state.selectedImages[index] &&\n                                                    this.state.loading\n                                                }\n                                                value={image.file || image}\n                                                removeImage={() =>\n                                                    this.removeImage(image.file || image)\n                                                }\n                                                editImage={\n                                                    this.state.selectedImages[index] &&\n                                                    (() => {\n                                                        this.setState({\n                                                            imageEditor: {\n                                                                index,\n                                                                open: true,\n                                                                image: this.state.selectedImages[\n                                                                    index\n                                                                ]\n                                                            }\n                                                        });\n                                                    })\n                                                }\n                                                uploadImage={() => {\n                                                    browseFiles({\n                                                        onSuccess: files => {\n                                                            this.handleSelectedImages(\n                                                                files,\n                                                                index + 1\n                                                            );\n                                                        },\n                                                        onError: errors => this.handleErrors(errors)\n                                                    });\n                                                }}\n                                            />\n                                        </li>\n                                    ))}\n                                    <li>\n                                        <Image\n                                            disabled={this.state.loading}\n                                            uploadImage={() => {\n                                                browseFiles({\n                                                    onSuccess: files => {\n                                                        this.handleSelectedImages(\n                                                            files,\n                                                            Array.isArray(value) ? value.length : 0\n                                                        );\n                                                    },\n                                                    onError: errors => this.handleErrors(errors)\n                                                });\n                                            }}\n                                        />\n                                    </li>\n                                </ul>\n                            </div>\n                        );\n                    }}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(this.state.errors) && (\n                    <FormElementMessage error>\n                        Your selection of images failed because of the following images:\n                        <ul>\n                            {this.state.errors.map((error: FileError, index) => {\n                                /**\n                                 * We need to cast as existing keys in errorMessages, otherwise TS throws an error\n                                 */\n                                const errorType = error.type as\n                                    | \"maxSizeExceeded\"\n                                    | \"unsupportedFileType\"\n                                    | \"default\";\n                                const message = this.props.errorMessages[errorType];\n\n                                const errorFileName = error.file ? error.file.name : \"\";\n\n                                return (\n                                    <li key={errorFileName + index}>\n                                        {index + 1}. <strong>{errorFileName}</strong> -&nbsp;\n                                        {message || this.props.errorMessages.default}\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    </FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { MultiImageUpload };\n"],"mappings":"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"}

package/ImageUpload/MultiImageUpload.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","readme","Bind","aspectRatio","JSON","stringify","info","propTables","MultiImageUpload"],"sources":["MultiImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,CACJ;AAEDV,KAAK,CAACW,GAAG,CACL,oBAAoB,EACpB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAET,MAAM,EAANA;IAAO;EAAE,GAClB;IAAA,IAAGU,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAQ,gBACf,6BAAC,kCAAgB;MACb,KAAK,EAAC,kCAAkC;MACxC,QAAQ,EAAEH,QAAS;MACnB,WAAW,EAAC,6CAA6C;MACzD,OAAO,EAAE;QACLI,WAAW,EAAE;MACjB;IAAE,EACJ,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,wDAECC,IAAI,CAACC,SAAS,CAAC;IAAEb,MAAM,EAAEA;EAAO,CAAC,CAAC,okBAYjC,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,kCAAgB;EAAE;AAAE,CAAC,CAC/C"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Story","_addonKnobs","_README","_form","_MultiImageUpload","story","storiesOf","module","addDecorator","withKnobs","images","id","name","src","type","size","add","disabled","boolean","default","createElement","Story","StoryReadme","readme","StorySandbox","StorySandboxExample","Form","data","_ref","Bind","MultiImageUpload","label","description","cropper","aspectRatio","StorySandboxCode","concat","JSON","stringify","info","propTables"],"sources":["MultiImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { MultiImageUpload } from \"./MultiImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst images = [\n    {\n        id: 1,\n        name: \"1st_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=49\",\n        type: \"image/jpeg\",\n        size: 901611\n    },\n    {\n        id: 2,\n        name: \"2nd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=63\",\n        type: \"image/jpeg\",\n        size: 902612\n    },\n    {\n        id: 3,\n        name: \"3rd_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=24\",\n        type: \"image/jpeg\",\n        size: 903613\n    },\n    {\n        id: 4,\n        name: \"4th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=57\",\n        type: \"image/jpeg\",\n        size: 904614\n    },\n    {\n        id: 5,\n        name: \"5th_image.jpg\",\n        src: \"http://i.pravatar.cc/150?img=31\",\n        type: \"image/jpeg\",\n        size: 905615\n    }\n];\n\nstory.add(\n    \"Multi Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ images }}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                    <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                        cropper={{\n                                            aspectRatio: 1\n                                        }}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ images: images })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"images\">\n                                     <MultiImageUpload\n                                        label=\"Your previously uploaded images:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [MultiImageUpload] } }\n);\n"],"mappings":";;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAOA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AAEA,IAAMO,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,MAAM,GAAG,CACX;EACIC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,EACD;EACIJ,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC,CACJ;AAEDV,KAAK,CAACW,GAAG,CACL,oBAAoB,EACpB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACItB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAqB,KAAK,qBACFzB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAsB,WAAW,QAAEC,eAAoB,CAAC,eACnC3B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAwB,YAAY,qBACT5B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAyB,mBAAmB,qBAChB7B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACjB,KAAA,CAAAuB,IAAI;IAACC,IAAI,EAAE;MAAEjB,MAAM,EAANA;IAAO;EAAE,GAClB,UAAAkB,IAAA;IAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAA,oBACJjC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACS,IAAI;MAACjB,IAAI,EAAC;IAAQ,gBACfhB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAA0B,gBAAgB;MACbC,KAAK,EAAC,kCAAkC;MACxCd,QAAQ,EAAEA,QAAS;MACnBe,WAAW,EAAC,6CAA6C;MACzDC,OAAO,EAAE;QACLC,WAAW,EAAE;MACjB;IAAE,CACL,CACC,CAAC;EAAA,CAET,CACW,CAAC,eACtBtC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAmC,gBAAgB,iDAAAC,MAAA,CAECC,IAAI,CAACC,SAAS,CAAC;IAAE5B,MAAM,EAAEA;EAAO,CAAC,CAAC,mkBAYlC,CACR,CACX,CAAC;AAEhB,CAAC,EACD;EAAE6B,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACV,kCAAgB;EAAE;AAAE,CAC/C,CAAC"}

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageUploadWrapper","styled","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","loading","error","imageEditor","open","image","images","props","onChange","name","type","size","src","base64","setState","includes","errors","className","value","validation","label","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","validationIsValid","isValid","validationMessage","message","classNames","setTimeout","handleFiles","handleErrors","browseFiles","getDropZoneProps","undefined","errorMessages","default","React","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\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\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_FormElementMessage","_styled","_classnames","_Image","_ImageEditorDialog","ImageUploadWrapper","styled","target","label","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","loading","error","imageEditor","open","image","images","_this$props","props","onChange","name","type","size","src","base64","setState","includes","errors","_errors","_slicedToArray2","_createClass2","key","value","render","_this2","_this$props2","className","validation","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","t0","_objectSpread2","stop","convertToBase64","onSuccess","handleFiles","onError","handleErrors","_ref3","browseFiles","getDropZoneProps","removeImage","undefined","uploadImage","editImage","FormElementMessage","errorMessages","React","Component","exports","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport ImageEditorDialog from \"./ImageEditorDialog\";\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\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: Array<string>;\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: Object;\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":"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"}

package/ImageUpload/SingleImageUpload.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","image","id","name","src","type","size","add","disabled","boolean","readme","maxWidth","Bind","JSON","stringify","info","propTables","SingleImageUpload"],"sources":["SingleImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\n    id: 1,\n    name: \"1st_image.jpg\",\n    src: \"http://i.pravatar.cc/150?img=49\",\n    type: \"image/jpeg\",\n    size: 901611\n};\n\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [SingleImageUpload] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC;AAEDV,KAAK,CAACW,GAAG,CACL,qBAAqB,EACrB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAC1B,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEV,KAAK,EAALA;IAAM;EAAE,GACjB;IAAA,IAAGW,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,gBACd,6BAAC,oCAAiB;MACd,KAAK,EAAC,iCAAiC;MACvC,QAAQ,EAAEJ,QAAS;MACnB,WAAW,EAAC;IAAiC,EAC/C,CACC;EAAA,CACV,CACE,CACL,CACY,eACtB,6BAAC,uBAAgB,wDAECK,IAAI,CAACC,SAAS,CAAC;IAAEb,KAAK,EAAEA;EAAM,CAAC,CAAC,mkBAY/B,CACR,CACX;AAEhB,CAAC,EACD;EAAEc,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,oCAAiB;EAAE;AAAE,CAAC,CAChD"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_Story","_addonKnobs","_README","_form","_SingleImageUpload","story","storiesOf","module","addDecorator","withKnobs","image","id","name","src","type","size","add","disabled","boolean","default","createElement","Story","StoryReadme","readme","StorySandbox","StorySandboxExample","style","maxWidth","Form","data","_ref","Bind","SingleImageUpload","label","description","StorySandboxCode","concat","JSON","stringify","info","propTables"],"sources":["SingleImageUpload.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { SingleImageUpload } from \"./SingleImageUpload\";\n\nconst story = storiesOf(\"Components/ImageUpload\", module);\nstory.addDecorator(withKnobs);\n\nconst image = {\n    id: 1,\n    name: \"1st_image.jpg\",\n    src: \"http://i.pravatar.cc/150?img=49\",\n    type: \"image/jpeg\",\n    size: 901611\n};\n\nstory.add(\n    \"Single Image Upload\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <div style={{ maxWidth: 200 }}>\n                            <Form data={{ image }}>\n                                {({ Bind }) => (\n                                    <Bind name=\"image\">\n                                        <SingleImageUpload\n                                            label=\"Your previously uploaded image:\"\n                                            disabled={disabled}\n                                            description=\"Image will be publicly visible.\"\n                                        />\n                                    </Bind>\n                                )}\n                            </Form>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={${JSON.stringify({ image: image })}}>\n                            {({ Bind }) => (\n                                <Bind name=\"image\">\n                                     <SingleImageUpload\n                                        label=\"Your previously uploaded image:\"\n                                        disabled={disabled}\n                                        description=\"This list will not be shown to other users.\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [SingleImageUpload] } }\n);\n"],"mappings":";;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAOA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAEA,IAAMO,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7B,IAAMC,KAAK,GAAG;EACVC,EAAE,EAAE,CAAC;EACLC,IAAI,EAAE,eAAe;EACrBC,GAAG,EAAE,iCAAiC;EACtCC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC;AAEDV,KAAK,CAACW,GAAG,CACL,qBAAqB,EACrB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACItB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAqB,KAAK,qBACFzB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAsB,WAAW,QAAEC,eAAoB,CAAC,eACnC3B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAwB,YAAY,qBACT5B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAyB,mBAAmB,qBAChB7B,MAAA,CAAAuB,OAAA,CAAAC,aAAA;IAAKM,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAC1B/B,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACjB,KAAA,CAAAyB,IAAI;IAACC,IAAI,EAAE;MAAEnB,KAAK,EAALA;IAAM;EAAE,GACjB,UAAAoB,IAAA;IAAA,IAAGC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAA,oBACJnC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACW,IAAI;MAACnB,IAAI,EAAC;IAAO,gBACdhB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAAChB,kBAAA,CAAA4B,iBAAiB;MACdC,KAAK,EAAC,iCAAiC;MACvChB,QAAQ,EAAEA,QAAS;MACnBiB,WAAW,EAAC;IAAiC,CAChD,CACC,CAAC;EAAA,CAET,CACL,CACY,CAAC,eACtBtC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,MAAA,CAAAmC,gBAAgB,iDAAAC,MAAA,CAECC,IAAI,CAACC,SAAS,CAAC;IAAE5B,KAAK,EAAEA;EAAM,CAAC,CAAC,kkBAYhC,CACR,CACX,CAAC;AAEhB,CAAC,EACD;EAAE6B,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACR,oCAAiB;EAAE;AAAE,CAChD,CAAC"}

package/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { default as ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}
+{"version":3,"names":["_SingleImageUpload","require","_MultiImageUpload","_Image","_interopRequireDefault","_ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { default as ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAD,sBAAA,CAAAH,OAAA"}

package/ImageUpload/styled.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.RemoveImage = exports.ImagePreviewWrapper = exports.EditImage = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled2 = _interopRequireDefault(require("@emotion/styled"));
-var _hover, _styled;
+var _hover, _styled; // TODO remove
+// @ts-nocheck
 var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq0",
   label: "AddImageIconWrapper"

package/ImageUpload/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}
+{"version":3,"names":["_styled2","_interopRequireDefault","require","_hover","_styled","AddImageIconWrapper","styled","target","label","color","width","height","maxWidth","maxHeight","display","opacity","margin","exports","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","_defineProperty2","default","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}

package/Input/Input.d.ts

@@ -16,5 +16,6 @@ export declare type InputProps<TValue = any> = FormComponentProps<TValue> & Text
     onEnter?: () => any;
     className?: string;
     "data-testid"?: string;
+    size?: "small" | "medium" | "large";
 };
 export declare const Input: React.FC<InputProps>;

package/Input/Input.js

@@ -13,21 +13,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _textfield = require("@rmwc/textfield");
 var _FormElementMessage = require("../FormElementMessage");
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _emotion = require("emotion");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
-/**
- * fix label position when autofilled
- * @type {string}
- */
-var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
-
+var _styled = require("./styled");
+var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter", "size"];
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
- */
-
-// IconProps directly passed to RMWC
+ */ // IconProps directly passed to RMWC
 var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
 var Input = function Input(props) {
   var onChange = (0, _react.useCallback)(function (e) {
@@ -78,6 +70,7 @@ var Input = function Input(props) {
     icon = props.icon,
     trailingIcon = props.trailingIcon,
     onEnter = props.onEnter,
+    size = props.size,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var inputValue = value;
   if (value === null || typeof value === "undefined") {
@@ -106,7 +99,7 @@ var Input = function Input(props) {
     placeholder: !label && placeholder || undefined,
     trailingIcon: trailingIcon,
     rows: rows,
-    className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
+    className: (0, _classnames.default)("webiny-ui-input", _styled.webinyInputStyles, props.size ? "webiny-ui-input--size-".concat(size) : null),
     "data-testid": props["data-testid"]
   })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true