@xaypay/tui 0.0.119 → 0.0.121

package/src/stories/configuration.stories.mdx

@@ -1,715 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Intro/Configuration" />
-
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .sbdocs-content {
-      max-width: 80% !important;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
-
-# Configuration
-
-### 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
-    className: '',                                     // for button class
-    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
-}
-```
-
-### 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)
-    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
-    backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
-    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
-    errorPosition: 'absolute',                         // for error message position (maybe you want to show error message in custom place)
-    transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
-    phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
-    boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
-    errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
-    backgroundDisableColor: '#FBFBFB',                 // for input and also (if there exist left or right icons) icons block background color when input is disable
-    boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
-    labelFontFamily: 'Arial, sans-serif',              // for label font family
-}
-```
-
-### 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
-}
-```
-
-### TYPOGRAPHY
-
-```
-{
-    radius: '0px',                                     // for border radius
-    border: 'none',                                    // for border
-    cursor: 'default',                                 // for cursor
-    textShadow: 'none',                                // for text shadow
-    className: '',                                     // for typography class
-
-    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
-
-    textAlignp: '0px',                                 // for variant p text align
-    textAlignh1: '0px',                                // for variant h1 text align
-    textAlignh2: '0px',                                // for variant h2 text align
-    textAlignh3: '0px',                                // for variant h3 text align
-    textAlignh4: '0px',                                // for variant h4 text align
-    textAlignh5: '0px',                                // for variant h5 text align
-    textAlignh6: '0px',                                // for variant h6 text align
-    textAlignspan: '0px',                              // 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
-
-    colorHoverp: '#3C393E',                            // for variant p color in hover mode
-    colorHoverh1: '#3C393E',                           // for variant h1 color in hover mode
-    colorHoverh2: '#3C393E',                           // for variant h2 color in hover mode
-    colorHoverh3: '#3C393E',                           // for variant h3 color in hover mode
-    colorHoverh4: '#3C393E',                           // for variant h4 color in hover mode
-    colorHoverh5: '#3C393E',                           // for variant h5 color in hover mode
-    colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
-    colorHoverspan: '#3C393E',                         // for variant span color in hover mode
-
-    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
-
-    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
-
-    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
-}
-```
-
-### SELECT
-
-```
-{
-    dots: false,                                       // for options, cut text and add dots
-    showCloseIcon: false,                              // for select reset icon, when prop exist or true is show, otherwise is hide
-    className: '',                                     // for select class
-    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
-    labelFontFamily: 'Arial, sans-serif',              // for label font family
-    
-    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
-    selectedBorder: '2px solid',                       // for selected border
-    selectedHoverColor: '#373538',                     // for selected color ( when hover )
-    selectedBorderColor: '#D1D1D1',                    // for selected border color
-    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
-
-    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: '22px',                      // 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 )
-}
-```
-
-### TOASTER
-
-```
-{
-  toast.success();
-  toast.success(title);
-  toast.success(title, {
-    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
-    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
-    description: 'Toast description'    ---> description is a string for toast description
-  });
-
-  toast.info();
-  toast.info(title);
-  toast.info(title, {
-    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
-    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
-    description: 'Toast description'    ---> description is a string for toast description
-  });
-
-  toast.warn();
-  toast.warn(title);
-  toast.warn(title, {
-    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
-    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
-    description: 'Toast description'    ---> description is a string for toast description
-  });
-
-  toast.error();
-  toast.error(title);
-  toast.error(title, {
-    timer: 5000,                        ---> timer must be a number, for example 5000, is a 5 seconds
-    position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
-    description: 'Toast description'    ---> description is a string for toast description
-  });
-  className: ''                         // for pagination class
-}
-```
-
-### TEXTAREA
-
-```
-{
-  size: '16px',                                         // for font size
-  radius: '6px',                                        // for border radius
-  className: '',                                        // for Textarera class
-  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
-  showCharacterCount: true,                             // for showing textarea character count ( set itself without configuration file)
-  boxShadow: '0 0 0 2px #d1d1d1',                       // for border size and color
-  labelFontFamily: 'Arial, sans-serif',                 s// for label font family
-}
-```
-
-### New AutoComplete
-
-```
-{
-  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
-  labelFontFamily: 'Arial, sans-serif',                 // for label font family
-
-  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: '#FBFBFB',                 // 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
-  contentTopBorder: '2px solid',                        // for autocomplate top block border
-  contentTopBorderColor: '#D1D1D1',                     // for autocomplate top block border color
-  contentTopBoxSizing: 'border-box',                    // for autocomplate top block box sizing
-  contentTopBorderHoverColor: '#3C393E',                // for autocomplate top block border hover color
-  contentTopBorderActiveColor: '#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
-  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
-
-  contentBottomRowHeight: '46px',                       // for autocomplete bottom block inner row height 
-  contentBottomRowDisplay: 'flex',                      // for autocomplete bottom block inner row display
-  contentBottomRowFontWeight: 500,                      // for autocomplete bottom block inner row font weight
-  contentBottomRowColor: '#3C393E',                     // for autocomplete bottom block inner row color
-  contentBottomRowFontSize: '16px',                     // for autocomplete bottom block inner row font size
-  contentBottomRowCursor: 'pointer',                    // for autocomplete bottom block inner row cursor
-  contentBottomRowLineHeight: '22px',                   // for autocomplete bottom block inner row line height
-  contentBottomRowMarginBottom: '2px',                  // for autocomplete bottom block inner row margin bottom
-  contentBottomRowPadding: '0px 15px',                  // for autocomplete bottom block inner row padding
-  contentBottomRowAlignItems: 'center',                 // for autocomplete bottom block inner row align items ( flex )
-  contentBottomRowHoverColor: '#00236A',                // for autocomplete bottom block inner row hove color
-  contentBottomRowBoxSizing: 'border-box',              // for autocomplete bottom block inner row box sizing
-  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
-}
-```
-
-### CAPTCHA
-
-```
-{
-  size: '16px',                                         // for captcha label font size       (configurable from config.js)
-  color: '#3C393E',                                     // for captcha label color           (configurable from config.js)
-  className: '',                                        // for captach class
-  label: 'for example. Captcha',                        // for captcha label                 (add itself on each component)
-  range: 'for example. 72',                             // for captcha range                 (add itself on each component)
-  getRange: 'is must be function',                      // for captcha get current range     (add itself on each 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
-  className: '',                                        // for file class
-  width: '440px',                                       // for file width
-  height: '200px',                                      // for file choose place height
-  color: '#3C393E',                                     // for file place color
-  upload: 'Բեռնել',                                     // for file place text
-  labelSize: '16px',                                    // for file font size
-  errorSize: '12px',                                    // for file error font size
-  border: '2px dashed',                                 // for file choose place border
-  errorColor: '#ee0000',                                // for file error message color
-  labelColor: '#4A4A4D',                                // for file color
-  errorColor: '#ee0000',                                // for file place 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
-  timeForRemoveError: 4000,                             // for file error hide time when format is wrong
-  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
-  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
-
-  uploadBtnFont: 'Arial', // for button font familty
-  uploadBtnSize: '14px', // for button font size
-  uploadBtnLabel: 'Բեռնել', // for button text
-  uploadBtnColor: '#fff', // for button color
-  uploadBtnHeight: '30px', // for button height
-  uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
-}
-```
-
-### MODAL
-```
-{
-  alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
-  justifyContent: 'center',                             // for modal ( flex-start, center, flex-end ) --> justify-content
-  className: '',                                        // for modal class
-  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: '10px 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
-  imageMargin: '0px',                                   // for image margin
-  imageMaxWidth: '100%',                                // for image max width
-  imageWrapHeight: '80vh',                              // for image wrap
-  imageWrapWidth: '100%',                               // for image wrap
-}
-```
-
-### CHECKBOX
-```
-{
-  checkedColor: '#00236A',                              // for checkbox background ( fill ) color
-  unCheckedColor: '#D1D1D1',                            // for checkbox border color
-  labelMarginLeft: '10px',                              // for checkbox label margin left
-  checkBoxMarginBottom: '10px'                          // for checkbox margin bottom
-  className: ''                                         // for checkbox class
-}
-```
-
-### TABLE
-```
-{
-  tHeadFontSize: '16px',                                // for table header font size
-  tHeadFontWeight: 600,                                 // for table header font weight
-  tHeadColor: '#FBFBFB',                                // for table header color
-  tHeadTextAlign: 'center',                             // for table header text align
-  tHeadPadding: '11px 20px',                            // for table header padding
-  tHeadBorderRadius: '14px',                            // for table header border radius
-  tHeadBackgroundColor: '#00236A',                      // for table header background color
-  tHeadFamily: 'Noto Sans Armenia',                     // for table header font family
-
-  tBodyColor: '#3C393E',                                // for table body color
-  tBodyFontSize: '16px',                                // for table body font size
-  tBodyFontWeight: 500,                                 // for table body font weight
-  tBodyTextAlign: 'center',                             // for table body text align
-  tBodyPadding: '11px 20px',                            // for table body padding
-  tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
-  tBodyRowMarginTop: '10px',                            // for table tr margin top
-  tBodyBoxShadow: '',                                   // for table body box shadow
-
-  tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
-  openListColor: '#A3A5A9',                             // for table body opened list color
-  openListFontSize: '',                                 // for table body opened list font size
-  openListFontFamily: '',                               // for table body opened list font family
-  className: '',                                        // for table class
-  tableRowItem: false,                                  // for table tr show item ( boolean prop )
-  tableRowBGColor: 'transparent',                       // for table tr background color
-  tableRowRadius: '6px',                                // for table tr border radius
-  tableRowBoxShadow: '',                                // for table tr box shadow
-  tableColumnMaxWidth: '',                              // for table column max width
-  tableColumnMinWidth: '',                              // for table column min width
-}
-```
-
-### PAGINATION
-```
-{
-  className: '' // for pagination class
-}
-```
-
-```
-### STEPPER
-```
-{
-  className: '' // for pagination class
-}
-```
-
-### RADIO
-```
-{
-  size: '20px',                              // for width and height
-  className: '',                             // for parent element class
-  borderSize: '2px',                         // for border width
-  borderStyle: 'solid',                      // for border style
-  borderColor: '#E7E7E7',                    // for border color
-  radioMarginRight: '10px',                  // for circle margin right
-  borderActiveColor: '#3C3D46',              // for active border color
-  radioItemMarginRight: '10px',              // for radio item margin right ( circle + label )
-  radioItemMarginBottom: '10px',             // for radio item margin bottom ( circle + label )
-
-  labelColor: '#3C3D46',                     // for label color
-  labelFontSize: '16px',                     // for label font size
-  labelFontWeight: '500',                    // for label font weight
-  labelLineHeight: '21px',                   // for label line height
-  labelFontFamily: 'Arial, sans-serif',      // for label font family
-}
-```