@xaypay/tui 0.0.104 → 0.0.106

package/tui.config.js

@@ -1,320 +1,320 @@
 module.exports = {
     // default properties for <Button /> component
     BUTTON: {
-        size: '16px',                                      // for font size
-        font: 'Arial',                                     // for font family
-        radius: '6px',                                     // for border radius
-        width: '100%',                                     // for width
-        weight: '400',                                     // for font weight
-        type: 'button',                                    // for type
-        height: '46px',                                    // for height
-        color: 'white',                                    // for color 
-        border: 'none',                                    // for border
-        disabled: false,                                   // for disabled
-        cursor: 'pointer',                                 // for cursor
-        contentWidth: false,                               // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content 
-        padding: '12px 20px',                              // for padding
-        textTransform: 'none',                             // for text transform
-        boxSizing: 'border-box',                           // for box sizing
-        disabledColor: 'rgba(60, 57, 62, 1)',              // for color in disabled mode
-        backgroundColor: 'rgba(0, 35, 106, 1)',            // for background color
-        disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
+        size: '16px', // for font size
+        font: 'Arial', // for font family
+        radius: '6px', // for border radius
+        width: '100%', // for width
+        weight: '400', // for font weight
+        type: 'button', // for type
+        height: '46px', // for height
+        color: 'white', // for color
+        border: 'none', // for border
+        disabled: false, // for disabled
+        cursor: 'pointer', // for cursor
+        contentWidth: false, // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content
+        padding: '12px 20px', // for padding
+        textTransform: 'none', // for text transform
+        boxSizing: 'border-box', // for box sizing
+        disabledColor: 'rgba(60, 57, 62, 1)', // for color in disabled mode
+        backgroundColor: 'rgba(0, 35, 106, 1)', // for background color
+        disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
         disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
         transition: 'background-color 240ms, color 240ms', // for transition
-        hoverColor: '#001745',                             // for hover color
-        backgroundHoverColor: '#CB3A3A',                   // for hover background color
-        btnIconMarginRight: '5px'                          // for button icon margin right
+        hoverColor: '#001745', // for hover color
+        backgroundHoverColor: '#CB3A3A', // for hover background color
+        btnIconMarginRight: '5px', // for button icon margin right
     },
     // default properties for <Input /> component
     INPUT: {
-        size: '16px',                                      // for font size
-        type: 'text',                                      // for type
-        width: '100%',                                     // for width
-        radius: '0px',                                     // for input and also (if there exist left or right icons) icons block border-radius
-        className: '',                                     // for input classname (you can set custom class for your custom css)
-        height: '46px',                                    // for height
-        required: false,                                   // for showing required mark on label (it meens input is required)
-        disabled: false,                                   // for disabled
-        errorLeft: '0px',                                  // for error message position from left
-        errorZindex: '1',                                  // for error message z-index
-        marginTop: '10px',                                 // for error message position from top
-        iconWidth: '64px',                                 // for left or right icon block width (you can add your custom icon and you can set icon block size)
-        errorSize: '14px',                                 // for error font size
-        labelSize: '16px',                                 // for label font size
-        errorColor: '#e00',                                // for error message color
-        labelWeight: '500',                                // for label font weight
-        errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
-        telErrorMessage: '',                               // for error message when type is tel
-        phoneDisplay: 'flex',                              // for phone extention display, work when input type is tel
-        autoComplete: 'off',                               // for autocomplete fill mode (browser specific, may not work)
-        padding: '12px 15px',                              // for padding
-        labelColor: '#3c393e',                             // for label color
-        errorAnimation: false,                             // for error showing animation
-        labelDisplay: 'block',                             // for label display
-        labelLineHeight: '22px',                           // for label line height
-        errorLineHeight: '19px',                           // for error message line height
-        boxSizing: 'border-box',                           // for box sizing
-        borderRight: '1px solid',                          // for type tel right border
-        backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color
-        backgroundDisableColor: '#FBFBFB',                 // for input and also (if there exist left or right icons) icons block background color when input is disable
-        color: 'rgb(60, 57, 62)',                          // for input color
-        labelMarginBottom: '6px',                          // for label margin bottom
-        phoneAlignItems: 'center',                         // for phone extention inside item, work when input type is tel
-        transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
-        borderRightColor: '#d1d1d1',                       // for type tel right border
-        borderRightColorHover: '#3c393e',                  // for type tel right border color when hover is active
-        phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
-        boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
-        errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
-        boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
+        size: '16px', // for font size
+        type: 'text', // for type
+        width: '100%', // for width
+        radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
+        className: '', // for input classname (you can set custom class for your custom css)
+        height: '46px', // for height
+        required: false, // for showing required mark on label (it meens input is required)
+        disabled: false, // for disabled
+        errorLeft: '0px', // for error message position from left
+        errorZindex: '1', // for error message z-index
+        marginTop: '10px', // for error message position from top
+        iconWidth: '64px', // for left or right icon block width (you can add your custom icon and you can set icon block size)
+        errorSize: '14px', // for error font size
+        labelSize: '16px', // for label font size
+        errorColor: '#e00', // for error message color
+        labelWeight: '500', // for label font weight
+        errorClassName: '', // for error message classname (you can set custom class for your custom css)
+        telErrorMessage: '', // for error message when type is tel
+        phoneDisplay: 'flex', // for phone extention display, work when input type is tel
+        autoComplete: 'off', // for autocomplete fill mode (browser specific, may not work)
+        padding: '12px 15px', // for padding
+        labelColor: '#3c393e', // for label color
+        errorAnimation: false, // for error showing animation
+        labelDisplay: 'block', // for label display
+        labelLineHeight: '22px', // for label line height
+        errorLineHeight: '19px', // for error message line height
+        boxSizing: 'border-box', // for box sizing
+        borderRight: '1px solid', // for type tel right border
+        backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
+        backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
+        color: 'rgb(60, 57, 62)', // for input color
+        labelMarginBottom: '6px', // for label margin bottom
+        phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
+        transform: 'scale3d(0,0,0)', // for transform (when have error message and errorAnimation prop is true)
+        borderRightColor: '#d1d1d1', // for type tel right border
+        borderRightColorHover: '#3c393e', // for type tel right border color when hover is active
+        phoneJustifyContent: 'center', // for phone extention inside item, work when input type is tel
+        boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
+        errorAnimationDuration: '240ms', // for animation duration (when have error message and errorAnimation prop is true)
+        boxShadowHover: '0 0 0 2px #3c393e', // for border size and color in hover mode (set if you want to change it)
     },
     // default properties for <Tooltip /> component
     TOOLTIP: {
-        type: 'top',                                       // for tooltip type (top, right, bottom, left)
-        width: '46px',                                     // for tooltip parent block width
-        radius: '0px',                                     // for tooltip parent block border radius
-        className: '',                                     // for tooltip className (maybe you want to add your custom class for your custom css)
-        color: 'white',                                    // for tooltip color
-        height: '46px',                                    // for tooltip parent block height
-        fontSize: '14px',                                  // for tooltip font size
-        tooltipRadius: '3px',                              // for tooltip border radius
-        tooltipWidth: '100px',                             // for tooltip width
-        backgroundColor: 'transparent',                    // for tooltip parent block background color (maybe you want to see it)
-        fontFamily: 'Arial, sans-serif',                   // for tooltip font family
-        tooltipBackgroundColor: '#03a9f4'                  // for tooltip backgrond color
+        type: 'top', // for tooltip type (top, right, bottom, left)
+        width: '46px', // for tooltip parent block width
+        radius: '0px', // for tooltip parent block border radius
+        className: '', // for tooltip className (maybe you want to add your custom class for your custom css)
+        color: 'white', // for tooltip color
+        height: '46px', // for tooltip parent block height
+        fontSize: '14px', // for tooltip font size
+        tooltipRadius: '3px', // for tooltip border radius
+        tooltipWidth: '100px', // for tooltip width
+        backgroundColor: 'transparent', // for tooltip parent block background color (maybe you want to see it)
+        fontFamily: 'Arial, sans-serif', // for tooltip font family
+        tooltipBackgroundColor: '#03a9f4', // for tooltip backgrond color
     },
     // default properties for <Typography /> component
     TYPOGRAPHY: {
-        radius: '0px',                                     // for border radius
-        border: 'none',                                    // for border
-        cursor: 'default',                                 // for cursor
-        textShadow: 'none',                                // for text shadow
+        radius: '0px', // for border radius
+        border: 'none', // for border
+        cursor: 'default', // for cursor
+        textShadow: 'none', // for text shadow
 
-        colorp: '#3C393E',                                 // for variant p color
-        colorh1: '#3C393E',                                // for variant h1 color
-        colorh2: '#3C393E',                                // for variant h2 color 
-        colorh3: '#3C393E',                                // for variant h3 color
-        colorh4: '#3C393E',                                // for variant h4 color 
-        colorh5: '#3C393E',                                // for variant h5 color
-        colorh6: '#3C393E',                                // for variant h6 color
-        colorspan: '#3C393E',                              // for variant span color
+        colorp: '#3C393E', // for variant p color
+        colorh1: '#3C393E', // for variant h1 color
+        colorh2: '#3C393E', // for variant h2 color
+        colorh3: '#3C393E', // for variant h3 color
+        colorh4: '#3C393E', // for variant h4 color
+        colorh5: '#3C393E', // for variant h5 color
+        colorh6: '#3C393E', // for variant h6 color
+        colorspan: '#3C393E', // for variant span color
 
-        sizep: '13px',                                     // for variant p font size
-        sizeh1: '70px',                                    // for variant h1 font size
-        sizeh2: '50px',                                    // for variant h2 font size
-        sizeh3: '38px',                                    // for variant h3 font size
-        sizeh4: '24px',                                    // for variant h4 font size
-        sizeh5: '20px',                                    // for variant h5 font size
-        sizeh6: '14px',                                    // for variant h6 font size
-        sizespan: '12px',                                  // for variant span font size
+        sizep: '13px', // for variant p font size
+        sizeh1: '70px', // for variant h1 font size
+        sizeh2: '50px', // for variant h2 font size
+        sizeh3: '38px', // for variant h3 font size
+        sizeh4: '24px', // for variant h4 font size
+        sizeh5: '20px', // for variant h5 font size
+        sizeh6: '14px', // for variant h6 font size
+        sizespan: '12px', // for variant span font size
 
-        textAlignp: 'left',                                 // for variant p text align
-        textAlignh1: 'left',                                // for variant h1 text align
-        textAlignh2: 'left',                                // for variant h2 text align
-        textAlignh3: 'left',                                // for variant h3 text align
-        textAlignh4: 'left',                                // for variant h4 text align
-        textAlignh5: 'left',                                // for variant h5 text align
-        textAlignh6: 'left',                                // for variant h6 text align
-        textAlignspan: 'left',                              // for variant span text align
+        textAlignp: 'left', // for variant p text align
+        textAlignh1: 'left', // for variant h1 text align
+        textAlignh2: 'left', // for variant h2 text align
+        textAlignh3: 'left', // for variant h3 text align
+        textAlignh4: 'left', // for variant h4 text align
+        textAlignh5: 'left', // for variant h5 text align
+        textAlignh6: 'left', // for variant h6 text align
+        textAlignspan: 'left', // for variant span text align
 
-        weightp: '500',                                    // for variant p font weight
-        weighth1: '400',                                   // for variant h1 font weight
-        weighth2: '400',                                   // for variant h2 font weight
-        weighth3: '400',                                   // for variant h3 font weight
-        weighth4: '600',                                   // for variant h4 font weight
-        weighth5: '600',                                   // for variant h5 font weight
-        weighth6: '600',                                   // for variant h6 font weight
-        weightspan: '500',                                 // for variant span font weight
+        weightp: '500', // for variant p font weight
+        weighth1: '400', // for variant h1 font weight
+        weighth2: '400', // for variant h2 font weight
+        weighth3: '400', // for variant h3 font weight
+        weighth4: '600', // for variant h4 font weight
+        weighth5: '600', // for variant h5 font weight
+        weighth6: '600', // for variant h6 font weight
+        weightspan: '500', // for variant span font weight
 
-        backgroundColorp: 'transparent',                   // for variant p background color
-        backgroundColorh1: 'transparent',                  // for variant h1 background color
-        backgroundColorh2: 'transparent',                  // for variant h2 background color
-        backgroundColorh3: 'transparent',                  // for variant h3 background color
-        backgroundColorh4: 'transparent',                  // for variant h4 background color
-        backgroundColorh5: 'transparent',                  // for variant h5 background color
-        backgroundColorh6: 'transparent',                  // for variant h6 background color
-        backgroundColorspan: 'transparent',                // for variant span background color
+        backgroundColorp: 'transparent', // for variant p background color
+        backgroundColorh1: 'transparent', // for variant h1 background color
+        backgroundColorh2: 'transparent', // for variant h2 background color
+        backgroundColorh3: 'transparent', // for variant h3 background color
+        backgroundColorh4: 'transparent', // for variant h4 background color
+        backgroundColorh5: 'transparent', // for variant h5 background color
+        backgroundColorh6: 'transparent', // for variant h6 background color
+        backgroundColorspan: 'transparent', // for variant span background color
 
-        textDecorationp: 'none',                           // for variant p text decoration
-        textDecorationh1: 'none',                          // for variant h1 text decoration
-        textDecorationh2: 'none',                          // for variant h2 text decoration
-        textDecorationh3: 'none',                          // for variant h3 text decoration
-        textDecorationh4: 'none',                          // for variant h4 text decoration
-        textDecorationh5: 'none',                          // for variant h5 text decoration
-        textDecorationh6: 'none',                          // for variant h6 text decoration 
-        textDecorationspan: 'none',                        // for variant span text decoration
+        textDecorationp: 'none', // for variant p text decoration
+        textDecorationh1: 'none', // for variant h1 text decoration
+        textDecorationh2: 'none', // for variant h2 text decoration
+        textDecorationh3: 'none', // for variant h3 text decoration
+        textDecorationh4: 'none', // for variant h4 text decoration
+        textDecorationh5: 'none', // for variant h5 text decoration
+        textDecorationh6: 'none', // for variant h6 text decoration
+        textDecorationspan: 'none', // for variant span text decoration
 
-        fontStylep: 'normal',                              // for variant p font style
-        fontStyleh1: 'normal',                             // for variant h1 font style
-        fontStyleh2: 'normal',                             // for variant h2 font style
-        fontStyleh3: 'normal',                             // for variant h3 font style
-        fontStyleh4: 'normal',                             // for variant h4 font style
-        fontStyleh5: 'normal',                             // for variant h5 font style
-        fontStyleh6: 'normal',                             // for variant h6 font style
-        fontStylespan: 'normal',                           // for variant span font style
+        fontStylep: 'normal', // for variant p font style
+        fontStyleh1: 'normal', // for variant h1 font style
+        fontStyleh2: 'normal', // for variant h2 font style
+        fontStyleh3: 'normal', // for variant h3 font style
+        fontStyleh4: 'normal', // for variant h4 font style
+        fontStyleh5: 'normal', // for variant h5 font style
+        fontStyleh6: 'normal', // for variant h6 font style
+        fontStylespan: 'normal', // for variant span font style
 
-        lineHeightp: 'normal',                             // for variant p line height
-        lineHeighth1: 'normal',                            // for variant h1 line height
-        lineHeighth2: 'normal',                            // for variant h2 line height
-        lineHeighth3: 'normal',                            // for variant h3 line height
-        lineHeighth4: 'normal',                            // for variant h4 line height
-        lineHeighth5: 'normal',                            // for variant h5 line height
-        lineHeighth6: 'normal',                            // for variant h6 line height
-        lineHeightspan: 'normal',                          // for variant span line height
+        lineHeightp: 'normal', // for variant p line height
+        lineHeighth1: 'normal', // for variant h1 line height
+        lineHeighth2: 'normal', // for variant h2 line height
+        lineHeighth3: 'normal', // for variant h3 line height
+        lineHeighth4: 'normal', // for variant h4 line height
+        lineHeighth5: 'normal', // for variant h5 line height
+        lineHeighth6: 'normal', // for variant h6 line height
+        lineHeightspan: 'normal', // for variant span line height
 
-        textTransformp: 'none',                            // for variant p text transform
-        textTransformh1: 'none',                           // for variant h1 text transform
-        textTransformh2: 'none',                           // for variant h2 text transform
-        textTransformh3: 'none',                           // for variant h3 text transform
-        textTransformh4: 'none',                           // for variant h4 text transform
-        textTransformh5: 'none',                           // for variant h5 text transform
-        textTransformh6: 'none',                           // for variant h6 text transform
-        textTransformspan: 'none',                         // for variant span text transform    
-        
-        fontFamilyp: 'Arial, sans-serif',                  // for variant p font family
-        fontFamilyh1: 'Arial, sans-serif',                 // for variant h1 font family
-        fontFamilyh2: 'Arial, sans-serif',                 // for variant h2 font family
-        fontFamilyh3: 'Arial, sans-serif',                 // for variant h3 font family
-        fontFamilyh4: 'Arial, sans-serif',                 // for variant h4 font family
-        fontFamilyh5: 'Arial, sans-serif',                 // for variant h5 font family
-        fontFamilyh6: 'Arial, sans-serif',                 // for variant h6 font family
-        fontFamilyspan: 'Arial, sans-serif',               // for variant span font family
+        textTransformp: 'none', // for variant p text transform
+        textTransformh1: 'none', // for variant h1 text transform
+        textTransformh2: 'none', // for variant h2 text transform
+        textTransformh3: 'none', // for variant h3 text transform
+        textTransformh4: 'none', // for variant h4 text transform
+        textTransformh5: 'none', // for variant h5 text transform
+        textTransformh6: 'none', // for variant h6 text transform
+        textTransformspan: 'none', // for variant span text transform
+
+        fontFamilyp: 'Arial, sans-serif', // for variant p font family
+        fontFamilyh1: 'Arial, sans-serif', // for variant h1 font family
+        fontFamilyh2: 'Arial, sans-serif', // for variant h2 font family
+        fontFamilyh3: 'Arial, sans-serif', // for variant h3 font family
+        fontFamilyh4: 'Arial, sans-serif', // for variant h4 font family
+        fontFamilyh5: 'Arial, sans-serif', // for variant h5 font family
+        fontFamilyh6: 'Arial, sans-serif', // for variant h6 font family
+        fontFamilyspan: 'Arial, sans-serif', // for variant span font family
     },
     // default properties for <Select /> component
     SELECT: {
-        dots: false,                                       // for options, cut text and add dots
-        showCloseIcon: true,                               // for select reset icon, when prop exist or true is show, otherwise is hide
-        marginTop: '10px',                                 // for error message postion from top
-        labelWeight: '500',                                // for label font weight
-        labelColor: '#3C393E',                             // for label color
-        labelDisplay: 'block',                             // for label display
-        labelFontSize: '16px',                             // for label font size
-        labelLineHeight: '22px',                           // for label line height
-        labelMarginBottom: '6px',                          // for label margin bottom
-        labelTextTransform: 'none',                        // for label text transform
-        
-        errorSize: '14px',                                 // for error font size
-        errorColor: 'rgb(238, 0, 0)',                      // for error color
+        dots: false, // for options, cut text and add dots
+        showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
+        marginTop: '10px', // for error message postion from top
+        labelWeight: '500', // for label font weight
+        labelColor: '#3C393E', // for label color
+        labelDisplay: 'block', // for label display
+        labelFontSize: '16px', // for label font size
+        labelLineHeight: '22px', // for label line height
+        labelMarginBottom: '6px', // for label margin bottom
+        labelTextTransform: 'none', // for label text transform
+
+        errorSize: '14px', // for error font size
+        errorColor: 'rgb(238, 0, 0)', // for error color
 
-        cursor: 'pointer',                                 // for selected cursor
-        selectedRadius: '6px',                             // for selected border radius
-        selectedColor: '#3C393E',                          // for selected color
-        selectedFontSize: '16px',                          // for selected font size
-        selectedMinHeight: '46px',                            // for selected height
-        selectedFontWeight: '500',                         // for selected font weight
-        selectedLineHeight: '22px',                        // for selected line height
-        selectedPadding: '0px 15px',                       // for selected padding
-        selectedHoverColor: '#373538',                     // for selected color ( when hover )
-        selectedBoxSizing: 'border-box',                   // for selected box sizing
-        selectedTransition: 'border-color 240ms',          // for selected transition
-        selectedBackgroundColor: '#FBFBFB',                // for selected background color
-        selectedDisableBackgroundColor: '#FBFBFB',         // for selected background color when selet is disable
+        cursor: 'pointer', // for selected cursor
+        selectedRadius: '6px', // for selected border radius
+        selectedColor: '#3C393E', // for selected color
+        selectedFontSize: '16px', // for selected font size
+        selectedMinHeight: '46px', // for selected height
+        selectedFontWeight: '500', // for selected font weight
+        selectedLineHeight: '22px', // for selected line height
+        selectedPadding: '0px 15px', // for selected padding
+        selectedHoverColor: '#373538', // for selected color ( when hover )
+        selectedBoxSizing: 'border-box', // for selected box sizing
+        selectedTransition: 'border-color 240ms', // for selected transition
+        selectedBackgroundColor: '#FBFBFB', // for selected background color
+        selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
 
-        optionsBorderRadius: '6px',                        // for options block border radius
-        optionsBackgroundColor: '#FBFBFB',                 // for options block background color
-        optionsBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)',  // for options block box shadow
+        optionsBorderRadius: '6px', // for options block border radius
+        optionsBackgroundColor: '#FBFBFB', // for options block background color
+        optionsBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for options block box shadow
 
-        optionItemColor: '#3C393E',                        // for option color
-        optionItemFontSize: '16px',                        // for option font size
-        optionItemCursor: 'pointer',                       // for option cursor
-        optionItemMinHeight: '46px',                       // for option min height
-        optionItemFontWeight: '500',                       // for option font weight
-        optionItemLineHeight: '25px',                      // for option line height
-        optionItemPadding: '0px 15px',                     // for option padding
-        optionItemMarginBottom: '2px',                     // for option margin bottom
-        optionItemColorHover: '#00236A',                   // for option color ( when hover )
-        optionItemBoxSizing: 'border-box',                 // for option box sizing
-        optionItemBackgroudColor: '#ffffff',               // for option background color
-        optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+        optionItemColor: '#3C393E', // for option color
+        optionItemFontSize: '16px', // for option font size
+        optionItemCursor: 'pointer', // for option cursor
+        optionItemMinHeight: '46px', // for option min height
+        optionItemFontWeight: '500', // for option font weight
+        optionItemLineHeight: '25px', // for option line height
+        optionItemPadding: '0px 15px', // for option padding
+        optionItemMarginBottom: '2px', // for option margin bottom
+        optionItemColorHover: '#00236A', // for option color ( when hover )
+        optionItemBoxSizing: 'border-box', // for option box sizing
+        optionItemBackgroudColor: '#ffffff', // for option background color
+        optionItemBackgroudColorHover: 'unset', // for option background color ( when hover )
 
         boxShadow: '0 0 0 2px #d1d1d1',
-        boxShadowHover: '0 0 0 2px #3c393e'
+        boxShadowHover: '0 0 0 2px #3c393e',
     },
     // default properties for <Textarea /> component
     TEXTAREA: {
-        size: '16px',                                         // for font size
-        radius: '6px',                                        // for border radius
-        width: '400px',                                       // for width
-        resize: 'none',                                       // for resize
-        height: '134px',                                      // for height
-        maxLength: 1500,                                      // for characters maximum count
-        color: '#3C393E',                                     // for color
-        marginTop: '10px',                                    // for error message position from top
-        minWidth: '200px',                                    // for minimum width
-        maxWidth: '500px',                                    // for maximum width
-        labelSize: '16px',                                    // for label font size
-        errorSize: '12px',                                    // for error font size
-        minHeight: '100px',                                   // for minimum height
-        maxHeight: '300px',                                   // for maximum height
-        padding: '12px 15px',                                 // for padding
-        errorColor: '#E40E00',                                // for error color
-        labelColor: '#3C393E',                                // for label color
-        labelWeight: 'normal',                                // for label font weight
-        labelDisplay: 'block',                                // for label display
-        boxSizing: 'border-box',                              // for box sizing
-        backgroundColor: 'white',                             // for background color
-        labelMarginBottom: '10px',                            // for label margin bottom
-        borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
-        borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
-        labelRequiredColor: '#ee0000',                        // for label required mark color
-        boxShadow: '0 0 0 2px #d1d1d1',                       // for border size and color
+        size: '16px', // for font size
+        radius: '6px', // for border radius
+        width: '400px', // for width
+        resize: 'none', // for resize
+        height: '134px', // for height
+        maxLength: 1500, // for characters maximum count
+        color: '#3C393E', // for color
+        marginTop: '10px', // for error message position from top
+        minWidth: '200px', // for minimum width
+        maxWidth: '500px', // for maximum width
+        labelSize: '16px', // for label font size
+        errorSize: '12px', // for error font size
+        minHeight: '100px', // for minimum height
+        maxHeight: '300px', // for maximum height
+        padding: '12px 15px', // for padding
+        errorColor: '#E40E00', // for error color
+        labelColor: '#3C393E', // for label color
+        labelWeight: 'normal', // for label font weight
+        labelDisplay: 'block', // for label display
+        boxSizing: 'border-box', // for box sizing
+        backgroundColor: 'white', // for background color
+        labelMarginBottom: '10px', // for label margin bottom
+        borderHoverColor: '#3C393E', // for border color when hover action is happaning
+        borderFocusColor: '#00236A', // for boredr color when focus action is happaning
+        labelRequiredColor: '#ee0000', // for label required mark color
+        boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
     },
     // default properties for <NewAutocomplete /> component
     NEWAUTOCOMPLETE: {
-        labelWeight: 500,                                     // for label font weight
-        marginTop: '10px',                                    // for error message position from top
-        labelSize: '16px',                                    // for label font size
-        labelColor: '#3c393e',                                // for label color
-        labelDisplay: 'block',                                // for label display
-        labelLineHeight: '22px',                              // for label line height
-        labelMarginBottom: '6px',                             // for label margin bottom
-        labelTextTransform: 'none',                           // for label text transform
-        labelRequiredColor: '#ee0000',                        // for label required mark color
-        
-        className: '',                                        // for autocomplete class if it need
-        searchCount: 3,                                       // for autocomplete show result logic 
-        errorSize: '16px',                                    // for error font size
-        autoComplete: 'off',                                  // for off auto fill functionality ( browser specific, maybe will not work )
-        errorColor: '#ee0000',                                // for error color
+        labelWeight: 500, // for label font weight
+        marginTop: '10px', // for error message position from top
+        labelSize: '16px', // for label font size
+        labelColor: '#3c393e', // for label color
+        labelDisplay: 'block', // for label display
+        labelLineHeight: '22px', // for label line height
+        labelMarginBottom: '6px', // for label margin bottom
+        labelTextTransform: 'none', // for label text transform
+        labelRequiredColor: '#ee0000', // for label required mark color
+
+        className: '', // for autocomplete class if it need
+        searchCount: 3, // for autocomplete show result logic
+        errorSize: '16px', // for error font size
+        autoComplete: 'off', // for off auto fill functionality ( browser specific, maybe will not work )
+        errorColor: '#ee0000', // for error color
 
-        contentDisplay: 'flex',                               // for autocomplete parent block display
-        contentDirection: 'column',                           // for autocomplete parent block flex direction
-        contentPosition: 'relative',                          // for autocomplete parent block position
-        showOptionDuration: '640ms',                          // for autocomplete parent block animation duration
-        innerErrorPadding: '0px 15px',                        // for autocomplete error padding
-        innerErrorBackgroundColor: 'green',                   // for autocomplete inner error message background color
+        contentDisplay: 'flex', // for autocomplete parent block display
+        contentDirection: 'column', // for autocomplete parent block flex direction
+        contentPosition: 'relative', // for autocomplete parent block position
+        showOptionDuration: '640ms', // for autocomplete parent block animation duration
+        innerErrorPadding: '0px 15px', // for autocomplete error padding
+        innerErrorBackgroundColor: 'green', // for autocomplete inner error message background color
 
-        contentTopWeight: 500,                                // for autocomplate top block font weight
-        contentTopSize: '16px',                               // for autocomplate top block font size
-        contentTopRadius: '6px',                              // for autocomplate top block border radius
-        contentTopHeight: '46px',                             // for autocomplate top block height
-        contentTopDisplay: 'flex',                            // for autocomplate top block display
-        contentTopDirection: 'row',                           // for autocomplate top block flex direction
-        contentTopColor: '#3C393E',                           // for autocomplate top block color
-        contentTopMaxWidth: '400px',                          // for autocomplate top block max width
-        contentTopLineHeight: '22px',                         // for autocomplate top block line height
-        contentTopPadding: '0px 15px',                        // for autocomplate top block padding
-        contentTopBoxSizing: 'border-box',                    // for autocomplate top block box sizing
-        contentTopBorder: '0 0 0 2px #D1D1D1',                // for autocomplate top block border color
-        contentTopBorderHover: '0 0 0 2px #3C393E',           // for autocomplate top block border hover color
-        contentTopBorderActive: '0 0 0 2px #00236A',          // for autocomplate top block border active color
+        contentTopWeight: 500, // for autocomplate top block font weight
+        contentTopSize: '16px', // for autocomplate top block font size
+        contentTopRadius: '6px', // for autocomplate top block border radius
+        contentTopHeight: '46px', // for autocomplate top block height
+        contentTopDisplay: 'flex', // for autocomplate top block display
+        contentTopDirection: 'row', // for autocomplate top block flex direction
+        contentTopColor: '#3C393E', // for autocomplate top block color
+        contentTopMaxWidth: '400px', // for autocomplate top block max width
+        contentTopLineHeight: '22px', // for autocomplate top block line height
+        contentTopPadding: '0px 15px', // for autocomplate top block padding
+        contentTopBoxSizing: 'border-box', // for autocomplate top block box sizing
+        contentTopBorder: '0 0 0 2px #D1D1D1', // for autocomplate top block border color
+        contentTopBorderHover: '0 0 0 2px #3C393E', // for autocomplate top block border hover color
+        contentTopBorderActive: '0 0 0 2px #00236A', // for autocomplate top block border active color
 
-        contentBottomZindex: 1,                               // for autocomplete bottom block z-index
-        contentBottomLeft: '0px',                             // for autocomplete bottom block left
-        contentBottomRadius: '6px',                           // for autocomplete bottom block border radius
-        contentBottomWidth: '100%',                           // for autocomplete bottom block width
-        contentBottomMinHeight: '0px',                        // for autocomplete bottom block minimal height
-        contentBottomMaxWidth: '400px',                       // for autocomplete bottom block maximum width
-        contentBottomOverflow: 'hidden',                      // for autocomplete bottom block overflow
-        contentBottomPosition: 'absolute',                    // for autocomplete bottom block position
-        contentBottomBackgroundColor: '#FBFBFB',              // for autocomplete bottom block background color
+        contentBottomZindex: 1, // for autocomplete bottom block z-index
+        contentBottomLeft: '0px', // for autocomplete bottom block left
+        contentBottomRadius: '6px', // for autocomplete bottom block border radius
+        contentBottomWidth: '100%', // for autocomplete bottom block width
+        contentBottomMinHeight: '0px', // for autocomplete bottom block minimal height
+        contentBottomMaxWidth: '400px', // for autocomplete bottom block maximum width
+        contentBottomOverflow: 'hidden', // for autocomplete bottom block overflow
+        contentBottomPosition: 'absolute', // for autocomplete bottom block position
+        contentBottomBackgroundColor: '#FBFBFB', // for autocomplete bottom block background color
         contentBottomBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for autocomplete bottom block box shadow
 
-        contentBottomInnerDisplay: 'flex',                    // for autocomplete bottom block inner display
-        contentBottomInnerOverflowY: 'auto',                  // for autocomplete bottom block inner overflow y
-        contentBottomInnerMaxHeight: '234px',                 // for autocomplete bottom block inner maximum height
-        contentBottomInnerOverflowX: 'hidden',                // for autocomplete bottom block inner overflow x
-        contentBottomInnerDirection: 'column',                // for autocomplete bottom block inner flex direction
+        contentBottomInnerDisplay: 'flex', // for autocomplete bottom block inner display
+        contentBottomInnerOverflowY: 'auto', // for autocomplete bottom block inner overflow y
+        contentBottomInnerMaxHeight: '234px', // for autocomplete bottom block inner maximum height
+        contentBottomInnerOverflowX: 'hidden', // for autocomplete bottom block inner overflow x
+        contentBottomInnerDirection: 'column', // for autocomplete bottom block inner flex direction
 
         contentBottomRowHeight: '46px',                       // for autocomplete bottom block inner row height 
         contentBottomRowDisplay: 'flex',                      // for autocomplete bottom block inner row display
@@ -331,77 +331,84 @@ module.exports = {
         contentBottomRowTransition: 'all 240ms',              // for autocomplete bottom block inner row transition
         contentBottomRowBackgroundColor: '#ffffff',           // for autocomplete bottom block inner row background color
         contentBottomRowHoverBackgroundColor: 'initial',      // for autocomplete bottom block inner row hover background color
+        backgroundDisableColor: '#F6F9FC',                    // for autocomplete disable background color
     },
     // default properties for <Captcha /> component
     Captcha: {
-        size: '16px',                                         // for captcha label font size
-        color: '#3C393E'                                      // for captcha label color
+        size: '16px', // for captcha label font size
+        color: '#3C393E', // for captcha label color
     },
     // default properties for <File /> component
     File: {
-        or: 'կամ',                                            // for file place text
-        weight: 400,                                          // for file place font weight
-        size: '12px',                                         // for file font size
-        radius: '6px',                                        // for file place border radius
-        height: '200px',                                      // for file choose place height
-        color: '#3C393E',                                     // for file place color
-        upload: 'Բեռնել',                                     // for file place text
-        maxWidth: '440px',                                    // for file width
-        labelSize: '16px',                                    // for file font size
-        border: '2px dashed',                                 // for file choose place border
-        labelColor: '#4A4A4D',                                // for file color
-        errorColor: '#ee0000',                                // for file place and error message error color
-        borderColor: '#D1D1D1',                               // for file choose place border color
-        listItemHeight: '70px',                               // for file list item height
-        uploadColor: '#0DA574',                               // for file place upload text color
-        progressColor: '#4A4A4D',                             // for file progress bar color
-        progressFontSize: '16px',                             // for file progress bar font size
-        listItemErrorSize: '16px',                            // for file multiple mode error font size
-        backgroundColor: '#F8F8F8',                           // for file choose place background color
-        listItemErrorColor: 'black',                          // for file multiple mode error color
-        borderHoverColor: '#00236A',                          // for file border color, when hover is happening
-        fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
-        listItemPadding: '14px 20px',                         // for file list item padding
-        fileSizeText: 'Առավելագույնը',                        // for file place file size text
-        fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
-        labelRequiredColor: '#ee0000',                        // for file label required color
-        progressTrackColor: '#E5E8E8',                        // for file item progress track background color
-        extentionsRowMarginTop: '40px',                       // for file extentions row margin top
-        progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
-        progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
-        progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
-        formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
-        noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
-        listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
-        maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
-        putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
-        hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+        or: 'կամ', // for file place text
+        weight: 400, // for file place font weight
+        size: '12px', // for file font size
+        radius: '6px', // for file place border radius
+        height: '200px', // for file choose place height
+        color: '#3C393E', // for file place color
+        upload: 'Բեռնել', // for file place text
+        maxWidth: '440px', // for file width
+        labelSize: '16px', // for file font size
+        border: '2px dashed', // for file choose place border
+        labelColor: '#4A4A4D', // for file color
+        errorColor: '#ee0000', // for file place and error message error color
+        borderColor: '#D1D1D1', // for file choose place border color
+        listItemHeight: '70px', // for file list item height
+        uploadColor: '#0DA574', // for file place upload text color
+        progressColor: '#4A4A4D', // for file progress bar color
+        progressFontSize: '16px', // for file progress bar font size
+        listItemErrorSize: '16px', // for file multiple mode error font size
+        backgroundColor: '#F8F8F8', // for file choose place background color
+        listItemErrorColor: 'black', // for file multiple mode error color
+        borderHoverColor: '#00236A', // for file border color, when hover is happening
+        fileAreaImageHeight: 'auto', // for file place choosen image preview height
+        listItemPadding: '14px 20px', // for file list item padding
+        fileSizeText: 'Առավելագույնը', // for file place file size text
+        fileAreaImageWidth: '27.8rem', // for file place choosen image preview width
+        labelRequiredColor: '#ee0000', // for file label required color
+        progressTrackColor: '#E5E8E8', // for file item progress track background color
+        extentionsRowMarginTop: '40px', // for file extentions row margin top
+        progressFailedColor: '#E40E00', // for file list item progress backfround color when file upload is failed
+        progressSuccessColor: '#069768', // for file list item progress background color when file upload is success
+        progressLoadingColor: '#051942', // for file list item progress background color when file upload is loading
+        formatError: 'ֆայլի սխալ ֆորմատ', // for file error text when file extention is invalid
+        noChoosenFile: 'Ֆայլը ընտրված չէ', // for file error text when file is not choosen
+        listItemBackgroundColor: '#F6F8F8', // for file list item background color
+        maxSizeError: 'Առավելագույն ծավալ', // for file error text when choosen file size is more then maxSize prop
+        putFileHere: 'Տեղադրել ֆայլը այստեղ', // for file place text
+        hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)', // for file place background color when hover on file place and there is a choosen file
         listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
     },
     // default properties for <Modal /> component
     MODAL: {
-        alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
-        justifyContent: 'center',                             // for modal ( flex-start, center, flex-end ) --> justify-content
-        mMaxWidth: '95%',                                     // for modal max width
-        mMaxHeight: '95vh',                                   // for modal max height
-        outsideClose: true,                                   // for modal close when happened outside click
-        radius: '14px',                                       // for modal border radius
-        minWidth: '320px',                                    // for modal min width
-        headerSize: '20px',                                   // for modal header font size
-        minHeight: '200px',                                   // for modal min height
-        headerWeight: '600',                                  // for modal header font weight
-        imageHeight: '100%',                                  // for modal image height on images mode
-        headerHeight: '30px',                                 // for modal header height
-        grayDecorHeight: '80px',                              // for modal top decoration when show slider
-        width: 'fit-content',                                 // for modal width
-        height: 'fit-content',                                // for modal width
-        headerColor: '#00236a',                               // for modal header color
-        backgroundColor: 'white',                             // for modal background color
-        padding: '20px 20px 20px',                            // for modal padding
-        layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
-        borderWidth: '20px',                                  // for modal padding from border transparent
-        borderStyle: 'solid',                                 // for modal border style
-        borderColor: 'transparent',                           // for modal border color
+        alignItems: 'center', // for modal ( flex-start, center, flex-end ) --> align-items
+        justifyContent: 'center', // for modal ( flex-start, center, flex-end ) --> justify-content
+        mMaxWidth: '95%', // for modal max width
+        mMaxHeight: '95vh', // for modal max height
+        outsideClose: true, // for modal close when happened outside click
+        radius: '14px', // for modal border radius
+        minWidth: '320px', // for modal min width
+        headerSize: '20px', // for modal header font size
+        minHeight: '200px', // for modal min height
+        headerWeight: '600', // for modal header font weight
+        imageHeight: '100%', // for modal image height on images mode
+        imageWidth: '', // for modal image width on images mode
+        headerHeight: '30px', // for modal header height
+        grayDecorHeight: '80px', // for modal top decoration when show slider
+        width: 'fit-content', // for modal width
+        height: 'fit-content', // for modal width
+        headerColor: '#00236a', // for modal header color
+        backgroundColor: 'white', // for modal background color
+        padding: '20px 20px 20px', // for modal padding
+        layerBackgroundColor: 'rgba(0,0,0,0.4)', // for modal parent layer background color
+        borderWidth: '20px', // for modal padding from border transparent
+        borderStyle: 'solid', // for modal border style
+        borderColor: 'transparent', // for modal border color
+        imageWrapHeight: '80vh', // for image wrap
+    },
+    SINGLECHECKBOX: {
+        checkedColor: '#00236A', // for checkbox background ( fill ) color
+        unCheckedColor: '#D1D1D1', // for checkbox border color
     },
     // default properties for <Table /> component
     TABLE: {
@@ -421,5 +428,5 @@ module.exports = {
 
         tBodyRowBorder: '1px solid #eeeeee',
         tBodyMarginTop: '20px',
-    }
-};
+    },
+}