@xaypay/tui 0.2.34 → 0.3.1

package/dist/index.js

@@ -556,7 +556,6 @@ var packageResult = {
   BUTTON: {
     opacity: 1,
     width: '100%',
-    radius: '6px',
     className: '',
     type: 'button',
     height: '46px',
@@ -565,16 +564,16 @@ var packageResult = {
     disabled: false,
     cursor: 'pointer',
     contentWidth: false,
+    borderRadius: '6px',
+    outlineWidth: '2px',
     padding: '12px 20px',
+    disabledBorderWidth: '2px',
     transition: 'background-color 240ms, color 240ms',
-    box: {
-      sizing: boxSizing
-    },
     colors: {
       background: 'rgba(0, 35, 106, 1)',
       backgroundHover: '#CB3A3A',
       disabled: 'rgba(60, 57, 62, 1)',
-      disabledLine: 'rgba(60, 57, 62, 1)',
+      disabledBorderColor: 'rgba(60, 57, 62, 1)',
       disabledBackground: 'rgba(238, 238, 238, 1)',
       withoutStyling: {
         color: '#000000',
@@ -591,8 +590,7 @@ var packageResult = {
       }
     },
     icon: {
-      marginLeft: '10px',
-      marginRight: '10px'
+      gap: '10px'
     },
     withoutStyling: false
   },
@@ -657,6 +655,7 @@ var packageResult = {
       marginTop: '10px',
       iconMargin: '10px',
       lineHeight: '19px',
+      inContent: false,
       box: {
         shadow: '0 0 0 1px #F20918'
       },
@@ -860,6 +859,7 @@ var packageResult = {
       colors: {
         hover: '#373538',
         background: presetColors.extraLight,
+        placeholderDisable: presetColors.dark,
         backgroundDisable: presetColors.secondary
       },
       font: {
@@ -898,6 +898,7 @@ var packageResult = {
       color: 'rgb(238, 0, 0)',
       marginTop: '10px',
       zIndex: 10,
+      inContent: false,
       box: {
         shadow: `0 0 0 2px ${presetColors.danger}`
       },
@@ -928,7 +929,8 @@ var packageResult = {
       sizing: boxSizing,
       shadow: `0 0 0 2px ${presetColors.secondary}`,
       // like border
-
+      width: '2px',
+      // like border width
       colors: {
         hover: `0 0 0 2px ${presetColors.dark}`,
         // like border color
@@ -1081,6 +1083,7 @@ var packageResult = {
     error: {
       color: presetColors.danger,
       marginTop: '10px',
+      inContent: false,
       font: {
         ...fontObject
       },
@@ -1116,10 +1119,9 @@ var packageResult = {
       width: '27.8rem',
       height: 'auto'
     },
-    or: 'կամ',
     upload: 'Բեռնել',
     uploadColor: presetColors.success,
-    putFileHere: 'Տեղադրել ֆայլը այստեղ',
+    putFileHere: 'Տեղադրել ֆայլը այստեղ կամ',
     sizeText: 'Առավելագույնը',
     timeForRemoveError: 4000,
     extentionsRowMarginTop: '40px',
@@ -1143,6 +1145,7 @@ var packageResult = {
       showLessText: 'Փակել',
       showMoreText: 'Ավելին',
       showMoreTextColor: '#2C46C1',
+      marginBottom: '6px',
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1162,11 +1165,13 @@ var packageResult = {
     },
     error: {
       color: presetColors.danger,
+      marginTop: '6px',
       font: {
         ...fontObject
       },
       format: 'ֆայլի սխալ ֆորմատ',
       maxSize: 'Առավելագույն ծավալ',
+      formatValidate: 'Վնասված ֆայլ',
       noChoosenFile: 'Ֆայլը ընտրված չէ'
     },
     progress: {
@@ -1234,10 +1239,9 @@ var packageResult = {
     height: '',
     maxWidth: '95%',
     minWidth: '320px',
-    maxHeight: '95vh',
+    maxHeight: '95dvh',
     minHeight: '200px',
-    radius: '14px',
-    noScroll: false,
+    underScroll: false,
     padding: '20px 20px 20px',
     className: '',
     alignItems: 'center',
@@ -1247,7 +1251,8 @@ var packageResult = {
     border: {
       width: '20px',
       style: 'solid',
-      color: transparent
+      color: transparent,
+      radius: '14px'
     },
     colors: {
       background: 'white',
@@ -1291,8 +1296,8 @@ var packageResult = {
   // default properties for <SwipeModal /> component
   SWIPEMODAL: {
     width: '300px',
-    height: '100vh',
-    noScroll: false,
+    height: '100dvh',
+    underScroll: false,
     titleStyle: {
       color: '#1C212D',
       textAlign: 'left',
@@ -1304,7 +1309,7 @@ var packageResult = {
     },
     parent: {
       width: '100%',
-      height: '100vh',
+      height: '100dvh',
       colors: {
         background: 'rgba(60, 61, 70, 0.2)'
       }
@@ -1575,39 +1580,39 @@ var configStylesPromise = getProps();
 
 const Button = ({
   icon,
-  size,
-  style,
   type,
-  font,
   color,
-  label,
+  text,
   width,
   height,
   cursor,
-  weight,
   border,
-  radius,
   outline,
   padding,
   opacity,
   onClick,
+  iconGap,
   disabled,
+  fontSize,
   className,
-  boxSizing,
-  hoverIcon,
+  iconHover,
+  fontStyle,
   hoverColor,
   transition,
+  fontWeight,
+  fontFamily,
+  outlineWidth,
+  borderRadius,
   contentWidth,
-  iconRightSide,
   disabledColor,
   textTransform,
   withoutStyling,
   backgroundColor,
-  disabledLineColor,
-  btnIconMarginLeft,
-  btnIconMarginRight,
   withoutStylingColor,
+  disabledBorderColor,
+  disabledBorderWidth,
   backgroundHoverColor,
+  iconPosition = 'left',
   disabledBackgroundColor,
   withoutStylingHoverColor,
   ...props
@@ -1625,8 +1630,8 @@ const Button = ({
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
   }, [className]);
   React.useEffect(() => {
-    if (!label && !icon) {
-      alert('Add icon or label props on Button component');
+    if (!text && !icon) {
+      alert('Add icon or text props on Button component');
     }
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.BUTTON.className));
@@ -1644,15 +1649,15 @@ const Button = ({
       display: 'flex',
       outline: 'none',
       alignItems: 'center',
+      boxSizing: 'border-box',
       justifyContent: 'center',
       height: height ?? configStyles.BUTTON.height,
       padding: padding ?? configStyles.BUTTON.padding,
-      fontSize: size ?? configStyles.BUTTON.font.size,
-      borderRadius: radius ?? configStyles.BUTTON.radius,
-      fontStyle: style ?? configStyles.BUTTON.font.style,
-      fontFamily: font ?? configStyles.BUTTON.font.family,
-      fontWeight: weight ?? configStyles.BUTTON.font.weight,
-      boxSizing: boxSizing ?? configStyles.BUTTON.box.sizing,
+      fontSize: fontSize ?? configStyles.BUTTON.font.size,
+      borderRadius: borderRadius ?? configStyles.BUTTON.borderRadius,
+      fontStyle: fontStyle ?? configStyles.BUTTON.font.style,
+      fontFamily: fontFamily ?? configStyles.BUTTON.font.family,
+      fontWeight: fontWeight ?? configStyles.BUTTON.font.weight,
       transition: transition ?? configStyles.BUTTON.transition,
       border: outline ? 'none' : border ?? configStyles.BUTTON.border,
       width: contentWidth ? 'auto' : width ?? configStyles.BUTTON.width,
@@ -1660,7 +1665,7 @@ const Button = ({
       cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
       opacity: opacity ?? configStyles.BUTTON.opacity,
       backgroundColor: withoutStyling ?? configStyles.BUTTON.withoutStyling ? 'transparent' : (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
-      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
+      boxShadow: outline && !withoutStyling && !configStyles.BUTTON.withoutStyling ? disabled ? `inset 0 0 0 ${disabledBorderWidth ?? configStyles.BUTTON.disabledBorderWidth} ${disabledBorderColor ?? configStyles.BUTTON.colors.disabledBorderColor}` : `inset 0 0 0 ${outlineWidth ?? configStyles.BUTTON.outlineWidth} ${backgroundColor ?? configStyles.BUTTON.colors.background}` : 'none',
       color: withoutStyling ?? configStyles.BUTTON.withoutStyling ? isHover ? withoutStylingHoverColor ?? configStyles.BUTTON.colors.withoutStyling.hoverColor : withoutStylingColor ?? configStyles.BUTTON.colors.withoutStyling.color : (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
     },
     type: type ?? configStyles.BUTTON.type,
@@ -1669,50 +1674,50 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), !iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, props), iconPosition === 'left' ? isHover && iconHover ? iconHover : icon ?? null : ' ', ' ', text && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginLeft: icon && !iconRightSide ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px',
-      marginRight: icon && iconRightSide ? btnIconMarginLeft ? btnIconMarginLeft : configStyles.BUTTON.icon.marginLeft : '0px'
+      marginLeft: icon && iconPosition === 'left' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px',
+      marginRight: icon && iconPosition === 'right' ? iconGap ?? configStyles.BUTTON.icon.gap : '0px'
     }
-  }, label), ' ', iconRightSide ? isHover && hoverIcon ? hoverIcon : icon ?? null : ' ', !icon && !label && 'Add icon or label prop on Button component'));
+  }, text), ' ', iconPosition === 'right' ? isHover && iconHover ? iconHover : icon ?? null : ' ', !icon && !text && 'Add icon or text prop on Button component'));
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].string,
-  font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
-  label: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
   border: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool,
-  radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   opacity: PropTypes__default["default"].number,
-  boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  hoverIcon: PropTypes__default["default"].element,
+  iconHover: PropTypes__default["default"].element,
   hoverColor: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
-  iconRightSide: PropTypes__default["default"].bool,
+  outlineWidth: PropTypes__default["default"].string,
   withoutStyling: PropTypes__default["default"].bool,
   textTransform: PropTypes__default["default"].string,
   disabledColor: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
-  disabledLineColor: PropTypes__default["default"].string,
-  btnIconMarginLeft: PropTypes__default["default"].string,
-  btnIconMarginRight: PropTypes__default["default"].string,
+  disabledBorderWidth: PropTypes__default["default"].string,
   withoutStylingColor: PropTypes__default["default"].string,
   backgroundHoverColor: PropTypes__default["default"].string,
   disabledBackgroundColor: PropTypes__default["default"].string,
-  withoutStylingHoverColor: PropTypes__default["default"].string
+  withoutStylingHoverColor: PropTypes__default["default"].string,
+  text: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  iconGap: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
+  disabledBorderColor: PropTypes__default["default"].string,
+  iconPosition: PropTypes__default["default"].oneOf(['left', 'right'])
 };
 
 const SvgSvg = ({
@@ -1877,16 +1882,15 @@ styleInject(css_248z$d);
 
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
-  or,
-  size,
   name,
   color,
-  style,
-  weight,
-  family,
   height,
-  radius,
   change,
+  fontSize,
+  fontStyle,
+  fontFamily,
+  fontWeight,
+  borderRadius,
   borderWidth,
   borderStyle,
   borderColor,
@@ -1896,20 +1900,22 @@ const File = /*#__PURE__*/React.forwardRef(({
   multiple,
   required,
   className,
-  errorSize,
-  errorStyle,
-  errorWeight,
-  errorFamily,
+  errorFontSize,
+  errorFontStyle,
+  errorFontWeight,
+  errorFontFamily,
+  errorMarginTop,
   label,
-  labelSize,
   labelColor,
-  labelStyle,
-  labelWeight,
-  labelFamily,
   lableShowMore,
+  labelFontSize,
+  labelFontStyle,
+  labelFontWeight,
+  labelFontFamily,
   labelShowLessText,
   labelShowMoreText,
   showMoreTextColor,
+  labelMarginBottom,
   useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
@@ -1927,6 +1933,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   uploadColor,
   defaultData,
   formatError,
+  formatValidateError,
   errorIcon,
   errorIconShow,
   errorMessage,
@@ -2010,20 +2017,211 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [tooltipElem, setTooltipElem] = React.useState(null);
   const [choosenFileCount, setChoosenFileCount] = React.useState(0);
   const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
-  const handleCheckHeicFormat = async file => {
+  const handleCheckFileFormat = async (file, type) => {
     const buffer = await file.arrayBuffer();
     const dataView = new DataView(buffer);
-    if (dataView.byteLength < 12) return false;
-    for (let i = 0; i < dataView.byteLength - 8; i++) {
-      if (dataView.getUint8(i) === 0x66 && dataView.getUint8(i + 1) === 0x74 && dataView.getUint8(i + 2) === 0x79 && dataView.getUint8(i + 3) === 0x70) {
-        const majorBrand = String.fromCharCode(dataView.getUint8(i + 4), dataView.getUint8(i + 5), dataView.getUint8(i + 6), dataView.getUint8(i + 7));
-        const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'hevc'];
-        if (heicIdentifiers.includes(majorBrand)) {
+    if (type === 'png') {
+      if (dataView.byteLength < 8) {
+        return Promise.reject();
+      } else {
+        if (dataView.getUint8(0) === 0x89 && dataView.getUint8(1) === 0x50 && dataView.getUint8(2) === 0x4E && dataView.getUint8(3) === 0x47 && dataView.getUint8(4) === 0x0D && dataView.getUint8(5) === 0x0A && dataView.getUint8(6) === 0x1A && dataView.getUint8(7) === 0x0A) {
+          const end = dataView.byteLength - 12;
+          if (dataView.getUint8(end) === 0x00 && dataView.getUint8(end + 1) === 0x00 && dataView.getUint8(end + 2) === 0x00 && dataView.getUint8(end + 3) === 0x00 && dataView.getUint8(end + 4) === 0x49 && dataView.getUint8(end + 5) === 0x45 && dataView.getUint8(end + 6) === 0x4E && dataView.getUint8(end + 7) === 0x44 && dataView.getUint8(end + 8) === 0xAE && dataView.getUint8(end + 9) === 0x42 && dataView.getUint8(end + 10) === 0x60 && dataView.getUint8(end + 11) === 0x82) {
+            return Promise.resolve();
+          } else {
+            return Promise.reject();
+          }
+        } else {
+          return Promise.reject();
+        }
+      }
+    } else if (type === 'jpg') {
+      if (dataView.byteLength < 2) {
+        return Promise.reject();
+      } else {
+        if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8 && dataView.getUint8(dataView.byteLength - 2) === 0xFF && dataView.getUint8(dataView.byteLength - 1) === 0xD9) {
           return Promise.resolve();
+        } else {
+          return Promise.reject();
+        }
+      }
+    } else if (type === 'svg') {
+      if (dataView.byteLength < 8) return Promise.reject();
+      const len = dataView.byteLength;
+      let start = 0;
+      let end = len - 1;
+      const isWS = b => b === 0x20 || b === 0x09 || b === 0x0A || b === 0x0D;
+      while (start < len && isWS(dataView.getUint8(start))) start++;
+      const scanLimit = Math.min(len, start + 4096);
+      let foundSvgOpen = false;
+      for (let i = start; i <= scanLimit - 4; i++) {
+        if (dataView.getUint8(i) === 0x3C && (dataView.getUint8(i + 1) === 0x73 || dataView.getUint8(i + 1) === 0x53) && (dataView.getUint8(i + 2) === 0x76 || dataView.getUint8(i + 2) === 0x56) && (dataView.getUint8(i + 3) === 0x67 || dataView.getUint8(i + 3) === 0x47)) {
+          foundSvgOpen = true;
+          break;
+        }
+      }
+      if (!foundSvgOpen) return Promise.reject();
+      while (end >= 0 && isWS(dataView.getUint8(end))) end--;
+      if (end >= 5 && dataView.getUint8(end - 5) === 0x3C && dataView.getUint8(end - 4) === 0x2F && (dataView.getUint8(end - 3) === 0x73 || dataView.getUint8(end - 3) === 0x53) && (dataView.getUint8(end - 2) === 0x76 || dataView.getUint8(end - 2) === 0x56) && (dataView.getUint8(end - 1) === 0x67 || dataView.getUint8(end - 1) === 0x47) && dataView.getUint8(end) === 0x3E) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    } else if (type === 'docx') {
+      const len = dataView.byteLength;
+      if (len < 22) return Promise.reject();
+      const isZipHeader = dataView.getUint8(0) === 0x50 && dataView.getUint8(1) === 0x4B && dataView.getUint8(2) === 0x03 && dataView.getUint8(3) === 0x04;
+      if (!isZipHeader) return Promise.reject();
+      const EOCD = [0x50, 0x4B, 0x05, 0x06];
+      const maxBack = Math.min(len - 4, 0xFFFF + 22);
+      let eocdIndex = -1;
+      for (let i = len - 4; i >= len - 4 - maxBack; i--) {
+        if (i < 0) break;
+        if (dataView.getUint8(i) === EOCD[0] && dataView.getUint8(i + 1) === EOCD[1] && dataView.getUint8(i + 2) === EOCD[2] && dataView.getUint8(i + 3) === EOCD[3]) {
+          eocdIndex = i;
+          break;
+        }
+      }
+      if (eocdIndex === -1) return Promise.reject();
+      const findAscii = needle => {
+        const enc = new TextEncoder().encode(needle);
+        for (let i = 0; i <= len - enc.length; i++) {
+          let ok = true;
+          for (let j = 0; j < enc.length; j++) {
+            if (dataView.getUint8(i + j) !== enc[j]) {
+              ok = false;
+              break;
+            }
+          }
+          if (ok) return true;
+        }
+        return false;
+      };
+      const hasContentTypes = findAscii('[Content_Types].xml');
+      const hasRels = findAscii('_rels/.rels');
+      const hasDocument = findAscii('word/document.xml');
+      return hasContentTypes && hasRels && hasDocument ? Promise.resolve() : Promise.reject();
+    } else if (type === 'doc') {
+      const len = dataView.byteLength;
+      if (len < 512) return Promise.reject();
+      const FREESECT = 0xFFFFFFFF;
+      const ENDOFCHAIN = 0xFFFFFFFE;
+      const getU32 = off => dataView.getUint32(off, true);
+      const getI32 = off => dataView.getInt32(off, true);
+      const getU16 = off => dataView.getUint16(off, true);
+      const sectorOffset = (sector, sectorSize) => (sector + 1) * sectorSize;
+      const isOle = dataView.getUint8(0) === 0xD0 && dataView.getUint8(1) === 0xCF && dataView.getUint8(2) === 0x11 && dataView.getUint8(3) === 0xE0 && dataView.getUint8(4) === 0xA1 && dataView.getUint8(5) === 0xB1 && dataView.getUint8(6) === 0x1A && dataView.getUint8(7) === 0xE1;
+      if (!isOle) return Promise.reject();
+      if (dataView.getUint8(0x1C) !== 0xFE || dataView.getUint8(0x1D) !== 0xFF) {
+        return Promise.reject();
+      }
+      const sectorShift = getU16(0x1E); // 9 => 512, 12 => 4096
+      if (sectorShift !== 9 && sectorShift !== 12) return Promise.reject();
+      const sectorSize = 1 << sectorShift;
+      const firstDirSector = getI32(0x30);
+      if (firstDirSector < 0) return Promise.reject();
+      const dirStartOff = sectorOffset(firstDirSector, sectorSize);
+      if (dirStartOff < 512 || dirStartOff + sectorSize > len) return Promise.reject();
+      const numFATSectors = getU32(0x2C);
+      let firstDIFATSector = getI32(0x44);
+      let numDIFATSectors = getU32(0x48);
+      const difat = [];
+      for (let i = 0; i < 109; i++) {
+        const sec = getU32(0x4C + i * 4);
+        if (sec !== FREESECT) difat.push(sec);
+      }
+      const entriesPerDifatSector = sectorSize / 4 - 1;
+      while (numDIFATSectors > 0 && firstDIFATSector !== -1 && firstDIFATSector !== ENDOFCHAIN) {
+        const off = sectorOffset(firstDIFATSector, sectorSize);
+        if (off < 512 || off + sectorSize > len) break;
+        for (let i = 0; i < entriesPerDifatSector; i++) {
+          const sec = dataView.getUint32(off + i * 4, true);
+          if (sec !== FREESECT) difat.push(sec);
+        }
+        firstDIFATSector = dataView.getInt32(off + entriesPerDifatSector * 4, true); // next DIFAT
+        numDIFATSectors--;
+      }
+      if (difat.length === 0 || numFATSectors === 0) return Promise.reject();
+      const fat = [];
+      for (let i = 0; i < difat.length; i++) {
+        const fatSector = difat[i];
+        const off = sectorOffset(fatSector, sectorSize);
+        if (off < 512 || off + sectorSize > len) continue;
+        for (let j = 0; j < sectorSize; j += 4) {
+          fat.push(dataView.getUint32(off + j, true));
+        }
+      }
+      if (fat.length === 0) return Promise.reject();
+      const nextSector = s => s >= 0 && s < fat.length ? fat[s] : ENDOFCHAIN;
+      const names = new Set();
+      const td = new TextDecoder("utf-16le");
+      let dirSector = firstDirSector;
+      let safety = 0;
+      while (dirSector !== ENDOFCHAIN && dirSector !== FREESECT && safety++ < 10000) {
+        const off = sectorOffset(dirSector, sectorSize);
+        if (off < 512 || off + sectorSize > len) break;
+        for (let pos = 0; pos < sectorSize; pos += 128) {
+          const entryOff = off + pos;
+          const nameLen = getU16(entryOff + 64);
+          const objType = dataView.getUint8(entryOff + 66);
+          if (objType === 0 || nameLen < 2 || nameLen > 64) continue;
+          const nameBytes = new Uint8Array(dataView.buffer, dataView.byteOffset + entryOff, 64);
+          const realLen = Math.max(0, nameLen - 2);
+          const name = td.decode(nameBytes.slice(0, realLen)).replace(/\0/g, "");
+          if (name) names.add(name);
+        }
+        dirSector = nextSector(dirSector);
+      }
+      const hasWordDocument = names.has("WordDocument");
+      const hasTable = names.has("1Table") || names.has("0Table");
+      return hasWordDocument && hasTable ? Promise.resolve() : Promise.reject();
+    } else if (type === 'pdf') {
+      if (dataView.byteLength < 8) {
+        return Promise.reject();
+      } else {
+        if (dataView.getUint8(0) === 0x25 && dataView.getUint8(1) === 0x50 && dataView.getUint8(2) === 0x44 && dataView.getUint8(3) === 0x46) {
+          const len = dataView.byteLength;
+          let end = len - 1;
+          while (end >= 0 && (dataView.getUint8(end) === 0x0A ||
+          // \n
+          dataView.getUint8(end) === 0x0D ||
+          // \r
+          dataView.getUint8(end) === 0x20 ||
+          // space
+          dataView.getUint8(end) === 0x09 // tab
+          )) {
+            end--;
+          }
+          if (end >= 4 && dataView.getUint8(end - 4) === 0x25 && dataView.getUint8(end - 3) === 0x25 && dataView.getUint8(end - 2) === 0x45 && dataView.getUint8(end - 1) === 0x4F && dataView.getUint8(end) === 0x46) {
+            return Promise.resolve();
+          } else {
+            return Promise.reject();
+          }
+        } else {
+          return Promise.reject();
+        }
+      }
+    } else if (type === 'heic') {
+      if (dataView.byteLength < 12) {
+        return Promise.reject();
+      } else {
+        if (dataView.getUint8(0) === 0x66 && dataView.getUint8(1) === 0x74 && dataView.getUint8(2) === 0x79 && dataView.getUint8(3) === 0x70) {
+          if (dataView.getUint8(dataView.length - 4) === 0x6D && dataView.getUint8(dataView.length - 3) === 0x64 && dataView.getUint8(dataView.length - 2) === 0x61 && dataView.getUint8(dataView.length - 1) === 0x74) {
+            const majorBrand = String.fromCharCode(dataView.getUint8(4), dataView.getUint8(5), dataView.getUint8(6), dataView.getUint8(7));
+            const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'heif'];
+            if (heicIdentifiers.includes(majorBrand)) {
+              return Promise.resolve();
+            } else {
+              return Promise.reject();
+            }
+          } else {
+            return Promise.reject();
+          }
         }
       }
+    } else {
+      return Promise.reject();
     }
-    return Promise.reject();
   };
   const handleRemoveComponent = () => {
     if (!multiple) {
@@ -2037,6 +2235,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     setImage(null);
     setSingleFile(null);
     removeFile && removeFile(singleFile);
+    error && setError('');
   };
   const handleUploadFiles = file => {
     if (maxCHoosenLength && choosenFileCount > 0) {
@@ -2053,43 +2252,24 @@ const File = /*#__PURE__*/React.forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
+              if (fileExtensions.includes(file[ix].name.split('.')[file[ix].name.split('.').length - 1]) && ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].type.split('/')[1] === 'heif' || file[ix].type.split('/')[1] === 'heic' || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) || fileExtensions.includes('doc') && file[ix].type.split('/')[1] === 'msword' || fileExtensions.includes('docx') && file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml' || fileExtensions.includes('png') && file[ix].type.split('/')[1] === 'png' || fileExtensions.includes('pdf') && file[ix].type.split('/')[1] === 'pdf' || (fileExtensions.includes('jpg') || fileExtensions.includes('jpeg')) && file[ix].type.split('/')[1] === 'jpeg')) {
+                let typeOfFile = '';
                 if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-                  change({
-                    id: '',
-                    check: '',
-                    status: '',
-                    file: file[ix],
-                    uuid: v4()
-                  });
-                  setImage('docx');
+                  typeOfFile = 'docx';
                 } else if (file[ix].type === 'application/msword') {
-                  change({
-                    id: '',
-                    check: '',
-                    status: '',
-                    file: file[ix],
-                    uuid: v4()
-                  });
-                  setImage('doc');
-                } else if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
-                  handleCheckHeicFormat(file[ix]).then(() => {
-                    change({
-                      id: '',
-                      check: '',
-                      status: '',
-                      file: file[ix],
-                      uuid: v4()
-                    });
-                    setImage('heic');
-                  }).catch(() => {
-                    change({
-                      file: file[ix],
-                      uuid: v4(),
-                      check: formatError ?? configStyles.FILE.error.format
-                    });
-                  });
+                  typeOfFile = 'doc';
+                } else if (file[ix].type === 'application/pdf') {
+                  typeOfFile = 'pdf';
+                } else if (file[ix].type === 'image/heif' || file[ix].type === 'image/heic' || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+                  typeOfFile = 'heic';
+                } else if (file[ix].type === 'image/jpeg') {
+                  typeOfFile = 'jpg';
+                } else if (file[ix].type === 'image/png') {
+                  typeOfFile = 'png';
                 } else if (file[ix].type === 'image/svg+xml') {
+                  typeOfFile = 'svg';
+                }
+                handleCheckFileFormat(file[ix], typeOfFile).then(() => {
                   change({
                     id: '',
                     check: '',
@@ -2097,16 +2277,14 @@ const File = /*#__PURE__*/React.forwardRef(({
                     file: file[ix],
                     uuid: v4()
                   });
-                  setImage('svg');
-                } else {
+                  setImage(typeOfFile);
+                }).catch(() => {
                   change({
-                    id: '',
-                    check: '',
-                    status: '',
                     file: file[ix],
-                    uuid: v4()
+                    uuid: v4(),
+                    check: formatValidateError ?? configStyles.FILE.error.formatValidate
                   });
-                }
+                });
               } else {
                 change({
                   file: file[ix],
@@ -2128,43 +2306,24 @@ const File = /*#__PURE__*/React.forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
+            if (fileExtensions.includes(file[ix].name.split('.')[file[ix].name.split('.').length - 1]) && ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].type.split('/')[1] === 'heif' || file[ix].type.split('/')[1] === 'heic' || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) || fileExtensions.includes('doc') && file[ix].type.split('/')[1] === 'msword' || fileExtensions.includes('docx') && file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml' || fileExtensions.includes('png') && file[ix].type.split('/')[1] === 'png' || fileExtensions.includes('pdf') && file[ix].type.split('/')[1] === 'pdf' || (fileExtensions.includes('jpg') || fileExtensions.includes('jpeg')) && file[ix].type.split('/')[1] === 'jpeg')) {
+              let typeOfFile = '';
               if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-                change({
-                  id: '',
-                  check: '',
-                  status: '',
-                  file: file[ix],
-                  uuid: v4()
-                });
-                setImage('docx');
+                typeOfFile = 'docx';
               } else if (file[ix].type === 'application/msword') {
-                change({
-                  id: '',
-                  check: '',
-                  status: '',
-                  file: file[ix],
-                  uuid: v4()
-                });
-                setImage('doc');
-              } else if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
-                handleCheckHeicFormat(file[ix]).then(() => {
-                  change({
-                    id: '',
-                    check: '',
-                    status: '',
-                    file: file[ix],
-                    uuid: v4()
-                  });
-                  setImage('heic');
-                }).catch(() => {
-                  change({
-                    file: file[ix],
-                    uuid: v4(),
-                    check: formatError ?? configStyles.FILE.error.format
-                  });
-                });
+                typeOfFile = 'doc';
+              } else if (file[ix].type === 'application/pdf') {
+                typeOfFile = 'pdf';
+              } else if (file[ix].type === 'image/heif' || file[ix].type === 'image/heic' || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+                typeOfFile = 'heic';
+              } else if (file[ix].type === 'image/jpeg') {
+                typeOfFile = 'jpg';
+              } else if (file[ix].type === 'image/png') {
+                typeOfFile = 'png';
               } else if (file[ix].type === 'image/svg+xml') {
+                typeOfFile = 'svg';
+              }
+              handleCheckFileFormat(file[ix], typeOfFile).then(() => {
                 change({
                   id: '',
                   check: '',
@@ -2172,16 +2331,14 @@ const File = /*#__PURE__*/React.forwardRef(({
                   file: file[ix],
                   uuid: v4()
                 });
-                setImage('svg');
-              } else {
+                setImage(typeOfFile);
+              }).catch(() => {
                 change({
-                  id: '',
-                  check: '',
-                  status: '',
                   file: file[ix],
-                  uuid: v4()
+                  uuid: v4(),
+                  check: formatValidateError ?? configStyles.FILE.error.formatValidate
                 });
-              }
+              });
             } else {
               change({
                 file: file[ix],
@@ -2212,34 +2369,36 @@ const File = /*#__PURE__*/React.forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[0].type.split('/')[1] === 'svg+xml') {
+          if (fileExtensions.includes(file[0].name.split('.')[file[0].name.split('.').length - 1]) && ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type.split('/')[1] === 'heif' || file[0].type.split('/')[1] === 'heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || fileExtensions.includes('doc') && file[0].type.split('/')[1] === 'msword' || fileExtensions.includes('docx') && file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || fileExtensions.includes('svg') && file[0].type.split('/')[1] === 'svg+xml' || fileExtensions.includes('png') && file[0].type.split('/')[1] === 'png' || fileExtensions.includes('pdf') && file[0].type.split('/')[1] === 'pdf' || (fileExtensions.includes('jpg') || fileExtensions.includes('jpeg')) && file[0].type.split('/')[1] === 'jpeg')) {
             setError('');
+            let typeOfFile = '';
             if (file[0].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-              setImage('docx');
-              change(file);
-              setSingleFile(file);
+              typeOfFile = 'docx';
             } else if (file[0].type === 'application/msword') {
-              setImage('doc');
-              change(file);
-              setSingleFile(file);
+              typeOfFile = 'doc';
             } else if (file[0].type === 'application/pdf') {
-              setImage('pdf');
-              change(file);
-              setSingleFile(file);
+              typeOfFile = 'pdf';
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
-              handleCheckHeicFormat(file[0]).then(() => {
-                setImage('heic');
-                change(file);
-                setSingleFile(file);
-              }).catch(() => {
-                setImage(null);
-                setError(formatError ?? configStyles.FILE.error.format);
-              });
-            } else {
+              typeOfFile = 'heic';
+            } else if (file[0].type === 'image/jpeg') {
+              typeOfFile = 'jpg';
+            } else if (file[0].type === 'image/png') {
+              typeOfFile = 'png';
+            } else if (file[0].type === 'image/svg+xml') {
+              typeOfFile = 'svg';
+            }
+            handleCheckFileFormat(file[0], typeOfFile).then(() => {
+              if (typeOfFile === 'svg' || typeOfFile === 'png' || typeOfFile === 'jpg') {
+                setImage(URL.createObjectURL(file[0]));
+              } else {
+                setImage(typeOfFile);
+              }
               change(file);
               setSingleFile(file);
-              setImage(URL.createObjectURL(file[0]));
-            }
+            }).catch(() => {
+              setImage(null);
+              setError(formatValidateError ?? configStyles.FILE.error.formatValidate);
+            });
           } else {
             setImage(null);
             setError(formatError ?? configStyles.FILE.error.format);
@@ -2478,9 +2637,9 @@ const File = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
-      marginBottom: '6px',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
+      marginBottom: labelMarginBottom ?? configStyles.FILE.label.marginBottom,
       width: deleteComponent && useLabelTooltip && handleCheckTextWidth() === 'more' ? 'calc(100% - 26px)' : '100%'
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2496,10 +2655,10 @@ const File = /*#__PURE__*/React.forwardRef(({
     style: {
       width: '100%',
       color: labelColor ?? configStyles.FILE.label.color,
-      fontSize: labelSize ?? configStyles.FILE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
-      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      fontSize: labelFontSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.FILE.label.font.family,
       whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'nowrap' : 'normal',
       overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'hidden' : 'visible',
       textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'ellipsis' : '',
@@ -2510,20 +2669,20 @@ const File = /*#__PURE__*/React.forwardRef(({
   }, label, handleCheckTextWidth('label') === 'more' && showMore && (lableShowMore || configStyles.FILE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$c['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.FILE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
-      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      fontSize: labelFontSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.FILE.label.font.family,
       color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
     },
     onClick: handleChangeShowMore
   }, ' ', " ", labelShowLessText ?? configStyles.FILE.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth('label') === 'more' && !showMore && (lableShowMore || configStyles.FILE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$c['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.FILE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
-      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      fontSize: labelFontSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.FILE.label.font.family,
       color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
     },
     onClick: handleChangeShowMore
@@ -2544,9 +2703,9 @@ const File = /*#__PURE__*/React.forwardRef(({
       height: height ?? configStyles.FILE.height,
       borderWidth: borderWidth ?? configStyles.FILE.border.width,
       borderStyle: borderStyle ?? configStyles.FILE.border.style,
-      borderRadius: radius ?? configStyles.FILE.radius,
+      borderRadius: borderRadius ?? configStyles.FILE.radius,
       backgroundColor: backgroundColor ?? configStyles.FILE.colors.background,
-      borderColor: error ? errorColor ? errorColor : configStyles.FILE.error.color : disabled ? borderColor ? borderColor : configStyles.FILE.border.color : isHover ? borderHoverColor ? borderHoverColor : configStyles.FILE.border.colors.hover : borderColor ? borderColor : configStyles.FILE.border.color
+      borderColor: !multiple && error ? errorColor ? errorColor : configStyles.FILE.error.color : disabled ? borderColor ? borderColor : configStyles.FILE.border.color : isHover ? borderHoverColor ? borderHoverColor : configStyles.FILE.border.colors.hover : borderColor ? borderColor : configStyles.FILE.border.color
     },
     onDrop: handleDrop,
     onClick: handleClick,
@@ -2571,10 +2730,10 @@ const File = /*#__PURE__*/React.forwardRef(({
       flexDirection: 'column',
       justifyContent: 'center',
       color: color ?? configStyles.FILE.color,
-      fontSize: size ?? configStyles.FILE.font.size,
-      fontStyle: style ?? configStyles.FILE.font.style,
-      fontFamily: family ?? configStyles.FILE.font.family,
-      fontWeight: weight ?? configStyles.FILE.font.weight
+      fontSize: fontSize ?? configStyles.FILE.font.size,
+      fontStyle: fontStyle ?? configStyles.FILE.font.style,
+      fontFamily: fontFamily ?? configStyles.FILE.font.family,
+      fontWeight: fontWeight ?? configStyles.FILE.font.weight
     }
   }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
@@ -2591,7 +2750,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     style: {
       margin: '0px'
     }
-  }, putFileHere ?? configStyles.FILE.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, putFileHere ?? configStyles.FILE.putFileHere, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: uploadColor ?? configStyles.FILE.uploadColor
     }
@@ -2626,11 +2785,11 @@ const File = /*#__PURE__*/React.forwardRef(({
   }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
-    font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
-    size: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
-    style: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
-    weight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
-    label: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
+    fontFamily: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
+    fontSize: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
+    fontStyle: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
+    fontWeight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
+    text: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
     color: uploadBtnColor ?? configStyles.FILE.uploadBtn.color,
     height: uploadBtnHeight ?? configStyles.FILE.uploadBtn.height,
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
@@ -2639,11 +2798,11 @@ const File = /*#__PURE__*/React.forwardRef(({
   }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
-    font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
-    size: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
-    style: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
-    weight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
-    label: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
+    fontFamily: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
+    fontSize: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
+    fontStyle: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
+    fontWeight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
+    text: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
     color: uploadBtnColor ?? configStyles.FILE.uploadBtn.color,
     height: uploadBtnHeight ?? configStyles.FILE.uploadBtn.height,
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
@@ -2688,8 +2847,8 @@ const File = /*#__PURE__*/React.forwardRef(({
       boxSizing: 'border-box',
       alignItems: 'flex-start',
       justifyContent: 'flex-end',
-      borderRadius: radius ?? configStyles.FILE.radius,
-      display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
+      borderRadius: borderRadius ?? configStyles.FILE.radius,
+      display: !multiple && !disabled && image && isHover ? 'flex' : 'none',
       backgroundColor: hiddenBackgroundColor ?? configStyles.FILE.colors.backgroundHidden
     },
     onClick: handleStopPropagation
@@ -2698,16 +2857,16 @@ const File = /*#__PURE__*/React.forwardRef(({
       cursor: 'pointer'
     },
     onClick: handleRemoveFile
-  }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), !multiple && error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginTop: '6px',
-      color: errorColor ?? configStyles.FILE.error.color,
-      fontSize: errorSize ?? configStyles.FILE.error.font.size,
-      fontStyle: errorStyle ?? configStyles.FILE.error.font.style,
-      fontWeight: errorWeight ?? configStyles.FILE.error.font.weight,
-      fontFamily: errorFamily ?? configStyles.FILE.error.font.family,
-      alignItems: 'center',
       columnGap: '5px',
+      alignItems: 'center',
+      color: errorColor ?? configStyles.FILE.error.color,
+      fontSize: errorFontSize ?? configStyles.FILE.error.font.size,
+      marginTop: errorMarginTop ?? configStyles.FILE.error.marginTop,
+      fontStyle: errorFontStyle ?? configStyles.FILE.error.font.style,
+      fontWeight: errorFontWeight ?? configStyles.FILE.error.font.weight,
+      fontFamily: errorFontFamily ?? configStyles.FILE.error.font.family,
       display: errorIconShow && (errorIcon || configStyles.FILE.error?.icon) ? 'inline-flex' : 'inline-block'
     }
   }, errorIconShow ? errorIcon ? errorIcon : configStyles.FILE.error?.icon ? configStyles.FILE.error?.icon : '' : '', error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
@@ -2730,7 +2889,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       iconDelItem: iconDeleteItem ?? configStyles.FILE.icon.deleteItem,
       timeForRemoveError: timeForRemoveError,
       removeFile: removeFile ? removeFile : _ => _,
-      radius: radius ?? configStyles.FILE.radius,
+      radius: borderRadius ?? configStyles.FILE.radius,
       fileFormat: item?.file?.type.split('/')[1]?.toLowerCase(),
       progressColor: progressColor ?? configStyles.FILE.progress.color,
       listItemHeight: listItemHeight ?? configStyles.FILE.listItem.height,
@@ -2754,39 +2913,39 @@ const File = /*#__PURE__*/React.forwardRef(({
   }));
 });
 File.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,
   disabled: PropTypes__default["default"].bool,
-  radius: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
   borderWidth: PropTypes__default["default"].string,
   borderStyle: PropTypes__default["default"].string,
   borderColor: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   upload: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].number,
-  style: PropTypes__default["default"].string,
-  family: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].number,
+  fontStyle: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
   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,
-  errorStyle: PropTypes__default["default"].string,
-  errorWeight: PropTypes__default["default"].string,
-  errorFamily: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
-  labelStyle: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].string,
-  labelFamily: PropTypes__default["default"].string,
+  errorFontSize: PropTypes__default["default"].string,
+  errorFontStyle: PropTypes__default["default"].string,
+  errorFontWeight: PropTypes__default["default"].string,
+  errorFontFamily: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   lableShowMore: PropTypes__default["default"].bool,
   labelShowLessText: PropTypes__default["default"].string,
   labelShowMoreText: PropTypes__default["default"].string,
   showMoreTextColor: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
   useLabelTooltip: PropTypes__default["default"].bool,
   labelTooltipColor: PropTypes__default["default"].string,
   labelTooltipPadding: PropTypes__default["default"].string,
@@ -2798,6 +2957,7 @@ File.propTypes = {
   labelTooltipBackgroundColor: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   formatError: PropTypes__default["default"].string,
+  formatValidateError: PropTypes__default["default"].string,
   putFileHere: PropTypes__default["default"].string,
   uploadColor: PropTypes__default["default"].string,
   defaultData: PropTypes__default["default"].object,
@@ -2805,6 +2965,7 @@ File.propTypes = {
   maxSizeError: PropTypes__default["default"].string,
   errorIcon: PropTypes__default["default"].element,
   errorIconShow: PropTypes__default["default"].bool,
+  errorMarginTop: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
   fileSizeText: PropTypes__default["default"].string,
   noChoosenFile: PropTypes__default["default"].string,
@@ -3218,6 +3379,7 @@ const TD = ({
   orderFontSize,
   tBodyFontSize,
   openListColor,
+  tBodyFontStyle,
   orderFontStyle,
   tBodyTextAlign,
   orderFontFamily,
@@ -3311,6 +3473,7 @@ const TD = ({
       padding: tBodyPadding,
       fontSize: tBodyFontSize,
       borderRight: borderRight,
+      fontStyle: tBodyFontStyle,
       textAlign: tBodyTextAlign,
       fontFamily: tBodyFontFamily,
       fontWeight: tBodyFontWeight,
@@ -3604,7 +3767,7 @@ const Table = ({
   tableColumnMaxWidth,
   tableColumnMinWidth,
   tHeadColor,
-  tHeadFamily,
+  tHeadFontFamily,
   tHeadPadding,
   tHeadFontSize,
   tHeadFontStyle,
@@ -3615,6 +3778,7 @@ const Table = ({
   tBodyColor,
   tBodyPadding,
   tBodyFontSize,
+  tBodyFontStyle,
   tBodyTextAlign,
   tBodyRowBorder,
   tBodyBoxShadow,
@@ -4401,7 +4565,7 @@ const Table = ({
       handleCheckedHeader: handleCheckedHeader,
       handleHeaderItemClick: handleHeaderItemClick,
       handleCheckArrowActionHeader: handleCheckArrowActionHeader,
-      tHeadFamily: tHeadFamily ?? configStyles.TABLE.head.font.family,
+      tHeadFamily: tHeadFontFamily ?? configStyles.TABLE.head.font.family,
       tHeadPadding: tHeadPadding ?? configStyles.TABLE.head.padding,
       tHeadFontSize: tHeadFontSize ?? configStyles.TABLE.head.font.size,
       tHeadFontStyle: tHeadFontStyle ?? configStyles.TABLE.head.font.style,
@@ -4463,6 +4627,7 @@ const Table = ({
         rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
         tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
         tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+        tBodyFontStyle: tBodyFontStyle ?? configStyles.TABLE.body.font.style,
         tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
         tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
         tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
@@ -4539,7 +4704,7 @@ Table.propTypes = {
   tableColumnMaxWidth: PropTypes__default["default"].string,
   tableColumnMinWidth: PropTypes__default["default"].string,
   tHeadColor: PropTypes__default["default"].string,
-  tHeadFamily: PropTypes__default["default"].string,
+  tHeadFontFamily: PropTypes__default["default"].string,
   tHeadPadding: PropTypes__default["default"].string,
   tHeadFontSize: PropTypes__default["default"].string,
   tHeadFontStyle: PropTypes__default["default"].string,
@@ -4550,6 +4715,7 @@ Table.propTypes = {
   tBodyColor: PropTypes__default["default"].string,
   tBodyPadding: PropTypes__default["default"].string,
   tBodyFontSize: PropTypes__default["default"].string,
+  tBodyFontStyle: PropTypes__default["default"].string,
   tBodyBoxShadow: PropTypes__default["default"].string,
   tBodyTextAlign: PropTypes__default["default"].string,
   tBodyFontWeight: PropTypes__default["default"].string,
@@ -4685,15 +4851,16 @@ const Modal = ({
   data,
   width,
   loader,
-  radius,
   height,
   padding,
   setShow,
+  underScroll,
   zoomIcon,
   prevIcon,
   nextIcon,
   closeIcon,
   closeIconFix,
+  borderRadius,
   showCloseIcon,
   closeIconClass,
   closeSlideIcon,
@@ -4704,15 +4871,12 @@ const Modal = ({
   minWidth,
   minHeight,
   className,
-  mMaxWidth,
+  maxWidth,
   alignItems,
-  mMaxHeight,
+  maxHeight,
   headerText,
   imageWidth,
-  headerSize,
   headerIcon,
-  headerStyle,
-  headerFamily,
   imageHeight,
   headerColor,
   borderStyle,
@@ -4721,13 +4885,16 @@ const Modal = ({
   imageMargin,
   showZoomIcon,
   outsideClose,
-  headerWeight,
   headerHeight,
   justifyContent,
+  headerFontSize,
   headerTextAlign,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
+  headerFontStyle,
+  headerFontFamily,
+  headerFontWeight,
   headerIconMaxWidth,
   headerIconMaxHeight,
   layerBackgroundColor,
@@ -4835,7 +5002,17 @@ const Modal = ({
       newConfigStyles = {
         ...data
       };
-      if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+      if (underScroll === undefined) {
+        if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'underScroll') && newConfigStyles.MODAL.underScroll === false) {
+          style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+          document.head.appendChild(style);
+          document.body.classList.add('tui-no-srcoll-class');
+          document.documentElement.classList.add('tui-no-srcoll-class');
+          document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+            passive: false
+          });
+        }
+      } else if (underScroll === false) {
         style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
         document.head.appendChild(style);
         document.body.classList.add('tui-no-srcoll-class');
@@ -4856,7 +5033,17 @@ const Modal = ({
     return () => {
       setSelect(0);
       setInnerData([]);
-      if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+      if (underScroll === undefined) {
+        if (newConfigStyles.MODAL && hasOwnerProperty(newConfigStyles.MODAL, 'underScroll') && newConfigStyles.MODAL.underScroll === false) {
+          const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+          if (noScrllable) {
+            style.remove();
+            document.body.classList.remove('tui-no-srcoll-class');
+            document.documentElement.classList.remove('tui-no-srcoll-class');
+            document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
+          }
+        }
+      } else if (underScroll === false) {
         const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
         if (noScrllable) {
           style.remove();
@@ -4880,7 +5067,7 @@ const Modal = ({
       left: '0px',
       zIndex: 999,
       width: '100%',
-      height: '100vh',
+      height: '100dvh',
       position: 'fixed',
       backgroundColor: layerBackgroundColor ?? configStyles.MODAL.colors.backgroundLayer
     }
@@ -4889,7 +5076,7 @@ const Modal = ({
       position: 'relative',
       display: 'flex',
       width: '100%',
-      height: '100vh',
+      height: '100dvh',
       alignItems: alignItems ?? configStyles.MODAL.alignItems,
       justifyContent: justifyContent ?? configStyles.MODAL.justifyContent
     }
@@ -4903,10 +5090,10 @@ const Modal = ({
       height: height ?? configStyles.MODAL.height,
       display: type === 'content' ? 'grid' : 'block',
       overflow: type === 'content' ? 'auto' : 'hidden',
-      borderRadius: radius ?? configStyles.MODAL.radius,
-      maxWidth: mMaxWidth ?? configStyles.MODAL.maxWidth,
-      maxHeight: mMaxHeight ?? configStyles.MODAL.maxHeight,
+      maxWidth: maxWidth ?? configStyles.MODAL.maxWidth,
+      maxHeight: maxHeight ?? configStyles.MODAL.maxHeight,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
+      borderRadius: borderRadius ?? configStyles.MODAL.border.radius,
       minWidth: type === 'content' ? minWidth ?? configStyles.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? configStyles.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? configStyles.MODAL.minHeight : ''
@@ -4943,11 +5130,11 @@ const Modal = ({
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
       color: headerColor ?? configStyles.MODAL.header.color,
-      fontSize: headerSize ?? configStyles.MODAL.header.font.size,
+      fontSize: headerFontSize ?? configStyles.MODAL.header.font.size,
       textAlign: headerTextAlign ?? configStyles.MODAL.header.align,
-      fontStyle: headerStyle ?? configStyles.MODAL.header.font.style,
-      fontFamily: headerFamily ?? configStyles.MODAL.header.font.family,
-      fontWeight: headerWeight ?? configStyles.MODAL.header.font.weight
+      fontStyle: headerFontStyle ?? configStyles.MODAL.header.font.style,
+      fontFamily: headerFontFamily ?? configStyles.MODAL.header.font.family,
+      fontWeight: headerFontWeight ?? configStyles.MODAL.header.font.weight
     }
   }, headerText), showCloseIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => setShow(false),
@@ -5039,7 +5226,7 @@ const Modal = ({
             display: 'block',
             objectFit: 'contain',
             margin: imageMargin ?? configStyles.MODAL.image.margin,
-            borderRadius: radius ?? configStyles.MODAL.radius,
+            borderRadius: borderRadius ?? configStyles.MODAL.border.radius,
             width: imageWidth ?? configStyles.MODAL.image.width,
             height: imageHeight ?? configStyles.MODAL.image.height
           },
@@ -5102,12 +5289,12 @@ Modal.propTypes = {
   type: PropTypes__default["default"].string,
   setShow: PropTypes__default["default"].func,
   width: PropTypes__default["default"].string,
-  radius: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   selected: PropTypes__default["default"].number,
   minWidth: PropTypes__default["default"].string,
-  mMaxWidth: PropTypes__default["default"].string,
+  maxWidth: PropTypes__default["default"].string,
+  underScroll: PropTypes__default["default"].bool,
   minHeight: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   zoomIcon: PropTypes__default["default"].element,
@@ -5116,21 +5303,22 @@ Modal.propTypes = {
   closeIcon: PropTypes__default["default"].element,
   closeIconFix: PropTypes__default["default"].bool,
   showCloseIcon: PropTypes__default["default"].bool,
+  borderRadius: PropTypes__default["default"].string,
   closeIconClass: PropTypes__default["default"].string,
   closeSlideIcon: PropTypes__default["default"].element,
   closeIconTopPosition: PropTypes__default["default"].string,
   closeIconRightPosition: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
-  headerSize: PropTypes__default["default"].string,
-  headerStyle: PropTypes__default["default"].string,
+  headerFontSize: PropTypes__default["default"].string,
+  headerFontStyle: PropTypes__default["default"].string,
   headerIcon: PropTypes__default["default"].element,
-  headerFamily: PropTypes__default["default"].string,
+  headerFontFamily: PropTypes__default["default"].string,
   headerTextAlign: PropTypes__default["default"].string,
   headerIconMaxWidth: PropTypes__default["default"].string,
   headerIconMaxHeight: PropTypes__default["default"].string,
   headerIconMarginRight: PropTypes__default["default"].string,
   alignItems: PropTypes__default["default"].string,
-  mMaxHeight: PropTypes__default["default"].string,
+  maxHeight: PropTypes__default["default"].string,
   imageWidth: PropTypes__default["default"].string,
   outsideClose: PropTypes__default["default"].bool,
   showZoomIcon: PropTypes__default["default"].bool,
@@ -5139,7 +5327,7 @@ Modal.propTypes = {
   borderWidth: PropTypes__default["default"].string,
   headerColor: PropTypes__default["default"].string,
   imageHeight: PropTypes__default["default"].string,
-  headerWeight: PropTypes__default["default"].string,
+  headerFontWeight: PropTypes__default["default"].string,
   headerHeight: PropTypes__default["default"].string,
   justifyContent: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
@@ -5477,7 +5665,7 @@ const NumberInput = ({
   });
 };
 
-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-module_show-more-text__PQC9x{align-self:self-end;cursor:pointer}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 css_248z$a = ".input-module_input-wrap__NunrE{width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}.input-module_show-more-text__PQC9x{align-self:self-end;cursor:pointer}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","show-more-text":"input-module_show-more-text__PQC9x","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);
 
@@ -5496,60 +5684,61 @@ const P = styled__default["default"].span`
 `;
 const Input = ({
   ssn,
-  size,
   name,
-  style,
+  fontSize,
+  fontStyle,
+  fontWeight,
+  fontFamily,
+  borderRadius,
   color,
   value,
   width,
   regexp,
   height,
-  radius,
   change,
-  weight,
-  family,
   padding,
   telClass,
   leftIcon,
   required,
   disabled,
-  errorDots,
-  errorIcon,
   iconWidth,
   rightIcon,
   className,
   boxSizing,
   boxShadow,
-  errorLeft,
-  errorSize,
   maxLength,
   floatToFix,
   minNumSize,
   maxNumSize,
-  errorColor,
   withoutDot,
-  errorStyle,
   iconPadding,
-  errorAction,
   placeholder,
-  errorZindex,
-  errorWeight,
-  errorFamily,
   phoneDisplay,
-  errorMessage,
   autoComplete,
   showLabelIcon,
+  boxShadowHover,
+  errorLeft,
+  errorDots,
+  errorIcon,
+  errorColor,
+  errorAction,
+  errorZindex,
+  errorMessage,
   errorIconSide,
   showErrorIcon,
+  errorFontSize,
   errorMarginTop,
   errorBoxShadow,
-  boxShadowHover,
   errorClassName,
-  phoneAlignItems,
+  errorFontStyle,
   errorLineHeight,
+  errorIconMargin,
+  errorFontWeight,
+  errorFontFamily,
+  errorInContent,
+  phoneAlignItems,
   numberMaxLength,
   backgroundColor,
-  errorIconMargin,
   placeholderColor,
   withZero = false,
   regexpErrorMessage,
@@ -5561,19 +5750,19 @@ const Input = ({
   backgroundDisableColor,
   telBorderRightColorHover,
   label,
-  labelSize,
   labelIcon,
-  labelStyle,
   labelColor,
   labelAction,
-  labelWeight,
   labelDisplay,
+  lableShowMore,
   labelIconSide,
+  labelFontSize,
+  labelFontStyle,
   labelIconMargin,
+  labelFontWeight,
   labelFontFamily,
   labelLineHeight,
   labelMarginBottom,
-  lableShowMore,
   labelShowLessText,
   labelShowMoreText,
   showMoreTextColor,
@@ -5610,10 +5799,10 @@ const Input = ({
     cursor: disabled ? 'not-allowed' : 'auto',
     height: height ?? configStyles.INPUT.height,
     padding: padding ?? configStyles.INPUT.padding,
-    fontSize: size ?? configStyles.INPUT.font.size,
-    fontStyle: style ?? configStyles.INPUT.font.style,
-    fontWeight: weight ?? configStyles.INPUT.font.weight,
-    fontFamily: family ?? configStyles.INPUT.font.family,
+    fontSize: fontSize ?? configStyles.INPUT.font.size,
+    fontStyle: fontStyle ?? configStyles.INPUT.font.style,
+    fontWeight: fontWeight ?? configStyles.INPUT.font.weight,
+    fontFamily: fontFamily ?? configStyles.INPUT.font.family,
     boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
     color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
@@ -5793,7 +5982,10 @@ const Input = ({
   }, []);
   return configStyles.INPUT && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentRef,
-    className: classProps
+    className: classProps,
+    style: {
+      position: (errorInContent ? errorInContent : configStyles.INPUT.error.inContent) ? 'static' : 'relative'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("style", null, `.tui-color-placeholder::placeholder {
                             color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
                         }`), label && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5818,13 +6010,13 @@ const Input = ({
     ref: labelRef,
     style: {
       color: labelColor ?? configStyles.INPUT.label.color,
-      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
-      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
       display: labelDisplay ?? configStyles.INPUT.label.display,
-      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.INPUT.label.font.style,
       lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
-      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
+      fontWeight: labelFontWeight ?? configStyles.INPUT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
       whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'nowrap' : 'normal',
       overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'hidden' : 'visible',
       textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'ellipsis' : '',
@@ -5835,9 +6027,9 @@ const Input = ({
   }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.INPUT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$9['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
-      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
-      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.INPUT.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.INPUT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
       color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor
     },
@@ -5855,9 +6047,9 @@ const Input = ({
   }) : '', handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.INPUT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$9['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
-      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
-      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.INPUT.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.INPUT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
       color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
@@ -5867,7 +6059,7 @@ const Input = ({
     className: `${styles$9['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
-      borderRadius: radius ?? configStyles.INPUT.radius,
+      borderRadius: borderRadius ?? configStyles.INPUT.radius,
       boxShadow: innerErrorMessage ? errorBoxShadow ? errorBoxShadow : configStyles.INPUT.error.box.shadow : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.box.shadowHover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow
     },
     onMouseEnter: handleMouseEnter,
@@ -5883,8 +6075,8 @@ const Input = ({
       width: iconWidth ?? configStyles.INPUT.iconWidth,
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       padding: iconPadding ?? configStyles.INPUT.iconPadding,
-      borderTopLeftRadius: radius ?? configStyles.INPUT.radius,
-      borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
+      borderTopLeftRadius: borderRadius ?? configStyles.INPUT.radius,
+      borderBottomLeftRadius: borderRadius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
@@ -5895,7 +6087,7 @@ const Input = ({
     disabled: disabled,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
-    radius: radius ?? configStyles.INPUT.radius,
+    radius: borderRadius ?? configStyles.INPUT.radius,
     telClass: telClass ?? configStyles.INPUT.tel.className,
     phoneDisplay: phoneDisplay ?? configStyles.INPUT.tel.display,
     phoneAlignItems: phoneAlignItems ?? configStyles.INPUT.tel.alignItems,
@@ -5920,7 +6112,7 @@ const Input = ({
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
-    radius: radius ?? configStyles.INPUT.radius,
+    radius: borderRadius ?? configStyles.INPUT.radius,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
   }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
@@ -5931,7 +6123,7 @@ const Input = ({
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
-    radius: radius ?? configStyles.INPUT.radius,
+    radius: borderRadius ?? configStyles.INPUT.radius,
     maxLength: maxLength ?? configStyles.INPUT.maxLength,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
@@ -5942,7 +6134,7 @@ const Input = ({
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
-    radius: radius ?? configStyles.INPUT.radius,
+    radius: borderRadius ?? configStyles.INPUT.radius,
     maxLength: maxLength ?? configStyles.INPUT.maxLength,
     checkLeftIcon: leftIcon && leftIcon.length > 0 ? true : false,
     checkRightIcon: rightIcon && rightIcon.length > 0 ? true : false
@@ -5957,8 +6149,8 @@ const Input = ({
       width: iconWidth ?? configStyles.INPUT.iconWidth,
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       padding: iconPadding ?? configStyles.INPUT.iconPadding,
-      borderTopRightRadius: radius ?? configStyles.INPUT.radius,
-      borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
+      borderTopRightRadius: borderRadius ?? configStyles.INPUT.radius,
+      borderBottomRightRadius: borderRadius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P
@@ -5968,16 +6160,17 @@ const Input = ({
       margin: '0px',
       display: 'flex',
       alignItems: 'center',
-      position: 'absolute',
+      position: (errorInContent ? errorInContent : configStyles.INPUT.error.inContent) ? 'static' : 'absolute',
       width: width ?? configStyles.INPUT.width,
       left: errorLeft ?? configStyles.INPUT.error.left,
       color: errorColor ?? configStyles.INPUT.error.color,
       zIndex: errorZindex ?? configStyles.INPUT.error.zIndex,
-      fontSize: errorSize ?? configStyles.INPUT.error.font.size,
-      fontStyle: errorStyle ?? configStyles.INPUT.error.font.style,
-      fontFamily: errorFamily ?? configStyles.INPUT.error.font.family,
-      fontWeight: errorWeight ?? configStyles.INPUT.error.font.weight,
+      fontSize: errorFontSize ?? configStyles.INPUT.error.font.size,
+      fontStyle: errorFontStyle ?? configStyles.INPUT.error.font.style,
+      fontFamily: errorFontFamily ?? configStyles.INPUT.error.font.family,
+      fontWeight: errorFontWeight ?? configStyles.INPUT.error.font.weight,
       lineHeight: errorLineHeight ?? configStyles.INPUT.error.lineHeight,
+      marginTop: (errorInContent ? errorInContent : configStyles.INPUT.error.inContent) ? errorMarginTop ?? configStyles.INPUT.error.marginTop : '0px',
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.INPUT.error.marginTop})`,
       transform: 'scale3d(1,1,1)'
     },
@@ -6014,55 +6207,54 @@ const Input = ({
 };
 Input.propTypes = {
   ssn: PropTypes__default["default"].bool,
-  size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
-  style: PropTypes__default["default"].string,
+  fontSize: PropTypes__default["default"].string,
+  fontStyle: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  fontFamily: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   withZero: PropTypes__default["default"].bool,
-  weight: PropTypes__default["default"].string,
-  family: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   height: PropTypes__default["default"].string,
-  radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   cardNumber: PropTypes__default["default"].bool,
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
-  iconPadding: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
   floatToFix: PropTypes__default["default"].number,
   minNumSize: PropTypes__default["default"].number,
   maxNumSize: PropTypes__default["default"].number,
-  borderRight: PropTypes__default["default"].string,
+  iconPadding: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
   placeholderColor: PropTypes__default["default"].string,
   phoneDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
   errorDots: PropTypes__default["default"].bool,
   errorLeft: PropTypes__default["default"].string,
-  errorSize: PropTypes__default["default"].string,
   errorIcon: PropTypes__default["default"].string,
   errorAction: PropTypes__default["default"].func,
   errorColor: PropTypes__default["default"].string,
-  errorStyle: PropTypes__default["default"].string,
   showErrorIcon: PropTypes__default["default"].bool,
-  errorWeight: PropTypes__default["default"].string,
-  errorFamily: PropTypes__default["default"].string,
+  errorFontSize: PropTypes__default["default"].string,
+  errorFontStyle: PropTypes__default["default"].string,
+  errorFontWeight: PropTypes__default["default"].string,
+  errorFontFamily: PropTypes__default["default"].string,
   errorZindex: PropTypes__default["default"].string,
-  errorIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
   errorMessage: PropTypes__default["default"].string,
-  errorPosition: PropTypes__default["default"].string,
+  errorInContent: PropTypes__default["default"].bool,
   errorMarginTop: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
+  errorBoxShadow: PropTypes__default["default"].string,
   errorIconMargin: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
+  errorIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
   boxSizing: PropTypes__default["default"].string,
   boxShadow: PropTypes__default["default"].string,
-  errorBoxShadow: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   numberMaxLength: PropTypes__default["default"].number,
@@ -6085,14 +6277,14 @@ Input.propTypes = {
   label: PropTypes__default["default"].string,
   labelAction: PropTypes__default["default"].func,
   labelIcon: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
-  labelStyle: PropTypes__default["default"].string,
   showLabelIcon: PropTypes__default["default"].bool,
-  labelWeight: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   labelIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
   labelLineHeight: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
   labelIconMargin: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
@@ -6335,23 +6527,20 @@ const Select = ({
   keyNames,
   selected,
   className,
-  marginTop,
   arrowIcon,
   closeIcon,
-  errorZindex,
-  errorMessage,
   arrowNoRotate,
   showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
   labelColor,
-  labelWeight,
   labelDisplay,
   labelFontSize,
   labelFontStyle,
   labelLineHeight,
   labelFontFamily,
+  labelFontWeight,
   labelMarginBottom,
   labelTextTransform,
   lableShowMore,
@@ -6370,12 +6559,16 @@ const Select = ({
   labelTooltipBackgroundColor,
   cursor,
   errorIcon,
-  errorSize,
   errorColor,
-  errorStyle,
-  errorFamily,
-  errorWeight,
+  errorZindex,
+  errorMessage,
   showErrorIcon,
+  errorFontSize,
+  errorInContent,
+  errorMarginTop,
+  errorFontStyle,
+  errorFontFamily,
+  errorFontWeight,
   selectedColor,
   selectedRadius,
   selectedPadding,
@@ -6390,6 +6583,7 @@ const Select = ({
   selectedTransition,
   selectedBackgroundColor,
   selectedDisableBackgroundColor,
+  selectedDisablePlaceholderColor,
   optionsBoxShadow,
   optionsBorderRadius,
   optionsBackgroundColor,
@@ -6641,8 +6835,8 @@ const Select = ({
     ref: parentRef,
     className: classProps,
     style: {
-      position: 'relative',
-      width: '100%'
+      width: '100%',
+      position: (errorInContent ? errorInContent : configStyles.SELECT.error.inContent) ? 'static' : 'relative'
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -6656,7 +6850,7 @@ const Select = ({
     ref: labelRef,
     style: {
       color: labelColor ?? configStyles.SELECT.label.color,
-      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      fontWeight: labelFontWeight ?? configStyles.SELECT.label.font.weight,
       display: labelDisplay ?? configStyles.SELECT.label.display,
       fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
       fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
@@ -6676,7 +6870,7 @@ const Select = ({
     style: {
       fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
       fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
-      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      fontWeight: labelFontWeight ?? configStyles.SELECT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
       color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor
     },
@@ -6686,7 +6880,7 @@ const Select = ({
     style: {
       fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
       fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
-      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      fontWeight: labelFontWeight ?? configStyles.SELECT.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
       color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
@@ -6723,7 +6917,7 @@ const Select = ({
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: insidePagination ? 'visible' : 'hidden',
       textOverflow: insidePagination ? 'initial' : 'ellipsis',
-      color: placeholderColor && !newSelected.length ? placeholderColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
+      color: disabled ? selectedDisablePlaceholderColor ? selectedDisablePlaceholderColor : configStyles.SELECT.selected.colors.placeholderDisable : placeholderColor && !newSelected.length ? placeholderColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -6790,16 +6984,17 @@ const Select = ({
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      position: 'absolute',
+      position: (errorInContent ? errorInContent : configStyles.SELECT.error.inContent) ? 'static' : 'absolute',
       columnGap: '4px',
       color: errorColor ?? configStyles.SELECT.error.color,
-      fontSize: errorSize ?? configStyles.SELECT.error.font.size,
-      fontStyle: errorStyle ?? configStyles.SELECT.error.font.style,
-      display: errorIcon && showErrorIcon ? 'inline-flex' : 'inline',
-      fontFamily: errorFamily ?? configStyles.SELECT.error.font.family,
-      fontWeight: errorWeight ?? configStyles.SELECT.error.font.weight,
+      fontSize: errorFontSize ?? configStyles.SELECT.error.font.size,
+      fontStyle: errorFontStyle ?? configStyles.SELECT.error.font.style,
+      display: errorIcon && showErrorIcon ? 'inline-flex' : 'inline-block',
+      fontFamily: errorFontFamily ?? configStyles.SELECT.error.font.family,
+      fontWeight: errorFontWeight ?? configStyles.SELECT.error.font.weight,
       zIndex: errorZindex ?? configStyles.SELECT.error.zIndex,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.SELECT.error.marginTop})`
+      marginTop: (errorInContent ? errorInContent : configStyles.SELECT.error.inContent) ? errorMarginTop ?? configStyles.SELECT.error.marginTop : '0px',
+      top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.SELECT.error.marginTop})`
     }
   }, showErrorIcon ? errorIcon ? errorIcon : configStyles.SELECT.error?.icon ? configStyles.SELECT.error?.icon : '' : '', errorMessage) : '');
 };
@@ -6813,24 +7008,21 @@ Select.propTypes = {
   disabled: PropTypes__default["default"].bool,
   selected: PropTypes__default["default"].array,
   keyNames: PropTypes__default["default"].object,
-  marginTop: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   arrowIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
   arrowNoRotate: PropTypes__default["default"].bool,
   showCloseIcon: PropTypes__default["default"].bool,
-  errorZindex: PropTypes__default["default"].number,
-  errorMessage: PropTypes__default["default"].string,
   defaultOption: PropTypes__default["default"].string,
   multipleCheckbox: PropTypes__default["default"].bool,
   label: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   labelFontSize: PropTypes__default["default"].string,
   labelFontStyle: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
   labelTextTransform: PropTypes__default["default"].string,
   lableShowMore: PropTypes__default["default"].bool,
@@ -6838,10 +7030,17 @@ Select.propTypes = {
   labelShowMoreText: PropTypes__default["default"].string,
   showMoreTextColor: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
-  errorSize: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   errorIcon: PropTypes__default["default"].element,
   showErrorIcon: PropTypes__default["default"].bool,
+  errorZindex: PropTypes__default["default"].number,
+  errorInContent: PropTypes__default["default"].bool,
+  errorMessage: PropTypes__default["default"].string,
+  errorFontSize: PropTypes__default["default"].string,
+  errorMarginTop: PropTypes__default["default"].string,
+  errorFontStyle: PropTypes__default["default"].string,
+  errorFontFamily: PropTypes__default["default"].string,
+  errorFontWeight: PropTypes__default["default"].string,
   selectedColor: PropTypes__default["default"].string,
   selectedRadius: PropTypes__default["default"].string,
   selectedMinHeight: PropTypes__default["default"].string,
@@ -6856,6 +7055,7 @@ Select.propTypes = {
   selectedTransition: PropTypes__default["default"].string,
   selectedBackgroundColor: PropTypes__default["default"].string,
   selectedDisableBackgroundColor: PropTypes__default["default"].string,
+  selectedDisablePlaceholderColor: PropTypes__default["default"].string,
   optionsBoxShadow: PropTypes__default["default"].string,
   optionsBorderRadius: PropTypes__default["default"].string,
   optionsBackgroundColor: PropTypes__default["default"].string,
@@ -7186,9 +7386,9 @@ Toast.propTypes = {
   type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired
 };
 
-let toastify = document.getElementById('toastify');
 let path = window.location.href;
 const removeToast = ref => {
+  let toastify = document.getElementById('toastify');
   if (ref.current) {
     const node = ref.current;
     const removeElem = node.parentNode;
@@ -7262,6 +7462,7 @@ const createToast = ({
   styleProps,
   description
 }) => {
+  let toastify = document.getElementById('toastify');
   let innerConfigStyles = {};
   let toastParentBlock;
   if (!toastify) {
@@ -7361,6 +7562,7 @@ const Toaster = () => {
   const [configStyles, setConfigStyles] = React.useState({});
   window.addEventListener('popstate', () => {
     if (path !== window.location.href) {
+      let toastify = document.getElementById('toastify');
       if (!toastify) {
         toastify = document.createElement('div');
         toastify.setAttribute('id', 'toastify');
@@ -7433,7 +7635,6 @@ const Tooltip = ({
   width,
   color,
   height,
-  radius,
   fontSize,
   hoverOpen,
   className,
@@ -7441,9 +7642,10 @@ const Tooltip = ({
   fontFamily,
   fontWeight,
   tooltipIcon,
+  borderRadius,
   tooltipWidth,
-  tooltipRadius,
   backgroundColor,
+  tooltipBorderRadius,
   tooltipBackgroundColor,
   direction = 'top'
 }) => {
@@ -7516,7 +7718,7 @@ const Tooltip = ({
     style: {
       width: width ?? configStyles.TOOLTIP.parent.width,
       height: height ?? configStyles.TOOLTIP.parent.height,
-      borderRadius: radius ?? configStyles.TOOLTIP.parent.radius,
+      borderRadius: borderRadius ?? configStyles.TOOLTIP.parent.radius,
       backgroundColor: backgroundColor ?? configStyles.TOOLTIP.parent.colors.background
     },
     onClick: e => e.stopPropagation()
@@ -7525,7 +7727,7 @@ const Tooltip = ({
     className: `${styles$6['tooltip']}`,
     style: {
       width: tooltipWidth ?? configStyles.TOOLTIP.width,
-      borderRadius: tooltipRadius ?? configStyles.TOOLTIP.radius,
+      borderRadius: tooltipBorderRadius ?? configStyles.TOOLTIP.radius,
       backgroundColor: tooltipBackgroundColor ?? configStyles.TOOLTIP.colors.background,
       top: direction === 'top' || direction === 'top-left' || direction === 'top-right' ? `calc(-${checkTooltipHeight + 7}px)` : direction === 'bottom' || direction === 'bottom-left' || direction === 'bottom-right' ? 'calc(100% + 7px)' : direction === 'left' || direction === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : direction === 'left-top' || direction === 'right-top' ? '0px' : direction === 'left-bottom' || direction === 'right-bottom' ? `calc(-${checkTooltipHeight - tooltipIconParentHeight}px)` : '0px',
       left: direction === 'top' || direction === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : direction === 'left' || direction === 'left-top' || direction === 'left-bottom' ? `-${checkTooltipWidth + 7}px` : direction === 'top-left' || direction === 'bottom-left' ? `0px` : direction === 'top-right' || direction === 'bottom-right' ? `-${checkTooltipWidth - tooltipIconParentWidth}px` : direction === 'right' || direction === 'right-top' || direction === 'right-bottom' ? 'calc(100% + 7px)' : '0px'
@@ -7562,16 +7764,16 @@ Tooltip.propTypes = {
   width: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
-  radius: PropTypes__default["default"].string,
   hoverOpen: PropTypes__default["default"].bool,
   fontSize: PropTypes__default["default"].string,
   fontStyle: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   fontFamily: PropTypes__default["default"].string,
   fontWeight: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
   tooltipWidth: PropTypes__default["default"].string,
   tooltipIcon: PropTypes__default["default"].element,
-  tooltipRadius: PropTypes__default["default"].string,
+  tooltipBorderRadius: PropTypes__default["default"].string,
   text: PropTypes__default["default"].string.isRequired,
   backgroundColor: PropTypes__default["default"].string,
   tooltipBackgroundColor: PropTypes__default["default"].string,
@@ -7937,16 +8139,11 @@ const PositionSide = {
   BOTTOM: 'bottom'
 };
 const Textarea = ({
-  size,
   name,
-  style,
-  family,
-  weight,
   width,
   value,
   height,
   resize,
-  radius,
   padding,
   disabled,
   required,
@@ -7958,25 +8155,31 @@ const Textarea = ({
   maxHeight,
   boxSizing,
   maxLength,
-  errorSize,
-  errorStyle,
-  errorWeight,
-  errorFamily,
-  marginTop,
+  fontSize,
+  fontStyle,
+  fontFamily,
+  fontWeight,
+  placeholder,
+  borderRadius,
+  errorMarginTop,
   className,
   errorColor,
-  placeholder,
   errorMessage,
+  errorFontSize,
+  errorFontStyle,
+  errorFontWeight,
+  errorFontFamily,
+  borderWidth,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
   showCharacterCount,
   label,
-  labelSize,
   labelColor,
-  labelStyle,
-  labelWeight,
   labelDisplay,
+  labelFontSize,
+  labelFontStyle,
+  labelFontWeight,
   labelFontFamily,
   labelMarginBottom,
   lableShowMore,
@@ -8175,9 +8378,10 @@ const Textarea = ({
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
       color: labelColor ?? configStyles.TEXTAREA.label.color,
-      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
+      fontSize: labelFontSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.TEXTAREA.label.font.style,
       fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
-      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontWeight: labelFontWeight ?? configStyles.TEXTAREA.label.font.weight,
       marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -8202,9 +8406,9 @@ const Textarea = ({
   }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.TEXTAREA.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
-      fontStyle: labelStyle ?? configStyles.TEXTAREA.label.font.style,
-      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.TEXTAREA.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.TEXTAREA.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
       color: showMoreTextColor ?? configStyles.TEXTAREA.label.showMoreTextColor
     },
@@ -8212,9 +8416,9 @@ const Textarea = ({
   }, ' ', " ", labelShowLessText ?? configStyles.TEXTAREA.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.TEXTAREA.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
-      fontStyle: labelStyle ?? configStyles.TEXTAREA.label.font.style,
-      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.TEXTAREA.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.TEXTAREA.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
       color: showMoreTextColor ?? configStyles.TEXTAREA.label.showMoreTextColor
     },
@@ -8231,20 +8435,20 @@ const Textarea = ({
       outline: 'none',
       overflow: 'auto',
       cursor: disabled ? 'not-allowed' : 'auto',
-      fontSize: size ?? configStyles.TEXTAREA.font.size,
-      fontStyle: style ?? configStyles.TEXTAREA.font.style,
-      fontFamily: family ?? configStyles.TEXTAREA.font.family,
-      fontWeight: weight ?? configStyles.TEXTAREA.font.weight,
       height: height ?? configStyles.TEXTAREA.height,
       padding: padding ?? configStyles.TEXTAREA.padding,
-      borderRadius: radius ?? configStyles.TEXTAREA.radius,
       minWidth: minWidth ?? configStyles.TEXTAREA.minWidth,
       maxWidth: maxWidth ?? configStyles.TEXTAREA.maxWidth,
+      fontSize: fontSize ?? configStyles.TEXTAREA.font.size,
       minHeight: minHeight ?? configStyles.TEXTAREA.minHeight,
       maxHeight: maxHeight ?? configStyles.TEXTAREA.maxHeight,
       boxSizing: boxSizing ?? configStyles.TEXTAREA.box.sizing,
+      fontStyle: fontStyle ?? configStyles.TEXTAREA.font.style,
+      borderRadius: borderRadius ?? configStyles.TEXTAREA.radius,
+      fontFamily: fontFamily ?? configStyles.TEXTAREA.font.family,
+      fontWeight: fontWeight ?? configStyles.TEXTAREA.font.weight,
       backgroundColor: backgroundColor ?? configStyles.TEXTAREA.colors.background,
-      boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.TEXTAREA.error.box.shadow : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : configStyles.TEXTAREA.box.colors.focus : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : configStyles.TEXTAREA.box.colors.hover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow,
+      boxShadow: error ? errorColor ? `0 0 0 ${borderWidth ? borderWidth : configStyles.TEXTAREA.box.width} ${errorColor}` : configStyles.TEXTAREA.error.box.shadow : isFocus ? borderFocusColor ? `0 0 0 ${borderWidth ? borderWidth : configStyles.TEXTAREA.box.width} ${borderFocusColor}` : configStyles.TEXTAREA.box.colors.focus : isHover ? borderHoverColor ? `0 0 0 ${borderWidth ? borderWidth : configStyles.TEXTAREA.box.width} ${borderHoverColor}` : configStyles.TEXTAREA.box.colors.hover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow,
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     name: name,
@@ -8263,8 +8467,9 @@ const Textarea = ({
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: labelColor ?? configStyles.TEXTAREA.label.color,
-      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
-      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.TEXTAREA.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.TEXTAREA.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family
     }
   }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -8277,11 +8482,11 @@ const Textarea = ({
     style: {
       display: 'inline-block',
       color: errorColor ?? configStyles.TEXTAREA.error.color,
-      fontSize: errorSize ?? configStyles.TEXTAREA.error.font.size,
-      fontStyle: errorStyle ?? configStyles.TEXTAREA.error.font.style,
-      fontWeight: errorWeight ?? configStyles.TEXTAREA.error.font.weight,
-      fontFamily: errorFamily ?? configStyles.TEXTAREA.error.font.family,
-      marginTop: marginTop ?? configStyles.TEXTAREA.error.marginTop
+      fontSize: errorFontSize ?? configStyles.TEXTAREA.error.font.size,
+      fontStyle: errorFontStyle ?? configStyles.TEXTAREA.error.font.style,
+      fontWeight: errorFontWeight ?? configStyles.TEXTAREA.error.font.weight,
+      fontFamily: errorFontFamily ?? configStyles.TEXTAREA.error.font.family,
+      marginTop: errorMarginTop ?? configStyles.TEXTAREA.error.marginTop
     }
   }, error)) : '');
 };
@@ -8302,15 +8507,15 @@ Textarea.propTypes = {
   minWidth: PropTypes__default["default"].string,
   maxWidth: PropTypes__default["default"].string,
   boxShadow: PropTypes__default["default"].string,
-  marginTop: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   minHeight: PropTypes__default["default"].string,
   maxHeight: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
-  errorSize: PropTypes__default["default"].string,
-  errorStyle: PropTypes__default["default"].string,
-  errorWeight: PropTypes__default["default"].string,
-  errorFamily: PropTypes__default["default"].string,
+  errorFontSize: PropTypes__default["default"].string,
+  errorMarginTop: PropTypes__default["default"].string,
+  errorFontStyle: PropTypes__default["default"].string,
+  errorFontWeight: PropTypes__default["default"].string,
+  errorFontFamily: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
@@ -8321,10 +8526,10 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
-  labelStyle: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
@@ -8673,7 +8878,7 @@ const Swipe = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
-      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
+      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100dvh'
     }
   }, (title || showCloseIcon) && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -8747,7 +8952,7 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   swipeBlock.style.zIndex = swipeCount;
   swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
   swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
-  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100vh';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100dvh';
   swipeBlock.style.borderTopLeftRadius = position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderTopRightRadius = position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderBottomLeftRadius = position === 'right' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
@@ -8789,10 +8994,10 @@ const createSwipe = (id, title, child, props, swipable) => {
       swipable.style.left = '0px';
       swipable.style.zIndex = 99999;
       swipable.style.maxWidth = '100%';
-      swipable.style.maxHeight = '100vh';
+      swipable.style.maxHeight = '100dvh';
       swipable.style.visibility = 'hidden';
       swipable.style.width = widthParent ? '100%' : '0px';
-      swipable.style.height = widthParent ? '100vh' : '0px';
+      swipable.style.height = widthParent ? '100dvh' : '0px';
       swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
       swipable.classList.add(styles$2['visible']);
       if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
@@ -8848,7 +9053,17 @@ const swipe = {
         return;
       }
       if (swipeCount === 0) {
-        if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+        if (!hasOwnerProperty(props, 'underScroll')) {
+          if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'underScroll') && newConfigStyles.SWIPEMODAL.underScroll === false) {
+            style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+            document.head.appendChild(style);
+            document.body.classList.add('tui-no-srcoll-class');
+            document.documentElement.classList.add('tui-no-srcoll-class');
+            document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+              passive: false
+            });
+          }
+        } else if (hasOwnerProperty(props, 'underScroll') && props.underScroll === false) {
           style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
           document.head.appendChild(style);
           document.body.classList.add('tui-no-srcoll-class');
@@ -8869,11 +9084,10 @@ const swipe = {
     });
   },
   close: id => {
-    let newConfigStyles = {};
     configStylesPromise.then(data => {
-      newConfigStyles = {
+      ({
         ...data
-      };
+      });
     }, error => {
       console.error(error);
     });
@@ -8895,14 +9109,12 @@ const swipe = {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
             document.body.removeChild(swipable);
-            if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
-              const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
-              if (noScrllable) {
-                style.remove();
-                document.body.classList.remove('tui-no-srcoll-class');
-                document.documentElement.classList.remove('tui-no-srcoll-class');
-                document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
-              }
+            const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+            if (noScrllable) {
+              style.remove();
+              document.body.classList.remove('tui-no-srcoll-class');
+              document.documentElement.classList.remove('tui-no-srcoll-class');
+              document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
             }
           }
         }, 200);
@@ -8912,14 +9124,12 @@ const swipe = {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
           document.body.removeChild(swipable);
-          if (newConfigStyles.SWIPEMODAL && hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
-            const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
-            if (noScrllable) {
-              style.remove();
-              document.body.classList.remove('tui-no-srcoll-class');
-              document.documentElement.classList.remove('tui-no-srcoll-class');
-              document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
-            }
+          const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+          if (noScrllable) {
+            style.remove();
+            document.body.classList.remove('tui-no-srcoll-class');
+            document.documentElement.classList.remove('tui-no-srcoll-class');
+            document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
           }
         }
       }
@@ -8952,21 +9162,21 @@ const TypographyType = {
   span: 'span'
 };
 const Typography = ({
-  size,
   color,
-  weight,
-  radius,
   border,
   cursor,
   onClick,
   children,
+  fontSize,
   textAlign,
   fontStyle,
   className,
   textShadow,
   lineHeight,
   colorHover,
+  fontWeight,
   fontFamily,
+  borderRadius,
   textTransform,
   textDecoration,
   backgroundColor,
@@ -8987,9 +9197,9 @@ const Typography = ({
     style: {
       border: border ?? configStyles.TYPOGRAPHY.border,
       cursor: cursor ?? configStyles.TYPOGRAPHY.cursor,
-      borderRadius: radius ?? configStyles.TYPOGRAPHY.radius,
-      fontSize: size ?? configStyles.TYPOGRAPHY.font['size' + variant],
-      fontWeight: weight ?? configStyles.TYPOGRAPHY.font['weight' + variant],
+      borderRadius: borderRadius ?? configStyles.TYPOGRAPHY.radius,
+      fontSize: fontSize ?? configStyles.TYPOGRAPHY.font['size' + variant],
+      fontWeight: fontWeight ?? configStyles.TYPOGRAPHY.font['weight' + variant],
       textShadow: textShadow ?? configStyles.TYPOGRAPHY.text['shadow' + variant],
       textAlign: textAlign ?? configStyles.TYPOGRAPHY.text['align' + variant],
       fontStyle: fontStyle ?? configStyles.TYPOGRAPHY.font['style' + variant],
@@ -9031,10 +9241,8 @@ const Typography = ({
 Typography.propTypes = {
   color: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func,
-  weight: PropTypes__default["default"].string,
   border: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
-  radius: PropTypes__default["default"].string,
   textAlign: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   fontStyle: PropTypes__default["default"].string,
@@ -9042,11 +9250,13 @@ Typography.propTypes = {
   textShadow: PropTypes__default["default"].string,
   fontFamily: PropTypes__default["default"].string,
   colorHover: PropTypes__default["default"].string,
+  fontWeight: PropTypes__default["default"].string,
+  borderRadius: PropTypes__default["default"].string,
   textTransform: PropTypes__default["default"].string,
   textDecoration: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
-  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  fontSize: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
 const Dots = '...';
@@ -9510,12 +9720,13 @@ const Autocomplete = ({
   required,
   selected,
   className,
-  errorSize,
-  errorStyle,
-  errorWeight,
-  errorFamily,
-  marginTop,
+  errorFontSize,
+  errorFontStyle,
+  errorFontWeight,
+  errorFontFamily,
+  errorMarginTop,
   errorColor,
+  errorInContent,
   placeHolder,
   errorMessage,
   autoComplete,
@@ -9573,11 +9784,11 @@ const Autocomplete = ({
   contentBottomRowHoverBackgroundColor,
   backgroundDisableColor,
   label,
-  labelSize,
-  labelStyle,
   labelColor,
-  labelWeight,
   labelDisplay,
+  labelFontSize,
+  labelFontStyle,
+  labelFontWeight,
   labelLineHeight,
   labelFontFamily,
   labelMarginBottom,
@@ -9717,14 +9928,15 @@ const Autocomplete = ({
     }, item[keyNames.name]);
   }))) : innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      position: 'absolute',
+      position: (errorInContent ? errorInContent : configStyles.AUTOCOMPLETE.error.inContent) ? 'static' : 'absolute',
       zIndex: '1',
       color: errorColor ?? configStyles.AUTOCOMPLETE.error.color,
-      fontSize: errorSize ?? configStyles.AUTOCOMPLETE.error.font.size,
-      fontStyle: errorStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
-      fontWeight: errorWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
-      fontFamily: errorFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
+      fontSize: errorFontSize ?? configStyles.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorFontStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorFontWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFontFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
+      marginTop: (errorInContent ? errorInContent : configStyles.AUTOCOMPLETE.error.inContent) ? errorMarginTop ?? configStyles.AUTOCOMPLETE.error.marginTop : '0px',
+      top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
       padding: innerErrorPadding ?? configStyles.AUTOCOMPLETE.innerError.padding,
       height: contentBottomRowHeight ?? configStyles.AUTOCOMPLETE.contentBottom.row.height,
       lineHeight: contentBottomRowLineHeight ?? configStyles.AUTOCOMPLETE.contentBottom.row.lineHeight,
@@ -9893,9 +10105,9 @@ const Autocomplete = ({
     style: {
       color: labelColor ?? configStyles.AUTOCOMPLETE.label.color,
       display: labelDisplay ?? configStyles.AUTOCOMPLETE.label.display,
-      fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.AUTOCOMPLETE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
       lineHeight: labelLineHeight ?? configStyles.AUTOCOMPLETE.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom,
@@ -9910,9 +10122,9 @@ const Autocomplete = ({
   }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.AUTOCOMPLETE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.AUTOCOMPLETE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
       color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor
     },
@@ -9920,9 +10132,9 @@ const Autocomplete = ({
   }, ' ', " ", labelShowLessText ?? configStyles.AUTOCOMPLETE.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.AUTOCOMPLETE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles['show-more-text'],
     style: {
-      fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
-      fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
-      fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
+      fontSize: labelFontSize ?? configStyles.AUTOCOMPLETE.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
+      fontWeight: labelFontWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
       color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor,
       marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom
@@ -9971,13 +10183,14 @@ const Autocomplete = ({
   }, props)), innerError ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       left: '0px',
-      position: 'absolute',
+      position: (errorInContent ? errorInContent : configStyles.AUTOCOMPLETE.error.inContent) ? 'static' : 'absolute',
       color: errorColor ?? configStyles.AUTOCOMPLETE.error.color,
-      fontSize: errorSize ?? configStyles.AUTOCOMPLETE.error.font.size,
-      fontStyle: errorStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
-      fontWeight: errorWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
-      fontFamily: errorFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
+      fontSize: errorFontSize ?? configStyles.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorFontStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorFontWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFontFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
+      marginTop: (errorInContent ? errorInContent : configStyles.AUTOCOMPLETE.error.inContent) ? errorMarginTop ?? configStyles.AUTOCOMPLETE.error.marginTop : '0px',
+      top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
       maxWidth: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
   }, innerError) : '', optionList));
@@ -9989,18 +10202,19 @@ Autocomplete.propTypes = {
   keyNames: PropTypes__default["default"].object,
   selected: PropTypes__default["default"].object,
   className: PropTypes__default["default"].string,
-  errorSize: PropTypes__default["default"].string,
-  errorStyle: PropTypes__default["default"].string,
-  errorWeight: PropTypes__default["default"].string,
-  errorFamily: PropTypes__default["default"].string,
-  marginTop: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
-  labelStyle: PropTypes__default["default"].string,
+  errorFontSize: PropTypes__default["default"].string,
+  errorFontStyle: PropTypes__default["default"].string,
+  errorFontWeight: PropTypes__default["default"].string,
+  errorFontFamily: PropTypes__default["default"].string,
+  errorMarginTop: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   searchCount: PropTypes__default["default"].number,
   placeHolder: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].number,
+  labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
+  labelFontWeight: PropTypes__default["default"].number,
+  errorInContent: PropTypes__default["default"].bool,
   errorMessage: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,