@xaypay/tui 0.0.103 → 0.0.105

package/dist/index.es.js

@@ -190,6 +190,29 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  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');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -232,17 +255,24 @@ const SvgCheckboxChecked = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-const SingleCheckbox = ({
-  id,
-  float,
+const Checkbox$1 = ({
+  data,
+  styles,
   checked,
-  onClick,
-  content,
   disabled,
   checkedColor,
+  handleChecked,
   unCheckedColor
 }) => {
-  const [innerCheckd, setInnerChecked] = useState(false);
+  const configStyles = compereConfigs();
+  const [innerChecked, setInnerChecked] = useState(false);
+  const [innerDisabled, setInnerDisabled] = useState(false);
+  const handleClick = e => {
+    handleChecked(data, e);
+  };
+  useEffect(() => {
+    setInnerDisabled(disabled);
+  }, [disabled]);
   useEffect(() => {
     setInnerChecked(checked);
   }, [checked]);
@@ -252,48 +282,61 @@ const SingleCheckbox = ({
       height: '16px',
       marginRight: '9px',
       display: 'inline-block',
-      float: float ? float : '',
-      cursor: !disabled && onClick ? 'pointer' : 'normal'
-    }
-  }, innerCheckd ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: checkedColor ? checkedColor : ''
+      cursor: !innerDisabled ? 'pointer' : 'not-allowed',
+      ...styles
+    },
+    onClick: !innerDisabled && handleChecked ? handleClick : _ => _
+  }, innerChecked && !innerDisabled ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
+    fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: unCheckedColor ? unCheckedColor : ''
+    fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
   }));
 };
+
+const SingleCheckbox = ({
+  data,
+  styles,
+  checked,
+  disabled,
+  checkedColor,
+  handleChecked,
+  unCheckedColor
+}) => {
+  const [innerData, setInnerData] = useState(null);
+  useEffect(() => {
+    // if (data) {
+    //   if (typeof data === 'object' && data.constructor === Object) {
+    //     setInnerData(data);
+    //   } else {
+    //     alert('Data props on Checkbox component must be an object');
+    //   }
+    // } else {
+    //   alert('Please add data props on Checkbox component');
+    // }
+    setInnerData(data);
+  }, [data]);
+  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    styles: styles,
+    data: innerData,
+    checked: checked,
+    disabled: disabled,
+    checkedColor: checkedColor,
+    handleChecked: handleChecked,
+    unCheckedColor: unCheckedColor
+  });
+};
 SingleCheckbox.propTypes = {
+  onClick: PropTypes.func,
+  styles: PropTypes.object,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool.isRequired
+  checkedColor: PropTypes.string,
+  unCheckedColor: PropTypes.string,
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
 };
 
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$e);
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  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');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 ({
   dataBody: PropTypes.array,
   dataHeader: PropTypes.array,
@@ -616,9 +659,11 @@ const Modal = ({
       } else {
         return /*#__PURE__*/React__default.createElement("img", {
           style: {
+            display: 'block',
             objectFit: 'cover',
             objectPosition: 'center',
             borderRadius: radius ? radius : configStyles.MODAL.radius,
+            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
             height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
           },
           src: item.url,
@@ -690,7 +735,7 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{-webkit-appearance:none;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$a = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$c);
 
@@ -3574,8 +3619,6 @@ var css_248z$2 = ".pagination-module_listItem__b1-WN:focus{background-color:#4ca
 var styles$2 = {"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"};
 styleInject(css_248z$2);
 
-// import styles from "./pagination.module.scss";
-
 const Dots = "...";
 const range = (start, end) => {
   const length = end - start + 1;
@@ -3584,41 +3627,36 @@ const range = (start, end) => {
   }, (_, idx) => idx + start);
 };
 const PaginationRange = ({
-  currentTotalCount,
   offset,
-  siblingCountNumber,
+  currentTotalCount,
   currentPageNumber
 }) => {
   const paginationRange = useMemo(() => {
+    const firstPageIndex = 1;
     const totalPageCount = Math.ceil(currentTotalCount / offset);
-
-    //currentPage + 2*Dots + start + end = 5
-    const totalPageNumber = siblingCountNumber + 5;
-    if (totalPageNumber >= totalPageCount) {
+    const lastPageIndex = totalPageCount;
+    if (7 >= totalPageCount) {
       return range(1, totalPageCount);
     }
-    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
-    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
+    const leftSiblingIndex = Math.max(currentPageNumber - 1, 1);
+    const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount);
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPageCount;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4;
       let leftRange = range(1, leftItemCount);
       return [...leftRange, Dots, totalPageCount];
-    }
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 0;
-      currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+    } else if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
       return [firstPageIndex, Dots, ...rightRange];
-    }
-    if (shouldShowLeftDots && shouldShowRightDots) {
+    } else if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
       return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    } else {
+      return range(firstPageIndex, totalPageCount);
     }
-  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+  }, [currentTotalCount, offset, currentPageNumber]);
   return paginationRange;
 };
 
@@ -3662,24 +3700,19 @@ const SvgNextarrow = ({
 
 const Pagination = ({
   goTo,
+  offset,
   onChange,
+  className,
   totalCount,
-  siblingCount,
-  currentPage,
-  offset,
-  className
+  currentPage
 }) => {
   const [inpVal, setInpVal] = useState('');
   const [error, setError] = useState(false);
-  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
-  useEffect(() => {
-    setSibilingCountNumber(siblingCount);
-  }, [siblingCount]);
   useEffect(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
@@ -3694,10 +3727,9 @@ const Pagination = ({
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    siblingCountNumber,
     offset
   });
-  if (currentPageNumber === 0 || paginationRange.length < 2) {
+  if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
   const classProps = classnames(styles$2.list, className ? className : `${styles$2["pagination-bar"]} pagination-bar-rem`);
@@ -3824,12 +3856,10 @@ Pagination.propTypes = {
   offset: PropTypes.number,
   totalCount: PropTypes.number,
   className: PropTypes.string,
-  siblingCount: PropTypes.number,
   currentPage: PropTypes.number
 };
 Pagination.defaultProps = {
-  offset: 2,
-  siblingCount: 2
+  offset: 2
 };
 
 var css_248z$1 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
@@ -3968,7 +3998,7 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-var css_248z = ".autocomplete-module_auto-complete__tdYkw{-webkit-appearance:none}";
+var css_248z = ".autocomplete-module_auto-complete__tdYkw{appearance:none!important;-webkit-appearance:none!important}";
 var styles = {"auto-complete":"autocomplete-module_auto-complete__tdYkw"};
 styleInject(css_248z);
 
@@ -3981,6 +4011,7 @@ const NewAutocomplete = ({
   required,
   disabled,
   selected,
+  className,
   errorSize,
   labelSize,
   marginTop,
@@ -4056,6 +4087,7 @@ const NewAutocomplete = ({
   const [innerValue, setInnerValue] = useState('');
   const [innerOptions, setInnerOptions] = useState([]);
   const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.NEWAUTOCOMPLETE.className, styles['auto-complete']);
   const showOption = keyframes`
         100% {
             max-height: 400px;
@@ -4230,7 +4262,7 @@ const NewAutocomplete = ({
     onInput: handleChange,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: styles['auto-complete'],
+    className: classProps,
     placeholder: placeHolder ? placeHolder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     style: {
@@ -4268,6 +4300,7 @@ NewAutocomplete.propTypes = {
   disabled: PropTypes.bool,
   keyNames: PropTypes.object,
   selected: PropTypes.object,
+  className: PropTypes.string,
   errorSize: PropTypes.string,
   marginTop: PropTypes.string,
   labelSize: PropTypes.string,

package/dist/index.js

@@ -220,6 +220,29 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  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');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -262,17 +285,24 @@ const SvgCheckboxChecked = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-const SingleCheckbox = ({
-  id,
-  float,
+const Checkbox$1 = ({
+  data,
+  styles,
   checked,
-  onClick,
-  content,
   disabled,
   checkedColor,
+  handleChecked,
   unCheckedColor
 }) => {
-  const [innerCheckd, setInnerChecked] = React.useState(false);
+  const configStyles = compereConfigs();
+  const [innerChecked, setInnerChecked] = React.useState(false);
+  const [innerDisabled, setInnerDisabled] = React.useState(false);
+  const handleClick = e => {
+    handleChecked(data, e);
+  };
+  React.useEffect(() => {
+    setInnerDisabled(disabled);
+  }, [disabled]);
   React.useEffect(() => {
     setInnerChecked(checked);
   }, [checked]);
@@ -282,48 +312,61 @@ const SingleCheckbox = ({
       height: '16px',
       marginRight: '9px',
       display: 'inline-block',
-      float: float ? float : '',
-      cursor: !disabled && onClick ? 'pointer' : 'normal'
-    }
-  }, innerCheckd ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: checkedColor ? checkedColor : ''
+      cursor: !innerDisabled ? 'pointer' : 'not-allowed',
+      ...styles
+    },
+    onClick: !innerDisabled && handleChecked ? handleClick : _ => _
+  }, innerChecked && !innerDisabled ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
+    fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: unCheckedColor ? unCheckedColor : ''
+    fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
   }));
 };
+
+const SingleCheckbox = ({
+  data,
+  styles,
+  checked,
+  disabled,
+  checkedColor,
+  handleChecked,
+  unCheckedColor
+}) => {
+  const [innerData, setInnerData] = React.useState(null);
+  React.useEffect(() => {
+    // if (data) {
+    //   if (typeof data === 'object' && data.constructor === Object) {
+    //     setInnerData(data);
+    //   } else {
+    //     alert('Data props on Checkbox component must be an object');
+    //   }
+    // } else {
+    //   alert('Please add data props on Checkbox component');
+    // }
+    setInnerData(data);
+  }, [data]);
+  return /*#__PURE__*/React__default["default"].createElement(Checkbox$1, {
+    styles: styles,
+    data: innerData,
+    checked: checked,
+    disabled: disabled,
+    checkedColor: checkedColor,
+    handleChecked: handleChecked,
+    unCheckedColor: unCheckedColor
+  });
+};
 SingleCheckbox.propTypes = {
+  onClick: PropTypes__default["default"].func,
+  styles: PropTypes__default["default"].object,
   disabled: PropTypes__default["default"].bool,
-  checked: PropTypes__default["default"].bool.isRequired
+  checkedColor: PropTypes__default["default"].string,
+  unCheckedColor: PropTypes__default["default"].string,
+  data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]).isRequired
 };
 
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$e);
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  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');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 ({
   dataBody: PropTypes__default["default"].array,
   dataHeader: PropTypes__default["default"].array,
@@ -646,9 +689,11 @@ const Modal = ({
       } else {
         return /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
+            display: 'block',
             objectFit: 'cover',
             objectPosition: 'center',
             borderRadius: radius ? radius : configStyles.MODAL.radius,
+            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
             height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
           },
           src: item.url,
@@ -720,7 +765,7 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{-webkit-appearance:none;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$a = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$c);
 
@@ -3604,8 +3649,6 @@ var css_248z$2 = ".pagination-module_listItem__b1-WN:focus{background-color:#4ca
 var styles$2 = {"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"};
 styleInject(css_248z$2);
 
-// import styles from "./pagination.module.scss";
-
 const Dots = "...";
 const range = (start, end) => {
   const length = end - start + 1;
@@ -3614,41 +3657,36 @@ const range = (start, end) => {
   }, (_, idx) => idx + start);
 };
 const PaginationRange = ({
-  currentTotalCount,
   offset,
-  siblingCountNumber,
+  currentTotalCount,
   currentPageNumber
 }) => {
   const paginationRange = React.useMemo(() => {
+    const firstPageIndex = 1;
     const totalPageCount = Math.ceil(currentTotalCount / offset);
-
-    //currentPage + 2*Dots + start + end = 5
-    const totalPageNumber = siblingCountNumber + 5;
-    if (totalPageNumber >= totalPageCount) {
+    const lastPageIndex = totalPageCount;
+    if (7 >= totalPageCount) {
       return range(1, totalPageCount);
     }
-    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
-    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
+    const leftSiblingIndex = Math.max(currentPageNumber - 1, 1);
+    const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount);
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPageCount;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4;
       let leftRange = range(1, leftItemCount);
       return [...leftRange, Dots, totalPageCount];
-    }
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 0;
-      currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+    } else if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
       return [firstPageIndex, Dots, ...rightRange];
-    }
-    if (shouldShowLeftDots && shouldShowRightDots) {
+    } else if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
       return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    } else {
+      return range(firstPageIndex, totalPageCount);
     }
-  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+  }, [currentTotalCount, offset, currentPageNumber]);
   return paginationRange;
 };
 
@@ -3692,24 +3730,19 @@ const SvgNextarrow = ({
 
 const Pagination = ({
   goTo,
+  offset,
   onChange,
+  className,
   totalCount,
-  siblingCount,
-  currentPage,
-  offset,
-  className
+  currentPage
 }) => {
   const [inpVal, setInpVal] = React.useState('');
   const [error, setError] = React.useState(false);
-  const [siblingCountNumber, setSibilingCountNumber] = React.useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
   React.useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
-  React.useEffect(() => {
-    setSibilingCountNumber(siblingCount);
-  }, [siblingCount]);
   React.useEffect(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
@@ -3724,10 +3757,9 @@ const Pagination = ({
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    siblingCountNumber,
     offset
   });
-  if (currentPageNumber === 0 || paginationRange.length < 2) {
+  if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
   const classProps = classnames__default["default"](styles$2.list, className ? className : `${styles$2["pagination-bar"]} pagination-bar-rem`);
@@ -3854,12 +3886,10 @@ Pagination.propTypes = {
   offset: PropTypes__default["default"].number,
   totalCount: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,
-  siblingCount: PropTypes__default["default"].number,
   currentPage: PropTypes__default["default"].number
 };
 Pagination.defaultProps = {
-  offset: 2,
-  siblingCount: 2
+  offset: 2
 };
 
 var css_248z$1 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
@@ -3998,7 +4028,7 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-var css_248z = ".autocomplete-module_auto-complete__tdYkw{-webkit-appearance:none}";
+var css_248z = ".autocomplete-module_auto-complete__tdYkw{appearance:none!important;-webkit-appearance:none!important}";
 var styles = {"auto-complete":"autocomplete-module_auto-complete__tdYkw"};
 styleInject(css_248z);
 
@@ -4011,6 +4041,7 @@ const NewAutocomplete = ({
   required,
   disabled,
   selected,
+  className,
   errorSize,
   labelSize,
   marginTop,
@@ -4086,6 +4117,7 @@ const NewAutocomplete = ({
   const [innerValue, setInnerValue] = React.useState('');
   const [innerOptions, setInnerOptions] = React.useState([]);
   const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className ? className : configStyles.NEWAUTOCOMPLETE.className, styles['auto-complete']);
   const showOption = styled.keyframes`
         100% {
             max-height: 400px;
@@ -4260,7 +4292,7 @@ const NewAutocomplete = ({
     onInput: handleChange,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: styles['auto-complete'],
+    className: classProps,
     placeholder: placeHolder ? placeHolder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     style: {
@@ -4298,6 +4330,7 @@ NewAutocomplete.propTypes = {
   disabled: PropTypes__default["default"].bool,
   keyNames: PropTypes__default["default"].object,
   selected: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
   marginTop: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.103",
+  "version": "0.0.105",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/input/input.module.css

@@ -6,7 +6,8 @@
 .input-content {
     display: flex;
     width: 100%;
-    -webkit-appearance: none;
+    appearance: none !important;
+    -webkit-appearance: none !important;
 }
 
 input:-webkit-autofill,

package/src/components/modal/index.js

@@ -261,9 +261,11 @@ export const Modal = ({
                                                         return (
                                                             <img
                                                                 style={{
+                                                                    display: 'block',
                                                                     objectFit: 'cover',
                                                                     objectPosition: 'center',
                                                                     borderRadius: radius ? radius : configStyles.MODAL.radius,
+                                                                    width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
                                                                     height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
                                                                 }}
                                                                 src={item.url}

package/src/components/newAutocomplete/autocomplete.module.css

@@ -1,3 +1,4 @@
 .auto-complete {
-    -webkit-appearance: none;
-}
+    appearance: none !important;
+    -webkit-appearance: none !important;
+}

package/src/components/newAutocomplete/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import classnames from 'classnames';
 import { keyframes, css } from 'styled-components';
 
 import { compereConfigs } from './../../utils';
@@ -16,6 +17,7 @@ export const NewAutocomplete = ({
     required,
     disabled,
     selected,
+    className,
     errorSize,
     labelSize,
     marginTop,
@@ -91,6 +93,10 @@ export const NewAutocomplete = ({
     const [innerValue, setInnerValue] = useState('');
     const [innerOptions, setInnerOptions] = useState([]);
     const configStyles = compereConfigs();
+    const classProps = classnames(
+        className ? className : configStyles.NEWAUTOCOMPLETE.className,
+        styles['auto-complete']
+    );
 
     const showOption = keyframes`
         100% {
@@ -328,7 +334,7 @@ export const NewAutocomplete = ({
                     onInput={handleChange}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
-                    className={styles['auto-complete']}
+                    className={classProps}
                     placeholder={placeHolder ? placeHolder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     style={{
@@ -387,6 +393,7 @@ NewAutocomplete.propTypes = {
     disabled: PropTypes.bool,
     keyNames: PropTypes.object,
     selected: PropTypes.object,
+    className: PropTypes.string,
     errorSize: PropTypes.string,
     marginTop: PropTypes.string,
     labelSize: PropTypes.string,

package/src/components/pagination/index.js

@@ -9,24 +9,19 @@ import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
     goTo,
+    offset,
     onChange,
+    className,
     totalCount,
-    siblingCount,
     currentPage,
-    offset,
-    className,
 }) => {
   const [inpVal, setInpVal] = useState('');
   const [error, setError] = useState(false);
-  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
-  useEffect(() => {
-    setSibilingCountNumber(siblingCount);
-  }, [siblingCount]);
   useEffect(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
@@ -41,10 +36,10 @@ export const Pagination = ({
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    siblingCountNumber,
     offset,
   });
-  if (currentPageNumber === 0 || paginationRange.length < 2) {
+  
+  if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
   const classProps = classnames(styles.list, className ? className : `${styles["pagination-bar"]} pagination-bar-rem`);
@@ -251,8 +246,7 @@ Pagination.propTypes = {
     offset: PropTypes.number,
     totalCount: PropTypes.number,
     className: PropTypes.string,
-    siblingCount: PropTypes.number,
     currentPage: PropTypes.number,
 };
 
-Pagination.defaultProps = { offset: 2, siblingCount: 2 };
+Pagination.defaultProps = { offset: 2 };

package/src/components/pagination/pagination.stories.js

@@ -316,7 +316,7 @@ const data = [
     phone: "572-905-5251",
   },
 ];
-const Template = ({ goTo, offset, currentPage, siblingCount, totalCount }) => {
+const Template = ({ goTo, offset, currentPage, totalCount }) => {
   const [currentPageNumber, setCurrentPageNumber] = useState(currentPage);
   const currentTableData = useMemo(() => {
     const firstPageIndex = (currentPageNumber - 1) * offset;
@@ -355,7 +355,6 @@ const Template = ({ goTo, offset, currentPage, siblingCount, totalCount }) => {
         currentPage={currentPage}
         totalCount={totalCount}
         offset={offset}
-        siblingCount={siblingCount}
         onChange={(page) => setCurrentPageNumber(page)}
       />
     </>
@@ -368,6 +367,5 @@ Default.args = {
   goTo: false,
   offset: 10,
   currentPage: 1,
-  siblingCount: 2,
   totalCount: 44
 };

package/src/components/pagination/paginationRange.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-// import styles from "./pagination.module.scss";
 
 export const Dots = "...";
 
@@ -9,62 +8,49 @@ const range = (start, end) => {
 };
 
 export const PaginationRange = ({
-  currentTotalCount,
   offset,
-  siblingCountNumber,
+  currentTotalCount,
   currentPageNumber,
 }) => {
   const paginationRange = useMemo(() => {
+    const firstPageIndex = 1;
     const totalPageCount = Math.ceil(currentTotalCount / offset);
+    const lastPageIndex = totalPageCount;
 
-    //currentPage + 2*Dots + start + end = 5
-    const totalPageNumber = siblingCountNumber + 5;
-    if (totalPageNumber >= totalPageCount) {
+    if (7 >= totalPageCount) {
       return range(1, totalPageCount);
     }
-    const rightSiblingIndex = Math.min(
-      currentPageNumber + siblingCountNumber,
-      totalPageCount
-    );
 
-    const leftSiblingIndex = Math.max(
-      currentPageNumber - siblingCountNumber,
-      1
-    );
+    const leftSiblingIndex = Math.max(currentPageNumber - 1, 1);
+    const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount);
 
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPageCount;
+    
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount =
-        currentPageNumber === 4 && lastPageIndex > 7
-          ? 4 + siblingCountNumber
-          : 3 + siblingCountNumber;
 
-      let leftRange = range(1, leftItemCount);
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4;
 
+      let leftRange = range(1, leftItemCount);
       return [...leftRange, Dots, totalPageCount];
-    }
 
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 0;
-        currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7
-          ? (rightItemCount = 4 + siblingCountNumber)
-          : (rightItemCount = 3 + siblingCountNumber);
+    } else if (shouldShowLeftDots && !shouldShowRightDots) {
 
-      let rightRange = range(
-        totalPageCount - rightItemCount + 1,
-        totalPageCount
-      );
+      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3;
+
+      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
       return [firstPageIndex, Dots, ...rightRange];
-    }
 
-    if (shouldShowLeftDots && shouldShowRightDots) {
+    } else if (shouldShowLeftDots && shouldShowRightDots) {
+
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
       return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+
+    } else {
+      return range(firstPageIndex, totalPageCount);
     }
-  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+
+  }, [currentTotalCount, offset, currentPageNumber]);
 
   return paginationRange;
 };

package/src/components/singleCheckbox/Checkbox.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+
+import { compereConfigs } from './../../utils';
+
+import ReactCheckbox from '../icon/CheckboxUnchecked';
+import ReactCheckboxChecked from '../icon/CheckboxChecked';
+
+const Checkbox = ({
+    data,
+    styles,
+    checked,
+    disabled,
+    checkedColor,
+    handleChecked,
+    unCheckedColor
+}) => {
+    const configStyles = compereConfigs();
+
+    const [ innerChecked, setInnerChecked ] = useState(false);
+    const [ innerDisabled, setInnerDisabled ] = useState(false);
+
+    const handleClick = (e) => {
+        handleChecked(data, e);
+    };
+
+    useEffect(() => {
+        setInnerDisabled(disabled);
+    }, [disabled]);
+
+    useEffect(() => {
+        setInnerChecked(checked);
+    }, [checked]);
+    
+    return (
+        <div
+            style={{
+                width: '16px',
+                height: '16px',
+                marginRight: '9px',
+                display: 'inline-block',
+                cursor: !innerDisabled ? 'pointer' : 'not-allowed',
+                ...styles
+            }}
+            onClick={!innerDisabled && handleChecked ? handleClick : _ => _}
+        >
+            { innerChecked && !innerDisabled
+                ? <ReactCheckboxChecked fillColor={checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor} />
+                : <ReactCheckbox fillColor={unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor} />
+            }
+
+            {/* {label && <span>{ label }</span>} */}
+        </div>
+    );
+};
+
+export default Checkbox;

package/src/components/singleCheckbox/index.js

@@ -1,42 +1,51 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import ReactCheckbox from '../icon/CheckboxUnchecked';
-import ReactCheckboxChecked from '../icon/CheckboxChecked';
+import Checkbox from './Checkbox';
 
 export const SingleCheckbox = ({
-  id,
-  float,
+  data,
+  styles,
   checked,
-  onClick,
-  content,
   disabled,
   checkedColor,
+  handleChecked,
   unCheckedColor
 }) => {
-  const [innerCheckd, setInnerChecked] = useState(false);
+
+  const [ innerData, setInnerData ] = useState(null);
 
   useEffect(() => {
-    setInnerChecked(checked);
-  }, [checked]);
-  return <div
-    style={{
-      width: '16px',
-      height: '16px',
-      marginRight: '9px',
-      display: 'inline-block',
-      float: float ? float : '',
-      cursor: !disabled && onClick ? 'pointer' : 'normal'
-    }}
-  >
-    { innerCheckd
-        ? <ReactCheckboxChecked onClick={!disabled && onClick ? (e) => onClick(e, content, id) : _ => _} fillColor={checkedColor ? checkedColor : ''} />
-        : <ReactCheckbox onClick={!disabled && onClick ? (e) => onClick(e, content, id) : _ => _} fillColor={unCheckedColor ? unCheckedColor : ''} />
-    }
-  </div>;
+    // if (data) {
+    //   if (typeof data === 'object' && data.constructor === Object) {
+    //     setInnerData(data);
+    //   } else {
+    //     alert('Data props on Checkbox component must be an object');
+    //   }
+    // } else {
+    //   alert('Please add data props on Checkbox component');
+    // }
+    setInnerData(data);
+  }, [data]);
+
+  return (
+    <Checkbox
+      styles={styles}
+      data={innerData}
+      checked={checked}
+      disabled={disabled}
+      checkedColor={checkedColor}
+      handleChecked={handleChecked}
+      unCheckedColor={unCheckedColor}
+    />
+  );
 };
 
 SingleCheckbox.propTypes = {
+  onClick: PropTypes.func,
+  styles: PropTypes.object,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool.isRequired,
-}
+  checkedColor: PropTypes.string,
+  unCheckedColor: PropTypes.string,
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+};

package/src/components/singleCheckbox/singleCheckbox.stories.js

@@ -1,10 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import { SingleCheckbox } from ".";
 export default {
   component: SingleCheckbox,
   title: "Components/SingleCheckbox",
 };
 
-const Template = (args) => <SingleCheckbox {...args} />;
+const Template = (args) => {
+  const [ check, setCheck ] = useState(false);
 
-export const Default = Template.bind({});
+  const handleChecked = (data, e) => {
+    console.log(e, 'target event');
+    console.log(data, 'data');
+    setCheck(!check);
+  };
+
+  return <SingleCheckbox checked={check} data={[1,2,3]} handleChecked={handleChecked} {...args} />;
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  checkedColor: '#00236A',
+  unCheckedColor: '#D1D1D1'
+};

package/src/components/table/table.stories.js

@@ -353,7 +353,7 @@ const Template = (args) => {
     };
 
     const handleCheckedHeader = (e, content) => {
-        e.stopPropagation();
+        // e.stopPropagation();
         let checkableItemIndex;
         let checkableItemBool;
         const updatedHeader = tableDataHeader.slice();

package/src/components/table/th.js

@@ -40,7 +40,7 @@ const TH = ({
                         float='left'
                         checked={item.checkBox.checked}
                         content={item.content ? item.content : ''}
-                        onClick={handleCheckedHeader ? handleCheckedHeader : _ => _}
+                        handleChecked={handleCheckedHeader ? handleCheckedHeader : _ => _}
                         checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
                         unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
                     />

package/src/stories/configuration.stories.mdx

@@ -461,6 +461,7 @@ import StackAlt from './assets/stackalt.svg';
   labelTextTransform: 'none',                           // for label text transform
   labelRequiredColor: '#ee0000',                        // for label required mark color
 
+  className: '',                                        // for autocomplete class if it need
   searchCount: 3,                                       // for autocomplete show result logic 
   errorSize: '16px',                                    // for error font size
   autoComplete: 'off',                                  // for off auto fill functionality ( browser specific, maybe will not work )
@@ -595,6 +596,7 @@ import StackAlt from './assets/stackalt.svg';
   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
@@ -607,3 +609,11 @@ import StackAlt from './assets/stackalt.svg';
   borderStyle: 'solid',                                 // for modal border style
 }
 ```
+
+### SingleCheckbox
+```
+{
+  checkedColor: '#00236A',                              // for checkbox background ( fill ) color
+  unCheckedColor: '#D1D1D1',                            // for checkbox border color
+}
+```

package/tui.config.js

@@ -270,7 +270,8 @@ module.exports = {
         labelMarginBottom: '6px',                             // for label margin bottom
         labelTextTransform: 'none',                           // for label text transform
         labelRequiredColor: '#ee0000',                        // for label required mark color
-
+        
+        className: '',                                        // for autocomplete class if it need
         searchCount: 3,                                       // for autocomplete show result logic 
         errorSize: '16px',                                    // for error font size
         autoComplete: 'off',                                  // for off auto fill functionality ( browser specific, maybe will not work )
@@ -390,6 +391,7 @@ module.exports = {
         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
@@ -402,6 +404,10 @@ module.exports = {
         borderStyle: 'solid',                                 // for modal border style
         borderColor: 'transparent',                           // for modal border color
     },
+    SINGLECHECKBOX: {
+        checkedColor: '#00236A',                              // for checkbox background ( fill ) color
+        unCheckedColor: '#D1D1D1',                            // for checkbox border color
+    },
     // default properties for <Table /> component
     TABLE: {
         tHeadFontWeight: 600,