@xaypay/tui 0.0.81 → 0.0.83

package/dist/index.js

@@ -53,6 +53,7 @@ function _extends() {
 const SvgPdf = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "40",
@@ -65,7 +66,7 @@ const SvgPdf = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M39.1304 13.1106V36.2849V36.2853C39.394 36.4388 39.6133 36.6599 39.7659 36.9263C39.9189 37.1931 39.9992 37.4956 40 37.8037V47.5932C39.9984 48.7614 39.54 49.8816 38.7252 50.7079C37.91 51.5337 36.8048 51.9984 35.6522 52H4.34783C3.19523 51.9984 2.09005 51.5338 1.27483 50.7079C0.460015 49.8816 0.0015528 48.7614 0 47.5932V34.7817C0.000775155 34.4736 0.0815204 34.1714 0.234087 33.9051C0.386643 33.6383 0.605983 33.4176 0.869565 33.2641V3.52545C0.869565 2.5906 1.23602 1.69387 1.8882 1.03245C2.54072 0.371431 3.42547 0 4.34783 0H26.1953L39.1304 13.1106ZM13.872 45.3893C14.6037 45.4385 15.3293 45.2261 15.9225 44.7893C16.4303 44.3463 16.7036 43.6872 16.6605 43.0096C16.671 42.6272 16.598 42.2471 16.4478 41.8965C16.3154 41.6026 16.1136 41.3464 15.8597 41.1509C15.5976 40.9542 15.2991 40.8137 14.9816 40.7385C14.6225 40.6512 14.2541 40.6083 13.8849 40.6115H11.0258V48.4741H12.6849V45.3893H13.872ZM22.6954 47.4563C23.0149 47.1041 23.2498 46.6815 23.3814 46.2224C23.5347 45.6809 23.6084 45.1195 23.5999 44.5564C23.6065 44.008 23.5362 43.4614 23.3918 42.933C23.2672 42.477 23.0475 42.0532 22.7474 41.6904C22.4465 41.3379 22.0669 41.064 21.6398 40.8917C21.1305 40.6934 20.5882 40.5982 20.0432 40.6116H17.506V48.4821H20.0642C21.0475 48.5494 22.0103 48.1743 22.6954 47.4563ZM26.1252 42.05H29.4956L29.4956 40.6115H24.4661V48.4804L26.1287 48.4808V45.1068L28.6505 45.0962L28.64 43.6577H26.1252V42.05ZM18.3352 36.0407H37.3911L37.3908 14.3567H28.4428C27.5205 14.3567 26.6358 13.9852 25.9836 13.3238C25.331 12.6628 24.9646 11.7661 24.9646 10.8312V1.76186H4.34743C3.88625 1.76186 3.4437 1.94758 3.11762 2.27808C2.79153 2.60859 2.6083 3.05715 2.6083 3.52458V33.0185H14.9392C15.4408 33.0185 15.9179 33.238 16.2482 33.6205L18.3352 36.0407ZM6.08594 13.7151C6.08594 13.2283 6.48054 12.8337 6.9673 12.8337H20.6043C21.0911 12.8337 21.4857 13.2283 21.4857 13.7151C21.4857 14.2019 21.0911 14.5965 20.6043 14.5965H6.9673C6.48054 14.5965 6.08594 14.2019 6.08594 13.7151ZM18.5137 25.3369C18.5137 24.8502 18.9083 24.4556 19.395 24.4556H33.0321C33.5188 24.4556 33.9134 24.8502 33.9134 25.3369C33.9134 25.8237 33.5188 26.2183 33.0321 26.2183H19.395C18.9083 26.2183 18.5137 25.8237 18.5137 25.3369ZM6.9673 16.7056C6.48054 16.7056 6.08594 17.1002 6.08594 17.5869C6.08594 18.0737 6.48054 18.4683 6.9673 18.4683H33.0307C33.5174 18.4683 33.912 18.0737 33.912 17.5869C33.912 17.1002 33.5174 16.7056 33.0307 16.7056H6.9673ZM6.08594 21.4618C6.08594 20.975 6.48054 20.5804 6.9673 20.5804H33.0307C33.5174 20.5804 33.912 20.975 33.912 21.4618C33.912 21.9486 33.5174 22.3432 33.0307 22.3432H6.9673C6.48054 22.3432 6.08594 21.9486 6.08594 21.4618ZM21.4704 42.6691C21.1241 42.239 20.5919 42.0085 20.0457 42.0521H19.166V47.0441H20.0251C20.352 47.0567 20.6773 46.9886 20.9727 46.8469C21.213 46.7226 21.4156 46.5345 21.5589 46.3032C21.7076 46.0577 21.8089 45.7862 21.8582 45.5029C21.9164 45.1846 21.9455 44.8615 21.9451 44.5377C21.951 44.1698 21.9106 43.8023 21.8252 43.4446C21.758 43.1653 21.6373 42.9016 21.4704 42.6691ZM13.7445 42.0508C14.085 42.0213 14.4258 42.1008 14.7193 42.2782C14.8136 42.3518 14.8858 42.4501 14.9282 42.5627C14.9825 42.7134 15.0077 42.8731 15.0019 43.0333C15.0093 43.1969 14.9728 43.3594 14.8967 43.5039C14.8311 43.6211 14.7352 43.7175 14.6195 43.7832C14.4961 43.8525 14.361 43.8981 14.2212 43.9182C14.0636 43.9426 13.9041 43.9548 13.7445 43.9544H12.6855V42.0508H13.7445Z",
-  fill: "#00236A"
+  fill: fillColor ? fillColor : '#00236A'
 }));
 
 function styleInject(css, ref) {
@@ -219,6 +220,84 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  fillColor,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
+  fill: fillColor ? fillColor : '#D1D1D1'
+}));
+
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  fillColor,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
+  fill: fillColor ? fillColor : '#00236A'
+}));
+
+const SingleCheckbox = ({
+  id,
+  float,
+  checked,
+  onClick,
+  content,
+  disabled,
+  checkedColor,
+  unCheckedColor
+}) => {
+  const [innerCheckd, setInnerChecked] = React.useState(false);
+  React.useEffect(() => {
+    setInnerChecked(checked);
+  }, [checked]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '16px',
+      height: '16px',
+      marginRight: '9px',
+      display: 'inline-block',
+      float: float ? float : '',
+      cursor: !disabled && onClick ? 'pointer' : 'normal'
+    }
+  }, innerCheckd ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
+    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
+    fillColor: checkedColor ? checkedColor : ''
+  }) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
+    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
+    fillColor: unCheckedColor ? unCheckedColor : ''
+  }));
+};
+SingleCheckbox.propTypes = {
+  disabled: PropTypes__default["default"].bool,
+  checked: PropTypes__default["default"].bool.isRequired
+};
+
 var css_248z$d = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$d);
 
@@ -246,7 +325,8 @@ const compereConfigs = () => {
 };
 
 ({
-  data: PropTypes__default["default"].object,
+  dataBody: PropTypes__default["default"].array,
+  dataHeader: PropTypes__default["default"].array,
   tHeadColor: PropTypes__default["default"].string,
   tHeadFamily: PropTypes__default["default"].string,
   tHeadPadding: PropTypes__default["default"].string,
@@ -259,7 +339,11 @@ const compereConfigs = () => {
   tBodyTextAlign: PropTypes__default["default"].string,
   tBodyFontWeight: PropTypes__default["default"].string,
   tBodyFontFamily: PropTypes__default["default"].string,
-  tBodyRowBorder: PropTypes__default["default"].string
+  tBodyRowBorder: PropTypes__default["default"].string,
+  handleCheckedBody: PropTypes__default["default"].func,
+  handleCheckedHeader: PropTypes__default["default"].func,
+  handleHeaderItemClick: PropTypes__default["default"].func,
+  handleBodyActionClick: PropTypes__default["default"].func
 });
 
 var css_248z$c = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
@@ -269,6 +353,7 @@ styleInject(css_248z$c);
 const SvgNext = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -283,12 +368,13 @@ const SvgNext = ({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z",
-  fill: "#fff"
+  fill: fillColor ? fillColor : '#fff'
 }));
 
 const SvgPrev = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -303,12 +389,13 @@ const SvgPrev = ({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z",
-  fill: "#fff"
+  fill: fillColor ? fillColor : '#fff'
 }));
 
 const SvgCloseIcon = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "14",
@@ -321,12 +408,13 @@ const SvgCloseIcon = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
-  fill: "#3C393E"
+  fill: fillColor ? fillColor : '#3C393E'
 }));
 
 const SvgCloseSlide = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "18",
@@ -339,13 +427,15 @@ const SvgCloseSlide = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
-  fill: "#fff"
+  fill: fillColor ? fillColor : '#3C393E'
 }));
 
 const Modal = ({
   type,
   data,
+  width,
   radius,
+  height,
   padding,
   setShow,
   selected,
@@ -353,13 +443,18 @@ const Modal = ({
   minWidth,
   minHeight,
   className,
+  mMaxWidth,
+  alignItems,
+  mMaxHeight,
   headerText,
   imageWidth,
   headerSize,
   imageHeight,
   headerColor,
+  outsideClose,
   headerWeight,
   headerHeight,
+  justifyContent,
   backgroundColor,
   layerBackgroundColor
 }) => {
@@ -373,8 +468,7 @@ const Modal = ({
   const handleStopClosing = e => {
     e.stopPropagation();
   };
-  const handleGoTo = e => {
-    const goTo = e.target.getAttribute('data-go');
+  const handleGoTo = goTo => {
     if (goTo === 'next') {
       if (select >= data.length - 1) {
         setSelect(0);
@@ -420,7 +514,7 @@ const Modal = ({
     };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: handleCloseModal,
+    onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
     style: {
       top: '0px',
       left: '0px',
@@ -436,24 +530,24 @@ const Modal = ({
       display: 'flex',
       width: '100%',
       height: '100vh',
-      alignItems: 'center',
-      justifyContent: 'center'
+      alignItems: alignItems ? alignItems : configStyles.MODAL.alignItems,
+      justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${classProps} ${styles$a['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
-      maxWidth: '95%',
       overflow: 'auto',
-      maxHeight: '95vh',
-      width: 'fit-content',
-      height: 'fit-content',
       boxSizing: 'border-box',
+      width: width ? width : configStyles.MODAL.width,
+      height: height ? height : configStyles.MODAL.height,
       borderRadius: radius ? radius : configStyles.MODAL.radius,
-      minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
-      minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
+      maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
+      maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
+      minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
       padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
+      minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -533,8 +627,7 @@ const Modal = ({
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleGoTo,
-    "data-go": "prev",
+    onClick: _ => handleGoTo('prev'),
     style: {
       position: 'absolute',
       left: '14px',
@@ -548,8 +641,7 @@ const Modal = ({
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: handleGoTo,
-    "data-go": "next",
+    onClick: _ => handleGoTo('next'),
     style: {
       position: 'absolute',
       width: '24px',
@@ -568,19 +660,26 @@ Modal.propTypes = {
   data: PropTypes__default["default"].array,
   type: PropTypes__default["default"].string,
   setShow: PropTypes__default["default"].func,
+  width: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   selected: PropTypes__default["default"].number,
   minWidth: PropTypes__default["default"].string,
+  mMaxWidth: PropTypes__default["default"].string,
   minHeight: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
+  alignItems: PropTypes__default["default"].string,
+  mMaxHeight: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
   imageWidth: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
+  outsideClose: PropTypes__default["default"].bool,
   headerColor: PropTypes__default["default"].string,
   imageHeight: PropTypes__default["default"].string,
   headerWeight: PropTypes__default["default"].string,
   headerHeight: PropTypes__default["default"].string,
+  justifyContent: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   layerBackgroundColor: PropTypes__default["default"].string
 };
@@ -597,7 +696,7 @@ const InputTypes = {
   TEXT: "text",
   PASSWORD: "password"
 };
-const P = styled__default["default"].p`
+const P = styled__default["default"].span`
     animation: ${props => props.errorAnimation ? props.animation : 'none'};
 `;
 const Input = ({
@@ -617,6 +716,7 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  marginTop,
   transform,
   iconWidth,
   rightIcon,
@@ -632,7 +732,6 @@ const Input = ({
   borderRight,
   placeholder,
   errorZindex,
-  errorBottom,
   labelWeight,
   phoneDisplay,
   errorMessage,
@@ -687,10 +786,6 @@ const Input = ({
       if (!phoneNumberRegex.test(currentValue)) {
         if (currentValue === '') {
           setInnerErrorMessage('');
-          setInnerValue('');
-          if (change) {
-            change('');
-          }
         } else {
           telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
           setInnerValue(prevValue);
@@ -705,11 +800,6 @@ const Input = ({
           if (change) {
             change(currentValue.substr(0, 8));
           }
-        } else {
-          setInnerValue(currentValue);
-          if (change) {
-            change(currentValue);
-          }
         }
       }
     }
@@ -750,13 +840,11 @@ const Input = ({
             } else {
               telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
             }
-            setInnerValue('');
           } else {
-            setInnerErrorMessage('');
-            if (value.length > 8) {
+            if (value.length < 8) {
+              telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
+            } else if (value.length > 8) {
               setInnerValue(value.substr(0, 8));
-            } else {
-              setInnerValue(value);
             }
           }
         }
@@ -844,8 +932,8 @@ const Input = ({
       padding: padding ? padding : configStyles.INPUT.padding,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -866,13 +954,14 @@ const Input = ({
     animation: animation,
     style: {
       margin: '0px',
+      position: 'absolute',
+      width: width ? width : configStyles.INPUT.width,
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
       fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
-      bottom: errorBottom ? errorBottom : configStyles.INPUT.errorBottom,
       zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
-      position: errorPosition ? errorPosition : configStyles.INPUT.errorPosition,
       lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
       transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
     },
     className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
@@ -891,6 +980,7 @@ Input.propTypes = {
   padding: PropTypes__default["default"].string,
   fontSize: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
+  marginTop: PropTypes__default["default"].string,
   transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
@@ -905,7 +995,6 @@ Input.propTypes = {
   borderRight: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
   errorZindex: PropTypes__default["default"].string,
-  errorBottom: PropTypes__default["default"].string,
   labelWeight: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
   phoneDisplay: PropTypes__default["default"].string,
@@ -1089,62 +1178,10 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes__default["default"].string
 };
 
-const SvgCheckboxUnchecked = ({
-  title,
-  titleId,
-  ...props
-}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
-  fill: "#D1D1D1"
-}));
-
-const SvgCheckboxChecked = ({
-  title,
-  titleId,
-  ...props
-}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "16",
-  height: "16",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
-  fill: "#00236A"
-}));
-
-const SingleCheckbox = ({
-  checked
-}) => {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginRight: '9px'
-    }
-  }, checked ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, null) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, null));
-};
-SingleCheckbox.propTypes = {
-  checked: PropTypes__default["default"].bool
-};
-
 const SvgArrow = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "15",
@@ -1157,7 +1194,7 @@ const SvgArrow = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z",
-  fill: "#3C393E"
+  fill: fillColor ? fillColor : '#3C393E'
 }));
 
 var css_248z$9 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:9}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
@@ -1173,9 +1210,12 @@ const Select = ({
   keyNames,
   selected,
   className,
+  marginTop,
   arrowIcon,
   closeIcon,
+  errorZindex,
   errorMessage,
+  showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
@@ -1324,7 +1364,10 @@ const Select = ({
     }
   }, [options, multiple, selected, selected?.length]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classProps
+    className: classProps,
+    style: {
+      position: 'relative'
+    }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.SELECT.labelColor,
@@ -1375,7 +1418,7 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
@@ -1422,8 +1465,11 @@ const Select = ({
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
+      position: 'absolute',
       color: errorColor ? errorColor : configStyles.SELECT.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
+      fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize,
+      zIndex: errorZindex ? errorZindex : configStyles.SELECT.errorZindex,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`
     }
   }, errorMessage) : '');
 };
@@ -1435,9 +1481,12 @@ Select.propTypes = {
   disabled: PropTypes__default["default"].bool,
   selected: PropTypes__default["default"].array,
   keyNames: PropTypes__default["default"].object,
+  marginTop: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   arrowIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
+  showCloseIcon: PropTypes__default["default"].bool,
+  errorZindex: PropTypes__default["default"].number,
   errorMessage: PropTypes__default["default"].string,
   defaultOption: PropTypes__default["default"].string,
   multipleCheckbox: PropTypes__default["default"].bool,
@@ -1484,6 +1533,7 @@ Select.propTypes = {
 const SvgToasterInfo = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -1496,12 +1546,13 @@ const SvgToasterInfo = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z",
-  fill: "#00236A"
+  fill: fillColor ? fillColor : '#00236A'
 }));
 
 const SvgToasterError = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -1514,12 +1565,13 @@ const SvgToasterError = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z",
-  fill: "#E00"
+  fill: fillColor ? fillColor : '#E00'
 }));
 
 const SvgToasterClose = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "18",
@@ -1532,12 +1584,13 @@ const SvgToasterClose = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
-  fill: "#D1D1D1"
+  fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
 const SvgToasterWarning = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -1550,12 +1603,13 @@ const SvgToasterWarning = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z",
-  fill: "#FF8A00"
+  fill: fillColor ? fillColor : '#FF8A00'
 }));
 
 const SvgToasterSuccess = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "24",
@@ -1568,7 +1622,7 @@ const SvgToasterSuccess = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z",
-  fill: "#0DA574"
+  fill: fillColor ? fillColor : '#0DA574'
 }));
 
 var css_248z$8 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}";
@@ -1830,6 +1884,7 @@ const Toaster = () => {
 const SvgTooltip = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "16",
@@ -1842,7 +1897,7 @@ const SvgTooltip = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z",
-  fill: "#D1D1D1"
+  fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
 var css_248z$7 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
@@ -1944,6 +1999,7 @@ Tooltip.defaultProps = {
 const SvgCaptchaArrowUp = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "12",
@@ -1956,12 +2012,13 @@ const SvgCaptchaArrowUp = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#00236A'
 }));
 
 const SvgCaptchaArrowDown = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "12",
@@ -1974,7 +2031,7 @@ const SvgCaptchaArrowDown = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#00236A'
 }));
 
 var css_248z$6 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
@@ -2211,6 +2268,7 @@ function v4(options, buf, offset) {
 const SvgListItemPdf = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "32",
@@ -2225,12 +2283,13 @@ const SvgListItemPdf = ({
   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"
+  fill: fillColor ? fillColor : '#051942'
 }));
 
 const SvgListItemJpg = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "32",
@@ -2245,12 +2304,13 @@ const SvgListItemJpg = ({
   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"
+  fill: fillColor ? fillColor : '#051942'
 }));
 
 const SvgListItemPng = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "32",
@@ -2265,12 +2325,13 @@ const SvgListItemPng = ({
   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"
+  fill: fillColor ? fillColor : '#051942'
 }));
 
 const SvgListItemJpeg = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "33",
@@ -2285,12 +2346,13 @@ const SvgListItemJpeg = ({
   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"
+  fill: fillColor ? fillColor : '#051942'
 }));
 
 const SvgListItemDelete = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "22",
@@ -2303,7 +2365,7 @@ const SvgListItemDelete = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#051942'
 }));
 
 const FileItem = /*#__PURE__*/React__default["default"].memo(({
@@ -2463,6 +2525,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
 const SvgUpload = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "51",
@@ -2480,12 +2543,13 @@ const SvgUpload = ({
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M41.822 17.245c-4.864 0-8.822 3.982-8.822 8.878C33 31.018 36.958 35 41.822 35c4.864 0 8.822-3.982 8.822-8.877 0-4.896-3.959-8.878-8.822-8.878Zm-.536 13.005v-6.689l-3.067 3.22a.69.69 0 0 1-1.01 0 .777.777 0 0 1 0-1.06l4.286-4.5A.71.71 0 0 1 42 21a.684.684 0 0 1 .505.22l4.286 4.5a.777.777 0 0 1 0 1.06.69.69 0 0 1-1.01 0l-3.067-3.22v6.69c0 .414-.32.75-.714.75-.395 0-.714-.336-.714-.75Z",
-  fill: "#0DA574"
+  fill: fillColor ? fillColor : '#0DA574'
 }));
 
 const SvgRemoveFile = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "26",
@@ -2503,12 +2567,13 @@ const SvgRemoveFile = ({
   fill: "#FBFBFB"
 }), /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#00236A'
 }));
 
 const SvgDeleteComponent = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "26",
@@ -2528,7 +2593,7 @@ const SvgDeleteComponent = ({
   stroke: "#D1D1D1"
 }), /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#E00'
 }));
 
 const NewFile = ({
@@ -3032,29 +3097,30 @@ const Textarea = ({
   value,
   height,
   resize,
-  border,
   radius,
   padding,
   required,
   onChange,
   minWidth,
   maxWidth,
+  boxShadow,
   minHeight,
   maxHeight,
   boxSizing,
   maxLength,
   labelSize,
   errorSize,
+  marginTop,
   labelColor,
   errorColor,
-  borderColor,
   labelWeight,
   placeholder,
   labelDisplay,
-  errorMesaage,
+  errorMessage,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
+  labelMarginBottom,
   showCharacterCount,
   labelRequiredColor
 }) => {
@@ -3104,12 +3170,12 @@ const Textarea = ({
     setInnerValue(value);
   }, [value, onChange]);
   React.useEffect(() => {
-    if (errorMesaage) {
-      setError(errorMesaage);
+    if (errorMessage) {
+      setError(errorMessage);
     } else {
       setError('');
     }
-  }, [errorMesaage]);
+  }, [errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
@@ -3118,7 +3184,8 @@ const Textarea = ({
     style: {
       display: 'flex',
       alignItems: 'center',
-      justifyContent: label ? 'space-between' : 'flex-end'
+      justifyContent: label ? 'space-between' : 'flex-end',
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
     }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
@@ -3139,11 +3206,11 @@ const Textarea = ({
   }, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
     style: {
       width: '100%',
+      border: 'none',
       outline: 'none',
       overflow: 'auto',
       fontSize: size ? size : configStyles.TEXTAREA.size,
       height: height ? height : configStyles.TEXTAREA.height,
-      border: border ? border : configStyles.TEXTAREA.border,
       padding: padding ? padding : configStyles.TEXTAREA.padding,
       borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
       minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
@@ -3152,7 +3219,7 @@ const Textarea = ({
       maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
       boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-      borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor : isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor : borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+      boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}` : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}` : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}` : boxShadow ? boxShadow : configStyles.INPUT.boxShadow,
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     value: innerValue,
@@ -3164,10 +3231,10 @@ const Textarea = ({
     onMouseLeave: handleMouseLeave
   }), error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginTop: '6px',
       display: 'inline-block',
       fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
-      color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor
+      color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+      marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
     }
   }, error) : '');
 };
@@ -3177,27 +3244,31 @@ Textarea.propTypes = {
   width: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
   resize: PropTypes__default["default"].string,
-  border: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   padding: PropTypes__default["default"].string,
   minWidth: PropTypes__default["default"].string,
   maxWidth: PropTypes__default["default"].string,
+  boxShadow: PropTypes__default["default"].string,
+  marginTop: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   minHeight: PropTypes__default["default"].string,
   maxHeight: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
   labelSize: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
   labelWeight: PropTypes__default["default"].string,
-  borderColor: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
+  errorMessage: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   showCharacterCount: PropTypes__default["default"].bool,
   value: PropTypes__default["default"].string.isRequired,
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func.isRequired,
   labelRequiredColor: PropTypes__default["default"].string
 };
@@ -3356,6 +3427,7 @@ const PaginationRange = ({
 const SvgDots = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "11",
@@ -3368,12 +3440,13 @@ const SvgDots = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
   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"
+  fill: fillColor ? fillColor : '#3C393E'
 }));
 
 const SvgNextarrow = ({
   title,
   titleId,
+  fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: "6",
@@ -3386,7 +3459,7 @@ const SvgNextarrow = ({
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("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"
+  fill: fillColor ? fillColor : '#3C393E'
 }));
 
 const Pagination = ({
@@ -3695,11 +3768,13 @@ const NewAutocomplete = ({
   change,
   options,
   getItem,
+  keyNames,
   required,
   disabled,
   selected,
   errorSize,
   labelSize,
+  marginTop,
   errorColor,
   labelColor,
   labelWeight,
@@ -3733,6 +3808,7 @@ const NewAutocomplete = ({
   contentTopBoxSizing,
   contentTopLineHeight,
   contentBottomMaxWidth,
+  contentTopBorderHover,
   contentBottomOverflow,
   contentBottomPosition,
   contentBottomRowColor,
@@ -3740,6 +3816,7 @@ const NewAutocomplete = ({
   contentBottomBoxShadow,
   contentBottomRowHeight,
   contentBottomRowCursor,
+  contentTopBorderActive,
   contentBottomRowDisplay,
   contentBottomRowPadding,
   contentBottomRowFontSize,
@@ -3750,8 +3827,6 @@ const NewAutocomplete = ({
   contentBottomRowAlignItems,
   contentBottomRowTransition,
   contentBottomRowHoverColor,
-  contentTopBorderHover,
-  contentTopBorderActive,
   contentBottomInnerOverflowY,
   contentBottomInnerOverflowX,
   contentBottomInnerMaxHeight,
@@ -3762,6 +3837,7 @@ const NewAutocomplete = ({
   contentBottomRowHoverBackgroundColor,
   ...props
 }) => {
+  const [id, setId] = React.useState('');
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3798,18 +3874,23 @@ const NewAutocomplete = ({
   };
   const handleChange = e => {
     const value = e.target.value;
+    const currentId = e.target.id;
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerValue(value);
     if (value.length >= searchCount) {
-      change(value);
+      change({
+        name: value,
+        id: currentId
+      });
     } else {
       change('');
     }
   };
   const handleClick = selectedValue => {
     setShow(false);
-    getItem(selectedValue);
+    setId(selectedValue.id);
     setInnerValue(selectedValue.name);
+    getItem(selectedValue);
   };
   const optionList = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -3856,12 +3937,13 @@ const NewAutocomplete = ({
         marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
-    }, item.name);
-  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
+    }, item[keyNames.name]);
+  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      margin: '0px',
+      position: 'absolute',
       color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
       fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
       height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
       padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
       lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
@@ -3889,11 +3971,13 @@ const NewAutocomplete = ({
   }, [change]);
   React.useEffect(() => {
     if (selected) {
-      setInnerValue(selected);
+      setId(selected[keyNames.id]);
+      setInnerValue(selected[keyNames.name]);
     } else {
+      setId('');
       setInnerValue('');
     }
-  }, [selected, selected?.length]);
+  }, [selected]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -3917,6 +4001,7 @@ const NewAutocomplete = ({
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
+    id: id,
     type: "text",
     value: innerValue,
     disabled: disabled,
@@ -3947,10 +4032,11 @@ const NewAutocomplete = ({
     }
   }, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      margin: '0px',
-      display: 'inline-block',
+      left: '0px',
+      position: 'absolute',
       color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
       fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, errorMessage) : '', optionList));
@@ -3959,8 +4045,10 @@ NewAutocomplete.propTypes = {
   label: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
-  selected: PropTypes__default["default"].string,
+  keyNames: PropTypes__default["default"].object,
+  selected: PropTypes__default["default"].object,
   errorSize: PropTypes__default["default"].string,
+  marginTop: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,