@xaypay/tui 0.0.70 → 0.0.72

package/src/components/newFile/newFile.stories.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { NewFile } from './index';
+
+export default {
+  component: NewFile,
+  title: 'Components/NewFile',
+  argTypes: {
+    change: {
+      control: 'function'
+    }
+  }
+};
+
+const Template = (args) => {
+  const [files, setFiles] = useState([]);
+
+  const handleChange = (file) => {
+    setFiles(prev => {
+      return [
+        ...prev,
+        file
+      ]
+    });
+  };
+
+  const handleRemove = (id) => {
+    setFiles(prevItems => prevItems.filter(item => item.uuid !== id));
+  };
+
+  return <NewFile change={handleChange} filesArray={files} removeFile={handleRemove} {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'File component',
+  deleteComponent: true,
+  disabled: false,
+  defaultData: {
+    url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
+    type: 'image/png',
+  },
+  multiple: true,
+  name: 'sss'
+};

package/src/components/pagination/index.js

@@ -6,7 +6,7 @@ import { PaginationRange, Dots } from "./paginationRange";
 import Icon from "../icon/Icon";
 
 import DotsIcon from './../../components/icon/Dots';
-import SvgNextArrow from './../../components/icon/NextArrow';
+import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
     onChange,
@@ -78,7 +78,7 @@ export const Pagination = ({
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
             >
-                <SvgNextArrow />
+                <SvgNextarrow />
             </button>
 
             {paginationRange.map((pageNumber, id) => {
@@ -115,7 +115,7 @@ export const Pagination = ({
                                             transform: 'rotate(180deg)'
                                         }}
                                     >
-                                        <SvgNextArrow />
+                                        <SvgNextarrow />
                                     </span>
                                 </>
                             ) : (
@@ -132,7 +132,7 @@ export const Pagination = ({
                                             `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
                                     >
-                                        <SvgNextArrow />
+                                        <SvgNextarrow />
                                     </span>
                                 </>
                             )}
@@ -162,7 +162,7 @@ export const Pagination = ({
                 className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
             >
-                <SvgNextArrow />
+                <SvgNextarrow />
             </button>
         </ul>
     );

package/src/components/textarea/index.js

@@ -24,18 +24,24 @@ export const Textarea = ({
     boxSizing,
     maxLength,
     labelSize,
+    errorSize,
     labelColor,
+    errorColor,
     borderColor,
     labelWeight,
     placeholder,
     labelDisplay,
+    errorMesaage,
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
+    showCharacterCount,
     labelRequiredColor
 }) => {
+    const [error, setError] = useState('');
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
 
     const configStyles = compereConfigs();
 
@@ -55,6 +61,26 @@ export const Textarea = ({
         setIsFocus(false);
     };
 
+    const handleChange = (e) => {
+        const value = e.target.value;
+        onChange(value);
+        if (maxLength) {
+            if (value.length > maxLength) {
+                onChange(value.substr(0, maxLength));
+                setError('Նիշերի քանակը գերազանցում է');
+            } else {
+                setError('');
+            }
+        } else {
+            if (value.length > configStyles.TEXTAREA.maxLength) {
+                setError('Նիշերի քանակը գերազանցում է');
+                onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+            } else {
+                setError('');
+            }
+        }
+    };
+
     useEffect(() => {
         if (value === undefined) {
             alert('Please add value prop on Textarea component');
@@ -63,34 +89,65 @@ export const Textarea = ({
         if (!onChange) {
             alert('Please add onChange function on Textarea component');
         }
+
+        setInnerValue(value);
     }, [value, onChange]);
 
+    useEffect(() => {
+        if (errorMesaage) {
+            setError(errorMesaage);
+        } else {
+            setError('');
+        }
+    }, [errorMesaage]);
+
     return (
-        <>
-            {
-                label
-                ? <label
-                    style={{
-                        color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-                        fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-                        display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
-                        fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
-                    }}
-                  >
-                    {label}
-                    {
-                        required &&
-                        <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
-                    }
-                  </label>
-                : ''
-            }
+        <div
+            style={{
+                width: width ? width : configStyles.TEXTAREA.width,
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: label ? 'space-between' : 'flex-end'
+                }}
+            >
+                {
+                    label
+                    ? <label
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                            display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
+                            fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                        }}
+                    >
+                        {label}
+                        {
+                            required &&
+                            <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
+                        }
+                    </label>
+                    : ''
+                }
+
+                {
+                    showCharacterCount && maxLength && <span
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        }}
+                    >{ maxLength - value.length } նիշ</span>
+                }
+            </div>
             <textarea
                 style={{
+                    width: '100%',
                     outline: 'none',
                     overflow: 'auto',
                     fontSize: size ? size : configStyles.TEXTAREA.size,
-                    width: width ? width : configStyles.TEXTAREA.width,
                     height: height ? height : configStyles.TEXTAREA.height,
                     border: border ? border : configStyles.TEXTAREA.border,
                     padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -101,24 +158,31 @@ export const Textarea = ({
                     maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
                     boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
                     backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                    borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor :
+                                 isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
                                  isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
                                  borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
                 }}
+                value={innerValue}
                 onBlur={handleBlur}
-                onChange={onChange}
                 onFocus={handleFocus}
+                onChange={handleChange}
                 placeholder={placeholder}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                value={
-                    maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value :
-                    configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value :
-                    value
-                }
             ></textarea>
-        </>
+            {
+                error ? <span
+                    style={{
+                        marginTop: '6px',
+                        display: 'inline-block',
+                        fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+                        color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                    }}
+                >{ error }</span> : ''
+            }
+        </div>
     );
 };
 
@@ -145,6 +209,7 @@ Textarea.propTypes = {
     placeholder: PropTypes.string,
     labelDisplay: PropTypes.string,
     backgroundColor: PropTypes.string,
+    showCharacterCount: PropTypes.bool,
     value: PropTypes.string.isRequired,
     borderFocusColor: PropTypes.string,
     borderHoverColor: PropTypes.string,

package/src/components/textarea/textarea.stories.js

@@ -9,8 +9,8 @@ export default {
 const Template = (args) => {
     const [val, setVal] = useState('');
 
-    const handleChangeValue = (e) => {
-        setVal(e.target.value);
+    const handleChangeValue = (value) => {
+        setVal(value);
     }
 
     return (
@@ -25,7 +25,6 @@ Default.args = {
     size: '16px',
     radius: '6px',
     width: '400px',
-    noResize: false,
     height: '134px',
     maxLength: 1500,
     color: '#3C393E',
@@ -43,6 +42,7 @@ Default.args = {
     borderColor: '#D1D1D1',
     boxSizing: 'border-box',
     backgroundColor: 'white',
+    showCharacterCount: true,                             // for showing textarea character count
     borderHoverColor: '#3C393E',
     borderFocusColor: '#00236A',
     labelRequiredColor: '#ee0000',

package/src/components/toaster/Toast.js

@@ -126,12 +126,12 @@ export const Toast = ({
       >
         <p
           style={{
+            margin: '0px',
             fontWeight: 600,
             color: '#3C393E',
             fontSize: '16px',
             lineHeight: '22px',
             fontStyle: 'normal',
-            fontFamily: ''
           }}
         >
           {title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''}

package/src/components/tooltip/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
 
-import ReactInfoIcon from './../../assets/icons/tooltip.svg';
+import ReactInfoIcon from './../icon/Tooltip';
 
 import styles from "./tooltip.module.css";
 
@@ -95,7 +95,7 @@ export const Tooltip = ({
             }
             
             <div style={{cursor: 'pointer'}} onClick={handleShow}>
-                {tooltipIcon ? tooltipIcon : <img src={ReactInfoIcon} />}
+                {tooltipIcon ? tooltipIcon : <ReactInfoIcon />}
             </div>
         </div>
     );

package/src/index.js

@@ -9,6 +9,7 @@ export * from './components/toaster';
 export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
+export * from './components/newFile';
 export * from './components/checkbox';
 export * from './components/textarea';
 export * from './components/icon/Icon';

package/src/stories/configuration.stories.mdx

@@ -431,6 +431,7 @@ import StackAlt from './assets/stackalt.svg';
   borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
   borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
   labelRequiredColor: '#ee0000',                        // for label required mark color
+  showCharacterCount: true,                             // for showing textarea character count ( set itself without configuration file)
 }
 ```
 
@@ -518,4 +519,46 @@ import StackAlt from './assets/stackalt.svg';
   range: 'for example. 72',                             // for captcha range                 (add itself on each component)
   getRange: 'is must be function',                      // for captcha get current range     (add itself on each component)
 }
+```
+
+### NewFile
+``` 
+{
+  or: 'կամ',                                            // for file place text
+  weight: 400,                                          // for file place font weight
+  size: '12px',                                         // for file font size
+  radius: '6px',                                        // for file place border radius
+  width: '440px',                                       // for file width
+  height: '200px',                                      // for file choose place height
+  color: '#3C393E',                                     // for file place color
+  upload: 'Բեռնել',                                     // for file place text
+  labelSize: '16px',                                    // for file font size
+  border: '2px dashed',                                 // for file choose place border
+  errorColor: '#ee0000',                                // for file error message color
+  labelColor: '#4A4A4D',                                // for file color
+  errorColor: '#ee0000',                                // for file place error color
+  borderColor: '#D1D1D1',                               // for file choose place border color
+  listItemHeight: '70px',                               // for file list item height
+  uploadColor: '#0DA574',                               // for file place upload text color
+  progressColor: '#4A4A4D',                             // for file progress bar color
+  progressFontSize: '16px',                             // for file progress bar font size
+  listItemErrorSize: '16px',                            // for file multiple mode error font size
+  backgroundColor: '#F8F8F8',                           // for file choose place background color
+  listItemErrorColor: 'black',                          // for file multiple mode error color
+  borderHoverColor: '#00236A',                          // for file border color, when hover is happening
+  fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
+  listItemPadding: '14px 20px',                         // for file list item padding
+  fileSizeText: 'Առավելագույնը',                        // for file place file size text
+  fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
+  labelRequiredColor: '#ee0000',                        // for file label required color
+  progressTrackColor: '#E5E8E8',                        // for file item progress track background color
+  extentionsRowMarginTop: '40px',                       // for file extentions row margin top
+  progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
+  progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
+  progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+  listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+  putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
+  hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+  listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
+}
 ```

package/src/stories/usage.stories.mdx

@@ -8,14 +8,17 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
+import fileImage from './static/file-usage.png';
 import captcha from './static/captcha-usage.png';
+import inputImage from './static/input-usage.png';
 import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import toastImage from './static/toaster-usage.png';
+import tooltipImage from './static/tooltip-usage.png';
 import textareaImage from './static/textarea-usage.png';
+import fileSingleImage from './static/file-single-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
-import inputTooltipImage from './static/input-tooltip-usage.png';
-import newAutocompleteImage from './static/new-autocomplete-usage.png';
+import autocompleteImage from './static/autocomplete-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -130,15 +133,15 @@ import newAutocompleteImage from './static/new-autocomplete-usage.png';
 # Usage
 
 ### Button
-
 <img src={buttonImage} alt="button image" />
 
-### Input / Tooltip
+### Input
+<img src={inputImage} alt="input image" />
 
-<img src={inputTooltipImage} alt="input tooltip image" />
+### Tooltip
+<img src={tooltipImage} alt="tooltip image" />
 
 ### Select
-
 <img src={selectImage} alt="select image" />
 
 ### Toaster
@@ -153,7 +156,13 @@ import newAutocompleteImage from './static/new-autocomplete-usage.png';
 <img src={textareaImage} alt="textarea image" />
 
 ### NewAutocomplete
-<img src={newAutocompleteImage} alt="autocomplete image" />
+<img src={autocompleteImage} alt="autocomplete image" />
 
 ### Captcha
-<img src={captcha} alt="captcha image" />
+<img src={captcha} alt="captcha image" />
+
+### NewFile in Multiple Mode
+<img src={fileImage} alt="file image" />
+
+### NewFile in Single Mode
+<img src={fileSingleImage} alt="file image" />

package/tui.config.js

@@ -238,10 +238,12 @@ module.exports = {
         minWidth: '200px',                                    // for minimum width
         maxWidth: '500px',                                    // for maximum width
         labelSize: '16px',                                    // for label font size
+        errorSize: '12px',                                    // for error font size
         minHeight: '100px',                                   // for minimum height
         maxHeight: '300px',                                   // for maximum height
         border: '2px solid',                                  // for border
         padding: '12px 15px',                                 // for padding
+        errorColor: '#E40E00',                                // for error color
         labelColor: '#3C393E',                                // for label color
         labelWeight: 'normal',                                // for label font weight
         labelDisplay: 'block',                                // for label display
@@ -326,5 +328,44 @@ module.exports = {
     Captcha: {
         size: '16px',                                         // for captcha label font size
         color: '#3C393E'                                      // for captcha label color
+    },
+    // default properties for <File /> component
+    File: {
+        or: 'կամ',                                            // for file place text
+        weight: 400,                                          // for file place font weight
+        size: '12px',                                         // for file font size
+        radius: '6px',                                        // for file place border radius
+        width: '440px',                                       // for file width
+        height: '200px',                                      // for file choose place height
+        color: '#3C393E',                                     // for file place color
+        upload: 'Բեռնել',                                     // for file place text
+        labelSize: '16px',                                    // for file font size
+        border: '2px dashed',                                 // for file choose place border
+        errorColor: '#ee0000',                                // for file error message color
+        labelColor: '#4A4A4D',                                // for file color
+        errorColor: '#ee0000',                                // for file place error color
+        borderColor: '#D1D1D1',                               // for file choose place border color
+        listItemHeight: '70px',                               // for file list item height
+        uploadColor: '#0DA574',                               // for file place upload text color
+        progressColor: '#4A4A4D',                             // for file progress bar color
+        progressFontSize: '16px',                             // for file progress bar font size
+        listItemErrorSize: '16px',                            // for file multiple mode error font size
+        backgroundColor: '#F8F8F8',                           // for file choose place background color
+        listItemErrorColor: 'black',                          // for file multiple mode error color
+        borderHoverColor: '#00236A',                          // for file border color, when hover is happening
+        fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
+        listItemPadding: '14px 20px',                         // for file list item padding
+        fileSizeText: 'Առավելագույնը',                        // for file place file size text
+        fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
+        labelRequiredColor: '#ee0000',                        // for file label required color
+        progressTrackColor: '#E5E8E8',                        // for file item progress track background color
+        extentionsRowMarginTop: '40px',                       // for file extentions row margin top
+        progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
+        progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
+        progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+        listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+        putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
+        hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+        listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
     }
 };

package/src/assets/icons/arrow.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z" fill="#3C393E"/>
-</svg>

package/src/assets/icons/checkbox-checked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z" fill="#00236A"/>
-</svg>

package/src/assets/icons/checkbox-unchecked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z" fill="#D1D1D1"/>
-</svg>

package/src/assets/icons/close-icon.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z" fill="#3C393E"/>
-</svg>

package/src/assets/icons/dots.svg

@@ -1,3 +0,0 @@
-<svg width="11" height="3" viewBox="0 0 11 3" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z" fill="#3C393E"/>
-</svg>

package/src/assets/icons/nextarrow.svg

@@ -1,3 +0,0 @@
-<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z" fill="#3C393E"/>
-</svg>

package/src/assets/icons/toaster-close.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.4695 8.95046L17.7595 1.66046C17.9234 1.46916 18.009 1.22308 17.9993 0.971403C17.9895 0.719727 17.8852 0.480988 17.7071 0.302894C17.529 0.124799 17.2903 0.0204662 17.0386 0.0107451C16.7869 0.00102391 16.5408 0.0866304 16.3495 0.250457L9.05954 7.54046L1.76954 0.240457C1.57824 0.0766302 1.33217 -0.00897537 1.08049 0.000745785C0.828814 0.0104669 0.590075 0.114799 0.411981 0.292893C0.233886 0.470988 0.129554 0.709727 0.119832 0.961403C0.110111 1.21308 0.195718 1.45915 0.359544 1.65046L7.64954 8.95046L0.349544 16.2405C0.244862 16.3301 0.159842 16.4404 0.0998186 16.5645C0.0397953 16.6886 0.00606467 16.8237 0.000745179 16.9614C-0.00457431 17.0991 0.0186316 17.2365 0.0689062 17.3648C0.119181 17.4931 0.195439 17.6097 0.292894 17.7071C0.390349 17.8046 0.506896 17.8808 0.635221 17.9311C0.763546 17.9814 0.900878 18.0046 1.0386 17.9993C1.17632 17.9939 1.31145 17.9602 1.43551 17.9002C1.55958 17.8402 1.6699 17.7551 1.75954 17.6505L9.05954 10.3605L16.3495 17.6505C16.5408 17.8143 16.7869 17.8999 17.0386 17.8902C17.2903 17.8804 17.529 17.7761 17.7071 17.598C17.8852 17.4199 17.9895 17.1812 17.9993 16.9295C18.009 16.6778 17.9234 16.4318 17.7595 16.2405L10.4695 8.95046Z" fill="#D1D1D1"/>
-</svg>

package/src/assets/icons/toaster-error.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 0C13.5759 -2.34822e-08 15.1363 0.310389 16.5922 0.913445C18.0481 1.5165 19.371 2.40042 20.4853 3.51472C21.5996 4.62902 22.4835 5.95189 23.0866 7.4078C23.6896 8.86371 24 10.4241 24 12C24 13.5759 23.6896 15.1363 23.0866 16.5922C22.4835 18.0481 21.5996 19.371 20.4853 20.4853C19.371 21.5996 18.0481 22.4835 16.5922 23.0866C15.1363 23.6896 13.5759 24 12 24C8.8174 24 5.76515 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76515 3.51472 3.51472C5.76515 1.26428 8.8174 4.74244e-08 12 0ZM12 16C11.6022 16 11.2206 16.158 10.9393 16.4393C10.658 16.7206 10.5 17.1022 10.5 17.5C10.5 17.8978 10.658 18.2794 10.9393 18.5607C11.2206 18.842 11.6022 19 12 19C12.3978 19 12.7794 18.842 13.0607 18.5607C13.342 18.2794 13.5 17.8978 13.5 17.5C13.5 17.1022 13.342 16.7206 13.0607 16.4393C12.7794 16.158 12.3978 16 12 16ZM12 5C11.7659 4.99992 11.5393 5.08194 11.3595 5.23178C11.1797 5.38162 11.0581 5.58977 11.016 5.82L11 6V13L11.016 13.18C11.0577 13.4106 11.1791 13.6191 11.359 13.7694C11.5388 13.9196 11.7657 14.0018 12 14.0018C12.2343 14.0018 12.4612 13.9196 12.641 13.7694C12.8209 13.6191 12.9423 13.4106 12.984 13.18L13 13V6L12.984 5.82C12.9419 5.58977 12.8203 5.38162 12.6405 5.23178C12.4607 5.08194 12.2341 4.99992 12 5Z" fill="#EE0000"/>
-</svg>

package/src/assets/icons/toaster-info.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 18C12.34 18 12.6252 17.8848 12.8556 17.6544C13.086 17.424 13.2008 17.1392 13.2 16.8V11.97C13.2 11.63 13.0848 11.35 12.8544 11.13C12.624 10.91 12.3392 10.8 12 10.8C11.66 10.8 11.3748 10.9152 11.1444 11.1456C10.914 11.376 10.7992 11.6608 10.8 12V16.83C10.8 17.17 10.9152 17.45 11.1456 17.67C11.376 17.89 11.6608 18 12 18ZM12 8.4C12.34 8.4 12.6252 8.2848 12.8556 8.0544C13.086 7.824 13.2008 7.5392 13.2 7.2C13.2 6.86 13.0848 6.5748 12.8544 6.3444C12.624 6.114 12.3392 5.9992 12 6C11.66 6 11.3748 6.1152 11.1444 6.3456C10.914 6.576 10.7992 6.8608 10.8 7.2C10.8 7.54 10.9152 7.8252 11.1456 8.0556C11.376 8.286 11.6608 8.4008 12 8.4ZM12 24C10.34 24 8.78 23.6848 7.32 23.0544C5.86 22.424 4.59 21.5692 3.51 20.49C2.43 19.41 1.5752 18.14 0.9456 16.68C0.316 15.22 0.0008 13.66 0 12C0 10.34 0.3152 8.78 0.9456 7.32C1.576 5.86 2.4308 4.59 3.51 3.51C4.59 2.43 5.86 1.5752 7.32 0.9456C8.78 0.316 10.34 0.0008 12 0C13.66 0 15.22 0.3152 16.68 0.9456C18.14 1.576 19.41 2.4308 20.49 3.51C21.57 4.59 22.4252 5.86 23.0556 7.32C23.686 8.78 24.0008 10.34 24 12C24 13.66 23.6848 15.22 23.0544 16.68C22.424 18.14 21.5692 19.41 20.49 20.49C19.41 21.57 18.14 22.4252 16.68 23.0556C15.22 23.686 13.66 24.0008 12 24Z" fill="#00236A"/>
-</svg>

package/src/assets/icons/toaster-success.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76515 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76515 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76515 3.51472 3.51472C5.76515 1.26428 8.8174 0 12 0ZM10.5051 14.3674L7.83943 11.7C7.74386 11.6044 7.63041 11.5286 7.50555 11.4769C7.38069 11.4252 7.24686 11.3986 7.11171 11.3986C6.97657 11.3986 6.84274 11.4252 6.71788 11.4769C6.59302 11.5286 6.47956 11.6044 6.384 11.7C6.191 11.893 6.08257 12.1548 6.08257 12.4277C6.08257 12.7007 6.191 12.9624 6.384 13.1554L9.77829 16.5497C9.87358 16.6458 9.98695 16.722 10.1118 16.774C10.2367 16.826 10.3707 16.8528 10.506 16.8528C10.6413 16.8528 10.7753 16.826 10.9002 16.774C11.0251 16.722 11.1384 16.6458 11.2337 16.5497L18.2623 9.51943C18.3591 9.42426 18.4362 9.31086 18.489 9.18577C18.5418 9.06068 18.5693 8.92637 18.5699 8.79059C18.5705 8.65482 18.5443 8.52026 18.4926 8.39468C18.441 8.26911 18.365 8.15499 18.2691 8.05893C18.1731 7.96286 18.0591 7.88675 17.9336 7.83497C17.8081 7.78319 17.6735 7.75677 17.5378 7.75725C17.402 7.75772 17.2677 7.78507 17.1425 7.83771C17.0173 7.89036 16.9039 7.96727 16.8086 8.064L10.5051 14.3674Z" fill="#0DA574"/>
-</svg>

package/src/assets/icons/toaster-warning.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.15631 21C0.941972 21 0.747116 20.9463 0.571745 20.839C0.396374 20.7317 0.259974 20.5909 0.162546 20.4167C0.0651177 20.2417 0.0113373 20.0519 0.00120478 19.8473C-0.00892776 19.6428 0.0448527 19.4437 0.162546 19.25L10.9771 0.583333C11.094 0.388889 11.2452 0.243055 11.4307 0.145833C11.6162 0.0486111 11.806 0 12.0001 0C12.1949 0 12.3851 0.0486111 12.5706 0.145833C12.7561 0.243055 12.9069 0.388889 13.0231 0.583333L23.8376 19.25C23.9545 19.4444 24.0083 19.6439 23.999 19.8485C23.9896 20.053 23.9358 20.2424 23.8376 20.4167C23.7402 20.5917 23.6038 20.7328 23.4284 20.8402C23.253 20.9475 23.0582 21.0008 22.8438 21H1.15631ZM12.0001 17.5C12.3313 17.5 12.6092 17.388 12.8337 17.164C13.0582 16.94 13.17 16.6631 13.1692 16.3333C13.1692 16.0028 13.057 15.7255 12.8325 15.5015C12.608 15.2775 12.3306 15.1659 12.0001 15.1667C11.6688 15.1667 11.391 15.2787 11.1665 15.5027C10.942 15.7267 10.8302 16.0035 10.8309 16.3333C10.8309 16.6639 10.9432 16.9412 11.1677 17.1652C11.3921 17.3892 11.6696 17.5008 12.0001 17.5ZM12.0001 14C12.3313 14 12.6092 13.888 12.8337 13.664C13.0582 13.44 13.17 13.1631 13.1692 12.8333V9.33333C13.1692 9.00277 13.057 8.7255 12.8325 8.5015C12.608 8.2775 12.3306 8.16588 12.0001 8.16666C11.6688 8.16666 11.391 8.27866 11.1665 8.50266C10.942 8.72666 10.8302 9.00355 10.8309 9.33333V12.8333C10.8309 13.1639 10.9432 13.4412 11.1677 13.6652C11.3921 13.8892 11.6696 14.0008 12.0001 14Z" fill="#FF8A00"/>
-</svg>

package/src/assets/icons/tooltip.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z" fill="#D1D1D1"/>
-</svg>

package/src/assets/upload.svg

@@ -1,4 +0,0 @@
-<svg width="51" height="35" viewBox="0 0 51 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M41.5403 11.8419C41.5349 11.8419 41.5274 11.8424 41.5225 11.8424C41.2927 8.61702 38.6209 6.07 35.3563 6.07C34.276 6.07 33.2606 6.34963 32.3774 6.83909C30.2665 2.77529 26.0408 0 21.1675 0C14.3168 0 8.74244 5.48334 8.53335 12.3264C3.75801 12.7082 0 16.726 0 21.6292C0 26.7839 4.15325 30.9633 9.27679 30.9633H31.9019C31.3318 29.632 31.0143 28.1666 31.0143 26.6289C31.0143 20.5705 35.9125 15.6423 41.9322 15.6423C45.7055 15.6423 49.0385 17.5803 51 20.5175C50.5557 15.6533 46.492 11.8419 41.5403 11.8419ZM15.6538 6.97457C15.582 7.03438 15.5102 7.09469 15.4428 7.16048C15.1773 7.41867 14.9307 7.69081 14.7375 8.00882C13.997 9.227 13.8563 10.5324 14.0183 11.936C14.1743 13.2852 12.0762 13.2703 11.9226 11.936C11.6344 9.44278 12.4269 6.62908 14.587 5.16118C15.7074 4.39807 16.7514 6.21345 15.6538 6.97457ZM15.632 6.99002C15.585 7.02491 15.5206 7.08273 15.632 6.99002V6.99002Z" fill="#D1D1D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M41.8221 17.2454C36.9581 17.2454 33 21.2274 33 26.123C33 31.0176 36.9581 35.0001 41.8221 35.0001C46.686 35.0001 50.6441 31.0181 50.6441 26.123C50.6437 21.2269 46.6855 17.2454 41.8221 17.2454ZM41.2857 30.2505V23.5611L38.2194 26.7808C37.9404 27.0737 37.4882 27.0737 37.2092 26.7808C36.9303 26.4879 36.9303 26.013 37.2092 25.7201L41.4949 21.2201C41.5634 21.1482 41.6423 21.0939 41.7266 21.0573C41.8108 21.0207 41.9031 21.0004 42 21.0004C42.0969 21.0004 42.1892 21.0207 42.2734 21.0573C42.3577 21.0939 42.4366 21.1482 42.5051 21.2201L46.7908 25.7201C47.0697 26.013 47.0697 26.4879 46.7908 26.7808C46.5118 27.0737 46.0596 27.0737 45.7806 26.7808L42.7143 23.5611V30.2505C42.7143 30.6647 42.3945 31.0005 42 31.0005C41.6055 31.0005 41.2857 30.6647 41.2857 30.2505Z" fill="#0DA574"/>
-</svg>