@majoo-ui/react 1.60.37 → 1.61.0-rc.2

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky'), require('react-signature-pad-wrapper')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky', 'react-signature-pad-wrapper'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky, global.SignaturePad));
+})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky, SignaturePad) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -56,6 +56,7 @@
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
+  var SignaturePad__default = /*#__PURE__*/_interopDefaultLegacy(SignaturePad);
 
   var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
   function ThemeProvider({
@@ -8521,7 +8522,7 @@
     }));
   });
   InputText.propTypes = {
-    placeholdren: PropTypes__default["default"].string,
+    placeholder: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
     disabled: PropTypes__default["default"].bool,
@@ -8595,7 +8596,7 @@
     }));
   });
   InputTextArea.propTypes = {
-    placeholdren: PropTypes__default["default"].string,
+    placeholder: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
     disabled: PropTypes__default["default"].bool,
@@ -18228,11 +18229,15 @@
     var selected = _a.selected,
       disabled = _a.disabled,
       language = _a.language,
-      onSetDateValue = _a.onSetDateValue;
+      onSetDateValue = _a.onSetDateValue,
+      isSingle = _a.isSingle;
     var t = reactI18next.useTranslation('MajooUI/datePicker').t;
     var startTime = moment__default["default"]('00:00', 'HH:mm').toDate();
     var endTime = moment__default["default"]('00:00', 'HH:mm').toDate();
-    if (selected && selected.length > 1) {
+    if (isSingle && selected && selected.length) {
+      startTime = selected[0];
+    }
+    if (!isSingle && selected && selected.length > 1) {
       startTime = selected[0];
       endTime = selected[1];
     }
@@ -18253,7 +18258,7 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('dateFromLabel', 'Dari Tanggal')
+          children: isSingle ? t('label.date', 'Tanggal') : t('dateFromLabel', 'Dari Tanggal')
         }), void 0), jsxRuntime.jsx(Text$1, __assign({
           variant: "label",
           color: "disable"
@@ -18268,53 +18273,55 @@
           variant: "label",
           color: "primary"
         }, {
-          children: t('timeFromLabel', 'Dari Pukul')
+          children: isSingle ? t('time', 'Waktu') : t('timeFromLabel', 'Dari Pukul')
         }), void 0), jsxRuntime.jsx(InputTimePicker, {
           onChange: function (val) {
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
+            if (isSingle && selected && selected.length && !!onSetDateValue) onSetDateValue(val.toDate());else if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([val.toDate(), selected[1]]);
           },
           size: "sm",
           value: startTime,
-          disabled: !(selected && selected.length > 1)
+          disabled: isSingle ? !(selected && selected.length) : !(selected && selected.length > 1)
         }, void 0)]
-      }), void 0), jsxRuntime.jsx(Separator$2, {
-        orientation: "horizontal"
-      }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
+      }), void 0), isSingle ? null : jsxRuntime.jsxs(React__default["default"].Fragment, {
+        children: [jsxRuntime.jsx(Separator$2, {
+          orientation: "horizontal"
+        }, void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: t('dateUntilLabel', 'Hingga Tanggal')
-        }), void 0), jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "disable"
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('dateUntilLabel', 'Hingga Tanggal')
+          }), void 0), jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "disable"
+          }, {
+            children: formattedEndDate
+          }), void 0)]
+        }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
+          direction: "column",
+          gap: 3
         }, {
-          children: formattedEndDate
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "label",
+            color: "primary"
+          }, {
+            children: t('timeUntilLabel', 'Hingga Pukul')
+          }), void 0), jsxRuntime.jsx(InputTimePicker, {
+            onChange: function (val) {
+              var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
+              var newTime = val.format('HH:mm');
+              var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
+              if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
+            },
+            size: "sm",
+            value: endTime,
+            disabled: !(selected && selected.length > 1)
+          }, void 0)]
         }), void 0)]
-      }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
-        direction: "column",
-        gap: 3
-      }, {
-        children: [jsxRuntime.jsx(Text$1, __assign({
-          variant: "label",
-          color: "primary"
-        }, {
-          children: t('timeUntilLabel', 'Hingga Pukul')
-        }), void 0), jsxRuntime.jsx(InputTimePicker, {
-          onChange: function (val) {
-            var endDate = moment__default["default"](endTime).format('YYYY-MM-DD');
-            var newTime = val.format('HH:mm');
-            var newValue = moment__default["default"]("".concat(endDate, " ").concat(newTime), 'YYYY-MM-DD HH:mm').toDate();
-            if (selected && selected.length > 1 && !!onSetDateValue) onSetDateValue([selected[0], newValue]);
-          },
-          size: "sm",
-          value: endTime,
-          disabled: !(selected && selected.length > 1)
-        }, void 0)]
-      }), void 0)]
+      }, void 0)]
     }), void 0);
   };
 
@@ -18376,17 +18383,22 @@
   });
   var CalendarsContainer$1 = styled(Box, {
     width: '100%',
-    padding: '$spacing-03',
     display: 'inline-flex',
     borderRadius: '$lg',
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
-    backgroundColor: '$white',
     justifyContent: 'center',
     gap: '$spacing-03',
     '@md': {
       width: 'unset'
     }
   });
+  var CalenderBoxContainer = styled(Box, {
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+    borderRadius: '$lg',
+    backgroundColor: '$white',
+    padding: '$spacing-03'
+  });
   var CalendarItemContainer$1 = styled(Flex$1, {});
   var DateContainer$1 = styled(Box, {
     width: '100%',
@@ -18459,7 +18471,7 @@
       }
     }
   });
-  var ButtonTime = styled('button', {
+  styled('button', {
     fontWeight: 600,
     fontStyle: 'normal',
     fontSize: 14,
@@ -18505,9 +18517,9 @@
       selected = _a.selected,
       containerStyle = _a.containerStyle,
       disabled = _a.disabled,
-      showTimePicker = _a.showTimePicker,
-      renderTimePicker = _a.renderTimePicker,
-      minDate = _a.minDate,
+      showTimePicker = _a.showTimePicker;
+      _a.renderTimePicker;
+      var minDate = _a.minDate,
       maxDate = _a.maxDate,
       allowReset = _a.allowReset,
       onSetDateValue = _a.onSetDateValue;
@@ -18886,92 +18898,112 @@
       }, void 0);
     };
     var renderTime = function renderTime() {
-      return jsxRuntime.jsxs(Box, __assign({
-        css: {
-          padding: 4
-        }
-      }, {
+      return jsxRuntime.jsxs(React.Fragment, {
         children: [jsxRuntime.jsx(Separator$2, {
-          css: {
-            my: '$spacing-02'
-          }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
+          orientation: "vertical"
+        }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+          selected: selected,
           disabled: disabled,
-          onClick: function () {
-            return setPickerState(function (current) {
-              return __assign(__assign({}, current), {
-                type: TIME_PICKER
-              });
-            });
-          },
-          type: "button"
+          language: language,
+          onSetDateValue: onSetDateValue
         }, {
-          children: selected && selected[0] ? moment__default["default"](selected[0]).format('HH:mm') : moment__default["default"]().format('HH:mm')
+          isSingle: !multiDatePicker
         }), void 0)]
-      }), void 0);
+      }, void 0);
     };
-    var renderButtonTime = function renderButtonTime() {
+    var renderFooterSingleTimePicker = function renderFooterSingleTimePicker() {
       return jsxRuntime.jsxs(Box, __assign({
         css: {
-          padding: 4
+          width: '$full'
         }
       }, {
         children: [jsxRuntime.jsx(Separator$2, {
           css: {
-            my: '$spacing-02'
+            my: '$spacing-03'
+          }
+        }, void 0), jsxRuntime.jsx(Flex$1, __assign({
+          justify: "end",
+          align: "center",
+          css: {
+            padding: 8
           }
-        }, void 0), jsxRuntime.jsx(ButtonTime, __assign({
-          disabled: disabled,
-          onClick: function () {
-            return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-          },
-          type: "button"
         }, {
-          children: "Done"
+          children: jsxRuntime.jsxs(Flex$1, __assign({
+            gap: 3
+          }, {
+            children: [jsxRuntime.jsx(Button$4, __assign({
+              buttonType: "ghost",
+              css: {
+                fontWeight: 600
+              },
+              onClick: onCancel,
+              disabled: disabled,
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.cancel', 'Batal', {
+                ns: 'translation'
+              })
+            }), void 0), jsxRuntime.jsx(Button$4, __assign({
+              css: {
+                fontWeight: 600
+              },
+              onClick: onUpdate,
+              disabled: disabled || !(selected && selected.length),
+              size: "sm",
+              type: "button"
+            }, {
+              children: t('label.save', 'Simpan', {
+                ns: 'translation'
+              })
+            }), void 0)]
+          }), void 0)
         }), void 0)]
       }), void 0);
     };
     if (calendars.length) {
-      return jsxRuntime.jsxs(CalendarsContainer$1, __assign({
-        css: containerStyle
-      }, {
-        children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
-          orientation: "vertical"
-        }, void 0), jsxRuntime.jsxs(Box, {
-          children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
-            gap: 5
-          }, {
-            children: calendars.map(function (calendar, index) {
-              return jsxRuntime.jsxs(React__default["default"].Fragment, {
-                children: [index > 0 && jsxRuntime.jsx(Separator$2, {
-                  orientation: "vertical",
-                  css: {
-                    height: 'auto'
-                  }
-                }, void 0), jsxRuntime.jsxs(DateContainer$1, {
-                  children: [jsxRuntime.jsx(Separator$2, {
+      return jsxRuntime.jsxs(CalenderBoxContainer, {
+        children: [jsxRuntime.jsxs(CalendarsContainer$1, __assign({
+          css: containerStyle
+        }, {
+          children: [advanceView, advanceView && jsxRuntime.jsx(Separator$2, {
+            orientation: "vertical"
+          }, void 0), jsxRuntime.jsxs(Box, {
+            children: [renderHeader(), jsxRuntime.jsx(CalendarItemContainer$1, __assign({
+              gap: 5
+            }, {
+              children: calendars.map(function (calendar, index) {
+                return jsxRuntime.jsxs(React__default["default"].Fragment, {
+                  children: [index > 0 && jsxRuntime.jsx(Separator$2, {
+                    orientation: "vertical",
                     css: {
-                      mb: '$spacing-04',
-                      mt: '$spacing-02'
+                      height: 'auto'
                     }
-                  }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
-                  }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList(), pickerState.type === TIME_PICKER && renderTimePicker && renderTimePicker()]
-                }, void 0)]
-              }, "".concat(calendar.month).concat(calendar.year));
-            })
-          }), void 0), multiDatePicker && renderFooter(), !advanceView && showTimePicker && (pickerState.type === TIME_PICKER ? renderButtonTime() : renderTime())]
-        }, void 0), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
-          children: [jsxRuntime.jsx(Separator$2, {
-            orientation: "vertical"
-          }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
-            selected: selected,
-            disabled: disabled,
-            language: language,
-            onSetDateValue: onSetDateValue
-          }), void 0)]
-        }, void 0)]
-      }), void 0);
+                  }, void 0), jsxRuntime.jsxs(DateContainer$1, {
+                    children: [jsxRuntime.jsx(Separator$2, {
+                      css: {
+                        mb: '$spacing-04',
+                        mt: '$spacing-02'
+                      }
+                    }, void 0), pickerState.type === DATE_PICKER && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                      children: [renderWeekLabel(calendar), renderDateNumber(calendar)]
+                    }, void 0), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList()]
+                  }, void 0)]
+                }, "".concat(calendar.month).concat(calendar.year));
+              })
+            }), void 0)]
+          }, void 0), !advanceView && showTimePicker && renderTime(), showTimePicker && pickerState.type === DATE_PICKER && !!advanceView && jsxRuntime.jsxs(React.Fragment, {
+            children: [jsxRuntime.jsx(Separator$2, {
+              orientation: "vertical"
+            }, void 0), jsxRuntime.jsx(CalendarTimePicker, __assign({}, {
+              selected: selected,
+              disabled: disabled,
+              language: language,
+              onSetDateValue: onSetDateValue
+            }), void 0)]
+          }, void 0)]
+        }), void 0), !multiDatePicker && showTimePicker && renderFooterSingleTimePicker(), multiDatePicker && renderFooter()]
+      }, void 0);
     }
     return null;
   };
@@ -19572,6 +19604,7 @@
       if (dateValue && onChange) {
         onChange(dateValue);
       }
+      onClose();
     };
     var dayzedData = dayzed.useDayzed(__assign(__assign({}, props), {
       date: calendarDate,
@@ -19588,41 +19621,22 @@
       }
     }, [selected]);
     React.useEffect(function () {
-      if (dateValue && !isMultiDatePicker && onChange) {
+      if (dateValue && !(isMultiDatePicker || showTimePicker) && onChange) {
         onChange(dateValue);
       }
     }, [dateValue]);
-    var renderTimePicker = function renderTimePicker(props) {
-      return jsxRuntime.jsx(Box, __assign({
-        css: {
-          padding: '40px 60px'
-        }
-      }, {
-        children: jsxRuntime.jsx(NativeTimePicker, __assign({
-          size: "lg",
-          value: dateValue ? moment__default["default"](dateValue) : moment__default["default"](),
-          minDate: minDate,
-          maxDate: maxDate,
-          disabled: disabled,
-          onChange: function (date) {
-            setDateValue(new Date(date));
-          }
-        }, props), void 0)
-      }), void 0);
-    };
     return jsxRuntime.jsx(CalendarBox, __assign({
-      onUpdate: isMultiDatePicker ? updateHandler : undefined,
+      onUpdate: isMultiDatePicker || showTimePicker ? updateHandler : undefined,
       onCancel: onClose,
       selected: dateValue ? [dateValue] : undefined,
       advanceView: advanceView,
       disabled: disabled,
       onCalendarDateChange: setCalendarDate,
       showTimePicker: showTimePicker,
-      renderTimePicker: function () {
-        return renderTimePicker(timePickerProps);
-      },
       minDate: minDate,
       maxDate: maxDate
+    }, showTimePicker && {
+      onSetDateValue: setDateValue
     }, dayzedData), void 0);
   };
   var CalendarRangePicker = function CalendarRangePicker(_a) {
@@ -20630,6 +20644,185 @@
     }), void 0);
   });
 
+  var SignatureModal = function SignatureModal(_a) {
+    var t = _a.t,
+      open = _a.open,
+      onOpenChange = _a.onOpenChange,
+      onSave = _a.onSave,
+      title = _a.title,
+      isMobile = _a.isMobile;
+    var signaturePadRef = React.useRef(null);
+    var handleSave = function handleSave() {
+      if (signaturePadRef.current) {
+        var signature = signaturePadRef.current.toDataURL();
+        onSave === null || onSave === void 0 ? void 0 : onSave(signature);
+      }
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    };
+    return jsxRuntime.jsxs(ModalDialog, __assign({
+      open: open,
+      onOpenChange: onOpenChange,
+      isMobile: isMobile
+    }, {
+      children: [jsxRuntime.jsx(ModalDialogTitle, {
+        children: title
+      }, void 0), jsxRuntime.jsx(ModalDialogContent, {
+        children: jsxRuntime.jsx(SignaturePad__default["default"], {
+          ref: signaturePadRef,
+          height: 256,
+          canvasProps: {
+            style: {
+              border: '2px dashed #C0C4C4',
+              borderRadius: '8px'
+            }
+          },
+          options: {
+            penColor: 'black',
+            backgroundColor: core.foundations.colors.bgGray
+          }
+        }, void 0)
+      }, void 0), jsxRuntime.jsxs(ModalDialogFooter, __assign({
+        css: {
+          display: 'flex',
+          gap: '$compact'
+        }
+      }, {
+        children: [jsxRuntime.jsx(DialogClose, __assign({
+          asChild: true
+        }, {
+          children: jsxRuntime.jsx(Button$4, __assign({
+            buttonType: "ghost",
+            size: "sm"
+          }, {
+            children: t('label.cancel', 'Batal')
+          }), void 0)
+        }), void 0), jsxRuntime.jsx(Button$4, __assign({
+          size: "sm",
+          onClick: handleSave
+        }, {
+          children: t('label.save', 'Simpan')
+        }), void 0)]
+      }), void 0)]
+    }), void 0);
+  };
+
+  var SignatureContainer = react.styled(Flex$1, {
+    position: 'relative',
+    border: '2px dashed $gray300',
+    borderRadius: 8,
+    height: '88px',
+    width: '100%',
+    cursor: 'pointer',
+    transition: '0.2s',
+    transitionDuration: '0.5s',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: '$bgGray',
+    '&:hover': {
+      border: '2px dashed $primary400',
+      background: '$bgSuccess'
+    },
+    variants: {
+      hasContent: {
+        true: {
+          '&:hover': {
+            background: '$bgGray'
+          }
+        }
+      },
+      showError: {
+        true: {
+          border: '2px dashed $red400',
+          '&:hover': {
+            border: '2px dashed  $red300',
+            background: '$bgFailed'
+          }
+        }
+      },
+      disabled: {
+        true: {
+          border: 'none',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: 'none',
+            background: '$bgGray'
+          }
+        }
+      }
+    }
+  });
+  function InputSignature(_a) {
+    var title = _a.title,
+      onChange = _a.onChange,
+      _b = _a.defaultValue,
+      defaultValue = _b === void 0 ? '' : _b,
+      _c = _a.disabled,
+      disabled = _c === void 0 ? false : _c,
+      css = _a.css,
+      isMobile = _a.isMobile;
+    var t = reactI18next.useTranslation(['MajooUI/inputSignature', 'translation']).t;
+    var _d = React.useState(defaultValue),
+      signatureImage = _d[0],
+      setSignatureImage = _d[1];
+    var _e = React.useState(false),
+      open = _e[0],
+      setOpen = _e[1];
+    var handleSave = function handleSave(signature) {
+      setSignatureImage(signature);
+    };
+    reactTable.useMountedLayoutEffect(function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(signatureImage);
+    }, [signatureImage]);
+    return jsxRuntime.jsxs(React__default["default"].Fragment, {
+      children: [jsxRuntime.jsx(SignatureContainer, __assign({
+        hasContent: !!signatureImage,
+        onClick: function () {
+          if (!disabled) {
+            setOpen(true);
+          }
+        },
+        disabled: disabled,
+        css: css
+      }, {
+        children: signatureImage ? jsxRuntime.jsxs(React__default["default"].Fragment, {
+          children: [!disabled ? jsxRuntime.jsx(Box, __assign({
+            css: {
+              position: 'absolute',
+              top: '8px',
+              right: '8px'
+            },
+            onClick: function (e) {
+              e.stopPropagation();
+              setSignatureImage('');
+            }
+          }, {
+            children: jsxRuntime.jsx(icons.CloseFilled, {
+              color: core.foundations.colors.iconRed
+            }, void 0)
+          }), void 0) : null, jsxRuntime.jsx("img", {
+            src: signatureImage,
+            alt: "signature",
+            style: {
+              height: '100%'
+            }
+          }, void 0)]
+        }, void 0) : jsxRuntime.jsx(Text$1, __assign({
+          variant: "label",
+          color: "disable"
+        }, {
+          children: t('placeholder', 'Tanda tangan disini')
+        }), void 0)
+      }), void 0), jsxRuntime.jsx(SignatureModal, {
+        t: t,
+        open: open,
+        onOpenChange: setOpen,
+        onSave: handleSave,
+        isMobile: isMobile,
+        title: title || t('modalTitle', 'Tambah Tanda Tangan')
+      }, void 0)]
+    }, void 0);
+  }
+
   const _excluded$9 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
   var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
@@ -57645,6 +57838,7 @@
   exports.InputSelect = InputSelect;
   exports.InputSelectCheck = InputSelectCheck;
   exports.InputSelectTag = InputSelectTag;
+  exports.InputSignature = InputSignature;
   exports.InputSuffix = InputSuffix;
   exports.InputSwitch = InputSwitch;
   exports.InputTags = TagsInput;