@xaypay/tui 0.0.123 → 0.1.1

package/dist/index.js

@@ -266,13 +266,26 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   check,
   radius,
   status,
+  iconPdf,
+  iconPng,
+  iconJpg,
+  iconJpeg,
+  iconHeic,
+  iconWrong,
+  iconDelItem,
   removeFile,
   fileFormat,
   progressColor,
   listItemHeight,
   listItemPadding,
   progressFontSize,
+  progressFontStyle,
+  progressFontWeight,
+  progressFontFamily,
   listItemErrorSize,
+  listItemErrorStyle,
+  listItemErrorWeight,
+  listItemErrorFamily,
   timeForRemoveError,
   listItemErrorColor,
   progressTrackColor,
@@ -349,7 +362,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     style: {
       width: '32px'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgWrong, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, iconWrong ? iconWrong : /*#__PURE__*/React__default["default"].createElement(SvgWrong, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -367,7 +380,10 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
       color: progressColor,
       boxSizing: 'border-box',
       flexDirection: 'column',
-      fontSize: listItemErrorSize
+      fontSize: listItemErrorSize,
+      fontStyle: listItemErrorStyle,
+      fontWeight: listItemErrorWeight,
+      fontFamily: listItemErrorFamily
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
@@ -392,7 +408,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -411,6 +427,9 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
       boxSizing: 'border-box',
       alignItems: 'flex-start',
       fontSize: progressFontSize,
+      fontStyle: progressFontStyle,
+      fontWeight: progressFontWeight,
+      fontFamily: progressFontFamily,
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -444,30 +463,28 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
       cursor: 'pointer'
     },
     onClick: () => handleRemoveItem(uuid)
-  }, /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
+  }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
 });
 
 const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
+let projectConfig = {};
+let packageConfig = {};
+try {
+  packageConfig = require('../tui.config.js');
+} catch (e) {
   try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+    packageConfig = require('../../tui.config.js');
+  } catch (err) {
+    packageConfig = {};
   }
-  return _.merge(packageConfig, projectConfig);
-};
+}
+try {
+  projectConfig = require('../../../../tui.config.js');
+} catch (error) {
+  projectConfig = {};
+  // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+}
+const merge = _.merge(packageConfig.default, projectConfig.default);
 const hasOwnerProperty = (object, property) => {
   return Object.prototype.hasOwnProperty.call(object, property);
 };
@@ -475,6 +492,7 @@ const hasOwnerProperty = (object, property) => {
 const Button = ({
   icon,
   size,
+  style,
   type,
   font,
   color,
@@ -505,8 +523,7 @@ const Button = ({
   ...props
 }) => {
   const [isHover, setIsHover] = React.useState(false);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.BUTTON.className);
+  const classProps = classnames__default["default"](className ?? merge.BUTTON.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -524,37 +541,40 @@ const Button = ({
       outline: 'none',
       alignItems: 'center',
       justifyContent: 'center',
-      fontSize: size ? size : configStyles.BUTTON.size,
-      fontFamily: font ? font : configStyles.BUTTON.font,
-      height: height ? height : configStyles.BUTTON.height,
-      fontWeight: weight ? weight : configStyles.BUTTON.weight,
-      padding: padding ? padding : configStyles.BUTTON.padding,
-      borderRadius: radius ? radius : configStyles.BUTTON.radius,
-      boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
-      transition: transition ? transition : configStyles.BUTTON.transition,
-      border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
-      width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
-      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
-      textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor : color ? color : configStyles.BUTTON.color
+      fontSize: size ?? merge.BUTTON.font.size,
+      fontStyle: style ?? merge.BUTTON.font.style,
+      fontFamily: font ?? merge.BUTTON.font.family,
+      height: height ?? merge.BUTTON.height,
+      fontWeight: weight ?? merge.BUTTON.font.weight,
+      padding: padding ?? merge.BUTTON.padding,
+      borderRadius: radius ?? merge.BUTTON.radius,
+      boxSizing: boxSizing ?? merge.BUTTON.box.sizing,
+      transition: transition ?? merge.BUTTON.transition,
+      border: outline ? 'none' : border ?? merge.BUTTON.border,
+      width: contentWidth ? 'auto' : width ?? merge.BUTTON.width,
+      cursor: disabled ? 'not-allowed' : cursor ?? merge.BUTTON.cursor,
+      textTransform: textTransform ?? merge.BUTTON.text.transform,
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : merge.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : merge.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : merge.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : merge.BUTTON.colors.background,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : merge.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : merge.BUTTON.colors.background}` : 'none',
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : merge.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : merge.BUTTON.color : backgroundColor ? backgroundColor : merge.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : merge.BUTTON.text.colors.hover : color ? color : merge.BUTTON.color
     },
-    type: type ? type : configStyles.BUTTON.type,
-    disabled: disabled ? disabled : configStyles.BUTTON.disabled,
+    type: type ?? merge.BUTTON.type,
+    disabled: disabled ?? merge.BUTTON.disabled,
     onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
   }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
+      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
     }
   }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
   size: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].string,
   font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
   hoverIcon: PropTypes__default["default"].element,
@@ -563,7 +583,6 @@ Button.propTypes = {
   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,
@@ -701,11 +720,15 @@ const File = ({
   name,
   color,
   label,
+  style,
   weight,
+  family,
   height,
   radius,
   change,
-  border,
+  borderWidth,
+  borderStyle,
+  borderColor,
   upload,
   preview,
   maxSize,
@@ -715,14 +738,19 @@ const File = ({
   required,
   className,
   errorSize,
+  errorStyle,
+  errorWeight,
+  errorFamily,
   labelSize,
+  labelStyle,
+  labelWeight,
+  labelFamily,
   removeFile,
   labelColor,
   errorColor,
   filesArray,
   componentId,
   putFileHere,
-  borderColor,
   uploadColor,
   defaultData,
   formatError,
@@ -731,12 +759,27 @@ const File = ({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  iconPdf,
+  iconPng,
+  iconJpg,
+  iconJpeg,
+  iconHeic,
+  iconWrong,
+  iconUpload,
+  iconRequired,
+  iconDeleteItem,
+  iconRemoveFile,
+  iconDeleteComponent,
   uploadBtnFont,
   uploadBtnSize,
+  uploadBtnStyle,
+  uploadBtnWeight,
   uploadBtnLabel,
   uploadBtnColor,
   uploadBtnHeight,
+  uploadBtnHoverColor,
   uploadBtnBackgroundColor,
+  uploadBtnBackgroundColorHover,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -744,9 +787,15 @@ const File = ({
   removeComponent,
   listItemPadding,
   progressFontSize,
+  progressFontStyle,
+  progressFontWeight,
+  progressFontFamily,
   borderHoverColor,
   maxCHoosenLength,
   listItemErrorSize,
+  listItemErrorStyle,
+  listItemErrorWeight,
+  listItemErrorFamily,
   progressTrackColor,
   fileAreaImageWidth,
   listItemErrorColor,
@@ -764,9 +813,8 @@ const File = ({
 }) => {
   const ref = React.useRef(null);
   const inpRef = React.useRef(null);
-  const configStyles = compereConfigs();
   const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
-  const classProps = classnames__default["default"](className ? className : configStyles.FILE.className);
+  const classProps = classnames__default["default"](className ?? merge.FILE.className);
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [singleFile, setSingleFile] = React.useState(null);
@@ -788,7 +836,7 @@ const File = ({
   const handleUploadFiles = file => {
     if (maxCHoosenLength && choosenFileCount > 0) {
       if (file.length > choosenFileCount || file.length + memoizedItems.length > choosenFileCount) {
-        setError(maxCHoosenLengthError ? maxCHoosenLengthError : `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`);
+        setError(maxCHoosenLengthError ?? `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`);
         const clearFunc = () => {
           clearTimeout(time);
         };
@@ -812,14 +860,14 @@ const File = ({
                 change({
                   file: file[ix],
                   uuid: v4(),
-                  check: formatError ? formatError : configStyles.FILE.formatError
+                  check: formatError ?? merge.FILE.error.format
                 });
               }
             } else {
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
+                check: maxSizeError ?? merge.FILE.error.maxSize
               });
             }
           }
@@ -841,14 +889,14 @@ const File = ({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: formatError ? formatError : configStyles.FILE.formatError
+                check: formatError ?? merge.FILE.error.format
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
+              check: maxSizeError ?? merge.FILE.error.maxSize
             });
           }
         }
@@ -862,7 +910,7 @@ const File = ({
       setImage(null);
       handleUploadFiles(file);
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
+        setError(noChoosenFile ?? merge.FILE.error.noChoosen);
       }
     } else {
       if (file[0]) {
@@ -880,16 +928,16 @@ const File = ({
             }
           } else {
             setImage(null);
-            setError(formatError ? formatError : configStyles.FILE.formatError);
+            setError(formatError ?? merge.FILE.error.format);
           }
         } else {
           setImage(null);
-          setError(maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError);
+          setError(maxSizeError ?? merge.FILE.error.maxSize);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
+        setError(noChoosenFile ?? merge.FILE.error.noChoosen);
       }
     }
   };
@@ -975,7 +1023,7 @@ const File = ({
     ref: ref,
     style: {
       width: '100%',
-      maxWidth: maxWidth ? maxWidth : configStyles.FILE.maxWidth
+      maxWidth: maxWidth ?? merge.FILE.maxWidth
     },
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -987,15 +1035,18 @@ const File = ({
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.FILE.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.FILE.labelSize
+      color: labelColor ?? merge.FILE.label.color,
+      fontSize: labelSize ?? merge.FILE.label.font.size,
+      fontStyle: labelStyle ?? merge.FILE.label.font.style,
+      fontWeight: labelWeight ?? merge.FILE.label.font.weight,
+      fontFamily: labelFamily ?? merge.FILE.label.font.family
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : merge.FILE.icon.required ? merge.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleRemoveComponent
-  }, /*#__PURE__*/React__default["default"].createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, iconDeleteComponent ? iconDeleteComponent : merge.FILE.icon.deleteComponent ? merge.FILE.icon.deleteComponent : /*#__PURE__*/React__default["default"].createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -1004,11 +1055,12 @@ const File = ({
       boxSizing: 'border-box',
       justifyContent: 'center',
       cursor: !disabled ? 'pointer' : 'not-allowed',
-      height: height ? height : configStyles.FILE.height,
-      border: border ? border : configStyles.FILE.border,
-      borderRadius: radius ? radius : configStyles.FILE.radius,
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.FILE.backgroundColor,
-      borderColor: error ? errorColor ? errorColor : configStyles.FILE.errorColor : disabled ? borderColor ? borderColor : configStyles.FILE.borderColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.FILE.borderHoverColor : borderColor ? borderColor : configStyles.FILE.borderColor
+      height: height ?? merge.FILE.height,
+      borderWidth: borderWidth ?? merge.FILE.border.width,
+      borderStyle: borderStyle ?? merge.FILE.border.style,
+      borderRadius: radius ?? merge.FILE.radius,
+      backgroundColor: backgroundColor ?? merge.FILE.colors.background,
+      borderColor: error ? errorColor ? errorColor : merge.FILE.error.color : disabled ? borderColor ? borderColor : merge.FILE.border.color : isHover ? borderHoverColor ? borderHoverColor : merge.FILE.border.colors.hover : borderColor ? borderColor : merge.FILE.border.color
     },
     onDrop: handleDrop,
     onClick: handleClick,
@@ -1032,38 +1084,40 @@ const File = ({
       alignItems: 'center',
       flexDirection: 'column',
       justifyContent: 'center',
-      color: color ? color : configStyles.FILE.color,
-      fontSize: size ? size : configStyles.FILE.size,
-      fontWeight: weight ? weight : configStyles.FILE.weight
+      color: color ?? merge.FILE.color,
+      fontSize: size ?? merge.FILE.font.size,
+      fontStyle: style ?? merge.FILE.font.style,
+      fontFamily: family ?? merge.FILE.font.family,
+      fontWeight: weight ?? merge.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : merge.FILE.icon.pdf ? merge.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : merge.FILE.icon.heic ? merge.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
       maxWidth: '100%',
       maxHeight: '95%',
       objectFit: 'contain',
-      width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.FILE.fileAreaImageWidth,
-      height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.FILE.fileAreaImageHeight
+      width: fileAreaImageWidth ?? merge.FILE.fileAreaImageWidth,
+      height: fileAreaImageHeight ?? merge.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : preview ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, iconUpload ? iconUpload : merge.FILE.icon.upload ? merge.FILE.icon.upload : /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px'
     }
-  }, putFileHere ? putFileHere : configStyles.FILE.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, putFileHere ?? merge.FILE.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : merge.FILE.or, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      color: uploadColor ? uploadColor : configStyles.FILE.uploadColor
+      color: uploadColor ?? merge.FILE.uploadColor
     }
-  }, upload ? upload : configStyles.FILE.upload))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, upload ?? merge.FILE.upload))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.FILE.extentionsRowMarginTop
+      marginTop: extentionsRowMarginTop ?? merge.FILE.extentionsRowMarginTop
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileSizeText ?? merge.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
       padding: '5px',
@@ -1075,14 +1129,16 @@ const File = ({
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
-    font: uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont,
-    size: uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize,
-    label: uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel,
-    color: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
-    height: uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight,
-    hoverColor: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
-    backgroundColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor,
-    backgroundHoverColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor
+    font: uploadBtnFont ?? merge.FILE.uploadBtn.font.family,
+    size: uploadBtnSize ?? merge.FILE.uploadBtn.font.size,
+    style: uploadBtnStyle ?? merge.FILE.uploadBtn.font.style,
+    weight: uploadBtnWeight ?? merge.FILE.uploadBtn.font.weight,
+    label: uploadBtnLabel ?? merge.FILE.uploadBtn.label,
+    color: uploadBtnColor ?? merge.FILE.uploadBtn.color,
+    height: uploadBtnHeight ?? merge.FILE.uploadBtn.height,
+    hoverColor: uploadBtnHoverColor ?? merge.FILE.uploadBtn.colors.hover,
+    backgroundColor: uploadBtnBackgroundColor ?? merge.FILE.uploadBtn.colors.background,
+    backgroundHoverColor: uploadBtnBackgroundColorHover ?? merge.FILE.uploadBtn.colors.backgroundHover
   }), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
@@ -1091,7 +1147,7 @@ const File = ({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? merge.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -1104,9 +1160,9 @@ const File = ({
       boxSizing: 'border-box',
       alignItems: 'flex-start',
       justifyContent: 'flex-end',
-      borderRadius: radius ? radius : configStyles.FILE.radius,
+      borderRadius: radius ?? merge.FILE.radius,
       display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
-      backgroundColor: hiddenBackgroundColor ? hiddenBackgroundColor : configStyles.FILE.hiddenBackgroundColor
+      backgroundColor: hiddenBackgroundColor ?? merge.FILE.colors.backgroundHidden
     },
     onClick: handleStopPropagation
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1114,12 +1170,15 @@ const File = ({
       cursor: 'pointer'
     },
     onClick: handleRemoveFile
-  }, /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, iconRemoveFile ? iconRemoveFile : merge.FILE.icon.removeFile ? merge.FILE.icon.removeFile : /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginTop: '6px',
       display: 'inline-block',
-      color: errorColor ? errorColor : configStyles.FILE.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.FILE.errorSize
+      color: errorColor ?? merge.FILE.error.color,
+      fontSize: errorSize ?? merge.FILE.error.font.size,
+      fontStyle: errorStyle ?? merge.FILE.error.font.style,
+      fontWeight: errorWeight ?? merge.FILE.error.font.weight,
+      fontFamily: errorFamily ?? merge.FILE.error.font.family
     }
   }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
     return /*#__PURE__*/React__default["default"].createElement(FileItem, {
@@ -1129,22 +1188,35 @@ const File = ({
       status: item.status,
       size: item.file.size,
       name: item.file.name,
+      iconPdf: iconPdf ?? merge.FILE.icon.pdf,
+      iconPng: iconPng ?? merge.FILE.icon.png,
+      iconJpg: iconJpg ?? merge.FILE.icon.jpg,
+      iconJpeg: iconJpeg ?? merge.FILE.icon.jpeg,
+      iconHeic: iconHeic ?? merge.FILE.icon.heic,
+      iconWrong: iconWrong ?? merge.FILE.icon.wrong,
+      iconDelItem: iconDeleteItem ?? merge.FILE.icon.deleteItem,
       timeForRemoveError: timeForRemoveError,
       removeFile: removeFile ? removeFile : _ => _,
-      radius: radius ? radius : configStyles.FILE.radius,
+      radius: radius ?? merge.FILE.radius,
       fileFormat: item.file.type.split('/')[1]?.toLowerCase(),
-      progressColor: progressColor ? progressColor : configStyles.FILE.progressColor,
-      listItemHeight: listItemHeight ? listItemHeight : configStyles.FILE.listItemHeight,
-      listItemPadding: listItemPadding ? listItemPadding : configStyles.FILE.listItemPadding,
-      progressFontSize: progressFontSize ? progressFontSize : configStyles.FILE.progressFontSize,
-      listItemErrorSize: listItemErrorSize ? listItemErrorSize : configStyles.FILE.listItemErrorSize,
-      listItemErrorColor: listItemErrorColor ? listItemErrorColor : configStyles.FILE.listItemErrorColor,
-      progressTrackColor: progressTrackColor ? progressTrackColor : configStyles.FILE.progressTrackColor,
-      progressFailedColor: progressFailedColor ? progressFailedColor : configStyles.FILE.progressFailedColor,
-      progressSuccessColor: progressSuccessColor ? progressSuccessColor : configStyles.FILE.progressSuccessColor,
-      progressLoadingColor: progressLoadingColor ? progressLoadingColor : configStyles.FILE.progressLoadingColor,
-      listItemBackgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.FILE.listItemBackgroundColor,
-      listItemBackgroundErrorColor: listItemBackgroundErrorColor ? listItemBackgroundErrorColor : configStyles.FILE.listItemBackgroundErrorColor
+      progressColor: progressColor ?? merge.FILE.progress.color,
+      listItemHeight: listItemHeight ?? merge.FILE.listItem.height,
+      listItemPadding: listItemPadding ?? merge.FILE.listItem.padding,
+      progressFontSize: progressFontSize ?? merge.FILE.progress.font.size,
+      progressFontStyle: progressFontStyle ?? merge.FILE.progress.font.style,
+      progressFontWeight: progressFontWeight ?? merge.FILE.progress.font.weight,
+      progressFontFamily: progressFontFamily ?? merge.FILE.progress.font.family,
+      listItemErrorSize: listItemErrorSize ?? merge.FILE.listItem.error.font.size,
+      listItemErrorStyle: listItemErrorStyle ?? merge.FILE.listItem.error.style,
+      listItemErrorWeight: listItemErrorWeight ?? merge.FILE.listItem.error.weight,
+      listItemErrorFamily: listItemErrorFamily ?? merge.FILE.listItem.error.family,
+      listItemErrorColor: listItemErrorColor ?? merge.FILE.listItem.error.color,
+      progressTrackColor: progressTrackColor ?? merge.FILE.progress.colors.track,
+      progressFailedColor: progressFailedColor ?? merge.FILE.progress.colors.failed,
+      progressSuccessColor: progressSuccessColor ?? merge.FILE.progress.colors.success,
+      progressLoadingColor: progressLoadingColor ?? merge.FILE.progress.colors.loading,
+      listItemBackgroundColor: listItemBackgroundColor ?? merge.FILE.listItem.colors.background,
+      listItemBackgroundErrorColor: listItemBackgroundErrorColor ?? merge.FILE.listItem.colors.backgroundError
     });
   }));
 };
@@ -1157,21 +1229,30 @@ File.propTypes = {
   height: PropTypes__default["default"].string,
   disabled: PropTypes__default["default"].bool,
   radius: PropTypes__default["default"].string,
-  border: 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,
   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,
   labelColor: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
   formatError: PropTypes__default["default"].string,
   putFileHere: PropTypes__default["default"].string,
-  borderColor: PropTypes__default["default"].string,
   uploadColor: PropTypes__default["default"].string,
   defaultData: PropTypes__default["default"].object,
   componentId: PropTypes__default["default"].number,
@@ -1182,20 +1263,40 @@ File.propTypes = {
   progressColor: PropTypes__default["default"].string,
   deleteComponent: PropTypes__default["default"].bool,
   removeComponent: PropTypes__default["default"].func,
+  iconPdf: PropTypes__default["default"].element,
+  iconPng: PropTypes__default["default"].element,
+  iconJpg: PropTypes__default["default"].element,
+  iconJpeg: PropTypes__default["default"].element,
+  iconHeic: PropTypes__default["default"].element,
+  iconWrong: PropTypes__default["default"].element,
+  iconUpload: PropTypes__default["default"].element,
+  iconRequired: PropTypes__default["default"].element,
+  iconDeleteItem: PropTypes__default["default"].element,
+  iconRemoveFile: PropTypes__default["default"].element,
+  iconDeleteComponent: PropTypes__default["default"].element,
   uploadBtnFont: PropTypes__default["default"].string,
   uploadBtnSize: PropTypes__default["default"].string,
+  uploadBtnStyle: PropTypes__default["default"].string,
+  uploadBtnWeight: PropTypes__default["default"].string,
   uploadBtnLabel: PropTypes__default["default"].string,
   uploadBtnColor: PropTypes__default["default"].string,
   uploadBtnHeight: PropTypes__default["default"].string,
   uploadBtnBackgroundColor: PropTypes__default["default"].string,
+  uploadBtnBackgroundColorHover: PropTypes__default["default"].string,
   listItemHeight: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func.isRequired,
   listItemPadding: PropTypes__default["default"].string,
   maxCHoosenLength: PropTypes__default["default"].number,
   progressFontSize: PropTypes__default["default"].string,
+  progressFontStyle: PropTypes__default["default"].string,
+  progressFontWeight: PropTypes__default["default"].string,
+  progressFontFamily: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   listItemErrorSize: PropTypes__default["default"].string,
+  listItemErrorStyle: PropTypes__default["default"].string,
+  listItemErrorWeight: PropTypes__default["default"].string,
+  listItemErrorFamily: PropTypes__default["default"].string,
   timeForRemoveError: PropTypes__default["default"].number,
   progressTrackColor: PropTypes__default["default"].string,
   fileAreaImageWidth: PropTypes__default["default"].string,
@@ -1278,7 +1379,6 @@ const Checkbox$1 = ({
   labelMarginLeft,
   ignoreDisabledForChecked
 }) => {
-  const configStyles = compereConfigs();
   const [innerChecked, setInnerChecked] = React.useState(false);
   const [innerDisabled, setInnerDisabled] = React.useState(false);
   const handleClick = e => {
@@ -1310,10 +1410,10 @@ const Checkbox$1 = ({
       ...styles
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
-  }, innerChecked && (ignoreDisabledForChecked ? ignoreDisabledForChecked : !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ? checkedColor : configStyles.CHECKBOX.checkedColor
+  }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
+    fillColor: checkedColor ?? merge.CHECKBOX.checkedColor
   }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ? unCheckedColor : configStyles.CHECKBOX.unCheckedColor
+    fillColor: unCheckedColor ?? merge.CHECKBOX.unCheckedColor
   }), label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginLeft: labelMarginLeft
@@ -1337,7 +1437,6 @@ const SingleCheckbox = ({
   labelMarginLeft,
   ignoreDisabledForChecked
 }) => {
-  const configStyles = compereConfigs();
   const [innerData, setInnerData] = React.useState(null);
   React.useEffect(() => {
     setInnerData(data);
@@ -1356,7 +1455,7 @@ const SingleCheckbox = ({
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
     ignoreDisabledForChecked: ignoreDisabledForChecked,
-    labelMarginLeft: labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
+    labelMarginLeft: labelMarginLeft ?? merge.CHECKBOX.labelMarginLeft
   });
 };
 SingleCheckbox.propTypes = {
@@ -1413,6 +1512,7 @@ const TH = ({
   tHeadFamily,
   tHeadPadding,
   tHeadFontSize,
+  tHeadFontStyle,
   tHeadTextAlign,
   tHeadFontWeight,
   tableColumnMinWidth,
@@ -1436,6 +1536,7 @@ const TH = ({
       padding: tHeadPadding,
       fontSize: tHeadFontSize,
       fontFamily: tHeadFamily,
+      fontStyle: tHeadFontStyle,
       fontWeight: tHeadFontWeight,
       minWidth: tableColumnMinWidth,
       maxWidth: tableColumnMaxWidth,
@@ -1476,6 +1577,7 @@ const TD = ({
   innerIndex,
   tBodyColor,
   borderRight,
+  borderRightColor,
   tBodyPadding,
   tBodyFontSize,
   openListColor,
@@ -1484,6 +1586,8 @@ const TD = ({
   tBodyFontWeight,
   handleCheckDots,
   openListFontSize,
+  openListFontStyle,
+  openListFontWeight,
   handleCheckedBody,
   openListFontFamily,
   tableColumnMinWidth,
@@ -1546,7 +1650,7 @@ const TD = ({
       minWidth: tableColumnMinWidth,
       maxWidth: tableColumnMaxWidth,
       whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
-      borderColor: hideBorder ? 'transparent' : '#eeeeee',
+      borderColor: hideBorder ? 'transparent' : borderRightColor,
       boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -1630,7 +1734,8 @@ const TD = ({
     style: {
       textAlign: tBodyTextAlign,
       margin: '0px',
-      cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
+      cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto',
+      ...item.props
     },
     onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
   }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -1696,6 +1801,8 @@ const TD = ({
         color: openListColor,
         textAlign: tBodyTextAlign,
         fontSize: openListFontSize,
+        fontStyle: openListFontStyle,
+        fontWeight: openListFontWeight,
         fontFamily: openListFontFamily
       },
       onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
@@ -1780,6 +1887,7 @@ const Table = ({
   tHeadFamily,
   tHeadPadding,
   tHeadFontSize,
+  tHeadFontStyle,
   tHeadTextAlign,
   tHeadFontWeight,
   tHeadBorderRadius,
@@ -1796,10 +1904,11 @@ const Table = ({
   className,
   openListColor,
   openListFontSize,
+  openListFontStyle,
+  openListFontWeight,
   openListFontFamily,
   hideBorder
 }) => {
-  const configStyles = compereConfigs();
   const [body, setBody] = React.useState([]);
   const [header, setHeader] = React.useState([]);
   const [disableArr, setDisableArr] = React.useState([]);
@@ -2272,15 +2381,15 @@ const Table = ({
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("table", {
     style: {
       width: '100%',
-      borderCollapse: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem) ? 'separate' : 'collapse',
-      borderSpacing: `0 ${tBodyRowMarginTop ? tBodyRowMarginTop : configStyles.TABLE.tBodyRowMarginTop}`
+      borderCollapse: tableRowItem ?? merge.TABLE.body.row.asItem ? 'separate' : 'collapse',
+      borderSpacing: `0 ${tBodyRowMarginTop ?? merge.TABLE.body.row.marginTop}`
     },
     onClick: handleTableClick,
-    className: className ? className : configStyles.TABLE.className
+    className: className ?? merge.TABLE.className
   }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
-      color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
-      backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor,
+      color: tHeadColor ?? merge.TABLE.head.color,
+      backgroundColor: tHeadBackgroundColor ?? merge.TABLE.head.colors.background,
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     }
   }, header.map((item, index) => {
@@ -2291,28 +2400,29 @@ const Table = ({
       handleCheckedHeader: handleCheckedHeader,
       handleHeaderItemClick: handleHeaderItemClick,
       handleCheckArrowActionHeader: handleCheckArrowActionHeader,
-      tHeadFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
-      tHeadPadding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
-      tHeadFontSize: tHeadFontSize ? tHeadFontSize : configStyles.TABLE.tHeadFontSize,
-      tHeadTextAlign: tHeadTextAlign ? tHeadTextAlign : configStyles.TABLE.tHeadTextAlign,
-      tHeadFontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
-      borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
-      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
-      tableColumnMinWidth: tableColumnMinWidth ? tableColumnMinWidth : configStyles.TABLE.tableColumnMinWidth,
-      tableColumnMaxWidth: tableColumnMaxWidth ? tableColumnMaxWidth : configStyles.TABLE.tableColumnMaxWidth
+      tHeadFamily: tHeadFamily ?? merge.TABLE.head.font.family,
+      tHeadPadding: tHeadPadding ?? merge.TABLE.head.padding,
+      tHeadFontSize: tHeadFontSize ?? merge.TABLE.head.font.size,
+      tHeadFontStyle: tHeadFontStyle ?? merge.TABLE.head.font.style,
+      tHeadTextAlign: tHeadTextAlign ?? merge.TABLE.textAlign,
+      tHeadFontWeight: tHeadFontWeight ?? merge.TABLE.head.font.weight,
+      borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : merge.TABLE.head.radius : '0px',
+      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : merge.TABLE.head.radius : '0px',
+      tableColumnMinWidth: tableColumnMinWidth ?? merge.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? merge.TABLE.column.maxWidth
     });
   }))), body && body.length > 0 && /*#__PURE__*/React__default["default"].createElement("tbody", {
     style: {
-      boxShadow: tBodyBoxShadow ? tBodyBoxShadow : configStyles.TABLE.tBodyBoxShadow
+      boxShadow: tBodyBoxShadow ?? merge.TABLE.body.box.shadow
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
       key: `${item}_${index}`,
       style: {
-        backgroundColor: tableRowBGColor ? tableRowBGColor : configStyles.TABLE.tableRowBGColor,
-        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder,
-        borderColor: hideBorder ? 'transparent' : '#eeeeee',
-        boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.tableRowBoxShadow : 'none'
+        backgroundColor: tableRowBGColor ?? merge.TABLE.body.row.colors.background,
+        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : merge.TABLE.body.row.border,
+        borderColor: hideBorder ? 'transparent' : merge.TABLE.body.row.borderColor,
+        boxShadow: (tableRowItem ? tableRowItem : merge.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : merge.TABLE.body.row.box.shadow : 'none'
       }
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default["default"].createElement(TD, {
@@ -2324,24 +2434,27 @@ const Table = ({
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
-        openListColor: openListColor ? openListColor : configStyles.TABLE.openListColor,
-        tableColumnMinWidth: tableColumnMinWidth ? tableColumnMinWidth : configStyles.TABLE.tableColumnMinWidth,
-        tableColumnMaxWidth: tableColumnMaxWidth ? tableColumnMaxWidth : configStyles.TABLE.tableColumnMaxWidth,
-        openListFontSize: openListFontSize ? openListFontSize : configStyles.TABLE.openListFontSize,
-        openListFontFamily: openListFontFamily ? openListFontFamily : configStyles.TABLE.openListFontFamily,
+        openListColor: openListColor ?? merge.TABLE.openList.color,
+        tableColumnMinWidth: tableColumnMinWidth ?? merge.TABLE.column.minWidth,
+        tableColumnMaxWidth: tableColumnMaxWidth ?? merge.TABLE.column.maxWidth,
+        openListFontSize: openListFontSize ?? merge.TABLE.openList.font.size,
+        openListFontStyle: openListFontStyle ?? merge.TABLE.openList.font.style,
+        openListFontWeight: openListFontWeight ?? merge.TABLE.openList.font.weight,
+        openListFontFamily: openListFontFamily ?? merge.TABLE.openList.font.family,
         handleCheckedBody: handleCheckedBody,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
-        tBodyColor: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
-        rowItem: tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem,
-        rowRadius: tableRowRadius ? tableRowRadius : configStyles.TABLE.tableRowRadius,
-        tBodyPadding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
-        tBodyFontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
-        tBodyTextAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
-        tBodyFontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
-        tBodyFontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
-        borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder,
+        tBodyColor: tBodyColor ?? merge.TABLE.body.color,
+        rowItem: tableRowItem ?? merge.TABLE.body.row.isItem,
+        rowRadius: tableRowRadius ?? merge.TABLE.body.row.radius,
+        tBodyPadding: tBodyPadding ?? merge.TABLE.body.padding,
+        tBodyFontSize: tBodyFontSize ?? merge.TABLE.body.font.size,
+        tBodyTextAlign: tBodyTextAlign ?? merge.TABLE.textAlign,
+        tBodyFontFamily: tBodyFontFamily ?? merge.TABLE.body.font.family,
+        tBodyFontWeight: tBodyFontWeight ?? merge.TABLE.body.font.weight,
+        borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : merge.TABLE.body.row.border,
+        borderRightColor: innerIndex === Object.values(item).length - 1 ? 'transparent' : merge.TABLE.body.row.borderColor,
         handleCheckArrowAction: handleCheckArrowAction,
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
@@ -2364,6 +2477,7 @@ Table.propTypes = {
   tHeadFamily: PropTypes__default["default"].string,
   tHeadPadding: PropTypes__default["default"].string,
   tHeadFontSize: PropTypes__default["default"].string,
+  tHeadFontStyle: PropTypes__default["default"].string,
   tHeadTextAlign: PropTypes__default["default"].string,
   tHeadFontWeight: PropTypes__default["default"].number,
   tHeadBorderRadius: PropTypes__default["default"].string,
@@ -2380,6 +2494,8 @@ Table.propTypes = {
   tBodyRowBorder: PropTypes__default["default"].string,
   openListColor: PropTypes__default["default"].string,
   openListFontSize: PropTypes__default["default"].string,
+  openListFontStyle: PropTypes__default["default"].string,
+  openListFontWeight: PropTypes__default["default"].string,
   openListFontFamily: PropTypes__default["default"].string,
   hideBorder: PropTypes__default["default"].bool
 };
@@ -2501,6 +2617,10 @@ const Modal = ({
   padding,
   setShow,
   zoomIcon,
+  prevIcon,
+  nextIcon,
+  closeIcon,
+  closeSlideIcon,
   selected,
   children,
   minWidth,
@@ -2512,6 +2632,8 @@ const Modal = ({
   headerText,
   imageWidth,
   headerSize,
+  headerStyle,
+  headerFamily,
   imageHeight,
   headerColor,
   borderStyle,
@@ -2522,9 +2644,7 @@ const Modal = ({
   outsideClose,
   headerWeight,
   headerHeight,
-  // imageMaxWidth,
   justifyContent,
-  // imageWrapWidth,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
@@ -2534,8 +2654,7 @@ const Modal = ({
   const [select, setSelect] = React.useState(0);
   const [isHover, setIsHover] = React.useState(false);
   const [innerData, setInnerData] = React.useState([]);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.MODAL.className);
+  const classProps = classnames__default["default"](className ?? merge.MODAL.className);
   const handleCloseModal = () => {
     setShow(false);
   };
@@ -2607,7 +2726,7 @@ const Modal = ({
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
-    onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
+    onClick: outsideClose || merge.MODAL.outsideClose ? handleCloseModal : _ => _,
     style: {
       top: '0px',
       left: '0px',
@@ -2615,7 +2734,7 @@ const Modal = ({
       width: '100%',
       height: '100vh',
       position: 'fixed',
-      backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor
+      backgroundColor: layerBackgroundColor ?? merge.MODAL.colors.backgroundLayer
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -2623,8 +2742,8 @@ const Modal = ({
       display: 'flex',
       width: '100%',
       height: '100vh',
-      alignItems: alignItems ? alignItems : configStyles.MODAL.alignItems,
-      justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
+      alignItems: alignItems ?? merge.MODAL.alignItems,
+      justifyContent: justifyContent ?? merge.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8['animation__modal']}`,
@@ -2633,16 +2752,16 @@ const Modal = ({
       position: 'relative',
       boxSizing: 'border-box',
       display: type === 'content' ? 'grid' : 'block',
-      width: width ? width : configStyles.MODAL.width,
+      width: width ?? merge.MODAL.width,
       overflow: type === 'content' ? 'auto' : 'hidden',
-      height: height ? height : configStyles.MODAL.height,
+      height: height ?? merge.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
-      borderRadius: radius ? radius : configStyles.MODAL.radius,
-      maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
-      maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
-      minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
-      minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
+      borderRadius: radius ?? merge.MODAL.radius,
+      maxWidth: mMaxWidth ?? merge.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? merge.MODAL.maxHeight,
+      minWidth: type === 'content' ? minWidth ?? merge.MODAL.minWidth : '',
+      backgroundColor: backgroundColor ?? merge.MODAL.colors.background,
+      minHeight: type === 'content' ? minHeight ?? merge.MODAL.minHeight : ''
     }
   }, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -2652,8 +2771,8 @@ const Modal = ({
       alignItems: 'center',
       boxSizing: 'border-box',
       backgroundColor: '#FBFBFB',
-      padding: padding ? padding : configStyles.MODAL.padding,
-      height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
+      padding: padding ?? merge.MODAL.padding,
+      height: headerHeight ?? merge.MODAL.header.height,
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -2663,9 +2782,11 @@ const Modal = ({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
-      fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
-      color: headerColor ? headerColor : configStyles.MODAL.headerColor,
-      fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
+      color: headerColor ?? merge.MODAL.header.color,
+      fontSize: headerSize ?? merge.MODAL.header.font.size,
+      fontStyle: headerStyle ?? merge.MODAL.header.font.style,
+      fontFamily: headerFamily ?? merge.MODAL.header.font.family,
+      fontWeight: headerWeight ?? merge.MODAL.header.font.weight
     }
   }, headerText), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleCloseModal,
@@ -2674,7 +2795,7 @@ const Modal = ({
       height: '14px',
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : merge.MODAL.icon.close ? merge.MODAL.icon.close : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       width: '100%',
@@ -2684,9 +2805,9 @@ const Modal = ({
       boxSizing: 'border-box',
       justifyContent: 'center',
       overflow: type === 'content' ? 'auto' : 'hidden',
-      borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
-      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
-      borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
+      borderWidth: borderWidth ?? merge.MODAL.border.width,
+      borderStyle: borderStyle ?? merge.MODAL.border.style,
+      borderColor: borderColor ?? merge.MODAL.border.color
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -2698,8 +2819,8 @@ const Modal = ({
       width: '100%',
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
-      height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-      background: closeAreaBackgroundColor ? closeAreaBackgroundColor : configStyles.MODAL.closeAreaBackgroundColor
+      height: grayDecorHeight ?? merge.MODAL.grayDecorHeight,
+      background: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: handleCloseModal,
@@ -2716,9 +2837,9 @@ const Modal = ({
       cursor: 'pointer',
       backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeSlideIcon ? closeSlideIcon : merge.MODAL.icon.closeSlide ? merge.MODAL.icon.closeSlide : /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
+      height: imageWrapHeight ?? merge.MODAL.image.wrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
@@ -2731,11 +2852,10 @@ const Modal = ({
           style: {
             display: 'block',
             objectFit: 'contain',
-            margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
-            borderRadius: radius ? radius : configStyles.MODAL.radius,
-            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
-            // maxWidth: '100%'
+            margin: imageMargin ?? merge.MODAL.image.margin,
+            borderRadius: radius ?? merge.MODAL.radius,
+            width: imageWidth ?? merge.MODAL.image.width,
+            height: imageHeight ?? merge.MODAL.image.height
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2756,7 +2876,7 @@ const Modal = ({
             justifyContent: 'center'
           },
           onClick: () => handleOpenInNewTab(item.url)
-        }, zoomIcon ? zoomIcon : /*#__PURE__*/React__default["default"].createElement(SvgZoom, null)) : '');
+        }, zoomIcon ? zoomIcon : merge.MODAL.icon.zoom ? merge.MODAL.icon.zoom : /*#__PURE__*/React__default["default"].createElement(SvgZoom, null)) : '');
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -2773,7 +2893,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, prevIcon ? prevIcon : merge.MODAL.icon.prev ? merge.MODAL.icon.prev : /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
@@ -2787,7 +2907,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
+  }, nextIcon ? nextIcon : merge.MODAL.icon.next ? merge.MODAL.icon.next : /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
 };
 Modal.propTypes = {
   data: PropTypes__default["default"].array,
@@ -2803,11 +2923,17 @@ Modal.propTypes = {
   minHeight: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   zoomIcon: PropTypes__default["default"].element,
+  prevIcon: PropTypes__default["default"].element,
+  nextIcon: PropTypes__default["default"].element,
+  closeIcon: PropTypes__default["default"].element,
+  closeSlideIcon: PropTypes__default["default"].element,
   alignItems: PropTypes__default["default"].string,
   mMaxHeight: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
   imageWidth: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
+  headerStyle: PropTypes__default["default"].string,
+  headerFamily: PropTypes__default["default"].string,
   outsideClose: PropTypes__default["default"].bool,
   showZoomIcon: PropTypes__default["default"].bool,
   imageMargin: PropTypes__default["default"].string,
@@ -2817,9 +2943,7 @@ Modal.propTypes = {
   imageHeight: PropTypes__default["default"].string,
   headerWeight: PropTypes__default["default"].string,
   headerHeight: PropTypes__default["default"].string,
-  imageMaxWidth: PropTypes__default["default"].string,
   justifyContent: PropTypes__default["default"].string,
-  imageWrapWidth: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   grayDecorHeight: PropTypes__default["default"].string,
   imageWrapHeight: PropTypes__default["default"].string,
@@ -2841,12 +2965,13 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled__default["default"].span`
-    animation: ${props => props.errorAnimation ? props.animation : 'none'};
+    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
 `;
 const Input = ({
   type,
   size,
   name,
+  style,
   color,
   label,
   value,
@@ -2855,12 +2980,13 @@ const Input = ({
   height,
   radius,
   change,
+  weight,
+  family,
   padding,
   tooltip,
   leftIcon,
   required,
   disabled,
-  marginTop,
   transform,
   iconWidth,
   rightIcon,
@@ -2871,20 +2997,24 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  labelStyle,
   floatToFix,
   minNumSize,
   maxNumSize,
   labelColor,
   errorColor,
   withoutDot,
-  borderRight,
+  errorStyle,
   placeholder,
   errorZindex,
   labelWeight,
+  errorWeight,
+  errorFamily,
   phoneDisplay,
   errorMessage,
   autoComplete,
   labelDisplay,
+  errorMarginTop,
   boxShadowHover,
   errorClassName,
   errorAnimation,
@@ -2893,14 +3023,15 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
-  telErrorMessage,
-  borderRightColor,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
-  borderRightColorHover,
+  telBorderRightWidth,
+  telBorderRightStyle,
+  telBorderRightColor,
   backgroundDisableColor,
   errorAnimationDuration,
+  telBorderRightColorHover,
   ...props
 }) => {
   const phoneNumberRegex = /^\d+$/;
@@ -2910,8 +3041,7 @@ const Input = ({
   const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
+  const classProps = classnames__default["default"](className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -2923,15 +3053,15 @@ const Input = ({
         }
     `;
   const animation = () => styled.css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
+        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
     `;
   const handleCheckTypeTel = (val, prevVal) => {
     if (type === 'tel') {
       if (!phoneNumberRegex.test(val)) {
-        if (val === '') {
-          setInnerErrorMessage('');
-        } else {
-          telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
+        if (errorMessage) {
+          setInnerErrorMessage(errorMessage);
+        }
+        if (val !== '') {
           val = prevVal;
         }
       } else {
@@ -3009,7 +3139,7 @@ const Input = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value;
-    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
+    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
     currentValue = handleCheckTypeTel(currentValue, prevValue);
     currentValue = handleCheckTypeNumber(currentValue, prevValue);
     if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
@@ -3055,7 +3185,7 @@ const Input = ({
       if (value === null) {
         newValue = '';
       } else {
-        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
+        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
         newValue = handleCheckTypeTel(value, newValue);
         newValue = handleCheckTypeNumber(value, newValue);
         if (max && value.length > max && type !== 'tel' && type !== 'number') {
@@ -3067,25 +3197,26 @@ const Input = ({
       }
     }
     setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.INPUT.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
-      display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
-      fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
-      lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
-      fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily
+      color: labelColor ?? merge.INPUT.label.color,
+      fontSize: labelSize ?? merge.INPUT.label.font.size,
+      fontStyle: labelStyle ?? merge.INPUT.label.font.style,
+      display: labelDisplay ?? merge.INPUT.label.display,
+      fontWeight: labelWeight ?? merge.INPUT.label.font.weight,
+      lineHeight: labelLineHeight ?? merge.INPUT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? merge.INPUT.label.marginBottom,
+      fontFamily: labelFontFamily ?? merge.INPUT.label.font.family
     }
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['input-content']}`,
     style: {
-      width: width ? width : configStyles.INPUT.width,
-      borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      width: width ?? merge.INPUT.width,
+      borderRadius: radius ?? merge.INPUT.radius,
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${merge.INPUT.error.color}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : merge.INPUT.box.shadowHover : boxShadow ? boxShadow : merge.INPUT.box.shadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -3096,30 +3227,36 @@ const Input = ({
       alignItems: 'center',
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
-      height: height ? height : configStyles.INPUT.height,
-      padding: padding ? padding : configStyles.INPUT.padding,
-      width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
-      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
+      height: height ?? merge.INPUT.height,
+      padding: padding ?? merge.INPUT.padding,
+      width: iconWidth ?? merge.INPUT.iconWidth,
+      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+      borderTopLeftRadius: radius ?? merge.INPUT.radius,
+      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
+      // border: 'none',
       pointerEvents: disabled ? 'none' : 'auto',
-      fontSize: size ? size : configStyles.INPUT.size,
-      height: height ? height : configStyles.INPUT.height,
-      padding: padding ? padding : configStyles.INPUT.padding,
-      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
-      borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
-      alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-      borderColor: innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor : isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
-      justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
+      fontSize: size ?? merge.INPUT.font.size,
+      fontStyle: style ?? merge.INPUT.font.style,
+      fontWeight: weight ?? merge.INPUT.font.weight,
+      fontFamily: family ?? merge.INPUT.font.family,
+      height: height ?? merge.INPUT.height,
+      padding: padding ?? merge.INPUT.padding,
+      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+      borderTopLeftRadius: radius ?? merge.INPUT.radius,
+      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
+      display: phoneDisplay ?? merge.INPUT.tel.display,
+      borderRight: `
+                                ${telBorderRightWidth ?? merge.INPUT.tel.borderRight.width}
+                                ${telBorderRightStyle ?? merge.INPUT.tel.borderRight.style}`,
+      alignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
+      borderColor: innerErrorMessage ? errorColor ? errorColor : merge.INPUT.error.color : isHover ? telBorderRightColorHover ? telBorderRightColorHover : merge.INPUT.tel.borderRight.colors.hover : telBorderRightColor ? telBorderRightColor : merge.INPUT.tel.borderRight.color,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+      justifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
     value: innerValue,
@@ -3130,19 +3267,22 @@ const Input = ({
     type: show || type === 'number' ? 'text' : type,
     min: type === 'number' && minNumSize ? minNumSize : '',
     max: type === 'number' && maxNumSize ? maxNumSize : '',
-    autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    autoComplete: autoComplete ? autoComplete : merge.INPUT.autoComplete,
     style: {
       border: 'none',
       outline: 'none',
       cursor: disabled ? 'not-allowed' : 'auto',
-      width: width ? width : configStyles.INPUT.width,
-      fontSize: size ? size : configStyles.INPUT.size,
-      height: height ? height : configStyles.INPUT.height,
-      padding: padding ? padding : configStyles.INPUT.padding,
-      borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
-      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
+      width: width ?? merge.INPUT.width,
+      fontSize: size ?? merge.INPUT.font.size,
+      fontStyle: style ?? merge.INPUT.font.style,
+      fontWeight: weight ?? merge.INPUT.font.weight,
+      fontFamily: family ?? merge.INPUT.font.family,
+      height: height ?? merge.INPUT.height,
+      padding: padding ?? merge.INPUT.padding,
+      borderRadius: radius ?? merge.INPUT.radius,
+      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
@@ -3151,34 +3291,41 @@ const Input = ({
       alignItems: 'center',
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
-      height: height ? height : configStyles.INPUT.height,
-      padding: padding ? padding : configStyles.INPUT.padding,
-      width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
-      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-      borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
-      borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
+      height: height ?? merge.INPUT.height,
+      padding: padding ?? merge.INPUT.padding,
+      width: iconWidth ?? merge.INPUT.iconWidth,
+      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+      borderTopRightRadius: radius ?? merge.INPUT.radius,
+      borderBottomRightRadius: radius ?? merge.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
-    errorAnimation: errorAnimation,
+    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
       position: 'absolute',
-      width: width ? width : configStyles.INPUT.width,
-      left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
-      color: errorColor ? errorColor : configStyles.INPUT.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
-      zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
-      lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-      transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
+      width: width ?? merge.INPUT.width,
+      left: errorLeft ?? merge.INPUT.error.left,
+      color: errorColor ?? merge.INPUT.error.color,
+      fontSize: errorSize ?? merge.INPUT.error.font.size,
+      fontStyle: errorStyle ?? merge.INPUT.error.font.style,
+      fontFamily: errorFamily ?? merge.INPUT.error.font.family,
+      fontWeight: errorWeight ?? merge.INPUT.error.font.weight,
+      zIndex: errorZindex ?? merge.INPUT.error.zIndex,
+      lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
+      top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
+      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
     },
-    className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
+    className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
 };
 Input.propTypes = {
+  size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
@@ -3188,10 +3335,8 @@ Input.propTypes = {
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
-  fontSize: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
-  marginTop: PropTypes__default["default"].string,
   transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
@@ -3206,6 +3351,10 @@ Input.propTypes = {
   maxNumSize: PropTypes__default["default"].number,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
   borderRight: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
   errorZindex: PropTypes__default["default"].string,
@@ -3216,22 +3365,24 @@ Input.propTypes = {
   errorAnimation: PropTypes__default["default"].bool,
   labelDisplay: PropTypes__default["default"].string,
   errorPosition: PropTypes__default["default"].string,
+  errorMarginTop: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
-  telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
-  borderRightColor: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
+  telBorderRightWidth: PropTypes__default["default"].string,
+  telBorderRightStyle: PropTypes__default["default"].string,
+  telBorderRightColor: PropTypes__default["default"].string,
   phoneJustifyContent: PropTypes__default["default"].string,
-  borderRightColorHover: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string,
   errorAnimationDuration: PropTypes__default["default"].string,
+  telBorderRightColorHover: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
@@ -3258,6 +3409,7 @@ const Radio = ({
   borderColor,
   borderStyle,
   labelFontSize,
+  labelFontStyle,
   labelFontFamily,
   labelFontWeight,
   labelLineHeight,
@@ -3266,8 +3418,7 @@ const Radio = ({
   radioItemMarginRight,
   radioItemMarginBottom
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.RADIO.className);
+  const classProps = classnames__default["default"](className ?? merge.RADIO.className);
   const [innerData, setInnerData] = React.useState([]);
   const [radioInnerSize, setRadioInnerSize] = React.useState('');
   const [radioInnerFormat, setRadioInnerFormat] = React.useState('');
@@ -3279,11 +3430,11 @@ const Radio = ({
   });
   const handleMouseEnter = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
-    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : borderColor ? borderColor : configStyles.RADIO.borderColor;
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : borderColor ? borderColor : merge.RADIO.border.color;
   };
   const handleMouseLeave = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
-    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : 'transparent';
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : 'transparent';
   };
   const handleChecked = selItem => {
     setInnerSelectedData(selItem);
@@ -3299,7 +3450,7 @@ const Radio = ({
   React.useEffect(() => {
     let radioSize = '';
     let radioSizeFormat = '';
-    const checkSize = size || configStyles.RADIO.size;
+    const checkSize = size || merge.RADIO.size;
     if (checkSize && typeof checkSize === 'string') {
       if (checkSize.length > 0) {
         checkSize.split('').map(item => {
@@ -3316,7 +3467,7 @@ const Radio = ({
     }
     setRadioInnerFormat(radioSizeFormat);
     setRadioInnerSize(`${parseInt(radioSize) / 2}`);
-  }, [size, configStyles.RADIO.size]);
+  }, [size, merge.RADIO.size]);
   React.useEffect(() => {
     if (typeof selected === 'object' && selected !== null && !Array.isArray(selected)) {
       setInnerSelectedData(selected);
@@ -3346,8 +3497,8 @@ const Radio = ({
         cursor: item[innerKeyNames.disabled] ? 'not-allowed' : 'pointer',
         width: 'fit-content',
         alignItems: 'center',
-        marginRight: diraction === 'horizontal' ? radioItemMarginRight ? radioItemMarginRight : configStyles.RADIO.radioItemMarginRight : '0px',
-        marginBottom: diraction === 'vertical' ? radioItemMarginBottom ? radioItemMarginBottom : configStyles.RADIO.radioItemMarginBottom : '0px'
+        marginRight: diraction === 'horizontal' ? radioItemMarginRight ? radioItemMarginRight : merge.RADIO.item.marginRight : '0px',
+        marginBottom: diraction === 'vertical' ? radioItemMarginBottom ? radioItemMarginBottom : merge.RADIO.item.marginBottom : '0px'
       },
       onClick: item[innerKeyNames.disabled] ? _ => _ : () => handleChecked(item),
       onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
@@ -3358,11 +3509,11 @@ const Radio = ({
         alignItems: 'center',
         borderRadius: '100%',
         justifyContent: 'center',
-        width: size ? size : configStyles.RADIO.size,
-        height: size ? size : configStyles.RADIO.size,
-        marginRight: item[innerKeyNames.label] ? radioMarginRight ? radioMarginRight : configStyles.RADIO.radioMarginRight : '0px',
-        border: `${borderSize ? borderSize : configStyles.RADIO.borderSize} ${borderStyle ? borderStyle : configStyles.RADIO.borderStyle}`,
-        borderColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : borderColor ? borderColor : configStyles.RADIO.borderColor
+        width: size ? size : merge.RADIO.size,
+        height: size ? size : merge.RADIO.size,
+        marginRight: item[innerKeyNames.label] ? radioMarginRight ? radioMarginRight : merge.RADIO.marginRight : '0px',
+        border: `${borderSize ?? merge.RADIO.border.width} ${borderStyle ? borderStyle : merge.RADIO.border.style}`,
+        borderColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : borderColor ? borderColor : merge.RADIO.border.color
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       id: elemId,
@@ -3370,15 +3521,16 @@ const Radio = ({
         borderRadius: '100%',
         width: radioInnerSize + radioInnerFormat,
         height: radioInnerSize + radioInnerFormat,
-        backgroundColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.borderActiveColor : 'transparent'
+        backgroundColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : 'transparent'
       }
     })), item[innerKeyNames.label] ? /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
-        color: labelColor ? labelColor : configStyles.RADIO.labelColor,
-        fontSize: labelFontSize ? labelFontSize : configStyles.RADIO.labelFontSize,
-        fontFamily: labelFontFamily ? labelFontFamily : configStyles.RADIO.labelFontFamily,
-        fontWeight: labelFontWeight ? labelFontWeight : configStyles.RADIO.labelFontWeight,
-        lineHeight: labelLineHeight ? labelLineHeight : configStyles.RADIO.labelLineHeight
+        color: labelColor ?? merge.RADIO.label.color,
+        fontSize: labelFontSize ?? merge.RADIO.label.font.size,
+        fontStyle: labelFontStyle ?? merge.RADIO.label.font.style,
+        fontFamily: labelFontFamily ?? merge.RADIO.label.font.family,
+        fontWeight: labelFontWeight ?? merge.RADIO.label.font.weight,
+        lineHeight: labelLineHeight ?? merge.RADIO.label.lineHeight
       },
       onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
       onMouseLeave: () => handleMouseLeave(item[innerKeyNames.id], elemId)
@@ -3395,6 +3547,7 @@ Radio.propTypes = {
   borderColor: PropTypes__default["default"].string,
   borderStyle: PropTypes__default["default"].string,
   labelFontSize: PropTypes__default["default"].string,
+  labelFontStyle: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
   labelFontWeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
@@ -3456,6 +3609,7 @@ const Select = ({
   labelWeight,
   labelDisplay,
   labelFontSize,
+  labelFontStyle,
   labelLineHeight,
   labelFontFamily,
   labelMarginBottom,
@@ -3463,12 +3617,17 @@ const Select = ({
   cursor,
   errorSize,
   errorColor,
+  errorStyle,
+  errorFamily,
+  errorWeight,
   selectedColor,
   selectedRadius,
-  selectedMinHeight,
   selectedPadding,
   selectedFontSize,
+  selectedFontStyle,
   selectedBoxSizing,
+  selectedMinHeight,
+  selectedFontFamily,
   selectedFontWeight,
   selectedLineHeight,
   selectedHoverColor,
@@ -3494,8 +3653,7 @@ const Select = ({
   boxShadowHover
 }) => {
   const ref = React.useRef();
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.SELECT.className);
+  const classProps = classnames__default["default"](className ? className : merge.SELECT.className);
   const [opened, setOpened] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [newSelected, setNewSelected] = React.useState([]);
@@ -3548,12 +3706,12 @@ const Select = ({
     setIsHover(false);
   };
   const handleMouseEnterOption = e => {
-    e.target.style.color = optionItemColorHover ? optionItemColorHover : configStyles.SELECT.optionItemColorHover;
-    e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : configStyles.SELECT.optionItemBackgroudColorHover;
+    e.target.style.color = optionItemColorHover ? optionItemColorHover : merge.SELECT.options.item.colors.hover;
+    e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : merge.SELECT.options.item.colors.backgroudHover;
   };
   const handleMouseLeaveOption = e => {
-    e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
-    e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
+    e.target.style.color = optionItemColor ? optionItemColor : merge.SELECT.options.item.color;
+    e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : merge.SELECT.options.item.colors.backgroud;
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
@@ -3609,14 +3767,15 @@ const Select = ({
     }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.SELECT.labelColor,
-      fontWeight: labelWeight ? labelWeight : configStyles.SELECT.labelWeight,
-      display: labelDisplay ? labelDisplay : configStyles.SELECT.labelDisplay,
-      fontSize: labelFontSize ? labelFontSize : configStyles.SELECT.labelFontSize,
-      lineHeight: labelLineHeight ? labelLineHeight : configStyles.SELECT.labelLineHeight,
-      fontFamily: labelFontFamily ? labelFontFamily : configStyles.SELECT.labelFontFamily,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
-      textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
+      color: labelColor ?? merge.SELECT.label.color,
+      fontWeight: labelWeight ?? merge.SELECT.label.font.weight,
+      display: labelDisplay ?? merge.SELECT.label.display,
+      fontSize: labelFontSize ?? merge.SELECT.label.font.size,
+      fontStyle: labelFontStyle ?? merge.SELECT.label.font.style,
+      fontFamily: labelFontFamily ?? merge.SELECT.label.font.family,
+      lineHeight: labelLineHeight ?? merge.SELECT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? merge.SELECT.label.marginBottom,
+      textTransform: labelTextTransform ?? merge.SELECT.label.textTransform
     }
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
@@ -3624,17 +3783,19 @@ const Select = ({
     className: styles$6['select-content']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
-      minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
-      padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
-      borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
-      fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
-      boxSizing: selectedBoxSizing ? selectedBoxSizing : configStyles.SELECT.selectedBoxSizing,
-      fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
-      lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
-      transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
-      backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
+      cursor: disabled ? 'not-allowed' : cursor ? cursor : merge.SELECT.selected.cursor,
+      minHeight: selectedMinHeight ?? merge.SELECT.selected.minHeight,
+      padding: selectedPadding ?? merge.SELECT.selected.padding,
+      borderRadius: selectedRadius ?? merge.SELECT.selected.radius,
+      fontSize: selectedFontSize ?? merge.SELECT.selected.font.size,
+      fontStyle: selectedFontStyle ?? merge.SELECT.selected.font.style,
+      fontFamily: selectedFontFamily ?? merge.SELECT.selected.font.family,
+      boxSizing: selectedBoxSizing ?? merge.SELECT.selected.box.sizing,
+      fontWeight: selectedFontWeight ?? merge.SELECT.selected.font.weight,
+      lineHeight: selectedLineHeight ?? merge.SELECT.selected.lineHeight,
+      transition: selectedTransition ?? merge.SELECT.selected.transition,
+      backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : merge.SELECT.selected.colors.backgroundDisable : selectedBackgroundColor ? selectedBackgroundColor : merge.SELECT.selected.colors.background,
+      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : merge.SELECT.error.box.shadow : isHover ? boxShadowHover ? boxShadowHover : merge.SELECT.box.shadowHover : boxShadow ? boxShadow : merge.SELECT.box.shadow
     },
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
@@ -3646,7 +3807,7 @@ const Select = ({
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
+      color: errorMessage ? errorColor ? errorColor : merge.SELECT.error.color : isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.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]) {
@@ -3658,23 +3819,23 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$6['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : merge.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$6['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : merge.SELECT.closeIcon ? merge.SELECT.closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arrowIcon ? arrowIcon : merge.SELECT.arrowIcon ? merge.SELECT.arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
-      borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
-      backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
+      boxShadow: optionsBoxShadow ?? merge.SELECT.options.box.shadow,
+      borderRadius: optionsBorderRadius ?? merge.SELECT.options.radius,
+      backgroundColor: optionsBackgroundColor ?? merge.SELECT.options.colors.background,
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : merge.SELECT.selected.minHeight.includes('rem') ? parseFloat(merge.SELECT.selected.minHeight.substr(0, merge.SELECT.selected.minHeight.length - 3)) + 0.6 + 'rem' : parseFloat(merge.SELECT.selected.minHeight.substr(0, merge.SELECT.selected.minHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3687,19 +3848,19 @@ const Select = ({
       onClick: disabled ? _ => _ : () => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$6['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$6['ellipsis'] : ''}`,
+      className: `${styles$6['select-content-bottom-row']} ${dots || merge.SELECT.dots ? styles$6['ellipsis'] : ''}`,
       style: {
-        overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
-        color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
-        cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
-        padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
-        fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
-        boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
-        minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
-        fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
-        lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
-        marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
-        backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
+        overflowWrap: !dots && !merge.SELECT.dots ? 'anywhere' : 'break-word',
+        color: optionItemColor ?? merge.SELECT.options.item.color,
+        cursor: optionItemCursor ?? merge.SELECT.options.item.cursor,
+        padding: optionItemPadding ?? merge.SELECT.options.item.padding,
+        fontSize: optionItemFontSize ?? merge.SELECT.options.item.font.size,
+        boxSizing: optionItemBoxSizing ?? merge.SELECT.options.item.box.sizing,
+        minHeight: optionItemMinHeight ?? merge.SELECT.options.item.minHeight,
+        fontWeight: optionItemFontWeight ?? merge.SELECT.options.item.font.weight,
+        lineHeight: dots || merge.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : merge.SELECT.options.item.lineHeight,
+        marginBottom: optionItemMarginBottom ?? merge.SELECT.options.item.marginBottom,
+        backgroundColor: optionItemBackgroudColor ?? merge.SELECT.options.item.colors.backgroud
       }
     }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       checked: option.checked
@@ -3707,10 +3868,13 @@ const Select = ({
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
-      color: errorColor ? errorColor : configStyles.SELECT.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize,
-      zIndex: errorZindex ? errorZindex : configStyles.SELECT.errorZindex,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`
+      color: errorColor ?? merge.SELECT.error.color,
+      fontSize: errorSize ?? merge.SELECT.error.font.size,
+      fontStyle: errorStyle ?? merge.SELECT.error.font.style,
+      fontFamily: errorFamily ?? merge.SELECT.error.font.family,
+      fontWeight: errorWeight ?? merge.SELECT.error.font.weight,
+      zIndex: errorZindex ?? merge.SELECT.error.zIndex,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${merge.SELECT.error.marginTop})`
     }
   }, errorMessage) : '');
 };
@@ -3737,6 +3901,7 @@ Select.propTypes = {
   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,
   labelMarginBottom: PropTypes__default["default"].string,
@@ -3749,7 +3914,9 @@ Select.propTypes = {
   selectedMinHeight: PropTypes__default["default"].string,
   selectedPadding: PropTypes__default["default"].string,
   selectedFontSize: PropTypes__default["default"].string,
+  selectedFontStyle: PropTypes__default["default"].string,
   selectedBoxSizing: PropTypes__default["default"].string,
+  selectedFontFamily: PropTypes__default["default"].string,
   selectedHoverColor: PropTypes__default["default"].string,
   selectedFontWeight: PropTypes__default["default"].string,
   selectedLineHeight: PropTypes__default["default"].string,
@@ -3781,16 +3948,22 @@ const SvgToasterInfo = ({
   fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
+  width: "60",
+  height: "60",
+  viewBox: "0 0 60 60",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M12 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z",
+}, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
+  opacity: "0.05",
+  cx: "30",
+  cy: "30",
+  r: "30",
+  fill: fillColor ? fillColor : '#00236A'
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M30 36C30.34 36 30.6252 35.8848 30.8556 35.6544C31.086 35.424 31.2008 35.1392 31.2 34.8V29.97C31.2 29.63 31.0848 29.35 30.8544 29.13C30.624 28.91 30.3392 28.8 30 28.8C29.66 28.8 29.3748 28.9152 29.1444 29.1456C28.914 29.376 28.7992 29.6608 28.8 30V34.83C28.8 35.17 28.9152 35.45 29.1456 35.67C29.376 35.89 29.6608 36 30 36ZM30 26.4C30.34 26.4 30.6252 26.2848 30.8556 26.0544C31.086 25.824 31.2008 25.5392 31.2 25.2C31.2 24.86 31.0848 24.5748 30.8544 24.3444C30.624 24.114 30.3392 23.9992 30 24C29.66 24 29.3748 24.1152 29.1444 24.3456C28.914 24.576 28.7992 24.8608 28.8 25.2C28.8 25.54 28.9152 25.8252 29.1456 26.0556C29.376 26.286 29.6608 26.4008 30 26.4ZM30 42C28.34 42 26.78 41.6848 25.32 41.0544C23.86 40.424 22.59 39.5692 21.51 38.49C20.43 37.41 19.5752 36.14 18.9456 34.68C18.316 33.22 18.0008 31.66 18 30C18 28.34 18.3152 26.78 18.9456 25.32C19.576 23.86 20.4308 22.59 21.51 21.51C22.59 20.43 23.86 19.5752 25.32 18.9456C26.78 18.316 28.34 18.0008 30 18C31.66 18 33.22 18.3152 34.68 18.9456C36.14 19.576 37.41 20.4308 38.49 21.51C39.57 22.59 40.4252 23.86 41.0556 25.32C41.686 26.78 42.0008 28.34 42 30C42 31.66 41.6848 33.22 41.0544 34.68C40.424 36.14 39.5692 37.41 38.49 38.49C37.41 39.57 36.14 40.4252 34.68 41.0556C33.22 41.686 31.66 42.0008 30 42Z",
   fill: fillColor ? fillColor : '#00236A'
 }));
 
@@ -3800,17 +3973,23 @@ const SvgToasterError = ({
   fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
+  width: "60",
+  height: "60",
+  viewBox: "0 0 60 60",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z",
-  fill: fillColor ? fillColor : '#E00'
+}, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
+  opacity: "0.05",
+  cx: "30",
+  cy: "30",
+  r: "30",
+  fill: fillColor ? fillColor : '#EE0000'
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M30 18C31.5759 18 33.1363 18.3104 34.5922 18.9134C36.0481 19.5165 37.371 20.4004 38.4853 21.5147C39.5996 22.629 40.4835 23.9519 41.0866 25.4078C41.6896 26.8637 42 28.4241 42 30C42 31.5759 41.6896 33.1363 41.0866 34.5922C40.4835 36.0481 39.5996 37.371 38.4853 38.4853C37.371 39.5996 36.0481 40.4835 34.5922 41.0866C33.1363 41.6896 31.5759 42 30 42C26.8174 42 23.7652 40.7357 21.5147 38.4853C19.2643 36.2348 18 33.1826 18 30C18 26.8174 19.2643 23.7652 21.5147 21.5147C23.7652 19.2643 26.8174 18 30 18ZM30 34C29.6022 34 29.2206 34.158 28.9393 34.4393C28.658 34.7206 28.5 35.1022 28.5 35.5C28.5 35.8978 28.658 36.2794 28.9393 36.5607C29.2206 36.842 29.6022 37 30 37C30.3978 37 30.7794 36.842 31.0607 36.5607C31.342 36.2794 31.5 35.8978 31.5 35.5C31.5 35.1022 31.342 34.7206 31.0607 34.4393C30.7794 34.158 30.3978 34 30 34ZM30 23C29.7659 22.9999 29.5393 23.0819 29.3595 23.2318C29.1797 23.3816 29.0581 23.5898 29.016 23.82L29 24V31L29.016 31.18C29.0577 31.4106 29.1791 31.6191 29.359 31.7694C29.5388 31.9196 29.7657 32.0018 30 32.0018C30.2343 32.0018 30.4612 31.9196 30.641 31.7694C30.8209 31.6191 30.9423 31.4106 30.984 31.18L31 31V24L30.984 23.82C30.9419 23.5898 30.8203 23.3816 30.6405 23.2318C30.4607 23.0819 30.2341 22.9999 30 23Z",
+  fill: fillColor ? fillColor : '#EE0000'
 }));
 
 const SvgToasterClose = ({
@@ -3838,16 +4017,22 @@ const SvgToasterWarning = ({
   fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 21",
+  width: "60",
+  height: "60",
+  viewBox: "0 0 60 60",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z",
+}, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
+  opacity: "0.05",
+  cx: "30",
+  cy: "30",
+  r: "30",
+  fill: fillColor ? fillColor : '#FF8A00'
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M19.1563 40C18.942 40 18.7471 39.9463 18.5717 39.839C18.3964 39.7317 18.26 39.5909 18.1625 39.4167C18.0651 39.2417 18.0113 39.0519 18.0012 38.8473C17.9911 38.6428 18.0449 38.4437 18.1625 38.25L28.9771 19.5833C29.094 19.3889 29.2452 19.2431 29.4307 19.1458C29.6162 19.0486 29.806 19 30.0001 19C30.1949 19 30.3851 19.0486 30.5706 19.1458C30.7561 19.2431 30.9069 19.3889 31.0231 19.5833L41.8376 38.25C41.9545 38.4444 42.0083 38.6439 41.999 38.8485C41.9896 39.053 41.9358 39.2424 41.8376 39.4167C41.7402 39.5917 41.6038 39.7328 41.4284 39.8402C41.253 39.9475 41.0582 40.0008 40.8438 40H19.1563ZM30.0001 36.5C30.3313 36.5 30.6092 36.388 30.8337 36.164C31.0582 35.94 31.17 35.6631 31.1692 35.3333C31.1692 35.0028 31.057 34.7255 30.8325 34.5015C30.608 34.2775 30.3306 34.1659 30.0001 34.1667C29.6688 34.1667 29.391 34.2787 29.1665 34.5027C28.942 34.7267 28.8302 35.0035 28.8309 35.3333C28.8309 35.6639 28.9432 35.9412 29.1677 36.1652C29.3921 36.3892 29.6696 36.5008 30.0001 36.5ZM30.0001 33C30.3313 33 30.6092 32.888 30.8337 32.664C31.0582 32.44 31.17 32.1631 31.1692 31.8333V28.3333C31.1692 28.0028 31.057 27.7255 30.8325 27.5015C30.608 27.2775 30.3306 27.1659 30.0001 27.1667C29.6688 27.1667 29.391 27.2787 29.1665 27.5027C28.942 27.7267 28.8302 28.0036 28.8309 28.3333V31.8333C28.8309 32.1639 28.9432 32.4412 29.1677 32.6652C29.3921 32.8892 29.6696 33.0008 30.0001 33Z",
   fill: fillColor ? fillColor : '#FF8A00'
 }));
 
@@ -3857,16 +4042,22 @@ const SvgToasterSuccess = ({
   fillColor,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
+  width: "60",
+  height: "60",
+  viewBox: "0 0 60 60",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
-}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z",
+}, title) : null, /*#__PURE__*/React__namespace.createElement("circle", {
+  opacity: "0.05",
+  cx: "30",
+  cy: "30",
+  r: "30",
+  fill: fillColor ? fillColor : '#0DA574'
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M30 18C33.1826 18 36.2348 19.2643 38.4853 21.5147C40.7357 23.7652 42 26.8174 42 30C42 33.1826 40.7357 36.2348 38.4853 38.4853C36.2348 40.7357 33.1826 42 30 42C26.8174 42 23.7652 40.7357 21.5147 38.4853C19.2643 36.2348 18 33.1826 18 30C18 26.8174 19.2643 23.7652 21.5147 21.5147C23.7652 19.2643 26.8174 18 30 18ZM28.5051 32.3674L25.8394 29.7C25.7439 29.6044 25.6304 29.5286 25.5056 29.4769C25.3807 29.4252 25.2469 29.3986 25.1117 29.3986C24.9766 29.3986 24.8427 29.4252 24.7179 29.4769C24.593 29.5286 24.4796 29.6044 24.384 29.7C24.191 29.893 24.0826 30.1548 24.0826 30.4277C24.0826 30.7007 24.191 30.9624 24.384 31.1554L27.7783 34.5497C27.8736 34.6458 27.9869 34.722 28.1118 34.774C28.2367 34.826 28.3707 34.8528 28.506 34.8528C28.6413 34.8528 28.7753 34.826 28.9002 34.774C29.0251 34.722 29.1384 34.6458 29.2337 34.5497L36.2623 27.5194C36.3591 27.4243 36.4362 27.3109 36.489 27.1858C36.5418 27.0607 36.5693 26.9264 36.5699 26.7906C36.5705 26.6548 36.5443 26.5203 36.4926 26.3947C36.441 26.2691 36.365 26.155 36.2691 26.0589C36.1731 25.9629 36.0591 25.8867 35.9336 25.835C35.8081 25.7832 35.6735 25.7568 35.5378 25.7572C35.402 25.7577 35.2677 25.7851 35.1425 25.8377C35.0173 25.8904 34.9039 25.9673 34.8086 26.064L28.5051 32.3674Z",
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
@@ -3891,9 +4082,11 @@ const ToasterPosition = {
 };
 const Toast = ({
   type,
+  icon,
   title,
   timer,
   position,
+  closeIcon,
   removeToast,
   description
 }) => {
@@ -3948,10 +4141,9 @@ const Toast = ({
       height: '60px',
       borderRadius: '30px',
       alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: type === 'info' ? 'rgba(0, 35, 106, 0.05)' : type === 'warn' ? 'rgba(255, 138, 0, 0.05)' : type === 'error' ? 'rgba(238, 0, 0, 0.05)' : type === 'success' ? 'rgba(13, 165, 116, 0.05)' : ''
+      justifyContent: 'center'
     }
-  }, type === 'info' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, type === 'info' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? icon ? icon : /*#__PURE__*/React__default["default"].createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: '100%',
       width: 'calc(100% - 90px)'
@@ -3984,7 +4176,7 @@ const Toast = ({
       height: '18px',
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
 };
 Toast.propTypes = {
   timer: PropTypes__default["default"].number,
@@ -4015,9 +4207,11 @@ const removeToast = ref => {
 };
 const createToast = ({
   type,
+  icon,
   timer,
   title,
   position,
+  iconClose,
   description
 }) => {
   let toastParentBlock;
@@ -4032,11 +4226,13 @@ const createToast = ({
   toastBlock.style.marginBottom = '20px';
   const newElem = /*#__PURE__*/React__default["default"].createElement(Toast, {
     type,
+    icon,
     timer,
     title,
     position,
-    removeToast,
-    description
+    iconClose,
+    description,
+    removeToast
   });
   ReactDOM__default["default"].render(newElem, toastBlock);
   if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
@@ -4055,66 +4251,81 @@ const createToast = ({
 const toast = {
   success: (title, props) => {
     const {
+      icon,
       timer,
       position,
+      iconClose,
       description
     } = props || {};
     createToast({
       title,
       type: 'success',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
+      timer: timer ?? 5000,
+      position: position ?? 'top-right',
+      description: description ?? '',
+      icon: icon ?? merge.TOASTER.icon.success,
+      iconClose: iconClose ?? merge.TOASTER.icon.close
     });
   },
   info: (title, props) => {
     const {
+      icon,
       timer,
       position,
+      iconClose,
       description
     } = props || {};
     createToast({
       title,
       type: 'info',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
+      timer: timer ?? 5000,
+      position: position ?? 'top-right',
+      description: description ?? '',
+      icon: icon ?? merge.TOASTER.icon.info,
+      iconClose: iconClose ?? merge.TOASTER.icon.close
     });
   },
   warn: (title, props) => {
     const {
+      icon,
       timer,
       position,
+      iconClose,
       description
     } = props || {};
     createToast({
       title,
       type: 'warn',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
+      timer: timer ?? 5000,
+      position: position ?? 'top-right',
+      description: description ?? '',
+      icon: icon ?? merge.TOASTER.icon.warn,
+      iconClose: iconClose ?? merge.TOASTER.icon.close
     });
   },
   error: (title, props) => {
     const {
+      icon,
       timer,
       position,
+      iconClose,
       description
     } = props || {};
     createToast({
       title,
       type: 'error',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
+      timer: timer ?? 5000,
+      position: position ?? 'top-right',
+      description: description ?? '',
+      icon: icon ?? merge.TOASTER.icon.error,
+      iconClose: iconClose ?? merge.TOASTER.icon.close
     });
   }
 };
 const Toaster = ({
   className
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.TOASTER.className);
+  const classProps = classnames__default["default"](className ?? merge.TOASTER.className);
   window.addEventListener('popstate', () => {
     if (path !== window.location.href) {
       if (!toastify) {
@@ -4168,7 +4379,9 @@ const Tooltip = ({
   radius,
   fontSize,
   className,
+  fontStyle,
   fontFamily,
+  fontWeight,
   tooltipIcon,
   tooltipWidth,
   tooltipRadius,
@@ -4176,8 +4389,7 @@ const Tooltip = ({
   tooltipBackgroundColor
 }) => {
   const tooltipRef = /*#__PURE__*/React.createRef(null);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](styles$4['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
+  const classProps = classnames__default["default"](styles$4['tooltip-block'], className ?? merge.TOOLTIP.className);
   const [checkTooltipWidth, setCheckTooltipWidth] = React.useState(0);
   const [checkTooltipHeight, setCheckTooltipHeight] = React.useState(0);
   const [showTooltip, setShowTooltip] = React.useState(false);
@@ -4194,18 +4406,18 @@ const Tooltip = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
     style: {
-      width: width ? width : configStyles.TOOLTIP.width,
-      height: height ? height : configStyles.TOOLTIP.height,
-      borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor
+      width: width ?? merge.TOOLTIP.parent.width,
+      height: height ?? merge.TOOLTIP.parent.height,
+      borderRadius: radius ?? merge.TOOLTIP.parent.radius,
+      backgroundColor: backgroundColor ?? merge.TOOLTIP.parent.colors.background
     }
   }, showTooltip ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
     className: `${styles$4['tooltip']}`,
     style: {
-      width: tooltipWidth ? tooltipWidth : configStyles.TOOLTIP.tooltipWidth,
-      borderRadius: tooltipRadius ? tooltipRadius : configStyles.TOOLTIP.tooltipRadius,
-      backgroundColor: tooltipBackgroundColor ? tooltipBackgroundColor : configStyles.TOOLTIP.tooltipBackgroundColor,
+      width: tooltipWidth ?? merge.TOOLTIP.width,
+      borderRadius: tooltipRadius ?? merge.TOOLTIP.radius,
+      backgroundColor: tooltipBackgroundColor ?? merge.TOOLTIP.colors.background,
       top: type === 'top' ? `calc(-${checkTooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : '0px',
       left: type === 'top' || type === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : type === 'left' ? `-${checkTooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
     }
@@ -4214,22 +4426,24 @@ const Tooltip = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$4['tooltip-decor']}`,
     style: {
-      backgroundColor: tooltipBackgroundColor ? tooltipBackgroundColor : configStyles.TOOLTIP.tooltipBackgroundColor,
+      backgroundColor: tooltipBackgroundColor ?? merge.TOOLTIP.colors.background,
       left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
       top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
     }
   }), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      color: color ? color : configStyles.TOOLTIP.color,
-      fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-      fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
+      color: color ?? merge.TOOLTIP.color,
+      fontSize: fontSize ?? merge.TOOLTIP.font.size,
+      fontStyle: fontStyle ?? merge.TOOLTIP.font.style,
+      fontFamily: fontFamily ?? merge.TOOLTIP.font.family,
+      fontWeight: fontWeight ?? merge.TOOLTIP.font.weight
     }
   }, text))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default["default"].createElement(SvgTooltip, null)));
+  }, tooltipIcon ? tooltipIcon : merge.TOOLTIP.icon ? merge.TOOLTIP.icon : /*#__PURE__*/React__default["default"].createElement(SvgTooltip, null)));
 };
 Tooltip.propTypes = {
   type: PropTypes__default["default"].string,
@@ -4238,8 +4452,10 @@ Tooltip.propTypes = {
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   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,
   tooltipWidth: PropTypes__default["default"].string,
   tooltipIcon: PropTypes__default["default"].element,
   tooltipRadius: PropTypes__default["default"].string,
@@ -4294,17 +4510,19 @@ var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captc
 styleInject(css_248z$5);
 
 const Captcha = ({
-  size,
   color,
   range,
   label,
+  getRange,
   className,
-  getRange
+  fontSize,
+  fontStyle,
+  fontFamily,
+  fontWeight
 }) => {
   const [rangeNumber, setRangeNumber] = React.useState(0);
   const [rangeProgress, setRangeProgress] = React.useState(0);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.CAPTCHA.className);
+  const classProps = classnames__default["default"](className ?? merge.CAPTCHA.className);
   const handleRange = e => {
     const value = e.target.value;
     getRange(value);
@@ -4330,8 +4548,11 @@ const Captcha = ({
     className: classProps
   }, label && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      fontSize: size ? size : configStyles.CAPTCHA.size,
-      color: color ? color : configStyles.CAPTCHA.color
+      color: color ?? merge.CAPTCHA.label.color,
+      fontSize: fontSize ?? merge.CAPTCHA.label.font.size,
+      fontStyle: fontStyle ?? merge.CAPTCHA.label.font.style,
+      fontFamily: fontFamily ?? merge.CAPTCHA.label.font.family,
+      fontWeight: fontWeight ?? merge.CAPTCHA.label.font.weight
     }
   }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -4424,9 +4645,8 @@ const Stepper = ({
   activeSteps,
   className
 }) => {
-  const configStyles = compereConfigs();
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](className ? className : configStyles.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`)
+    className: classnames__default["default"](className ?? merge.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`)
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
@@ -4457,13 +4677,14 @@ const Checkbox = ({
   keyNames,
   className,
   direction,
+  checkedColor,
+  unCheckedColor,
   checkedIcon,
   unCheckedIcon,
   labelMarginLeft,
   checkBoxMarginBottom
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.CHECKBOX.className);
+  const classProps = classnames__default["default"](className ?? merge.CHECKBOX.className);
   const [innerData, setInnerData] = React.useState([]);
   const [innerKeyNames, setInnerKeyNames] = React.useState({
     id: 'id',
@@ -4496,11 +4717,11 @@ const Checkbox = ({
   React.useEffect(() => {
     if (typeof keyNames === 'object' && keyNames !== null && !Array.isArray(keyNames)) {
       setInnerKeyNames({
-        id: keyNames.id ? keyNames.id : 'id',
-        label: keyNames.label ? keyNames.label : 'label',
-        checked: keyNames.checked ? keyNames.checked : 'checked',
-        disabled: keyNames.disabled ? keyNames.disabled : 'disabled',
-        ignoreDisabledForChecked: keyNames.ignoreDisabledForChecked ? keyNames.ignoreDisabledForChecked : 'ignoreDisabledForChecked'
+        id: keyNames.id ?? 'id',
+        label: keyNames.label ?? 'label',
+        checked: keyNames.checked ?? 'checked',
+        disabled: keyNames.disabled ?? 'disabled',
+        ignoreDisabledForChecked: keyNames.ignoreDisabledForChecked ?? 'ignoreDisabledForChecked'
       });
     }
   }, [keyNames]);
@@ -4516,21 +4737,21 @@ const Checkbox = ({
       key: `TUI_${index}_checkbox`,
       style: {
         width: 'fit-content',
-        marginBottom: direction === 'vertical' ? checkBoxMarginBottom ? checkBoxMarginBottom : configStyles.CHECKBOX.checkBoxMarginBottom : '0px'
+        marginBottom: direction === 'vertical' ? checkBoxMarginBottom ?? merge.CHECKBOX.marginBottom : '0px'
       }
     }, /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       data: item,
       index: index,
-      checkedColor: "#00236A",
-      unCheckedColor: "#D1D1D1",
-      checkedIcon: checkedIcon,
-      unCheckedIcon: unCheckedIcon,
       handleChecked: handleSendData,
       label: item[innerKeyNames.label],
       checked: item[innerKeyNames.checked],
       disabled: item[innerKeyNames.disabled],
       ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
-      labelMarginLeft: labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
+      labelMarginLeft: labelMarginLeft ?? merge.CHECKBOX.label.marginLeft,
+      checkedColor: checkedColor ?? merge.CHECKBOX.colors.checked,
+      unCheckedColor: unCheckedColor ?? merge.CHECKBOX.colors.unChecked,
+      checkedIcon: checkedIcon ?? merge.CHECKBOX.checkedIcon,
+      unCheckedIcon: unCheckedIcon ?? merge.CHECKBOX.unCheckedIcon
     }));
   }));
 };
@@ -4540,6 +4761,8 @@ Checkbox.propTypes = {
   checkedIcon: PropTypes__default["default"].element,
   unCheckedIcon: PropTypes__default["default"].element,
   labelMarginLeft: PropTypes__default["default"].string,
+  checkedColor: PropTypes__default["default"].string,
+  unCheckedColor: PropTypes__default["default"].string,
   checkBoxMarginBottom: PropTypes__default["default"].string,
   direction: PropTypes__default["default"].oneOf(Object.values(DirectionMode)),
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
@@ -4557,6 +4780,9 @@ const PositionSide = {
 };
 const Textarea = ({
   size,
+  style,
+  family,
+  weight,
   label,
   width,
   value,
@@ -4576,6 +4802,9 @@ const Textarea = ({
   maxLength,
   labelSize,
   errorSize,
+  errorStyle,
+  errorWeight,
+  errorFamily,
   marginTop,
   className,
   labelColor,
@@ -4592,8 +4821,7 @@ const Textarea = ({
   showCharacterCount,
   characterCountPosition
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.TEXTAREA.className);
+  const classProps = classnames__default["default"](className ?? merge.TEXTAREA.className);
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -4618,31 +4846,30 @@ const Textarea = ({
         onChange(value.substr(0, maxLength));
       }
     } else {
-      if (value.length > configStyles.TEXTAREA.maxLength) {
-        onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+      if (value.length > merge.TEXTAREA.maxLength) {
+        onChange(value.substr(0, merge.TEXTAREA.maxLength));
       }
     }
   };
   React.useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
-    }
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+  }, [onChange]);
+  React.useEffect(() => {
+    if (value === undefined) {
+      alert('Please add value prop on Textarea component');
+    }
     if (errorMessage) {
-      setError(errorMessage);
+      value === '' ? setError(errorMessage) : setError('');
     } else {
       setError('');
     }
-    if (value === '') {
-      setError('');
-    }
     setInnerValue(value);
-  }, [value, onChange, errorMessage]);
+  }, [value, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      width: width ? width : configStyles.TEXTAREA.width
+      width: width ?? merge.TEXTAREA.width
     },
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4650,40 +4877,38 @@ const Textarea = ({
       display: 'flex',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
-      fontFamily: labelFontFamily ? labelFontFamily : configStyles.TEXTAREA.labelFontFamily,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
+      color: labelColor ?? merge.TEXTAREA.label.color,
+      fontSize: labelSize ?? merge.TEXTAREA.label.font.size,
+      fontFamily: labelFontFamily ?? merge.TEXTAREA.label.font.family,
+      fontWeight: labelWeight ?? merge.TEXTAREA.label.font.weight,
+      marginBottom: labelMarginBottom ?? merge.TEXTAREA.label.marginBottom
     }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-      display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
-      fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
-    }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+      display: labelDisplay ?? merge.TEXTAREA.label.display
     }
-  }, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", null, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
       outline: 'none',
       overflow: 'auto',
       cursor: disabled ? 'not-allowed' : 'auto',
-      fontSize: size ? size : configStyles.TEXTAREA.size,
-      height: height ? height : configStyles.TEXTAREA.height,
-      padding: padding ? padding : configStyles.TEXTAREA.padding,
-      borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
-      minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
-      maxWidth: maxWidth ? maxWidth : configStyles.TEXTAREA.maxWidth,
-      minHeight: minHeight ? minHeight : configStyles.TEXTAREA.minHeight,
-      maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
-      boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-      boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}` : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}` : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}` : boxShadow ? boxShadow : configStyles.INPUT.boxShadow,
-      resize: resize ? resize : configStyles.TEXTAREA.resize
+      fontSize: size ?? merge.TEXTAREA.font.size,
+      fontStyle: style ?? merge.TEXTAREA.font.style,
+      fontFamily: family ?? merge.TEXTAREA.font.family,
+      fontWeight: weight ?? merge.TEXTAREA.font.weight,
+      height: height ?? merge.TEXTAREA.height,
+      padding: padding ?? merge.TEXTAREA.padding,
+      borderRadius: radius ?? merge.TEXTAREA.radius,
+      minWidth: minWidth ?? merge.TEXTAREA.minWidth,
+      maxWidth: maxWidth ?? merge.TEXTAREA.maxWidth,
+      minHeight: minHeight ?? merge.TEXTAREA.minHeight,
+      maxHeight: maxHeight ?? merge.TEXTAREA.maxHeight,
+      boxSizing: boxSizing ?? merge.TEXTAREA.box.sizing,
+      backgroundColor: backgroundColor ?? merge.TEXTAREA.colors.background,
+      boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : merge.TEXTAREA.error.box.shadow : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : merge.TEXTAREA.box.colors.focus : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : merge.TEXTAREA.box.colors.hover : boxShadow ? boxShadow : merge.INPUT.box.shadow,
+      resize: resize ? resize : merge.TEXTAREA.resize
     },
     value: innerValue,
     disabled: disabled,
@@ -4699,26 +4924,34 @@ const Textarea = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+      color: labelColor ?? merge.TEXTAREA.label.color,
+      fontSize: labelSize ?? merge.TEXTAREA.label.font.size,
+      fontWeight: labelWeight ?? merge.TEXTAREA.label.font.weight,
+      fontFamily: labelFontFamily ?? merge.TEXTAREA.label.font.family
     }
   }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       clear: 'both',
       wordBreak: 'break-all',
-      maxWidth: width ? width : configStyles.TEXTAREA.width
+      maxWidth: width ?? merge.TEXTAREA.width
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
-      fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
-      color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
-      marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
+      color: errorColor ?? merge.TEXTAREA.error.color,
+      fontSize: errorSize ?? merge.TEXTAREA.error.font.size,
+      fontStyle: errorStyle ?? merge.TEXTAREA.error.font.style,
+      fontWeight: errorWeight ?? merge.TEXTAREA.error.font.weight,
+      fontFamily: errorFamily ?? merge.TEXTAREA.error.font.family,
+      marginTop: marginTop ?? merge.TEXTAREA.error.marginTop
     }
   }, error)) : '');
 };
 Textarea.propTypes = {
   size: PropTypes__default["default"].string,
+  style: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
@@ -4737,6 +4970,9 @@ Textarea.propTypes = {
   maxLength: PropTypes__default["default"].number,
   labelSize: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
+  errorStyle: PropTypes__default["default"].string,
+  errorWeight: PropTypes__default["default"].string,
+  errorFamily: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
@@ -4793,8 +5029,7 @@ const Typography = ({
   backgroundColor,
   ...props
 }) => {
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.TYPOGRAPHY.className);
+  const classProps = classnames__default["default"](className ?? merge.TYPOGRAPHY.className);
   const [isHover, setIsHover] = React.useState(false);
   const [validVariant, setValidVariant] = React.useState(false);
   const handleMouseEnter = () => {
@@ -4805,20 +5040,20 @@ const Typography = ({
   };
   const tagT = /*#__PURE__*/React__default["default"].createElement(variant, {
     style: {
-      border: border ? border : configStyles.TYPOGRAPHY.border,
-      cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
-      borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
-      fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-      textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
-      textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
-      fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
-      lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
-      fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
-      textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
-      textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+      border: border ?? merge.TYPOGRAPHY.border,
+      cursor: cursor ?? merge.TYPOGRAPHY.cursor,
+      borderRadius: radius ?? merge.TYPOGRAPHY.radius,
+      fontSize: size ?? merge.TYPOGRAPHY.font['size' + variant],
+      fontWeight: weight ?? merge.TYPOGRAPHY.font['weight' + variant],
+      textShadow: textShadow ?? merge.TYPOGRAPHY.text['shadow' + variant],
+      textAlign: textAlign ?? merge.TYPOGRAPHY.text['align' + variant],
+      fontStyle: fontStyle ?? merge.TYPOGRAPHY.font['style' + variant],
+      lineHeight: lineHeight ?? merge.TYPOGRAPHY.text['lineHeight' + variant],
+      fontFamily: fontFamily ?? merge.TYPOGRAPHY.font['family' + variant],
+      textTransform: textTransform ?? merge.TYPOGRAPHY.text['transform' + variant],
+      textDecoration: textDecoration ?? merge.TYPOGRAPHY.text['decoration' + variant],
+      backgroundColor: backgroundColor ?? merge.TYPOGRAPHY.colors['background' + variant],
+      color: isHover ? colorHover ? colorHover : color ? color : merge.TYPOGRAPHY.colors[variant] : color ? color : merge.TYPOGRAPHY.colors[variant]
     },
     ...props,
     className: classProps,
@@ -4948,7 +5183,6 @@ const Pagination = ({
   totalCount,
   currentPage
 }) => {
-  const configStyles = compereConfigs();
   const [inpVal, setInpVal] = React.useState('');
   const [error, setError] = React.useState(false);
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
@@ -4977,7 +5211,7 @@ const Pagination = ({
   }
   const classProps = classnames__default["default"](
   // TODO: check and remove pagination-bar-rem class
-  styles$1.list, className ? className : configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`);
+  styles$1.list, className ?? merge.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -5121,7 +5355,11 @@ const Autocomplete = ({
   selected,
   className,
   errorSize,
+  errorStyle,
+  errorWeight,
+  errorFamily,
   labelSize,
+  labelStyle,
   marginTop,
   errorColor,
   labelColor,
@@ -5133,6 +5371,8 @@ const Autocomplete = ({
   labelDisplay,
   contentDisplay,
   contentTopSize,
+  contentTopStyle,
+  contentTopFamily,
   contentPosition,
   contentTopColor,
   labelLineHeight,
@@ -5195,15 +5435,14 @@ const Autocomplete = ({
   const [innerError, setInnerError] = React.useState('');
   const [innerValue, setInnerValue] = React.useState('');
   const [innerOptions, setInnerOptions] = React.useState([]);
-  const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.AUTOCOMPLETE.className, styles['auto-complete']);
+  const classProps = classnames__default["default"](className ?? merge.AUTOCOMPLETE.className, styles['auto-complete']);
   const showOption = styled.keyframes`
         100% {
             max-height: 400px;
         }
     `;
   const animation = () => styled.css`
-        ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.AUTOCOMPLETE.showOptionDuration} linear forwards
+        ${showOption} ${showOptionDuration ?? merge.AUTOCOMPLETE.showOptionDuration} linear forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -5212,12 +5451,12 @@ const Autocomplete = ({
     setIsHover(false);
   };
   const handleRowMouseEnter = e => {
-    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.AUTOCOMPLETE.contentBottomRowHoverColor;
-    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.AUTOCOMPLETE.contentBottomRowHoverBackgroundColor;
+    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : merge.AUTOCOMPLETE.contentBottom.row.colors.hover;
+    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : merge.AUTOCOMPLETE.contentBottom.row.colors.backgroundHover;
   };
   const handleRowMouseLeave = e => {
-    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottomRowColor;
-    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottomRowBackgroundColor;
+    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : merge.AUTOCOMPLETE.contentBottom.row.color;
+    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : merge.AUTOCOMPLETE.contentBottom.row.colors.background;
   };
   const handleFocus = () => {
     setIsFocus(true);
@@ -5236,11 +5475,6 @@ const Autocomplete = ({
         name: value,
         id: currentId
       });
-    } else {
-      change({
-        name: '',
-        id: ''
-      });
     }
   };
   const handleClick = selectedValue => {
@@ -5249,28 +5483,28 @@ const Autocomplete = ({
     setInnerValue(selectedValue[keyNames.name]);
     getItem(selectedValue);
   };
-  const optionList = /*#__PURE__*/React__default["default"].createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const optionList = /*#__PURE__*/React__default["default"].createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 && innerValue.length >= searchCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      left: contentBottomLeft ? contentBottomLeft : configStyles.AUTOCOMPLETE.contentBottomLeft,
-      width: contentBottomWidth ? contentBottomWidth : configStyles.AUTOCOMPLETE.contentBottomWidth,
-      zIndex: contentBottomZindex ? contentBottomZindex : configStyles.AUTOCOMPLETE.contentBottomZindex,
-      borderRadius: contentBottomRadius ? contentBottomRadius : configStyles.AUTOCOMPLETE.contentBottomRadius,
-      maxWidth: contentBottomMaxWidth ? contentBottomMaxWidth : configStyles.AUTOCOMPLETE.contentBottomMaxWidth,
-      overflow: contentBottomOverflow ? contentBottomOverflow : configStyles.AUTOCOMPLETE.contentBottomOverflow,
-      position: contentBottomPosition ? contentBottomPosition : configStyles.AUTOCOMPLETE.contentBottomPosition,
-      minHeight: contentBottomMinHeight ? contentBottomMinHeight : configStyles.AUTOCOMPLETE.contentBottomMinHeight,
-      boxShadow: contentBottomBoxShadow ? contentBottomBoxShadow : configStyles.AUTOCOMPLETE.contentBottomBoxShadow,
-      backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.AUTOCOMPLETE.contentBottomBackgroundColor,
-      top: contentTopHeight ? contentTopHeight.includes('rem') ? parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px' : configStyles.AUTOCOMPLETE.contentTopHeight.includes('rem') ? parseFloat(configStyles.AUTOCOMPLETE.contentTopHeight.substr(0, configStyles.AUTOCOMPLETE.contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.AUTOCOMPLETE.contentTopHeight.substr(0, configStyles.AUTOCOMPLETE.contentTopHeight.length - 2)) + 6 + 'px',
+      left: contentBottomLeft ?? merge.AUTOCOMPLETE.contentBottom.left,
+      width: contentBottomWidth ?? merge.AUTOCOMPLETE.contentBottom.width,
+      zIndex: contentBottomZindex ?? merge.AUTOCOMPLETE.contentBottom.zIndex,
+      borderRadius: contentBottomRadius ?? merge.AUTOCOMPLETE.contentBottom.radius,
+      maxWidth: contentBottomMaxWidth ?? merge.AUTOCOMPLETE.contentBottom.maxWidth,
+      overflow: contentBottomOverflow ?? merge.AUTOCOMPLETE.contentBottom.overflow,
+      position: contentBottomPosition ?? merge.AUTOCOMPLETE.contentBottom.position,
+      minHeight: contentBottomMinHeight ?? merge.AUTOCOMPLETE.contentBottom.minHeight,
+      boxShadow: contentBottomBoxShadow ?? merge.AUTOCOMPLETE.contentBottom.box.shadow,
+      backgroundColor: contentBottomBackgroundColor ?? merge.AUTOCOMPLETE.contentBottom.colors.background,
+      top: contentTopHeight ? contentTopHeight.includes('rem') ? parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px' : merge.AUTOCOMPLETE.height.includes('rem') ? parseFloat(merge.AUTOCOMPLETE.height.substr(0, merge.AUTOCOMPLETE.height.length - 3)) + 0.6 + 'rem' : parseFloat(merge.AUTOCOMPLETE.height.substr(0, merge.AUTOCOMPLETE.height.length - 2)) + 6 + 'px',
       animation
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.AUTOCOMPLETE.contentBottomInnerDisplay,
-      overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.AUTOCOMPLETE.contentBottomInnerOverflowY,
-      overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.AUTOCOMPLETE.contentBottomInnerOverflowX,
-      maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.AUTOCOMPLETE.contentBottomInnerMaxHeight,
-      flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.AUTOCOMPLETE.contentBottomInnerDirection
+      display: contentBottomInnerDisplay ? contentBottomInnerDisplay : merge.AUTOCOMPLETE.contentBottom.inner.display,
+      overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : merge.AUTOCOMPLETE.contentBottom.inner.overflowY,
+      overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : merge.AUTOCOMPLETE.contentBottom.inner.overflowX,
+      maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : merge.AUTOCOMPLETE.contentBottom.inner.maxHeight,
+      flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : merge.AUTOCOMPLETE.contentBottom.inner.direction
     }
   }, innerOptions.map(item => {
     return /*#__PURE__*/React__default["default"].createElement("p", {
@@ -5280,34 +5514,37 @@ const Autocomplete = ({
       onClick: () => handleClick(item),
       style: {
         flexShrink: 0,
-        color: contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottomRowColor,
-        height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.AUTOCOMPLETE.contentBottomRowHeight,
-        cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.AUTOCOMPLETE.contentBottomRowCursor,
-        display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.AUTOCOMPLETE.contentBottomRowDisplay,
-        padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.AUTOCOMPLETE.contentBottomRowPadding,
-        fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.AUTOCOMPLETE.contentBottomRowFontSize,
-        boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.AUTOCOMPLETE.contentBottomRowBoxSizing,
-        fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.AUTOCOMPLETE.contentBottomRowFontWeight,
-        lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.AUTOCOMPLETE.contentBottomRowLineHeight,
-        alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.AUTOCOMPLETE.contentBottomRowAlignItems,
-        transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.AUTOCOMPLETE.contentBottomRowTransition,
-        marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.AUTOCOMPLETE.contentBottomRowMarginBottom,
-        backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottomRowBackgroundColor
+        color: contentBottomRowColor ? contentBottomRowColor : merge.AUTOCOMPLETE.contentBottom.row.color,
+        height: contentBottomRowHeight ? contentBottomRowHeight : merge.AUTOCOMPLETE.contentBottom.row.height,
+        cursor: contentBottomRowCursor ? contentBottomRowCursor : merge.AUTOCOMPLETE.contentBottom.row.cursor,
+        display: contentBottomRowDisplay ? contentBottomRowDisplay : merge.AUTOCOMPLETE.contentBottom.row.display,
+        padding: contentBottomRowPadding ? contentBottomRowPadding : merge.AUTOCOMPLETE.contentBottom.row.padding,
+        fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : merge.AUTOCOMPLETE.contentBottom.row.font.size,
+        boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : merge.AUTOCOMPLETE.contentBottom.box.sizing,
+        fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : merge.AUTOCOMPLETE.contentBottom.row.font.weight,
+        lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : merge.AUTOCOMPLETE.contentBottom.row.lineHeight,
+        alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : merge.AUTOCOMPLETE.contentBottom.row.alignItems,
+        transition: contentBottomRowTransition ? contentBottomRowTransition : merge.AUTOCOMPLETE.contentBottom.row.transition,
+        marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : merge.AUTOCOMPLETE.contentBottom.row.marginBottom,
+        backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : merge.AUTOCOMPLETE.contentBottom.row.colors.background
       }
     }, item[keyNames.name]);
-  }))) : innerOptions.length <= 0 ? innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
+  }))) : innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '1',
-      color: errorColor ? errorColor : configStyles.AUTOCOMPLETE.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.AUTOCOMPLETE.errorSize,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-      padding: innerErrorPadding ? innerErrorPadding : configStyles.AUTOCOMPLETE.innerErrorPadding,
-      height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.AUTOCOMPLETE.contentBottomRowHeight,
-      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.AUTOCOMPLETE.contentBottomRowHeight,
-      backgroundColor: innerErrorBackgroundColor ? innerErrorBackgroundColor : configStyles.AUTOCOMPLETE.innerErrorBackgroundColor
-    }
-  }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '' : '');
+      color: errorColor ?? merge.AUTOCOMPLETE.error.color,
+      fontSize: errorSize ?? merge.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorStyle ?? merge.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorWeight ?? merge.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFamily ?? merge.AUTOCOMPLETE.error.font.family,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${merge.AUTOCOMPLETE.error.marginTop})`,
+      padding: innerErrorPadding ?? merge.AUTOCOMPLETE.innerError.padding,
+      height: contentBottomRowHeight ?? merge.AUTOCOMPLETE.contentBottom.row.height,
+      lineHeight: contentBottomRowLineHeight ?? merge.AUTOCOMPLETE.contentBottom.row.lineHeight,
+      backgroundColor: innerErrorBackgroundColor ?? merge.AUTOCOMPLETE.innerError.colors.background
+    }
+  }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '');
   React.useEffect(() => {
     if (options === undefined) {
       alert('Please add options prop');
@@ -5343,22 +5580,23 @@ const Autocomplete = ({
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.AUTOCOMPLETE.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.AUTOCOMPLETE.labelSize,
-      display: labelDisplay ? labelDisplay : configStyles.AUTOCOMPLETE.labelDisplay,
-      fontWeight: labelWeight ? labelWeight : configStyles.AUTOCOMPLETE.labelWeight,
-      fontFamily: labelFontFamily ? labelFontFamily : configStyles.AUTOCOMPLETE.labelFontFamily,
-      lineHeight: labelLineHeight ? labelLineHeight : configStyles.AUTOCOMPLETE.labelLineHeight,
-      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.AUTOCOMPLETE.contentTopMaxWidth,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.AUTOCOMPLETE.labelMarginBottom,
-      textTransform: labelTextTransform ? labelTextTransform : configStyles.AUTOCOMPLETE.labelTextTransform
+      color: labelColor ?? merge.AUTOCOMPLETE.label.color,
+      display: labelDisplay ?? merge.AUTOCOMPLETE.label.display,
+      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      fontSize: labelSize ?? merge.AUTOCOMPLETE.label.font.size,
+      fontStyle: labelStyle ?? merge.AUTOCOMPLETE.label.font.style,
+      fontWeight: labelWeight ?? merge.AUTOCOMPLETE.label.font.weight,
+      fontFamily: labelFontFamily ?? merge.AUTOCOMPLETE.label.font.family,
+      lineHeight: labelLineHeight ?? merge.AUTOCOMPLETE.label.lineHeight,
+      marginBottom: labelMarginBottom ?? merge.AUTOCOMPLETE.label.marginBottom,
+      textTransform: labelTextTransform ?? merge.AUTOCOMPLETE.label.textTransform
     }
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      display: contentDisplay ? contentDisplay : configStyles.AUTOCOMPLETE.contentDisplay,
-      position: contentPosition ? contentPosition : configStyles.AUTOCOMPLETE.contentPosition,
-      flexDirection: contentDirection ? contentDirection : configStyles.AUTOCOMPLETE.contentDirection,
-      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.AUTOCOMPLETE.contentTopMaxWidth
+      display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
+      position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
+      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: id,
@@ -5370,35 +5608,40 @@ const Autocomplete = ({
     onInput: handleChange,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    placeholder: placeHolder ? placeHolder : '',
-    autoComplete: autoComplete ? autoComplete : configStyles.AUTOCOMPLETE.autoComplete,
+    placeholder: placeHolder ?? '',
+    autoComplete: autoComplete ?? merge.AUTOCOMPLETE.autoComplete,
     style: {
       border: 'none',
       outline: 'none',
       maxWidth: '100%',
       transition: 'all 240ms',
       cursor: disabled ? 'not-allowed' : 'auto',
-      color: contentTopColor ? contentTopColor : configStyles.AUTOCOMPLETE.contentTopColor,
-      fontSize: contentTopSize ? contentTopSize : configStyles.AUTOCOMPLETE.contentTopSize,
-      backgroundColor: disabled && (backgroundDisableColor ?? configStyles.AUTOCOMPLETE.backgroundDisableColor),
-      height: contentTopHeight ? contentTopHeight : configStyles.AUTOCOMPLETE.contentTopHeight,
-      padding: contentTopPadding ? contentTopPadding : configStyles.AUTOCOMPLETE.contentTopPadding,
-      display: contentTopDisplay ? contentTopDisplay : configStyles.AUTOCOMPLETE.contentTopDisplay,
-      fontWeight: contentTopWeight ? contentTopWeight : configStyles.AUTOCOMPLETE.contentTopWeight,
-      borderRadius: contentTopRadius ? contentTopRadius : configStyles.AUTOCOMPLETE.contentTopRadius,
-      boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.AUTOCOMPLETE.contentTopBoxSizing,
-      lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.AUTOCOMPLETE.contentTopLineHeight,
-      flexDirection: contentTopDirection ? contentTopDirection : configStyles.AUTOCOMPLETE.contentTopDirection,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.AUTOCOMPLETE.errorColor}` : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.AUTOCOMPLETE.contentTopBorderActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.AUTOCOMPLETE.contentTopBorderHover : contentTopBorder ? contentTopBorder : configStyles.AUTOCOMPLETE.contentTopBorder
+      color: contentTopColor ?? merge.AUTOCOMPLETE.color,
+      fontSize: contentTopSize ?? merge.AUTOCOMPLETE.font.size,
+      fontStyle: contentTopStyle ?? merge.AUTOCOMPLETE.font.style,
+      fontFamily: contentTopFamily ?? merge.AUTOCOMPLETE.font.family,
+      fontWeight: contentTopWeight ?? merge.AUTOCOMPLETE.font.weight,
+      backgroundColor: disabled && (backgroundDisableColor ?? merge.AUTOCOMPLETE.colors.backgroundDisable),
+      height: contentTopHeight ?? merge.AUTOCOMPLETE.height,
+      padding: contentTopPadding ?? merge.AUTOCOMPLETE.padding,
+      display: contentTopDisplay ?? merge.AUTOCOMPLETE.display,
+      borderRadius: contentTopRadius ?? merge.AUTOCOMPLETE.radius,
+      boxSizing: contentTopBoxSizing ?? merge.AUTOCOMPLETE.box.sizing,
+      lineHeight: contentTopLineHeight ?? merge.AUTOCOMPLETE.lineHeight,
+      flexDirection: contentTopDirection ?? merge.AUTOCOMPLETE.direction,
+      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : merge.AUTOCOMPLETE.error.box.shadow : isFocus ? contentTopBorderActive ? contentTopBorderActive : merge.AUTOCOMPLETE.box.shadowActive : isHover ? contentTopBorderHover ? contentTopBorderHover : merge.AUTOCOMPLETE.box.shadowHover : contentTopBorder ? contentTopBorder : merge.AUTOCOMPLETE.box.shadow
     }
   }, props)), innerError ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       left: '0px',
       position: 'absolute',
-      color: errorColor ? errorColor : configStyles.AUTOCOMPLETE.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.AUTOCOMPLETE.errorSize,
-      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.AUTOCOMPLETE.contentTopMaxWidth
+      color: errorColor ?? merge.AUTOCOMPLETE.error.color,
+      fontSize: errorSize ?? merge.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorStyle ?? merge.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorWeight ?? merge.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFamily ?? merge.AUTOCOMPLETE.error.font.family,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${merge.AUTOCOMPLETE.error.marginTop})`,
+      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
     }
   }, innerError) : '', optionList));
 };
@@ -5410,8 +5653,12 @@ Autocomplete.propTypes = {
   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,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   searchCount: PropTypes__default["default"].number,
@@ -5422,6 +5669,8 @@ Autocomplete.propTypes = {
   autoComplete: PropTypes__default["default"].string,
   contentDisplay: PropTypes__default["default"].string,
   contentTopSize: PropTypes__default["default"].string,
+  contentTopStyle: PropTypes__default["default"].string,
+  contentTopFamily: PropTypes__default["default"].string,
   contentPosition: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   contentTopColor: PropTypes__default["default"].string,
@@ -5481,7 +5730,11 @@ Autocomplete.propTypes = {
 };
 Autocomplete.defaultProps = {
   searchCount: 3,
-  disabled: false
+  disabled: false,
+  keyNames: {
+    name: 'name',
+    id: 'id'
+  }
 };
 
 exports.Autocomplete = Autocomplete;