@xaypay/tui 0.0.117 → 0.0.119

package/dist/index.js

@@ -114,9 +114,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$e = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
-var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
-styleInject(css_248z$e);
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
+styleInject(css_248z$d);
 
 const File = ({
   name,
@@ -176,11 +176,11 @@ const File = ({
     document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: `${styles$c['file-form-title']} ile-form-title-rem`
+    className: `${styles$b['file-form-title']} ile-form-title-rem`
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
+    className: classnames__default["default"](`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
+    className: `${styles$b['file-form']} file-form-rem ${error || errorMessage ? styles$b['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default["default"].createElement("input", {
     hidden: true,
@@ -189,23 +189,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$c['upload-file-content']} upload-file-content-rem`
+    className: `${styles$b['upload-file-content']} upload-file-content-rem`
   }, image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$c['upload-info']} upload-info-rem`
+    className: `${styles$b['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
+    className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$c['upload-info-size']} upload-info-size-rem`
+    className: `${styles$b['upload-info-size']} upload-info-size-rem`
   }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), !disabled && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
+    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
@@ -413,9 +413,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes__default["default"].bool
 };
 
-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{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
-var styles$b = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
-styleInject(css_248z$d);
+var css_248z$c = ".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{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
+var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
+styleInject(css_248z$c);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -426,6 +426,8 @@ const TH = ({
   tHeadFontSize,
   tHeadTextAlign,
   tHeadFontWeight,
+  tableColumnMinWidth,
+  tableColumnMaxWidth,
   handleCheckedHeader,
   borderTopLeftRadius,
   borderTopRightRadius,
@@ -441,18 +443,19 @@ const TH = ({
     style: {
       width: 'auto',
       cursor: 'pointer',
-      whiteSpace: 'nowrap',
       position: 'relative',
       padding: tHeadPadding,
       fontSize: tHeadFontSize,
       fontFamily: tHeadFamily,
       fontWeight: tHeadFontWeight,
+      minWidth: tableColumnMinWidth,
+      maxWidth: tableColumnMaxWidth,
       borderTopLeftRadius: borderTopLeftRadius,
       borderTopRightRadius: borderTopRightRadius,
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     },
     onClick: handleHeaderItemClick,
-    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$b['sorting-arrows'] : '' : ''}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$a['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -491,7 +494,11 @@ const TD = ({
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
+  openListFontSize,
   handleCheckedBody,
+  openListFontFamily,
+  tableColumnMinWidth,
+  tableColumnMaxWidth,
   handleBodyActionClick,
   handleMoreOptionsClick,
   handleContentListClick,
@@ -541,13 +548,15 @@ const TD = ({
       width: 'auto',
       color: tBodyColor,
       verticalAlign: 'top',
-      whiteSpace: 'nowrap',
       padding: tBodyPadding,
       fontSize: tBodyFontSize,
       borderRight: borderRight,
       textAlign: tBodyTextAlign,
       fontFamily: tBodyFontFamily,
       fontWeight: tBodyFontWeight,
+      minWidth: tableColumnMinWidth,
+      maxWidth: tableColumnMaxWidth,
+      whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
       borderColor: hideBorder ? 'transparent' : '#eeeeee',
       boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -566,7 +575,7 @@ const TD = ({
         },
         id: newItem.id,
         type: newItem.type,
-        className: styles$b['td-span'],
+        className: styles$a['td-span'],
         key: `${newItem.id}_${newIndex}`,
         onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
       }, newItem.content === 0 ? newItem.content.toString() : newItem.content ? newItem.content : '');
@@ -588,7 +597,7 @@ const TD = ({
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
-          className: styles$b['td-span'],
+          className: styles$a['td-span'],
           onClick: e => handleCheckActions(e, iT, 'type', iN),
           key: `${iT.id || iT.content}_${iN}`
         }, iT.content === 0 ? iT.content.toString() : iT.content ? iT.content : '');
@@ -612,7 +621,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$b['td-span']
+    className: styles$a['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
@@ -624,11 +633,13 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '10px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '10px' : '0px' : '0px',
-      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '10px' : '0px' : '0px' : '0px'
+      flexShrink: 11,
+      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '11px' : '0px' : '0px',
+      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
+      textAlign: tBodyTextAlign,
       margin: '0px',
       cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
     },
@@ -657,7 +668,7 @@ const TD = ({
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
-      className: styles$b['dots-option-item'],
+      className: styles$a['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
@@ -683,17 +694,20 @@ const TD = ({
     style: {
       overflow: 'auto',
       marginTop: '10px',
-      maxHeight: '300px',
+      maxHeight: '500px',
       maxWidth: '100%',
       height: item.status === 'close' ? '0px' : 'auto'
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("p", {
       key: `${innerItem}_${innerItemIndex}`,
-      className: styles$b['list-text'],
+      className: styles$a['list-text'],
       style: {
+        maxWidth: '100%',
         color: openListColor,
-        maxWidth: (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) + 'px'
+        textAlign: tBodyTextAlign,
+        fontSize: openListFontSize,
+        fontFamily: openListFontFamily
       },
       onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
     }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
@@ -705,7 +719,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$b['td-span']
+    className: styles$a['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
@@ -771,6 +785,8 @@ const Table = ({
   tableRowRadius,
   tableRowBGColor,
   tableRowBoxShadow,
+  tableColumnMaxWidth,
+  tableColumnMinWidth,
   tHeadColor,
   tHeadFamily,
   tHeadPadding,
@@ -790,6 +806,8 @@ const Table = ({
   tBodyRowMarginTop,
   className,
   openListColor,
+  openListFontSize,
+  openListFontFamily,
   hideBorder
 }) => {
   const [body, setBody] = React.useState([]);
@@ -1290,7 +1308,9 @@ const Table = ({
       tHeadTextAlign: tHeadTextAlign ? tHeadTextAlign : configStyles.TABLE.tHeadTextAlign,
       tHeadFontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
       borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
-      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
+      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
+      tableColumnMinWidth: tableColumnMinWidth ? tableColumnMinWidth : configStyles.TABLE.tableColumnMinWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ? tableColumnMaxWidth : configStyles.TABLE.tableColumnMaxWidth
     });
   }))), body && body.length > 0 && /*#__PURE__*/React__default["default"].createElement("tbody", {
     style: {
@@ -1316,6 +1336,10 @@ const Table = ({
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
         openListColor: openListColor ? openListColor : configStyles.TABLE.openListColor,
+        tableColumnMinWidth: tableColumnMinWidth ? tableColumnMinWidth : configStyles.TABLE.tableColumnMinWidth,
+        tableColumnMaxWidth: tableColumnMaxWidth ? tableColumnMaxWidth : configStyles.TABLE.tableColumnMaxWidth,
+        openListFontSize: openListFontSize ? openListFontSize : configStyles.TABLE.openListFontSize,
+        openListFontFamily: openListFontFamily ? openListFontFamily : configStyles.TABLE.openListFontFamily,
         handleCheckedBody: handleCheckedBody,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
@@ -1345,6 +1369,8 @@ Table.propTypes = {
   tableRowRadius: PropTypes__default["default"].string,
   tableRowBGColor: PropTypes__default["default"].string,
   tableRowBoxShadow: PropTypes__default["default"].string,
+  tableColumnMaxWidth: PropTypes__default["default"].string,
+  tableColumnMinWidth: PropTypes__default["default"].string,
   tHeadColor: PropTypes__default["default"].string,
   tHeadFamily: PropTypes__default["default"].string,
   tHeadPadding: PropTypes__default["default"].string,
@@ -1364,12 +1390,14 @@ Table.propTypes = {
   className: PropTypes__default["default"].string,
   tBodyRowBorder: PropTypes__default["default"].string,
   openListColor: PropTypes__default["default"].string,
+  openListFontSize: PropTypes__default["default"].string,
+  openListFontFamily: PropTypes__default["default"].string,
   hideBorder: PropTypes__default["default"].bool
 };
 
-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)}}";
-var styles$a = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$c);
+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,
@@ -1609,7 +1637,7 @@ const Modal = ({
       justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a['animation__modal']}`,
+    className: `${styles$9['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
@@ -1813,9 +1841,9 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@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$9 = {"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","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$b);
+var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@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","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$a);
 
 const InputTypes = {
   TEL: 'tel',
@@ -1893,7 +1921,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '', styles$9['input-wrap']);
+  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$8['inp-num'] : '', styles$8['input-wrap']);
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -2193,7 +2221,7 @@ const Input = ({
       fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily
     }
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$9['input-content']}`,
+    className: `${styles$8['input-content']}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -2353,57 +2381,222 @@ Input.defaultProps = {
   type: 'text'
 };
 
-var css_248z$a = ".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$8 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$a);
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
 
+const RadioDirectionMode = {
+  VERTICAL: 'vertical',
+  HORINZONTAL: 'horizontal'
+};
 const Radio = ({
-  disabled,
-  defaultChecked,
-  required,
+  data,
+  size,
+  getData,
+  selected,
+  keyNames,
+  diraction,
   className,
-  name,
-  value,
-  jsonData,
-  label,
-  ...props
+  borderSize,
+  labelColor,
+  borderColor,
+  borderStyle,
+  labelFontSize,
+  labelFontFamily,
+  labelFontWeight,
+  labelLineHeight,
+  radioMarginRight,
+  borderActiveColor,
+  radioItemMarginRight,
+  radioItemMarginBottom
 }) => {
-  const classProps = classnames__default["default"](styles$8.checkbox, className);
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
-    return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$8['radio-wrap']} radio-wrap-rem`,
-      key: element.value
-    }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
-      type: "radio",
-      className: classProps,
-      disabled: disabled,
-      required: required,
-      defaultChecked: id === 0 ? defaultChecked : '',
-      value: value ? value : element.value,
-      name: name ? name : element.name
-    }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${styles$8['radio-checkmark']} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$8.labelRadio
-    }, label ? label : element.label) : '');
+  const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className ? className : configStyles.RADIO.className);
+  const [innerData, setInnerData] = React.useState([]);
+  const [radioInnerSize, setRadioInnerSize] = React.useState('');
+  const [radioInnerFormat, setRadioInnerFormat] = React.useState('');
+  const [innerSelectedData, setInnerSelectedData] = React.useState({});
+  const handleMouseEnter = (id, elemID) => {
+    const elem = document.querySelector(`#${elemID}`);
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : borderColor ? borderColor : configStyles.RADIO.borderColor;
+  };
+  const handleMouseLeave = (id, elemID) => {
+    const elem = document.querySelector(`#${elemID}`);
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : 'transparent';
+  };
+  const handleChecked = selItem => {
+    setInnerSelectedData(selItem);
+    getData && getData(selItem);
+  };
+  React.useEffect(() => {
+    if (Array.isArray(data)) {
+      setInnerData(data);
+    } else {
+      setInnerData([data]);
+    }
+  }, [data]);
+  React.useEffect(() => {
+    let radioSize = '';
+    let radioSizeFormat = '';
+    const checkSize = size || configStyles.RADIO.size;
+    if (checkSize && typeof checkSize === 'string') {
+      if (checkSize.length > 0) {
+        checkSize.split('').map(item => {
+          if (!isNaN(parseInt(item))) {
+            radioSize += item;
+          } else {
+            radioSizeFormat += item;
+          }
+        });
+      }
+    }
+    if (radioSize < '10') {
+      radioSize = '10';
+    }
+    setRadioInnerFormat(radioSizeFormat);
+    setRadioInnerSize(`${parseInt(radioSize) / 2}`);
+  }, [size, configStyles.RADIO.size]);
+  React.useEffect(() => {
+    setInnerSelectedData(selected);
+  }, [selected]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classProps,
+    style: {
+      display: 'flex',
+      flexDirection: diraction === 'horizontal' ? 'row' : 'column'
+    }
+  }, innerData && innerData.length > 0 && innerData.map((item, index) => {
+    const elemId = `TUI_${index}_radio_inner` + v4();
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: `TUI_${index}_radio`,
+      style: {
+        display: 'flex',
+        cursor: item.disabled ? 'not-allowed' : 'pointer',
+        width: 'fit-content',
+        alignItems: 'center',
+        marginRight: diraction === 'horizontal' ? radioItemMarginRight ? radioItemMarginRight : configStyles.RADIO.radioItemMarginRight : '0px',
+        marginBottom: diraction === 'vertical' ? radioItemMarginBottom ? radioItemMarginBottom : configStyles.RADIO.radioItemMarginBottom : '0px'
+      },
+      onClick: item.disabled ? _ => _ : () => handleChecked(item),
+      onMouseEnter: () => handleMouseEnter(item[keyNames.id], elemId),
+      onMouseLeave: () => handleMouseLeave(item[keyNames.id], elemId)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: '100%',
+        justifyContent: 'center',
+        width: size ? size : configStyles.RADIO.size,
+        height: size ? size : configStyles.RADIO.size,
+        marginRight: item.label ? radioMarginRight ? radioMarginRight : configStyles.RADIO.radioMarginRight : '0px',
+        border: `${borderSize ? borderSize : configStyles.RADIO.borderSize} ${borderStyle ? borderStyle : configStyles.RADIO.borderStyle}`,
+        borderColor: item[keyNames.id] === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : borderColor ? borderColor : configStyles.RADIO.borderColor
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      id: elemId,
+      style: {
+        borderRadius: '100%',
+        width: radioInnerSize + radioInnerFormat,
+        height: radioInnerSize + radioInnerFormat,
+        backgroundColor: item[keyNames.id] === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : 'transparent'
+      }
+    })), item[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("span", {
+      style: {
+        color: labelColor ? labelColor : configStyles.RADIO.labelColor,
+        fontSize: labelFontSize ? labelFontSize : configStyles.RADIO.labelFontSize,
+        fontFamily: labelFontFamily ? labelFontFamily : configStyles.RADIO.labelFontFamily,
+        fontWeight: labelFontWeight ? labelFontWeight : configStyles.RADIO.labelFontWeight,
+        lineHeight: labelLineHeight ? labelLineHeight : configStyles.RADIO.labelLineHeight
+      },
+      onMouseEnter: () => handleMouseEnter(item[keyNames.id], elemId),
+      onMouseLeave: () => handleMouseLeave(item[keyNames.id], elemId)
+    }, item[keyNames.label]) : '');
   }));
 };
 Radio.propTypes = {
+  size: PropTypes__default["default"].string,
+  selected: PropTypes__default["default"].object,
+  keyNames: PropTypes__default["default"].object,
   className: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
-  required: PropTypes__default["default"].bool,
-  defaultChecked: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  name: PropTypes__default["default"].string,
-  value: PropTypes__default["default"].string,
-  jsonData: PropTypes__default["default"].string,
-  label: PropTypes__default["default"].string,
-  keyNames: PropTypes__default["default"].object
+  borderSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  borderStyle: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  radioMarginRight: PropTypes__default["default"].string,
+  getData: PropTypes__default["default"].func.isRequired,
+  borderActiveColor: PropTypes__default["default"].string,
+  radioItemMarginRight: PropTypes__default["default"].string,
+  radioItemMarginBottom: PropTypes__default["default"].string,
+  diraction: PropTypes__default["default"].oneOf(Object.values(RadioDirectionMode)),
+  data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
 Radio.defaultProps = {
-  onChange: undefined,
-  jsonData: '[{"value":"email", "name":"contact", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact", "label":"Phone", "id":"contactChoice2"}]'
+  diraction: 'vertical'
 };
 
 const Button = ({
@@ -3438,8 +3631,8 @@ const Captcha = ({
     className: classProps
   }, label && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      fontSize: size ? size : configStyles.Captcha.size,
-      color: color ? color : configStyles.Captcha.color
+      fontSize: size ? size : configStyles.CAPTCHA.size,
+      color: color ? color : configStyles.CAPTCHA.color
     }
   }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -3555,71 +3748,6 @@ Stepper.propTypes = {
   activeSteps: PropTypes__default["default"].number
 };
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
 const SvgHeic = ({
   title,
   titleId,
@@ -4038,6 +4166,7 @@ const NewFile = ({
   change,
   border,
   upload,
+  preview,
   maxSize,
   maxWidth,
   disabled,
@@ -4061,6 +4190,12 @@ const NewFile = ({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  uploadBtnFont,
+  uploadBtnSize,
+  uploadBtnLabel,
+  uploadBtnColor,
+  uploadBtnHeight,
+  uploadBtnBackgroundColor,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -4106,6 +4241,7 @@ const NewFile = ({
   };
   const handleRemoveFile = () => {
     setImage(null);
+    setSingleFile(null);
     removeFile && removeFile(singleFile);
   };
   const handleUploadFiles = file => {
@@ -4359,7 +4495,7 @@ const NewFile = ({
       fontSize: size ? size : configStyles.FILE.size,
       fontWeight: weight ? weight : configStyles.FILE.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -4370,7 +4506,7 @@ const NewFile = ({
       height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px'
     }
@@ -4386,7 +4522,35 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      padding: '5px',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Button, {
+    contentWidth: true,
+    onClick: _ => _,
+    font: uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont,
+    size: uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize,
+    label: uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel,
+    color: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    height: uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight,
+    hoverColor: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    backgroundColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor,
+    backgroundHoverColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor
+  }), /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      marginLeft: '5px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4446,6 +4610,7 @@ const NewFile = ({
 NewFile.propTypes = {
   or: PropTypes__default["default"].string,
   size: PropTypes__default["default"].string,
+  preview: PropTypes__default["default"].bool,
   label: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
@@ -4456,6 +4621,7 @@ NewFile.propTypes = {
   upload: PropTypes__default["default"].string,
   weight: PropTypes__default["default"].number,
   maxSize: PropTypes__default["default"].number,
+  maxWidth: PropTypes__default["default"].string,
   removeFile: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
@@ -4475,6 +4641,12 @@ NewFile.propTypes = {
   progressColor: PropTypes__default["default"].string,
   deleteComponent: PropTypes__default["default"].bool,
   removeComponent: PropTypes__default["default"].func,
+  uploadBtnFont: PropTypes__default["default"].string,
+  uploadBtnSize: PropTypes__default["default"].string,
+  uploadBtnLabel: PropTypes__default["default"].string,
+  uploadBtnColor: PropTypes__default["default"].string,
+  uploadBtnHeight: PropTypes__default["default"].string,
+  uploadBtnBackgroundColor: PropTypes__default["default"].string,
   listItemHeight: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func.isRequired,
@@ -4502,6 +4674,7 @@ NewFile.propTypes = {
 };
 NewFile.defaultProps = {
   maxSize: 10,
+  preview: true,
   timeForRemoveError: 5000,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 };
@@ -4599,6 +4772,10 @@ Checkbox.defaultProps = {
 var css_248z$4 = "textarea{-webkit-appearance:none}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$4);
 
+const PositionSide = {
+  TOP: 'top',
+  BOTTOM: 'bottom'
+};
 const Textarea = ({
   size,
   label,
@@ -4633,7 +4810,8 @@ const Textarea = ({
   borderFocusColor,
   borderHoverColor,
   labelMarginBottom,
-  showCharacterCount
+  showCharacterCount,
+  characterCountPosition
 }) => {
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
@@ -4673,18 +4851,16 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
-    if (value === '') {
-      setError('');
-    }
-    setInnerValue(value);
-  }, [value, onChange]);
-  React.useEffect(() => {
     if (errorMessage) {
       setError(errorMessage);
     } else {
       setError('');
     }
-  }, [errorMessage]);
+    if (value === '') {
+      setError('');
+    }
+    setInnerValue(value);
+  }, [value, onChange, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
@@ -4705,7 +4881,7 @@ const Textarea = ({
       display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
@@ -4738,14 +4914,29 @@ const Textarea = ({
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }), showCharacterCount && maxLength && characterCountPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+    }
+  }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      clear: 'both',
+      wordBreak: 'break-all',
+      maxWidth: width ? width : configStyles.TEXTAREA.width
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
       fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
       color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
       marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
     }
-  }, error) : '');
+  }, error)) : '');
 };
 Textarea.propTypes = {
   size: PropTypes__default["default"].string,
@@ -4781,7 +4972,11 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func.isRequired
+  onChange: PropTypes__default["default"].func.isRequired,
+  characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
+};
+Textarea.defaultProps = {
+  characterCountPosition: 'top'
 };
 
 var css_248z$3 = "";
@@ -5649,7 +5844,9 @@ exports.Modal = Modal;
 exports.NewAutocomplete = NewAutocomplete;
 exports.NewFile = NewFile;
 exports.Pagination = Pagination;
+exports.PositionSide = PositionSide;
 exports.Radio = Radio;
+exports.RadioDirectionMode = RadioDirectionMode;
 exports.Select = Select;
 exports.Stepper = Stepper;
 exports.Table = Table;