diginet-core-ui 1.3.90 → 1.3.91

package/components/form-control/calendar/function.js

@@ -1,36 +1,18 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/core';
-import { render } from 'react-dom';
 import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
-import theme from "../../../theme/settings";
+import { render } from 'react-dom';
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
-import { useColor as colors } from "../../../theme";
-import { typography } from "../../../styles/typography";
-import { itemsCenter, border, boxBorder, borderRadius4px, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
 const {
-  heading6
-} = typography;
-const {
-  system: {
-    active,
-    white
-  },
-  fill: {
-    hover: fillHover,
-    focus: fillFocus,
-    pressed: fillPressed
-  },
-  text: {
-    main,
-    normal_label
-  },
-  danger8,
-  info8
-} = colors;
+  boxShadows: {
+    large: boxShadowsLarge
+  }
+} = useTheme();
 
 /**
  * START STYLE
@@ -43,81 +25,52 @@ const {
  * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
-    ${borderRadius4px}
-    ${boxBorder}
-	${flexCol}
-	background-color: ${white};
-    box-shadow: ${boxShadow ? theme.boxShadows.large : 'none'};
-    max-width: 400px;
-    min-width: 260px;
-    width: 100%;
+    ${displayFlex};
+    ${flexCol};
+    ${boxBorder};
+    ${borderRadius('0px 0px 4px 4px')};
+    ${bgColor('system.white')};
+    ${parseWidth('100%')};
+    ${parseMinWidth(260)};
+    ${parseMaxWidth(400)};
+    box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
     .${unique.navigator.navigator} {
-        ${flexRow}
-        ${justifyBetween}
-		height         : 28px;
-        margin: 0px 14px;
-        margin-top: 14px;
-        max-width: 400px;
-        width: calc(100% - 28px);
+        ${displayFlex};
+        ${flexRow};
+        ${justifyBetween};
+        ${itemsCenter};
+        ${parseMaxWidth(400)};
+        ${mg([4, 4, 0])};
         .${unique.navigator.around} {
-            ${flexRow}
-            ${userSelectNone}
-			height        : 28px;
-            width: 64px;
+            ${displayFlex};
+            ${flexRow};
         }
         .${unique.navigator.center} {
-            ${displayInlineFlex}
-            ${itemsCenter}
-			${textCenter}
-			${userSelectNone}
-			height     : 28px;
-            margin: 0 4px;
-            min-width: 150px;
-            width: 100%;
-            button {
-                height: 28px;
-            }
-            .DGN-UI-Typography {
-                min-width: 150px;
-            }
-        }
-    }
-    .${unique.icon} {
-        height: 28px;
-        margin: 0 2px;
-        width: 28px;
-        svg,
-        path,
-        g {
-            ${pointerEventsNone}
+            ${parseWidth('100%')};
         }
     }
     .${unique.table.container} {
-        ${flexRow}
-        margin : 10px 0;
-        margin-top: 6px;
-        width: 100%;
+        ${displayFlex};
+        ${flexRow};
+        ${mg([2, 0])};
     }
     .${unique.table.table} {
+        ${mg([0, 4])};
+        ${parseWidth('calc(100% - 32px)')};
         border-collapse: separate;
-        margin: 0 16px;
         padding: 0;
         table-layout: fixed;
-        width: calc(100% - 32px);
         .${unique.table.data} {
-            ${cursorPointer}
-            ${positionRelative}
-			${textCenter}
-			${userSelectNone}
-			color      : ${main};
-            height: 24px;
-            min-width: 24px;
-            padding: 1px;
+            ${cursorPointer};
+            ${positionRelative};
+            ${textCenter};
+            ${userSelectNone};
+            ${textColor('text.main')};
             &:nth-of-type(7n - 1) {
-                color: ${info8} !important;
+                ${textColor('info8')};
             }
             &:nth-of-type(7n) {
-                color: ${danger8} !important;
+                ${textColor('danger8')};
             }
             &.next_month,
             &.previous_month,
@@ -125,45 +78,42 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 opacity: 0.25;
             }
             &.${unique.day.limit} {
-                ${pointerEventsNone}
-                cursor: default;
+                ${pointerEventsNone};
+                ${cursorDefault};
             }
             &:hover {
                 span.${unique.day.day} {
-                    background-color: ${fillHover};
+                    ${bgColor('fill.hover')};
                 }
             }
-            ${onClickActive ? `&:active {
-				span.${unique.day.day} {
-					background-color: ${fillPressed};
-				}
-			}` : ''}
+            ${onClickActive && css`
+                &:active {
+                    span.${unique.day.day} {
+                        ${bgColor('fill.pressed')};
+                    }
+                }
+            `}
             &.${unique.day.active} {
                 span.${unique.day.day} {
-                    ${heading6};
-                    background-color: ${fillFocus};
+                    ${bgColor('fill.focus')};
                 }
             }
             &.${unique.day.today} {
                 span {
-                    ${heading6}
-                    ${boxBorder}
-					${border(1, active)}
-					/* text-decoration-line     : underline;
-					text-decoration-thickness: 2px;
-					text-underline-offset    : 1px */
+                    ${boxBorder};
+                    ${border(1, 'system.active')};
                 }
             }
             &.${unique.day.between} {
                 opacity: 1;
                 &::before {
-                    background-color: ${fillHover};
+                    ${bgColor('fill.hover')};
                 }
             }
             &.${unique.day.from} {
                 opacity: 1;
                 &::before {
-                    background-color: ${fillHover};
+                    ${bgColor('fill.hover')};
                     border-bottom-left-radius: 12px;
                     border-top-left-radius: 12px;
                     left: calc((100% - 24px) / 2);
@@ -172,31 +122,28 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             &.${unique.day.to} {
                 opacity: 1;
                 &::before {
-                    background-color: ${fillHover};
+                    ${bgColor('fill.hover')};
                     border-bottom-right-radius: 12px;
                     border-top-right-radius: 12px;
                     right: calc((100% - 24px) / 2);
                 }
             }
             ::before {
-                ${positionAbsolute}
-                inset: 1px -2px;
+                ${positionAbsolute};
+                ${inset('1px -2px')};
                 content: '';
             }
         }
         .${unique.table.header} {
-            ${userSelectNone}
-            ${textCenter}
-			color         : ${normal_label};
-            height: 24px;
-            min-width: 24px;
-            padding: 0;
-            padding-bottom: 6px;
+            ${userSelectNone};
+            ${textCenter};
+            ${parseHeight(24)};
+            ${textColor('text.normal_label')};
             &:nth-of-type(6) {
-                color: ${info8} !important;
+                ${textColor('info8')};
             }
             &:nth-of-type(7) {
-                color: ${danger8} !important;
+                ${textColor('danger8')};
             }
         }
     }
@@ -280,10 +227,8 @@ const buttonIconProps = className => {
   return {
     className,
     circular: true,
-    height: 28,
-    viewBox: true,
     viewType: 'text',
-    width: 28
+    size: 'small'
   };
 };
 /**
@@ -296,10 +241,9 @@ const buttonTextProps = fn => {
   return {
     onClick: fn,
     color: 'primary',
+    size: 'small',
     style: {
       borderRadius: 20,
-      margin: 0,
-      padding: '2px 4px',
       textTransform: 'initial',
       width: '100%'
     }
@@ -380,10 +324,10 @@ const isBetween = (day, from, to, className) => {
   return '';
 };
 const isBeforeLimit = (min, time) => {
-  return min && isValidDate(min) && moment(time).diff(new Date(min).setHours(0, 0, 0, 0)) < 0;
+  return min && isValidDate(min) && moment(new Date(time).setHours(0, 0, 0, 0)).diff(new Date(min).setHours(0, 0, 0, 0)) < 0;
 };
 const isAfterLimit = (max, time) => {
-  return max && isValidDate(max) && moment(time).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
+  return max && isValidDate(max) && moment(new Date(time).setHours(0, 0, 0, 0)).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
 };
 /**
  *
@@ -611,28 +555,30 @@ const onUpdateNavigator = (time, refs, min, max) => {
   (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
   (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
   (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
-  if (min && isValidDate(min)) {
-    if (moment(time).diff(firstDayOfMin) < 365) {
-      var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
-      (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
+  setTimeout(() => {
+    if (min && isValidDate(min)) {
+      if (moment(time).diff(firstDayOfMin) < 365) {
+        var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
+        (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
+      }
+      if (moment(time).diff(firstDayOfMin) <= 28 && moment(time).diff(firstDayOfMin, 'months') > 1 || moment(time).diff(firstDayOfMin, 'months') < 1) {
+        var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
+        (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
+        (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
+      }
     }
-    if (moment(time).diff(firstDayOfMin) <= 28) {
-      var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
-      (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
-      (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
+    if (max && isValidDate(max)) {
+      if (moment(time).diff(firstDayOfMax) > -334) {
+        var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
+        (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
+      }
+      if (moment(time).diff(firstDayOfMax) > -1) {
+        var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
+        (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
+        (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
+      }
     }
-  }
-  if (max && isValidDate(max)) {
-    if (moment(time).diff(firstDayOfMax) > -334) {
-      var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
-      (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
-    }
-    if (moment(time).diff(firstDayOfMax) > -1) {
-      var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
-      (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
-      (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
-    }
-  }
+  });
 };
 /**
  *

package/components/form-control/date-picker/index.js

@@ -1,35 +1,28 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, HelperText, InputBase, Label, Tooltip } from "../..";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { getGlobal } from "../../../global";
-import { date as moment, capitalizeSentenceCase, randomString, updatePosition } from "../../../utils";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexRow, itemsCenter, justifyEnd, left, mg, parseMaxWidth, parseMinWidth, parseWidthHeight, positionFixed, scale, top, z } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { capitalizeSentenceCase, date as moment, randomString, updatePosition } from "../../../utils";
 import CalendarComp from "../calendar";
-import ControlComp from "../control";
-import { ButtonIcon, HelperText, InputBase, Label } from "../../index";
-import Button from "../../button";
-import Tooltip from "../../tooltip";
 import { isValidDate } from "../calendar/function";
-import { itemsCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, parseWidth, positionFixed } from "../../../styles/general";
-import theme from "../../../theme/settings";
+import ControlComp from "../control";
 const {
-  colors: {
-    system: {
-      white
-    }
-  },
-  spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 const formatValue = (value, format, utc = false) => {
   return moment(value).format(format, utc);
 };
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   actionIconAt,
   clearAble,
   controls,
@@ -153,16 +146,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
   };
-  // const createPortal = () => {
-  //     let portal = document.getElementById(unique.portal);
-  //     if (!portal) {
-  //         portal = document.createElement('div');
-  //         portal.id = unique.portal;
-  //         document.body.appendChild(portal);
-  //     }
-  //     portal.style.cssText = pickerCSS.portal;
-  //     return portal;
-  // };
   const createBackground = () => {
     let background = document.getElementById(unique.backGr);
     if (!background) {
@@ -256,26 +239,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // iconRef.current && onSwap(true);
     ipRef.current && ipRef.current.blur();
   };
-  // const updatePicker = () => {
-  //     const portal = document.body.querySelector(`#${unique.portal}`);
-  //     if (!portal) return;
-  //     const backGr = portal.querySelector(`#${unique.backGr}`);
-  //     if (!backGr) return;
-  //     const node = portal.querySelector(`#${unique.picker}`);
-  //     if (!node || !node.firstChild) return;
-  //     unmountComponentAtNode(node);
-  //     render(
-  //         <CalendarComp
-  //             ref={calRef}
-  //             actions={footerMemo}
-  //             defaultValue={displayValue.current}
-  //             value={focusedValue.current}
-  //             max={max}
-  //             min={min}
-  //             displayAnotherMonth={displayAnotherMonth}
-  //             onClick={onCalendarClick}
-  //         />, node);
-  // };
   const onSwap = open => {
     const t = iconRef.current.childNodes[+open];
     if (open) {
@@ -448,6 +411,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {
+      ...action,
       get: () => {
         return ref.current;
       },
@@ -479,11 +443,11 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     error: isError,
     ref: ref,
     style: style
-  }, !!label && jsx(Label, {
+  }, label ? jsx(Label, {
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Tooltip, {
+  }, label) : null, jsx(Tooltip, {
     title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : ''
   }, jsx(InputBase, {
     inputProps: {
@@ -502,7 +466,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     endIcon: endIcon,
     onKeyDown: e => e.preventDefault(),
     readOnly: true
-  })), isError && jsx(HelperText, {
+  })), isError ? jsx(HelperText, {
     ...errorProps,
     style: {
       minHeight: 16,
@@ -510,7 +474,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%'
     },
     disabled: disabled
-  }, error));
+  }, error) : null);
 }));
 const hiddenStyle = {
   opacity: 0,
@@ -522,6 +486,7 @@ const activeStyle = {
   display: 'block'
 };
 const IconAreaCSS = unique => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     color: inherit;
@@ -538,27 +503,28 @@ const IconAreaCSS = unique => css`
     }
 `;
 const ControlContainerCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${justifyEnd};
-    margin: ${spacing([0, 4, 4])};
+    ${mg([0, 4, 4])};
 `;
 const PickerCSS = {
   backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
-  picker: (position, left, width) => css`
+  picker: (position, positionLeft, width) => css`
         ${positionFixed};
         ${borderRadius4px};
-        ${parseWidth(width)};
-        background-color: ${white};
-        height: max-content;
-        left: ${left}px;
-        top: ${position.top}px;
+        ${bgColor('system.white')};
+        ${parseWidthHeight(width, 'max-content')};
+        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 314)};
+        ${parseMaxWidth(400)};
+        ${scale(0)};
+        ${left(positionLeft)};
+        ${top(position.top)};
         transform-origin: ${position.transformOrigin};
-        max-width: 400px;
-        min-width: ${window.innerWidth <= 599 ? 280 : 314}px;
         opacity: 0;
         transform: scale(0);
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        z-index: ${zIndexCORE(2)};
+        ${z(2)};
     `,
   active: {
     opacity: 1,
@@ -576,12 +542,12 @@ DatePicker.defaultProps = {
   controls: false,
   disabled: false,
   displayAnotherMonth: true,
-  displayFormat: 'dddd, DD MMMM YYYY',
+  displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
   pressESCToClose: true,
   readOnly: false,
   required: false,
-  textAlign: 'start',
   returnFormat: 'YYYY-MM-DD',
+  textAlign: 'start',
   viewType: 'underlined'
 };
 DatePicker.propTypes = {

package/components/form-control/date-range-picker/index.js

@@ -1182,7 +1182,7 @@ DateRangePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
-  /** The value of the input element, required for a controlled component. */
+  /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])

package/components/form-control/number-input/index2.js

@@ -77,13 +77,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   }
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
 
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
   const parseNumberToMoney = useCallback((vl, isNumber) => {
     var _number, _number2, _number$, _number3;
@@ -114,13 +114,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     return number;
   }, [decimalSymbol, max, value]);
 
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
     var _number4, _number4$toString, _number4$toString$rep, _number4$toString$rep2, _number4$toString$rep3;
@@ -414,10 +414,10 @@ NumberInput.propTypes = {
   style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** Validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
   /** The value of the input element, required for a controlled component. */

package/components/form-control/radio/index.js

@@ -191,11 +191,11 @@ Radio.propTypes = {
   className: PropTypes.string,
   /** Props for input. */
   inputProps: PropTypes.object,
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func,
   /** Prevent all event if true. */

package/components/form-control/toggle/index.js

@@ -226,10 +226,10 @@ Toggle.propTypes = {
   lineClamp: PropTypes.number,
   /** Shows tooltip containing Label on hover */
   hoverTooltip: PropTypes.bool,
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
   /** If `true`, the label will indicate that the checkbox is required. */

package/components/grid/index.js

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { boxBorder } from "../../styles/general";
@@ -232,4 +233,5 @@ Grid.propTypes = {
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };
-export default Grid;
+export { Grid };
+export default OptionWrapper(Grid);