@xaypay/tui 0.0.16 → 0.0.18

package/dist/index.es.js

@@ -349,7 +349,7 @@ Checkbox.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$6 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?b29ky3);src:url(fonts/icomoon.eot?b29ky3#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?b29ky3) format(\"truetype\"),url(fonts/icomoon.woff?b29ky3) format(\"woff\"),url(fonts/icomoon.svg?b29ky3#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-close:before{content:\"\\e907\"}.icon-arrow-up:before{content:\"\\e905\"}.icon-arrow-down:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
+var css_248z$6 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?r3pd9w);src:url(fonts/icomoon.eot?r3pd9w#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?r3pd9w) format(\"truetype\"),url(fonts/icomoon.woff?r3pd9w) format(\"woff\"),url(fonts/icomoon.svg?r3pd9w#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-vector-up:before{content:\"\\e908\"}.icon-vector-down:before{content:\"\\e909\"}.icon-close:before{content:\"\\e907\"}.icon-icon-arrow-top:before{content:\"\\e905\"}.icon-icon-arrow-bottom:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
 styleInject(css_248z$6);
 
 /**
@@ -506,9 +506,9 @@ const Pagination = ({
   offset,
   className
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = useState(2);
-  const [currentPageNumber, setCurrentPage] = useState(1);
-  const [currentTotalCount, setcurrentTotalCount] = useState(10);
+  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -523,7 +523,7 @@ const Pagination = ({
   };
   useEffect(() => {
     onChange(currentPageNumber);
-  }, []);
+  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
@@ -650,7 +650,7 @@ Radio.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$2 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{margin:0;padding:0;position:relative;width:40%}.captcha-module_slider__KLYny{-webkit-appearance:none;background-color:hsla(0,0%,100%,.575);border:.1px solid hsla(0,0%,59%,.432);height:7px;outline:none;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:48px;position:relative;width:48px;z-index:3}.captcha-module_selector__JFhb4{bottom:-20px;height:48px;left:50%;position:absolute;width:48px;z-index:2}.captcha-module_selectBtn__GP1iH{background-image:url(https://i.ibb.co/rQZNNzN/blue.png);background-position:50%;background-size:cover;border-radius:50%;bottom:40px;height:40px;position:absolute;right:30px;width:40px}.captcha-module_progressBar__mhdtM{background:#7070ee;bottom:38px;height:7px;left:0;margin:0;padding:0;position:absolute;width:50%}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
+var css_248z$2 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
 var styles$2 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
 styleInject(css_248z$2);
 
@@ -664,7 +664,7 @@ const Captcha = ({
   let rangeElement = document.getElementsByClassName(styles$2.range);
   useEffect(() => {
     for (let element of rangeElement) {
-      element.style.marginLeft = `${range - 3}%`;
+      element.style.marginLeft = `${range + 60}%`;
       element.style.color = data;
     }
   }, [range, data]);
@@ -676,9 +676,9 @@ const Captcha = ({
     selector[0].style.left = event.target.value + '%';
     progressBar[0].style.width = event.target.value + '%';
     if (rangeCount == event.target.value) {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
+      selectBtn[0].style.background = "pink";
     } else {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
+      selectBtn[0].style.background = "red";
     }
   }
   function sliderChange(e) {
@@ -688,7 +688,9 @@ const Captcha = ({
     className: styles$2.main
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$2.range
-  }, "\u25BC"), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "icon-vector-down"
+  })), /*#__PURE__*/React.createElement("input", {
     type: "range",
     className: styles$2.slider,
     onClick: right ? onclick : null,
@@ -702,7 +704,9 @@ const Captcha = ({
     className: styles$2.progressBar
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$2.range
-  }, "\u25B2")));
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "icon-vector-up"
+  }))));
 };
 Captcha.propTypes = {
   onclick: PropTypes.func,
@@ -713,8 +717,8 @@ Captcha.defaultProps = {
   onclick: undefined
 };
 
-var css_248z$1 = ".stepper-module_bigRing__5GBm0{border:1px solid gray;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallRing__u-5a8{background-color:gray;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}.stepper-module_activeRing__Lzvh1{border:1px solid blue;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallActiveRing__im-XG{background-color:blue;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}";
-var styles$1 = {"bigRing":"stepper-module_bigRing__5GBm0","smallRing":"stepper-module_smallRing__u-5a8","activeRing":"stepper-module_activeRing__Lzvh1","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
+var css_248z$1 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$1 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
 styleInject(css_248z$1);
 
 const Stepper = ({
@@ -724,7 +728,9 @@ const Stepper = ({
   activeSteps
 }) => {
   classnames(className);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (() => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1['stepper-container']
+  }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push( /*#__PURE__*/React.createElement("div", {
@@ -773,11 +779,13 @@ const Select = ({
   required,
   defaultOption,
   onChange,
+  keyNames,
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
+  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = useState(false);
-  let [newSelected, setNewSelected] = useState(selected);
+  let [newSelected, setNewSelected] = useState(parseSelectedData);
   classnames(styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required
@@ -796,7 +804,7 @@ const Select = ({
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['select-content-top-text']
-  }, newSelected && newSelected.name ? newSelected.name : defaultOption), /*#__PURE__*/React.createElement("div", {
+  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
     className: styles['select-content-top-icon']
   }, /*#__PURE__*/React.createElement(Icon, {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
@@ -823,8 +831,8 @@ const Select = ({
         onChange(option);
         setOpened(!opened);
       },
-      defaultValue: option.id
-    }, option.name);
+      defaultValue: option[keyNames.id]
+    }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React.createElement("span", {
     className: styles.eMessage
   }, eMessage) : null);
@@ -839,8 +847,9 @@ Select.propTypes = {
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  selected: PropTypes.object,
-  jsonData: PropTypes.string
+  selected: PropTypes.string,
+  jsonData: PropTypes.string,
+  keyNames: PropTypes.object
 };
 Select.defaultProps = {
   size: 'medium'

package/dist/index.js

@@ -360,7 +360,7 @@ Checkbox.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$6 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?b29ky3);src:url(fonts/icomoon.eot?b29ky3#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?b29ky3) format(\"truetype\"),url(fonts/icomoon.woff?b29ky3) format(\"woff\"),url(fonts/icomoon.svg?b29ky3#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-close:before{content:\"\\e907\"}.icon-arrow-up:before{content:\"\\e905\"}.icon-arrow-down:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
+var css_248z$6 = "@font-face{font-display:block;font-family:icomoon;font-style:normal;font-weight:400;src:url(fonts/icomoon.eot?r3pd9w);src:url(fonts/icomoon.eot?r3pd9w#iefix) format(\"embedded-opentype\"),url(fonts/icomoon.ttf?r3pd9w) format(\"truetype\"),url(fonts/icomoon.woff?r3pd9w) format(\"woff\"),url(fonts/icomoon.svg?r3pd9w#icomoon) format(\"svg\")}[class*=\" icon-\"],[class^=icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-vector-up:before{content:\"\\e908\"}.icon-vector-down:before{content:\"\\e909\"}.icon-close:before{content:\"\\e907\"}.icon-icon-arrow-top:before{content:\"\\e905\"}.icon-icon-arrow-bottom:before{content:\"\\e906\"}.icon-arrow:before{content:\"\\e900\"}.icon-arrow-jump-next:before{content:\"\\e901\"}.icon-arrow-jump-back:before{content:\"\\e902\"}.icon-text:before{content:\"\\e903\"}.icon-arrow-back:before{content:\"\\e904\"}";
 styleInject(css_248z$6);
 
 /**
@@ -517,9 +517,9 @@ const Pagination = ({
   offset,
   className
 }) => {
-  const [siblingCountNumber, setSibilingCountNumber] = React.useState(2);
-  const [currentPageNumber, setCurrentPage] = React.useState(1);
-  const [currentTotalCount, setcurrentTotalCount] = React.useState(10);
+  const [siblingCountNumber, setSibilingCountNumber] = React.useState(siblingCount);
+  const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
+  const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
   React.useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -534,7 +534,7 @@ const Pagination = ({
   };
   React.useEffect(() => {
     onChange(currentPageNumber);
-  }, []);
+  }, [currentPageNumber]);
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
@@ -661,7 +661,7 @@ Radio.defaultProps = {
   jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
 };
 
-var css_248z$2 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{margin:0;padding:0;position:relative;width:40%}.captcha-module_slider__KLYny{-webkit-appearance:none;background-color:hsla(0,0%,100%,.575);border:.1px solid hsla(0,0%,59%,.432);height:7px;outline:none;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:48px;position:relative;width:48px;z-index:3}.captcha-module_selector__JFhb4{bottom:-20px;height:48px;left:50%;position:absolute;width:48px;z-index:2}.captcha-module_selectBtn__GP1iH{background-image:url(https://i.ibb.co/rQZNNzN/blue.png);background-position:50%;background-size:cover;border-radius:50%;bottom:40px;height:40px;position:absolute;right:30px;width:40px}.captcha-module_progressBar__mhdtM{background:#7070ee;bottom:38px;height:7px;left:0;margin:0;padding:0;position:absolute;width:50%}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
+var css_248z$2 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
 var styles$2 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
 styleInject(css_248z$2);
 
@@ -675,7 +675,7 @@ const Captcha = ({
   let rangeElement = document.getElementsByClassName(styles$2.range);
   React.useEffect(() => {
     for (let element of rangeElement) {
-      element.style.marginLeft = `${range - 3}%`;
+      element.style.marginLeft = `${range + 60}%`;
       element.style.color = data;
     }
   }, [range, data]);
@@ -687,9 +687,9 @@ const Captcha = ({
     selector[0].style.left = event.target.value + '%';
     progressBar[0].style.width = event.target.value + '%';
     if (rangeCount == event.target.value) {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/b1HDRtd/green.png')";
+      selectBtn[0].style.background = "pink";
     } else {
-      selectBtn[0].style.backgroundImage = "url('https://i.ibb.co/QvXjjLM/red.png')";
+      selectBtn[0].style.background = "red";
     }
   }
   function sliderChange(e) {
@@ -699,7 +699,9 @@ const Captcha = ({
     className: styles$2.main
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$2.range
-  }, "\u25BC"), /*#__PURE__*/React__default["default"].createElement("input", {
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "icon-vector-down"
+  })), /*#__PURE__*/React__default["default"].createElement("input", {
     type: "range",
     className: styles$2.slider,
     onClick: right ? onclick : null,
@@ -713,7 +715,9 @@ const Captcha = ({
     className: styles$2.progressBar
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$2.range
-  }, "\u25B2")));
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    className: "icon-vector-up"
+  }))));
 };
 Captcha.propTypes = {
   onclick: PropTypes__default["default"].func,
@@ -724,8 +728,8 @@ Captcha.defaultProps = {
   onclick: undefined
 };
 
-var css_248z$1 = ".stepper-module_bigRing__5GBm0{border:1px solid gray;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallRing__u-5a8{background-color:gray;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}.stepper-module_activeRing__Lzvh1{border:1px solid blue;border-radius:50%;cursor:pointer;height:30px;margin:10px;position:relative;width:30px}.stepper-module_smallActiveRing__im-XG{background-color:blue;border-radius:50%;color:#fff;font-size:12px;height:50%;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:50%}";
-var styles$1 = {"bigRing":"stepper-module_bigRing__5GBm0","smallRing":"stepper-module_smallRing__u-5a8","activeRing":"stepper-module_activeRing__Lzvh1","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
+var css_248z$1 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$1 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
 styleInject(css_248z$1);
 
 const Stepper = ({
@@ -735,7 +739,9 @@ const Stepper = ({
   activeSteps
 }) => {
   classnames__default["default"](className);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (() => {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$1['stepper-container']
+  }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push( /*#__PURE__*/React__default["default"].createElement("div", {
@@ -784,11 +790,13 @@ const Select = ({
   required,
   defaultOption,
   onChange,
+  keyNames,
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
+  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = React.useState(false);
-  let [newSelected, setNewSelected] = React.useState(selected);
+  let [newSelected, setNewSelected] = React.useState(parseSelectedData);
   classnames__default["default"](styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required
@@ -807,7 +815,7 @@ const Select = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles['select-content-top-text']
-  }, newSelected && newSelected.name ? newSelected.name : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles['select-content-top-icon']
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
@@ -834,8 +842,8 @@ const Select = ({
         onChange(option);
         setOpened(!opened);
       },
-      defaultValue: option.id
-    }, option.name);
+      defaultValue: option[keyNames.id]
+    }, option[keyNames.name]);
   }))) : null)), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles.eMessage
   }, eMessage) : null);
@@ -850,8 +858,9 @@ Select.propTypes = {
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
-  selected: PropTypes__default["default"].object,
-  jsonData: PropTypes__default["default"].string
+  selected: PropTypes__default["default"].string,
+  jsonData: PropTypes__default["default"].string,
+  keyNames: PropTypes__default["default"].object
 };
 Select.defaultProps = {
   size: 'medium'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/assets_old/icons/demo.html

@@ -9,10 +9,38 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;8)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;10)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-vector-up"></span>
+                <span class="mls"> icon-vector-up</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e908" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe908;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-vector-down"></span>
+                <span class="mls"> icon-vector-down</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e909" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe909;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-close"></span>

package/src/assets_old/icons/fonts/icomoon.svg

@@ -15,4 +15,6 @@
 <glyph unicode="&#xe905;" glyph-name="icon-arrow-top" horiz-adv-x="1707" d="M852.16 21.315c-28.44-0.056-56.001 9.867-77.899 28.044l-730.297 609.647c-24.857 20.697-40.488 50.436-43.455 82.676-2.967 32.242 6.972 64.344 27.631 89.243 20.661 24.901 50.348 40.559 82.533 43.531s64.231-6.984 89.088-27.681l652.4-546.243 652.4 526.735c12.449 10.127 26.776 17.692 42.151 22.256s31.506 6.038 47.455 4.338c15.948-1.7 31.397-6.539 45.48-14.242 14.071-7.702 26.484-18.115 36.53-30.64 11.144-12.537 19.594-27.245 24.8-43.202s7.072-32.821 5.475-49.532-6.633-32.913-14.765-47.587c-8.145-14.675-19.229-27.508-32.543-37.694l-730.302-588.919c-22.528-15.304-49.525-22.602-76.68-20.728z" />
 <glyph unicode="&#xe906;" glyph-name="icon-arrow-bottom" horiz-adv-x="1707" d="M854.84 874.686c28.44 0.056 56.001-9.867 77.899-28.044l730.294-609.648c24.861-20.697 40.493-50.436 43.455-82.676 2.975-32.242-6.962-64.344-27.629-89.244-20.655-24.901-50.345-40.559-82.534-43.531-32.177-2.973-64.232 6.984-89.082 27.681l-652.404 546.244-652.401-526.736c-12.45-10.129-26.776-17.692-42.153-22.256s-31.504-6.038-47.453-4.339c-15.948 1.7-31.405 6.54-45.479 14.242-14.075 7.703-26.491 18.116-36.536 30.642-11.147 12.537-19.589 27.246-24.798 43.202-5.208 15.958-7.071 32.821-5.472 49.533s6.627 32.912 14.768 47.588c8.14 14.675 19.219 27.508 32.542 37.694l730.299 588.92c22.529 15.304 49.526 22.602 76.682 20.728z" />
 <glyph unicode="&#xe907;" glyph-name="close" d="M595.597 450.819l414.718 414.718c9.324 10.883 14.194 24.882 13.642 39.2-0.558 14.318-6.491 27.899-16.623 38.031s-23.711 16.067-38.030 16.62c-14.319 0.553-28.319-4.317-39.202-13.637l-414.716-414.718-414.718 415.287c-10.883 9.32-24.881 14.19-39.199 13.637s-27.899-6.488-38.031-16.62c-10.132-10.132-16.067-23.713-16.62-38.031s4.317-28.316 13.637-39.2l414.718-415.287-415.287-414.72c-5.955-5.097-10.792-11.372-14.207-18.432s-5.334-14.746-5.636-22.579c-0.303-7.834 1.018-15.65 3.878-22.949s7.198-13.932 12.742-19.473c5.544-5.547 12.174-9.882 19.475-12.743s15.113-4.181 22.948-3.88c7.835 0.307 15.522 2.224 22.58 5.638s13.334 8.255 18.434 14.205l415.287 414.718 414.716-414.718c10.883-9.318 24.883-14.188 39.202-13.636 14.319 0.558 27.898 6.491 38.030 16.623s16.065 23.711 16.623 38.030c0.552 14.319-4.318 28.314-13.642 39.196l-414.718 414.72z" />
+<glyph unicode="&#xe908;" glyph-name="vector-up" horiz-adv-x="819" d="M409.501-29.752c15.512 0 30.39 6.292 41.358 17.493s17.132 26.386 17.132 42.22v691.829l251.038-256.404c5.44-5.552 11.896-9.956 19-12.96s14.714-4.551 22.407-4.551c7.692 0 15.308 1.546 22.414 4.551s13.562 7.408 19 12.96c5.44 5.552 9.753 12.143 12.695 19.396s4.457 15.028 4.457 22.879c0 7.851-1.516 15.626-4.457 22.88s-7.255 13.845-12.695 19.396l-350.939 358.274c-5.434 5.561-11.888 9.973-18.994 12.983s-14.723 4.56-22.417 4.56c-7.693 0-15.311-1.55-22.418-4.56s-13.56-7.422-18.993-12.983l-350.937-358.274c-10.982-11.212-17.153-26.42-17.153-42.276s6.171-31.064 17.153-42.276c10.982-11.212 25.879-17.511 41.411-17.511s30.428 6.298 41.411 17.511l251.037 256.404v-691.829c0-15.834 6.163-31.020 17.132-42.22s25.846-17.493 41.358-17.493z" />
+<glyph unicode="&#xe909;" glyph-name="vector-down" horiz-adv-x="819" d="M409.501 925.75c-15.512 0-30.39-6.291-41.358-17.49s-17.132-26.387-17.132-42.223v-691.83l-251.038 256.407c-5.438 5.552-11.894 9.956-18.999 12.96s-14.72 4.551-22.412 4.551c-7.691 0-15.306-1.546-22.412-4.551s-13.562-7.408-18.999-12.96c-5.438-5.552-9.752-12.143-12.695-19.396s-4.458-15.028-4.458-22.88c0-7.851 1.515-15.626 4.458-22.881s7.257-13.845 12.695-19.396l350.938-358.273c5.434-5.563 11.888-9.972 18.994-12.981s14.723-4.559 22.417-4.559c7.693 0 15.311 1.55 22.418 4.559s13.56 7.419 18.993 12.981l350.94 358.274c10.981 11.212 17.151 26.42 17.151 42.276s-6.17 31.064-17.151 42.276c-10.981 11.212-25.881 17.511-41.414 17.511-15.527 0-30.426-6.298-41.407-17.511l-251.039-256.407v691.83c0 15.837-6.163 31.025-17.132 42.223s-25.846 17.49-41.358 17.49z" />
 </font></defs></svg>

package/src/assets_old/icons/selection.json

@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M595.597 509.181l414.718-414.718c9.324-10.883 14.194-24.882 13.642-39.2-0.558-14.318-6.491-27.899-16.623-38.031s-23.711-16.067-38.030-16.62c-14.319-0.553-28.319 4.317-39.202 13.637l-414.716 414.718-414.718-415.287c-10.883-9.32-24.881-14.19-39.199-13.637s-27.899 6.488-38.031 16.62c-10.132 10.132-16.067 23.713-16.62 38.031s4.317 28.316 13.637 39.2l414.718 415.287-415.287 414.72c-5.955 5.097-10.792 11.372-14.207 18.432s-5.334 14.746-5.636 22.579c-0.303 7.834 1.018 15.65 3.878 22.949s7.198 13.932 12.742 19.473c5.544 5.547 12.174 9.882 19.475 12.743s15.113 4.181 22.948 3.88c7.835-0.307 15.522-2.224 22.58-5.638s13.334-8.255 18.434-14.205l415.287-414.718 414.716 414.718c10.883 9.318 24.883 14.188 39.202 13.636 14.319-0.558 27.898-6.491 38.030-16.623s16.065-23.711 16.623-38.030c0.552-14.319-4.318-28.314-13.642-39.196l-414.718-414.72z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["close"]},"attrs":[{}],"properties":{"order":12,"id":7,"name":"close","prevSize":32,"code":59655},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M852.16 938.685c-28.44 0.056-56.001-9.867-77.899-28.044l-730.297-609.647c-24.857-20.697-40.488-50.436-43.455-82.676-2.967-32.242 6.972-64.344 27.631-89.243 20.661-24.901 50.348-40.559 82.533-43.531s64.231 6.984 89.088 27.681l652.4 546.243 652.4-526.735c12.449-10.127 26.776-17.692 42.151-22.256s31.506-6.038 47.455-4.338c15.948 1.7 31.397 6.539 45.48 14.242 14.071 7.702 26.484 18.115 36.53 30.64 11.144 12.537 19.594 27.245 24.8 43.202s7.072 32.821 5.475 49.532-6.633 32.913-14.765 47.587c-8.145 14.675-19.229 27.508-32.543 37.694l-730.302 588.919c-22.528 15.304-49.525 22.602-76.68 20.728z"],"width":1707,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["icon-arrow-top"],"grid":32},"attrs":[{}],"properties":{"order":11,"id":0,"name":"icon-arrow-top","prevSize":32,"code":59653},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M854.84 85.314c28.44-0.056 56.001 9.867 77.899 28.044l730.294 609.648c24.861 20.697 40.493 50.436 43.455 82.676 2.975 32.242-6.962 64.344-27.629 89.244-20.655 24.901-50.345 40.559-82.534 43.531-32.177 2.973-64.232-6.984-89.082-27.681l-652.404-546.244-652.401 526.736c-12.45 10.129-26.776 17.692-42.153 22.256s-31.504 6.038-47.453 4.339c-15.948-1.7-31.405-6.54-45.479-14.242-14.075-7.703-26.491-18.116-36.536-30.642-11.147-12.537-19.589-27.246-24.798-43.202-5.208-15.958-7.071-32.821-5.472-49.533s6.627-32.912 14.768-47.588c8.14-14.675 19.219-27.508 32.542-37.694l730.299-588.92c22.529-15.304 49.526-22.602 76.682-20.728z"],"width":1707,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["icon-arrow-bottom"],"grid":32},"attrs":[{}],"properties":{"order":10,"id":1,"name":"icon-arrow-bottom","prevSize":32,"code":59654},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M72.658 1023.871c-16.947 0.026-33.37-5.914-46.419-16.794-7.344-6.127-13.415-13.645-17.865-22.135s-7.191-17.783-8.067-27.341c-0.876-9.566 0.131-19.2 2.963-28.365s7.433-17.681 13.54-25.062l324.929-391.173-313.325-391.907c-6.025-7.465-10.524-16.055-13.239-25.276s-3.592-18.889-2.581-28.452c1.011-9.563 3.89-18.83 8.472-27.269s10.776-15.884 18.227-21.907c7.504-6.644 16.292-11.655 25.813-14.72s19.567-4.116 29.511-3.088c9.943 1.028 19.568 4.113 28.27 9.061s16.294 11.653 22.298 19.693l350.315 437.885c10.668 13.059 16.499 29.439 16.499 46.344s-5.832 33.284-16.499 46.343l-362.644 437.888c-7.276 8.832-16.518 15.812-26.978 20.378s-21.84 6.579-33.221 5.897z"],"width":512,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow"],"grid":32},"attrs":[{}],"properties":{"order":3,"id":2,"name":"arrow","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M669.791 1023.727c-16.941 0.026-33.361-5.912-46.405-16.789-7.343-6.125-13.411-13.641-17.86-22.129s-7.189-17.778-8.065-27.333c-0.876-9.563 0.131-19.195 2.962-28.357s7.431-17.676 13.536-25.055l324.842-391.063-313.24-391.797c-6.023-7.463-10.521-16.050-13.235-25.269s-3.592-18.884-2.58-28.444c1.011-9.56 3.889-18.825 8.47-27.261s10.774-15.88 18.222-21.901c7.502-6.642 16.287-11.652 25.805-14.716s19.562-4.115 29.503-3.087c9.94 1.028 19.562 4.112 28.262 9.058s16.289 11.65 22.292 19.687l350.212 437.762c10.672 13.055 16.498 29.431 16.498 46.331s-5.826 33.275-16.498 46.33l-362.538 437.765c-7.274 8.83-16.513 15.808-26.97 20.372s-21.834 6.577-33.212 5.895z","M72.627 1023.727c-16.942 0.026-33.361-5.912-46.406-16.789-7.342-6.125-13.411-13.641-17.86-22.129s-7.189-17.778-8.065-27.333c-0.876-9.563 0.131-19.195 2.962-28.357s7.431-17.676 13.536-25.055l324.838-391.063-313.237-391.797c-6.023-7.463-10.521-16.050-13.235-25.269s-3.591-18.884-2.58-28.444c1.011-9.56 3.889-18.825 8.47-27.261s10.773-15.88 18.222-21.901c7.502-6.642 16.287-11.652 25.806-14.716s19.561-4.115 29.503-3.087c9.94 1.028 19.562 4.112 28.262 9.058s16.289 11.65 22.292 19.687l350.217 437.762c10.665 13.055 16.494 29.431 16.494 46.331s-5.83 33.275-16.494 46.33l-362.542 437.765c-7.274 8.83-16.513 15.808-26.97 20.372s-21.834 6.577-33.212 5.895z"],"width":1109,"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-jump-next"],"grid":32},"attrs":[{},{}],"properties":{"order":4,"id":3,"name":"arrow-jump-next","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M439.209 1023.727c16.941 0.026 33.361-5.912 46.405-16.789 7.343-6.125 13.411-13.641 17.86-22.129s7.189-17.778 8.065-27.333c0.876-9.563-0.131-19.195-2.962-28.357s-7.431-17.676-13.536-25.055l-324.839-391.063 313.236-391.797c6.023-7.463 10.521-16.050 13.235-25.269s3.592-18.884 2.58-28.444c-1.011-9.56-3.889-18.825-8.47-27.261s-10.774-15.879-18.222-21.901c-7.502-6.642-16.287-11.652-25.805-14.716s-19.562-4.115-29.503-3.087c-9.94 1.028-19.562 4.112-28.262 9.058s-16.289 11.65-22.292 19.687l-350.215 437.762c-10.665 13.055-16.494 29.431-16.494 46.331s5.83 33.275 16.494 46.33l362.542 437.765c7.274 8.829 16.513 15.808 26.97 20.372s21.834 6.577 33.212 5.895z","M1036.376 1023.727c16.934 0.026 33.356-5.912 46.4-16.789 7.345-6.125 13.41-13.641 17.864-22.129 4.445-8.489 7.183-17.778 8.062-27.333 0.879-9.563-0.128-19.195-2.96-28.357s-7.431-17.676-13.538-25.055l-324.837-391.063 313.235-391.797c6.023-7.463 10.519-16.050 13.24-25.269 2.713-9.217 3.592-18.884 2.576-28.444-1.007-9.56-3.89-18.825-8.472-27.261s-10.775-15.879-18.222-21.901c-7.499-6.642-16.285-11.652-25.806-14.716-9.512-3.063-19.561-4.115-29.5-3.087s-19.561 4.112-28.263 9.058c-8.702 4.947-16.285 11.65-22.292 19.687l-350.215 437.762c-10.665 13.055-16.494 29.431-16.494 46.331s5.83 33.275 16.494 46.33l362.542 437.765c7.277 8.829 16.516 15.808 26.966 20.372 10.459 4.564 21.839 6.577 33.22 5.895z"],"width":1109,"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-jump-back"],"grid":32},"attrs":[{},{}],"properties":{"order":5,"id":4,"name":"arrow-jump-back","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M1319.954 511.458c0-27.242 3.586-50.185 10.753-68.825 7.168-19.357 16.844-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.415-8.602 53.767-8.602 18.644 0 36.205 2.864 52.698 8.602 17.21 5.021 31.902 13.619 44.091 25.807 12.184 11.472 21.87 26.886 29.033 46.24 7.168 18.644 10.75 41.58 10.75 68.825 0 26.529-3.586 49.472-10.75 68.825-7.168 18.644-16.846 34.058-29.033 46.245s-26.886 21.148-44.091 26.886c-16.488 5.733-34.053 8.602-52.698 8.602-19.357 0-37.284-2.864-53.767-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.753-42.3-10.753-68.825zM1911.428 511.458c0-27.242 3.586-50.185 10.75-68.825 7.168-19.357 16.846-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.415-8.602 53.769-8.602 18.64 0 36.205 2.864 52.698 8.602 17.21 5.021 31.902 13.619 44.091 25.807 12.184 11.472 21.87 26.886 29.033 46.24 7.168 18.644 10.756 41.58 10.756 68.825 0 26.529-3.586 49.472-10.756 68.825-7.168 18.644-16.846 34.058-29.033 46.245s-26.886 21.148-44.091 26.886c-16.488 5.733-34.058 8.602-52.698 8.602-19.357 0-37.284-2.864-53.769-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.75-42.3-10.75-68.825zM2502.91 511.458c0-27.242 3.586-50.185 10.75-68.825 7.168-19.357 16.846-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.405-8.602 53.776-8.602 18.635 0 36.205 2.864 52.691 8.602 17.21 5.021 31.892 13.619 44.091 25.807 12.184 11.472 21.86 26.886 29.033 46.24 7.168 18.644 10.75 41.58 10.75 68.825 0 26.529-3.577 49.472-10.75 68.825-7.168 18.644-16.846 34.058-29.033 46.245-12.193 12.184-26.886 21.148-44.091 26.886-16.488 5.733-34.058 8.602-52.691 8.602-19.366 0-37.293-2.864-53.776-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.75-42.3-10.75-68.825z"],"width":4096,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["text"],"grid":32},"attrs":[{}],"properties":{"order":6,"id":5,"name":"text","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M439.342 1023.871c16.946 0.026 33.37-5.914 46.418-16.794 7.345-6.127 13.415-13.645 17.865-22.135s7.191-17.783 8.067-27.341c0.876-9.566-0.131-19.2-2.963-28.365s-7.433-17.681-13.54-25.062l-324.93-391.173 313.324-391.907c6.025-7.465 10.524-16.055 13.239-25.276s3.593-18.889 2.581-28.452c-1.011-9.563-3.89-18.83-8.472-27.269s-10.777-15.884-18.227-21.907c-7.504-6.644-16.292-11.655-25.812-14.72s-19.568-4.116-29.511-3.088c-9.943 1.028-19.568 4.113-28.27 9.061s-16.294 11.653-22.298 19.693l-350.314 437.885c-10.668 13.059-16.499 29.439-16.499 46.344s5.832 33.284 16.499 46.343l362.644 437.888c7.276 8.832 16.518 15.812 26.978 20.378s21.84 6.579 33.221 5.897z"],"width":512,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-back"],"grid":32},"attrs":[{}],"properties":{"order":9,"id":6,"name":"arrow-back","prevSize":32,"code":59652},"setIdx":0,"setId":0,"iconIdx":7}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"showGrid":true}}
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M409.501 989.752c15.512 0 30.39-6.292 41.358-17.493s17.132-26.386 17.132-42.22v-691.829l251.038 256.404c5.44 5.552 11.896 9.956 19 12.96s14.714 4.551 22.407 4.551c7.692 0 15.308-1.546 22.414-4.551s13.562-7.408 19-12.96c5.44-5.552 9.753-12.143 12.695-19.396s4.457-15.028 4.457-22.879c0-7.851-1.516-15.626-4.457-22.88s-7.255-13.845-12.695-19.396l-350.939-358.274c-5.434-5.561-11.888-9.973-18.994-12.983s-14.723-4.56-22.417-4.56c-7.693 0-15.311 1.55-22.418 4.56s-13.56 7.422-18.993 12.983l-350.937 358.274c-10.982 11.212-17.153 26.42-17.153 42.276s6.171 31.064 17.153 42.276c10.982 11.212 25.879 17.511 41.411 17.511s30.428-6.298 41.411-17.511l251.037-256.404v691.829c0 15.834 6.163 31.020 17.132 42.22s25.846 17.493 41.358 17.493z"],"attrs":[],"width":819,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["vector-up"],"colorPermutations":{}},"attrs":[],"properties":{"order":14,"id":9,"name":"vector-up","prevSize":32,"code":59656},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M409.501 34.25c-15.512 0-30.39 6.291-41.358 17.49s-17.132 26.387-17.132 42.223v691.83l-251.038-256.407c-5.438-5.552-11.894-9.956-18.999-12.96s-14.72-4.551-22.412-4.551c-7.691 0-15.306 1.546-22.412 4.551s-13.562 7.408-18.999 12.96c-5.438 5.552-9.752 12.143-12.695 19.396s-4.458 15.028-4.458 22.88c0 7.851 1.515 15.626 4.458 22.881s7.257 13.845 12.695 19.396l350.938 358.273c5.434 5.563 11.888 9.972 18.994 12.981s14.723 4.559 22.417 4.559c7.693 0 15.311-1.55 22.418-4.559s13.56-7.419 18.993-12.981l350.94-358.274c10.981-11.212 17.151-26.42 17.151-42.276s-6.17-31.064-17.151-42.276c-10.981-11.212-25.881-17.511-41.414-17.511-15.527 0-30.426 6.298-41.407 17.511l-251.039 256.407v-691.83c0-15.837-6.163-31.025-17.132-42.223s-25.846-17.49-41.358-17.49z"],"attrs":[],"width":819,"isMulticolor":false,"isMulticolor2":false,"grid":32,"tags":["vector-down"],"colorPermutations":{}},"attrs":[],"properties":{"order":13,"id":8,"name":"vector-down","prevSize":32,"code":59657},"setIdx":0,"setId":0,"iconIdx":1},{"icon":{"paths":["M595.597 509.181l414.718-414.718c9.324-10.883 14.194-24.882 13.642-39.2-0.558-14.318-6.491-27.899-16.623-38.031s-23.711-16.067-38.030-16.62c-14.319-0.553-28.319 4.317-39.202 13.637l-414.716 414.718-414.718-415.287c-10.883-9.32-24.881-14.19-39.199-13.637s-27.899 6.488-38.031 16.62c-10.132 10.132-16.067 23.713-16.62 38.031s4.317 28.316 13.637 39.2l414.718 415.287-415.287 414.72c-5.955 5.097-10.792 11.372-14.207 18.432s-5.334 14.746-5.636 22.579c-0.303 7.834 1.018 15.65 3.878 22.949s7.198 13.932 12.742 19.473c5.544 5.547 12.174 9.882 19.475 12.743s15.113 4.181 22.948 3.88c7.835-0.307 15.522-2.224 22.58-5.638s13.334-8.255 18.434-14.205l415.287-414.718 414.716 414.718c10.883 9.318 24.883 14.188 39.202 13.636 14.319-0.558 27.898-6.491 38.030-16.623s16.065-23.711 16.623-38.030c0.552-14.319-4.318-28.314-13.642-39.196l-414.718-414.72z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"grid":32},"attrs":[{}],"properties":{"order":12,"id":0,"name":"close","prevSize":32,"code":59655},"setIdx":0,"setId":0,"iconIdx":2},{"icon":{"paths":["M852.16 938.685c-28.44 0.056-56.001-9.867-77.899-28.044l-730.297-609.647c-24.857-20.697-40.488-50.436-43.455-82.676-2.967-32.242 6.972-64.344 27.631-89.243 20.661-24.901 50.348-40.559 82.533-43.531s64.231 6.984 89.088 27.681l652.4 546.243 652.4-526.735c12.449-10.127 26.776-17.692 42.151-22.256s31.506-6.038 47.455-4.338c15.948 1.7 31.397 6.539 45.48 14.242 14.071 7.702 26.484 18.115 36.53 30.64 11.144 12.537 19.594 27.245 24.8 43.202s7.072 32.821 5.475 49.532-6.633 32.913-14.765 47.587c-8.145 14.675-19.229 27.508-32.543 37.694l-730.302 588.919c-22.528 15.304-49.525 22.602-76.68 20.728z"],"width":1707,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["icon-arrow-top"],"grid":32},"attrs":[{}],"properties":{"order":11,"id":1,"name":"icon-arrow-top","prevSize":32,"code":59653},"setIdx":0,"setId":0,"iconIdx":3},{"icon":{"paths":["M854.84 85.314c28.44-0.056 56.001 9.867 77.899 28.044l730.294 609.648c24.861 20.697 40.493 50.436 43.455 82.676 2.975 32.242-6.962 64.344-27.629 89.244-20.655 24.901-50.345 40.559-82.534 43.531-32.177 2.973-64.232-6.984-89.082-27.681l-652.404-546.244-652.401 526.736c-12.45 10.129-26.776 17.692-42.153 22.256s-31.504 6.038-47.453 4.339c-15.948-1.7-31.405-6.54-45.479-14.242-14.075-7.703-26.491-18.116-36.536-30.642-11.147-12.537-19.589-27.246-24.798-43.202-5.208-15.958-7.071-32.821-5.472-49.533s6.627-32.912 14.768-47.588c8.14-14.675 19.219-27.508 32.542-37.694l730.299-588.92c22.529-15.304 49.526-22.602 76.682-20.728z"],"width":1707,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["icon-arrow-bottom"],"grid":32},"attrs":[{}],"properties":{"order":10,"id":2,"name":"icon-arrow-bottom","prevSize":32,"code":59654},"setIdx":0,"setId":0,"iconIdx":4},{"icon":{"paths":["M72.658 1023.871c-16.947 0.026-33.37-5.914-46.419-16.794-7.344-6.127-13.415-13.645-17.865-22.135s-7.191-17.783-8.067-27.341c-0.876-9.566 0.131-19.2 2.963-28.365s7.433-17.681 13.54-25.062l324.929-391.173-313.325-391.907c-6.025-7.465-10.524-16.055-13.239-25.276s-3.592-18.889-2.581-28.452c1.011-9.563 3.89-18.83 8.472-27.269s10.776-15.884 18.227-21.907c7.504-6.644 16.292-11.655 25.813-14.72s19.567-4.116 29.511-3.088c9.943 1.028 19.568 4.113 28.27 9.061s16.294 11.653 22.298 19.693l350.315 437.885c10.668 13.059 16.499 29.439 16.499 46.344s-5.832 33.284-16.499 46.343l-362.644 437.888c-7.276 8.832-16.518 15.812-26.978 20.378s-21.84 6.579-33.221 5.897z"],"width":512,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow"],"grid":32},"attrs":[{}],"properties":{"order":3,"id":3,"name":"arrow","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":5},{"icon":{"paths":["M669.791 1023.727c-16.941 0.026-33.361-5.912-46.405-16.789-7.343-6.125-13.411-13.641-17.86-22.129s-7.189-17.778-8.065-27.333c-0.876-9.563 0.131-19.195 2.962-28.357s7.431-17.676 13.536-25.055l324.842-391.063-313.24-391.797c-6.023-7.463-10.521-16.050-13.235-25.269s-3.592-18.884-2.58-28.444c1.011-9.56 3.889-18.825 8.47-27.261s10.774-15.88 18.222-21.901c7.502-6.642 16.287-11.652 25.805-14.716s19.562-4.115 29.503-3.087c9.94 1.028 19.562 4.112 28.262 9.058s16.289 11.65 22.292 19.687l350.212 437.762c10.672 13.055 16.498 29.431 16.498 46.331s-5.826 33.275-16.498 46.33l-362.538 437.765c-7.274 8.83-16.513 15.808-26.97 20.372s-21.834 6.577-33.212 5.895z","M72.627 1023.727c-16.942 0.026-33.361-5.912-46.406-16.789-7.342-6.125-13.411-13.641-17.86-22.129s-7.189-17.778-8.065-27.333c-0.876-9.563 0.131-19.195 2.962-28.357s7.431-17.676 13.536-25.055l324.838-391.063-313.237-391.797c-6.023-7.463-10.521-16.050-13.235-25.269s-3.591-18.884-2.58-28.444c1.011-9.56 3.889-18.825 8.47-27.261s10.773-15.88 18.222-21.901c7.502-6.642 16.287-11.652 25.806-14.716s19.561-4.115 29.503-3.087c9.94 1.028 19.562 4.112 28.262 9.058s16.289 11.65 22.292 19.687l350.217 437.762c10.665 13.055 16.494 29.431 16.494 46.331s-5.83 33.275-16.494 46.33l-362.542 437.765c-7.274 8.83-16.513 15.808-26.97 20.372s-21.834 6.577-33.212 5.895z"],"width":1109,"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-jump-next"],"grid":32},"attrs":[{},{}],"properties":{"order":4,"id":4,"name":"arrow-jump-next","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":6},{"icon":{"paths":["M439.209 1023.727c16.941 0.026 33.361-5.912 46.405-16.789 7.343-6.125 13.411-13.641 17.86-22.129s7.189-17.778 8.065-27.333c0.876-9.563-0.131-19.195-2.962-28.357s-7.431-17.676-13.536-25.055l-324.839-391.063 313.236-391.797c6.023-7.463 10.521-16.050 13.235-25.269s3.592-18.884 2.58-28.444c-1.011-9.56-3.889-18.825-8.47-27.261s-10.774-15.879-18.222-21.901c-7.502-6.642-16.287-11.652-25.805-14.716s-19.562-4.115-29.503-3.087c-9.94 1.028-19.562 4.112-28.262 9.058s-16.289 11.65-22.292 19.687l-350.215 437.762c-10.665 13.055-16.494 29.431-16.494 46.331s5.83 33.275 16.494 46.33l362.542 437.765c7.274 8.829 16.513 15.808 26.97 20.372s21.834 6.577 33.212 5.895z","M1036.376 1023.727c16.934 0.026 33.356-5.912 46.4-16.789 7.345-6.125 13.41-13.641 17.864-22.129 4.445-8.489 7.183-17.778 8.062-27.333 0.879-9.563-0.128-19.195-2.96-28.357s-7.431-17.676-13.538-25.055l-324.837-391.063 313.235-391.797c6.023-7.463 10.519-16.050 13.24-25.269 2.713-9.217 3.592-18.884 2.576-28.444-1.007-9.56-3.89-18.825-8.472-27.261s-10.775-15.879-18.222-21.901c-7.499-6.642-16.285-11.652-25.806-14.716-9.512-3.063-19.561-4.115-29.5-3.087s-19.561 4.112-28.263 9.058c-8.702 4.947-16.285 11.65-22.292 19.687l-350.215 437.762c-10.665 13.055-16.494 29.431-16.494 46.331s5.83 33.275 16.494 46.33l362.542 437.765c7.277 8.829 16.516 15.808 26.966 20.372 10.459 4.564 21.839 6.577 33.22 5.895z"],"width":1109,"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-jump-back"],"grid":32},"attrs":[{},{}],"properties":{"order":5,"id":5,"name":"arrow-jump-back","prevSize":32,"code":59650},"setIdx":0,"setId":0,"iconIdx":7},{"icon":{"paths":["M1319.954 511.458c0-27.242 3.586-50.185 10.753-68.825 7.168-19.357 16.844-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.415-8.602 53.767-8.602 18.644 0 36.205 2.864 52.698 8.602 17.21 5.021 31.902 13.619 44.091 25.807 12.184 11.472 21.87 26.886 29.033 46.24 7.168 18.644 10.75 41.58 10.75 68.825 0 26.529-3.586 49.472-10.75 68.825-7.168 18.644-16.846 34.058-29.033 46.245s-26.886 21.148-44.091 26.886c-16.488 5.733-34.053 8.602-52.698 8.602-19.357 0-37.284-2.864-53.767-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.753-42.3-10.753-68.825zM1911.428 511.458c0-27.242 3.586-50.185 10.75-68.825 7.168-19.357 16.846-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.415-8.602 53.769-8.602 18.64 0 36.205 2.864 52.698 8.602 17.21 5.021 31.902 13.619 44.091 25.807 12.184 11.472 21.87 26.886 29.033 46.24 7.168 18.644 10.756 41.58 10.756 68.825 0 26.529-3.586 49.472-10.756 68.825-7.168 18.644-16.846 34.058-29.033 46.245s-26.886 21.148-44.091 26.886c-16.488 5.733-34.058 8.602-52.698 8.602-19.357 0-37.284-2.864-53.769-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.75-42.3-10.75-68.825zM2502.91 511.458c0-27.242 3.586-50.185 10.75-68.825 7.168-19.357 16.846-34.771 29.033-46.24 12.184-12.184 26.529-20.791 43.012-25.807 16.488-5.733 34.405-8.602 53.776-8.602 18.635 0 36.205 2.864 52.691 8.602 17.21 5.021 31.892 13.619 44.091 25.807 12.184 11.472 21.86 26.886 29.033 46.24 7.168 18.644 10.75 41.58 10.75 68.825 0 26.529-3.577 49.472-10.75 68.825-7.168 18.644-16.846 34.058-29.033 46.245-12.193 12.184-26.886 21.148-44.091 26.886-16.488 5.733-34.058 8.602-52.691 8.602-19.366 0-37.293-2.864-53.776-8.602-16.488-5.733-30.829-14.697-43.012-26.886s-21.87-27.598-29.033-46.245c-7.168-19.357-10.75-42.3-10.75-68.825z"],"width":4096,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["text"],"grid":32},"attrs":[{}],"properties":{"order":6,"id":6,"name":"text","prevSize":32,"code":59651},"setIdx":0,"setId":0,"iconIdx":8},{"icon":{"paths":["M439.342 1023.871c16.946 0.026 33.37-5.914 46.418-16.794 7.345-6.127 13.415-13.645 17.865-22.135s7.191-17.783 8.067-27.341c0.876-9.566-0.131-19.2-2.963-28.365s-7.433-17.681-13.54-25.062l-324.93-391.173 313.324-391.907c6.025-7.465 10.524-16.055 13.239-25.276s3.593-18.889 2.581-28.452c-1.011-9.563-3.89-18.83-8.472-27.269s-10.777-15.884-18.227-21.907c-7.504-6.644-16.292-11.655-25.812-14.72s-19.568-4.116-29.511-3.088c-9.943 1.028-19.568 4.113-28.27 9.061s-16.294 11.653-22.298 19.693l-350.314 437.885c-10.668 13.059-16.499 29.439-16.499 46.344s5.832 33.284 16.499 46.343l362.644 437.888c7.276 8.832 16.518 15.812 26.978 20.378s21.84 6.579 33.221 5.897z"],"width":512,"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-back"],"grid":32},"attrs":[{}],"properties":{"order":9,"id":7,"name":"arrow-back","prevSize":32,"code":59652},"setIdx":0,"setId":0,"iconIdx":9}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16,"showGrid":true}}

package/src/assets_old/icons/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?b29ky3');
-  src:  url('fonts/icomoon.eot?b29ky3#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?b29ky3') format('truetype'),
-    url('fonts/icomoon.woff?b29ky3') format('woff'),
-    url('fonts/icomoon.svg?b29ky3#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?r3pd9w');
+  src:  url('fonts/icomoon.eot?r3pd9w#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?r3pd9w') format('truetype'),
+    url('fonts/icomoon.woff?r3pd9w') format('woff'),
+    url('fonts/icomoon.svg?r3pd9w#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,13 +25,19 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-vector-up:before {
+  content: "\e908";
+}
+.icon-vector-down:before {
+  content: "\e909";
+}
 .icon-close:before {
   content: "\e907";
 }
-.icon-arrow-up:before {
+.icon-icon-arrow-top:before {
   content: "\e905";
 }
-.icon-arrow-down:before {
+.icon-icon-arrow-bottom:before {
   content: "\e906";
 }
 .icon-arrow:before {

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

@@ -4,59 +4,68 @@
 }
 
 .main {
-  width: 40%;
+  width: 100%;
+  max-width: 400px;
+  height: 74px;
   position: relative;
-  margin: 0;
-  padding: 0;
 }
 
 .slider {
   -webkit-appearance: none;
   width: 100%;
-  height: 7px;
+  height: 4px;
+  border-radius: 2px;
   outline: none;
-  border: 0.1px solid rgba(150, 149, 149, 0.432);
-  background-color: rgba(255, 255, 255, 0.575);
+  position: absolute;
+  background: #EEEEEE;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  left: 0;
 }
 
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 48px;
-  height: 48px;
+  width: 30px;
+  height: 30px;
   z-index: 3;
   position: relative;
 }
 
 .selector {
-  height: 48px;
-  width: 48px;
+  height: 30px;
+  width: 30px;
   position: absolute;
-  bottom: -20px;
-  left: 50%;
+  bottom: 0;
+  top: 0;
+  margin: auto 0;
+  left: 0;
   z-index: 2;
 }
 
 .selectBtn {
-  height: 40px;
-  width: 40px;
-  background-image: url('https://i.ibb.co/rQZNNzN/blue.png');
-  background-size: cover;
-  background-position: center;
+  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: 40px;
-  right: 30px;
+  bottom: 0;
+  top: 0;
+  margin: auto 0;
+  cursor: pointer;
 }
 
 .progressBar {
-  width: 50%;
-  height: 7px;
-  background: rgb(112, 112, 238);
+  width: auto;
+  height: 4px;
+  background: #ff0000;
   position: absolute;
-  bottom: 38px;
+  bottom: 0;
   left: 0;
-  margin: 0;
-  padding: 0;
+  top: 0;
+  margin: auto 0;
 }
 
 .range {