@majoo-ui/react 1.55.35 → 1.55.36

package/components/link/Link.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type * as Stitches from '@stitches/react';
 import { CSS } from '../../config/stitches.config';
 declare const StyledLink: import("@stitches/react/types/styled-component").StyledComponent<"a", {
-    color?: "success" | "info" | "warning" | "failed" | "pending" | undefined;
+    color?: "success" | "info" | "warning" | "failed" | "pending" | "primary" | undefined;
 }, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";

package/index.esm.js

@@ -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'
       }
     }
   },
@@ -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,7 +3614,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$Y,
-    lineNumber: 161,
+    lineNumber: 182,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3604,29 +3623,48 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __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
+      lineNumber: 210,
+      columnNumber: 35
     }
-  }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
-    link: props.link,
-    variant: props.variant,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$Y,
-      lineNumber: 190,
-      columnNumber: 11
-    }
-  }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
+  }, props.description))), /*#__PURE__*/React.createElement(CloseButton$1, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
@@ -3672,8 +3701,8 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 195,
-      columnNumber: 7
+      lineNumber: 213,
+      columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
     color: colors$5.iconSecondary,
@@ -3681,10 +3710,23 @@ const SingleTagBanner = props => {
     __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
   */
@@ -16358,6 +16406,8 @@ const NativeTimePicker = ({
   defaultValue,
   value,
   disabled,
+  disabledHour,
+  disabledMinute,
   minDate,
   maxDate
 }) => {
@@ -16373,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'));
         }
       }
@@ -16386,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'));
         }
       }
@@ -16407,7 +16457,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 159,
+      lineNumber: 169,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -16416,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, {
@@ -16447,7 +16497,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 169,
+      lineNumber: 179,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -16455,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, {
@@ -16464,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
     }
   })));
@@ -16506,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.
    */
@@ -16521,6 +16583,8 @@ const TimePicker = ({
   defaultValue,
   value,
   disabled,
+  disabledHour,
+  disabledMinute,
   css,
   minDate,
   maxDate
@@ -16535,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,
@@ -16549,7 +16615,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 209,
+      lineNumber: 242,
       columnNumber: 7
     }
   }));
@@ -16580,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.
    */
@@ -16605,6 +16679,8 @@ function InputTimePicker({
   placement,
   css,
   disabled,
+  disabledHour,
+  disabledMinute,
   readOnly,
   minDate,
   maxDate,
@@ -16625,7 +16701,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -16634,14 +16710,14 @@ function InputTimePicker({
       __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, {
@@ -16656,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,
@@ -16671,7 +16749,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 54,
+      lineNumber: 56,
       columnNumber: 5
     }
   });
@@ -16682,7 +16760,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 66,
+      lineNumber: 70,
       columnNumber: 5
     }
   }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
@@ -16690,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, {
@@ -16705,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()));
@@ -16730,6 +16808,14 @@ InputTimePicker.propTypes = {
    Disabled state.
   */
   disabled: PropTypes.bool,
+  /**
+   Disabled hour state.
+  */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled minute state.
+   */
+  disabledMinute: PropTypes.bool,
   /**
    ReadOnly state.
   */

package/index.umd.js

@@ -2907,7 +2907,7 @@
        */
       color: {
         success: {
-          color: '$hlSuccess'
+          color: '$primary500'
         },
         info: {
           color: '$hlNews'
@@ -2919,7 +2919,10 @@
           color: '$hlFailed'
         },
         pending: {
-          color: '$orange500'
+          color: '$hlPending'
+        },
+        primary: {
+          color: '$textPrimary'
         }
       }
     },
@@ -3489,12 +3492,12 @@
     disableGlobalStyle: PropTypes__default["default"].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__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
-    padding: '$spacing-03',
+    padding: '$spacing-03 $spacing-05',
     textAlign: 'left',
     borderRadius: 8,
     pointer: 'default',
@@ -3509,12 +3512,12 @@
       },
       variant: {
         info: {
-          backgroundColor: '$blue100',
+          backgroundColor: '$bgNew',
           border: '1px solid $hlNews'
         },
         warning: {
           backgroundColor: '$bgProcess',
-          border: '1px solid $hlProcess'
+          border: '1px solid $hlPending'
         },
         success: {
           backgroundColor: '$bgSuccess',
@@ -3526,7 +3529,7 @@
         },
         pending: {
           backgroundColor: '$bgProcess',
-          border: '1px solid $orange500'
+          border: '1px solid $hlPending'
         }
       },
       hasAction: {
@@ -3614,29 +3617,45 @@
     children: PropTypes__default["default"].string
   };
   const BannerLink = ({
+    css,
     link,
     children,
     variant
-  }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$Y,
-      lineNumber: 130,
-      columnNumber: 3
-    }
-  }, value => /*#__PURE__*/React__namespace.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__namespace.createElement(Context$2.Consumer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$Y,
+        lineNumber: 146,
+        columnNumber: 5
+      }
+    }, value => /*#__PURE__*/React__namespace.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
@@ -3658,7 +3677,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 159,
+      lineNumber: 180,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3670,7 +3689,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 161,
+      lineNumber: 182,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3679,29 +3698,48 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 168,
+      lineNumber: 189,
       columnNumber: 9
     }
   })));
   const SingleTagBanner = props => {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
+    var _props$icon;
+    return /*#__PURE__*/React__namespace.createElement(Flex$1, {
+      gap: 2,
+      direction: "column",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 176,
+        lineNumber: 197,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
-      gap: 3,
-      direction: "column",
-      align: "end",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 177,
+        lineNumber: 198,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement(Flex$1, {
       gap: 2,
       direction: "column",
       css: {
@@ -3711,33 +3749,24 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 178,
-        columnNumber: 9
+        lineNumber: 201,
+        columnNumber: 11
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 186,
-        columnNumber: 27
+        lineNumber: 209,
+        columnNumber: 29
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 187,
-        columnNumber: 33
+        lineNumber: 210,
+        columnNumber: 35
       }
-    }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
-      link: props.link,
-      variant: props.variant,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$Y,
-        lineNumber: 190,
-        columnNumber: 11
-      }
-    }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
+    }, props.description))), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
@@ -3747,8 +3776,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 195,
-        columnNumber: 7
+        lineNumber: 213,
+        columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
       color: colors$5.iconSecondary,
@@ -3756,10 +3785,23 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 203,
+        lineNumber: 221,
+        columnNumber: 11
+      }
+    }))), props.link && /*#__PURE__*/React__namespace.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 {
@@ -3771,7 +3813,8 @@
         onClick,
         onRemove,
         children,
-        bannerBlock
+        bannerBlock,
+        icon
       } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
@@ -3783,7 +3826,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 211,
+        lineNumber: 247,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3800,7 +3843,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 213,
+        lineNumber: 249,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3811,13 +3854,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 220,
+        lineNumber: 256,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
       title: title,
       description: description,
       variant: variant,
+      icon: icon,
       link: link,
       linkText: linkText,
       onClick: onClick,
@@ -3825,7 +3869,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 223,
+        lineNumber: 259,
         columnNumber: 9
       }
     }));
@@ -3854,6 +3898,10 @@
      Text of button link to be displayed
     */
     linkText: PropTypes__default["default"].string,
+    /**
+    Icon of banner to be displayed
+    */
+    icon: PropTypes__default["default"].func,
     /**
      Clickable event handler
     */
@@ -16579,6 +16627,8 @@
     defaultValue,
     value,
     disabled,
+    disabledHour,
+    disabledMinute,
     minDate,
     maxDate
   }) => {
@@ -16594,11 +16644,11 @@
     function handleUp(type) {
       if (!disabled) {
         if (type === 'hour') {
-          if (!maxDate || moment__default["default"](date).add(1, 'hours') <= moment__default["default"](maxDate)) {
+          if ((!maxDate || moment__default["default"](date).add(1, 'hours') <= moment__default["default"](maxDate)) && !disabledHour) {
             setNewDate(moment__default["default"](date).add(1, 'hours'));
           }
         } else {
-          if (!maxDate || moment__default["default"](date).add(1, 'minutes') <= moment__default["default"](maxDate)) {
+          if ((!maxDate || moment__default["default"](date).add(1, 'minutes') <= moment__default["default"](maxDate)) && !disabledMinute) {
             setNewDate(moment__default["default"](date).add(1, 'minutes'));
           }
         }
@@ -16607,11 +16657,11 @@
     function handleDown(type) {
       if (!disabled) {
         if (type === 'hour') {
-          if (!minDate || moment__default["default"](date).subtract(1, 'hours') >= moment__default["default"](minDate)) {
+          if ((!minDate || moment__default["default"](date).subtract(1, 'hours') >= moment__default["default"](minDate)) && !disabledHour) {
             setNewDate(moment__default["default"](date).subtract(1, 'hours'));
           }
         } else {
-          if (!minDate || moment__default["default"](date).subtract(1, 'minutes') >= moment__default["default"](minDate)) {
+          if ((!minDate || moment__default["default"](date).subtract(1, 'minutes') >= moment__default["default"](minDate)) && !disabledMinute) {
             setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
           }
         }
@@ -16628,7 +16678,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 159,
+        lineNumber: 169,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -16637,27 +16687,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 165,
+        lineNumber: 175,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["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["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["default"].createElement(Input$3, {
@@ -16668,7 +16718,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 169,
+        lineNumber: 179,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -16676,7 +16726,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 170,
+        lineNumber: 180,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -16685,27 +16735,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 171,
+        lineNumber: 181,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["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["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
       }
     })));
@@ -16727,6 +16777,18 @@
      Time picker value, support moment format.
     */
     value: PropTypes__default["default"].instanceOf(Date),
+    /**
+     Disabled state.
+    */
+    disabled: PropTypes__default["default"].bool,
+    /**
+      Disabled hour state.
+     */
+    disabledHour: PropTypes__default["default"].bool,
+    /**
+      Disabled minute state.
+     */
+    disabledMinute: PropTypes__default["default"].bool,
     /**
       Specify the minimum date.
      */
@@ -16742,6 +16804,8 @@
     defaultValue,
     value,
     disabled,
+    disabledHour,
+    disabledMinute,
     css,
     minDate,
     maxDate
@@ -16756,12 +16820,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 208,
+        lineNumber: 241,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
       size: size,
       disabled: disabled,
+      disabledHour: disabledHour,
+      disabledMinute: disabledMinute,
       onChange: onChange,
       defaultValue: defaultValue,
       value: value,
@@ -16770,7 +16836,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 209,
+        lineNumber: 242,
         columnNumber: 7
       }
     }));
@@ -16801,6 +16867,14 @@
      Disabled state.
     */
     disabled: PropTypes__default["default"].bool,
+    /**
+     Disabled hour state.
+    */
+    disabledHour: PropTypes__default["default"].bool,
+    /**
+     Disabled minute state.
+    */
+    disabledMinute: PropTypes__default["default"].bool,
     /**
       Specify the minimum date.
      */
@@ -16826,6 +16900,8 @@
     placement,
     css,
     disabled,
+    disabledHour,
+    disabledMinute,
     readOnly,
     minDate,
     maxDate,
@@ -16846,7 +16922,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -16855,14 +16931,14 @@
         __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["default"].createElement(InputText, {
@@ -16877,13 +16953,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 41,
+        lineNumber: 43,
         columnNumber: 7
       }
     }));
     const renderTimePicker = () => /*#__PURE__*/React__default["default"].createElement(TimePicker, {
       size: size,
       disabled: disabled,
+      disabledHour: disabledHour,
+      disabledMinute: disabledMinute,
       defaultValue: defaultValue,
       value: value,
       onChange: onChange,
@@ -16892,7 +16970,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 54,
+        lineNumber: 56,
         columnNumber: 5
       }
     });
@@ -16903,7 +16981,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 66,
+        lineNumber: 70,
         columnNumber: 5
       }
     }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -16911,14 +16989,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 68,
+        lineNumber: 72,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 70,
+        lineNumber: 74,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -16926,14 +17004,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 71,
+        lineNumber: 75,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 74,
+        lineNumber: 78,
         columnNumber: 7
       }
     }, renderTimePicker()));
@@ -16951,6 +17029,14 @@
      Disabled state.
     */
     disabled: PropTypes__default["default"].bool,
+    /**
+     Disabled hour state.
+    */
+    disabledHour: PropTypes__default["default"].bool,
+    /**
+      Disabled minute state.
+     */
+    disabledMinute: PropTypes__default["default"].bool,
     /**
      ReadOnly state.
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.35",
+  "version": "1.55.36",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",