@xaypay/tui 0.0.70 → 0.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -59,7 +59,8 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
-    "react-icons": "^4.7.1"
+    "react-icons": "^4.7.1",
+    "uuid": "^9.0.0"
   },
   "bin": "./cli-command.js"
 }

package/src/components/autocomplate/autocomplate.stories.js

@@ -21,7 +21,7 @@ Default.args = {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6Ijk2Mjk0MjJkNTY1ZTQ3MGM3MjFkZjY5NDgzMzE3ZThmYjdlMDJmMjI4YjY5MzZhYzdiM2EzMWM4ODZkMWQwZDk2YjIzNzYwMmJhMWE0MTE0IiwiaWF0IjoxNjY5MTgyOTI5LjczMjIwOCwibmJmIjoxNjY5MTgyOTI5LjczMjIzLCJleHAiOjE2NjkyMDgxMjkuNzEyNDczLCJzdWIiOiJtaW5hcyIsInNjb3BlcyI6WyJlbWFpbCJdfQ.NsFsqDHOBYzgReUtW9iumbEvYCB8O7yCIJ2UTz0-AeVEjdUxE-htZMBYF8pP3m-lM1IQ3iN2ude7AZhTzVLMAhTt-5tKJr8YAxhX28yCBLYsFHE-e0k7-FLKBkkZxt9yrvX_Rz8aSQ39-3HrkyB-BYHzV5-GnMgAhnrWKYlTmrVFi9SWu0WBYPHvblMTEh3Vkkd1ESn7fUhy8gf8qma0ChRAMbkozLffbVVYfnWlU0eySD2PUWrZ26JtKAX6k-q7TiMd6HMjOEFUi80JH7aoKDI1vdg8kKlPqcjYTEJK3hzIJrtOHTTUoW4m1-k5x9Le3ULdT4Hctr0bh--ERShnTTg-DBJh0zIoBol4hFHZnA35_FEqKBkDAJ3EOt9DusBTJ9Iad-JzrxJqb-4uhzWjTg8f3F_IedPgG3pwqGkSw2U2dVqzwdqy3yaElp7SGWpicNxJWJsr5Vfa8gLhMkmDMooOHNBUNkS-4Z8Cn6dPc-1mg2JZxrBuSMElkp8-DQr9Xe9VBf8wCUEdHDvQmb-6LIEL8njS2XGL82m827uO-BOVVOIiZO-BVGn_VjIwdhywrjmudPWBy2CVUxHEft64Bz3VkS2FnFoSN7_zsaCE6dpXWTRJKv-4IeBv8pn4-lYw67jMINza7Om9_6BOlnk1VvjixmulPyTobgEO7PQ6FeE',
+        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
       },
     }).then((res)=> {
       return res.json()

package/src/components/captcha/captcha.module.css

@@ -38,7 +38,7 @@
   background-position: -5px;
   background-size: 46px 46px;
   background-repeat: no-repeat;
-  background-image: url('./../../assets/icons/range-arrow-default.svg');
+  background-image: url('./../../assets/range-arrow-default.svg');
 }
 
 .range-error::-webkit-slider-thumb {
@@ -54,7 +54,7 @@
   background-position: -5px;
   background-size: 46px 46px;
   background-repeat: no-repeat;
-  background-image: url('./../../assets/icons/range-arrow-error.svg');
+  background-image: url('./../../assets/range-arrow-error.svg');
 }
 
 .range-success::-webkit-slider-thumb {
@@ -70,5 +70,5 @@
   background-position: -5px;
   background-size: 46px 46px;
   background-repeat: no-repeat;
-  background-image: url('./../../assets/icons/range-arrow-success.svg');
+  background-image: url('./../../assets/range-arrow-success.svg');
 }

package/src/components/captcha/index.js

@@ -28,12 +28,13 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
         if (!getRange) {
             alert('Please add getRange property on Captcha component');
         }
-        if (range > 100) {
+        if (range >= 100) {
             setRangeNumber(100);
-        } else if (range < 0) {
+        } else if (range <= 0) {
             setRangeNumber(0);
         } else {
-            setRangeNumber(range);
+            const roundedRange = Math.ceil(range / 5) * 5;
+            setRangeNumber(Math.min(roundedRange, 100));
         }
     }, [range, getRange]);
 
@@ -93,6 +94,7 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                     ></div>
                     <input
                         min={0}
+                        step={5}
                         max={100}
                         type='range'
                         value={rangeProgress}
@@ -106,9 +108,9 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                         className={`
                             ${styles['range']}
                             ${
-                                rangeProgress >= rangeNumber ?
+                                +rangeProgress === rangeNumber ?
                                 styles['range-success'] :
-                                rangeProgress < rangeNumber && rangeProgress > 0 ?
+                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
                                 styles['range-error'] :
                                 styles['range-default']
                             }
@@ -124,9 +126,9 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                             height: '4px',
                             borderRadius: '2px',
                             backgroundColor:
-                                rangeProgress >= rangeNumber ?
+                                +rangeProgress === rangeNumber ?
                                 '#0DA574' :
-                                rangeProgress < rangeNumber && rangeProgress > 0 ?
+                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
                                 '#EE0000' :
                                 'transparent' ,
                             borderRadius: '2px',
@@ -140,6 +142,7 @@ export const Captcha = ({ size, color, range, label, getRange }) => {
                         bottom: '0px',
                         height: '15px',
                         left: `calc(${rangeNumber}% - 6px)`,
+                        transform: 'translate(-50% -50%)'
                     }}
                 >
                     <SvgCaptchaArrowUp />

package/src/components/file/index.js

@@ -70,8 +70,7 @@ export const File = ({
         </p>
         <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
           <div
-            onChange={(e) => console.log(e)}
-            className={`${styles['file-form']} file-form-rem ${errorMessage ? styles['error'] : '' }`}
+            className={`${styles['file-form']} file-form-rem ${error || errorMessage ? styles['error'] : '' }`}
             onClick={() => document.querySelector(`.${name}`).click()}
           >
             <input
@@ -109,7 +108,7 @@ export const File = ({
           }
           
           {
-            errorMessage || error ? <span style={{ color: 'red' }}>{errorMessage || error}</span> : null
+            error || errorMessage ? <span style={{ color: 'red' }}>{error || errorMessage}</span> : null
           }
       </div>
     </>

package/src/components/icon/Arrow.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgArrow = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="15"
+    height="9"
     viewBox="0 0 15 9"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/CheckboxChecked.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="16"
+    height="16"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/CheckboxUnchecked.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="16"
+    height="16"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/CloseIcon.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgCloseIcon = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="14"
+    height="14"
     viewBox="0 0 14 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/DeleteComponent.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+const SvgDeleteComponent = ({ title, titleId, ...props }) => (
+  <svg
+    width="26"
+    height="26"
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <rect x={0.5} y={0.5} width={25} height={25} rx={5.5} stroke="#D1D1D1" />
+    <path
+      d="M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z"
+      fill="#E00"
+    />
+  </svg>
+);
+export default SvgDeleteComponent;

package/src/components/icon/Dots.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-const Dots = ({ title, titleId, ...props }) => (
+const SvgDots = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="11"
+    height="3"
     viewBox="0 0 11 3"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -11,9 +11,9 @@ const Dots = ({ title, titleId, ...props }) => (
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <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"
+      d="M.23 1.136C.23.742.326.464.518.304c.192-.16.421-.24.688-.24.277 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256C.326 1.798.23 1.52.23 1.136Zm4.281 0c0-.394.096-.672.288-.832.192-.16.422-.24.688-.24.278 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.426.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Zm4.282 0c0-.394.096-.672.288-.832.192-.16.421-.24.688-.24.277 0 .512.08.704.24.202.16.304.438.304.832 0 .384-.102.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Z"
+      fill="#3C393E"
     />
   </svg>
 );
-export default Dots;
+export default SvgDots;

package/src/components/icon/ListItemDelete.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgListItemDelete = ({ title, titleId, ...props }) => (
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7.071 3.144V.786A.786.786 0 0 1 7.857 0h6.286a.786.786 0 0 1 .786.786v2.358h6.285a.786.786 0 0 1 0 1.572H.786a.786.786 0 1 1 0-1.572H7.07Zm1.572 0h4.714V1.573H8.643v1.571ZM3.143 22a.786.786 0 0 1-.786-.786V4.716h17.286v16.498a.786.786 0 0 1-.786.786H3.143Zm5.5-4.714a.786.786 0 0 0 .786-.786V8.644a.786.786 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Zm4.714 0a.785.785 0 0 0 .786-.786V8.644a.785.785 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemDelete;

package/src/components/icon/ListItemJpeg.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemJpeg = ({ title, titleId, ...props }) => (
+  <svg
+    width="33"
+    height="42"
+    viewBox="0 0 33 42"
+    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="m32.384 10.667-.022-.026-.021-.025a.356.356 0 0 0-.052-.058L21.896.21 21.87.188l-.025-.021-.029-.026a.477.477 0 0 1-.029-.025L21.678 0H3.41c-.771 0-1.511.305-2.057.848A2.891 2.891 0 0 0 .5 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 3.409 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H3.41a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.588 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.588Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.98a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.588a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.588 11.99a.724.724 0 1 1 0-1.448H17.02a.724.724 0 0 1 0 1.449H5.588Zm17.974-1.643A1.451 1.451 0 0 1 22.107 8.9V2.47l7.913 7.878h-6.458ZM8.576 32.088v4.478c0 .246-.042.454-.127.624a.91.91 0 0 1-.352.382.99.99 0 0 1-.505.128c-.2 0-.374-.034-.523-.101a.755.755 0 0 1-.343-.334c-.079-.156-.119-.36-.119-.611H5.5c0 .436.09.797.268 1.08.179.285.425.496.738.634.317.137.679.206 1.086.206.398 0 .754-.079 1.068-.237.313-.158.56-.387.742-.686.182-.299.273-.66.273-1.085v-4.478H8.576Zm3.472 4.012h1.327c.495 0 .915-.079 1.261-.237.349-.158.614-.386.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.741-.272-1.046a1.849 1.849 0 0 0-.796-.72c-.345-.176-.766-.264-1.261-.264h-2.43v6.398h1.103V36.1Zm0-.874v-2.26h1.327c.29 0 .524.055.703.163a.97.97 0 0 1 .391.431c.085.176.128.365.128.567 0 .214-.043.404-.128.571a.876.876 0 0 1-.39.387c-.18.094-.414.14-.704.14h-1.327Zm14.545.087v2.444c-.09.12-.233.252-.426.395-.19.141-.444.263-.76.365-.317.103-.71.154-1.182.154-.402 0-.77-.068-1.103-.202a2.415 2.415 0 0 1-.866-.602 2.755 2.755 0 0 1-.558-.963 3.964 3.964 0 0 1-.198-1.3v-.444c0-.484.06-.914.18-1.292.123-.381.299-.703.527-.967.229-.264.504-.463.827-.598a2.805 2.805 0 0 1 1.103-.206c.524 0 .958.088 1.3.263.346.173.613.413.8.721.188.308.307.66.356 1.055h-1.08a1.7 1.7 0 0 0-.207-.598 1.046 1.046 0 0 0-.431-.413c-.185-.102-.425-.154-.72-.154-.256 0-.48.049-.673.145a1.271 1.271 0 0 0-.483.426 2.093 2.093 0 0 0-.286.686c-.065.27-.097.577-.097.923v.452c0 .352.037.664.11.937.076.272.185.502.325.69.144.187.318.33.523.426.205.093.437.14.695.14.252 0 .458-.02.62-.061.16-.044.288-.095.381-.154.097-.062.172-.12.225-.176v-1.27h-1.332v-.822h2.43ZM16.7 32.085h3.791v.884h-2.78v1.754h2.618v.875H17.71v2.033h2.781v.884h-3.79v-6.43Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemJpeg;

package/src/components/icon/ListItemJpg.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemJpg = ({ title, titleId, ...props }) => (
+  <svg
+    width="32"
+    height="42"
+    viewBox="0 0 32 42"
+    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="M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024Zm2.071 27.737v-2.443h-2.43v.822h1.331v1.27a1.19 1.19 0 0 1-.224.175c-.094.059-.221.11-.382.154a2.579 2.579 0 0 1-.62.062c-.258 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.72.154.188.1.332.238.431.413.103.176.172.375.207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.343-.176-.776-.264-1.3-.264-.41 0-.778.069-1.104.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.527.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.197 1.3.132.378.318.7.559.963.243.264.531.464.865.602.334.135.702.202 1.103.202.472 0 .866-.051 1.182-.154.317-.102.57-.224.76-.364a2.13 2.13 0 0 0 .427-.396Zm-13.03-1.094v-4.478h1.099v4.478c0 .425-.091.786-.273 1.085-.181.3-.429.528-.742.686-.314.158-.67.237-1.068.237-.407 0-.77-.069-1.086-.206a1.622 1.622 0 0 1-.738-.633C8.09 37.45 8 37.09 8 36.654h1.107c0 .252.04.455.12.61a.755.755 0 0 0 .342.335c.15.067.324.1.523.1a.99.99 0 0 0 .505-.127.909.909 0 0 0 .352-.382c.085-.17.127-.378.127-.624Zm4.799-.466h-1.327v2.386h-1.103v-6.398h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.753 1.753 0 0 1-.796.68c-.345.159-.766.238-1.261.238Zm-1.327-3.133v2.259h1.327c.29 0 .524-.047.703-.141a.876.876 0 0 0 .391-.387c.085-.167.128-.357.128-.571 0-.202-.043-.391-.128-.567a.97.97 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163h-1.327Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemJpg;

package/src/components/icon/ListItemPdf.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemPdf = ({ title, titleId, ...props }) => (
+  <svg
+    width="32"
+    height="42"
+    viewBox="0 0 32 42"
+    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="M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024ZM10.43 36.013H9.103v2.385H8V32h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.754 1.754 0 0 1-.796.68c-.345.16-.766.238-1.26.238Zm-1.327-3.134v2.259h1.327c.29 0 .525-.047.703-.14a.877.877 0 0 0 .391-.388c.085-.167.128-.357.128-.57 0-.203-.043-.392-.128-.568a.971.971 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163H9.103Zm6.504 5.52h-1.859V32H15.646c.425 0 .813.072 1.165.215.352.141.655.345.91.611.258.267.455.586.593.958.138.372.206.788.206 1.248v.339c0 .46-.068.876-.206 1.248a2.714 2.714 0 0 1-.593.958 2.662 2.662 0 0 1-.923.61c-.355.141-.752.211-1.191.211Zm0-.875h-.756v-4.645h.795c.285 0 .535.047.752.14.22.094.404.232.554.414a1.8 1.8 0 0 1 .342.672c.08.267.12.573.12.918v.348c0 .445-.07.829-.208 1.151-.134.322-.336.57-.606.743-.267.172-.598.259-.993.259Zm5.124-2.725v-1.92h2.975V32h-4.078v6.398h1.103v-2.724h2.61v-.875h-2.61Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemPdf;

package/src/components/icon/ListItemPng.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemPng = ({ title, titleId, ...props }) => (
+  <svg
+    width="32"
+    height="42"
+    viewBox="0 0 32 42"
+    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="m31.873 10.655-.011-.014c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.476.476 0 0 0-.029-.025l-.029-.026L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108a.21.21 0 0 1-.01-.012Zm-1.327 28.449a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458ZM9.103 36.012h1.327c.495 0 .916-.079 1.261-.237.349-.158.614-.385.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.74-.272-1.046a1.85 1.85 0 0 0-.796-.72c-.345-.176-.766-.264-1.26-.264H8v6.398h1.103v-2.386Zm0-.874v-2.26h1.327c.29 0 .525.055.703.163.179.109.31.253.391.431.085.176.128.365.128.567 0 .214-.043.404-.128.571a.877.877 0 0 1-.39.387c-.18.094-.414.14-.704.14H9.103ZM13.7 32h1.09l3.292 5.106a63.566 63.566 0 0 1-.044-1.379V32h.956v6.398h-1.1l-3.303-4.9.002.044c.012.134.02.279.027.435l.018.468c.006.163.009.327.009.49v3.463H13.7V32Zm11.393 5.66v-2.443h-2.43v.822h1.332v1.27a1.19 1.19 0 0 1-.225.175c-.093.059-.22.11-.382.154a2.578 2.578 0 0 1-.62.062c-.257 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.721.154.188.1.331.238.43.413a1.7 1.7 0 0 1 .207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.342-.176-.776-.264-1.3-.264-.41 0-.778.069-1.103.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.528.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.198 1.3.132.378.318.7.558.963.243.264.532.464.866.602.334.135.701.202 1.103.202.471 0 .865-.051 1.182-.154.316-.102.57-.224.76-.364.193-.144.335-.276.426-.396Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemPng;

package/src/components/icon/Nextarrow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgNextarrow = ({ title, titleId, ...props }) => (
+  <svg
+    width="6"
+    height="12"
+    viewBox="0 0 6 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgNextarrow;

package/src/components/icon/RangeArrowDefault.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+const SvgRangeArrowDefault = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g filter="url(#range-arrow-default_svg__a)">
+      <circle cx={22} cy={23} r={15} fill="#00236A" />
+      <circle cx={22} cy={23} r={16} stroke="#fff" strokeWidth={2} />
+    </g>
+    <path
+      d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
+      fill="#fff"
+    />
+    <defs>
+      <filter
+        id="range-arrow-default_svg__a"
+        x={0}
+        y={0}
+        width={46}
+        height={46}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx={1} />
+        <feGaussianBlur stdDeviation={3} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.235289 0 0 0 0 0.222535 0 0 0 0 0.241667 0 0 0 0.15 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1946_21917"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1946_21917"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgRangeArrowDefault;

package/src/components/icon/RangeArrowError.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+const SvgRangeArrowError = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g filter="url(#range-arrow-error_svg__a)">
+      <circle cx={22} cy={23} r={15} fill="#E00" />
+      <circle cx={22} cy={23} r={16} stroke="#fff" strokeWidth={2} />
+    </g>
+    <path
+      d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
+      fill="#fff"
+    />
+    <defs>
+      <filter
+        id="range-arrow-error_svg__a"
+        x={0}
+        y={0}
+        width={46}
+        height={46}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx={1} />
+        <feGaussianBlur stdDeviation={3} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.235289 0 0 0 0 0.222535 0 0 0 0 0.241667 0 0 0 0.15 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1946_21948"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1946_21948"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgRangeArrowError;

package/src/components/icon/RangeArrowSuccess.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+const SvgRangeArrowSuccess = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g filter="url(#range-arrow-success_svg__a)">
+      <circle cx={22} cy={23} r={15} fill="#0DA574" />
+      <circle cx={22} cy={23} r={16} stroke="#fff" strokeWidth={2} />
+    </g>
+    <path
+      d="M25.998 23.011c0 .233-.081.46-.23.639l-4.998 5.99a1.001 1.001 0 0 1-1.539-1.278l4.478-5.351-4.318-5.35a.998.998 0 0 1 .15-1.408 1 1 0 0 1 1.46.14l4.827 5.99a.997.997 0 0 1 .17.628Z"
+      fill="#fff"
+    />
+    <defs>
+      <filter
+        id="range-arrow-success_svg__a"
+        x={0}
+        y={0}
+        width={46}
+        height={46}
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx={1} />
+        <feGaussianBlur stdDeviation={3} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.235289 0 0 0 0 0.222535 0 0 0 0 0.241667 0 0 0 0.15 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1946_21947"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1946_21947"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgRangeArrowSuccess;

package/src/components/icon/RemoveFile.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+const SvgRemoveFile = ({ title, titleId, ...props }) => (
+  <svg
+    width="26"
+    height="26"
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <rect width={26} height={26} rx={6} fill="#FBFBFB" />
+    <path
+      d="M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z"
+      fill="#00236A"
+    />
+  </svg>
+);
+export default SvgRemoveFile;

package/src/components/icon/ToasterClose.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgToasterClose = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="18"
+    height="18"
     viewBox="0 0 18 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/ToasterError.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgToasterError = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/ToasterInfo.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgToasterInfo = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/ToasterSuccess.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgToasterSuccess = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="24"
+    height="24"
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/ToasterWarning.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgToasterWarning = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="24"
+    height="24"
     viewBox="0 0 24 21"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

package/src/components/icon/Tooltip.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 const SvgTooltip = ({ title, titleId, ...props }) => (
   <svg
-    width="1em"
-    height="1em"
+    width="16"
+    height="16"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"