@xaypay/tui 0.0.73 → 0.0.75

package/dist/index.es.js

@@ -369,13 +369,6 @@ Table.defaultProps = {
   hearderData: []
 };
 
-var css_248z$b = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
-var styles$9 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$b);
-
-var css_248z$a = "";
-styleInject(css_248z$a);
-
 const _ = require('lodash');
 const compereConfigs = () => {
   let projectConfig = {};
@@ -399,175 +392,338 @@ const compereConfigs = () => {
   return _.merge(packageConfig, projectConfig);
 };
 
-const TypographyType = {
-  p: 'p',
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  span: 'span'
-};
-const Typography = ({
-  size,
-  color,
-  weight,
+var css_248z$b = ".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)}}";
+var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$b);
+
+const SvgNext = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  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"
+}));
+
+const SvgPrev = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  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"
+}));
+
+const SvgCloseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.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"
+}));
+
+const SvgCloseSlide = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.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"
+}));
+
+const Modal = ({
+  type,
+  data,
   radius,
-  border,
-  cursor,
-  variant,
-  onClick,
+  padding,
+  setShow,
+  selected,
   children,
-  textAlign,
-  fontStyle,
+  minWidth,
+  minHeight,
   className,
-  textShadow,
-  lineHeight,
-  colorHover,
-  fontFamily,
-  textTransform,
-  textDecoration,
+  headerText,
+  imageWidth,
+  headerSize,
+  imageHeight,
+  headerColor,
+  headerWeight,
+  headerHeight,
   backgroundColor,
-  ...props
+  layerBackgroundColor
 }) => {
+  const [select, setSelect] = useState(0);
+  const [innerData, setInnerData] = useState([]);
   const configStyles = compereConfigs();
   const classProps = classnames(className);
-  const [isHover, setIsHover] = useState(false);
-  const [validVariant, setValidVariant] = useState(false);
-  useEffect(() => {
-    if (!Object.values(TypographyType).includes(variant)) {
-      setValidVariant(true);
-    }
-  }, [variant]);
-  const handleMouseEnter = () => {
-    setIsHover(true);
+  const handleCloseModal = () => {
+    setShow(false);
   };
-  const handleMouseLeave = () => {
-    setIsHover(false);
+  const handleStopClosing = e => {
+    e.stopPropagation();
   };
-  const tagT = /*#__PURE__*/React__default.createElement(variant, {
-    style: {
-      border: border ? border : configStyles.TYPOGRAPHY.border,
-      cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
-      borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
-      fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-      textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
-      textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
-      fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
-      lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
-      fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
-      textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
-      textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
-    },
-    ...props,
-    className: classProps,
-    onClick: onClick ? onClick : _ => _,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, [children]);
-  return validVariant ? 'Please set Typography valid variant' : tagT;
-};
-Typography.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string,
-  onClick: PropTypes.func,
-  weight: PropTypes.string,
-  border: PropTypes.string,
-  cursor: PropTypes.string,
-  radius: PropTypes.string,
-  textAlign: PropTypes.string,
-  className: PropTypes.string,
-  fontStyle: PropTypes.string,
-  lineHeight: PropTypes.string,
-  textShadow: PropTypes.string,
-  fontFamily: PropTypes.string,
-  colorHover: PropTypes.string,
-  textTransform: PropTypes.string,
-  textDecoration: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  variant: PropTypes.oneOf(Object.values(TypographyType))
-};
-Typography.defaultProps = {
-  variant: 'p'
-};
-
-const Modal = ({
-  setShow,
-  headerText,
-  className,
-  type,
-  data,
-  selected,
-  children
-}) => {
-  classnames(styles$9.modal, className);
-  const [select, setSelect] = useState(selected);
+  const handleGoTo = e => {
+    const goTo = e.target.getAttribute('data-go');
+    if (goTo === 'next') {
+      if (select >= data.length - 1) {
+        setSelect(0);
+      } else {
+        setSelect(select + 1);
+      }
+    } else {
+      if (select <= 0) {
+        setSelect(data.length - 1);
+      } else {
+        setSelect(select - 1);
+      }
+    }
+  };
+  useEffect(() => {
+    if (type === 'images') {
+      if (data) {
+        if (data.length === 0) {
+          alert('Please fill data prop');
+        } else {
+          setInnerData(data);
+        }
+      } else {
+        alert('Please add data prop on Modal component');
+      }
+    }
+  }, [type, data, data?.length]);
+  useEffect(() => {
+    if (selected) {
+      if (selected <= 0) {
+        setSelect(0);
+      } else if (selected >= data.length - 1) {
+        setSelect(data.length - 1);
+      } else {
+        setSelect(selected);
+      }
+    }
+  }, [selected]);
+  useEffect(() => {
+    return () => {
+      setSelect(0);
+      setInnerData([]);
+    };
+  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-wrap"]} modal-wrap-rem`,
-    onClick: () => setShow(false)
-  }, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-content"]} modal-content-rem`,
-    onClick: e => {
-      e.stopPropagation();
+    onClick: handleCloseModal,
+    style: {
+      top: '0px',
+      left: '0px',
+      zIndex: 999,
+      width: '100%',
+      height: '100vh',
+      position: 'fixed',
+      backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-top"]} modal-top-rem`
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100vh'
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-title"]} modal-title-rem`
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: TypographyType.p,
-    color: "#00236A"
-  }, headerText)), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["close-btn"]} close-btn-rem`,
-    onClick: () => setShow(false)
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-close"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-section"]} modal-section-rem`
-  }, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-content"]} modal-content-rem`,
-    onClick: e => {
-      e.stopPropagation();
+    className: `${classProps} ${styles$9['animation__modal']}`,
+    onClick: handleStopClosing,
+    style: {
+      top: '0px',
+      left: '0px',
+      right: '0px',
+      bottom: '0px',
+      margin: 'auto',
+      maxWidth: '95%',
+      overflow: 'auto',
+      maxHeight: '95vh',
+      position: 'absolute',
+      width: 'fit-content',
+      height: 'fit-content',
+      boxSizing: 'border-box',
+      borderRadius: radius ? radius : configStyles.MODAL.radius,
+      minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
+      minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
+      padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["close-btn"]} close-btn-rem`,
-    onClick: () => setShow(false)
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-close"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$9["modal-section"]} modal-section-rem`
-  }, /*#__PURE__*/React__default.createElement("div", null, select > 1 ? /*#__PURE__*/React__default.createElement("h1", {
-    onClick: () => setSelect(select - 1)
-  }, "-") : null, data.map(elem => {
-    if (select == elem.id) {
-      return /*#__PURE__*/React__default.createElement("img", {
-        width: "600px",
-        key: elem.id,
-        src: elem.url
-      });
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100%'
     }
-  }), select < data.length ? /*#__PURE__*/React__default.createElement("h1", {
-    onClick: () => {
-      setSelect(select + 1);
+  }, type === 'content' ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+    }
+  }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      margin: '0px 16px 0px 0px',
+      maxWidth: 'calc(100% - 30px)',
+      fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
+      color: headerColor ? headerColor : configStyles.MODAL.headerColor,
+      fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
+    }
+  }, headerText), /*#__PURE__*/React__default.createElement("div", {
+    onClick: handleCloseModal,
+    style: {
+      width: '14px',
+      height: '14px',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))) : /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleCloseModal,
+    style: {
+      position: 'absolute',
+      top: '23px',
+      width: '18px',
+      right: '23px',
+      height: '18px',
+      border: 'none',
+      outline: 'none',
+      cursor: 'pointer',
+      backgroundColor: 'transparent'
     }
-  }, "+") : null))) : null);
+  }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      justifyContent: 'center',
+      paddingTop: type === 'content' ? '10px' : '0px'
+    }
+  }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, innerData && innerData.length > 0 && innerData.map((item, index) => {
+    if (select === index) {
+      if (!item.hasOwnProperty('url')) {
+        alert('Please add url property in data prop on each element');
+      } else {
+        return /*#__PURE__*/React__default.createElement("img", {
+          style: {
+            objectFit: 'cover',
+            objectPosition: 'center',
+            borderRadius: radius ? radius : configStyles.MODAL.radius,
+            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+          },
+          src: item.url,
+          key: item.id ? item.id : index
+        });
+      }
+    }
+  }), innerData && innerData.length > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleGoTo,
+    "data-go": "prev",
+    style: {
+      position: 'absolute',
+      left: '14px',
+      width: '24px',
+      height: '24px',
+      padding: '0px',
+      border: 'none',
+      outline: 'none',
+      cursor: 'pointer',
+      top: 'calc(50% - 12px)',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgPrev, null)), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleGoTo,
+    "data-go": "next",
+    style: {
+      position: 'absolute',
+      width: '24px',
+      right: '14px',
+      height: '24px',
+      border: 'none',
+      padding: '0px',
+      outline: 'none',
+      cursor: 'pointer',
+      top: 'calc(50% - 12px)',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
 };
 Modal.propTypes = {
+  data: PropTypes.array,
+  type: PropTypes.string,
   setShow: PropTypes.func,
-  headerText: PropTypes.string,
+  radius: PropTypes.string,
+  padding: PropTypes.string,
+  selected: PropTypes.number,
+  minWidth: PropTypes.string,
+  minHeight: PropTypes.string,
   className: PropTypes.string,
-  type: PropTypes.string,
-  selected: PropTypes.string,
-  data: PropTypes.array
+  headerText: PropTypes.string,
+  imageWidth: PropTypes.string,
+  headerSize: PropTypes.string,
+  headerColor: PropTypes.string,
+  imageHeight: PropTypes.string,
+  headerWeight: PropTypes.string,
+  headerHeight: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  layerBackgroundColor: PropTypes.string
+};
+Modal.defaultProps = {
+  type: 'content'
 };
 
-var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
-styleInject(css_248z$9);
+styleInject(css_248z$a);
 
 const InputTypes = {
   TEL: 'tel',
@@ -885,9 +1041,9 @@ Input.defaultProps = {
   type: "text"
 };
 
-var css_248z$8 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
+var css_248z$9 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
 var styles$7 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$8);
+styleInject(css_248z$9);
 
 const Radio = ({
   disabled,
@@ -1104,27 +1260,9 @@ const SvgArrow = ({
   fill: "#3C393E"
 }));
 
-const SvgCloseIcon = ({
-  title,
-  titleId,
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "14",
-  height: "14",
-  viewBox: "0 0 14 14",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.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"
-}));
-
-var css_248z$7 = ".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:1}.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}}";
+var css_248z$8 = ".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:1}.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}}";
 var styles$6 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
-styleInject(css_248z$7);
+styleInject(css_248z$8);
 
 const Select = ({
   options,
@@ -1284,7 +1422,7 @@ const Select = ({
       });
       setExistOptions(modifiedOptions);
     }
-  }, [options, multiple, selected, selected.length]);
+  }, [options, multiple, selected, selected?.length]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -1534,9 +1672,9 @@ const SvgToasterSuccess = ({
   fill: "#0DA574"
 }));
 
-var css_248z$6 = "#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}}";
+var css_248z$7 = "#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}}";
 var styles$5 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO"};
-styleInject(css_248z$6);
+styleInject(css_248z$7);
 
 const ToasterType = {
   info: 'info',
@@ -1808,9 +1946,9 @@ const SvgTooltip = ({
   fill: "#D1D1D1"
 }));
 
-var css_248z$5 = ".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}";
+var css_248z$6 = ".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}";
 var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
-styleInject(css_248z$5);
+styleInject(css_248z$6);
 
 const Tooltip = ({
   type,
@@ -1940,9 +2078,9 @@ const SvgCaptchaArrowDown = ({
   fill: "#00236A"
 }));
 
-var css_248z$4 = ".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}";
+var css_248z$5 = ".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}";
 var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$4);
+styleInject(css_248z$5);
 
 const Captcha = ({
   size,
@@ -2064,9 +2202,9 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$3 = ".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 css_248z$4 = ".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$2 = {"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$3);
+styleInject(css_248z$4);
 
 const Stepper = ({
   className,
@@ -2894,8 +3032,8 @@ NewFile.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-var css_248z$2 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$2);
+var css_248z$3 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
+styleInject(css_248z$3);
 
 const Textarea = ({
   size,
@@ -3074,6 +3212,105 @@ Textarea.propTypes = {
   labelRequiredColor: PropTypes.string
 };
 
+var css_248z$2 = "";
+styleInject(css_248z$2);
+
+const TypographyType = {
+  p: 'p',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  span: 'span'
+};
+const Typography = ({
+  size,
+  color,
+  weight,
+  radius,
+  border,
+  cursor,
+  variant,
+  onClick,
+  children,
+  textAlign,
+  fontStyle,
+  className,
+  textShadow,
+  lineHeight,
+  colorHover,
+  fontFamily,
+  textTransform,
+  textDecoration,
+  backgroundColor,
+  ...props
+}) => {
+  const configStyles = compereConfigs();
+  const classProps = classnames(className);
+  const [isHover, setIsHover] = useState(false);
+  const [validVariant, setValidVariant] = useState(false);
+  useEffect(() => {
+    if (!Object.values(TypographyType).includes(variant)) {
+      setValidVariant(true);
+    }
+  }, [variant]);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const tagT = /*#__PURE__*/React__default.createElement(variant, {
+    style: {
+      border: border ? border : configStyles.TYPOGRAPHY.border,
+      cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
+      borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
+      fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
+      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
+      textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
+      textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
+      fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
+      lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
+      fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
+      textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
+      textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
+      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+    },
+    ...props,
+    className: classProps,
+    onClick: onClick ? onClick : _ => _,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, [children]);
+  return validVariant ? 'Please set Typography valid variant' : tagT;
+};
+Typography.propTypes = {
+  size: PropTypes.string,
+  color: PropTypes.string,
+  onClick: PropTypes.func,
+  weight: PropTypes.string,
+  border: PropTypes.string,
+  cursor: PropTypes.string,
+  radius: PropTypes.string,
+  textAlign: PropTypes.string,
+  className: PropTypes.string,
+  fontStyle: PropTypes.string,
+  lineHeight: PropTypes.string,
+  textShadow: PropTypes.string,
+  fontFamily: PropTypes.string,
+  colorHover: PropTypes.string,
+  textTransform: PropTypes.string,
+  textDecoration: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  variant: PropTypes.oneOf(Object.values(TypographyType))
+};
+Typography.defaultProps = {
+  variant: 'p'
+};
+
 var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
 var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
@@ -3470,6 +3707,7 @@ const NewAutocomplete = ({
   getItem,
   required,
   disabled,
+  selected,
   errorSize,
   labelSize,
   errorColor,
@@ -3584,7 +3822,7 @@ const NewAutocomplete = ({
     getItem(selectedValue);
     setInnerValue(selectedValue.name);
   };
-  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
       width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
@@ -3654,12 +3892,19 @@ const NewAutocomplete = ({
       alert('Please add getItem function for get choosen item from autocomplete');
     }
     options && setInnerOptions(options);
-  }, [options, options.length, getItem]);
+  }, [options, options?.length, getItem]);
   useEffect(() => {
     if (!change) {
       alert('Please add change prop on New Autocomplete component');
     }
   }, [change]);
+  useEffect(() => {
+    if (selected) {
+      setInnerValue(selected);
+    } else {
+      setInnerValue('');
+    }
+  }, [selected, selected?.length]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -3724,6 +3969,7 @@ NewAutocomplete.propTypes = {
   label: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
+  selected: PropTypes.string,
   errorSize: PropTypes.string,
   labelSize: PropTypes.string,
   errorColor: PropTypes.string,