@xaypay/tui 0.0.116 → 0.0.118

package/dist/index.es.js

@@ -84,9 +84,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,
@@ -146,11 +146,11 @@ const File = ({
     document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
+    className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
   }, /*#__PURE__*/React__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.createElement("input", {
     hidden: true,
@@ -159,23 +159,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__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.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__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.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info']} upload-info-rem`
+    className: `${styles$b['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__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.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.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.createElement("i", {
     className: "icon-delete"
@@ -383,9 +383,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes.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 = ({
@@ -396,6 +396,8 @@ const TH = ({
   tHeadFontSize,
   tHeadTextAlign,
   tHeadFontWeight,
+  tableColumnMinWidth,
+  tableColumnMaxWidth,
   handleCheckedHeader,
   borderTopLeftRadius,
   borderTopRightRadius,
@@ -411,18 +413,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.createElement("div", {
     style: {
       display: 'flex',
@@ -461,7 +464,11 @@ const TD = ({
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
+  openListFontSize,
   handleCheckedBody,
+  openListFontFamily,
+  tableColumnMinWidth,
+  tableColumnMaxWidth,
   handleBodyActionClick,
   handleMoreOptionsClick,
   handleContentListClick,
@@ -511,13 +518,14 @@ 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,
       borderColor: hideBorder ? 'transparent' : '#eeeeee',
       boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -536,7 +544,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 : '');
@@ -558,7 +566,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 : '');
@@ -582,7 +590,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.createElement(SingleCheckbox, {
     data: item,
     index: index,
@@ -594,16 +602,18 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
+      flexShrink: 10,
       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'
     }
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
+      textAlign: tBodyTextAlign,
       margin: '0px',
       cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
     },
     onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
-  }, item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
+  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
@@ -627,7 +637,7 @@ const TD = ({
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default.createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
-      className: styles$b['dots-option-item'],
+      className: styles$a['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
@@ -653,17 +663,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.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 : '');
@@ -675,7 +688,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) : '') : '');
 };
 
@@ -741,6 +754,8 @@ const Table = ({
   tableRowRadius,
   tableRowBGColor,
   tableRowBoxShadow,
+  tableColumnMaxWidth,
+  tableColumnMinWidth,
   tHeadColor,
   tHeadFamily,
   tHeadPadding,
@@ -760,6 +775,8 @@ const Table = ({
   tBodyRowMarginTop,
   className,
   openListColor,
+  openListFontSize,
+  openListFontFamily,
   hideBorder
 }) => {
   const [body, setBody] = useState([]);
@@ -1260,7 +1277,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.createElement("tbody", {
     style: {
@@ -1286,6 +1305,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,
@@ -1315,6 +1338,8 @@ Table.propTypes = {
   tableRowRadius: PropTypes.string,
   tableRowBGColor: PropTypes.string,
   tableRowBoxShadow: PropTypes.string,
+  tableColumnMaxWidth: PropTypes.string,
+  tableColumnMinWidth: PropTypes.string,
   tHeadColor: PropTypes.string,
   tHeadFamily: PropTypes.string,
   tHeadPadding: PropTypes.string,
@@ -1334,12 +1359,14 @@ Table.propTypes = {
   className: PropTypes.string,
   tBodyRowBorder: PropTypes.string,
   openListColor: PropTypes.string,
+  openListFontSize: PropTypes.string,
+  openListFontFamily: PropTypes.string,
   hideBorder: PropTypes.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,
@@ -1579,7 +1606,7 @@ const Modal = ({
       justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$a['animation__modal']}`,
+    className: `${styles$9['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
@@ -1783,9 +1810,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',
@@ -1841,6 +1868,7 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
@@ -1862,7 +1890,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '', styles$9['input-wrap']);
+  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$8['inp-num'] : '', styles$8['input-wrap']);
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -2152,17 +2180,17 @@ const Input = ({
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: `${styles$9['input-title']}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
       display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__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,
@@ -2299,6 +2327,7 @@ Input.propTypes = {
   errorPosition: PropTypes.string,
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
@@ -2321,57 +2350,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(styles$8.checkbox, className);
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, parseData.map((element, id) => {
-    return /*#__PURE__*/React__default.createElement("label", {
-      className: `${styles$8['radio-wrap']} radio-wrap-rem`,
-      key: element.value
-    }, /*#__PURE__*/React__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.createElement("span", {
-      className: `${styles$8['radio-checkmark']} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React__default.createElement("span", {
-      className: styles$8.labelRadio
-    }, label ? label : element.label) : '');
+  const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.RADIO.className);
+  const [innerData, setInnerData] = useState([]);
+  const [radioInnerSize, setRadioInnerSize] = useState('');
+  const [radioInnerFormat, setRadioInnerFormat] = useState('');
+  const [innerSelectedData, setInnerSelectedData] = 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);
+  };
+  useEffect(() => {
+    if (Array.isArray(data)) {
+      setInnerData(data);
+    } else {
+      setInnerData([data]);
+    }
+  }, [data]);
+  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]);
+  useEffect(() => {
+    setInnerSelectedData(selected);
+  }, [selected]);
+  return /*#__PURE__*/React__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.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.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.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.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.string,
+  selected: PropTypes.object,
+  keyNames: PropTypes.object,
   className: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  jsonData: PropTypes.string,
-  label: PropTypes.string,
-  keyNames: PropTypes.object
+  borderSize: PropTypes.string,
+  labelColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderStyle: PropTypes.string,
+  labelFontSize: PropTypes.string,
+  labelFontFamily: PropTypes.string,
+  labelFontWeight: PropTypes.string,
+  labelLineHeight: PropTypes.string,
+  radioMarginRight: PropTypes.string,
+  getData: PropTypes.func.isRequired,
+  borderActiveColor: PropTypes.string,
+  radioItemMarginRight: PropTypes.string,
+  radioItemMarginBottom: PropTypes.string,
+  diraction: PropTypes.oneOf(Object.values(RadioDirectionMode)),
+  data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.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 = ({
@@ -2533,6 +2727,7 @@ const Select = ({
   labelDisplay,
   labelFontSize,
   labelLineHeight,
+  labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
   cursor,
@@ -2689,6 +2884,7 @@ const Select = ({
       display: labelDisplay ? labelDisplay : configStyles.SELECT.labelDisplay,
       fontSize: labelFontSize ? labelFontSize : configStyles.SELECT.labelFontSize,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.SELECT.labelLineHeight,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.SELECT.labelFontFamily,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
@@ -2812,6 +3008,7 @@ Select.propTypes = {
   labelDisplay: PropTypes.string,
   labelFontSize: PropTypes.string,
   labelLineHeight: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   labelMarginBottom: PropTypes.string,
   labelTextTransform: PropTypes.string,
   cursor: PropTypes.string,
@@ -3376,8 +3573,8 @@ const Captcha = ({
 }) => {
   const [rangeNumber, setRangeNumber] = useState(0);
   const [rangeProgress, setRangeProgress] = useState(0);
-  const classProps = classnames(className ? className : configStyles.CAPTCHA.className);
   const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.CAPTCHA.className);
   const handleRange = e => {
     const value = e.target.value;
     getRange(value);
@@ -3520,71 +3717,6 @@ Stepper.propTypes = {
   activeSteps: PropTypes.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]]).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 SvgHeic = ({
   title,
   titleId,
@@ -4593,6 +4725,7 @@ const Textarea = ({
   placeholder,
   labelDisplay,
   errorMessage,
+  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
@@ -4603,8 +4736,8 @@ const Textarea = ({
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
-  const classProps = classnames(className ? className : configStyles.TEXTAREA.className);
   const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.TEXTAREA.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -4659,6 +4792,7 @@ const Textarea = ({
       display: 'flex',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.TEXTAREA.labelFontFamily,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
     }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -4737,6 +4871,7 @@ Textarea.propTypes = {
   placeholder: PropTypes.string,
   errorMessage: PropTypes.string,
   labelDisplay: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   backgroundColor: PropTypes.string,
   showCharacterCount: PropTypes.bool,
   value: PropTypes.string.isRequired,
@@ -5251,6 +5386,7 @@ const NewAutocomplete = ({
   contentPosition,
   contentTopColor,
   labelLineHeight,
+  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
@@ -5461,6 +5597,7 @@ const NewAutocomplete = ({
       fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
       display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.NEWAUTOCOMPLETE.labelFontFamily,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
@@ -5539,6 +5676,7 @@ NewAutocomplete.propTypes = {
   labelLineHeight: PropTypes.string,
   contentTopColor: PropTypes.string,
   change: PropTypes.func.isRequired,
+  labelFontFamily: PropTypes.string,
   contentDirection: PropTypes.string,
   contentTopWeight: PropTypes.number,
   contentTopRadius: PropTypes.string,
@@ -5596,4 +5734,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, DirectionMode, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, DirectionMode, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, RadioDirectionMode, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };