@xaypay/tui 0.1.10 → 0.2.0

package/.prettierignore

@@ -0,0 +1 @@
+src/utils/index.js

package/dist/index.es.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import React__default, { useState, useEffect, forwardRef, useRef, useMemo, useImperativeHandle, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import _ from 'lodash';
 import styled, { keyframes, css } from 'styled-components';
 import ReactDOM from 'react-dom';
 
@@ -436,37 +437,39 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default.createElement(SvgListItemDelete, null))));
 });
 
-const _ = require('lodash');
+async function getPProps(type) {
+  let packageResult;
+  let projectResult;
+  const packageImportConfig = await import.meta.glob('../../tui.config.js');
+  const projectImportConfig = await import.meta.glob('../../../../tui.config.js');
+  if (packageImportConfig['../../tui.config.js']) {
+    packageResult = packageImportConfig['../../tui.config.js']().then(module => module.default);
+  }
+  if (projectImportConfig['../../../../tui.config.js']) {
+    projectResult = projectImportConfig['../../../../tui.config.js']().then(module => module.default);
+  }
+  return type === true ? packageResult : projectResult;
+}
+
 let projectConfig = {};
 let packageConfig = {};
-try {
-  packageConfig = require('../tui.config.js');
-} catch (e) {
+async function getProps(type) {
+  let props;
   try {
-    packageConfig = require('../../tui.config.js');
-  } catch (err) {
-    packageConfig = {};
+    const newProps = await getPProps(type);
+    props = _.merge(type === true ? packageConfig : projectConfig, newProps);
+  } catch (error) {
+    console.error('Error in getProps:', error);
   }
+  return props;
 }
-try {
-  projectConfig = require('../../../../tui.config.js');
-} catch (error) {
-  projectConfig = {};
-  // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-}
-const merge = _.merge(packageConfig.default, projectConfig.default);
+packageConfig = getProps(true);
+packageConfig = getProps();
+const merge = _.merge(packageConfig, projectConfig);
 const hasOwnerProperty = (object, property) => {
   return Object.prototype.hasOwnProperty.call(object, property);
 };
 
-const vertical = {
-  top: 'top',
-  bottom: 'bottom'
-};
-const horizontal = {
-  left: 'left',
-  right: 'right'
-};
 const Button = ({
   icon,
   size,
@@ -498,20 +501,6 @@ const Button = ({
   btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
-  title,
-  titleSize,
-  titleFont,
-  titleWidth,
-  titleStyle,
-  titleColor,
-  titleRadius,
-  titleWeight,
-  titlePadding,
-  titleBackgroundColor,
-  titleVerticalDistance,
-  titleVerticalPosition,
-  titleHorizontalDistance,
-  titleHorizontalPosition,
   ...props
 }) => {
   const [isHover, setIsHover] = useState(false);
@@ -522,75 +511,45 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const buttonTemplate = () => {
-    return /*#__PURE__*/React__default.createElement("button", _extends({
-      style: {
-        display: 'flex',
-        outline: 'none',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: size ?? merge.BUTTON.font.size,
-        fontStyle: style ?? merge.BUTTON.font.style,
-        fontFamily: font ?? merge.BUTTON.font.family,
-        height: height ?? merge.BUTTON.height,
-        fontWeight: weight ?? merge.BUTTON.font.weight,
-        padding: padding ?? merge.BUTTON.padding,
-        borderRadius: radius ?? merge.BUTTON.radius,
-        boxSizing: boxSizing ?? merge.BUTTON.box.sizing,
-        transition: transition ?? merge.BUTTON.transition,
-        border: outline ? 'none' : border ?? merge.BUTTON.border,
-        width: contentWidth ? title ? '100%' : 'auto' : width ?? merge.BUTTON.width,
-        cursor: disabled ? 'not-allowed' : cursor ?? merge.BUTTON.cursor,
-        textTransform: textTransform ?? merge.BUTTON.text.transform,
-        backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : merge.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : merge.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : merge.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : merge.BUTTON.colors.background,
-        boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : merge.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : merge.BUTTON.colors.background}` : 'none',
-        color: (outline || !outline) && disabled ? disabledColor ? disabledColor : merge.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : merge.BUTTON.color : backgroundColor ? backgroundColor : merge.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : merge.BUTTON.text.colors.hover : color ? color : merge.BUTTON.color
-      },
-      type: type ?? merge.BUTTON.type,
-      disabled: disabled ?? merge.BUTTON.disabled,
-      onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      className: classProps
-    }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
-      }
-    }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
-  };
   useEffect(() => {
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
     }
   }, []);
-  return title ? /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
-      position: 'relative',
+      display: 'flex',
+      outline: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size ?? merge.BUTTON.font.size,
+      fontStyle: style ?? merge.BUTTON.font.style,
+      fontFamily: font ?? merge.BUTTON.font.family,
       height: height ?? merge.BUTTON.height,
-      width: contentWidth ? '100%' : 'fit-content'
+      fontWeight: weight ?? merge.BUTTON.font.weight,
+      padding: padding ?? merge.BUTTON.padding,
+      borderRadius: radius ?? merge.BUTTON.radius,
+      boxSizing: boxSizing ?? merge.BUTTON.box.sizing,
+      transition: transition ?? merge.BUTTON.transition,
+      border: outline ? 'none' : border ?? merge.BUTTON.border,
+      width: contentWidth ? 'auto' : width ?? merge.BUTTON.width,
+      cursor: disabled ? 'not-allowed' : cursor ?? merge.BUTTON.cursor,
+      textTransform: textTransform ?? merge.BUTTON.text.transform,
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : merge.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : merge.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : merge.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : merge.BUTTON.colors.background,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : merge.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : merge.BUTTON.colors.background}` : 'none',
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : merge.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : merge.BUTTON.color : backgroundColor ? backgroundColor : merge.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : merge.BUTTON.text.colors.hover : color ? color : merge.BUTTON.color
     },
+    type: type ?? merge.BUTTON.type,
+    disabled: disabled ?? merge.BUTTON.disabled,
+    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     className: classProps
-  }, buttonTemplate(), isHover ? /*#__PURE__*/React__default.createElement("p", {
+  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default.createElement("span", {
     style: {
-      position: 'absolute',
-      margin: '0px',
-      top: titleVerticalPosition === 'bottom' ? `calc(100% + ${titleVerticalDistance})` : '',
-      left: titleHorizontalPosition === 'right' ? `calc(100% + ${titleHorizontalDistance})` : '',
-      right: titleHorizontalPosition === 'left' ? `calc(100% + ${titleHorizontalDistance})` : '',
-      bottom: titleVerticalPosition === 'top' ? `calc(100% + ${titleVerticalDistance})` : '',
-      color: titleColor ?? merge.BUTTON.title.color,
-      fontSize: titleSize ?? merge.BUTTON.title.font.size,
-      fontStyle: titleStyle ?? merge.BUTTON.title.font.style,
-      fontFamily: titleFont ?? merge.BUTTON.title.font.family,
-      fontWeight: titleWeight ?? merge.BUTTON.title.font.weight,
-      width: titleWidth ?? merge.BUTTON.title.width,
-      padding: titlePadding ?? merge.BUTTON.title.padding,
-      backgroundColor: titleBackgroundColor ?? merge.BUTTON.title.colors.background,
-      borderRadius: titleRadius ?? merge.BUTTON.title.radius
-    },
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, title) : '') : buttonTemplate();
+      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
+    }
+  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes.string,
@@ -599,6 +558,7 @@ Button.propTypes = {
   weight: PropTypes.string,
   font: PropTypes.string,
   icon: PropTypes.element,
+  hoverIcon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
@@ -612,7 +572,6 @@ Button.propTypes = {
   padding: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
-  hoverIcon: PropTypes.element,
   hoverColor: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
@@ -622,27 +581,7 @@ Button.propTypes = {
   disabledLineColor: PropTypes.string,
   btnIconMarginRight: PropTypes.string,
   backgroundHoverColor: PropTypes.string,
-  disabledBackgroundColor: PropTypes.string,
-  title: PropTypes.string,
-  titleFont: PropTypes.string,
-  titleSize: PropTypes.string,
-  titleColor: PropTypes.string,
-  titleWidth: PropTypes.string,
-  titleStyle: PropTypes.string,
-  titleWeight: PropTypes.string,
-  titleRadius: PropTypes.string,
-  titlePadding: PropTypes.string,
-  titleBackgroundColor: PropTypes.string,
-  titleVerticalDistance: PropTypes.string,
-  titleHorizontalDistance: PropTypes.string,
-  titleVerticalPosition: PropTypes.oneOf(Object.values(vertical)),
-  titleHorizontalPosition: PropTypes.oneOf(Object.values(horizontal))
-};
-Button.defaultProps = {
-  titleVerticalDistance: '4px',
-  titleVerticalPosition: 'top',
-  titleHorizontalPosition: 'left',
-  titleHorizontalDistance: '10px'
+  disabledBackgroundColor: PropTypes.string
 };
 
 const SvgPdf = ({
@@ -773,8 +712,6 @@ const File = /*#__PURE__*/forwardRef(({
   borderStyle,
   borderColor,
   upload,
-  preview,
-  maxSize,
   maxWidth,
   disabled,
   multiple,
@@ -823,7 +760,6 @@ const File = /*#__PURE__*/forwardRef(({
   uploadBtnHoverColor,
   uploadBtnBackgroundColor,
   uploadBtnBackgroundColorHover,
-  fileExtensions,
   listItemHeight,
   backgroundColor,
   deleteComponent,
@@ -842,7 +778,6 @@ const File = /*#__PURE__*/forwardRef(({
   progressTrackColor,
   fileAreaImageWidth,
   listItemErrorColor,
-  timeForRemoveError,
   progressFailedColor,
   fileAreaImageHeight,
   progressSuccessColor,
@@ -852,7 +787,11 @@ const File = /*#__PURE__*/forwardRef(({
   extentionsRowMarginTop,
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
-  maxCHoosenLengthErrorHideTime
+  maxCHoosenLengthErrorHideTime,
+  maxSize = 10,
+  preview = true,
+  timeForRemoveError = 5000,
+  fileExtensions = ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 }, ref) => {
   const inpRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
@@ -1360,12 +1299,6 @@ File.propTypes = {
   filesArray: PropTypes.arrayOf(PropTypes.object),
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
-File.defaultProps = {
-  maxSize: 10,
-  preview: true,
-  timeForRemoveError: 5000,
-  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
-};
 
 const SvgCheckboxUnchecked = ({
   title,
@@ -2494,8 +2427,8 @@ const Table = ({
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? merge.TABLE.body.row.colors.background,
-        borderColor: hideBorder ? 'transparent' : merge.TABLE.body.row.borderColor,
         borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : merge.TABLE.body.row.border,
+        borderColor: hideBorder ? 'transparent' : merge.TABLE.body.row.borderColor,
         boxShadow: (tableRowItem ? tableRowItem : merge.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : merge.TABLE.body.row.box.shadow : 'none'
       }
     }, Object.values(item).map((innerItem, innerIndex) => {
@@ -2683,7 +2616,6 @@ const SvgCloseSlide = ({
 }));
 
 const Modal = ({
-  type,
   data,
   width,
   radius,
@@ -2723,7 +2655,8 @@ const Modal = ({
   imageWrapHeight,
   grayDecorHeight,
   layerBackgroundColor,
-  closeAreaBackgroundColor
+  closeAreaBackgroundColor,
+  type = 'content'
 }) => {
   const [select, setSelect] = useState(0);
   const [isHover, setIsHover] = useState(false);
@@ -3024,9 +2957,6 @@ Modal.propTypes = {
   layerBackgroundColor: PropTypes.string,
   closeAreaBackgroundColor: PropTypes.string
 };
-Modal.defaultProps = {
-  type: 'content'
-};
 
 const handleCheckTypeTel = (val, prevVal) => {
   const phoneNumberRegex = /^\d{0,8}$/;
@@ -3329,7 +3259,6 @@ const P = styled.span`
     animation: ${true};
 `;
 const Input = ({
-  type,
   size,
   name,
   style,
@@ -3389,13 +3318,13 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  telBorderRightColorHover
+  telBorderRightColorHover,
+  type = 'text'
 }) => {
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const inpStyles = {
-    color: color ?? merge.INPUT.color,
     width: width ?? merge.INPUT.width,
     cursor: disabled ? 'not-allowed' : 'auto',
     height: height ?? merge.INPUT.height,
@@ -3405,6 +3334,7 @@ const Input = ({
     fontWeight: weight ?? merge.INPUT.font.weight,
     fontFamily: family ?? merge.INPUT.font.family,
     boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
   const uuid = v4();
@@ -3629,9 +3559,6 @@ Input.propTypes = {
   type: PropTypes.oneOf(Object.values(InputTypes)),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
-Input.defaultProps = {
-  type: 'text'
-};
 
 const RadioDirectionMode = {
   VERTICAL: 'vertical',
@@ -3643,7 +3570,6 @@ const Radio = ({
   getData,
   selected,
   keyNames,
-  diraction,
   className,
   borderSize,
   labelColor,
@@ -3657,7 +3583,8 @@ const Radio = ({
   radioMarginRight,
   borderActiveColor,
   radioItemMarginRight,
-  radioItemMarginBottom
+  radioItemMarginBottom,
+  diraction = 'vertical'
 }) => {
   const classProps = classnames(className ?? merge.RADIO.className);
   const [innerData, setInnerData] = useState([]);
@@ -3800,9 +3727,6 @@ Radio.propTypes = {
   diraction: PropTypes.oneOf(Object.values(RadioDirectionMode)),
   data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
-Radio.defaultProps = {
-  diraction: 'vertical'
-};
 
 const SvgArrow = ({
   title,
@@ -4048,7 +3972,7 @@ const Select = ({
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      color: isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.SELECT.selected.color
+      color: errorMessage ? errorColor ? errorColor : merge.SELECT.error.color : isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -4324,12 +4248,12 @@ const ToasterPosition = {
 const Toast = ({
   type,
   icon,
-  title,
-  timer,
-  position,
   closeIcon,
   removeToast,
-  description
+  description,
+  timer = 5000,
+  position = 'top-right',
+  title = 'toaster title'
 }) => {
   let timeoutCall;
   let timeoutClick;
@@ -4427,11 +4351,6 @@ Toast.propTypes = {
   position: PropTypes.oneOf(Object.values(ToasterPosition)),
   type: PropTypes.oneOf(Object.values(ToasterType)).isRequired
 };
-Toast.defaultProps = {
-  timer: 5000,
-  position: 'top-right',
-  title: 'toaster title'
-};
 
 let toastify;
 let path = window.location.href;
@@ -4475,7 +4394,8 @@ const createToast = ({
     description,
     removeToast
   });
-  ReactDOM.render(newElem, toastBlock);
+  const root = ReactDOM.createRoot(toastBlock);
+  root.render(newElem);
   if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
@@ -4612,7 +4532,6 @@ var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":
 styleInject(css_248z$5);
 
 const Tooltip = ({
-  type,
   text,
   width,
   color,
@@ -4627,7 +4546,8 @@ const Tooltip = ({
   tooltipWidth,
   tooltipRadius,
   backgroundColor,
-  tooltipBackgroundColor
+  tooltipBackgroundColor,
+  type = 'top'
 }) => {
   const tooltipRef = /*#__PURE__*/createRef(null);
   const classProps = classnames(styles$4['tooltip-block'], className ?? merge.TOOLTIP.className);
@@ -4704,9 +4624,6 @@ Tooltip.propTypes = {
   backgroundColor: PropTypes.string,
   tooltipBackgroundColor: PropTypes.string
 };
-Tooltip.defaultProps = {
-  type: 'top'
-};
 
 const SvgCaptchaArrowUp = ({
   title,
@@ -4917,13 +4834,13 @@ const Checkbox = ({
   getData,
   keyNames,
   className,
-  direction,
   checkedColor,
   unCheckedColor,
   checkedIcon,
   unCheckedIcon,
   labelMarginLeft,
-  checkBoxMarginBottom
+  checkBoxMarginBottom,
+  direction = 'vertical'
 }) => {
   const classProps = classnames(className ?? merge.CHECKBOX.className);
   const [innerData, setInnerData] = useState([]);
@@ -5008,9 +4925,6 @@ Checkbox.propTypes = {
   direction: PropTypes.oneOf(Object.values(DirectionMode)),
   data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
-Checkbox.defaultProps = {
-  direction: 'vertical'
-};
 
 var css_248z$2 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
 styleInject(css_248z$2);
@@ -5060,7 +4974,7 @@ const Textarea = ({
   borderHoverColor,
   labelMarginBottom,
   showCharacterCount,
-  characterCountPosition
+  characterCountPosition = 'top'
 }) => {
   const classProps = classnames(className ?? merge.TEXTAREA.className);
   const [error, setError] = useState('');
@@ -5232,9 +5146,6 @@ Textarea.propTypes = {
   onChange: PropTypes.func.isRequired,
   characterCountPosition: PropTypes.oneOf(Object.values(PositionSide))
 };
-Textarea.defaultProps = {
-  characterCountPosition: 'top'
-};
 
 const TypographyType = {
   p: 'p',
@@ -5253,7 +5164,6 @@ const Typography = ({
   radius,
   border,
   cursor,
-  variant,
   onClick,
   children,
   textAlign,
@@ -5266,6 +5176,7 @@ const Typography = ({
   textTransform,
   textDecoration,
   backgroundColor,
+  variant = 'p',
   ...props
 }) => {
   const classProps = classnames(className ?? merge.TYPOGRAPHY.className);
@@ -5327,9 +5238,6 @@ Typography.propTypes = {
   variant: PropTypes.oneOf(Object.values(TypographyType)),
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Typography.defaultProps = {
-  variant: 'p'
-};
 
 var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
 var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
@@ -5416,7 +5324,7 @@ const SvgNextarrow = ({
 
 const Pagination = ({
   goTo,
-  offset,
+  offset = 2,
   onChange,
   className,
   totalCount,
@@ -5575,9 +5483,6 @@ Pagination.propTypes = {
   className: PropTypes.string,
   currentPage: PropTypes.number
 };
-Pagination.defaultProps = {
-  offset: 2
-};
 
 var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}";
 var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9"};
@@ -5588,9 +5493,7 @@ const Autocomplete = ({
   change,
   options,
   getItem,
-  keyNames,
   required,
-  disabled,
   selected,
   className,
   errorSize,
@@ -5603,7 +5506,6 @@ const Autocomplete = ({
   errorColor,
   labelColor,
   labelWeight,
-  searchCount,
   placeHolder,
   errorMessage,
   autoComplete,
@@ -5665,6 +5567,12 @@ const Autocomplete = ({
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
   backgroundDisableColor,
+  searchCount = 3,
+  disabled = false,
+  keyNames = {
+    name: 'name',
+    id: 'id'
+  },
   ...props
 }) => {
   const [id, setId] = useState('');
@@ -5968,13 +5876,5 @@ Autocomplete.propTypes = {
   contentBottomRowHoverBackgroundColor: PropTypes.string,
   backgroundDisableColor: PropTypes.string
 };
-Autocomplete.defaultProps = {
-  searchCount: 3,
-  disabled: false,
-  keyNames: {
-    name: 'name',
-    id: 'id'
-  }
-};
 
 export { Autocomplete, Button, Captcha, Checkbox, DirectionMode, File, Input, InputTypes, Modal, Pagination, PositionSide, Radio, RadioDirectionMode, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };