@xaypay/tui 0.1.9 → 0.2.0

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var classnames = require('classnames');
+var _ = require('lodash');
 var styled = require('styled-components');
 var ReactDOM = require('react-dom');
 
@@ -32,6 +33,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
@@ -466,37 +468,39 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   }, iconDelItem ? iconDelItem : /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
 });
 
-const _ = require('lodash');
+async function getPProps(type) {
+  let packageResult;
+  let projectResult;
+  const packageImportConfig = await undefined('../../tui.config.js');
+  const projectImportConfig = await undefined('../../../../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 = ___default["default"].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 = ___default["default"].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,
@@ -528,20 +532,6 @@ const Button = ({
   btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
-  title,
-  titleSize,
-  titleFont,
-  titleWidth,
-  titleStyle,
-  titleColor,
-  titleRadius,
-  titleWeight,
-  titlePadding,
-  titleBackgroundColor,
-  titleVerticalDistance,
-  titleVerticalPosition,
-  titleHorizontalDistance,
-  titleHorizontalPosition,
   ...props
 }) => {
   const [isHover, setIsHover] = React.useState(false);
@@ -552,75 +542,45 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const buttonTemplate = () => {
-    return /*#__PURE__*/React__default["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["default"].createElement("span", {
-      style: {
-        marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
-      }
-    }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
-  };
   React.useEffect(() => {
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
     }
   }, []);
-  return title ? /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["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["default"].createElement("p", {
+  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["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__default["default"].string,
@@ -629,6 +589,7 @@ Button.propTypes = {
   weight: PropTypes__default["default"].string,
   font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
+  hoverIcon: PropTypes__default["default"].element,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
@@ -642,7 +603,6 @@ Button.propTypes = {
   padding: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  hoverIcon: PropTypes__default["default"].element,
   hoverColor: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
@@ -652,27 +612,7 @@ Button.propTypes = {
   disabledLineColor: PropTypes__default["default"].string,
   btnIconMarginRight: PropTypes__default["default"].string,
   backgroundHoverColor: PropTypes__default["default"].string,
-  disabledBackgroundColor: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string,
-  titleFont: PropTypes__default["default"].string,
-  titleSize: PropTypes__default["default"].string,
-  titleColor: PropTypes__default["default"].string,
-  titleWidth: PropTypes__default["default"].string,
-  titleStyle: PropTypes__default["default"].string,
-  titleWeight: PropTypes__default["default"].string,
-  titleRadius: PropTypes__default["default"].string,
-  titlePadding: PropTypes__default["default"].string,
-  titleBackgroundColor: PropTypes__default["default"].string,
-  titleVerticalDistance: PropTypes__default["default"].string,
-  titleHorizontalDistance: PropTypes__default["default"].string,
-  titleVerticalPosition: PropTypes__default["default"].oneOf(Object.values(vertical)),
-  titleHorizontalPosition: PropTypes__default["default"].oneOf(Object.values(horizontal))
-};
-Button.defaultProps = {
-  titleVerticalDistance: '4px',
-  titleVerticalPosition: 'top',
-  titleHorizontalPosition: 'left',
-  titleHorizontalDistance: '10px'
+  disabledBackgroundColor: PropTypes__default["default"].string
 };
 
 const SvgPdf = ({
@@ -803,8 +743,6 @@ const File = /*#__PURE__*/React.forwardRef(({
   borderStyle,
   borderColor,
   upload,
-  preview,
-  maxSize,
   maxWidth,
   disabled,
   multiple,
@@ -853,7 +791,6 @@ const File = /*#__PURE__*/React.forwardRef(({
   uploadBtnHoverColor,
   uploadBtnBackgroundColor,
   uploadBtnBackgroundColorHover,
-  fileExtensions,
   listItemHeight,
   backgroundColor,
   deleteComponent,
@@ -872,7 +809,6 @@ const File = /*#__PURE__*/React.forwardRef(({
   progressTrackColor,
   fileAreaImageWidth,
   listItemErrorColor,
-  timeForRemoveError,
   progressFailedColor,
   fileAreaImageHeight,
   progressSuccessColor,
@@ -882,7 +818,11 @@ const File = /*#__PURE__*/React.forwardRef(({
   extentionsRowMarginTop,
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
-  maxCHoosenLengthErrorHideTime
+  maxCHoosenLengthErrorHideTime,
+  maxSize = 10,
+  preview = true,
+  timeForRemoveError = 5000,
+  fileExtensions = ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 }, ref) => {
   const inpRef = React.useRef(null);
   const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
@@ -1390,12 +1330,6 @@ File.propTypes = {
   filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
   fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 };
-File.defaultProps = {
-  maxSize: 10,
-  preview: true,
-  timeForRemoveError: 5000,
-  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
-};
 
 const SvgCheckboxUnchecked = ({
   title,
@@ -2524,8 +2458,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) => {
@@ -2713,7 +2647,6 @@ const SvgCloseSlide = ({
 }));
 
 const Modal = ({
-  type,
   data,
   width,
   radius,
@@ -2753,7 +2686,8 @@ const Modal = ({
   imageWrapHeight,
   grayDecorHeight,
   layerBackgroundColor,
-  closeAreaBackgroundColor
+  closeAreaBackgroundColor,
+  type = 'content'
 }) => {
   const [select, setSelect] = React.useState(0);
   const [isHover, setIsHover] = React.useState(false);
@@ -3054,9 +2988,6 @@ Modal.propTypes = {
   layerBackgroundColor: PropTypes__default["default"].string,
   closeAreaBackgroundColor: PropTypes__default["default"].string
 };
-Modal.defaultProps = {
-  type: 'content'
-};
 
 const handleCheckTypeTel = (val, prevVal) => {
   const phoneNumberRegex = /^\d{0,8}$/;
@@ -3359,7 +3290,6 @@ const P = styled__default["default"].span`
     animation: ${true};
 `;
 const Input = ({
-  type,
   size,
   name,
   style,
@@ -3419,13 +3349,13 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  telBorderRightColorHover
+  telBorderRightColorHover,
+  type = 'text'
 }) => {
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const inpStyles = {
-    color: color ?? merge.INPUT.color,
     width: width ?? merge.INPUT.width,
     cursor: disabled ? 'not-allowed' : 'auto',
     height: height ?? merge.INPUT.height,
@@ -3435,6 +3365,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();
@@ -3659,9 +3590,6 @@ Input.propTypes = {
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
 };
-Input.defaultProps = {
-  type: 'text'
-};
 
 const RadioDirectionMode = {
   VERTICAL: 'vertical',
@@ -3673,7 +3601,6 @@ const Radio = ({
   getData,
   selected,
   keyNames,
-  diraction,
   className,
   borderSize,
   labelColor,
@@ -3687,7 +3614,8 @@ const Radio = ({
   radioMarginRight,
   borderActiveColor,
   radioItemMarginRight,
-  radioItemMarginBottom
+  radioItemMarginBottom,
+  diraction = 'vertical'
 }) => {
   const classProps = classnames__default["default"](className ?? merge.RADIO.className);
   const [innerData, setInnerData] = React.useState([]);
@@ -3830,9 +3758,6 @@ Radio.propTypes = {
   diraction: PropTypes__default["default"].oneOf(Object.values(RadioDirectionMode)),
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
-Radio.defaultProps = {
-  diraction: 'vertical'
-};
 
 const SvgArrow = ({
   title,
@@ -4078,7 +4003,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]) {
@@ -4354,12 +4279,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;
@@ -4457,11 +4382,6 @@ Toast.propTypes = {
   position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)),
   type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired
 };
-Toast.defaultProps = {
-  timer: 5000,
-  position: 'top-right',
-  title: 'toaster title'
-};
 
 let toastify;
 let path = window.location.href;
@@ -4505,7 +4425,8 @@ const createToast = ({
     description,
     removeToast
   });
-  ReactDOM__default["default"].render(newElem, toastBlock);
+  const root = ReactDOM__default["default"].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';
@@ -4642,7 +4563,6 @@ var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":
 styleInject(css_248z$5);
 
 const Tooltip = ({
-  type,
   text,
   width,
   color,
@@ -4657,7 +4577,8 @@ const Tooltip = ({
   tooltipWidth,
   tooltipRadius,
   backgroundColor,
-  tooltipBackgroundColor
+  tooltipBackgroundColor,
+  type = 'top'
 }) => {
   const tooltipRef = /*#__PURE__*/React.createRef(null);
   const classProps = classnames__default["default"](styles$4['tooltip-block'], className ?? merge.TOOLTIP.className);
@@ -4734,9 +4655,6 @@ Tooltip.propTypes = {
   backgroundColor: PropTypes__default["default"].string,
   tooltipBackgroundColor: PropTypes__default["default"].string
 };
-Tooltip.defaultProps = {
-  type: 'top'
-};
 
 const SvgCaptchaArrowUp = ({
   title,
@@ -4947,13 +4865,13 @@ const Checkbox = ({
   getData,
   keyNames,
   className,
-  direction,
   checkedColor,
   unCheckedColor,
   checkedIcon,
   unCheckedIcon,
   labelMarginLeft,
-  checkBoxMarginBottom
+  checkBoxMarginBottom,
+  direction = 'vertical'
 }) => {
   const classProps = classnames__default["default"](className ?? merge.CHECKBOX.className);
   const [innerData, setInnerData] = React.useState([]);
@@ -5038,9 +4956,6 @@ Checkbox.propTypes = {
   direction: PropTypes__default["default"].oneOf(Object.values(DirectionMode)),
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].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);
@@ -5090,7 +5005,7 @@ const Textarea = ({
   borderHoverColor,
   labelMarginBottom,
   showCharacterCount,
-  characterCountPosition
+  characterCountPosition = 'top'
 }) => {
   const classProps = classnames__default["default"](className ?? merge.TEXTAREA.className);
   const [error, setError] = React.useState('');
@@ -5262,9 +5177,6 @@ Textarea.propTypes = {
   onChange: PropTypes__default["default"].func.isRequired,
   characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
 };
-Textarea.defaultProps = {
-  characterCountPosition: 'top'
-};
 
 const TypographyType = {
   p: 'p',
@@ -5283,7 +5195,6 @@ const Typography = ({
   radius,
   border,
   cursor,
-  variant,
   onClick,
   children,
   textAlign,
@@ -5296,6 +5207,7 @@ const Typography = ({
   textTransform,
   textDecoration,
   backgroundColor,
+  variant = 'p',
   ...props
 }) => {
   const classProps = classnames__default["default"](className ?? merge.TYPOGRAPHY.className);
@@ -5357,9 +5269,6 @@ Typography.propTypes = {
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
   size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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"};
@@ -5446,7 +5355,7 @@ const SvgNextarrow = ({
 
 const Pagination = ({
   goTo,
-  offset,
+  offset = 2,
   onChange,
   className,
   totalCount,
@@ -5605,9 +5514,6 @@ Pagination.propTypes = {
   className: PropTypes__default["default"].string,
   currentPage: PropTypes__default["default"].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"};
@@ -5618,9 +5524,7 @@ const Autocomplete = ({
   change,
   options,
   getItem,
-  keyNames,
   required,
-  disabled,
   selected,
   className,
   errorSize,
@@ -5633,7 +5537,6 @@ const Autocomplete = ({
   errorColor,
   labelColor,
   labelWeight,
-  searchCount,
   placeHolder,
   errorMessage,
   autoComplete,
@@ -5695,6 +5598,12 @@ const Autocomplete = ({
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
   backgroundDisableColor,
+  searchCount = 3,
+  disabled = false,
+  keyNames = {
+    name: 'name',
+    id: 'id'
+  },
   ...props
 }) => {
   const [id, setId] = React.useState('');
@@ -5998,14 +5907,6 @@ Autocomplete.propTypes = {
   contentBottomRowHoverBackgroundColor: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string
 };
-Autocomplete.defaultProps = {
-  searchCount: 3,
-  disabled: false,
-  keyNames: {
-    name: 'name',
-    id: 'id'
-  }
-};
 
 exports.Autocomplete = Autocomplete;
 exports.Button = Button;