@xaypay/tui 0.2.2 → 0.2.4

package/dist/index.js

@@ -47,12 +47,10 @@ function rng() {
   if (!getRandomValues) {
     // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
     getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
     if (!getRandomValues) {
       throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
     }
   }
-
   return getRandomValues(rnds8);
 }
 
@@ -62,11 +60,9 @@ function rng() {
  */
 
 const byteToHex = [];
-
 for (let i = 0; i < 256; ++i) {
   byteToHex.push((i + 0x100).toString(16).slice(1));
 }
-
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
@@ -82,7 +78,6 @@ function v4(options, buf, offset) {
   if (native.randomUUID && !buf && !options) {
     return native.randomUUID();
   }
-
   options = options || {};
   const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
 
@@ -91,14 +86,11 @@ function v4(options, buf, offset) {
 
   if (buf) {
     offset = offset || 0;
-
     for (let i = 0; i < 16; ++i) {
       buf[offset + i] = rnds[i];
     }
-
     return buf;
   }
-
   return unsafeStringify(rnds);
 }
 
@@ -1128,7 +1120,7 @@ var packageResult = {
       marginLeft: '10px'
     }
 
-    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),      
+    // checkedIcon: React.createElement(SvgChecked, { fill: 'green' }),   
     // unCheckedIcon: React.createElement(<SvgUnchecked fill="#E00" />),
   },
   // default properties for <Table /> component
@@ -1261,7 +1253,7 @@ async function getProps() {
 }
 
 var configStylesPromise = getProps();
-const hasOwnerProperty = (object, property) => {
+const hasOwnerProperty$1 = (object, property) => {
   return Object.prototype.hasOwnProperty.call(object, property);
 };
 
@@ -1307,6 +1299,9 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.BUTTON.className));
+  }, [className]);
   React.useEffect(() => {
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
@@ -1812,6 +1807,9 @@ const File = /*#__PURE__*/React.forwardRef(({
       alert('Please add change prop on File component');
     }
   }, [change]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.FILE.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.FILE.className));
@@ -2209,9 +2207,9 @@ const Checkbox$1 = ({
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
   }, innerChecked && (ignoreDisabledForChecked ?? !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ?? configStylesPromise.CHECKBOX.checkedColor
+    fillColor: checkedColor
   }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ?? configStylesPromise.CHECKBOX.unCheckedColor
+    fillColor: unCheckedColor
   }), label && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       marginLeft: labelMarginLeft
@@ -2260,12 +2258,12 @@ const SingleCheckbox = ({
     disabled: disabled,
     innerIndex: innerIndex,
     checkedIcon: checkedIcon,
-    checkedColor: checkedColor,
     unCheckedIcon: unCheckedIcon,
     handleChecked: handleChecked,
-    unCheckedColor: unCheckedColor,
     ignoreDisabledForChecked: ignoreDisabledForChecked,
-    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.labelMarginLeft
+    checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+    unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
+    labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
   });
 };
 SingleCheckbox.propTypes = {
@@ -2285,15 +2283,14 @@ SingleCheckbox.propTypes = {
 };
 
 function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
+  if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
   style.type = 'text/css';
-
   if (insertAt === 'top') {
     if (head.firstChild) {
       head.insertBefore(style, head.firstChild);
@@ -2303,7 +2300,6 @@ function styleInject(css, ref) {
   } else {
     head.appendChild(style);
   }
-
   if (style.styleSheet) {
     style.styleSheet.cssText = css;
   } else {
@@ -2334,7 +2330,7 @@ const TH = ({
   handleCheckArrowActionHeader
 }) => {
   const handleCheckArrowAction = (e, object, property) => {
-    if (hasOwnerProperty(object, property)) {
+    if (hasOwnerProperty$1(object, property)) {
       handleCheckArrowActionHeader(e, object);
     }
   };
@@ -2355,14 +2351,14 @@ const TH = ({
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     },
     onClick: handleHeaderItemClick,
-    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$9['sorting-arrows'] : '' : ''}`
+    className: `${hasOwnerProperty$1(item, 'sortingArrows') ? item.sortingArrows === true ? styles$9['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tHeadTextAlign ? tHeadTextAlign === 'left' ? 'flex-start' : tHeadTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
+      justifyContent: hasOwnerProperty$1(item, 'checkBox') ? 'space-between' : tHeadTextAlign ? tHeadTextAlign === 'left' ? 'flex-start' : tHeadTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
-  }, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty$1(item, 'checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     checked: item.checkBox.checked,
     disabled: item.checkBox.disabled,
@@ -2374,7 +2370,7 @@ const TH = ({
       margin: '0px'
     },
     onClick: e => handleCheckArrowAction(e, item, 'arrowComponent')
-  }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
+  }, item.type === 'show' ? item.content : hasOwnerProperty$1(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
 const TD = ({
@@ -2419,7 +2415,7 @@ const TD = ({
     handleBodyActionClick(e, actionData);
   };
   const handleCheckActions = (e, object, property, objectIndex) => {
-    if (hasOwnerProperty(object, property)) {
+    if (hasOwnerProperty$1(object, property)) {
       handleBodyAction(e, {
         item: object,
         itemIndex: objectIndex
@@ -2462,7 +2458,7 @@ const TD = ({
       maxWidth: tableColumnMaxWidth,
       whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
       borderColor: hideBorder ? 'transparent' : borderRightColor,
-      boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
+      boxShadow: hasOwnerProperty$1(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
@@ -2475,7 +2471,7 @@ const TD = ({
           width: '32px',
           height: '32px',
           marginRight: '10px',
-          cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto'
+          cursor: hasOwnerProperty$1(newItem, 'type') ? 'pointer' : 'auto'
         },
         id: newItem.id,
         type: newItem.type,
@@ -2497,7 +2493,7 @@ const TD = ({
             width: '32px',
             height: '32px',
             marginRight: '10px',
-            cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto'
+            cursor: hasOwnerProperty$1(iT, 'type') ? 'pointer' : 'auto'
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
@@ -2515,9 +2511,9 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tBodyTextAlign ? tBodyTextAlign === 'left' ? 'flex-start' : tBodyTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
+      justifyContent: hasOwnerProperty$1(item, 'checkBox') ? 'space-between' : tBodyTextAlign ? tBodyTextAlign === 'left' ? 'flex-start' : tBodyTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
-  }, !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !hasOwnerProperty$1(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty$1(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty$1(item, 'contentList') && (hasOwnerProperty$1(item, 'closeArrow') || hasOwnerProperty$1(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
       width: '21px',
@@ -2526,7 +2522,7 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty$1(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty$1(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -2538,18 +2534,18 @@ const TD = ({
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       flexShrink: 11,
-      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '11px' : '0px' : '0px',
-      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
+      marginLeft: hasOwnerProperty$1(item, 'contentList') && (!hasOwnerProperty$1(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty$1(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty$1(item, 'closeArrow') || hasOwnerProperty$1(item, 'openArrow') ? '11px' : '0px' : '0px',
+      marginRight: hasOwnerProperty$1(item, 'contentList') && (!hasOwnerProperty$1(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty$1(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       textAlign: tBodyTextAlign,
       margin: '0px',
-      cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto',
+      cursor: hasOwnerProperty$1(item, 'arrowComponent') || hasOwnerProperty$1(item, 'dots') ? 'pointer' : 'auto',
       ...item.props
     },
-    onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
-  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: hasOwnerProperty$1(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty$1(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
+  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty$1(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty$1(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
@@ -2570,7 +2566,7 @@ const TD = ({
       backgroundColor: '#FFFFFF',
       boxShadow: '0px 0px 20px 0px #3C393E4D'
     }
-  }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
+  }, hasOwnerProperty$1(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
       className: styles$9['dots-option-item'],
@@ -2595,7 +2591,7 @@ const TD = ({
       },
       title: optionItem.content
     }, optionItem.content === 0 ? optionItem.content.toString() : optionItem.content ? optionItem.content : ''));
-  }))) : ''), hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : ''), hasOwnerProperty$1(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflow: 'auto',
       marginTop: '10px',
@@ -2644,7 +2640,7 @@ const TD = ({
         onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
       }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
     }
-  }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), !hasOwnerProperty$1(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty$1(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty$1(item, 'contentList') && (hasOwnerProperty$1(item, 'closeArrow') || hasOwnerProperty$1(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
       width: '21px',
@@ -2653,7 +2649,7 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
+  }, hasOwnerProperty$1(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
 const SvgUpArrow = ({
@@ -2758,7 +2754,7 @@ const Table = ({
     bodyData.map((item, index) => {
       if (index === data.index) {
         item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'arrowComponent')) {
+          if (hasOwnerProperty$1(innerItem, 'arrowComponent')) {
             removeItemIndex = innerIndex;
           }
         });
@@ -2782,7 +2778,7 @@ const Table = ({
       let removeItemIndex;
       let headerWithoutArrow;
       header.map((item, index) => {
-        if (hasOwnerProperty(item, 'arrowComponent')) {
+        if (hasOwnerProperty$1(item, 'arrowComponent')) {
           removeItemIndex = index;
         }
       });
@@ -2822,7 +2818,7 @@ const Table = ({
     let checkedItems = [];
     data.map((item, index) => {
       item.map((innerItem, innerIndex) => {
-        if (hasOwnerProperty(innerItem, 'checkBox')) {
+        if (hasOwnerProperty$1(innerItem, 'checkBox')) {
           if (!checkedItems[innerIndex]) {
             checkedItems[innerIndex] = [];
           }
@@ -2902,7 +2898,7 @@ const Table = ({
         checkableItemBool = !item.checkBox.checked;
         item.checkBox.checked = !item.checkBox.checked;
       }
-      if (hasOwnerProperty(item, 'arrowComponent')) {
+      if (hasOwnerProperty$1(item, 'arrowComponent')) {
         removeItemIndex = index;
       }
       return item;
@@ -2910,7 +2906,7 @@ const Table = ({
     const newUpdatedBody = updatedBody.map((item, index) => {
       return item.map((innerItem, innerIndex) => {
         if (checkableItemIndex === innerIndex) {
-          if (!hasOwnerProperty(innerItem.checkBox, 'disabled') || innerItem.checkBox.disabled !== true) {
+          if (!hasOwnerProperty$1(innerItem.checkBox, 'disabled') || innerItem.checkBox.disabled !== true) {
             innerItem.checkBox.checked = checkableItemBool;
             checkableBodyRowItems.push({
               column: innerIndex,
@@ -2954,7 +2950,7 @@ const Table = ({
     const updatedBody = body.slice().map(item => Object.values(item));
     const newData = updatedBody.map((item, index) => {
       return item.map((innerItem, innerIndex) => {
-        if (innerItem.id === data.id && innerItem.content == data.content && hasOwnerProperty(innerItem, 'checkBox')) {
+        if (innerItem.id === data.id && innerItem.content == data.content && hasOwnerProperty$1(innerItem, 'checkBox')) {
           innerItem.checkBox.checked = !innerItem.checkBox.checked;
           handleHeaderCheckedUpdate({
             row: index,
@@ -3011,7 +3007,7 @@ const Table = ({
   const handleCheckArrowAction = (item, rowPosition) => {
     const status = item.status;
     const checkedOpenableRow = body[rowPosition].map(innerItem => {
-      if (hasOwnerProperty(innerItem, 'status')) {
+      if (hasOwnerProperty$1(innerItem, 'status')) {
         if (status === 'close') {
           innerItem.status = 'open';
         } else {
@@ -3037,13 +3033,13 @@ const Table = ({
         }
         single = item;
       }
-      if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
+      if (hasOwnerProperty$1(item, 'status') && !hasOwnerProperty$1(item, 'arrowComponent')) {
         allArrows.push(item);
       }
       return item;
     });
     const checkedOpenableRowArrow = checkedOpenableRow.map(item => {
-      if (hasOwnerProperty(item, 'arrowComponent')) {
+      if (hasOwnerProperty$1(item, 'arrowComponent')) {
         if (single && single.status === 'close') {
           item.status = 'close';
         } else if (single && single.status === 'open') {
@@ -3052,7 +3048,7 @@ const Table = ({
           }
         }
       }
-      if (hasOwnerProperty(clickableItem, 'theSame') && hasOwnerProperty(item, 'theSame') && clickableItem.theSame === item.theSame) {
+      if (hasOwnerProperty$1(clickableItem, 'theSame') && hasOwnerProperty$1(item, 'theSame') && clickableItem.theSame === item.theSame) {
         item.status = clickableItem.status;
       }
       return item;
@@ -3076,7 +3072,7 @@ const Table = ({
     });
     const checkedOpenableAllRowsBody = body.map(innerItem => {
       return innerItem.map(iElem => {
-        if (hasOwnerProperty(iElem, 'status')) {
+        if (hasOwnerProperty$1(iElem, 'status')) {
           if (item.status === 'open') {
             iElem.status = 'open';
           } else {
@@ -3093,7 +3089,7 @@ const Table = ({
     e.stopPropagation();
     const checkBodyMore = body.map((elemItem, elemIndex) => {
       return elemItem.map((elemInnerItem, elemInnerIndex) => {
-        if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
+        if (elemIndex === index && hasOwnerProperty$1(elemInnerItem, 'dots')) {
           if (elemInnerIndex === innerIndex) {
             if (item.dotsStatus === 'deActive') {
               elemInnerItem.dotsStatus = 'active';
@@ -3101,7 +3097,7 @@ const Table = ({
               elemInnerItem.dotsStatus = 'deActive';
             }
           }
-        } else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
+        } else if (elemIndex !== index && hasOwnerProperty$1(elemInnerItem, 'dots')) {
           if (elemInnerIndex === innerIndex) {
             elemInnerItem.dotsStatus = 'deActive';
           }
@@ -3150,7 +3146,7 @@ const Table = ({
   const handleTableClick = () => {
     const checkBodyMore = body.map(elemItem => {
       return elemItem.map(elemInnerItem => {
-        if (hasOwnerProperty(elemInnerItem, 'dots')) {
+        if (hasOwnerProperty$1(elemInnerItem, 'dots')) {
           elemInnerItem.dotsStatus = 'deActive';
         }
         return elemInnerItem;
@@ -3167,8 +3163,8 @@ const Table = ({
       const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
       const insert = checkForInsertArrow.map((item, index) => {
         item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+          if (hasOwnerProperty$1(innerItem, 'checkBox')) {
+            if (hasOwnerProperty$1(innerItem.checkBox, 'disabled')) {
               if (innerItem.checkBox.disabled === true) {
                 if (!disabledArray[innerIndex]) {
                   disabledArray[innerIndex] = {
@@ -3187,8 +3183,8 @@ const Table = ({
     } else {
       const insert = checkBodyForChackedItems.map((item, index) => {
         item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+          if (hasOwnerProperty$1(innerItem, 'checkBox')) {
+            if (hasOwnerProperty$1(innerItem.checkBox, 'disabled')) {
               if (innerItem.checkBox.disabled === true) {
                 if (!disabledArray[innerIndex]) {
                   disabledArray[innerIndex] = {
@@ -3218,6 +3214,9 @@ const Table = ({
       setHeader(() => dataHeader);
     }
   }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TABLE.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.TABLE.className));
@@ -3569,6 +3568,9 @@ const Modal = ({
       }
     }
   }, [selected]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.MODAL.className));
+  }, [className]);
   React.useEffect(() => {
     document.addEventListener('keydown', handleESC, false);
     configStylesPromise.then(data => {
@@ -3706,7 +3708,7 @@ const Modal = ({
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
-      if (!hasOwnerProperty(item, 'url')) {
+      if (!hasOwnerProperty$1(item, 'url')) {
         alert('Please add url property in data prop on each element');
       } else {
         return /*#__PURE__*/React__default["default"].createElement("span", {
@@ -4180,6 +4182,7 @@ const Input = ({
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
+  const [innerValue, setInnerValue] = React.useState('');
   const [configStyles, setConfigStyles] = React.useState({});
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const inpStyles = configStyles.INPUT && {
@@ -4233,6 +4236,13 @@ const Input = ({
       !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
   }, [type, regexp, errorMessage, regexpErrorMessage]);
+  React.useEffect(() => {
+    const val = typeof value === 'number' ? value.toString() : value;
+    setInnerValue(() => val);
+  }, [value]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']));
@@ -4284,7 +4294,7 @@ const Input = ({
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
     type: type,
-    value: value,
+    value: innerValue,
     inputChange: change,
     isHover: isHover,
     disabled: disabled,
@@ -4299,8 +4309,8 @@ const Input = ({
     telBorderRightColor: telBorderRightColor ?? configStyles.INPUT.tel.borderRight.color,
     telBorderRightColorHover: telBorderRightColorHover ?? configStyles.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
-    value: value,
     dots: withoutDot,
+    value: innerValue,
     float: floatToFix,
     disabled: disabled,
     inputChange: change,
@@ -4313,7 +4323,7 @@ const Input = ({
   }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
     show: show,
     type: type,
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     maxLength: maxLength,
@@ -4321,7 +4331,7 @@ const Input = ({
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius
   }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
-    value: value,
+    value: innerValue,
     disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
@@ -4426,7 +4436,31 @@ Input.propTypes = {
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])
+};
+
+const hasOwnerProperty = (object, property) => {
+  return Object.prototype.hasOwnProperty.call(object, property);
+};
+const handleUtilsMouseEnterLeave = (e, behaviourStyle) => {
+  if (typeof behaviourStyle !== 'object' || behaviourStyle === null || behaviourStyle === undefined) {
+    alert('Please set a second param of handleUtilsMouseEnter function as valid object');
+    return;
+  }
+  if (!hasOwnerProperty(e, 'target')) {
+    alert('Please set a valid object like DOM event');
+    return;
+  }
+  const existStyle = e.target.style;
+  if (typeof existStyle !== 'object' || existStyle === null) {
+    alert('Please set a valid style object in DOM event tergat');
+    return;
+  }
+  for (const property in behaviourStyle) {
+    if (existStyle[property]) {
+      existStyle[property] = behaviourStyle[property];
+    }
+  }
 };
 
 const RadioDirectionMode = {
@@ -4468,6 +4502,18 @@ const Radio = ({
   });
   const handleMouseEnter = (id, elemID) => {
     const elem = document.querySelector(`#${elemID}`);
+    // const newStyles = {
+    //     backgroundColor:
+    //     id === innerSelectedData?.id
+    //         ? borderActiveColor
+    //             ? borderActiveColor
+    //             : configStyles.RADIO.border.activeColor
+    //         : borderColor
+    //           ? borderColor
+    //           : configStyles.RADIO.border.color
+    // }
+    // handleUtilsMouseEnterLeave(e, newStyles);
+
     elem.style.backgroundColor = id === innerSelectedData?.id ? borderActiveColor ? borderActiveColor : configStyles.RADIO.border.activeColor : borderColor ? borderColor : configStyles.RADIO.border.color;
   };
   const handleMouseLeave = (id, elemID) => {
@@ -4520,6 +4566,9 @@ const Radio = ({
       });
     }
   }, [keyNames]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.RADIO.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.RADIO.className));
@@ -4713,7 +4762,7 @@ const Select = ({
     onChange({});
     setNewSelected([]);
     const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
-      if (hasOwnerProperty(item, 'checked')) {
+      if (hasOwnerProperty$1(item, 'checked')) {
         item.checked = false;
       }
       return item;
@@ -4763,7 +4812,7 @@ const Select = ({
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
-      if (hasOwnerProperty(obj, key)) {
+      if (hasOwnerProperty$1(obj, key)) {
         return false;
       }
     }
@@ -4807,6 +4856,9 @@ const Select = ({
       setExistOptions(modifiedOptions);
     }
   }, [options, multiple, selected, selected?.length]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.SELECT.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.SELECT.className));
@@ -5393,6 +5445,9 @@ const Toaster = ({
   const handleToasterClick = e => {
     e.stopPropagation();
   };
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TOASTER.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.TOASTER.className));
@@ -5469,6 +5524,9 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setCheckTooltipWidth(tooltipRef.current.clientWidth);
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TOOLTIP.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](styles$4['tooltip-block'], className ?? data.TOOLTIP.className));
@@ -5620,6 +5678,9 @@ const Captcha = ({
       setRangeNumber(Math.min(roundedRange, 100));
     }
   }, [range, getRange]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.CAPTCHA.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.CAPTCHA.className));
@@ -5735,6 +5796,9 @@ const Stepper = ({
 }) => {
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.STEPPER.className, `${styles$2['stepper-container']} stepper-container-rem`));
@@ -5828,6 +5892,9 @@ const Checkbox = ({
       });
     }
   }, [keyNames]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.CHECKBOX.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.CHECKBOX.className));
@@ -5861,12 +5928,12 @@ const Checkbox = ({
       label: item[innerKeyNames.label],
       checked: item[innerKeyNames.checked],
       disabled: item[innerKeyNames.disabled],
-      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
-      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft,
+      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
       checkedColor: checkedColor ?? configStyles.CHECKBOX.colors.checked,
+      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon,
+      ignoreDisabledForChecked: item[innerKeyNames.ignoreDisabledForChecked],
       unCheckedColor: unCheckedColor ?? configStyles.CHECKBOX.colors.unChecked,
-      checkedIcon: checkedIcon ?? configStyles.CHECKBOX.checkedIcon,
-      unCheckedIcon: unCheckedIcon ?? configStyles.CHECKBOX.unCheckedIcon
+      labelMarginLeft: labelMarginLeft ?? configStyles.CHECKBOX.label.marginLeft
     }));
   }));
 };
@@ -5981,6 +6048,9 @@ const Textarea = ({
     }
     setInnerValue(() => value);
   }, [value, errorMessage]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TEXTAREA.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.TEXTAREA.className));
@@ -6187,6 +6257,9 @@ const Typography = ({
       setValidVariant(true);
     }
   }, [variant]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.TYPOGRAPHY.className));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.TYPOGRAPHY.className));
@@ -6319,6 +6392,25 @@ const Pagination = ({
   const [configStyles, setConfigStyles] = React.useState({});
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
+  React.useEffect(() => {
+    configStylesPromise.then(data => {
+      setClassProps(() => classnames__default["default"](
+      // TODO: check and remove pagination-bar-rem class
+      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+      setConfigStyles(() => {
+        return {
+          ...data
+        };
+      });
+    }, error => {
+      console.error(error);
+    });
+  }, []);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](
+    // TODO: check and remove pagination-bar-rem class
+    styles$1.list, className ?? configStyles.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
+  }, [className]);
   React.useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
@@ -6388,20 +6480,6 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  React.useEffect(() => {
-    configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](
-      // TODO: check and remove pagination-bar-rem class
-      styles$1.list, className ?? data.PAGINATION.className, `${styles$1['pagination-bar']} pagination-bar-rem`));
-      setConfigStyles(() => {
-        return {
-          ...data
-        };
-      });
-    }, error => {
-      console.error(error);
-    });
-  }, []);
   return configStyles.PAGINATION && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -6595,12 +6673,18 @@ const Autocomplete = ({
     setIsHover(false);
   };
   const handleRowMouseEnter = e => {
-    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.hover;
-    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.backgroundHover;
+    const newStyles = {
+      color: contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.hover,
+      backgroundColor: contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.backgroundHover
+    };
+    handleUtilsMouseEnterLeave(e, newStyles);
   };
   const handleRowMouseLeave = e => {
-    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottom.row.color;
-    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.background;
+    const newStyles = {
+      color: contentBottomRowColor ? contentBottomRowColor : configStyles.AUTOCOMPLETE.contentBottom.row.color,
+      backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.AUTOCOMPLETE.contentBottom.row.colors.background
+    };
+    handleUtilsMouseEnterLeave(e, newStyles);
   };
   const handleFocus = () => {
     setIsFocus(true);
@@ -6692,7 +6776,7 @@ const Autocomplete = ({
       alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
-      if (!hasOwnerProperty(item, keyNames.name)) {
+      if (!hasOwnerProperty$1(item, keyNames.name)) {
         alert(`Please add ${keyNames.name} property in items of options array`);
       }
     });
@@ -6718,6 +6802,9 @@ const Autocomplete = ({
   React.useEffect(() => {
     setInnerError(errorMessage);
   }, [errorMessage]);
+  React.useEffect(() => {
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.AUTOCOMPLETE.className, styles['auto-complete']));
+  }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.AUTOCOMPLETE.className, styles['auto-complete']));