@xaypay/tui 0.0.61 → 0.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -9,7 +9,7 @@
     "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
     "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
-    "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
+    "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
   },
   "author": "",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
     "@svgr/cli": "^6.4.0",
+    "@svgr/webpack": "^6.5.1",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
     "css-loader": "^6.7.1",

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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,3 @@
+<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/components/file/index.js

@@ -96,12 +96,15 @@ export const File = ({
                 </div>
             }
           </div>
-          <div
-            className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
-            onClick={handleRemoveFile}
-          >
-            <i className="icon-delete"/>
-          </div>
+          {
+            !disabled && <div
+              className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
+              onClick={handleRemoveFile}
+            >
+              <i className="icon-delete" />
+            </div>
+          }
+          
           {
             errorMessage || error ? <span style={{ color: 'red' }}>{errorMessage || error}</span> : null
           }

package/src/components/icon/Arrow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgArrow = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgArrow;

package/src/components/icon/CheckboxChecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z"
+      fill="#00236A"
+    />
+  </svg>
+);
+export default SvgCheckboxChecked;

package/src/components/icon/CheckboxUnchecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgCheckboxUnchecked;

package/src/components/icon/CloseIcon.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCloseIcon = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgCloseIcon;

package/src/components/icon/ToasterClose.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgToasterClose = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgToasterClose;

package/src/components/icon/ToasterError.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgToasterError = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z"
+      fill="#E00"
+    />
+  </svg>
+);
+export default SvgToasterError;

package/src/components/icon/ToasterInfo.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgToasterInfo = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M12 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z"
+      fill="#00236A"
+    />
+  </svg>
+);
+export default SvgToasterInfo;

package/src/components/icon/ToasterSuccess.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgToasterSuccess = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z"
+      fill="#0DA574"
+    />
+  </svg>
+);
+export default SvgToasterSuccess;

package/src/components/icon/ToasterWarning.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgToasterWarning = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z"
+      fill="#FF8A00"
+    />
+  </svg>
+);
+export default SvgToasterWarning;

package/src/components/icon/Tooltip.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgTooltip = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgTooltip;

package/src/components/icon/index.js

@@ -1,6 +1,10 @@
-export { default as HeartFilled } from "./HeartFilled";
-export { default as HeartOutline } from "./HeartOutline";
-export { default as LikeFilled } from "./LikeFilled";
-export { default as LikeOutline } from "./LikeOutline";
-export { default as StarFilled } from "./StarFilled";
-export { default as StarOutline } from "./StarOutline";
+export { default as Arrow } from "./Arrow";
+export { default as CheckboxChecked } from "./CheckboxChecked";
+export { default as CheckboxUnchecked } from "./CheckboxUnchecked";
+export { default as CloseIcon } from "./CloseIcon";
+export { default as ToasterClose } from "./ToasterClose";
+export { default as ToasterError } from "./ToasterError";
+export { default as ToasterInfo } from "./ToasterInfo";
+export { default as ToasterSuccess } from "./ToasterSuccess";
+export { default as ToasterWarning } from "./ToasterWarning";
+export { default as Tooltip } from "./Tooltip";

package/src/components/input/index.js

@@ -37,6 +37,7 @@ export const Input = ({
     errorLeft,
     errorSize,
     labelSize,
+    maxLength,
     labelColor,
     errorColor,
     placeholder,
@@ -172,7 +173,7 @@ export const Input = ({
                 }
                 <input
                     {...props}
-                    value={value}
+                    value={maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
                     className={classProps}
                     onChange={handleChange}
                     type={show ? 'text' : type}
@@ -263,6 +264,7 @@ Input.propTypes = {
     errorSize: PropTypes.string,
     errorLeft: PropTypes.string,
     labelSize: PropTypes.string,
+    maxLength: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
     placeholder: PropTypes.string,

package/src/components/input/input.stories.js

@@ -4,6 +4,11 @@ import { Input, InputTypes } from "./index";
 export default {
   component: Input,
   title: "Components/Input",
+  argsType: {
+    onChange: {
+      control: { type: 'object' }
+    }
+  }
 };
 
 const Template = (args) => <Input {...args} />;

package/src/components/select/index.js

@@ -2,11 +2,10 @@ import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
-
 import { SelectCheckbox } from './../selectCheckbox';
 
-import ReactArrowIcon from './../../assets/icons/arrow.svg';
-import ReactCloseIcon from './../../assets/icons/close-icon.svg';
+import ReactArrowIcon from '../icon/Arrow';
+import ReactCloseIcon from '../icon/CloseIcon';
 
 import styles from './select.module.css';
 
@@ -147,6 +146,15 @@ export const Select = ({
         e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
     };
 
+    const isObjectEmpty = (obj) => {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            return false;
+          }
+        }
+        return true;
+      }
+
     useEffect(() => {
         if(opened){
             const checkIfClickedOutside = e => {
@@ -162,7 +170,7 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(selected);
+        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -243,16 +251,16 @@ export const Select = ({
                         </div>
                         <div className={`${styles['select-content-top-icon']}`}>
                             {
-                                multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
+                                !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
                             }
 
-                            {newSelected && newSelected.length > 0 && 
+                            {!disabled && newSelected && newSelected.length > 0 && 
                                 <div
                                 className={`${styles['close-icon']}`}
                                 onClick={disabled ? _ => _ : handleClearSelect}
                                 style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
-                                    { closeIcon ? closeIcon : <img src={ReactCloseIcon} alt="icon" /> }
+                                    { closeIcon ? closeIcon : <ReactCloseIcon /> }
                                 </div>
                             }
 
@@ -261,7 +269,7 @@ export const Select = ({
                                     transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
                                 }}
                                 className={`${styles['arrow-icon']}`}>
-                                {arrowIcon ? arrowIcon : <img src={ReactArrowIcon} alt="icon"/>}
+                                {arrowIcon ? arrowIcon : <ReactArrowIcon />}
                             </div>
                         </div>
                     </div>
@@ -272,7 +280,14 @@ export const Select = ({
                                     boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
                                     borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
                                     backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-                                    top: parseFloat( selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
+                                    top: 
+                                        selectedMinHeight ? 
+                                            selectedMinHeight.includes('rem') ?
+                                                parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' :
+                                                parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px'
+                                            : configStyles.SELECT.selectedMinHeight.includes('rem') ?
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' :
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'                         
                                 }}
                                 className={`${styles['select-content-bottom']}`}
                             >

package/src/components/select/select.module.css

@@ -39,7 +39,7 @@
     box-sizing: border-box;
 }
 
-.select-content-top-icon > div {
+.select-content-top-icon>div {
     display: flex;
     width: 14px;
     height: 14px;
@@ -50,9 +50,10 @@
 .close-icon {
     padding-right: 9px;
     border-right: 1px solid #EEEEEE;
+    box-sizing: content-box;
 }
 
-.arrow-icon{
+.arrow-icon {
     margin-left: 9px;
     transform-origin: center;
     transition: all 640ms ease;

package/src/components/toaster/Toast.js

@@ -0,0 +1,179 @@
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import ToasterInfo from '../icon/ToasterInfo';
+import ToasterError from '../icon/ToasterError';
+import ToasterClose from '../icon/ToasterClose';
+import ToasterWarn from '../icon/ToasterWarning';
+import ToasterSuccess from '../icon/ToasterSuccess';
+
+
+import styles from './toaster.module.css';
+
+export const ToasterType = {
+  info: 'info',
+  warn: 'warn',
+  error: 'error',
+  success: 'success'
+};
+
+export const ToasterPosition = {
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  topCenter: 'top-center',
+  bottomLeft: 'bottom-left',
+  bottomRight: 'bottom-right',
+  bottomCenter: 'bottom-center'
+};
+
+export const Toast = ({
+  type,
+  title,
+  timer,
+  position,
+  removeToast,
+  description,
+}) => {
+  let timeoutCall;
+  let timeoutClick;
+
+  const ref = useRef(null);
+  const [showToaster, setShowToaster] = useState(true);
+
+  const handleToasterClick = (e) => {
+    e.stopPropagation();
+  };
+
+  const handleCloseToaster = (ref) => {
+    setShowToaster(false);
+    timeoutClick = setTimeout(() => {
+      removeToast(ref, position);
+    }, 300);
+    clearTimeout(timeoutCall);
+  };
+
+  useEffect(() => {
+    timeoutCall = setTimeout(() => {
+      handleCloseToaster(ref);
+    }, timer);
+    return () => {
+      setShowToaster(true);
+      clearTimeout(timeoutCall);
+      clearTimeout(timeoutClick);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      onClick={handleToasterClick}
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        width: '440px',
+        height: '83px',
+        borderRadius: '40px',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        backgroundColor: '#FFFFFF',
+        border: '2px solid #EEEEEE',
+        padding: '14px 29px 14px 12px',
+        justifyContent: 'space-between'
+      }}
+      className={`
+        ${styles['notify-block']}
+        ${
+        position === 'top-left' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
+          : position === 'top-right' ? showToaster ? styles['bounce-in-right'] : styles['bounce-out-right']
+            : position === 'top-center' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
+              : position === 'bottom-left' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
+                : position === 'bottom-right' ? showToaster ? styles['bounce-in-right'] : styles['bounce-out-right']
+                  : position === 'bottom-center' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
+                    : ''
+        }
+      `}
+    >
+      <div
+        style={{
+          display: 'flex',
+          width: '60px',
+          height: '60px',
+          borderRadius: '30px',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor:
+            type === 'info' ? 'rgba(0, 35, 106, 0.05)'
+              : type === 'warn' ? 'rgba(255, 138, 0, 0.05)'
+                : type === 'error' ? 'rgba(238, 0, 0, 0.05)'
+                  : type === 'success' ? 'rgba(13, 165, 116, 0.05)'
+                    : ''
+        }}
+      >
+        {/* <img
+          src= */}
+          {
+            type === 'info' ? <ToasterInfo />
+              : type === 'warn' ? <ToasterWarn />
+                : type === 'error' ? <ToasterError />
+                  : type === 'success' ? <ToasterSuccess />
+                    : ''
+          }
+          {/* alt="notify icon"
+        /> */}
+      </div>
+
+      <div
+        style={{
+          height: '100%',
+          width: 'calc(100% - 90px)'
+        }}
+      >
+        <p
+          style={{
+            fontWeight: 600,
+            color: '#3C393E',
+            fontSize: '16px',
+            lineHeight: '22px',
+            fontStyle: 'normal',
+            fontFamily: ''
+          }}
+        >
+          {title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''}
+        </p>
+        <span
+          style={{
+            fontWeight: 500,
+            color: '#3C393E',
+            fontSize: '12px',
+            lineHeight: '16px',
+            fontStyle: 'normal',
+            fontFamily: '',
+            opacity: 0.8
+          }}
+        >
+          {description ? description.length > 120 ? description.substr(0, 120) + '...' : description : ''}
+        </span>
+      </div>
+
+      <div
+        onClick={() => handleCloseToaster(ref)}
+        style={{
+          width: '18px',
+          height: '18px',
+          cursor: 'pointer'
+        }}
+      >
+        <ToasterClose />
+      </div>
+    </div>
+  )
+};
+
+Toast.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  timer: PropTypes.number.isRequired,
+  removeToast: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
+  position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired,
+}