@weareconceptstudio/form 0.0.2 → 0.0.4

package/dist/styles/theme.js

@@ -0,0 +1,113 @@
+export default (props) => ({
+    ...props,
+    form: {
+        colors: {
+            //! Box Shadow
+            boxShadowColor: '#D9DED8',
+            //! Empty Text Color
+            emptyTextColor: '#8C9B8B',
+            //! Message colors
+            successMessageColor: '#4CAF50',
+            successMessageBorderColor: '#4CAF50',
+            successMessageBgColor: 'rgba(76, 175, 80, 0.1)',
+            errorMessageColor: '#DE554E',
+            errorMessageBorderColor: '#DE554E',
+            errorMessageBgColor: 'rgba(222, 85, 78, 0.1)',
+            //! Label
+            labelColor: '#3E583C',
+            labelHoverColor: '',
+            labelFocusColor: '',
+            labelActiveColor: '',
+            labelErrorColor: '#DE554E',
+            labelDisabledColor: '#B2BDB1',
+            //! Input
+            inputColor: '#3E583C',
+            inputHoverColor: '',
+            inputFocusColor: '#3E583C',
+            inputActiveColor: '',
+            inputErrorColor: '#DE554E',
+            inputDisabledColor: '#B2BDB1',
+            inputPlaceholderColor: '#B2BDB1',
+            inputPlaceholderHoverColor: '',
+            inputPlaceholderFocusColor: '#3E583C',
+            inputPlaceholderActiveColor: '',
+            inputPlaceholderErrorColor: '#DE554E',
+            inputPlaceholderDisabledColor: '',
+            inputBorderColor: '#B2BDB1',
+            inputBorderHoverColor: '',
+            inputBorderFocusColor: '',
+            inputBorderActiveColor: '',
+            inputBorderErrorColor: '#DE554E',
+            inputBorderDisabledColor: '#F5F6F5',
+            inputBgColor: '#FFFFFB',
+            inputHoverBgColor: '',
+            inputFocusBgColor: '',
+            inputActiveBgColor: '',
+            inputErrorBgColor: 'rgb(250, 243, 240)',
+            inputDisabledBgColor: '#F5F6F5',
+            //! Select
+            selectColor: '#3E583C',
+            selectHoverColor: '',
+            selectFocusColor: '#3E583C',
+            selectActiveColor: '',
+            selectErrorColor: '#DE554E',
+            selectDisabledColor: '',
+            selectPlaceholderColor: '#B2BDB1',
+            selectPlaceholderHoverColor: '',
+            selectPlaceholderFocusColor: '#3E583C',
+            selectPlaceholderActiveColor: '',
+            selectPlaceholderErrorColor: '#DE554E',
+            selectPlaceholderDisabledColor: '',
+            selectBorderColor: '#B2BDB1',
+            selectBorderHoverColor: '#B2BDB1',
+            selectBorderFocusColor: '#3E583C',
+            selectBorderActiveColor: '',
+            selectBorderErrorColor: '#DE554E',
+            selectBorderDisabledColor: '#F5F6F5',
+            selectBgColor: '#FFFFFB',
+            selectHoverBgColor: '',
+            selectFocusBgColor: '',
+            selectActiveBgColor: '',
+            selectErrorBgColor: 'rgb(250, 243, 240)',
+            selectDisabledBgColor: '#F5F6F5',
+            selectOptionColor: '#657A64',
+            selectOptionHoverColor: '',
+            selectOptionFocusColor: '',
+            selectOptionActiveColor: '#3E583C',
+            selectOptionErrorColor: '#DE554E',
+            selectOptionDisabledColor: '',
+            selectOptionBgColor: '#FFFFFB',
+            selectOptionHoverBgColor: '',
+            selectOptionFocusBgColor: '#ECEFEC',
+            selectOptionActiveBgColor: '',
+            selectOptionErrorBgColor: 'rgb(250, 243, 240)',
+            selectOptionDisabledBgColor: '',
+            //! Radio
+            radioBorderColor: '#B2BDB1',
+            radioBorderActiveColor: '#3E583C',
+            radioBgColor: '#FFFFFB',
+            radioActiveBgColor: '#3E583C',
+            //! Upload
+            uploadBgColor: 'rgba(0, 0, 0, 0.02)',
+            uploadBorderColor: '#d9d9d9',
+            ...props.form?.colors,
+        },
+        mediaQuery: {
+            form_DesktopSizeXL: '2560px',
+            form_DesktopSizeL: '1920px',
+            form_DesktopSizeM: '1510px',
+            form_DesktopSizeS: '1440px',
+            form_DesktopSizeXS: '1280px',
+            form_TabletSize: '1024px',
+            form_TabletSizeS: '768px',
+            form_DesktopSizeXLMin: '2559px',
+            form_DesktopSizeLMin: '1919px',
+            form_DesktopSizeMMin: '1509px',
+            form_DesktopSizeSMin: '1439px',
+            form_DesktopSizeXSMin: '1279px',
+            form_TabletSizeMin: '1023px',
+            form_TabletSizeSMin: '767px',
+            ...props.form?.mediaQuery,
+        },
+    },
+});

package/dist/styles/variables.d.ts

@@ -0,0 +1,2 @@
+export default FormVariables;
+declare const FormVariables: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/dist/styles/variables.js

@@ -0,0 +1,246 @@
+import { createGlobalStyle, css } from 'styled-components';
+const FormVariables = createGlobalStyle `${css `
+	:root {
+		//! Fonts
+		--form_Font: ${(props) => `var(--${props.fontFamily})` || `var(--core_Font)`};
+
+		//! Transition
+		--form_trTime: 0.2s;
+
+		//! Line Height
+		--form_lineHeight: 1.5;
+
+		//! Box Shadow
+		--form_boxShadowColor: ${(props) => props.theme.form.colors.boxShadowColor};
+
+		//! Empty Text Color
+		--form_emptyTextColor: ${(props) => props.theme.form.colors.emptyTextColor};
+
+		//! Message colors
+		--form_errorMessageColor: ${(props) => props.theme.form.colors.errorMessageColor};
+		--form_errorMessageBorderColor: ${(props) => props.theme.form.colors.errorMessageBorderColor};
+		--form_errorMessageBgColor: ${(props) => props.theme.form.colors.errorMessageBgColor};
+		--form_successMessageColor: ${(props) => props.theme.form.colors.successMessageColor};
+		--form_successMessageBorderColor: ${(props) => props.theme.form.colors.successMessageBorderColor};
+		--form_successMessageBgColor: ${(props) => props.theme.form.colors.successMessageBgColor};
+
+		/* //! Label */
+		--form_labelColor: ${(props) => props.theme.form.colors.labelColor};
+		--form_labelHoverColor: ${(props) => props.theme.form.colors.labelHoverColor};
+		--form_labelFocusColor: ${(props) => props.theme.form.colors.labelFocusColor};
+		--form_labelActiveColor: ${(props) => props.theme.form.colors.labelActiveColor};
+		--form_labelErrorColor: ${(props) => props.theme.form.colors.labelErrorColor};
+		--form_labelDisabledColor: ${(props) => props.theme.form.colors.labelDisabledColor};
+
+		/* //! Input */
+		--form_inputColor: ${(props) => props.theme.form.colors.inputColor};
+		--form_inputHoverColor: ${(props) => props.theme.form.colors.inputHoverColor};
+		--form_inputFocusColor: ${(props) => props.theme.form.colors.inputFocusColor};
+		--form_inputActiveColor: ${(props) => props.theme.form.colors.inputActiveColor};
+		--form_inputErrorColor: ${(props) => props.theme.form.colors.inputErrorColor};
+		--form_inputDisabledColor: ${(props) => props.theme.form.colors.inputDisabledColor};
+
+		--form_inputPlaceholderColor: ${(props) => props.theme.form.colors.inputPlaceholderColor};
+		--form_inputPlaceholderHoverColor: ${(props) => props.theme.form.colors.inputPlaceholderHoverColor};
+		--form_inputPlaceholderFocusColor: ${(props) => props.theme.form.colors.inputPlaceholderFocusColor};
+		--form_inputPlaceholderActiveColor: ${(props) => props.theme.form.colors.inputPlaceholderActiveColor};
+		--form_inputPlaceholderErrorColor: ${(props) => props.theme.form.colors.inputPlaceholderErrorColor};
+		--form_inputPlaceholderDisabledColor: ${(props) => props.theme.form.colors.inputPlaceholderDisabledColor};
+
+		--form_inputBorderColor: ${(props) => props.theme.form.colors.inputBorderColor};
+		--form_inputBorderHoverColor: ${(props) => props.theme.form.colors.inputBorderHoverColor};
+		--form_inputBorderFocusColor: ${(props) => props.theme.form.colors.inputBorderFocusColor};
+		--form_inputBorderActiveColor: ${(props) => props.theme.form.colors.inputBorderActiveColor};
+		--form_inputBorderErrorColor: ${(props) => props.theme.form.colors.inputBorderErrorColor};
+		--form_inputBorderDisabledColor: ${(props) => props.theme.form.colors.inputBorderDisabledColor};
+
+		--form_inputBgColor: ${(props) => props.theme.form.colors.inputBgColor};
+		--form_inputHoverBgColor: ${(props) => props.theme.form.colors.inputHoverBgColor};
+		--form_inputFocusBgColor: ${(props) => props.theme.form.colors.inputFocusBgColor};
+		--form_inputActiveBgColor: ${(props) => props.theme.form.colors.inputActiveBgColor};
+		--form_inputErrorBgColor: ${(props) => props.theme.form.colors.inputErrorBgColor};
+		--form_inputDisabledBgColor: ${(props) => props.theme.form.colors.inputDisabledBgColor};
+
+		/* //! Select */
+		--form_selectColor: ${(props) => props.theme.form.colors.selectColor};
+		--form_selectHoverColor: ${(props) => props.theme.form.colors.selectHoverColor};
+		--form_selectFocusColor: ${(props) => props.theme.form.colors.selectFocusColor};
+		--form_selectActiveColor: ${(props) => props.theme.form.colors.selectActiveColor};
+		--form_selectErrorColor: ${(props) => props.theme.form.colors.selectErrorColor};
+		--form_selectDisabledColor: ${(props) => props.theme.form.colors.selectDisabledColor};
+
+		--form_selectPlaceholderColor: ${(props) => props.theme.form.colors.selectPlaceholderColor};
+		--form_selectPlaceholderHoverColor: ${(props) => props.theme.form.colors.selectPlaceholderHoverColor};
+		--form_selectPlaceholderFocusColor: ${(props) => props.theme.form.colors.selectPlaceholderFocusColor};
+		--form_selectPlaceholderActiveColor: ${(props) => props.theme.form.colors.selectPlaceholderActiveColor};
+		--form_selectPlaceholderErrorColor: ${(props) => props.theme.form.colors.selectPlaceholderErrorColor};
+		--form_selectPlaceholderDisabledColor: ${(props) => props.theme.form.colors.selectPlaceholderDisabledColor};
+
+		--form_selectBorderColor: ${(props) => props.theme.form.colors.selectBorderColor};
+		--form_selectBorderHoverColor: ${(props) => props.theme.form.colors.selectBorderHoverColor};
+		--form_selectBorderFocusColor: ${(props) => props.theme.form.colors.selectBorderFocusColor};
+		--form_selectBorderActiveColor: ${(props) => props.theme.form.colors.selectBorderActiveColor};
+		--form_selectBorderErrorColor: ${(props) => props.theme.form.colors.selectBorderErrorColor};
+		--form_selectBorderDisabledColor: ${(props) => props.theme.form.colors.selectBorderDisabledColor};
+
+		--form_selectBgColor: ${(props) => props.theme.form.colors.selectBgColor};
+		--form_selectHoverBgColor: ${(props) => props.theme.form.colors.selectHoverBgColor};
+		--form_selectFocusBgColor: ${(props) => props.theme.form.colors.selectFocusBgColor};
+		--form_selectActiveBgColor: ${(props) => props.theme.form.colors.selectActiveBgColor};
+		--form_selectErrorBgColor: ${(props) => props.theme.form.colors.selectErrorBgColor};
+		--form_selectDisabledBgColor: ${(props) => props.theme.form.colors.selectDisabledBgColor};
+
+		--form_selectOptionColor: ${(props) => props.theme.form.colors.selectOptionColor};
+		--form_selectOptionHoverColor: ${(props) => props.theme.form.colors.selectOptionHoverColor};
+		--form_selectOptionFocusColor: ${(props) => props.theme.form.colors.selectOptionFocusColor};
+		--form_selectOptionActiveColor: ${(props) => props.theme.form.colors.selectOptionActiveColor};
+		--form_selectOptionErrorColor: ${(props) => props.theme.form.colors.selectOptionErrorColor};
+		--form_selectOptionDisabledColor: ${(props) => props.theme.form.colors.selectOptionDisabledColor};
+
+		--form_selectOptionBgColor: ${(props) => props.theme.form.colors.selectOptionBgColor};
+		--form_selectOptionHoverBgColor: ${(props) => props.theme.form.colors.selectOptionHoverBgColor};
+		--form_selectOptionFocusBgColor: ${(props) => props.theme.form.colors.selectOptionFocusBgColor};
+		--form_selectOptionActiveBgColor: ${(props) => props.theme.form.colors.selectOptionActiveBgColor};
+		--form_selectOptionErrorBgColor: ${(props) => props.theme.form.colors.selectOptionErrorBgColor};
+		--form_selectOptionDisabledBgColor: ${(props) => props.theme.form.colors.selectOptionDisabledBgColor};
+
+		/* //! Radio */
+		--form_radioBorderColor: ${(props) => props.theme.form.colors.radioBorderColor};
+		--form_radioBorderActiveColor: ${(props) => props.theme.form.colors.radioBorderActiveColor};
+		--form_radioBgColor: ${(props) => props.theme.form.colors.radioBgColor};
+		--form_radioActiveBgColor: ${(props) => props.theme.form.colors.radioActiveBgColor};
+
+		/* //! Upload */
+		--form_uploadBgColor: ${(props) => props.theme.form.colors.uploadBgColor};
+		--form_uploadBorderColor: ${(props) => props.theme.form.colors.uploadBorderColor};
+	}
+
+	/* //! 2560 */
+	@media only screen and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXL}) {
+		:root {
+			--form_p1: 32px;
+			--form_p2: 24px;
+			--form_p3: 20px;
+			--form_p4: 18px;
+			--form_p5: 12px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp4x);
+			--form_errorItemMTop: var(--sp1-5x);
+			--form_globalErrorWrapMarTB: var(--sp7x);
+		}
+	}
+
+	/* //! 2559 - 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeL}) {
+		:root {
+			--form_p1: 24px;
+			--form_p2: 20px;
+			--form_p3: 16px;
+			--form_p4: 16px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp3x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp5x);
+		}
+	}
+
+	/* //! 1919 - 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeM}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 18px;
+			--form_p3: 16px;
+			--form_p4: 14px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2-5x);
+			--form_errorItemMTop: var(--sp1-5x);
+			--form_globalErrorWrapMarTB: var(--sp4x);
+		}
+	}
+
+	/* //! 1509 - 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeS}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 18px;
+			--form_p3: 16px;
+			--form_p4: 14px;
+			--form_p5: 10px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp0-5x);
+			--form_globalErrorWrapMarTB: var(--sp4x);
+		}
+	}
+
+	/* //! 1439 - 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXS}) {
+		:root {
+			--form_p1: 20px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 1279 - 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSize}) {
+		:root {
+			--form_p1: 18px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 1023 - 768 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeMin}) and (min-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeS}) {
+		:root {
+			--form_p1: 18px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+
+	/* //! 767 */
+	@media only screen and (max-width: ${(props) => props.theme.form.mediaQuery.form_TabletSizeSMin}) {
+		:root {
+			--form_p1: 16px;
+			--form_p2: 16px;
+			--form_p3: 16px;
+			--form_p4: 12px;
+			--form_p5: 8px;
+
+			//! Global error sizes
+			--form_globalErrorPad: var(--sp2x);
+			--form_errorItemMTop: var(--sp1x);
+			--form_globalErrorWrapMarTB: var(--sp3x);
+		}
+	}
+`}`;
+export default FormVariables;

package/dist/translations/en.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    serverError: string;
+    globalError: string;
+    validateMessages: {
+        default: string;
+        required: string;
+        enum: string;
+        whitespace: string;
+        date: {
+            format: string;
+            parse: string;
+            invalid: string;
+        };
+        types: {
+            string: string;
+            method: string;
+            array: string;
+            object: string;
+            number: string;
+            date: string;
+            boolean: string;
+            integer: string;
+            float: string;
+            regexp: string;
+            email: string;
+            url: string;
+            hex: string;
+        };
+        string: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        number: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        array: {
+            len: string;
+            min: string;
+            max: string;
+            range: string;
+        };
+        pattern: {
+            mismatch: string;
+        };
+    };
+};
+export default _default;

package/dist/translations/en.js

@@ -0,0 +1,52 @@
+const typeTemplate = '{errorKey} is not a valid {type}';
+export default {
+    serverError: 'Ups! there is something wrong with the website administration.',
+    globalError: 'Please double-check the required fields and confirm again.',
+    validateMessages: {
+        default: 'Validation error on field {errorKey}',
+        required: 'Please enter your {errorKey}',
+        enum: '{errorKey} must be one of [{enum}]',
+        whitespace: '{errorKey} cannot be empty',
+        date: {
+            format: '{errorKey} is invalid for format date',
+            parse: '{errorKey} could not be parsed as date',
+            invalid: '{errorKey} is invalid date',
+        },
+        types: {
+            string: typeTemplate,
+            method: typeTemplate,
+            array: typeTemplate,
+            object: typeTemplate,
+            number: typeTemplate,
+            date: typeTemplate,
+            boolean: typeTemplate,
+            integer: typeTemplate,
+            float: typeTemplate,
+            regexp: typeTemplate,
+            email: typeTemplate,
+            url: typeTemplate,
+            hex: typeTemplate,
+        },
+        string: {
+            len: '{errorKey} must be exactly {len} characters',
+            min: '{errorKey} must be at least {min} characters',
+            max: '{errorKey} cannot be longer than ${max} characters',
+            range: '{errorKey} must be between {min} and {max} characters',
+        },
+        number: {
+            len: '{errorKey} must equal {len}',
+            min: '{errorKey} cannot be less than {min}',
+            max: '{errorKey} cannot be greater than {max}',
+            range: '{errorKey} must be between {min} and {max}',
+        },
+        array: {
+            len: '{errorKey} must be exactly {len} in length',
+            min: '{errorKey} cannot be less than {min} in length',
+            max: '{errorKey} cannot be greater than {max} in length',
+            range: '{errorKey} must be between {min} and {max} in length',
+        },
+        pattern: {
+            mismatch: '{errorKey} does not match pattern {pattern}',
+        },
+    },
+};

package/dist/translations/index.d.ts

@@ -0,0 +1,54 @@
+declare const _default: {
+    en: {
+        serverError: string;
+        globalError: string;
+        validateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+};
+export default _default;

package/dist/translations/index.js

@@ -0,0 +1,2 @@
+import en from './en';
+export default { en };

package/dist/upload/UploadButton/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadButton;
+declare function UploadButton(props: any): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadButton/index.js

@@ -0,0 +1,41 @@
+import React, { useRef } from 'react';
+import { rawFileToAsset } from '../utils';
+import UploadButtonStyle from './style';
+const UploadButton = (props) => {
+    const { accept, disabled, multiple, setFileList } = props;
+    const inputRef = useRef();
+    const handleFiles = async (files) => {
+        const newFiles = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            const newFile = await rawFileToAsset({ rawFile: file });
+            newFiles.push(newFile);
+        }
+        setFileList(newFiles);
+    };
+    const onChange = () => {
+        handleFiles(inputRef.current.files);
+    };
+    const clickHandler = () => {
+        inputRef.current.click();
+    };
+    const dragOverHandler = (e) => {
+        e.preventDefault();
+    };
+    const onDragEnter = (e) => {
+        e.preventDefault();
+    };
+    const dropHandler = (e) => {
+        e.preventDefault();
+        if (e?.dataTransfer?.files) {
+            handleFiles(e.dataTransfer.files);
+        }
+    };
+    return (React.createElement(UploadButtonStyle, { className: 'upload-wrapper', onDrop: dropHandler, onDragOver: dragOverHandler, onDragEnter: onDragEnter, onClick: clickHandler },
+        React.createElement("span", { className: 'upload' },
+            React.createElement("input", { style: { display: 'none' }, ref: inputRef, type: 'file', accept: accept, disabled: disabled, multiple: multiple, onClick: (e) => e.stopPropagation(), onChange: onChange }),
+            React.createElement("button", { type: 'button' },
+                React.createElement("span", null, "x"),
+                React.createElement("div", null, "Upload")))));
+};
+export default UploadButton;

package/dist/upload/UploadButton/style.d.ts

@@ -0,0 +1,2 @@
+export default UploadButtonStyle;
+declare const UploadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/upload/UploadButton/style.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+const UploadButtonStyle = styled.div `
+	width: 100px;
+	height: 100px;
+	text-align: center;
+	background-color: var(--form_uploadBgColor);
+	border: 1px dashed var(--form_uploadBorderColor);
+	border-radius: 8px;
+	cursor: pointer;
+
+	.upload {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		text-align: center;
+	}
+
+	button {
+		border: 0px;
+		background: none;
+	}
+`;
+export default UploadButtonStyle;

package/dist/upload/UploadList/ListItem/index.d.ts

@@ -0,0 +1,5 @@
+export default ListItem;
+declare function ListItem({ item }: {
+    item: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadList/ListItem/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Image } from '@weareconceptstudio/core';
+const ListItem = ({ item }) => {
+    let element;
+    const isImageFileType = (type) => type.indexOf('image/') === 0;
+    if (isImageFileType(item.mime_type)) {
+        element = React.createElement(Image, { src: item.url });
+    }
+    return React.createElement("span", { className: 'list-item-container' }, element);
+};
+export default ListItem;

package/dist/upload/UploadList/index.d.ts

@@ -0,0 +1,3 @@
+export default UploadList;
+declare function UploadList(props: any): React.JSX.Element;
+import React from 'react';

package/dist/upload/UploadList/index.js

@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+import ListItem from './ListItem';
+import UploadListItemStyle from './style';
+const UploadList = (props) => {
+    const { items } = props;
+    const renderItems = useMemo(() => {
+        return items.map((item, index) => (React.createElement(ListItem, { key: index, item: item })));
+    }, [items]);
+    return React.createElement(UploadListItemStyle, null, renderItems);
+};
+export default UploadList;

package/dist/upload/UploadList/style.d.ts

@@ -0,0 +1,2 @@
+export default UploadListItemStyle;
+declare const UploadListItemStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/upload/UploadList/style.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+const UploadListItemStyle = styled.div `
+	.list-item-container {
+		display: inline-block;
+		width: 100px;
+		height: 100px;
+
+		.image-cont {
+			padding-top: 100%;
+		}
+	}
+`;
+export default UploadListItemStyle;

package/dist/upload/index.d.ts

@@ -1,3 +1,6 @@
 export default Upload;
-declare const Upload: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import * as React from "react";
+declare function Upload(props: any): React.JSX.Element;
+declare namespace Upload {
+    let displayName: string;
+}
+import React from 'react';