@majoo-ui/react 1.55.34 → 1.55.36

package/index.esm.js

@@ -1223,7 +1223,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors$4 = foundations.colors;
+const colors$5 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -2834,7 +2834,7 @@ const StyledLink = styled('a', {
      */
     color: {
       success: {
-        color: '$hlSuccess'
+        color: '$primary500'
       },
       info: {
         color: '$hlNews'
@@ -2846,7 +2846,10 @@ const StyledLink = styled('a', {
         color: '$hlFailed'
       },
       pending: {
-        color: '$orange500'
+        color: '$hlPending'
+      },
+      primary: {
+        color: '$textPrimary'
       }
     }
   },
@@ -3181,7 +3184,7 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3414,12 +3417,12 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-const _excluded$x = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+const _excluded$x = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
 var _jsxFileName$Y = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/banner/Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
-  padding: '$spacing-03',
+  padding: '$spacing-03 $spacing-05',
   textAlign: 'left',
   borderRadius: 8,
   pointer: 'default',
@@ -3434,12 +3437,12 @@ const StyledBanner = styled(Flex$1, {
     },
     variant: {
       info: {
-        backgroundColor: '$blue100',
+        backgroundColor: '$bgNew',
         border: '1px solid $hlNews'
       },
       warning: {
         backgroundColor: '$bgProcess',
-        border: '1px solid $hlProcess'
+        border: '1px solid $hlPending'
       },
       success: {
         backgroundColor: '$bgSuccess',
@@ -3451,7 +3454,7 @@ const StyledBanner = styled(Flex$1, {
       },
       pending: {
         backgroundColor: '$bgProcess',
-        border: '1px solid $orange500'
+        border: '1px solid $hlPending'
       }
     },
     hasAction: {
@@ -3539,29 +3542,45 @@ BannerDescription.propTypes = {
   children: PropTypes.string
 };
 const BannerLink = ({
+  css,
   link,
   children,
   variant
-}) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$Y,
-    lineNumber: 130,
-    columnNumber: 3
-  }
-}, value => /*#__PURE__*/React.createElement(Link, {
-  href: link,
-  color: variant ? variant : value.variant,
-  css: {
-    marginInlineEnd: 12
-  },
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$Y,
-    lineNumber: 132,
-    columnNumber: 7
+}) => {
+  console.log(variant);
+  function generateVariant(params) {
+    switch (params) {
+      case 'warning':
+        return 'primary';
+      case 'pending':
+        return 'primary';
+      case 'failed':
+        return 'failed';
+      default:
+        return 'success';
+    }
   }
-}, children));
+  return /*#__PURE__*/React.createElement(Context$2.Consumer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$Y,
+      lineNumber: 146,
+      columnNumber: 5
+    }
+  }, value => /*#__PURE__*/React.createElement(Link, {
+    css: Object.assign({
+      marginInlineEnd: '$spacing-04'
+    }, css),
+    href: link,
+    color: variant ? generateVariant(variant) : generateVariant(value.variant),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$Y,
+      lineNumber: 148,
+      columnNumber: 9
+    }
+  }, children));
+};
 BannerLink.propTypes = {
   /**
    The purpose of a clickable link, presented in url
@@ -3583,7 +3602,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$Y,
-    lineNumber: 159,
+    lineNumber: 180,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3595,38 +3614,57 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$Y,
-    lineNumber: 161,
+    lineNumber: 182,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors$4.iconSecondary,
+  color: colors$5.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
     fileName: _jsxFileName$Y,
-    lineNumber: 168,
+    lineNumber: 189,
     columnNumber: 9
   }
 })));
 const SingleTagBanner = props => {
-  return /*#__PURE__*/React.createElement(React.Fragment, {
+  var _props$icon;
+  return /*#__PURE__*/React.createElement(Flex$1, {
+    gap: 2,
+    direction: "column",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 176,
+      lineNumber: 197,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
-    gap: 3,
-    direction: "column",
-    align: "end",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 177,
+      lineNumber: 198,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
+    gap: 3,
+    direction: "row",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$Y,
+      lineNumber: 199,
+      columnNumber: 9
+    }
+  }, (props === null || props === void 0 ? void 0 : props.icon) && /*#__PURE__*/React.createElement(Flex$1, {
+    css: {
+      marginTop: '-2px'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$Y,
+      lineNumber: 200,
+      columnNumber: 27
+    }
+  }, props === null || props === void 0 ? void 0 : (_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.call(props)), /*#__PURE__*/React.createElement(Flex$1, {
     gap: 2,
     direction: "column",
     css: {
@@ -3636,33 +3674,24 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 178,
-      columnNumber: 9
+      lineNumber: 201,
+      columnNumber: 11
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 186,
-      columnNumber: 27
+      lineNumber: 209,
+      columnNumber: 29
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 187,
-      columnNumber: 33
-    }
-  }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
-    link: props.link,
-    variant: props.variant,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$Y,
-      lineNumber: 190,
-      columnNumber: 11
+      lineNumber: 210,
+      columnNumber: 35
     }
-  }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
+  }, props.description))), /*#__PURE__*/React.createElement(CloseButton$1, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
@@ -3672,19 +3701,32 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 195,
-      columnNumber: 7
+      lineNumber: 213,
+      columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 203,
+      lineNumber: 221,
+      columnNumber: 11
+    }
+  }))), props.link && /*#__PURE__*/React.createElement(BannerLink, {
+    css: {
+      alignSelf: 'end',
+      marginInlineEnd: 'unset'
+    },
+    link: props.link,
+    variant: props.variant,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$Y,
+      lineNumber: 225,
       columnNumber: 9
     }
-  })));
+  }, props.linkText));
 };
 const Banner = _ref => {
   let {
@@ -3696,7 +3738,8 @@ const Banner = _ref => {
       onClick,
       onRemove,
       children,
-      bannerBlock
+      bannerBlock,
+      icon
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
@@ -3708,7 +3751,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 211,
+      lineNumber: 247,
       columnNumber: 5
     }
   }), children ? /*#__PURE__*/React.createElement(Flex$1, {
@@ -3725,7 +3768,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 213,
+      lineNumber: 249,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(Context$2.Provider, {
@@ -3736,13 +3779,14 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 220,
+      lineNumber: 256,
       columnNumber: 11
     }
   }, children)) : /*#__PURE__*/React.createElement(SingleTagBanner, {
     title: title,
     description: description,
     variant: variant,
+    icon: icon,
     link: link,
     linkText: linkText,
     onClick: onClick,
@@ -3750,7 +3794,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 223,
+      lineNumber: 259,
       columnNumber: 9
     }
   }));
@@ -3779,6 +3823,10 @@ Banner.propTypes = {
    Text of button link to be displayed
   */
   linkText: PropTypes.string,
+  /**
+  Icon of banner to be displayed
+  */
+  icon: PropTypes.func,
   /**
    Clickable event handler
   */
@@ -7680,7 +7728,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 16,
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -8213,6 +8261,9 @@ SvgSearchOutline.defaultProps = {
 
 const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
 var _jsxFileName$z = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+const {
+  colors: colors$4
+} = foundations;
 const InputSearchbox = _ref => {
   var _props$value;
   let {
@@ -8252,7 +8303,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 38,
+      lineNumber: 40,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -8260,14 +8311,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, _extends({
@@ -8282,30 +8333,31 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 40,
+      lineNumber: 42,
       columnNumber: 7
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
+      color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 51,
+        lineNumber: 53,
         columnNumber: 44
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 51,
-        columnNumber: 62
+        lineNumber: 53,
+        columnNumber: 91
       }
     }),
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 50,
+      lineNumber: 52,
       columnNumber: 7
     }
   }));
@@ -9156,7 +9208,7 @@ function InputSelect(_a) {
           readOnly: readOnly
         }, {
           children: jsx(CaretDownOutline, {
-            color: readOnly ? colors$4.gray300 : iconColor
+            color: readOnly ? colors$5.gray300 : iconColor
           }, void 0)
         }), void 0);
       };
@@ -9362,7 +9414,7 @@ function InputSelect(_a) {
                         }, {
                           children: jsx(CircleInfoOutline, {
                             size: "16px",
-                            color: colors$4.iconDisable,
+                            color: colors$5.iconDisable,
                             style: {
                               verticalAlign: 'text-bottom'
                             }
@@ -10297,7 +10349,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: disabled || readOnly ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10396,7 +10448,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10404,7 +10456,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$4.iconSecondary,
+    color: colors$5.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10506,7 +10558,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$4.iconDisable,
+    color: colors$5.iconDisable,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10514,7 +10566,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -10577,7 +10629,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors$4.iconDisable,
+    color: colors$5.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
@@ -10907,7 +10959,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -11168,7 +11220,7 @@ function InputResourceList({
       }, {
         children: jsx(SortingOutline, {
           size: 16,
-          color: colors$4.iconSecondary
+          color: colors$5.iconSecondary
         }, void 0)
       }), void 0)]
     }), void 0), isLoading && jsx(Flex$1, Object.assign({
@@ -11670,7 +11722,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(MinusOutline, {
         size: 24,
-        color: disabled || disabledDecrement ? colors$4.iconDisable : colors$4.primary500
+        color: disabled || disabledDecrement ? colors$5.iconDisable : colors$5.primary500
       }, void 0)
     }), void 0), jsx(Input$4, {
       ref: ref,
@@ -11693,7 +11745,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(PlusOutline, {
         size: 24,
-        color: disabled || disabledIncrement ? colors$4.iconDisable : colors$4.primary500
+        color: disabled || disabledIncrement ? colors$5.iconDisable : colors$5.primary500
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -12431,7 +12483,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -12460,7 +12512,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
-    color: colors$4.iconGreen,
+    color: colors$5.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -12520,7 +12572,7 @@ const TabsTrigger$1 = _ref3 => {
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
-    color: activeTabs === value || isIconHovered ? colors$4.iconGreen : colors$4.iconDisable
+    color: activeTabs === value || isIconHovered ? colors$5.iconGreen : colors$5.iconDisable
   }), (!icon || activeTabs === value) && children)));
 };
 const TabsContent$1 = _ref4 => {
@@ -12792,7 +12844,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -12822,7 +12874,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
-      color: colors$4.iconGreen,
+      color: colors$5.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -16354,6 +16406,8 @@ const NativeTimePicker = ({
   defaultValue,
   value,
   disabled,
+  disabledHour,
+  disabledMinute,
   minDate,
   maxDate
 }) => {
@@ -16369,11 +16423,11 @@ const NativeTimePicker = ({
   function handleUp(type) {
     if (!disabled) {
       if (type === 'hour') {
-        if (!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) {
+        if ((!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) && !disabledHour) {
           setNewDate(moment(date).add(1, 'hours'));
         }
       } else {
-        if (!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) {
+        if ((!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) && !disabledMinute) {
           setNewDate(moment(date).add(1, 'minutes'));
         }
       }
@@ -16382,11 +16436,11 @@ const NativeTimePicker = ({
   function handleDown(type) {
     if (!disabled) {
       if (type === 'hour') {
-        if (!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) {
+        if ((!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) && !disabledHour) {
           setNewDate(moment(date).subtract(1, 'hours'));
         }
       } else {
-        if (!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) {
+        if ((!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) && !disabledMinute) {
           setNewDate(moment(date).subtract(1, 'minutes'));
         }
       }
@@ -16403,7 +16457,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 159,
+      lineNumber: 169,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -16412,27 +16466,27 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 165,
+      lineNumber: 175,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "up",
-    disabled: disabled,
+    disabled: disabled || disabledHour,
     onClick: () => handleUp('hour'),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 166,
+      lineNumber: 176,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "up",
-    disabled: disabled,
+    disabled: disabled || disabledMinute,
     onClick: () => handleUp('minutes'),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 167,
+      lineNumber: 177,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$3, {
@@ -16443,7 +16497,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 169,
+      lineNumber: 179,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -16451,7 +16505,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 170,
+      lineNumber: 180,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -16460,27 +16514,27 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 171,
+      lineNumber: 181,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "down",
-    disabled: disabled,
+    disabled: disabled || disabledHour,
     onClick: () => handleDown('hour'),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 172,
+      lineNumber: 182,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "down",
-    disabled: disabled,
+    disabled: disabled || disabledMinute,
     onClick: () => handleDown('minutes'),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 173,
+      lineNumber: 183,
       columnNumber: 9
     }
   })));
@@ -16502,6 +16556,18 @@ NativeTimePicker.propTypes = {
    Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
+  /**
+   Disabled state.
+  */
+  disabled: PropTypes.bool,
+  /**
+    Disabled hour state.
+   */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled minute state.
+   */
+  disabledMinute: PropTypes.bool,
   /**
     Specify the minimum date.
    */
@@ -16517,6 +16583,8 @@ const TimePicker = ({
   defaultValue,
   value,
   disabled,
+  disabledHour,
+  disabledMinute,
   css,
   minDate,
   maxDate
@@ -16531,12 +16599,14 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 208,
+      lineNumber: 241,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
     size: size,
     disabled: disabled,
+    disabledHour: disabledHour,
+    disabledMinute: disabledMinute,
     onChange: onChange,
     defaultValue: defaultValue,
     value: value,
@@ -16545,7 +16615,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 209,
+      lineNumber: 242,
       columnNumber: 7
     }
   }));
@@ -16576,6 +16646,14 @@ TimePicker.propTypes = {
    Disabled state.
   */
   disabled: PropTypes.bool,
+  /**
+   Disabled hour state.
+  */
+  disabledHour: PropTypes.bool,
+  /**
+   Disabled minute state.
+  */
+  disabledMinute: PropTypes.bool,
   /**
     Specify the minimum date.
    */
@@ -16601,6 +16679,8 @@ function InputTimePicker({
   placement,
   css,
   disabled,
+  disabledHour,
+  disabledMinute,
   readOnly,
   minDate,
   maxDate,
@@ -16621,23 +16701,23 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
     children: /*#__PURE__*/React__default.createElement(TimeOutline, {
-      color: disabled ? colors$4.iconDisable : colors$4.iconPrimary,
+      color: disabled ? colors$5.iconDisable : colors$5.iconPrimary,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 40,
+        lineNumber: 42,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 40,
+      lineNumber: 42,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -16652,13 +16732,15 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 41,
+      lineNumber: 43,
       columnNumber: 7
     }
   }));
   const renderTimePicker = () => /*#__PURE__*/React__default.createElement(TimePicker, {
     size: size,
     disabled: disabled,
+    disabledHour: disabledHour,
+    disabledMinute: disabledMinute,
     defaultValue: defaultValue,
     value: value,
     onChange: onChange,
@@ -16667,7 +16749,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 54,
+      lineNumber: 56,
       columnNumber: 5
     }
   });
@@ -16678,7 +16760,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 66,
+      lineNumber: 70,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -16686,14 +16768,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 68,
+      lineNumber: 72,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 70,
+      lineNumber: 74,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -16701,14 +16783,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 71,
+      lineNumber: 75,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 74,
+      lineNumber: 78,
       columnNumber: 7
     }
   }, renderTimePicker()));
@@ -16726,6 +16808,14 @@ InputTimePicker.propTypes = {
    Disabled state.
   */
   disabled: PropTypes.bool,
+  /**
+   Disabled hour state.
+  */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled minute state.
+   */
+  disabledMinute: PropTypes.bool,
   /**
    ReadOnly state.
   */
@@ -17858,7 +17948,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: currentPage === 1 ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -17911,7 +18001,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors$4.iconDisable : colors$4.iconPrimary,
+    color: currentPage === totalPages ? colors$5.iconDisable : colors$5.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
@@ -18066,7 +18156,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
@@ -18304,23 +18394,23 @@ const ContextMenuItem = styled(Item, {
   userSelect: 'none',
   color: '$textPrimary',
   '&[data-disabled]': {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   },
   '&:active': {
-    backgroundColor: colors$4.gray150
+    backgroundColor: colors$5.gray150
   },
   '&:focus': {
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   }
 });
 const ContextMenuSeparator = styled('div', {
   height: 1,
-  backgroundColor: colors$4.gray150,
+  backgroundColor: colors$5.gray150,
   margin: 5
 });
 
@@ -18559,7 +18649,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       justify: "between",
                       gap: 5,
                       css: {
-                        backgroundColor: colors$4.bgGray,
+                        backgroundColor: colors$5.bgGray,
                         padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder',
                         alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -18582,7 +18672,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   gap: 3,
                   css: {
                     height: '40px',
-                    backgroundColor: colors$4.bgGray,
+                    backgroundColor: colors$5.bgGray,
                     paddingRight: '$spacing-04'
                   }
                 }, {
@@ -19349,7 +19439,7 @@ function Table({
                 }, {
                   children: [leftAddOnCells.map((_, index) => jsx("td", {
                     style: {
-                      backgroundColor: colors$4.bgGray
+                      backgroundColor: colors$5.bgGray
                     }
                   }, index)), jsxs(React.Fragment, {
                     children: [jsx(TableCell$3, Object.assign({
@@ -20467,7 +20557,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors$4.bgDimmer,
+  backgroundColor: colors$5.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -20500,14 +20590,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors$4.gray900,
+  color: colors$5.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription$1 = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors$4.gray900,
+  color: colors$5.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -21132,17 +21222,17 @@ const itemStyles = {
   position: 'relative',
   userSelect: 'none',
   '&[data-disabled]': {
-    color: colors$4.gray400,
+    color: colors$5.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer'
   },
   '&:active': {
-    backgroundColor: colors$4.gray150
+    backgroundColor: colors$5.gray150
   },
   '&:focus': {
-    backgroundColor: colors$4.gray100
+    backgroundColor: colors$5.gray100
   }
 };
 const StyledItem = styled(DropdownMenuPrimitive.Item, Object.assign({}, itemStyles));
@@ -21159,11 +21249,11 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors$4.gray700
+  color: colors$5.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors$4.gray150,
+  backgroundColor: colors$5.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -21260,7 +21350,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors$4.gray400
+    color: colors$5.gray400
   }
 });
 const StyledDropdown = styled(ButtonPrimitive, {
@@ -25012,7 +25102,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLeftOutline, {
-        color: colors$4.btnPrimary
+        color: colors$5.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -25072,7 +25162,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors$4.btnPrimary
+        color: colors$5.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -28151,7 +28241,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors$4.bgGreen,
+        color: colors$5.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28172,7 +28262,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors$4.iconSecondary,
+        color: colors$5.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28244,7 +28334,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors$4.iconPrimary,
+        color: colors$5.iconPrimary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28671,10 +28761,10 @@ var _jsxFileName$2 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/rea
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
-    borderLeft: `4px solid ${colors$4.primary500} !important`
+    borderLeft: `4px solid ${colors$5.primary500} !important`
   },
   '& .active-scroll-spy .link-title': {
-    color: `${colors$4.primary500} !important`
+    color: `${colors$5.primary500} !important`
   },
   '@md': {
     display: 'unset'
@@ -28682,7 +28772,7 @@ const DesktopContainer = styled(Flex$1, {
 });
 const MobileContainer = styled(Flex$1, {
   backgroundColor: '$white',
-  border: `1px solid ${colors$4.gray150}`,
+  border: `1px solid ${colors$5.gray150}`,
   borderRadius: 8,
   padding: '8px 8px',
   width: '100%',
@@ -28809,7 +28899,7 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+        borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$5.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
@@ -30142,11 +30232,11 @@ function ProgressIndicator(props) {
     const getColor = state => {
       switch (state) {
         case 'error':
-          return colors$4.red400;
+          return colors$5.red400;
         case 'active':
-          return colors$4.primary500;
+          return colors$5.primary500;
         default:
-          return colors$4.gray150;
+          return colors$5.gray150;
       }
     };
     const iconProps = {
@@ -32034,7 +32124,7 @@ function CheckboxTable(props) {
                       }
                     }, void 0) : jsx(MinusOutline, {
                       size: 16,
-                      color: colors$4.iconDisable
+                      color: colors$5.iconDisable
                     }, void 0)
                   }, void 0)
                 }), index + indexSubRow + 'tb-cell-collapse');
@@ -32339,9 +32429,9 @@ const StyledSkeleton = props => {
   function getBaseColor(color) {
     switch (color) {
       case 'primary':
-        return colors$4.gray300;
+        return colors$5.gray300;
       default:
-        return colors$4.gray150;
+        return colors$5.gray150;
     }
   }
   function getSize(size) {