@majoo-ui/react 1.54.6-rev.2 → 1.54.7-rev.1

package/components/datePicker/DatePicker.d.ts

@@ -2,6 +2,7 @@
 export declare const DEFAULT: "default";
 export declare const SINGLE_PICKER: "single";
 export declare const RANGE_PICKER: "range";
+export declare const DATE_RANGE_PICKER: "range_picker";
 export declare const ADVANCE_PICKER: "advance";
 export declare const RANGE_CONTROL: "range_control";
 export declare const WEEKLY: "weekly";

package/components/datePicker/InputDatePicker.d.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { ADVANCE_PICKER, RANGE_PICKER, SINGLE_PICKER, DEFAULT, RANGE_CONTROL, WEEKLY, MONTHLY } from './DatePicker';
+import { ADVANCE_PICKER, RANGE_PICKER, SINGLE_PICKER, WEEKLY, MONTHLY, DATE_RANGE_PICKER } from './DatePicker';
 import { CSS } from '../../config/stitches.config';
 import { PopoverPlacement } from '../../type/base.types';
 export interface InputDatePickerProps {
     /**
      * Specify the DatePicker type.
      */
-    type?: typeof SINGLE_PICKER | typeof RANGE_PICKER | typeof ADVANCE_PICKER;
+    type?: typeof SINGLE_PICKER | typeof RANGE_PICKER | typeof DATE_RANGE_PICKER | typeof ADVANCE_PICKER;
     /**
-     * Specify the InputPicker type.
+     * Show input range control state.
      */
-    inputType?: typeof DEFAULT | typeof RANGE_CONTROL;
+    showRangeControl?: boolean;
     /**
      * Specify the range control type.
      */
-    rangeControl?: typeof WEEKLY | typeof MONTHLY;
+    rangePickerType?: typeof WEEKLY | typeof MONTHLY;
     /**
      * Specify the InputDatePicker placeholder.
      */
@@ -80,4 +80,4 @@ export interface InputDatePickerProps {
      */
     isInvalid?: boolean;
 }
-export declare function InputDatePicker({ type, inputType, rangeControl, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;
+export declare function InputDatePicker({ type, showRangeControl, rangePickerType, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;

package/components/datePicker/state/reducer.d.ts

@@ -4,8 +4,10 @@ export declare const YESTERDAY = "YESTERDAY";
 export declare const LAST_7_DAYS = "LAST_7_DAYS";
 export declare const LAST_WEEK = "LAST_WEEK";
 export declare const PREV_WEEK = "PREV_WEEK";
+export declare const RANGE_WEEK = "RANGE_WEEK";
 export declare const NEXT_WEEK = "NEXT_WEEK";
 export declare const PREV_MONTH = "PREV_MONTH";
+export declare const RANGE_MONTH = "RANGE_MONTH";
 export declare const NEXT_MONTH = "NEXT_MONTH";
 export declare const THIS_WEEK = "THIS_WEEK";
 export declare const LAST_MONTH = "LAST_MONTH";

package/components/stepWizard/index.d.ts

@@ -31,6 +31,7 @@ interface IStepWizardProps {
     onChangeVisibility?: (isHide: boolean) => void;
     onNavClicked?: () => void;
     hideCheckedIcon?: boolean;
+    appendContent?: JSX.Element;
 }
 declare const StepWizard: (props: IStepWizardProps) => JSX.Element;
 export default StepWizard;

package/index.esm.js

@@ -16241,6 +16241,7 @@ InputTimePicker.displayName = 'InputTimePicker';
 const DEFAULT = 'default';
 const SINGLE_PICKER = 'single';
 const RANGE_PICKER = 'range';
+const DATE_RANGE_PICKER = 'range_picker';
 const ADVANCE_PICKER = 'advance';
 const RANGE_CONTROL = 'range_control';
 const WEEKLY = 'weekly';
@@ -16319,6 +16320,7 @@ const CalendarPicker = _a => {
 const CalendarRangePicker = _a => {
   var {
       isMultiDatePicker,
+      isRangeControl,
       onChange,
       onClose,
       advanceView,
@@ -16327,7 +16329,7 @@ const CalendarRangePicker = _a => {
       minDate,
       maxDate
     } = _a,
-    props = __rest(_a, ["isMultiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+    props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
   const today = new Date();
   const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
   const [dateValue, setDateValue] = useState([]);
@@ -16340,6 +16342,10 @@ const CalendarRangePicker = _a => {
     }
   }, [selected]);
   const onDateSelected = selectedDate => {
+    if (isRangeControl) {
+      onChange === null || onChange === void 0 ? void 0 : onChange([selectedDate.date]);
+      onClose();
+    }
     if (!dateValue.length || dateValue.length === 2) {
       setDateValue([selectedDate.date]);
     } else {
@@ -16391,20 +16397,30 @@ const DatePicker = props => {
       type
     } = props,
     otherProps = __rest(props, ["type"]);
-  if (type !== SINGLE_PICKER) {
-    return jsx(CalendarRangePicker, Object.assign({}, otherProps), void 0);
+  const isDateRangePicker = type === DATE_RANGE_PICKER;
+  if (type !== SINGLE_PICKER || isDateRangePicker) {
+    return jsx(CalendarRangePicker, Object.assign({}, otherProps, {
+      isRangeControl: isDateRangePicker
+    }), void 0);
   }
   return jsx(CalendarPicker, Object.assign({}, otherProps), void 0);
 };
 
+moment.updateLocale('id', {
+  week: {
+    dow: 1
+  }
+});
 const UPDATE_PICKER = 'UPDATE';
 const TODAY = 'TODAY';
 const YESTERDAY = 'YESTERDAY';
 const LAST_7_DAYS = 'LAST_7_DAYS';
 const LAST_WEEK = 'LAST_WEEK';
 const PREV_WEEK = 'PREV_WEEK';
+const RANGE_WEEK = 'RANGE_WEEK';
 const NEXT_WEEK = 'NEXT_WEEK';
 const PREV_MONTH = 'PREV_MONTH';
+const RANGE_MONTH = 'RANGE_MONTH';
 const NEXT_MONTH = 'NEXT_MONTH';
 const THIS_WEEK = 'THIS_WEEK';
 const LAST_MONTH = 'LAST_MONTH';
@@ -16560,6 +16576,13 @@ function advancePickerDate(type, date) {
         const endThisWeek = currentDate.endOf('week').toDate();
         return [startThisWeek, endThisWeek];
       }
+    case RANGE_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisWeek = currentDate.startOf('week').toDate();
+        const endThisWeek = currentDate.endOf('week').toDate();
+        return [startThisWeek, endThisWeek];
+      }
     case PREV_WEEK:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
@@ -16567,6 +16590,13 @@ function advancePickerDate(type, date) {
         const endThisWeek = currentDate.endOf('week').toDate();
         return [startThisWeek, endThisWeek];
       }
+    case RANGE_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
     case NEXT_MONTH:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
@@ -16761,8 +16791,8 @@ const getInputPickerValue = (type, date, isTimePicker) => {
 };
 function InputDatePicker({
   type = SINGLE_PICKER,
-  inputType = DEFAULT,
-  rangeControl = WEEKLY,
+  showRangeControl,
+  rangePickerType = WEEKLY,
   placeholder = 'Pilih Tanggal',
   size = 'sm',
   disabled,
@@ -16782,6 +16812,7 @@ function InputDatePicker({
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  console.log(placement);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -16810,22 +16841,24 @@ function InputDatePicker({
   }
   function handleRangeChange(type) {
     if (selectedDate && !disabled && !readOnly && !isInvalid) {
-      const actionType = rangeControl === 'monthly' ? 'MONTH' : 'WEEK';
+      const actionType = rangePickerType === 'monthly' ? 'MONTH' : 'WEEK';
       if (type === 'prev') {
         dispatch({
           type: 'UPDATE',
           payload: advancePickerDate('PREV_' + actionType, selectedDate)
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('PREV_' + actionType, selectedDate));
       } else {
         dispatch({
           type: 'UPDATE',
           payload: advancePickerDate('NEXT_' + actionType, selectedDate)
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('NEXT_' + actionType, selectedDate));
       }
     }
   }
   const renderInputGroup = () => {
-    if (inputType === DEFAULT) {
+    if (!showRangeControl) {
       return jsxs(InputGroup, Object.assign({
         disabled: disabled,
         readOnly: readOnly,
@@ -16855,38 +16888,57 @@ function InputDatePicker({
       }, void 0);
     }
   };
-  const renderDatePicker = () => jsx(DatePicker, {
-    advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
-      options: advancePickerOptions,
-      disabled: disabled,
-      optionHandler: value => {
+  const renderDatePicker = () => {
+    const handleDatePickerChange = value => {
+      if (showRangeControl || type === 'range_picker') {
+        if (rangePickerType === 'monthly') {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_MONTH', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_WEEK', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
+        }
+      } else {
         dispatch({
           type: 'UPDATE',
-          payload: advancePickerDate(value, undefined)
+          payload: value
         });
-        if (onChange) onChange(advancePickerDate(value, undefined));
-        setOpenPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
       }
-    }, void 0) : {
-      advanceView
-    }),
-    type: inputType === RANGE_CONTROL ? ADVANCE_PICKER : type,
-    disabled: disabled,
-    date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
-    selected: selectedDate,
-    isMultiDatePicker: type !== SINGLE_PICKER || inputType === 'range_control',
-    onChange: value => {
-      dispatch({
-        type: 'UPDATE',
-        payload: value
-      });
-      if (onChange) onChange(value);
-    },
-    onClose: () => setOpenPicker(false),
-    showTimePicker: showTimePicker,
-    minDate: minDate,
-    maxDate: maxDate
-  }, void 0);
+    };
+    return jsx(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
+        options: advancePickerOptions,
+        disabled: disabled,
+        optionHandler: value => {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate(value, undefined)
+          });
+          if (onChange) onChange(advancePickerDate(value, undefined));
+          setOpenPicker(false);
+        }
+      }, void 0) : {
+        advanceView
+      }),
+      type: showRangeControl ? DATE_RANGE_PICKER : type,
+      disabled: disabled,
+      date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+      selected: selectedDate,
+      isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
+      onChange: handleDatePickerChange,
+      onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
+      minDate: minDate,
+      maxDate: maxDate
+    }, void 0);
+  };
   return !isMobile ? jsxs(Popover, Object.assign({
     open: openPicker,
     onOpenChange: setOpenPicker,
@@ -16896,7 +16948,7 @@ function InputDatePicker({
       css: css
     }, {
       children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
+        condition: showRangeControl,
         wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -16908,12 +16960,12 @@ function InputDatePicker({
       }, {
         children: renderInputGroup()
       }), void 0)
-    }), void 0) : jsx(Box, Object.assign({
-      css: css
-    }, {
-      children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
-        wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
+    }), void 0) : jsx(ConditionalWrapper, Object.assign({
+      condition: showRangeControl,
+      wrapper: children => jsx(Box, Object.assign({
+        css: css
+      }, {
+        children: jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
           isInvalid: isInvalid,
@@ -16921,11 +16973,15 @@ function InputDatePicker({
         }, {
           children: children
         }), void 0)
-      }, {
-        children: jsx(PopoverTrigger, {
-          children: renderInputGroup()
-        }, void 0)
       }), void 0)
+    }, {
+      children: jsx(PopoverTrigger, {
+        children: showRangeControl ? renderInputGroup() : jsx(Box, Object.assign({
+          css: css
+        }, {
+          children: renderInputGroup()
+        }), void 0)
+      }, void 0)
     }), void 0), jsx(PopoverContent, {
       children: renderDatePicker()
     }, void 0)]
@@ -16934,7 +16990,7 @@ function InputDatePicker({
       css: css
     }, {
       children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
+        condition: showRangeControl,
         wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -17957,8 +18013,10 @@ const defaultFetchDataParams = {
 const stickyPositionStyling = column => {
   if (column.stickyPosition) {
     return column.sticky === 'left' ? {
+      position: 'sticky',
       left: `${column.stickyPosition}px !important`
     } : {
+      position: 'sticky',
       right: `${column.stickyPosition}px !important`
     };
   }
@@ -18362,15 +18420,20 @@ function Table({
                 }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
                   subRow: true
                 }, {
-                  children: [leftAddOnCells.map((_, index) => jsx("td", {}, index)), jsxs(React.Fragment, {
+                  children: [leftAddOnCells.map((_, index) => jsx("td", {
+                    style: {
+                      backgroundColor: colors$4.bgGray
+                    }
+                  }, index)), jsxs(React.Fragment, {
                     children: [jsx(TableCell$3, Object.assign({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
-                      css: {
+                      css: Object.assign({
                         paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
-                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
-                      }
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
+                        backgroundColor: '$bgGray'
+                      }, stickyPositionStyling(cell.column))
                     }, {
                       children: jsx(Paragraph, Object.assign({
                         paragraph: "shortContentBold"
@@ -23852,7 +23915,7 @@ const Device = props => {
               }, void 0), jsx(Box, Object.assign({
                 css: {
                   position: 'absolute',
-                  top: '10%',
+                  top: '7%',
                   left: '5%',
                   right: '5%'
                 }
@@ -23881,8 +23944,8 @@ const Device = props => {
                           fontWeight: 400,
                           fontSize: 14,
                           borderRadius: 50,
-                          height: 30,
-                          width: 30,
+                          height: 32,
+                          width: 32,
                           color: '$textWhite',
                           backgroundColor: '$bgGreen',
                           justifyContent: 'center',
@@ -26946,9 +27009,10 @@ const StyledCircleInfoOutline = styled(CircleInfoOutline, {});
 const WrapperDiv = styled('div', {
   '& .stepperInstance': {
     display: 'flex',
-    gap: 10,
+    gap: 25,
     '& .rsw_2Y': {
       width: '100%',
+      maxWidth: 982,
       '& .rsw_2f': {
         display: 'none'
       },
@@ -27041,7 +27105,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 104,
+          lineNumber: 106,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -27051,7 +27115,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 119,
+          lineNumber: 121,
           columnNumber: 15
         }
       }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27063,8 +27127,8 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 120,
-          columnNumber: 50
+          lineNumber: 123,
+          columnNumber: 17
         }
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
@@ -27072,7 +27136,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
+          lineNumber: 127,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27084,7 +27148,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 124,
+          lineNumber: 128,
           columnNumber: 19
         }
       })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27095,7 +27159,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 132,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27104,7 +27168,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 129,
+          lineNumber: 133,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27121,7 +27185,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 137,
+          lineNumber: 141,
           columnNumber: 13
         }
       }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27130,7 +27194,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 149,
+          lineNumber: 153,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27146,7 +27210,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 151,
+          lineNumber: 155,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -27156,7 +27220,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 163,
+          lineNumber: 167,
           columnNumber: 15
         }
       }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -27166,7 +27230,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 171,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27175,7 +27239,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 168,
+          lineNumber: 172,
           columnNumber: 19
         }
       })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27187,7 +27251,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 176,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27196,13 +27260,48 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 173,
+          lineNumber: 177,
           columnNumber: 19
         }
       }, "Coming Soon"))));
     }
   }
-  return /*#__PURE__*/React__default.createElement(StepperList, {
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: !isMobile,
+    wrapper: child => {
+      var _props$appendContent;
+      return /*#__PURE__*/React__default.createElement(Flex$1, {
+        direction: "column",
+        gap: 7,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 190,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default.createElement(Card, {
+        css: {
+          height: 'fit-content',
+          padding: 0,
+          maxWidth: 311,
+          opacity: isHide ? 0 : undefined
+        },
+        showBottomLine: false,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 191,
+          columnNumber: 11
+        }
+      }, child), typeof (props === null || props === void 0 ? void 0 : props.appendContent) === 'function' ? props === null || props === void 0 ? void 0 : (_props$appendContent = props.appendContent) === null || _props$appendContent === void 0 ? void 0 : _props$appendContent.call(props) : props === null || props === void 0 ? void 0 : props.appendContent);
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 187,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StepperList, {
     css: Object.assign({
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
       marginBottom: isMobile ? 65 : undefined,
@@ -27217,8 +27316,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 183,
-      columnNumber: 5
+      lineNumber: 201,
+      columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
     css: {
@@ -27229,8 +27328,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
-      columnNumber: 9
+      lineNumber: 217,
+      columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
@@ -27242,10 +27341,10 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 200,
-      columnNumber: 11
+      lineNumber: 218,
+      columnNumber: 13
     }
-  }, stepItems)) : stepItems);
+  }, stepItems)) : stepItems));
 };
 const Default = props => {
   const [state, updateState] = React__default.useState(Object.assign({
@@ -27326,7 +27425,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 316,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -27349,7 +27448,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 298,
+      lineNumber: 317,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -27359,11 +27458,12 @@ const Default = props => {
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
       onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
+      appendContent: props === null || props === void 0 ? void 0 : props.appendContent,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 321,
-        columnNumber: 16
+        lineNumber: 341,
+        columnNumber: 13
       }
     }),
     initialStep: props.initialStep,
@@ -27372,7 +27472,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 316,
+      lineNumber: 335,
       columnNumber: 9
     }
   }), props.children)));
@@ -32490,4 +32590,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/index.umd.js

@@ -16467,6 +16467,7 @@
   var DEFAULT = 'default';
   var SINGLE_PICKER = 'single';
   var RANGE_PICKER = 'range';
+  var DATE_RANGE_PICKER = 'range_picker';
   var ADVANCE_PICKER = 'advance';
   var RANGE_CONTROL = 'range_control';
   var WEEKLY = 'weekly';
@@ -16546,6 +16547,7 @@
   };
   var CalendarRangePicker = function CalendarRangePicker(_a) {
     var isMultiDatePicker = _a.isMultiDatePicker,
+      isRangeControl = _a.isRangeControl,
       onChange = _a.onChange,
       onClose = _a.onClose,
       advanceView = _a.advanceView,
@@ -16553,7 +16555,7 @@
       disabled = _a.disabled,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
-      props = __rest(_a, ["isMultiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+      props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
     var today = new Date();
     var prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
     var _b = React.useState([]),
@@ -16572,6 +16574,10 @@
       }
     }, [selected]);
     var onDateSelected = function onDateSelected(selectedDate) {
+      if (isRangeControl) {
+        onChange === null || onChange === void 0 ? void 0 : onChange([selectedDate.date]);
+        onClose();
+      }
       if (!dateValue.length || dateValue.length === 2) {
         setDateValue([selectedDate.date]);
       } else {
@@ -16621,20 +16627,30 @@
   var DatePicker = function DatePicker(props) {
     var type = props.type,
       otherProps = __rest(props, ["type"]);
-    if (type !== SINGLE_PICKER) {
-      return jsxRuntime.jsx(CalendarRangePicker, __assign({}, otherProps), void 0);
+    var isDateRangePicker = type === DATE_RANGE_PICKER;
+    if (type !== SINGLE_PICKER || isDateRangePicker) {
+      return jsxRuntime.jsx(CalendarRangePicker, __assign({}, otherProps, {
+        isRangeControl: isDateRangePicker
+      }), void 0);
     }
     return jsxRuntime.jsx(CalendarPicker, __assign({}, otherProps), void 0);
   };
 
+  moment__default["default"].updateLocale('id', {
+    week: {
+      dow: 1
+    }
+  });
   var UPDATE_PICKER = 'UPDATE';
   var TODAY = 'TODAY';
   var YESTERDAY = 'YESTERDAY';
   var LAST_7_DAYS = 'LAST_7_DAYS';
   var LAST_WEEK = 'LAST_WEEK';
   var PREV_WEEK = 'PREV_WEEK';
+  var RANGE_WEEK = 'RANGE_WEEK';
   var NEXT_WEEK = 'NEXT_WEEK';
   var PREV_MONTH = 'PREV_MONTH';
+  var RANGE_MONTH = 'RANGE_MONTH';
   var NEXT_MONTH = 'NEXT_MONTH';
   var THIS_WEEK = 'THIS_WEEK';
   var LAST_MONTH = 'LAST_MONTH';
@@ -16790,6 +16806,13 @@
           var endThisWeek = currentDate.endOf('week').toDate();
           return [startThisWeek, endThisWeek];
         }
+      case RANGE_WEEK:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
+          var startThisWeek = currentDate.startOf('week').toDate();
+          var endThisWeek = currentDate.endOf('week').toDate();
+          return [startThisWeek, endThisWeek];
+        }
       case PREV_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
@@ -16797,6 +16820,13 @@
           var endThisWeek = currentDate.endOf('week').toDate();
           return [startThisWeek, endThisWeek];
         }
+      case RANGE_MONTH:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
+          var startThisMonth = currentDate.startOf('month').toDate();
+          var endThisMonth = currentDate.endOf('month').toDate();
+          return [startThisMonth, endThisMonth];
+        }
       case NEXT_MONTH:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
@@ -16994,14 +17024,13 @@
   function InputDatePicker(_a) {
     var _b = _a.type,
       type = _b === void 0 ? SINGLE_PICKER : _b,
-      _c = _a.inputType,
-      inputType = _c === void 0 ? DEFAULT : _c,
-      _d = _a.rangeControl,
-      rangeControl = _d === void 0 ? WEEKLY : _d,
-      _e = _a.placeholder,
-      placeholder = _e === void 0 ? 'Pilih Tanggal' : _e,
-      _f = _a.size,
-      size = _f === void 0 ? 'sm' : _f,
+      showRangeControl = _a.showRangeControl,
+      _c = _a.rangePickerType,
+      rangePickerType = _c === void 0 ? WEEKLY : _c,
+      _d = _a.placeholder,
+      placeholder = _d === void 0 ? 'Pilih Tanggal' : _d,
+      _e = _a.size,
+      size = _e === void 0 ? 'sm' : _e,
       disabled = _a.disabled,
       onChange = _a.onChange,
       defaultDateValue = _a.defaultValue,
@@ -17009,34 +17038,35 @@
       defaultDate = _a.defaultDate,
       date = _a.date,
       advanceView = _a.advanceView,
-      _g = _a.placement,
-      placement = _g === void 0 ? 'bottom-start' : _g,
+      _f = _a.placement,
+      placement = _f === void 0 ? 'bottom-start' : _f,
       css = _a.css,
       showTimePicker = _a.showTimePicker,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
       readOnly = _a.readOnly,
       isInvalid = _a.isInvalid;
-    var _h = React.useState(date || dateValue),
-      value = _h[0],
-      setValue = _h[1];
-    var _j = React.useState(defaultDate || defaultDateValue),
-      defaultValue = _j[0],
-      setDefaultValue = _j[1];
+    var _g = React.useState(date || dateValue),
+      value = _g[0],
+      setValue = _g[1];
+    var _h = React.useState(defaultDate || defaultDateValue),
+      defaultValue = _h[0],
+      setDefaultValue = _h[1];
+    console.log(placement);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
     React.useEffect(function () {
       setDefaultValue(defaultDate || defaultDateValue);
     }, [defaultDate, defaultDateValue]);
-    var _k = React.useReducer(pickerReducer, {
+    var _j = React.useReducer(pickerReducer, {
         selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
       }),
-      selectedDate = _k[0].selectedDate,
-      dispatch = _k[1];
-    var _l = React.useState(false),
-      openPicker = _l[0],
-      setOpenPicker = _l[1];
+      selectedDate = _j[0].selectedDate,
+      dispatch = _j[1];
+    var _k = React.useState(false),
+      openPicker = _k[0],
+      setOpenPicker = _k[1];
     React.useEffect(function () {
       if (value) {
         dispatch({
@@ -17053,22 +17083,24 @@
     }
     function handleRangeChange(type) {
       if (selectedDate && !disabled && !readOnly && !isInvalid) {
-        var actionType = rangeControl === 'monthly' ? 'MONTH' : 'WEEK';
+        var actionType = rangePickerType === 'monthly' ? 'MONTH' : 'WEEK';
         if (type === 'prev') {
           dispatch({
             type: 'UPDATE',
             payload: advancePickerDate('PREV_' + actionType, selectedDate)
           });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('PREV_' + actionType, selectedDate));
         } else {
           dispatch({
             type: 'UPDATE',
             payload: advancePickerDate('NEXT_' + actionType, selectedDate)
           });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('NEXT_' + actionType, selectedDate));
         }
       }
     }
     var renderInputGroup = function renderInputGroup() {
-      if (inputType === DEFAULT) {
+      if (!showRangeControl) {
         return jsxRuntime.jsxs(InputGroup, __assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -17099,6 +17131,29 @@
       }
     };
     var renderDatePicker = function renderDatePicker() {
+      var handleDatePickerChange = function handleDatePickerChange(value) {
+        if (showRangeControl || type === 'range_picker') {
+          if (rangePickerType === 'monthly') {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate('RANGE_MONTH', value)
+            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
+          } else {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate('RANGE_WEEK', value)
+            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
+          }
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: value
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        }
+      };
       return jsxRuntime.jsx(DatePicker, {
         advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
           options: advancePickerOptions,
@@ -17114,18 +17169,12 @@
         }, void 0) : {
           advanceView: advanceView
         }),
-        type: inputType === RANGE_CONTROL ? ADVANCE_PICKER : type,
+        type: showRangeControl ? DATE_RANGE_PICKER : type,
         disabled: disabled,
         date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
         selected: selectedDate,
-        isMultiDatePicker: type !== SINGLE_PICKER || inputType === 'range_control',
-        onChange: function (value) {
-          dispatch({
-            type: 'UPDATE',
-            payload: value
-          });
-          if (onChange) onChange(value);
-        },
+        isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
+        onChange: handleDatePickerChange,
         onClose: function () {
           return setOpenPicker(false);
         },
@@ -17143,7 +17192,7 @@
         css: css
       }, {
         children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
+          condition: showRangeControl,
           wrapper: function (children) {
             return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
@@ -17157,26 +17206,30 @@
         }, {
           children: renderInputGroup()
         }), void 0)
-      }), void 0) : jsxRuntime.jsx(Box, __assign({
-        css: css
-      }, {
-        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
-          wrapper: function (children) {
-            return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
+      }), void 0) : jsxRuntime.jsx(ConditionalWrapper, __assign({
+        condition: showRangeControl,
+        wrapper: function (children) {
+          return jsxRuntime.jsx(Box, __assign({
+            css: css
+          }, {
+            children: jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
               readOnly: readOnly,
               isInvalid: isInvalid,
               onRangeChange: handleRangeChange
             }, {
               children: children
-            }), void 0);
-          }
-        }, {
-          children: jsxRuntime.jsx(PopoverTrigger, {
+            }), void 0)
+          }), void 0);
+        }
+      }, {
+        children: jsxRuntime.jsx(PopoverTrigger, {
+          children: showRangeControl ? renderInputGroup() : jsxRuntime.jsx(Box, __assign({
+            css: css
+          }, {
             children: renderInputGroup()
-          }, void 0)
-        }), void 0)
+          }), void 0)
+        }, void 0)
       }), void 0), jsxRuntime.jsx(PopoverContent, {
         children: renderDatePicker()
       }, void 0)]
@@ -17185,7 +17238,7 @@
         css: css
       }, {
         children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
+          condition: showRangeControl,
           wrapper: function (children) {
             return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
@@ -18217,8 +18270,10 @@
   var stickyPositionStyling = function stickyPositionStyling(column) {
     if (column.stickyPosition) {
       return column.sticky === 'left' ? {
+        position: 'sticky',
         left: "".concat(column.stickyPosition, "px !important")
       } : {
+        position: 'sticky',
         right: "".concat(column.stickyPosition, "px !important")
       };
     }
@@ -18673,16 +18728,21 @@
                       subRow: true
                     }, {
                       children: [leftAddOnCells.map(function (_, index) {
-                        return jsxRuntime.jsx("td", {}, index);
+                        return jsxRuntime.jsx("td", {
+                          style: {
+                            backgroundColor: colors$4.bgGray
+                          }
+                        }, index);
                       }), jsxRuntime.jsxs(React__namespace.Fragment, {
                         children: [jsxRuntime.jsx(TableCell$3, __assign({
                           subCell: true,
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
-                          css: {
+                          css: __assign({
                             paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
-                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
-                          }
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
+                            backgroundColor: '$bgGray'
+                          }, stickyPositionStyling(cell.column))
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
                             paragraph: "shortContentBold"
@@ -24205,7 +24265,7 @@
                 }, void 0), jsxRuntime.jsx(Box, __assign({
                   css: {
                     position: 'absolute',
-                    top: '10%',
+                    top: '7%',
                     left: '5%',
                     right: '5%'
                   }
@@ -24234,8 +24294,8 @@
                             fontWeight: 400,
                             fontSize: 14,
                             borderRadius: 50,
-                            height: 30,
-                            width: 30,
+                            height: 32,
+                            width: 32,
                             color: '$textWhite',
                             backgroundColor: '$bgGreen',
                             justifyContent: 'center',
@@ -27299,9 +27359,10 @@
   const WrapperDiv = styled('div', {
     '& .stepperInstance': {
       display: 'flex',
-      gap: 10,
+      gap: 25,
       '& .rsw_2Y': {
         width: '100%',
+        maxWidth: 982,
         '& .rsw_2f': {
           display: 'none'
         },
@@ -27394,7 +27455,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 104,
+            lineNumber: 106,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -27404,7 +27465,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 119,
+            lineNumber: 121,
             columnNumber: 15
           }
         }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27416,8 +27477,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 120,
-            columnNumber: 50
+            lineNumber: 123,
+            columnNumber: 17
           }
         }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
@@ -27425,7 +27486,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
+            lineNumber: 127,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27437,7 +27498,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 124,
+            lineNumber: 128,
             columnNumber: 19
           }
         })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27448,7 +27509,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 132,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27457,7 +27518,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 129,
+            lineNumber: 133,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27474,7 +27535,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 137,
+            lineNumber: 141,
             columnNumber: 13
           }
         }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -27483,7 +27544,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 149,
+            lineNumber: 153,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27499,7 +27560,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 151,
+            lineNumber: 155,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -27509,7 +27570,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 163,
+            lineNumber: 167,
             columnNumber: 15
           }
         }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -27519,7 +27580,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 167,
+            lineNumber: 171,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -27528,7 +27589,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 168,
+            lineNumber: 172,
             columnNumber: 19
           }
         })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -27540,7 +27601,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 176,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -27549,13 +27610,48 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 173,
+            lineNumber: 177,
             columnNumber: 19
           }
         }, "Coming Soon"))));
       }
     }
-    return /*#__PURE__*/React__default["default"].createElement(StepperList, {
+    return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: !isMobile,
+      wrapper: child => {
+        var _props$appendContent;
+        return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+          direction: "column",
+          gap: 7,
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 190,
+            columnNumber: 9
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Card, {
+          css: {
+            height: 'fit-content',
+            padding: 0,
+            maxWidth: 311,
+            opacity: isHide ? 0 : undefined
+          },
+          showBottomLine: false,
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$4,
+            lineNumber: 191,
+            columnNumber: 11
+          }
+        }, child), typeof (props === null || props === void 0 ? void 0 : props.appendContent) === 'function' ? props === null || props === void 0 ? void 0 : (_props$appendContent = props.appendContent) === null || _props$appendContent === void 0 ? void 0 : _props$appendContent.call(props) : props === null || props === void 0 ? void 0 : props.appendContent);
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 187,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StepperList, {
       css: Object.assign({
         borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
         marginBottom: isMobile ? 65 : undefined,
@@ -27570,8 +27666,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 183,
-        columnNumber: 5
+        lineNumber: 201,
+        columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       css: {
@@ -27582,8 +27678,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
-        columnNumber: 9
+        lineNumber: 217,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
@@ -27595,10 +27691,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 200,
-        columnNumber: 11
+        lineNumber: 218,
+        columnNumber: 13
       }
-    }, stepItems)) : stepItems);
+    }, stepItems)) : stepItems));
   };
   const Default = props => {
     const [state, updateState] = React__default["default"].useState(Object.assign({
@@ -27679,7 +27775,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 316,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -27702,7 +27798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 298,
+        lineNumber: 317,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -27712,11 +27808,12 @@
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
         onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
+        appendContent: props === null || props === void 0 ? void 0 : props.appendContent,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 321,
-          columnNumber: 16
+          lineNumber: 341,
+          columnNumber: 13
         }
       }),
       initialStep: props.initialStep,
@@ -27725,7 +27822,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 316,
+        lineNumber: 335,
         columnNumber: 9
       }
     }), props.children)));
@@ -32988,6 +33085,7 @@
   exports.ContextMenuItem = ContextMenuItem;
   exports.ContextMenuSeparator = ContextMenuSeparator;
   exports.ContextMenuTrigger = ContextMenuTrigger;
+  exports.DATE_RANGE_PICKER = DATE_RANGE_PICKER;
   exports.DEFAULT = DEFAULT;
   exports.DateColumn = DateColumn;
   exports.DatePicker = DatePicker;
@@ -33104,7 +33202,9 @@
   exports.Progress = Progress$1;
   exports.ProgressIndicator = ProgressIndicator;
   exports.RANGE_CONTROL = RANGE_CONTROL;
+  exports.RANGE_MONTH = RANGE_MONTH;
   exports.RANGE_PICKER = RANGE_PICKER;
+  exports.RANGE_WEEK = RANGE_WEEK;
   exports.ResendOTP = ResendOTP;
   exports.RightSlot = RightSlot;
   exports.RowExpanderColumn = rowExpanderColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.6-rev.2",
+  "version": "1.54.7-rev.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",