@xaypay/tui 0.0.69 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "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/assets/range-arrow-default.svg

@@ -0,0 +1,19 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1946_21917)">
+<circle cx="22" cy="23" r="15" fill="#00236A"/>
+<circle cx="22" cy="23" r="16" stroke="white" stroke-width="2"/>
+</g>
+<path d="M25.9976 23.011C25.9981 23.2442 25.9168 23.4703 25.7678 23.6499L20.7703 29.6394C20.6007 29.8432 20.3569 29.9714 20.0926 29.9958C19.8283 30.0201 19.5652 29.9386 19.3611 29.7692C19.157 29.5997 19.0286 29.3562 19.0042 29.0923C18.9799 28.8283 19.0615 28.5655 19.2311 28.3616L23.7088 23.011L19.391 17.6603C19.308 17.5582 19.246 17.4407 19.2086 17.3146C19.1712 17.1885 19.1591 17.0562 19.173 16.9254C19.187 16.7946 19.2267 16.6679 19.2898 16.5525C19.3529 16.437 19.4383 16.3352 19.541 16.2528C19.6437 16.1614 19.7643 16.0921 19.8951 16.0494C20.0259 16.0067 20.1641 15.9914 20.3011 16.0046C20.4381 16.0177 20.5709 16.0589 20.6912 16.1257C20.8115 16.1924 20.9167 16.2833 21.0002 16.3926L25.8277 22.3821C25.9532 22.5668 26.013 22.7883 25.9976 23.011Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1946_21917" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" 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 type="matrix" 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 mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_21917"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_21917" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/range-arrow-error.svg

@@ -0,0 +1,19 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1946_21948)">
+<circle cx="22" cy="23" r="15" fill="#EE0000"/>
+<circle cx="22" cy="23" r="16" stroke="white" stroke-width="2"/>
+</g>
+<path d="M25.9976 23.011C25.9981 23.2442 25.9168 23.4703 25.7678 23.6499L20.7703 29.6394C20.6007 29.8432 20.3569 29.9714 20.0926 29.9958C19.8283 30.0201 19.5652 29.9386 19.3611 29.7692C19.157 29.5997 19.0286 29.3562 19.0042 29.0923C18.9799 28.8283 19.0615 28.5655 19.2311 28.3616L23.7088 23.011L19.391 17.6603C19.308 17.5582 19.246 17.4407 19.2086 17.3146C19.1712 17.1885 19.1591 17.0562 19.173 16.9254C19.187 16.7946 19.2267 16.6679 19.2898 16.5525C19.3529 16.437 19.4383 16.3352 19.541 16.2528C19.6437 16.1614 19.7643 16.0921 19.8951 16.0494C20.0259 16.0067 20.1641 15.9914 20.3011 16.0046C20.4381 16.0177 20.5709 16.0589 20.6912 16.1257C20.8115 16.1924 20.9167 16.2833 21.0002 16.3926L25.8277 22.3821C25.9532 22.5668 26.013 22.7883 25.9976 23.011Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1946_21948" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" 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 type="matrix" 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 mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_21948"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_21948" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/range-arrow-success.svg

@@ -0,0 +1,19 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1946_21947)">
+<circle cx="22" cy="23" r="15" fill="#0DA574"/>
+<circle cx="22" cy="23" r="16" stroke="white" stroke-width="2"/>
+</g>
+<path d="M25.9976 23.011C25.9981 23.2442 25.9168 23.4703 25.7678 23.6499L20.7703 29.6394C20.6007 29.8432 20.3569 29.9714 20.0926 29.9958C19.8283 30.0201 19.5652 29.9386 19.3611 29.7692C19.157 29.5997 19.0286 29.3562 19.0042 29.0923C18.9799 28.8283 19.0615 28.5655 19.2311 28.3616L23.7088 23.011L19.391 17.6603C19.308 17.5582 19.246 17.4407 19.2086 17.3146C19.1712 17.1885 19.1591 17.0562 19.173 16.9254C19.187 16.7946 19.2267 16.6679 19.2898 16.5525C19.3529 16.437 19.4383 16.3352 19.541 16.2528C19.6437 16.1614 19.7643 16.0921 19.8951 16.0494C20.0259 16.0067 20.1641 15.9914 20.3011 16.0046C20.4381 16.0177 20.5709 16.0589 20.6912 16.1257C20.8115 16.1924 20.9167 16.2833 21.0002 16.3926L25.8277 22.3821C25.9532 22.5668 26.013 22.7883 25.9976 23.011Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1946_21947" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" 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 type="matrix" 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 mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1946_21947"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1946_21947" result="shape"/>
+</filter>
+</defs>
+</svg>

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

@@ -1,75 +1,74 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-.main {
-  width: 100%;
-  max-width: 400px;
-  height: 74px;
-  position: relative;
+.start-point::after {
+  content: '';
+  position: absolute;
+  top: 7.5px;
+  left: 0px;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #ffffff;
+  border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  -ms-border-radius: 6px;
+  -o-border-radius: 6px;
+  background-color: #D1D1D1;
+  z-index: -1;
 }
 
-.slider {
+.range {
+  margin: 0px;
   -webkit-appearance: none;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  outline: none;
-  position: absolute;
-  background: #EEEEEE;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  left: 0;
 }
 
-.slider::-webkit-slider-thumb {
+.range::-webkit-slider-runnable-track {
+  width: 100%;
   -webkit-appearance: none;
-  width: 30px;
-  height: 30px;
-  z-index: 3;
-  position: relative;
 }
 
-.selector {
-  height: 30px;
-  width: 30px;
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  margin: auto 0;
-  left: 0;
-  z-index: 2;
+.range-default::-webkit-slider-thumb {
+  width: 34px;
+  height: 34px;
+  cursor: ew-resize;
+  border-radius: 17px;
+  -webkit-border-radius: 17px;
+  -moz-border-radius: 17px;
+  -ms-border-radius: 17px;
+  -o-border-radius: 17px;
+  -webkit-appearance: none;
+  background-position: -5px;
+  background-size: 46px 46px;
+  background-repeat: no-repeat;
+  background-image: url('./../../assets/range-arrow-default.svg');
 }
 
-.selectBtn {
-  height: 30px;
-  width: 30px;
-  background: #00236A;
-  border-radius: 50%;
-  border: 2px solid #FFFFFF;
-  box-shadow: 1px 0 6px rgba(60, 57, 62, 0.15);
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  margin: auto 0;
-  cursor: pointer;
+.range-error::-webkit-slider-thumb {
+  width: 34px;
+  height: 34px;
+  cursor: ew-resize;
+  border-radius: 17px;
+  -webkit-border-radius: 17px;
+  -moz-border-radius: 17px;
+  -ms-border-radius: 17px;
+  -o-border-radius: 17px;
+  -webkit-appearance: none;
+  background-position: -5px;
+  background-size: 46px 46px;
+  background-repeat: no-repeat;
+  background-image: url('./../../assets/range-arrow-error.svg');
 }
 
-.progressBar {
-  width: auto;
-  height: 4px;
-  background: #ff0000;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  margin: auto 0;
+.range-success::-webkit-slider-thumb {
+  width: 34px;
+  height: 34px;
+  cursor: ew-resize;
+  border-radius: 17px;
+  -webkit-border-radius: 17px;
+  -moz-border-radius: 17px;
+  -ms-border-radius: 17px;
+  -o-border-radius: 17px;
+  -webkit-appearance: none;
+  background-position: -5px;
+  background-size: 46px 46px;
+  background-repeat: no-repeat;
+  background-image: url('./../../assets/range-arrow-success.svg');
 }
-
-.range {
-  color: blue;
-  margin-bottom: 15px;
-  margin-top: 15px;
-}

package/src/components/captcha/captcha.stories.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { Captcha, ButtonTheme } from './index';
+import { Captcha } from './index';
 
 export default {
     component: Captcha,
     title: 'Components/Captcha',
 };
 
-const Template = (args) => <Captcha className='captcha type-outline size-default' label='Captcha'  {...args} > Default</Captcha>;
+const Template = (args) => <Captcha label='Captcha' {...args}>Default</Captcha>;
 
 export const Default = Template.bind({});
 Default.args = {
-    rangeCount: 20,
-    onclick: (e) => {
+    range: 72,
+    getRange: (range) => {
+        console.log('Range is ' + range);
     }
 };

package/src/components/captcha/index.js

@@ -1,69 +1,159 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styles from './captcha.module.css';
-import Icon from '../icon/Icon';
 
-export const Captcha = ({ onclick, rangeCount }) => {
-  const [data, setData] = useState("");
-  const [right, setRight] = useState(false);
-  let range = rangeCount <= 100 ? rangeCount : 0;
-  let rangeElement = document.getElementsByClassName(styles.range);
-  useEffect(() => {
-    for (let element of rangeElement) {
-      element.style.marginLeft = `${range + 60}%`;
-      element.style.color = data;
-    }
-  }, [range, data])
+import { compereConfigs } from './../../utils';
+
+import SvgCaptchaArrowUp from './../icon/CaptchaArrowUp';
+import SvgCaptchaArrowDown from './../icon/CaptchaArrowDown';
 
-  function sliderInput(event) {
-    setData(rangeCount == event.target.value ? 'green' : 'indianred');
-    let selector = document.getElementsByClassName(styles.selector);
-    let selectBtn = document.getElementsByClassName(styles.selectBtn);
-    let progressBar = document.getElementsByClassName(styles.progressBar);
+import styles from './captcha.module.css';
 
-    selector[0].style.left = event.target.value + '%';
-    progressBar[0].style.width = event.target.value + '%';
+export const Captcha = ({ size, color, range, label, getRange }) => {
 
-    if (rangeCount == event.target.value) {
-      selectBtn[0].style.background = "pink";
-    }
-    else {
-      selectBtn[0].style.background = "red";
-    }
-  }
+    const [rangeNumber, setRangeNumber] = useState(0);
+    const [rangeProgress, setRangeProgress] = useState(0);
 
-  function sliderChange(e) {
-    setRight(rangeCount == e.target.value ? true : false);
-  }
+    const configStyles = compereConfigs();
 
-  return (
-    <>
-      <div className={styles.main}>
-        <div className={styles.range}>
-          {/*<Icon className='icon-vector-down'/>*/}
-          <i className='icon-vector-down'></i>
-        </div>
-        <input type='range' className={styles.slider} onClick={right ? onclick : null} onInput={sliderInput} onMouseUp={sliderChange} />
-        <div className={styles.selector} >
-          <div className={styles.selectBtn}></div>
-        </div>
-        <div className={styles.progressBar}></div>
-        <div className={styles.range} >
-          {/*<Icon className='icon-vector-up'/>*/}
-          <i className='icon-vector-up'></i>
-        </div>
-      </div>
+    const handleRange = (e) => {
+        const value = e.target.value;
+        getRange(value);
+        setRangeProgress(value);
+    };
 
-    </>
-  );
+    useEffect(() => {
+        if (range === undefined || range === null) {
+            alert('Please add range property on Captcha component');
+        }
+        if (!getRange) {
+            alert('Please add getRange property on Captcha component');
+        }
+        if (range >= 100) {
+            setRangeNumber(100);
+        } else if (range <= 0) {
+            setRangeNumber(0);
+        } else {
+            const roundedRange = Math.ceil(range / 5) * 5;
+            setRangeNumber(Math.min(roundedRange, 100));
+        }
+    }, [range, getRange]);
+
+    return (
+        <>
+            {
+                label && <p
+                    style={{
+                        fontSize: size ? size : configStyles.Captcha.size,
+                        color: color ? color : configStyles.Captcha.color
+                    }}
+                >{ label }</p>
+            }
+            <div
+                style={{
+                    width: '100%',
+                    height: '76px',
+                    maxWidth: '400px',
+                    position: 'relative',
+                }}
+            >
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '0px',
+                        height: '15px',
+                        left: `calc(${rangeNumber}% - 6px)`,
+                    }}
+                >
+                    <SvgCaptchaArrowDown />
+                </div>
+                <div
+                    style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        top: '23px',
+                        left: '0px',
+                        width: '100%',
+                        height: '30px',
+                        alignItems: 'center',
+                        zIndex: 1
+                    }}
+                    className={styles['start-point']}
+                >
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: '13px',
+                            right: '0px',
+                            width: '100%',
+                            height: '4px',
+                            borderRadius: '2px',
+                            backgroundColor: '#EEEEEE',
+                            borderRadius: '10px',
+                            zIndex: -2
+                        }}
+                    ></div>
+                    <input
+                        min={0}
+                        step={5}
+                        max={100}
+                        type='range'
+                        value={rangeProgress}
+                        style={{
+                            height: '4px',
+                            width: '100%',
+                            borderRadius: '2px',
+                            cursor: 'pointer',
+                            backgroundColor: 'transparent'
+                        }}
+                        className={`
+                            ${styles['range']}
+                            ${
+                                +rangeProgress === rangeNumber ?
+                                styles['range-success'] :
+                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
+                                styles['range-error'] :
+                                styles['range-default']
+                            }
+                        `}
+                        onInput={handleRange}
+                    />
+                    <div
+                        style={{
+                            position: 'absolute',
+                            top: '13px',
+                            left: '0px',
+                            width: rangeProgress + '%',
+                            height: '4px',
+                            borderRadius: '2px',
+                            backgroundColor:
+                                +rangeProgress === rangeNumber ?
+                                '#0DA574' :
+                                +rangeProgress !== rangeNumber && +rangeProgress > 0 ?
+                                '#EE0000' :
+                                'transparent' ,
+                            borderRadius: '2px',
+                            zIndex: -1
+                        }}
+                    ></div>
+                </div>
+                <div
+                    style={{
+                        position: 'absolute',
+                        bottom: '0px',
+                        height: '15px',
+                        left: `calc(${rangeNumber}% - 6px)`,
+                        transform: 'translate(-50% -50%)'
+                    }}
+                >
+                    <SvgCaptchaArrowUp />
+                </div>
+            </div>
+        </>
+    );
 };
 
 Captcha.propTypes = {
-  onclick: PropTypes.func,
-  className: PropTypes.string,
-  rangeCount: PropTypes.number
+    label: PropTypes.string,
+    range: PropTypes.number.isRequired,
+    getRange: PropTypes.func.isRequired
 };
-
-Captcha.defaultProps = {
-  onclick: undefined
-};

package/src/components/file/file.module.css

@@ -98,7 +98,7 @@
 }
 .upload-file-content > img {
     display: block;
-    width: 2.5rem;
+    width: 27.8rem;
     height: auto;
     max-height: 95%;
     object-fit: contain;

package/src/components/file/index.js

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
+
+import PDF from './../icon/PDF';
+
 import styles from "./file.module.css";
-import Icon from '../icon/Icon';
-import pdfImage from './../../assets/pdf.svg';
 
 export const File = ({
   name,
@@ -18,9 +19,9 @@ export const File = ({
   fileExtensions,
   ...props
 }) => {
-  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImage : null);
   const [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
+  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : 'pdf' : null);
 
   const handleCheckFile = (e) => {
     const file = e.target.files;
@@ -31,7 +32,7 @@ export const File = ({
           if (file[0].type === 'application/pdf') {
             setError('');
             onChange({file});
-            setImage(pdfImage);
+            setImage('pdf');
           } else {
             setError('');
             onChange({file});
@@ -69,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
@@ -83,7 +83,9 @@ export const File = ({
             {
               image ?
                 <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
-                  <img src={image} alt={fileName} />
+                  {
+                    image === 'pdf' ? <PDF /> : <img src={image} alt={fileName} />
+                  }
                 </div> :
                 <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
                   <img src="../../assets/upload.svg" alt="" />
@@ -106,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/CaptchaArrowDown.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCaptchaArrowDown = ({ title, titleId, ...props }) => (
+  <svg
+    width="12"
+    height="15"
+    viewBox="0 0 12 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+        d="M6 0.00146537C5.77271 0.00146539 5.55473 0.0936418 5.39402 0.257718C5.2333 0.421795 5.14301 0.64433 5.14301 0.876368L5.14301 11.013L1.46482 7.25615C1.38514 7.17481 1.29055 7.11028 1.18644 7.06626C1.08233 7.02224 0.970753 6.99958 0.85807 6.99958C0.745386 6.99958 0.633807 7.02224 0.529701 7.06626C0.425595 7.11028 0.331002 7.17481 0.251322 7.25616C0.171643 7.3375 0.108438 7.43407 0.0653156 7.54035C0.0221934 7.64663 -5.45598e-07 7.76055 -5.35541e-07 7.87559C-5.25484e-07 7.99063 0.0221934 8.10454 0.0653157 8.21082C0.108438 8.3171 0.171643 8.41367 0.251322 8.49502L5.39325 13.7444C5.47286 13.8259 5.56743 13.8905 5.67155 13.9347C5.77566 13.9788 5.88728 14.0015 6 14.0015C6.11272 14.0015 6.22434 13.9788 6.32846 13.9347C6.43257 13.8905 6.52714 13.8259 6.60675 13.7444L11.7487 8.49502C11.9096 8.33073 12 8.10792 12 7.87559C12 7.64325 11.9096 7.42044 11.7487 7.25615C11.5878 7.09187 11.3695 6.99958 11.1419 6.99958C10.9144 6.99958 10.6961 7.09187 10.5352 7.25615L6.85699 11.013L6.85699 0.876368C6.85699 0.64433 6.7667 0.421794 6.60598 0.257718C6.44526 0.0936418 6.22729 0.00146535 6 0.00146537Z"
+        fill="#00236A"
+    />
+  </svg>
+);
+export default SvgCaptchaArrowDown;

package/src/components/icon/CaptchaArrowUp.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCaptchaArrowUp = ({ title, titleId, ...props }) => (
+  <svg
+    width="12"
+    height="15"
+    viewBox="0 0 12 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+        d="M6 14.9988C6.22729 14.9988 6.44527 14.9066 6.60598 14.7425C6.7667 14.5785 6.85699 14.3559 6.85699 14.1239L6.85699 3.98726L10.5352 7.74409C10.6149 7.82543 10.7095 7.88996 10.8136 7.93398C10.9177 7.97801 11.0292 8.00067 11.1419 8.00067C11.2546 8.00067 11.3662 7.97801 11.4703 7.93398C11.5744 7.88996 11.669 7.82543 11.7487 7.74409C11.8284 7.66274 11.8916 7.56617 11.9347 7.45989C11.9778 7.35361 12 7.2397 12 7.12466C12 7.00962 11.9778 6.89571 11.9347 6.78943C11.8916 6.68314 11.8284 6.58657 11.7487 6.50523L6.60675 1.25581C6.52714 1.17434 6.43257 1.1097 6.32845 1.06559C6.22434 1.02148 6.11272 0.998779 6 0.998779C5.88728 0.998779 5.77566 1.02148 5.67154 1.06559C5.56743 1.1097 5.47286 1.17434 5.39325 1.25581L0.251323 6.50523C0.0904038 6.66951 0 6.89233 0 7.12466C0 7.35699 0.0904038 7.57981 0.251323 7.74409C0.412243 7.90837 0.630497 8.00067 0.858071 8.00067C1.08565 8.00067 1.3039 7.90837 1.46482 7.74409L5.14301 3.98726L5.14301 14.1239C5.14301 14.3559 5.2333 14.5785 5.39402 14.7425C5.55473 14.9066 5.77271 14.9988 6 14.9988Z"
+        fill="#00236A"
+    />
+  </svg>
+);
+export default SvgCaptchaArrowUp;

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;