@xaypay/tui 0.2.0 → 0.2.2

package/dist/index.es.js

@@ -437,35 +437,799 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default.createElement(SvgListItemDelete, null))));
 });
 
-async function getPProps(type) {
-  let packageResult;
-  let projectResult;
-  const packageImportConfig = await import.meta.glob('../../tui.config.js');
-  const projectImportConfig = await import.meta.glob('../../../../tui.config.js');
-  if (packageImportConfig['../../tui.config.js']) {
-    packageResult = packageImportConfig['../../tui.config.js']().then(module => module.default);
+const boxSizing = 'border-box';
+const fontStyle = 'normal';
+const fontFamily = 'Arial';
+const fontWeight = 500;
+const transparent = 'transparent';
+const presetColors = {
+  info: '#F24C4C',
+  dark: '#3C393E',
+  light: '#EEEEEE',
+  extraLight: '#FBFBFB',
+  danger: '#EE0000',
+  success: '#0DA574',
+  warning: '#FECD29',
+  secondary: '#D1D1D1',
+  primary: '#051942',
+  primarySecond: '#00236A'
+};
+const fontObject = {
+  size: '16px',
+  style: fontStyle,
+  weight: fontWeight,
+  family: fontFamily
+};
+var packageResult = {
+  // default properties for <Button /> component
+  BUTTON: {
+    type: 'button',
+    width: '100%',
+    height: '46px',
+    color: 'white',
+    contentWidth: false,
+    border: 'none',
+    radius: '6px',
+    cursor: 'pointer',
+    padding: '12px 20px',
+    disabled: false,
+    className: '',
+    transition: 'background-color 240ms, color 240ms',
+    box: {
+      sizing: boxSizing
+    },
+    colors: {
+      background: 'rgba(0, 35, 106, 1)',
+      backgroundHover: '#CB3A3A',
+      disabled: 'rgba(60, 57, 62, 1)',
+      disabledLine: 'rgba(60, 57, 62, 1)',
+      disabledBackground: 'rgba(238, 238, 238, 1)'
+    },
+    font: {
+      ...fontObject
+    },
+    text: {
+      transform: 'none',
+      colors: {
+        hover: '#001745'
+      }
+    },
+    icon: {
+      marginRight: '10px'
+    }
+  },
+  // default properties for <Input /> component
+  INPUT: {
+    type: 'text',
+    width: '100%',
+    color: 'rgb(60, 57, 62)',
+    height: '46px',
+    radius: '0px',
+    padding: '12px 15px',
+    disabled: false,
+    required: false,
+    className: '',
+    maxLength: 255,
+    iconWidth: '64px',
+    autoComplete: 'off',
+    box: {
+      sizing: boxSizing,
+      shadow: `0 0 0 2px ${presetColors.secondary}`,
+      // like border
+      shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
+    },
+    colors: {
+      background: 'white',
+      backgroundDisable: presetColors.secondary
+    },
+    font: {
+      ...fontObject
+    },
+    label: {
+      color: presetColors.dark,
+      display: 'block',
+      lineHeight: '22px',
+      marginBottom: '6px',
+      font: {
+        ...fontObject
+      }
+    },
+    error: {
+      left: '0px',
+      color: presetColors.danger,
+      zIndex: '1',
+      className: '',
+      marginTop: '10px',
+      lineHeight: '19px',
+      font: {
+        ...fontObject
+      }
+    },
+    tel: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRight: {
+        width: '1px',
+        style: 'solid',
+        color: presetColors.secondary,
+        colors: {
+          hover: presetColors.dark
+        }
+      }
+    }
+  },
+  // default properties for <Tooltip /> component
+  TOOLTIP: {
+    type: 'top',
+    color: 'white',
+    width: '100px',
+    radius: '3px',
+    className: '',
+    // icon: React.createElement(SvgChecked, { fill: 'red' }),
+
+    parent: {
+      width: '46px',
+      height: '46px',
+      radius: '0px',
+      colors: {
+        background: transparent
+      }
+    },
+    colors: {
+      background: '#03a9f4'
+    },
+    font: {
+      ...fontObject
+    }
+  },
+  // default properties for <Typography /> component
+  TYPOGRAPHY: {
+    radius: '0px',
+    border: 'none',
+    cursor: 'default',
+    className: '',
+    colors: {
+      p: presetColors.dark,
+      h1: presetColors.dark,
+      h2: presetColors.dark,
+      h3: presetColors.dark,
+      h4: presetColors.dark,
+      h5: presetColors.dark,
+      h6: presetColors.dark,
+      span: presetColors.dark,
+      backgroundp: transparent,
+      backgroundh1: transparent,
+      backgroundh2: transparent,
+      backgroundh3: transparent,
+      backgroundh4: transparent,
+      backgroundh5: transparent,
+      backgroundh6: transparent,
+      backgroundspan: transparent
+    },
+    font: {
+      sizep: '13px',
+      sizeh1: '70px',
+      sizeh2: '50px',
+      sizeh3: '38px',
+      sizeh4: '24px',
+      sizeh5: '20px',
+      sizeh6: '14px',
+      sizespan: '12px',
+      stylep: fontStyle,
+      styleh1: fontStyle,
+      styleh2: fontStyle,
+      styleh3: fontStyle,
+      styleh4: fontStyle,
+      styleh5: fontStyle,
+      styleh6: fontStyle,
+      stylespan: fontStyle,
+      weightp: fontWeight,
+      weighth1: fontWeight,
+      weighth2: fontWeight,
+      weighth3: fontWeight,
+      weighth4: fontWeight,
+      weighth5: fontWeight,
+      weighth6: fontWeight,
+      weightspan: fontWeight,
+      familyp: fontFamily,
+      familyh1: fontFamily,
+      familyh2: fontFamily,
+      familyh3: fontFamily,
+      familyh4: fontFamily,
+      familyh5: fontFamily,
+      familyh6: fontFamily,
+      familyspan: fontFamily
+    },
+    text: {
+      alignp: 'left',
+      alignh1: 'left',
+      alignh2: 'left',
+      alignh3: 'left',
+      alignh4: 'left',
+      alignh5: 'left',
+      alignh6: 'left',
+      alignspan: 'left',
+      shadowp: 'none',
+      shadowh1: 'none',
+      shadowh2: 'none',
+      shadowh3: 'none',
+      shadowh4: 'none',
+      shadowh5: 'none',
+      shadowh6: 'none',
+      shadowspan: 'none',
+      transformp: 'none',
+      transformh1: 'none',
+      transformh2: 'none',
+      transformh3: 'none',
+      transformh4: 'none',
+      transformh5: 'none',
+      transformh6: 'none',
+      transformspan: 'none',
+      decorationp: 'none',
+      decorationh1: 'none',
+      decorationh2: 'none',
+      decorationh3: 'none',
+      decorationh4: 'none',
+      decorationh5: 'none',
+      decorationh6: 'none',
+      decorationspan: 'none',
+      lineHeightp: 'normal',
+      lineHeighth1: 'normal',
+      lineHeighth2: 'normal',
+      lineHeighth3: 'normal',
+      lineHeighth4: 'normal',
+      lineHeighth5: 'normal',
+      lineHeighth6: 'normal',
+      lineHeightspan: 'normal'
+    }
+  },
+  // default properties for <Select /> component
+  SELECT: {
+    dots: false,
+    className: '',
+    showCloseIcon: true,
+    // arrowIcon: React.createElement(SvgChecked, { fill: 'green' }),
+    // closeIcon: React.createElement(SvgChecked, { fill: 'green' }),
+
+    box: {
+      shadow: `0 0 0 2px ${presetColors.secondary}`,
+      // like border
+      shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
+    },
+    label: {
+      color: presetColors.dark,
+      display: 'block',
+      lineHeight: '22px',
+      marginBottom: '6px',
+      textTransform: 'none',
+      font: {
+        ...fontObject
+      }
+    },
+    selected: {
+      color: presetColors.dark,
+      cursor: 'pointer',
+      radius: '6px',
+      padding: '0px 15px',
+      minHeight: '46px',
+      lineHeight: '22px',
+      transition: 'border-color 240ms',
+      box: {
+        sizing: boxSizing
+      },
+      colors: {
+        hover: '#373538',
+        background: presetColors.extraLight,
+        backgroundDisable: presetColors.secondary
+      },
+      font: {
+        ...fontObject
+      }
+    },
+    options: {
+      radius: '6px',
+      colors: {
+        background: presetColors.extraLight
+      },
+      box: {
+        shadow: '0 0 10px rgba(60, 57, 62, 0.08)'
+      },
+      item: {
+        color: presetColors.dark,
+        cursor: 'pointer',
+        padding: '0px 15px',
+        minHeight: '46px',
+        lineHeight: '25px',
+        marginBottom: '2px',
+        box: {
+          sizing: boxSizing
+        },
+        colors: {
+          hover: presetColors.primarySecond,
+          backgroud: '#ffffff',
+          backgroudHover: 'unset'
+        },
+        font: {
+          ...fontObject
+        }
+      }
+    },
+    error: {
+      color: 'rgb(238, 0, 0)',
+      marginTop: '10px',
+      zIndex: 10,
+      box: {
+        shadow: `0 0 0 2px ${presetColors.danger}`
+      },
+      font: {
+        ...fontObject
+      }
+    }
+  },
+  // default properties for <Textarea /> component
+  TEXTAREA: {
+    color: presetColors.dark,
+    width: '400px',
+    height: '134px',
+    radius: '6px',
+    resize: 'none',
+    padding: '12px 15px',
+    minWidth: '200px',
+    maxWidth: '500px',
+    minHeight: '100px',
+    maxHeight: '300px',
+    maxLength: 1500,
+    className: '',
+    box: {
+      sizing: boxSizing,
+      shadow: `0 0 0 2px ${presetColors.secondary}`,
+      // like border
+
+      colors: {
+        hover: `0 0 0 2px ${presetColors.dark}`,
+        // like border color
+        focus: `0 0 0 2px ${presetColors.primarySecond}` // like border color
+      }
+    },
+    colors: {
+      background: 'white'
+    },
+    label: {
+      color: presetColors.dark,
+      display: 'block',
+      marginBottom: '10px',
+      font: {
+        ...fontObject
+      }
+    },
+    font: {
+      ...fontObject
+    },
+    error: {
+      color: '#E40E00',
+      marginTop: '10px',
+      box: {
+        shadow: `0 0 0 2px ${presetColors.danger}` // like border
+      },
+      font: {
+        ...fontObject
+      }
+    }
+  },
+  // default properties for <NewAutocomplete /> component
+  AUTOCOMPLETE: {
+    className: '',
+    searchCount: 3,
+    autoComplete: 'off',
+    showOptionDuration: '640ms',
+    color: presetColors.dark,
+    radius: '6px',
+    height: '46px',
+    padding: '0px 15px',
+    display: 'flex',
+    maxWidth: '400px',
+    direction: 'row',
+    lineHeight: '22px',
+    box: {
+      sizing: boxSizing,
+      shadow: `0 0 0 2px ${presetColors.secondary}`,
+      // like border
+      shadowHover: `0 0 0 2px ${presetColors.dark}`,
+      // like border
+      shadowActive: `0 0 0 2px ${presetColors.primarySecond}` // like border
+    },
+    font: {
+      ...fontObject
+    },
+    parent: {
+      display: 'flex',
+      direction: 'column',
+      position: 'relative'
+    },
+    colors: {
+      backgroundDisable: presetColors.secondary
+    },
+    label: {
+      color: presetColors.dark,
+      display: 'block',
+      lineHeight: '22px',
+      marginBottom: '6px',
+      textTransform: 'none',
+      font: {
+        ...fontObject
+      }
+    },
+    contentBottom: {
+      left: '0px',
+      width: '100%',
+      zIndex: 1,
+      radius: '6px',
+      maxWidth: '400px',
+      overflow: 'hidden',
+      position: 'absolute',
+      minHeight: '0px',
+      inner: {
+        display: 'flex',
+        overflowY: 'auto',
+        maxHeight: '234px',
+        overflowX: 'hidden',
+        direction: 'column'
+      },
+      row: {
+        color: presetColors.dark,
+        height: '46px',
+        cursor: 'pointer',
+        display: 'flex',
+        padding: '0px 15px',
+        lineHeight: '22px',
+        alignItems: 'center',
+        transition: 'all 240ms',
+        marginBottom: '2px',
+        colors: {
+          hover: presetColors.primarySecond,
+          background: '#ffffff',
+          backgroundHover: 'initial'
+        },
+        font: {
+          ...fontObject
+        }
+      },
+      colors: {
+        background: presetColors.extraLight
+      },
+      box: {
+        shadow: '0 0 10px rgba(60, 57, 62, 0.08)',
+        sizing: boxSizing
+      }
+    },
+    error: {
+      color: presetColors.danger,
+      marginTop: '10px',
+      font: {
+        ...fontObject
+      },
+      box: {
+        shadow: `0 0 0 2px ${presetColors.danger}` // like border
+      }
+    },
+    innerError: {
+      padding: '0px 15px',
+      colors: {
+        background: 'gray'
+      }
+    }
+  },
+  // default properties for <Captcha /> component
+  CAPTCHA: {
+    className: '',
+    label: {
+      color: presetColors.dark,
+      font: {
+        ...fontObject
+      }
+    }
+  },
+  // default properties for <File /> component
+  FILE: {
+    color: presetColors.dark,
+    radius: '6px',
+    height: '200px',
+    maxWidth: '440px',
+    className: '',
+    areaImage: {
+      width: '27.8rem',
+      height: 'auto'
+    },
+    or: 'կամ',
+    upload: 'Բեռնել',
+    uploadColor: presetColors.success,
+    putFileHere: 'Տեղադրել ֆայլը այստեղ',
+    sizeText: 'Առավելագույնը',
+    timeForRemoveError: 4000,
+    extentionsRowMarginTop: '40px',
+    border: {
+      width: '2px',
+      style: 'dashed',
+      color: presetColors.secondary,
+      colors: {
+        hover: presetColors.primarySecond
+      }
+    },
+    colors: {
+      background: '#F8F8F8',
+      backgroundHidden: 'rgba(60, 57, 62, 0.4)'
+    },
+    label: {
+      color: '#4A4A4D',
+      font: {
+        ...fontObject
+      }
+    },
+    font: {
+      ...fontObject
+    },
+    error: {
+      color: presetColors.danger,
+      font: {
+        ...fontObject
+      },
+      format: 'ֆայլի սխալ ֆորմատ',
+      maxSize: 'Առավելագույն ծավալ',
+      noChoosenFile: 'Ֆայլը ընտրված չէ'
+    },
+    progress: {
+      color: '#4A4A4D',
+      colors: {
+        track: '#E5E8E8',
+        failed: '#E40E00',
+        success: '#069768',
+        loading: presetColors.primary
+      },
+      font: {
+        ...fontObject
+      }
+    },
+    uploadBtn: {
+      label: 'Բեռնել',
+      color: '#fff',
+      height: '30px',
+      colors: {
+        hover: '#fff',
+        background: 'rgba(0, 35, 106, 1)',
+        backgroundHover: 'rgba(0, 35, 106, 1)'
+      },
+      font: {
+        ...fontObject
+      }
+    },
+    listItem: {
+      color: '#4a4a4d',
+      height: '70px',
+      padding: '14px 20px',
+      colors: {
+        background: '#F6F8F8',
+        backgroundError: '#F6F8F8'
+      },
+      font: {
+        ...fontObject
+      },
+      error: {
+        color: '#E40E00',
+        font: {
+          ...fontObject
+        }
+      }
+    },
+    icon: {
+      // comment here for example, 
+
+      // pdf: React.createElement(SvgChecked, { fill: 'green' }),      
+      // png: React.createElement(SvgChecked, { fill: 'green' }),      
+      // jpg: React.createElement(SvgChecked, { fill: 'green' }),      
+      // jpeg: React.createElement(SvgChecked, { fill: 'green' }),      
+      // heic: React.createElement(SvgChecked, { fill: 'green' }),      
+      // wrong: React.createElement(SvgChecked, { fill: 'green' }),      
+      // upload: React.createElement(SvgChecked, { fill: 'green' }),      
+      // required: React.createElement(SvgChecked, { fill: 'green' }),      
+      // removeFile: React.createElement(SvgChecked, { fill: 'green' }),      
+      // deleteComponent: React.createElement(SvgChecked, { fill: 'green' }),      
+      // deleteItem: React.createElement(SvgUnchecked, { fill: 'green' }),
+    }
+  },
+  // default properties for <Modal /> component
+  MODAL: {
+    width: '',
+    height: '',
+    maxWidth: '95%',
+    minWidth: '320px',
+    maxHeight: '95vh',
+    minHeight: '200px',
+    radius: '14px',
+    padding: '20px 20px 20px',
+    className: '',
+    alignItems: 'center',
+    outsideClose: true,
+    justifyContent: 'center',
+    grayDecorHeight: '80px',
+    border: {
+      width: '20px',
+      style: 'solid',
+      color: transparent
+    },
+    colors: {
+      background: 'white',
+      backgroundLayer: 'rgba(0,0,0,0.4)'
+    },
+    header: {
+      color: presetColors.primarySecond,
+      height: '30px',
+      font: {
+        ...fontObject
+      }
+    },
+    image: {
+      width: '',
+      margin: '0px',
+      height: '100%',
+      maxWidth: '100%',
+      wrapWidth: '100%',
+      wrapHeight: '100%'
+    },
+    icon: {
+      // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
+      // prev: React.createElement(SvgChecked, { fill: 'green' }),      
+      // next: React.createElement(SvgChecked, { fill: 'green' }),      
+      // close: React.createElement(SvgChecked, { fill: 'green' }),      
+      // closeSlide: React.createElement(SvgChecked, { fill: 'green' }),      
+    },
+    closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
+  },
+  // default properties for <Checkbox /> component
+  CHECKBOX: {
+    className: '',
+    marginBottom: '10px',
+    colors: {
+      checked: presetColors.primarySecond,
+      unChecked: presetColors.secondary
+    },
+    label: {
+      marginLeft: '10px'
+    }
+
+    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
+    // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
+  },
+  // default properties for <Table /> component
+  TABLE: {
+    className: '',
+    textAlign: 'center',
+    column: {
+      maxWidth: '',
+      minWidth: ''
+    },
+    head: {
+      color: presetColors.extraLight,
+      radius: '14px',
+      padding: '11px 20px',
+      colors: {
+        background: presetColors.primarySecond
+      },
+      font: {
+        ...fontObject
+      }
+    },
+    body: {
+      color: presetColors.dark,
+      padding: '11px 20px',
+      box: {
+        shadow: ''
+      },
+      row: {
+        asItem: false,
+        radius: '6px',
+        marginTop: '10px',
+        colors: {
+          backgroud: transparent
+        },
+        box: {
+          shadow: ''
+        },
+        border: '1px solid',
+        borderColor: presetColors.light
+      },
+      font: {
+        ...fontObject
+      }
+    },
+    openList: {
+      color: '#A3A5A9',
+      font: {
+        ...fontObject
+      }
+    }
+  },
+  // default properties for <Pagination /> component
+  PAGINATION: {
+    className: '' // for pagination class
+  },
+  // default properties for <Toaster /> component
+  TOASTER: {
+    className: '',
+    icon: {
+      // info: React.createElement(SvgChecked, { just: 'must' }),
+      // warn: React.createElement(SvgUnchecked, { just: 'must' }),
+      // close: React.createElement(SvgChecked, { fill: 'green' }),      
+      // error: React.createElement(SvgChecked, { fill: 'green' }),      
+      // success: React.createElement(SvgChecked, { fill: 'green' }),      
+    }
+  },
+  // default properties for <Stepper /> component
+  STEPPER: {
+    className: '' // for stepper class
+  },
+  // default properties for <Radio /> component
+  RADIO: {
+    size: '20px',
+    className: '',
+    marginRight: '10px',
+    item: {
+      marginRight: '10px',
+      marginBottom: '10px'
+    },
+    border: {
+      width: '2px',
+      style: 'solid',
+      color: '#E7E7E7',
+      activeColor: '#3C3D46'
+    },
+    label: {
+      color: '#3C3D46',
+      lineHeight: '21px',
+      font: {
+        ...fontObject
+      }
+    }
+  },
+  // default properties for <Form /> component
+  FORM: {
+    className: ''
   }
-  if (projectImportConfig['../../../../tui.config.js']) {
-    projectResult = projectImportConfig['../../../../tui.config.js']().then(module => module.default);
+};
+
+async function getPProps() {
+  let projectResult = {};
+  const projectPath = `../../../../tui.config.js`;
+  async function loadComponent(componentName) {
+    try {
+      const Component = await import( /* @vite-ignore */componentName);
+      return Component.default;
+    } catch (err) {
+      console.error(`Error loading component: ${componentName}`);
+      return null;
+    }
+  }
+  const projectImportConfig = await loadComponent(projectPath);
+  if (projectImportConfig) {
+    projectResult = projectImportConfig;
   }
-  return type === true ? packageResult : projectResult;
+  return {
+    packageResult,
+    projectResult
+  };
 }
-
-let projectConfig = {};
-let packageConfig = {};
-async function getProps(type) {
+async function getProps() {
   let props;
   try {
-    const newProps = await getPProps(type);
-    props = _.merge(type === true ? packageConfig : projectConfig, newProps);
+    const newProps = await getPProps();
+    props = _.merge(newProps.packageResult, newProps.projectResult);
   } catch (error) {
     console.error('Error in getProps:', error);
   }
   return props;
 }
-packageConfig = getProps(true);
-packageConfig = getProps();
-const merge = _.merge(packageConfig, projectConfig);
+
+var configStylesPromise = getProps();
 const hasOwnerProperty = (object, property) => {
   return Object.prototype.hasOwnProperty.call(object, property);
 };
@@ -503,8 +1267,9 @@ const Button = ({
   disabledBackgroundColor,
   ...props
 }) => {
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [isHover, setIsHover] = useState(false);
-  const classProps = classnames(className ?? merge.BUTTON.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -515,41 +1280,51 @@ const Button = ({
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
     }
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.BUTTON.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
   }, []);
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, configStyles.BUTTON && /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
       display: 'flex',
       outline: 'none',
       alignItems: 'center',
       justifyContent: 'center',
-      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
+      fontSize: size ?? configStyles.BUTTON.font.size,
+      fontStyle: style ?? configStyles.BUTTON.font.style,
+      fontFamily: font ?? configStyles.BUTTON.font.family,
+      height: height ?? configStyles.BUTTON.height,
+      fontWeight: weight ?? configStyles.BUTTON.font.weight,
+      padding: padding ?? configStyles.BUTTON.padding,
+      borderRadius: radius ?? configStyles.BUTTON.radius,
+      boxSizing: boxSizing ?? configStyles.BUTTON.box.sizing,
+      transition: transition ?? configStyles.BUTTON.transition,
+      border: outline ? 'none' : border ?? configStyles.BUTTON.border,
+      width: contentWidth ? 'auto' : width ?? configStyles.BUTTON.width,
+      cursor: disabled ? 'not-allowed' : cursor ?? configStyles.BUTTON.cursor,
+      textTransform: textTransform ?? configStyles.BUTTON.text.transform,
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background}` : 'none',
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.text.colors.hover : color ? color : configStyles.BUTTON.color
     },
-    type: type ?? merge.BUTTON.type,
-    disabled: disabled ?? merge.BUTTON.disabled,
+    type: type ?? configStyles.BUTTON.type,
+    disabled: disabled ?? configStyles.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.createElement("span", {
     style: {
-      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
+      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.icon.marginRight : '0px'
     }
-  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
+  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component'));
 };
 Button.propTypes = {
   type: PropTypes.string,
@@ -795,10 +1570,11 @@ const File = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const inpRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
-  const classProps = classnames(className ?? merge.FILE.className);
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const [classProps, setClassProps] = useState({});
   const [singleFile, setSingleFile] = useState(null);
+  const [configStyles, setConfigStyles] = useState({});
   const [choosenFileCount, setChoosenFileCount] = useState(0);
   const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
   const handleRemoveComponent = () => {
@@ -841,14 +1617,14 @@ const File = /*#__PURE__*/forwardRef(({
                 change({
                   file: file[ix],
                   uuid: v4(),
-                  check: formatError ?? merge.FILE.error.format
+                  check: formatError ?? configStyles.FILE.error.format
                 });
               }
             } else {
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: maxSizeError ?? merge.FILE.error.maxSize
+                check: maxSizeError ?? configStyles.FILE.error.maxSize
               });
             }
           }
@@ -870,14 +1646,14 @@ const File = /*#__PURE__*/forwardRef(({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: formatError ?? merge.FILE.error.format
+                check: formatError ?? configStyles.FILE.error.format
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: maxSizeError ?? merge.FILE.error.maxSize
+              check: maxSizeError ?? configStyles.FILE.error.maxSize
             });
           }
         }
@@ -891,7 +1667,7 @@ const File = /*#__PURE__*/forwardRef(({
       setImage(null);
       handleUploadFiles(file);
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError(noChoosenFile ?? merge.FILE.error.noChoosen);
+        setError(noChoosenFile ?? configStyles.FILE.error.noChoosen);
       }
     } else {
       if (file[0]) {
@@ -909,16 +1685,16 @@ const File = /*#__PURE__*/forwardRef(({
             }
           } else {
             setImage(null);
-            setError(formatError ?? merge.FILE.error.format);
+            setError(formatError ?? configStyles.FILE.error.format);
           }
         } else {
           setImage(null);
-          setError(maxSizeError ?? merge.FILE.error.maxSize);
+          setError(maxSizeError ?? configStyles.FILE.error.maxSize);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError(noChoosenFile ?? merge.FILE.error.noChoosen);
+        setError(noChoosenFile ?? configStyles.FILE.error.noChoosen);
       }
     }
   };
@@ -1005,10 +1781,22 @@ const File = /*#__PURE__*/forwardRef(({
       alert('Please add change prop on File component');
     }
   }, [change]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.FILE.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
-      maxWidth: maxWidth ?? merge.FILE.maxWidth
+      maxWidth: maxWidth ?? configStyles.FILE.maxWidth
     },
     className: classProps
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1020,18 +1808,18 @@ const File = /*#__PURE__*/forwardRef(({
     }
   }, label && /*#__PURE__*/React__default.createElement("label", {
     style: {
-      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
+      color: labelColor ?? configStyles.FILE.label.color,
+      fontSize: labelSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFamily ?? configStyles.FILE.label.font.family
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : merge.FILE.icon.required ? merge.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleRemoveComponent
-  }, iconDeleteComponent ? iconDeleteComponent : merge.FILE.icon.deleteComponent ? merge.FILE.icon.deleteComponent : /*#__PURE__*/React__default.createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default.createElement("div", {
+  }, iconDeleteComponent ? iconDeleteComponent : configStyles.FILE.icon.deleteComponent ? configStyles.FILE.icon.deleteComponent : /*#__PURE__*/React__default.createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -1040,12 +1828,12 @@ const File = /*#__PURE__*/forwardRef(({
       boxSizing: 'border-box',
       justifyContent: 'center',
       cursor: !disabled ? 'pointer' : 'not-allowed',
-      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
+      height: height ?? configStyles.FILE.height,
+      borderWidth: borderWidth ?? configStyles.FILE.border.width,
+      borderStyle: borderStyle ?? configStyles.FILE.border.style,
+      borderRadius: radius ?? configStyles.FILE.radius,
+      backgroundColor: backgroundColor ?? configStyles.FILE.colors.background,
+      borderColor: error ? errorColor ? errorColor : configStyles.FILE.error.color : disabled ? borderColor ? borderColor : configStyles.FILE.border.color : isHover ? borderHoverColor ? borderHoverColor : configStyles.FILE.border.colors.hover : borderColor ? borderColor : configStyles.FILE.border.color
     },
     onDrop: handleDrop,
     onClick: handleClick,
@@ -1069,40 +1857,40 @@ const File = /*#__PURE__*/forwardRef(({
       alignItems: 'center',
       flexDirection: 'column',
       justifyContent: 'center',
-      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
+      color: color ?? configStyles.FILE.color,
+      fontSize: size ?? configStyles.FILE.font.size,
+      fontStyle: style ?? configStyles.FILE.font.style,
+      fontFamily: family ?? configStyles.FILE.font.family,
+      fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : merge.FILE.icon.pdf ? merge.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : merge.FILE.icon.heic ? merge.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
       maxWidth: '100%',
       maxHeight: '95%',
       objectFit: 'contain',
-      width: fileAreaImageWidth ?? merge.FILE.fileAreaImageWidth,
-      height: fileAreaImageHeight ?? merge.FILE.fileAreaImageHeight
+      width: fileAreaImageWidth ?? configStyles.FILE.fileAreaImageWidth,
+      height: fileAreaImageHeight ?? configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : preview ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, iconUpload ? iconUpload : merge.FILE.icon.upload ? merge.FILE.icon.upload : /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, iconUpload ? iconUpload : configStyles.FILE.icon.upload ? configStyles.FILE.icon.upload : /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
-  }, putFileHere ?? merge.FILE.putFileHere, /*#__PURE__*/React__default.createElement("br", null), or ? or : merge.FILE.or, ' ', /*#__PURE__*/React__default.createElement("span", {
+  }, putFileHere ?? configStyles.FILE.putFileHere, /*#__PURE__*/React__default.createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React__default.createElement("span", {
     style: {
-      color: uploadColor ?? merge.FILE.uploadColor
+      color: uploadColor ?? configStyles.FILE.uploadColor
     }
-  }, upload ?? merge.FILE.upload))), /*#__PURE__*/React__default.createElement("div", {
+  }, upload ?? configStyles.FILE.upload))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      marginTop: extentionsRowMarginTop ?? merge.FILE.extentionsRowMarginTop
+      marginTop: extentionsRowMarginTop ?? configStyles.FILE.extentionsRowMarginTop
     }
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
-  }, fileSizeText ?? merge.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
       padding: '5px',
@@ -1114,16 +1902,16 @@ const File = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React__default.createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
-    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
+    font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
+    size: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
+    style: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
+    weight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
+    label: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
+    color: uploadBtnColor ?? configStyles.FILE.uploadBtn.color,
+    height: uploadBtnHeight ?? configStyles.FILE.uploadBtn.height,
+    hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
+    backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
+    backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
   }), /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
@@ -1132,7 +1920,7 @@ const File = /*#__PURE__*/forwardRef(({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? merge.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
+  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -1145,9 +1933,9 @@ const File = /*#__PURE__*/forwardRef(({
       boxSizing: 'border-box',
       alignItems: 'flex-start',
       justifyContent: 'flex-end',
-      borderRadius: radius ?? merge.FILE.radius,
+      borderRadius: radius ?? configStyles.FILE.radius,
       display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
-      backgroundColor: hiddenBackgroundColor ?? merge.FILE.colors.backgroundHidden
+      backgroundColor: hiddenBackgroundColor ?? configStyles.FILE.colors.backgroundHidden
     },
     onClick: handleStopPropagation
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1155,15 +1943,15 @@ const File = /*#__PURE__*/forwardRef(({
       cursor: 'pointer'
     },
     onClick: handleRemoveFile
-  }, iconRemoveFile ? iconRemoveFile : merge.FILE.icon.removeFile ? merge.FILE.icon.removeFile : /*#__PURE__*/React__default.createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default.createElement("span", {
+  }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React__default.createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       marginTop: '6px',
       display: 'inline-block',
-      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
+      color: errorColor ?? configStyles.FILE.error.color,
+      fontSize: errorSize ?? configStyles.FILE.error.font.size,
+      fontStyle: errorStyle ?? configStyles.FILE.error.font.style,
+      fontWeight: errorWeight ?? configStyles.FILE.error.font.weight,
+      fontFamily: errorFamily ?? configStyles.FILE.error.font.family
     }
   }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
     return /*#__PURE__*/React__default.createElement(FileItem, {
@@ -1173,35 +1961,35 @@ const File = /*#__PURE__*/forwardRef(({
       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,
+      iconPdf: iconPdf ?? configStyles.FILE.icon.pdf,
+      iconPng: iconPng ?? configStyles.FILE.icon.png,
+      iconJpg: iconJpg ?? configStyles.FILE.icon.jpg,
+      iconJpeg: iconJpeg ?? configStyles.FILE.icon.jpeg,
+      iconHeic: iconHeic ?? configStyles.FILE.icon.heic,
+      iconWrong: iconWrong ?? configStyles.FILE.icon.wrong,
+      iconDelItem: iconDeleteItem ?? configStyles.FILE.icon.deleteItem,
       timeForRemoveError: timeForRemoveError,
       removeFile: removeFile ? removeFile : _ => _,
-      radius: radius ?? merge.FILE.radius,
+      radius: radius ?? configStyles.FILE.radius,
       fileFormat: item.file.type.split('/')[1]?.toLowerCase(),
-      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
+      progressColor: progressColor ?? configStyles.FILE.progress.color,
+      listItemHeight: listItemHeight ?? configStyles.FILE.listItem.height,
+      listItemPadding: listItemPadding ?? configStyles.FILE.listItem.padding,
+      progressFontSize: progressFontSize ?? configStyles.FILE.progress.font.size,
+      progressFontStyle: progressFontStyle ?? configStyles.FILE.progress.font.style,
+      progressFontWeight: progressFontWeight ?? configStyles.FILE.progress.font.weight,
+      progressFontFamily: progressFontFamily ?? configStyles.FILE.progress.font.family,
+      listItemErrorSize: listItemErrorSize ?? configStyles.FILE.listItem.error.font.size,
+      listItemErrorStyle: listItemErrorStyle ?? configStyles.FILE.listItem.error.style,
+      listItemErrorWeight: listItemErrorWeight ?? configStyles.FILE.listItem.error.weight,
+      listItemErrorFamily: listItemErrorFamily ?? configStyles.FILE.listItem.error.family,
+      listItemErrorColor: listItemErrorColor ?? configStyles.FILE.listItem.error.color,
+      progressTrackColor: progressTrackColor ?? configStyles.FILE.progress.colors.track,
+      progressFailedColor: progressFailedColor ?? configStyles.FILE.progress.colors.failed,
+      progressSuccessColor: progressSuccessColor ?? configStyles.FILE.progress.colors.success,
+      progressLoadingColor: progressLoadingColor ?? configStyles.FILE.progress.colors.loading,
+      listItemBackgroundColor: listItemBackgroundColor ?? configStyles.FILE.listItem.colors.background,
+      listItemBackgroundErrorColor: listItemBackgroundErrorColor ?? configStyles.FILE.listItem.colors.backgroundError
     });
   }));
 });
@@ -1390,9 +2178,9 @@ const Checkbox$1 = ({
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
   }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ?? merge.CHECKBOX.checkedColor
+    fillColor: checkedColor ?? configStylesPromise.CHECKBOX.checkedColor
   }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ?? merge.CHECKBOX.unCheckedColor
+    fillColor: unCheckedColor ?? configStylesPromise.CHECKBOX.unCheckedColor
   }), label && /*#__PURE__*/React__default.createElement("span", {
     style: {
       marginLeft: labelMarginLeft
@@ -1417,10 +2205,22 @@ const SingleCheckbox = ({
   ignoreDisabledForChecked
 }) => {
   const [innerData, setInnerData] = useState(null);
+  const [configStyles, setConfigStyles] = useState({});
   useEffect(() => {
     setInnerData(data);
   }, [data]);
-  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.CHECKBOX && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     index: index,
     label: label,
     styles: styles,
@@ -1434,7 +2234,7 @@ const SingleCheckbox = ({
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
     ignoreDisabledForChecked: ignoreDisabledForChecked,
-    labelMarginLeft: labelMarginLeft ?? merge.CHECKBOX.labelMarginLeft
+    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.labelMarginLeft
   });
 };
 SingleCheckbox.propTypes = {
@@ -1918,7 +2718,9 @@ const Table = ({
   const [body, setBody] = useState([]);
   const [header, setHeader] = useState([]);
   const [disableArr, setDisableArr] = useState([]);
+  const [classProps, setClassProps] = useState({});
   const [checkedArray, setCheckedArray] = useState([]);
+  const [configStyles, setConfigStyles] = useState({});
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -2385,18 +3187,30 @@ const Table = ({
       setHeader(() => dataHeader);
     }
   }, [dataHeader, arrowColumn, arrowShow, disableArr]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.TABLE.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.TABLE && /*#__PURE__*/React__default.createElement("table", {
     style: {
       width: '100%',
-      borderCollapse: tableRowItem ?? merge.TABLE.body.row.asItem ? 'separate' : 'collapse',
-      borderSpacing: `0 ${tBodyRowMarginTop ?? merge.TABLE.body.row.marginTop}`
+      borderCollapse: tableRowItem ?? configStyles.TABLE.body.row.asItem ? 'separate' : 'collapse',
+      borderSpacing: `0 ${tBodyRowMarginTop ?? configStyles.TABLE.body.row.marginTop}`
     },
     onClick: handleTableClick,
-    className: className ?? merge.TABLE.className
+    className: classProps
   }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
     style: {
-      color: tHeadColor ?? merge.TABLE.head.color,
-      backgroundColor: tHeadBackgroundColor ?? merge.TABLE.head.colors.background,
+      color: tHeadColor ?? configStyles.TABLE.head.color,
+      backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     }
   }, header.map((item, index) => {
@@ -2407,29 +3221,29 @@ const Table = ({
       handleCheckedHeader: handleCheckedHeader,
       handleHeaderItemClick: handleHeaderItemClick,
       handleCheckArrowActionHeader: handleCheckArrowActionHeader,
-      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
+      tHeadFamily: tHeadFamily ?? configStyles.TABLE.head.font.family,
+      tHeadPadding: tHeadPadding ?? configStyles.TABLE.head.padding,
+      tHeadFontSize: tHeadFontSize ?? configStyles.TABLE.head.font.size,
+      tHeadFontStyle: tHeadFontStyle ?? configStyles.TABLE.head.font.style,
+      tHeadTextAlign: tHeadTextAlign ?? configStyles.TABLE.textAlign,
+      tHeadFontWeight: tHeadFontWeight ?? configStyles.TABLE.head.font.weight,
+      borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.head.radius : '0px',
+      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.head.radius : '0px',
+      tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth
     });
   }))), body && body.length > 0 && /*#__PURE__*/React__default.createElement("tbody", {
     style: {
-      boxShadow: tBodyBoxShadow ?? merge.TABLE.body.box.shadow
+      boxShadow: tBodyBoxShadow ?? configStyles.TABLE.body.box.shadow
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default.createElement("tr", {
       key: `${item}_${index}`,
       style: {
-        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'
+        backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
+        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.body.row.border,
+        borderColor: hideBorder ? 'transparent' : configStyles.TABLE.body.row.borderColor,
+        boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.body.row.box.shadow : 'none'
       }
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default.createElement(TD, {
@@ -2441,32 +3255,32 @@ const Table = ({
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
-        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,
+        openListColor: openListColor ?? configStyles.TABLE.openList.color,
+        tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+        tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth,
+        openListFontSize: openListFontSize ?? configStyles.TABLE.openList.font.size,
+        openListFontStyle: openListFontStyle ?? configStyles.TABLE.openList.font.style,
+        openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
+        openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
         handleCheckedBody: handleCheckedBody,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
-        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,
+        tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
+        rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
+        rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
+        tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
+        tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+        tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
+        tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
+        tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
+        borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
+        borderRightColor: innerIndex === Object.values(item).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         handleCheckArrowAction: handleCheckArrowAction,
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
-  }))));
+  })));
 };
 Table.propTypes = {
   getData: PropTypes.func,
@@ -2661,7 +3475,8 @@ const Modal = ({
   const [select, setSelect] = useState(0);
   const [isHover, setIsHover] = useState(false);
   const [innerData, setInnerData] = useState([]);
-  const classProps = classnames(className ?? merge.MODAL.className);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const handleCloseModal = () => {
     setShow(false);
   };
@@ -2725,15 +3540,25 @@ const Modal = ({
   }, [selected]);
   useEffect(() => {
     document.addEventListener('keydown', handleESC, false);
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.MODAL.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
     return () => {
       setSelect(0);
       setInnerData([]);
       document.removeEventListener('keydown', handleESC, false);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return configStyles.MODAL && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
-    onClick: outsideClose || merge.MODAL.outsideClose ? handleCloseModal : _ => _,
+    onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
     style: {
       top: '0px',
       left: '0px',
@@ -2741,7 +3566,7 @@ const Modal = ({
       width: '100%',
       height: '100vh',
       position: 'fixed',
-      backgroundColor: layerBackgroundColor ?? merge.MODAL.colors.backgroundLayer
+      backgroundColor: layerBackgroundColor ?? configStyles.MODAL.colors.backgroundLayer
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -2749,8 +3574,8 @@ const Modal = ({
       display: 'flex',
       width: '100%',
       height: '100vh',
-      alignItems: alignItems ?? merge.MODAL.alignItems,
-      justifyContent: justifyContent ?? merge.MODAL.justifyContent
+      alignItems: alignItems ?? configStyles.MODAL.alignItems,
+      justifyContent: justifyContent ?? configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8['animation__modal']}`,
@@ -2759,16 +3584,16 @@ const Modal = ({
       position: 'relative',
       boxSizing: 'border-box',
       display: type === 'content' ? 'grid' : 'block',
-      width: width ?? merge.MODAL.width,
+      width: width ?? configStyles.MODAL.width,
       overflow: type === 'content' ? 'auto' : 'hidden',
-      height: height ?? merge.MODAL.height,
+      height: height ?? configStyles.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
-      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 : ''
+      borderRadius: radius ?? configStyles.MODAL.radius,
+      maxWidth: mMaxWidth ?? configStyles.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? configStyles.MODAL.maxHeight,
+      minWidth: type === 'content' ? minWidth ?? configStyles.MODAL.minWidth : '',
+      backgroundColor: backgroundColor ?? configStyles.MODAL.colors.background,
+      minHeight: type === 'content' ? minHeight ?? configStyles.MODAL.minHeight : ''
     }
   }, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -2777,10 +3602,10 @@ const Modal = ({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      padding: padding ?? merge.MODAL.padding,
-      height: headerHeight ?? merge.MODAL.header.height,
+      padding: padding ?? configStyles.MODAL.padding,
+      height: headerHeight ?? configStyles.MODAL.header.height,
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
-      backgroundColor: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
+      backgroundColor: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
     style: {
@@ -2789,11 +3614,11 @@ const Modal = ({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
-      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
+      color: headerColor ?? configStyles.MODAL.header.color,
+      fontSize: headerSize ?? configStyles.MODAL.header.font.size,
+      fontStyle: headerStyle ?? configStyles.MODAL.header.font.style,
+      fontFamily: headerFamily ?? configStyles.MODAL.header.font.family,
+      fontWeight: headerWeight ?? configStyles.MODAL.header.font.weight
     }
   }, headerText), /*#__PURE__*/React__default.createElement("div", {
     onClick: handleCloseModal,
@@ -2802,7 +3627,7 @@ const Modal = ({
       height: '14px',
       cursor: 'pointer'
     }
-  }, closeIcon ? closeIcon : merge.MODAL.icon.close ? merge.MODAL.icon.close : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
+  }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       width: '100%',
@@ -2812,9 +3637,9 @@ const Modal = ({
       boxSizing: 'border-box',
       justifyContent: 'center',
       overflow: type === 'content' ? 'auto' : 'hidden',
-      borderWidth: borderWidth ?? merge.MODAL.border.width,
-      borderStyle: borderStyle ?? merge.MODAL.border.style,
-      borderColor: borderColor ?? merge.MODAL.border.color
+      borderWidth: borderWidth ?? configStyles.MODAL.border.width,
+      borderStyle: borderStyle ?? configStyles.MODAL.border.style,
+      borderColor: borderColor ?? configStyles.MODAL.border.color
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -2826,8 +3651,8 @@ const Modal = ({
       width: '100%',
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
-      height: grayDecorHeight ?? merge.MODAL.grayDecorHeight,
-      background: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
+      height: grayDecorHeight ?? configStyles.MODAL.grayDecorHeight,
+      background: closeAreaBackgroundColor ?? configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: handleCloseModal,
@@ -2844,9 +3669,9 @@ const Modal = ({
       cursor: 'pointer',
       backgroundColor: 'transparent'
     }
-  }, closeSlideIcon ? closeSlideIcon : merge.MODAL.icon.closeSlide ? merge.MODAL.icon.closeSlide : /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
+  }, closeSlideIcon ? closeSlideIcon : configStyles.MODAL.icon.closeSlide ? configStyles.MODAL.icon.closeSlide : /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      height: imageWrapHeight ?? merge.MODAL.image.wrapHeight
+      height: imageWrapHeight ?? configStyles.MODAL.image.wrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
@@ -2859,10 +3684,10 @@ const Modal = ({
           style: {
             display: 'block',
             objectFit: 'contain',
-            margin: imageMargin ?? merge.MODAL.image.margin,
-            borderRadius: radius ?? merge.MODAL.radius,
-            width: imageWidth ?? merge.MODAL.image.width,
-            height: imageHeight ?? merge.MODAL.image.height
+            margin: imageMargin ?? configStyles.MODAL.image.margin,
+            borderRadius: radius ?? configStyles.MODAL.radius,
+            width: imageWidth ?? configStyles.MODAL.image.width,
+            height: imageHeight ?? configStyles.MODAL.image.height
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default.createElement("div", {
@@ -2883,7 +3708,7 @@ const Modal = ({
             justifyContent: 'center'
           },
           onClick: () => handleOpenInNewTab(item.url)
-        }, zoomIcon ? zoomIcon : merge.MODAL.icon.zoom ? merge.MODAL.icon.zoom : /*#__PURE__*/React__default.createElement(SvgZoom, null)) : '');
+        }, zoomIcon ? zoomIcon : configStyles.MODAL.icon.zoom ? configStyles.MODAL.icon.zoom : /*#__PURE__*/React__default.createElement(SvgZoom, null)) : '');
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
@@ -2900,7 +3725,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, prevIcon ? prevIcon : merge.MODAL.icon.prev ? merge.MODAL.icon.prev : /*#__PURE__*/React__default.createElement(SvgPrev, null)), /*#__PURE__*/React__default.createElement("button", {
+  }, prevIcon ? prevIcon : configStyles.MODAL.icon.prev ? configStyles.MODAL.icon.prev : /*#__PURE__*/React__default.createElement(SvgPrev, null)), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
@@ -2914,7 +3739,7 @@ const Modal = ({
       top: 'calc(50% - 12px)',
       backgroundColor: 'transparent'
     }
-  }, nextIcon ? nextIcon : merge.MODAL.icon.next ? merge.MODAL.icon.next : /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
+  }, nextIcon ? nextIcon : configStyles.MODAL.icon.next ? configStyles.MODAL.icon.next : /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
 };
 Modal.propTypes = {
   data: PropTypes.array,
@@ -3323,27 +4148,28 @@ const Input = ({
 }) => {
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
-  const inpStyles = {
-    width: width ?? merge.INPUT.width,
+  const inpStyles = configStyles.INPUT && {
+    width: width ?? configStyles.INPUT.width,
     cursor: disabled ? 'not-allowed' : 'auto',
-    height: height ?? merge.INPUT.height,
-    padding: padding ?? merge.INPUT.padding,
-    fontSize: size ?? merge.INPUT.font.size,
-    fontStyle: style ?? merge.INPUT.font.style,
-    fontWeight: weight ?? merge.INPUT.font.weight,
-    fontFamily: family ?? merge.INPUT.font.family,
-    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
+    height: height ?? configStyles.INPUT.height,
+    padding: padding ?? configStyles.INPUT.padding,
+    fontSize: size ?? configStyles.INPUT.font.size,
+    fontStyle: style ?? configStyles.INPUT.font.style,
+    fontWeight: weight ?? configStyles.INPUT.font.weight,
+    fontFamily: family ?? configStyles.INPUT.font.family,
+    boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+    backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
   };
   const uuid = v4();
-  const inpAttributes = {
+  const inpAttributes = configStyles.INPUT && {
     placeholder: placeholder ?? '',
     iName: name ? name : `tui_${uuid}_tui`,
-    autoComplete: autoComplete ?? merge.INPUT.autoComplete
+    autoComplete: autoComplete ?? configStyles.INPUT.autoComplete
   };
-  const classProps = classnames(className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -3376,25 +4202,37 @@ const Input = ({
       !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
   }, [type, regexp, errorMessage, regexpErrorMessage]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.INPUT && /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
-      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
+      color: labelColor ?? configStyles.INPUT.label.color,
+      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
+      display: labelDisplay ?? configStyles.INPUT.label.display,
+      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['input-content']}`,
     style: {
-      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
+      width: width ?? configStyles.INPUT.width,
+      borderRadius: radius ?? configStyles.INPUT.radius,
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.error.color}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.box.shadowHover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -3405,13 +4243,13 @@ const Input = ({
       alignItems: 'center',
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
-      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
+      height: height ?? configStyles.INPUT.height,
+      padding: padding ?? configStyles.INPUT.padding,
+      width: iconWidth ?? configStyles.INPUT.iconWidth,
+      boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
+      borderTopLeftRadius: radius ?? configStyles.INPUT.radius,
+      borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement(TelInput, {
     type: type,
@@ -3421,14 +4259,14 @@ const Input = ({
     disabled: disabled,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
-    radius: radius ?? merge.INPUT.radius,
-    phoneDisplay: phoneDisplay ?? merge.INPUT.tel.display,
-    phoneAlignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
-    phoneJustifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
-    telBorderRightWidth: telBorderRightWidth ?? merge.INPUT.tel.borderRight.width,
-    telBorderRightStyle: telBorderRightStyle ?? merge.INPUT.tel.borderRight.style,
-    telBorderRightColor: telBorderRightColor ?? merge.INPUT.tel.borderRight.color,
-    telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
+    radius: radius ?? configStyles.INPUT.radius,
+    phoneDisplay: phoneDisplay ?? configStyles.INPUT.tel.display,
+    phoneAlignItems: phoneAlignItems ?? configStyles.INPUT.tel.alignItems,
+    phoneJustifyContent: phoneJustifyContent ?? configStyles.INPUT.tel.justifyContent,
+    telBorderRightWidth: telBorderRightWidth ?? configStyles.INPUT.tel.borderRight.width,
+    telBorderRightStyle: telBorderRightStyle ?? configStyles.INPUT.tel.borderRight.style,
+    telBorderRightColor: telBorderRightColor ?? configStyles.INPUT.tel.borderRight.color,
+    telBorderRightColorHover: telBorderRightColorHover ?? configStyles.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
     value: value,
     dots: withoutDot,
@@ -3440,7 +4278,7 @@ const Input = ({
     inpAttributes: inpAttributes,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
-    radius: radius ?? merge.INPUT.radius
+    radius: radius ?? configStyles.INPUT.radius
   }) : type === 'password' ? /*#__PURE__*/React__default.createElement(PassInput, {
     show: show,
     type: type,
@@ -3450,7 +4288,7 @@ const Input = ({
     maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
-    radius: radius ?? merge.INPUT.radius
+    radius: radius ?? configStyles.INPUT.radius
   }) : /*#__PURE__*/React__default.createElement(TextInput, {
     value: value,
     disabled: disabled,
@@ -3458,7 +4296,7 @@ const Input = ({
     inpStyles: inpStyles,
     maxLength: maxLength,
     inpAttributes: inpAttributes,
-    radius: radius ?? merge.INPUT.radius
+    radius: radius ?? configStyles.INPUT.radius
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
@@ -3466,32 +4304,32 @@ const Input = ({
       alignItems: 'center',
       justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
-      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
+      height: height ?? configStyles.INPUT.height,
+      padding: padding ?? configStyles.INPUT.padding,
+      width: iconWidth ?? configStyles.INPUT.iconWidth,
+      boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
+      borderTopRightRadius: radius ?? configStyles.INPUT.radius,
+      borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
     animation: animation,
     style: {
       margin: '0px',
       position: 'absolute',
-      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})`,
+      width: width ?? configStyles.INPUT.width,
+      left: errorLeft ?? configStyles.INPUT.error.left,
+      color: errorColor ?? configStyles.INPUT.error.color,
+      fontSize: errorSize ?? configStyles.INPUT.error.font.size,
+      fontStyle: errorStyle ?? configStyles.INPUT.error.font.style,
+      fontFamily: errorFamily ?? configStyles.INPUT.error.font.family,
+      fontWeight: errorWeight ?? configStyles.INPUT.error.font.weight,
+      zIndex: errorZindex ?? configStyles.INPUT.error.zIndex,
+      lineHeight: errorLineHeight ?? configStyles.INPUT.error.lineHeight,
+      top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${configStyles.INPUT.error.marginTop})`,
       transform: 'scale3d(1,1,1)'
     },
-    className: errorClassName ?? merge.INPUT.error.className
+    className: errorClassName ?? configStyles.INPUT.error.className
   }, innerErrorMessage) : '');
 };
 Input.propTypes = {
@@ -3586,8 +4424,9 @@ const Radio = ({
   radioItemMarginBottom,
   diraction = 'vertical'
 }) => {
-  const classProps = classnames(className ?? merge.RADIO.className);
   const [innerData, setInnerData] = useState([]);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [radioInnerSize, setRadioInnerSize] = useState('');
   const [radioInnerFormat, setRadioInnerFormat] = useState('');
   const [innerSelectedData, setInnerSelectedData] = useState({});
@@ -3598,11 +4437,11 @@ const Radio = ({
   });
   const handleMouseEnter = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
-    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : borderColor ? borderColor : merge.RADIO.border.color;
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color;
   };
   const handleMouseLeave = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
-    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : 'transparent';
+    elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : 'transparent';
   };
   const handleChecked = selItem => {
     setInnerSelectedData(selItem);
@@ -3618,7 +4457,7 @@ const Radio = ({
   useEffect(() => {
     let radioSize = '';
     let radioSizeFormat = '';
-    const checkSize = size || merge.RADIO.size;
+    const checkSize = configStyles.RADIO && (size || configStyles.RADIO.size);
     if (checkSize && typeof checkSize === 'string') {
       if (checkSize.length > 0) {
         checkSize.split('').map(item => {
@@ -3635,7 +4474,7 @@ const Radio = ({
     }
     setRadioInnerFormat(radioSizeFormat);
     setRadioInnerSize(`${parseInt(radioSize) / 2}`);
-  }, [size, merge.RADIO.size]);
+  }, [size, configStyles.RADIO]);
   useEffect(() => {
     if (typeof selected === 'object' && selected !== null && !Array.isArray(selected)) {
       setInnerSelectedData(selected);
@@ -3650,7 +4489,19 @@ const Radio = ({
       });
     }
   }, [keyNames]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.RADIO.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.RADIO && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
     style: {
       display: 'flex',
@@ -3665,8 +4516,8 @@ const Radio = ({
         cursor: item[innerKeyNames.disabled] ? 'not-allowed' : 'pointer',
         width: 'fit-content',
         alignItems: 'center',
-        marginRight: diraction === 'horizontal' ? radioItemMarginRight ? radioItemMarginRight : merge.RADIO.item.marginRight : '0px',
-        marginBottom: diraction === 'vertical' ? radioItemMarginBottom ? radioItemMarginBottom : merge.RADIO.item.marginBottom : '0px'
+        marginRight: diraction === 'horizontal' ? radioItemMarginRight ? radioItemMarginRight : configStyles.RADIO.item.marginRight : '0px',
+        marginBottom: diraction === 'vertical' ? radioItemMarginBottom ? radioItemMarginBottom : configStyles.RADIO.item.marginBottom : '0px'
       },
       onClick: item[innerKeyNames.disabled] ? _ => _ : () => handleChecked(item),
       onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
@@ -3677,11 +4528,11 @@ const Radio = ({
         alignItems: 'center',
         borderRadius: '100%',
         justifyContent: 'center',
-        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
+        width: size ? size : configStyles.RADIO.size,
+        height: size ? size : configStyles.RADIO.size,
+        marginRight: item[innerKeyNames.label] ? radioMarginRight ? radioMarginRight : configStyles.RADIO.marginRight : '0px',
+        border: `${borderSize ?? configStyles.RADIO.border.width} ${borderStyle ? borderStyle : configStyles.RADIO.border.style}`,
+        borderColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color
       }
     }, /*#__PURE__*/React__default.createElement("div", {
       id: elemId,
@@ -3689,16 +4540,16 @@ const Radio = ({
         borderRadius: '100%',
         width: radioInnerSize + radioInnerFormat,
         height: radioInnerSize + radioInnerFormat,
-        backgroundColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : merge.RADIO.border.activeColor : 'transparent'
+        backgroundColor: item[innerKeyNames.id] === innerSelectedData.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : 'transparent'
       }
     })), item[innerKeyNames.label] ? /*#__PURE__*/React__default.createElement("span", {
       style: {
-        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
+        color: labelColor ?? configStyles.RADIO.label.color,
+        fontSize: labelFontSize ?? configStyles.RADIO.label.font.size,
+        fontStyle: labelFontStyle ?? configStyles.RADIO.label.font.style,
+        fontFamily: labelFontFamily ?? configStyles.RADIO.label.font.family,
+        fontWeight: labelFontWeight ?? configStyles.RADIO.label.font.weight,
+        lineHeight: labelLineHeight ?? configStyles.RADIO.label.lineHeight
       },
       onMouseEnter: () => handleMouseEnter(item[innerKeyNames.id], elemId),
       onMouseLeave: () => handleMouseLeave(item[innerKeyNames.id], elemId)
@@ -3818,11 +4669,12 @@ const Select = ({
   boxShadowHover
 }) => {
   const ref = useRef();
-  const classProps = classnames(className ? className : merge.SELECT.className);
   const [opened, setOpened] = useState(false);
   const [isHover, setIsHover] = useState(false);
+  const [classProps, setClassProps] = useState({});
   const [newSelected, setNewSelected] = useState([]);
   const [existOptions, setExistOptions] = useState([]);
+  const [configStyles, setConfigStyles] = useState({});
   const handleOpenClose = () => {
     setOpened(!opened);
   };
@@ -3871,12 +4723,12 @@ const Select = ({
     setIsHover(false);
   };
   const handleMouseEnterOption = e => {
-    e.target.style.color = optionItemColorHover ? optionItemColorHover : merge.SELECT.options.item.colors.hover;
-    e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : merge.SELECT.options.item.colors.backgroudHover;
+    e.target.style.color = optionItemColorHover ? optionItemColorHover : configStyles.SELECT.options.item.colors.hover;
+    e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : configStyles.SELECT.options.item.colors.backgroudHover;
   };
   const handleMouseLeaveOption = e => {
-    e.target.style.color = optionItemColor ? optionItemColor : merge.SELECT.options.item.color;
-    e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : merge.SELECT.options.item.colors.backgroud;
+    e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.options.item.color;
+    e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.options.item.colors.backgroud;
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
@@ -3924,7 +4776,19 @@ const Select = ({
       setExistOptions(modifiedOptions);
     }
   }, [options, multiple, selected, selected?.length]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.SELECT.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.SELECT && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
     style: {
       position: 'relative',
@@ -3932,15 +4796,15 @@ const Select = ({
     }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
-      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
+      color: labelColor ?? configStyles.SELECT.label.color,
+      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      display: labelDisplay ?? configStyles.SELECT.label.display,
+      fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
+      fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
+      lineHeight: labelLineHeight ?? configStyles.SELECT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? configStyles.SELECT.label.marginBottom,
+      textTransform: labelTextTransform ?? configStyles.SELECT.label.textTransform
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: ref
@@ -3948,19 +4812,19 @@ const Select = ({
     className: styles$6['select-content']
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
-      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
+      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.selected.cursor,
+      minHeight: selectedMinHeight ?? configStyles.SELECT.selected.minHeight,
+      padding: selectedPadding ?? configStyles.SELECT.selected.padding,
+      borderRadius: selectedRadius ?? configStyles.SELECT.selected.radius,
+      fontSize: selectedFontSize ?? configStyles.SELECT.selected.font.size,
+      fontStyle: selectedFontStyle ?? configStyles.SELECT.selected.font.style,
+      fontFamily: selectedFontFamily ?? configStyles.SELECT.selected.font.family,
+      boxSizing: selectedBoxSizing ?? configStyles.SELECT.selected.box.sizing,
+      fontWeight: selectedFontWeight ?? configStyles.SELECT.selected.font.weight,
+      lineHeight: selectedLineHeight ?? configStyles.SELECT.selected.lineHeight,
+      transition: selectedTransition ?? configStyles.SELECT.selected.transition,
+      backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selected.colors.backgroundDisable : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selected.colors.background,
+      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.SELECT.error.box.shadow : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.box.shadowHover : boxShadow ? boxShadow : configStyles.SELECT.box.shadow
     },
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
@@ -3972,7 +4836,7 @@ const Select = ({
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      color: errorMessage ? errorColor ? errorColor : merge.SELECT.error.color : isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.SELECT.selected.color
+      color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.error.color : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -3984,23 +4848,23 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$6['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : merge.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$6['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : merge.SELECT.closeIcon ? merge.SELECT.closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
+  }, closeIcon ? closeIcon : configStyles.SELECT.closeIcon ? configStyles.SELECT.closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : merge.SELECT.arrowIcon ? merge.SELECT.arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
+  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
-      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'
+      boxShadow: optionsBoxShadow ?? configStyles.SELECT.options.box.shadow,
+      borderRadius: optionsBorderRadius ?? configStyles.SELECT.options.radius,
+      backgroundColor: optionsBackgroundColor ?? configStyles.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' : configStyles.SELECT.selected.minHeight.includes('rem') ? parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -4013,19 +4877,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 || merge.SELECT.dots ? styles$6['ellipsis'] : ''}`,
+      className: `${styles$6['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$6['ellipsis'] : ''}`,
       style: {
-        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
+        overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
+        color: optionItemColor ?? configStyles.SELECT.options.item.color,
+        cursor: optionItemCursor ?? configStyles.SELECT.options.item.cursor,
+        padding: optionItemPadding ?? configStyles.SELECT.options.item.padding,
+        fontSize: optionItemFontSize ?? configStyles.SELECT.options.item.font.size,
+        boxSizing: optionItemBoxSizing ?? configStyles.SELECT.options.item.box.sizing,
+        minHeight: optionItemMinHeight ?? configStyles.SELECT.options.item.minHeight,
+        fontWeight: optionItemFontWeight ?? configStyles.SELECT.options.item.font.weight,
+        lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.options.item.lineHeight,
+        marginBottom: optionItemMarginBottom ?? configStyles.SELECT.options.item.marginBottom,
+        backgroundColor: optionItemBackgroudColor ?? configStyles.SELECT.options.item.colors.backgroud
       }
     }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
       checked: option.checked
@@ -4033,13 +4897,13 @@ const Select = ({
   }))) : null)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
-      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})`
+      color: errorColor ?? configStyles.SELECT.error.color,
+      fontSize: errorSize ?? configStyles.SELECT.error.font.size,
+      fontStyle: errorStyle ?? configStyles.SELECT.error.font.style,
+      fontFamily: errorFamily ?? configStyles.SELECT.error.font.family,
+      fontWeight: errorWeight ?? configStyles.SELECT.error.font.weight,
+      zIndex: errorZindex ?? configStyles.SELECT.error.zIndex,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.SELECT.error.marginTop})`
     }
   }, errorMessage) : '');
 };
@@ -4411,11 +5275,10 @@ const createToast = ({
 };
 const toast = {
   success: (title, props) => {
+    // const { icon, timer, position, iconClose, description } = props || {}
     const {
-      icon,
       timer,
       position,
-      iconClose,
       description
     } = props || {};
     createToast({
@@ -4423,17 +5286,16 @@ const toast = {
       type: 'success',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? '',
-      icon: icon ?? merge.TOASTER.icon.success,
-      iconClose: iconClose ?? merge.TOASTER.icon.close
+      description: description ?? ''
+      // icon: icon ?? configStyles.TOASTER.icon.success,
+      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
     });
   },
   info: (title, props) => {
+    // const { icon, timer, position, iconClose, description } = props || {}
     const {
-      icon,
       timer,
       position,
-      iconClose,
       description
     } = props || {};
     createToast({
@@ -4441,17 +5303,16 @@ const toast = {
       type: 'info',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? '',
-      icon: icon ?? merge.TOASTER.icon.info,
-      iconClose: iconClose ?? merge.TOASTER.icon.close
+      description: description ?? ''
+      // icon: icon ?? configStyles.TOASTER.icon.info,
+      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
     });
   },
   warn: (title, props) => {
+    // const { icon, timer, position, iconClose, description } = props || {}
     const {
-      icon,
       timer,
       position,
-      iconClose,
       description
     } = props || {};
     createToast({
@@ -4459,17 +5320,16 @@ const toast = {
       type: 'warn',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? '',
-      icon: icon ?? merge.TOASTER.icon.warn,
-      iconClose: iconClose ?? merge.TOASTER.icon.close
+      description: description ?? ''
+      // icon: icon ?? configStyles.TOASTER.icon.warn,
+      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
     });
   },
   error: (title, props) => {
+    // const { icon, timer, position, iconClose, description } = props || {}
     const {
-      icon,
       timer,
       position,
-      iconClose,
       description
     } = props || {};
     createToast({
@@ -4477,16 +5337,17 @@ const toast = {
       type: 'error',
       timer: timer ?? 5000,
       position: position ?? 'top-right',
-      description: description ?? '',
-      icon: icon ?? merge.TOASTER.icon.error,
-      iconClose: iconClose ?? merge.TOASTER.icon.close
+      description: description ?? ''
+      // icon: icon ?? configStyles.TOASTER.icon.error,
+      // iconClose: iconClose ?? configStyles.TOASTER.icon.close,
     });
   }
 };
 const Toaster = ({
   className
 }) => {
-  const classProps = classnames(className ?? merge.TOASTER.className);
+  const [classProps, setClassProps] = useState('');
+  const [configStyles, setConfigStyles] = useState({});
   window.addEventListener('popstate', () => {
     if (path !== window.location.href) {
       if (!toastify) {
@@ -4501,7 +5362,19 @@ const Toaster = ({
   const handleToasterClick = e => {
     e.stopPropagation();
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.TOASTER.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.TOASTER && /*#__PURE__*/React__default.createElement("div", {
     onClick: handleToasterClick,
     className: classProps,
     id: "toastify"
@@ -4550,10 +5423,11 @@ const Tooltip = ({
   type = 'top'
 }) => {
   const tooltipRef = /*#__PURE__*/createRef(null);
-  const classProps = classnames(styles$4['tooltip-block'], className ?? merge.TOOLTIP.className);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
+  const [showTooltip, setShowTooltip] = useState(false);
   const [checkTooltipWidth, setCheckTooltipWidth] = useState(0);
   const [checkTooltipHeight, setCheckTooltipHeight] = useState(0);
-  const [showTooltip, setShowTooltip] = useState(false);
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
@@ -4564,21 +5438,33 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setCheckTooltipWidth(tooltipRef.current.clientWidth);
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(styles$4['tooltip-block'], className ?? data.TOOLTIP.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.TOOLTIP && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
     style: {
-      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
+      width: width ?? configStyles.TOOLTIP.parent.width,
+      height: height ?? configStyles.TOOLTIP.parent.height,
+      borderRadius: radius ?? configStyles.TOOLTIP.parent.radius,
+      backgroundColor: backgroundColor ?? configStyles.TOOLTIP.parent.colors.background
     }
   }, showTooltip ? /*#__PURE__*/React__default.createElement("div", {
     ref: tooltipRef,
     className: `${styles$4['tooltip']}`,
     style: {
-      width: tooltipWidth ?? merge.TOOLTIP.width,
-      borderRadius: tooltipRadius ?? merge.TOOLTIP.radius,
-      backgroundColor: tooltipBackgroundColor ?? merge.TOOLTIP.colors.background,
+      width: tooltipWidth ?? configStyles.TOOLTIP.width,
+      borderRadius: tooltipRadius ?? configStyles.TOOLTIP.radius,
+      backgroundColor: tooltipBackgroundColor ?? configStyles.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'
     }
@@ -4587,24 +5473,24 @@ const Tooltip = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-decor']}`,
     style: {
-      backgroundColor: tooltipBackgroundColor ?? merge.TOOLTIP.colors.background,
+      backgroundColor: tooltipBackgroundColor ?? configStyles.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.createElement("p", {
     style: {
-      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
+      color: color ?? configStyles.TOOLTIP.color,
+      fontSize: fontSize ?? configStyles.TOOLTIP.font.size,
+      fontStyle: fontStyle ?? configStyles.TOOLTIP.font.style,
+      fontFamily: fontFamily ?? configStyles.TOOLTIP.font.family,
+      fontWeight: fontWeight ?? configStyles.TOOLTIP.font.weight
     }
   }, text))) : '', /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon ? tooltipIcon : merge.TOOLTIP.icon ? merge.TOOLTIP.icon : /*#__PURE__*/React__default.createElement(SvgTooltip, null)));
+  }, tooltipIcon ? tooltipIcon : configStyles.TOOLTIP.icon ? configStyles.TOOLTIP.icon : /*#__PURE__*/React__default.createElement(SvgTooltip, null)));
 };
 Tooltip.propTypes = {
   type: PropTypes.string,
@@ -4680,7 +5566,8 @@ const Captcha = ({
 }) => {
   const [rangeNumber, setRangeNumber] = useState(0);
   const [rangeProgress, setRangeProgress] = useState(0);
-  const classProps = classnames(className ?? merge.CAPTCHA.className);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const handleRange = e => {
     const value = e.target.value;
     getRange(value);
@@ -4702,15 +5589,27 @@ const Captcha = ({
       setRangeNumber(Math.min(roundedRange, 100));
     }
   }, [range, getRange]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.CAPTCHA.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.CAPTCHA && /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label && /*#__PURE__*/React__default.createElement("p", {
     style: {
-      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
+      color: color ?? configStyles.CAPTCHA.label.color,
+      fontSize: fontSize ?? configStyles.CAPTCHA.label.font.size,
+      fontStyle: fontStyle ?? configStyles.CAPTCHA.label.font.style,
+      fontFamily: fontFamily ?? configStyles.CAPTCHA.label.font.family,
+      fontWeight: fontWeight ?? configStyles.CAPTCHA.label.font.weight
     }
   }, label), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -4803,8 +5702,22 @@ const Stepper = ({
   activeSteps,
   className
 }) => {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(className ?? merge.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`)
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.STEPPER && /*#__PURE__*/React__default.createElement("div", {
+    className: classProps
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
@@ -4842,7 +5755,8 @@ const Checkbox = ({
   checkBoxMarginBottom,
   direction = 'vertical'
 }) => {
-  const classProps = classnames(className ?? merge.CHECKBOX.className);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [innerData, setInnerData] = useState([]);
   const [innerKeyNames, setInnerKeyNames] = useState({
     id: 'id',
@@ -4883,7 +5797,19 @@ const Checkbox = ({
       });
     }
   }, [keyNames]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.CHECKBOX.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.CHECKBOX && /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
       display: 'flex',
@@ -4895,7 +5821,7 @@ const Checkbox = ({
       key: `TUI_${index}_checkbox`,
       style: {
         width: 'fit-content',
-        marginBottom: direction === 'vertical' ? checkBoxMarginBottom ?? merge.CHECKBOX.marginBottom : '0px'
+        marginBottom: direction === 'vertical' ? checkBoxMarginBottom ?? configStyles.CHECKBOX.marginBottom : '0px'
       }
     }, /*#__PURE__*/React__default.createElement(SingleCheckbox, {
       data: item,
@@ -4905,11 +5831,11 @@ const Checkbox = ({
       checked: item[innerKeyNames.checked],
       disabled: item[innerKeyNames.disabled],
       ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
-      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
+      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft,
+      checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+      unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
+      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
+      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon
     }));
   }));
 };
@@ -4976,11 +5902,12 @@ const Textarea = ({
   showCharacterCount,
   characterCountPosition = 'top'
 }) => {
-  const classProps = classnames(className ?? merge.TEXTAREA.className);
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -5002,8 +5929,8 @@ const Textarea = ({
         onChange(value.substr(0, maxLength));
       }
     } else {
-      if (value.length > merge.TEXTAREA.maxLength) {
-        onChange(value.substr(0, merge.TEXTAREA.maxLength));
+      if (value.length > configStyles.TEXTAREA.maxLength) {
+        onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
       }
     }
   };
@@ -5023,9 +5950,21 @@ const Textarea = ({
     }
     setInnerValue(() => value);
   }, [value, errorMessage]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.TEXTAREA.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.TEXTAREA && /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: width ?? merge.TEXTAREA.width
+      width: width ?? configStyles.TEXTAREA.width
     },
     className: classProps
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -5033,15 +5972,15 @@ const Textarea = ({
       display: 'flex',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
-      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
+      color: labelColor ?? configStyles.TEXTAREA.label.color,
+      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
+      fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
+      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
-      display: labelDisplay ?? merge.TEXTAREA.label.display
+      display: labelDisplay ?? configStyles.TEXTAREA.label.display
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", null, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
     style: {
@@ -5050,21 +5989,21 @@ const Textarea = ({
       outline: 'none',
       overflow: 'auto',
       cursor: disabled ? 'not-allowed' : 'auto',
-      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
+      fontSize: size ?? configStyles.TEXTAREA.font.size,
+      fontStyle: style ?? configStyles.TEXTAREA.font.style,
+      fontFamily: family ?? configStyles.TEXTAREA.font.family,
+      fontWeight: weight ?? configStyles.TEXTAREA.font.weight,
+      height: height ?? configStyles.TEXTAREA.height,
+      padding: padding ?? configStyles.TEXTAREA.padding,
+      borderRadius: radius ?? configStyles.TEXTAREA.radius,
+      minWidth: minWidth ?? configStyles.TEXTAREA.minWidth,
+      maxWidth: maxWidth ?? configStyles.TEXTAREA.maxWidth,
+      minHeight: minHeight ?? configStyles.TEXTAREA.minHeight,
+      maxHeight: maxHeight ?? configStyles.TEXTAREA.maxHeight,
+      boxSizing: boxSizing ?? configStyles.TEXTAREA.box.sizing,
+      backgroundColor: backgroundColor ?? configStyles.TEXTAREA.colors.background,
+      boxShadow: error ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.TEXTAREA.error.box.shadow : isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : configStyles.TEXTAREA.box.colors.focus : isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : configStyles.TEXTAREA.box.colors.hover : boxShadow ? boxShadow : configStyles.INPUT.box.shadow,
+      resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     value: innerValue,
     disabled: disabled,
@@ -5080,26 +6019,26 @@ const Textarea = ({
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     style: {
-      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
+      color: labelColor ?? configStyles.TEXTAREA.label.color,
+      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
+      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family
     }
   }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       clear: 'both',
       wordBreak: 'break-all',
-      maxWidth: width ?? merge.TEXTAREA.width
+      maxWidth: width ?? configStyles.TEXTAREA.width
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'inline-block',
-      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
+      color: errorColor ?? configStyles.TEXTAREA.error.color,
+      fontSize: errorSize ?? configStyles.TEXTAREA.error.font.size,
+      fontStyle: errorStyle ?? configStyles.TEXTAREA.error.font.style,
+      fontWeight: errorWeight ?? configStyles.TEXTAREA.error.font.weight,
+      fontFamily: errorFamily ?? configStyles.TEXTAREA.error.font.family,
+      marginTop: marginTop ?? configStyles.TEXTAREA.error.marginTop
     }
   }, error)) : '');
 };
@@ -5179,8 +6118,9 @@ const Typography = ({
   variant = 'p',
   ...props
 }) => {
-  const classProps = classnames(className ?? merge.TYPOGRAPHY.className);
   const [isHover, setIsHover] = useState(false);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [validVariant, setValidVariant] = useState(false);
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -5188,22 +6128,22 @@ const Typography = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const tagT = /*#__PURE__*/React__default.createElement(variant, {
+  const tagT = configStyles.TYPOGRAPHY && /*#__PURE__*/React__default.createElement(variant, {
     style: {
-      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]
+      border: border ?? configStyles.TYPOGRAPHY.border,
+      cursor: cursor ?? configStyles.TYPOGRAPHY.cursor,
+      borderRadius: radius ?? configStyles.TYPOGRAPHY.radius,
+      fontSize: size ?? configStyles.TYPOGRAPHY.font['size' + variant],
+      fontWeight: weight ?? configStyles.TYPOGRAPHY.font['weight' + variant],
+      textShadow: textShadow ?? configStyles.TYPOGRAPHY.text['shadow' + variant],
+      textAlign: textAlign ?? configStyles.TYPOGRAPHY.text['align' + variant],
+      fontStyle: fontStyle ?? configStyles.TYPOGRAPHY.font['style' + variant],
+      lineHeight: lineHeight ?? configStyles.TYPOGRAPHY.text['lineHeight' + variant],
+      fontFamily: fontFamily ?? configStyles.TYPOGRAPHY.font['family' + variant],
+      textTransform: textTransform ?? configStyles.TYPOGRAPHY.text['transform' + variant],
+      textDecoration: textDecoration ?? configStyles.TYPOGRAPHY.text['decoration' + variant],
+      backgroundColor: backgroundColor ?? configStyles.TYPOGRAPHY.colors['background' + variant],
+      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY.colors[variant] : color ? color : configStyles.TYPOGRAPHY.colors[variant]
     },
     ...props,
     className: classProps,
@@ -5216,6 +6156,18 @@ const Typography = ({
       setValidVariant(true);
     }
   }, [variant]);
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.TYPOGRAPHY.className));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
@@ -5239,10 +6191,6 @@ Typography.propTypes = {
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
-var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
-var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
-styleInject(css_248z$1);
-
 const Dots = '...';
 const range = (start, end) => {
   const length = end - start + 1;
@@ -5284,6 +6232,10 @@ const PaginationRange = ({
   return paginationRange;
 };
 
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
+var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
+styleInject(css_248z$1);
+
 const SvgDots = ({
   title,
   titleId,
@@ -5332,6 +6284,8 @@ const Pagination = ({
 }) => {
   const [inpVal, setInpVal] = useState('');
   const [error, setError] = useState(false);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
@@ -5356,9 +6310,6 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
-  const classProps = classnames(
-  // TODO: check and remove pagination-bar-rem class
-  styles$1.list, className ?? merge.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -5406,7 +6357,21 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(
+      // TODO: check and remove pagination-bar-rem class
+      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.PAGINATION && /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       margin: '0 auto',
@@ -5582,14 +6547,15 @@ const Autocomplete = ({
   const [innerError, setInnerError] = useState('');
   const [innerValue, setInnerValue] = useState('');
   const [innerOptions, setInnerOptions] = useState([]);
-  const classProps = classnames(className ?? merge.AUTOCOMPLETE.className, styles['auto-complete']);
+  const [classProps, setClassProps] = useState({});
+  const [configStyles, setConfigStyles] = useState({});
   const showOption = keyframes`
         100% {
             max-height: 400px;
         }
     `;
   const animation = () => css`
-        ${showOption} ${showOptionDuration ?? merge.AUTOCOMPLETE.showOptionDuration} linear forwards
+        ${showOption} ${showOptionDuration ?? configStyles.AUTOCOMPLETE.showOptionDuration} linear forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -5598,12 +6564,12 @@ const Autocomplete = ({
     setIsHover(false);
   };
   const handleRowMouseEnter = e => {
-    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : merge.AUTOCOMPLETE.contentBottom.row.colors.hover;
-    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : merge.AUTOCOMPLETE.contentBottom.row.colors.backgroundHover;
+    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.hover;
+    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.backgroundHover;
   };
   const handleRowMouseLeave = e => {
-    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : merge.AUTOCOMPLETE.contentBottom.row.color;
-    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : merge.AUTOCOMPLETE.contentBottom.row.colors.background;
+    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottom.row.color;
+    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.background;
   };
   const handleFocus = () => {
     setIsFocus(true);
@@ -5630,26 +6596,26 @@ const Autocomplete = ({
   };
   const optionList = /*#__PURE__*/React__default.createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 && innerValue.length >= searchCount ? /*#__PURE__*/React__default.createElement("div", {
     style: {
-      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',
+      left: contentBottomLeft ?? configStyles.AUTOCOMPLETE.contentBottom.left,
+      width: contentBottomWidth ?? configStyles.AUTOCOMPLETE.contentBottom.width,
+      zIndex: contentBottomZindex ?? configStyles.AUTOCOMPLETE.contentBottom.zIndex,
+      borderRadius: contentBottomRadius ?? configStyles.AUTOCOMPLETE.contentBottom.radius,
+      maxWidth: contentBottomMaxWidth ?? configStyles.AUTOCOMPLETE.contentBottom.maxWidth,
+      overflow: contentBottomOverflow ?? configStyles.AUTOCOMPLETE.contentBottom.overflow,
+      position: contentBottomPosition ?? configStyles.AUTOCOMPLETE.contentBottom.position,
+      minHeight: contentBottomMinHeight ?? configStyles.AUTOCOMPLETE.contentBottom.minHeight,
+      boxShadow: contentBottomBoxShadow ?? configStyles.AUTOCOMPLETE.contentBottom.box.shadow,
+      backgroundColor: contentBottomBackgroundColor ?? configStyles.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' : configStyles.AUTOCOMPLETE.height.includes('rem') ? parseFloat(configStyles.AUTOCOMPLETE.height.substr(0, configStyles.AUTOCOMPLETE.height.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.AUTOCOMPLETE.height.substr(0, configStyles.AUTOCOMPLETE.height.length - 2)) + 6 + 'px',
       animation
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
-      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
+      display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.AUTOCOMPLETE.contentBottom.inner.display,
+      overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.AUTOCOMPLETE.contentBottom.inner.overflowY,
+      overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.AUTOCOMPLETE.contentBottom.inner.overflowX,
+      maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.AUTOCOMPLETE.contentBottom.inner.maxHeight,
+      flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.AUTOCOMPLETE.contentBottom.inner.direction
     }
   }, innerOptions.map(item => {
     return /*#__PURE__*/React__default.createElement("p", {
@@ -5659,35 +6625,35 @@ const Autocomplete = ({
       onClick: () => handleClick(item),
       style: {
         flexShrink: 0,
-        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
+        color: contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottom.row.color,
+        height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.AUTOCOMPLETE.contentBottom.row.height,
+        cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.AUTOCOMPLETE.contentBottom.row.cursor,
+        display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.AUTOCOMPLETE.contentBottom.row.display,
+        padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.AUTOCOMPLETE.contentBottom.row.padding,
+        fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.AUTOCOMPLETE.contentBottom.row.font.size,
+        boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.AUTOCOMPLETE.contentBottom.box.sizing,
+        fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.AUTOCOMPLETE.contentBottom.row.font.weight,
+        lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.AUTOCOMPLETE.contentBottom.row.lineHeight,
+        alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.AUTOCOMPLETE.contentBottom.row.alignItems,
+        transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.AUTOCOMPLETE.contentBottom.row.transition,
+        marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.AUTOCOMPLETE.contentBottom.row.marginBottom,
+        backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.background
       }
     }, item[keyNames.name]);
   }))) : innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '1',
-      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
+      color: errorColor ?? configStyles.AUTOCOMPLETE.error.color,
+      fontSize: errorSize ?? configStyles.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
+      padding: innerErrorPadding ?? configStyles.AUTOCOMPLETE.innerError.padding,
+      height: contentBottomRowHeight ?? configStyles.AUTOCOMPLETE.contentBottom.row.height,
+      lineHeight: contentBottomRowLineHeight ?? configStyles.AUTOCOMPLETE.contentBottom.row.lineHeight,
+      backgroundColor: innerErrorBackgroundColor ?? configStyles.AUTOCOMPLETE.innerError.colors.background
     }
   }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '');
   useEffect(() => {
@@ -5721,30 +6687,42 @@ const Autocomplete = ({
   useEffect(() => {
     setInnerError(errorMessage);
   }, [errorMessage]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames(className ?? data.AUTOCOMPLETE.className, styles['auto-complete']));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }).catch(error => {
+      console.error(error);
+    });
+  }, []);
+  return configStyles.AUTOCOMPLETE && /*#__PURE__*/React__default.createElement("div", {
     className: classProps,
     style: {
-      width: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
+      width: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
-      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
+      color: labelColor ?? configStyles.AUTOCOMPLETE.label.color,
+      display: labelDisplay ?? configStyles.AUTOCOMPLETE.label.display,
+      maxWidth: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth,
+      fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
+      fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
+      fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
+      lineHeight: labelLineHeight ?? configStyles.AUTOCOMPLETE.label.lineHeight,
+      marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom,
+      textTransform: labelTextTransform ?? configStyles.AUTOCOMPLETE.label.textTransform
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     style: {
-      display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
-      position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
+      display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
+      position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
       width: '100%',
-      flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
+      flexDirection: contentDirection ?? configStyles.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default.createElement("input", _extends({
     id: id,
@@ -5757,39 +6735,39 @@ const Autocomplete = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     placeholder: placeHolder ?? '',
-    autoComplete: autoComplete ?? merge.AUTOCOMPLETE.autoComplete,
+    autoComplete: autoComplete ?? configStyles.AUTOCOMPLETE.autoComplete,
     style: {
       border: 'none',
       outline: 'none',
       maxWidth: '100%',
       transition: 'all 240ms',
       cursor: disabled ? 'not-allowed' : 'auto',
-      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
+      color: contentTopColor ?? configStyles.AUTOCOMPLETE.color,
+      fontSize: contentTopSize ?? configStyles.AUTOCOMPLETE.font.size,
+      fontStyle: contentTopStyle ?? configStyles.AUTOCOMPLETE.font.style,
+      fontFamily: contentTopFamily ?? configStyles.AUTOCOMPLETE.font.family,
+      fontWeight: contentTopWeight ?? configStyles.AUTOCOMPLETE.font.weight,
+      backgroundColor: disabled && (backgroundDisableColor ?? configStyles.AUTOCOMPLETE.colors.backgroundDisable),
+      height: contentTopHeight ?? configStyles.AUTOCOMPLETE.height,
+      padding: contentTopPadding ?? configStyles.AUTOCOMPLETE.padding,
+      display: contentTopDisplay ?? configStyles.AUTOCOMPLETE.display,
+      borderRadius: contentTopRadius ?? configStyles.AUTOCOMPLETE.radius,
+      boxSizing: contentTopBoxSizing ?? configStyles.AUTOCOMPLETE.box.sizing,
+      lineHeight: contentTopLineHeight ?? configStyles.AUTOCOMPLETE.lineHeight,
+      flexDirection: contentTopDirection ?? configStyles.AUTOCOMPLETE.direction,
+      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : configStyles.AUTOCOMPLETE.error.box.shadow : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.AUTOCOMPLETE.box.shadowActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.AUTOCOMPLETE.box.shadowHover : contentTopBorder ? contentTopBorder : configStyles.AUTOCOMPLETE.box.shadow
     }
   }, props)), innerError ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       left: '0px',
       position: 'absolute',
-      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
+      color: errorColor ?? configStyles.AUTOCOMPLETE.error.color,
+      fontSize: errorSize ?? configStyles.AUTOCOMPLETE.error.font.size,
+      fontStyle: errorStyle ?? configStyles.AUTOCOMPLETE.error.font.style,
+      fontWeight: errorWeight ?? configStyles.AUTOCOMPLETE.error.font.weight,
+      fontFamily: errorFamily ?? configStyles.AUTOCOMPLETE.error.font.family,
+      top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.AUTOCOMPLETE.error.marginTop})`,
+      maxWidth: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
   }, innerError) : '', optionList));
 };