@xaypay/tui 0.0.116 → 0.0.117

package/dist/index.es.js

@@ -603,7 +603,7 @@ const TD = ({
       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'
@@ -1841,6 +1841,7 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
@@ -2152,14 +2153,14 @@ 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']}`,
@@ -2299,6 +2300,7 @@ Input.propTypes = {
   errorPosition: PropTypes.string,
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
@@ -2533,6 +2535,7 @@ const Select = ({
   labelDisplay,
   labelFontSize,
   labelLineHeight,
+  labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
   cursor,
@@ -2689,6 +2692,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 +2816,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 +3381,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);
@@ -3553,7 +3558,7 @@ for (let i = 0; i < 256; ++i) {
 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();
+  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);
@@ -4593,6 +4598,7 @@ const Textarea = ({
   placeholder,
   labelDisplay,
   errorMessage,
+  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
@@ -4603,8 +4609,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 +4665,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 +4744,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 +5259,7 @@ const NewAutocomplete = ({
   contentPosition,
   contentTopColor,
   labelLineHeight,
+  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
@@ -5461,6 +5470,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 +5549,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,

package/dist/index.js

@@ -633,7 +633,7 @@ const TD = ({
       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["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["default"].createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
@@ -1871,6 +1871,7 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
@@ -2182,14 +2183,14 @@ const Input = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["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["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$9['input-content']}`,
@@ -2329,6 +2330,7 @@ Input.propTypes = {
   errorPosition: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
   telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
@@ -2563,6 +2565,7 @@ const Select = ({
   labelDisplay,
   labelFontSize,
   labelLineHeight,
+  labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
   cursor,
@@ -2719,6 +2722,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
     }
@@ -2842,6 +2846,7 @@ Select.propTypes = {
   labelDisplay: PropTypes__default["default"].string,
   labelFontSize: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
   labelTextTransform: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
@@ -3406,8 +3411,8 @@ const Captcha = ({
 }) => {
   const [rangeNumber, setRangeNumber] = React.useState(0);
   const [rangeProgress, setRangeProgress] = React.useState(0);
-  const classProps = classnames__default["default"](className ? className : configStyles.CAPTCHA.className);
   const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className ? className : configStyles.CAPTCHA.className);
   const handleRange = e => {
     const value = e.target.value;
     getRange(value);
@@ -3583,7 +3588,7 @@ for (let i = 0; i < 256; ++i) {
 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();
+  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);
@@ -4623,6 +4628,7 @@ const Textarea = ({
   placeholder,
   labelDisplay,
   errorMessage,
+  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
@@ -4633,8 +4639,8 @@ const Textarea = ({
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
-  const classProps = classnames__default["default"](className ? className : configStyles.TEXTAREA.className);
   const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className ? className : configStyles.TEXTAREA.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -4689,6 +4695,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["default"].createElement("label", {
@@ -4767,6 +4774,7 @@ Textarea.propTypes = {
   placeholder: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   showCharacterCount: PropTypes__default["default"].bool,
   value: PropTypes__default["default"].string.isRequired,
@@ -5281,6 +5289,7 @@ const NewAutocomplete = ({
   contentPosition,
   contentTopColor,
   labelLineHeight,
+  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
@@ -5491,6 +5500,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,
@@ -5569,6 +5579,7 @@ NewAutocomplete.propTypes = {
   labelLineHeight: PropTypes__default["default"].string,
   contentTopColor: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func.isRequired,
+  labelFontFamily: PropTypes__default["default"].string,
   contentDirection: PropTypes__default["default"].string,
   contentTopWeight: PropTypes__default["default"].number,
   contentTopRadius: PropTypes__default["default"].string,

package/package.json

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

package/src/components/captcha/index.js

@@ -11,9 +11,8 @@ import styles from './captcha.module.css'
 export const Captcha = ({ size, color, range, label, className, getRange }) => {
     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

package/src/components/input/index.js

@@ -64,6 +64,7 @@ export const Input = ({
     boxShadowHover,
     errorClassName,
     errorAnimation,
+    labelFontFamily,
     phoneAlignItems,
     errorLineHeight,
     labelLineHeight,
@@ -424,7 +425,6 @@ export const Input = ({
         <div className={classProps}>
             {label ? (
                 <label
-                    className={`${styles['input-title']}`}
                     style={{
                         color: labelColor ? labelColor : configStyles.INPUT.labelColor,
                         fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -432,6 +432,7 @@ export const Input = ({
                         fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
                         lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
                         marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
+                        fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily,
                     }}
                 >
                     {label}
@@ -662,6 +663,7 @@ Input.propTypes = {
     errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
     errorClassName: PropTypes.string,
+    labelFontFamily: PropTypes.string,
     telErrorMessage: PropTypes.string,
     backgroundColor: PropTypes.string,
     phoneAlignItems: PropTypes.string,

package/src/components/newAutocomplete/index.js

@@ -35,6 +35,7 @@ export const NewAutocomplete = ({
     contentPosition,
     contentTopColor,
     labelLineHeight,
+    labelFontFamily,
     contentDirection,
     contentTopWeight,
     contentTopRadius,
@@ -392,6 +393,7 @@ export 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
@@ -530,6 +532,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,

package/src/components/select/index.js

@@ -35,6 +35,7 @@ export const Select = ({
     labelDisplay,
     labelFontSize,
     labelLineHeight,
+    labelFontFamily,
     labelMarginBottom,
     labelTextTransform,
 
@@ -215,6 +216,7 @@ export 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,
                     }}
@@ -490,6 +492,7 @@ Select.propTypes = {
     labelDisplay: PropTypes.string,
     labelFontSize: PropTypes.string,
     labelLineHeight: PropTypes.string,
+    labelFontFamily: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     labelTextTransform: PropTypes.string,
 

package/src/components/table/td.js

@@ -252,7 +252,9 @@ const TD = ({
                                     : (_) => _
                             }
                         >
-                            {item.content ? (
+                            {item.content === 0 ? (
+                                item.content.toString()
+                            ) : item.content ? (
                                 item.content
                             ) : hasOwnerProperty(item, 'arrowComponent') ? (
                                 item.status === 'close' ? (

package/src/components/textarea/index.js

@@ -36,6 +36,7 @@ export const Textarea = ({
     placeholder,
     labelDisplay,
     errorMessage,
+    labelFontFamily,
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
@@ -47,8 +48,8 @@ export const Textarea = ({
     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)
@@ -116,6 +117,7 @@ export const Textarea = ({
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: label ? 'space-between' : 'flex-end',
+                    fontFamily: labelFontFamily ? labelFontFamily : configStyles.TEXTAREA.labelFontFamily,
                     marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom,
                 }}
             >
@@ -238,6 +240,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,

package/src/stories/configuration.stories.mdx

@@ -182,7 +182,6 @@ import StackAlt from './assets/stackalt.svg';
     errorLineHeight: '19px',                           // for error message line height
     boxSizing: 'border-box',                           // for box sizing
     backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
-    backgroundDisableColor: '#FBFBFB',                 // for input and also (if there exist left or right icons) icons block background color when input is disable
     color: 'rgb(60, 57, 62)',                          // for input color
     labelMarginBottom: '6px',                          // for label margin bottom
     phoneAlignItems: 'center',                         // for phone extention inside item, work when input type is tel
@@ -191,7 +190,9 @@ import StackAlt from './assets/stackalt.svg';
     phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
     boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
     errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
+    backgroundDisableColor: '#FBFBFB',                 // for input and also (if there exist left or right icons) icons block background color when input is disable
     boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
+    labelFontFamily: 'Arial, sans-serif',              // for label font family
 }
 ```
 
@@ -339,6 +340,7 @@ import StackAlt from './assets/stackalt.svg';
     labelLineHeight: '22px',                           // for label line height
     labelMarginBottom: '6px',                          // for label margin bottom
     labelTextTransform: 'none',                        // for label text transform
+    labelFontFamily: 'Arial, sans-serif',              // for label font family
     
     errorSize: '14px',                                 // for error font size
     errorColor: 'rgb(238, 0, 0)',                      // for error color
@@ -447,6 +449,7 @@ import StackAlt from './assets/stackalt.svg';
   borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
   showCharacterCount: true,                             // for showing textarea character count ( set itself without configuration file)
   boxShadow: '0 0 0 2px #d1d1d1',                       // for border size and color
+  labelFontFamily: 'Arial, sans-serif',                 s// for label font family
 }
 ```
 
@@ -462,6 +465,7 @@ import StackAlt from './assets/stackalt.svg';
   labelLineHeight: '22px',                              // for label line height
   labelMarginBottom: '6px',                             // for label margin bottom
   labelTextTransform: 'none',                           // for label text transform
+  labelFontFamily: 'Arial, sans-serif',                 // for label font family
 
   className: '',                                        // for autocomplete class if it need
   searchCount: 3,                                       // for autocomplete show result logic 

package/tui.config.js

@@ -68,6 +68,7 @@ module.exports = {
         phoneJustifyContent: 'center', // for phone extention inside item, work when input type is tel
         boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
         errorAnimationDuration: '240ms', // for animation duration (when have error message and errorAnimation prop is true)
+        labelFontFamily: 'Arial, sans-serif', // for label font family
         boxShadowHover: '0 0 0 2px #3c393e', // for border size and color in hover mode (set if you want to change it)
     },
     // default properties for <Tooltip /> component
@@ -196,6 +197,7 @@ module.exports = {
         labelLineHeight: '22px', // for label line height
         labelMarginBottom: '6px', // for label margin bottom
         labelTextTransform: 'none', // for label text transform
+        labelFontFamily: 'Arial, sans-serif', // for label font family
 
         errorSize: '14px', // for error font size
         errorColor: 'rgb(238, 0, 0)', // for error color
@@ -262,6 +264,7 @@ module.exports = {
         borderHoverColor: '#3C393E', // for border color when hover action is happaning
         borderFocusColor: '#00236A', // for boredr color when focus action is happaning
         boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
+        labelFontFamily: 'Arial, sans-serif', // for label font family
     },
     // default properties for <NewAutocomplete /> component
     NEWAUTOCOMPLETE: {
@@ -273,6 +276,7 @@ module.exports = {
         labelLineHeight: '22px', // for label line height
         labelMarginBottom: '6px', // for label margin bottom
         labelTextTransform: 'none', // for label text transform
+        labelFontFamily: 'Arial, sans-serif', // for label font family
 
         className: '', // for autocomplete class if it need
         searchCount: 3, // for autocomplete show result logic