@majoo-ui/react 1.62.2 → 1.62.4

package/index.esm.js

@@ -41,7 +41,7 @@ import { EditableInput, ColorWrap, Saturation, Hue, Alpha, Swatch } from 'react-
 import * as color from 'react-color/lib/helpers/color';
 import StepWizard$1 from 'react-step-wizard';
 import { useVirtual } from 'react-virtual';
-import { MapContainer, Circle, TileLayer, useMapEvents } from '@monsonjeremy/react-leaflet';
+import { useMapEvents, MapContainer, Circle, TileLayer } from '@monsonjeremy/react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
 import 'leaflet-defaulticon-compatibility';
@@ -13594,7 +13594,7 @@ const InputTagsComponent = styled('div', {
     }
   }
 });
-const Input$8 = styled('input', {
+const Input$7 = styled('input', {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
@@ -13705,7 +13705,7 @@ function TagsInput(_ref) {
     disabled: disabled || readOnly || tags.length >= max,
     value: value,
     css: Object.assign({}, props.css)
-  }, props), /*#__PURE__*/React__default.createElement(Input$8, {
+  }, props), /*#__PURE__*/React__default.createElement(Input$7, {
     type: "text",
     onKeyUp: event => addTags(event)
     // onKeyDown={event => removeTags(tags.length - 1, event.key)}
@@ -15185,7 +15185,7 @@ const Button$3 = styled('button', {
     }
   }
 });
-const Input$7 = styled('input', {
+const Input$6 = styled('input', {
   marginLeft: '$spacing-05',
   display: 'flex',
   width: '100%',
@@ -15361,7 +15361,7 @@ const SelectInputSearch$1 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) =>
         width: '$spacing-05',
         padding: 0
       } : undefined
-    }), jsx(Input$7, Object.assign({}, inputProps, props, {
+    }), jsx(Input$6, Object.assign({}, inputProps, props, {
       placeholder: placeholder,
       readOnly: readOnly,
       isReadOnly: readOnly,
@@ -16425,7 +16425,7 @@ const InputWrapper$1 = styled('div', {
     }
   }
 });
-const Input$6 = styled('input', {
+const Input$5 = styled('input', {
   width: '100%',
   textAlign: 'left',
   background: 'unset',
@@ -17305,7 +17305,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     suppressRefError: true
   }), {
     disabled: disabled || readOnly
-  }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
+  }), /*#__PURE__*/React__default.createElement(Input$5, _extends({}, getInputProps({
     disabled: disabled || readOnly,
     refKey: 'ref',
     ref
@@ -17747,7 +17747,7 @@ const InputWrapper = styled('div', {
     }
   }
 });
-const Input$5 = styled('input', {
+const Input$4 = styled('input', {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
@@ -17847,7 +17847,7 @@ function InputCreatable({
     size: size,
     isInvalid: isInvalid,
     disabled: disabled || readOnly
-  }, /*#__PURE__*/React__default.createElement(Input$5, {
+  }, /*#__PURE__*/React__default.createElement(Input$4, {
     type: "text",
     placeholder: placeholder,
     disabled: disabled,
@@ -18345,7 +18345,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         width: '$spacing-05',
         padding: 0
       } : undefined
-    }), jsx(Input$7, Object.assign({}, inputProps, props, {
+    }), jsx(Input$6, Object.assign({}, inputProps, props, {
       placeholder: placeholder,
       readOnly: readOnly,
       isReadOnly: readOnly,
@@ -18532,7 +18532,7 @@ ResendOTP.defaultProps = {
   timeInterval: 1000
 };
 
-const Input$4 = styled(InputNumber, {
+const Input$3 = styled(InputNumber, {
   border: `1px solid $gray150`,
   borderLeft: 'none',
   borderRight: 'none',
@@ -18715,7 +18715,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
         size: 24,
         color: disabled || disabledDecrement ? colors$7.iconDisable : colors$7.primary500
       })
-    }), jsx(Input$4, {
+    }), jsx(Input$3, {
       ref: ref,
       disabled: disabled || disabledIncrement || disabledDecrement || disableManualInput,
       disabledChange: disabledIncrement || disabledDecrement || disableManualInput,
@@ -19471,7 +19471,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-const Input$3 = styled('input', {
+const Input$2 = styled('input', {
   display: 'none'
 });
 const InputTime = styled('input', {
@@ -19740,7 +19740,7 @@ const NativeTimePicker = ({
     type: "up",
     disabled: disabled || disabledMinute || disabledMinuteIncrease,
     onClick: () => handleUp('minutes')
-  })), /*#__PURE__*/React__default.createElement(Input$3, {
+  })), /*#__PURE__*/React__default.createElement(Input$2, {
     type: "time",
     defaultValue: moment(date).format(format),
     value: value,
@@ -27936,14 +27936,9 @@ const TemplateAlertFunction = props => {
         props == null || props.onOpenAutoFocus();
       }
     }
-  }, /*#__PURE__*/React__default.createElement(StyledTitle, {
+  }, /*#__PURE__*/React__default.createElement(ADialog.Title, {
     asChild: true
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__default.createElement(Heading, {
+  }, /*#__PURE__*/React__default.createElement(StyledTitle, null, /*#__PURE__*/React__default.createElement(Heading, {
     heading: "pageTitle"
   }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true
@@ -27956,14 +27951,14 @@ const TemplateAlertFunction = props => {
     size: 22
   }))))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal"
-  }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
+  }), /*#__PURE__*/React__default.createElement(ADialog.Description, {
     asChild: true
-  }, /*#__PURE__*/React__default.createElement(Paragraph, {
+  }, /*#__PURE__*/React__default.createElement(StyledDescription$1, null, /*#__PURE__*/React__default.createElement(Paragraph, {
     paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
+  }, props.description))), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       width: '100%',
       display: props != null && props.singleButton && props != null && props.hideActionButton ? 'none' : 'inherit'
@@ -28045,14 +28040,9 @@ function AlertDialog(props) {
     onOpenAutoFocus: e => {
       if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
     }
-  }, /*#__PURE__*/React__default.createElement(StyledTitle, {
+  }, /*#__PURE__*/React__default.createElement(ADialog.Title, {
     asChild: true
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__default.createElement(Heading, {
+  }, /*#__PURE__*/React__default.createElement(StyledTitle, null, /*#__PURE__*/React__default.createElement(Heading, {
     heading: "pageTitle"
   }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
     asChild: true
@@ -28065,15 +28055,15 @@ function AlertDialog(props) {
     size: 22
   }))))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal"
-  }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
+  }), /*#__PURE__*/React__default.createElement(ADialog.Description, {
     asChild: true
-  }, /*#__PURE__*/React__default.createElement(Paragraph, {
+  }, /*#__PURE__*/React__default.createElement(StyledDescription$1, null, /*#__PURE__*/React__default.createElement(Paragraph, {
     paragraph: "longContentRegular",
     css: {
       textAlign: 'justify',
       wordBreak: 'break-word'
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
+  }, props.description))), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       width: '100%',
       display: props != null && props.singleButton && props != null && props.hideActionButton ? 'none' : 'inherit'
@@ -30488,7 +30478,7 @@ function imgPreview(image_1, crop_1) {
 }
 
 const _excluded = ["customPreviewIcon"];
-const Input$2 = styled('input', {
+const Input$1 = styled('input', {
   display: 'none !important'
 });
 const Children = styled('div', {
@@ -31338,7 +31328,7 @@ const Upload = ({
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
     progress: progress,
     loading: loading
-  }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
+  }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$1, {
     type: "file",
     accept: accept,
     ref: hiddenFileInput,
@@ -52358,7 +52348,7 @@ const RemoveIcon = styled(RemoveOutline, {
     }
   }
 });
-const Input$1 = styled(InputText, {
+const Input = styled(InputText, {
   height: '32px !important'
 });
 const Required$1 = styled('span', {
@@ -52775,7 +52765,7 @@ function EditableTable(props) {
   });
 }
 EditableTable.Product = Product;
-EditableTable.Input = Input$1;
+EditableTable.Input = Input;
 EditableTable.Switch = Switch;
 EditableTable.Remove = Remove;
 EditableTable.TableRow = TableRow$1;
@@ -53171,13 +53161,14 @@ function ProgressIndicator(props) {
   return direction === 'horizontal' ? renderHorizontalIndicator() : renderVerticalIndicator();
 }
 
+//@ts-nocheck
 const Container$3 = styled(Flex$1, {
   gap: '$spacing-05',
   '@md': {
     width: 517
   }
 });
-const AddressCard = styled(Flex$1, {
+const AddressCardWrapper = styled(Flex$1, {
   border: '1px solid #EEF0F0',
   borderRadius: 8,
   gap: '$spacing-04',
@@ -53189,7 +53180,7 @@ const Address = styled('p', {
   color: '$textPrimary',
   margin: 0
 });
-const Input = styled('input', {
+const SearchInput = styled('input', {
   boxSizing: `border-box`,
   border: `1px solid transparent`,
   width: 204,
@@ -53202,7 +53193,7 @@ const Input = styled('input', {
   outline: `none`,
   textOverflow: `ellipses`
 });
-const ZoomControl = styled(Flex$1, {
+const ZoomControlButton = styled(Flex$1, {
   height: 44,
   width: 44,
   padding: 12,
@@ -53214,97 +53205,65 @@ const ZoomControl = styled(Flex$1, {
   cursor: 'pointer',
   zIndex: 1800
 });
-const InputSearch = ({
-  placeholder,
-  value,
-  list,
-  onChange,
-  onSelect
-}) => jsxs(Box, {
-  css: {
-    position: 'absolute',
-    left: 16,
-    top: 16,
-    zIndex: 1000
-  },
-  children: [jsxs(Box, {
-    css: {
-      position: 'relative'
-    },
-    children: [jsx(Input, {
-      placeholder: placeholder,
-      value: value,
-      onChange: onChange
-    }), jsx(Box, {
-      css: {
-        position: 'absolute',
-        top: 5,
-        left: 10
-      },
-      children: jsx(SearchOutline, {
-        size: 24
-      })
-    })]
-  }), list.length ? jsx(Box, {
-    css: {
-      position: 'relative',
-      zIndex: 1000,
-      width: 204,
-      maxHeight: 155,
-      overflow: 'hidden',
-      backgroundColor: '$bgWhite',
-      borderRadius: '$sm'
-    },
-    children: jsx(Flex$1, {
-      direction: "column",
-      gap: 2,
-      children: list.map((item, index) => {
-        return jsx(Paragraph, {
-          css: {
-            cursor: 'pointer',
-            padding: '$spacing-02',
-            '&:hover': {
-              backgroundColor: '$gray100'
-            }
-          },
-          isTruncated: true,
-          onClick: () => onSelect(item),
-          children: item.display_name
-        }, index);
-      })
-    })
-  }) : jsx(Fragment, {})]
+const MapWrapper = styled('div', {
+  position: 'relative',
+  width: '100% !important',
+  height: '441px !important',
+  overflow: 'hidden',
+  '@md': {
+    width: '517px !important'
+  }
 });
-function MapPicker(props) {
-  const {
-    t
-  } = useTranslation(['MajooUI/mapPicker', 'translation']);
-  useRef(null);
-  const {
-    css,
-    showBanner,
-    bannerDescription,
-    radius,
-    value,
-    showSelectButton,
-    onChange,
-    onMarkerClick
-  } = props;
-  const [center, setCenter] = useState({
+const mapContainerStyle = {
+  mobile: {
+    position: 'relative',
+    width: '100%',
+    height: '441px'
+  },
+  desktop: {
+    position: 'relative',
+    width: '517px',
+    height: '441px'
+  }
+};
+
+function useMapSearch({
+  initialCenter = {
     lat: -6.175392,
     lng: 106.827153
-  });
+  },
+  showSelectButton = true,
+  onChange
+}) {
+  const [center, setCenter] = useState(initialCenter);
   const [places, setPlaces] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResult, setSearchResult] = useState([]);
-  const [isBanner, setIsBanner] = useState(true);
-  const [zoom, setZoom] = useState(16);
-  const getFullAddress = useCallback(latLng => __awaiter(this, void 0, void 0, function* () {
+  // Track if component is mounted to prevent state updates after unmount
+  const isMountedRef = useRef(true);
+  // AbortController to cancel pending fetch requests
+  const abortControllerRef = useRef(null);
+  // Cleanup on unmount
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      var _a;
+      isMountedRef.current = false;
+      // Abort any pending fetch requests
+      (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+    };
+  }, []);
+  const getFullAddress = useCallback((latLng, signal) => __awaiter(this, void 0, void 0, function* () {
     try {
-      const res = yield fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${Number(latLng.lat)}&lon=${Number(latLng.lng)}&accept-language=id`);
+      const res = yield fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${Number(latLng.lat)}&lon=${Number(latLng.lng)}&accept-language=id`, {
+        signal
+      });
       const location = yield res.json();
       return location;
     } catch (error) {
+      if (error.name === 'AbortError') {
+        return null; // Request was cancelled, return null
+      }
       throw new Error('Failed to search address');
     }
   }), []);
@@ -53315,15 +53274,18 @@ function MapPicker(props) {
     place_id,
     address
   }) => {
+    // Only update state if component is still mounted
+    if (!isMountedRef.current) return;
     setCenter({
       lat: Number(lat),
       lng: Number(lon)
     });
     setPlaces([{
-      lat: lat,
-      lon: lon,
-      place_id: place_id,
-      display_name: display_name
+      lat,
+      lon,
+      place_id,
+      display_name,
+      address
     }]);
     setSearchQuery('');
     setSearchResult([]);
@@ -53333,224 +53295,397 @@ function MapPicker(props) {
       lng: Number(lon),
       formatted_address: display_name,
       address_components: address
-    });
-  }, [onChange]);
+    }, !showSelectButton);
+  }, [onChange, showSelectButton]);
   const handleSearchSelect = useCallback(item => __awaiter(this, void 0, void 0, function* () {
+    var _a;
+    // Cancel any previous pending request
+    (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+    abortControllerRef.current = new AbortController();
     const fullAddress = yield getFullAddress({
       lat: Number(item.lat),
       lng: Number(item.lon)
-    });
-    handleSelect(fullAddress);
+    }, abortControllerRef.current.signal);
+    // getFullAddress returns null if aborted
+    if (fullAddress) {
+      handleSelect(fullAddress);
+    }
   }), [getFullAddress, handleSelect]);
   const handleSearchLatLng = useCallback(latLng => __awaiter(this, void 0, void 0, function* () {
-    const {
-      lat,
-      lon,
-      display_name,
-      place_id,
-      address
-    } = yield getFullAddress(latLng);
-    handleSelect({
-      lat,
-      lon,
-      display_name,
-      place_id,
-      address
-    });
-    setPlaces([{
-      place_id,
-      display_name,
-      lat,
-      lon
-    }]);
-  }), [getFullAddress, handleSelect]);
-  useEffect(() => {
-    if (value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng)) {
-      setCenter(value);
+    var _b;
+    // Cancel any previous pending request
+    (_b = abortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
+    abortControllerRef.current = new AbortController();
+    const fullAddress = yield getFullAddress(latLng, abortControllerRef.current.signal);
+    // getFullAddress returns null if aborted
+    if (fullAddress) {
+      const {
+        lat,
+        lon,
+        display_name,
+        place_id,
+        address
+      } = fullAddress;
+      handleSelect({
+        lat,
+        lon,
+        display_name,
+        place_id,
+        address
+      });
     }
-  }, [value]);
-  const handleSearch = useCallback(query => __awaiter(this, void 0, void 0, function* () {
+  }), [getFullAddress, handleSelect]);
+  const handleSearch = useCallback((query, signal) => __awaiter(this, void 0, void 0, function* () {
     try {
-      const res = yield fetch(`https://nominatim.openstreetmap.org/search.php?q=${query}&polygon_geojson=1&format=jsonv2`);
+      const res = yield fetch(`https://nominatim.openstreetmap.org/search.php?q=${query}&polygon_geojson=1&format=jsonv2`, {
+        signal
+      });
       const result = yield res.json();
-      setSearchResult(result);
+      // Only update state if component is still mounted
+      if (isMountedRef.current) {
+        setSearchResult(result);
+      }
     } catch (error) {
+      if (error.name === 'AbortError') {
+        return; // Request was cancelled, do nothing
+      }
       throw new Error('Failed to search address');
     }
   }), []);
+  // Debounced search effect
   useEffect(() => {
     let timeoutId = setTimeout(() => ({}), 1000);
+    const searchAbortController = new AbortController();
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
       if (searchQuery) {
-        handleSearch(searchQuery);
+        handleSearch(searchQuery, searchAbortController.signal);
       }
     }, 1000);
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      searchAbortController.abort();
+    };
   }, [searchQuery, handleSearch]);
-  const MarkerSvg = () => {
-    return jsxs("svg", {
-      width: "33",
-      height: "46",
-      viewBox: "0 0 33 46",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [jsx("defs", {
-        children: jsxs("filter", {
-          id: "shadow",
-          x: "-10%",
-          y: "-10%",
-          width: "120%",
-          height: "120%",
-          children: [jsx("feOffset", {
-            in: "SourceAlpha",
-            dx: "0",
-            dy: "1.5",
-            result: "offsetOut"
-          }), jsx("feGaussianBlur", {
-            in: "offsetOut",
-            stdDeviation: "1",
-            result: "blurOut"
-          }), jsx("feBlend", {
-            in: "SourceGraphic",
-            in2: "blurOut",
-            mode: "normal"
-          })]
-        })
-      }), jsxs("g", {
-        filter: "url(#shadow)",
-        children: [jsx("path", {
-          d: "M15.5699 42.6456C15.9031 43.4891 17.0969 43.489 17.4301 42.6456L21.589 32.1174C21.8483 31.4611 21.3646 30.75 20.6589 30.75H12.3411C11.6354 30.75 11.1517 31.4611 11.411 32.1174L15.5699 42.6456Z",
-          fill: "white"
-        }), jsx("rect", {
-          x: "1",
-          y: "1",
-          width: "31",
-          height: "31",
-          rx: "15.5",
-          fill: "#04C99E"
-        }), jsx("path", {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M24.5117 21.7932C24.5117 22.8679 23.6672 23.7355 22.6211 23.7355C21.5749 23.7355 20.7304 22.8679 20.7304 21.7932C20.7304 19.4107 20.7304 17.0411 20.7304 14.6715C21.0454 14.6715 21.3606 14.6715 21.6757 14.6715C21.9026 14.6715 22.016 14.4643 21.8522 14.283C21.1211 13.4025 20.3774 12.535 19.6464 11.6545C19.4573 11.3955 19.3943 11.4473 19.2179 11.6545C18.4868 12.535 17.7432 13.4025 17.0121 14.283C16.8483 14.4773 16.9617 14.6715 17.1886 14.6715C17.5037 14.6715 17.8188 14.6715 18.1339 14.6715C18.1339 17.0541 18.1465 19.4107 18.1465 21.7932C18.1465 22.8679 17.302 23.7355 16.2558 23.7355C15.2097 23.7355 14.3652 22.8679 14.3652 21.7932C14.3652 20.1229 14.3778 18.4655 14.3778 16.808C14.6929 16.808 15.008 16.808 15.3231 16.808C15.55 16.808 15.6634 16.6009 15.4996 16.4196C14.7685 15.5391 14.0249 14.6715 13.2938 13.791C13.1048 13.532 13.0417 13.5838 12.8653 13.791C12.1342 14.6715 11.3906 15.5391 10.6595 16.4196C10.4957 16.6138 10.6091 16.808 10.836 16.808C11.1511 16.808 11.4662 16.808 11.7813 16.808V16.8987V21.7932C11.7813 22.8679 10.9368 23.7355 9.89065 23.7355C8.84449 23.7355 8 22.8679 8 21.7932V14.2054C8 12.781 8.56719 11.4732 9.48731 10.5279C10.4074 9.5827 11.6805 9.00001 13.0796 9.00001C14.2896 9.00001 15.3988 9.44027 16.2684 10.1654C17.1381 9.44027 18.2473 9.00001 19.4573 9.00001C20.8565 9.00001 22.1295 9.5827 23.0496 10.5279C23.9697 11.4732 24.5369 12.781 24.5369 14.2054V21.7932H24.5117Z",
-          fill: "white"
-        }), jsx("rect", {
-          x: "1",
-          y: "1",
-          width: "31",
-          height: "31",
-          rx: "15.5",
-          stroke: "white",
-          strokeWidth: "2"
-        })]
-      })]
-    });
+  const handleSearchChange = useCallback(e => {
+    const val = e.target.value;
+    setSearchQuery(val);
+  }, []);
+  return {
+    center,
+    setCenter,
+    places,
+    searchQuery,
+    searchResult,
+    handleSearchChange,
+    handleSearchSelect,
+    handleSearchLatLng,
+    getFullAddress
   };
-  const isDesktop = useMediaQuery('(min-width: 767px)');
-  function handleMarkerClick() {
-    handleSearchLatLng(center);
-    onMarkerClick === null || onMarkerClick === void 0 ? void 0 : onMarkerClick();
-  }
-  function ButtonSelect() {
-    return jsx(Box, {
+}
+
+function InputSearch({
+  placeholder,
+  value,
+  list,
+  onChange,
+  onSelect
+}) {
+  return jsxs(Box, {
+    css: {
+      position: 'absolute',
+      left: 16,
+      top: 16,
+      zIndex: 1000
+    },
+    children: [jsxs(Box, {
       css: {
-        position: 'absolute',
-        top: '34%',
-        left: '22%',
-        zIndex: 1000,
-        '@md': {
-          left: '32%'
-        }
+        position: 'relative'
       },
-      children: jsxs(Flex$1, {
-        align: "center",
-        gap: 3,
+      children: [jsx(SearchInput, {
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange
+      }), jsx(Box, {
         css: {
-          backgroundColor: '$btnPrimary',
-          borderRadius: 6,
-          fontSize: 16,
-          fontWeight: 600,
-          color: '$textWhite',
-          padding: '4px 12px',
-          height: 28,
-          cursor: 'pointer'
+          position: 'absolute',
+          top: 5,
+          left: 10
         },
-        onClick: handleMarkerClick,
-        children: [t('selectLocationText', 'Gunakan Lokasi Ini'), jsx(Box, {
-          css: {
-            marginTop: 3
-          },
-          children: jsx(ChevronRightOutline, {
-            color: "#FFFFFF"
-          })
-        })]
-      })
-    });
-  }
-  function MarkerIcon() {
-    return jsx(Box, {
+        children: jsx(SearchOutline, {
+          size: 24
+        })
+      })]
+    }), list.length ? jsx(Box, {
       css: {
-        position: 'absolute',
-        top: '40%',
-        left: '46%',
+        position: 'relative',
         zIndex: 1000,
-        '@md': {
-          left: '47%'
-        }
+        width: 204,
+        maxHeight: 155,
+        overflow: 'hidden',
+        backgroundColor: '$bgWhite',
+        borderRadius: '$sm'
       },
-      children: jsx(MarkerSvg, {})
-    });
-  }
-  function handleSearchChange(e) {
-    const val = e.target.value;
-    setSearchQuery(val);
-  }
-  function ChangeView({
-    center
-  }) {
-    const map = useMapEvents({
-      dragend: e => {
-        const latLng = e.target.getCenter();
-        handleSearchLatLng(latLng);
+      children: jsx(Flex$1, {
+        direction: "column",
+        gap: 2,
+        children: list.map((item, index) => {
+          return jsx(Paragraph, {
+            css: {
+              cursor: 'pointer',
+              padding: '$spacing-02',
+              '&:hover': {
+                backgroundColor: '$gray100'
+              }
+            },
+            isTruncated: true,
+            onClick: () => onSelect(item),
+            children: item.display_name
+          }, index);
+        })
+      })
+    }) : jsx(Fragment, {})]
+  });
+}
+
+function ButtonSelect({
+  onClick,
+  label = 'Gunakan Lokasi Ini'
+}) {
+  return jsx(Box, {
+    css: {
+      position: 'absolute',
+      top: '34%',
+      left: '22%',
+      zIndex: 1000,
+      '@md': {
+        left: '32%'
       }
-    });
-    map.setView(center, map.getZoom());
-    return null;
-  }
-  return jsxs(Container$3, {
-    direction: "column",
-    css: css,
-    children: [showBanner && isBanner && jsxs(Banner, {
+    },
+    children: jsxs(Flex$1, {
+      align: "center",
+      gap: 3,
       css: {
-        padding: 16
+        backgroundColor: '$btnPrimary',
+        borderRadius: 6,
+        fontSize: 16,
+        fontWeight: 600,
+        color: '$textWhite',
+        padding: '4px 12px',
+        height: 28,
+        cursor: 'pointer'
       },
-      variant: "info",
-      bannerBlock: true,
-      onRemove: () => setIsBanner(false),
-      children: [jsx(Paragraph, {
+      onClick: onClick,
+      children: [label, jsx(Box, {
         css: {
-          flex: 1
+          marginTop: 3
         },
-        paragraph: "longContentRegular",
-        color: "secondary",
-        children: bannerDescription !== null && bannerDescription !== void 0 ? bannerDescription : t('bannerDescriptionText', 'Pastikan lokasi yang ditandai pada peta sudah sesuai dengan alamat')
-      }), jsx(BannerClose, {})]
-    }), jsx(Box, {
+        children: jsx(ChevronRightOutline, {
+          color: "#FFFFFF"
+        })
+      })]
+    })
+  });
+}
+
+function MarkerSvg() {
+  return jsxs("svg", {
+    width: "33",
+    height: "46",
+    viewBox: "0 0 33 46",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("defs", {
+      children: jsxs("filter", {
+        id: "shadow",
+        x: "-10%",
+        y: "-10%",
+        width: "120%",
+        height: "120%",
+        children: [jsx("feOffset", {
+          in: "SourceAlpha",
+          dx: "0",
+          dy: "1.5",
+          result: "offsetOut"
+        }), jsx("feGaussianBlur", {
+          in: "offsetOut",
+          stdDeviation: "1",
+          result: "blurOut"
+        }), jsx("feBlend", {
+          in: "SourceGraphic",
+          in2: "blurOut",
+          mode: "normal"
+        })]
+      })
+    }), jsxs("g", {
+      filter: "url(#shadow)",
+      children: [jsx("path", {
+        d: "M15.5699 42.6456C15.9031 43.4891 17.0969 43.489 17.4301 42.6456L21.589 32.1174C21.8483 31.4611 21.3646 30.75 20.6589 30.75H12.3411C11.6354 30.75 11.1517 31.4611 11.411 32.1174L15.5699 42.6456Z",
+        fill: "white"
+      }), jsx("rect", {
+        x: "1",
+        y: "1",
+        width: "31",
+        height: "31",
+        rx: "15.5",
+        fill: "#04C99E"
+      }), jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M24.5117 21.7932C24.5117 22.8679 23.6672 23.7355 22.6211 23.7355C21.5749 23.7355 20.7304 22.8679 20.7304 21.7932C20.7304 19.4107 20.7304 17.0411 20.7304 14.6715C21.0454 14.6715 21.3606 14.6715 21.6757 14.6715C21.9026 14.6715 22.016 14.4643 21.8522 14.283C21.1211 13.4025 20.3774 12.535 19.6464 11.6545C19.4573 11.3955 19.3943 11.4473 19.2179 11.6545C18.4868 12.535 17.7432 13.4025 17.0121 14.283C16.8483 14.4773 16.9617 14.6715 17.1886 14.6715C17.5037 14.6715 17.8188 14.6715 18.1339 14.6715C18.1339 17.0541 18.1465 19.4107 18.1465 21.7932C18.1465 22.8679 17.302 23.7355 16.2558 23.7355C15.2097 23.7355 14.3652 22.8679 14.3652 21.7932C14.3652 20.1229 14.3778 18.4655 14.3778 16.808C14.6929 16.808 15.008 16.808 15.3231 16.808C15.55 16.808 15.6634 16.6009 15.4996 16.4196C14.7685 15.5391 14.0249 14.6715 13.2938 13.791C13.1048 13.532 13.0417 13.5838 12.8653 13.791C12.1342 14.6715 11.3906 15.5391 10.6595 16.4196C10.4957 16.6138 10.6091 16.808 10.836 16.808C11.1511 16.808 11.4662 16.808 11.7813 16.808V16.8987V21.7932C11.7813 22.8679 10.9368 23.7355 9.89065 23.7355C8.84449 23.7355 8 22.8679 8 21.7932V14.2054C8 12.781 8.56719 11.4732 9.48731 10.5279C10.4074 9.5827 11.6805 9.00001 13.0796 9.00001C14.2896 9.00001 15.3988 9.44027 16.2684 10.1654C17.1381 9.44027 18.2473 9.00001 19.4573 9.00001C20.8565 9.00001 22.1295 9.5827 23.0496 10.5279C23.9697 11.4732 24.5369 12.781 24.5369 14.2054V21.7932H24.5117Z",
+        fill: "white"
+      }), jsx("rect", {
+        x: "1",
+        y: "1",
+        width: "31",
+        height: "31",
+        rx: "15.5",
+        stroke: "white",
+        strokeWidth: "2"
+      })]
+    })]
+  });
+}
+
+function MarkerIcon() {
+  return jsx(Box, {
+    css: {
+      position: 'absolute',
+      top: '40%',
+      left: '46%',
+      zIndex: 1000,
+      '@md': {
+        left: '47%'
+      }
+    },
+    children: jsx(MarkerSvg, {})
+  });
+}
+
+function ZoomControls({
+  onZoomIn,
+  onZoomOut
+}) {
+  return jsxs(Flex$1, {
+    direction: "column",
+    gap: 2,
+    css: {
+      position: 'absolute',
+      bottom: 16,
+      right: 16,
+      zIndex: 1000
+    },
+    children: [jsx(ZoomControlButton, {
+      onClick: onZoomIn,
+      children: jsx(PlusOutline, {
+        size: 20,
+        color: "#04C99E"
+      })
+    }), jsx(ZoomControlButton, {
+      onClick: onZoomOut,
+      children: jsx(MinusOutline, {
+        size: 20,
+        color: "#04C99E"
+      })
+    })]
+  });
+}
+
+function AddressCard({
+  place
+}) {
+  return jsxs(AddressCardWrapper, {
+    align: "center",
+    children: [jsx(Box, {
       css: {
-        position: 'relative',
-        width: isDesktop ? '517px !important' : '100% !important',
-        height: '441px !important',
-        overflow: 'hidden'
+        width: 24,
+        height: 24
       },
+      children: jsx(LocationOutline, {
+        size: 24
+      })
+    }), ' ', jsx(Address, {
+      children: place.display_name
+    })]
+  }, place.place_id);
+}
+
+//@ts-nocheck
+function ChangeView({
+  center,
+  readOnly,
+  onDragEnd
+}) {
+  const map = useMapEvents({
+    dragend: e => {
+      if (readOnly) return;
+      const latLng = e.target.getCenter();
+      onDragEnd(latLng);
+    }
+  });
+  map.setView(center, map.getZoom());
+  return null;
+}
+
+function MapPicker(props) {
+  const {
+    css,
+    radius,
+    value,
+    showSelectButton,
+    readOnly,
+    onChange,
+    selectLocationText,
+    searchPlaceholder,
+    header
+  } = props;
+  const [zoom, setZoom] = useState(16);
+  const isDesktop = useMediaQuery('(min-width: 767px)');
+  const {
+    center,
+    setCenter,
+    places,
+    searchQuery,
+    searchResult,
+    handleSearchChange,
+    handleSearchSelect,
+    handleSearchLatLng
+  } = useMapSearch({
+    initialCenter: value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng) && value || {
+      lat: -6.175392,
+      lng: 106.827153
+    },
+    showSelectButton,
+    onChange
+  });
+  useEffect(() => {
+    if (value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng)) {
+      setCenter(value);
+      handleSearchLatLng(value);
+    }
+  }, [value, setCenter]);
+  function handleMarkerClick() {
+    if (places.length > 0) {
+      const mapObject = {
+        place_id: places[0].place_id,
+        lat: places[0].lat,
+        lng: places[0].lon,
+        formatted_address: places[0].display_name,
+        address_components: places[0].address
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign({}, mapObject), true);
+    }
+  }
+  return jsxs(Container$3, {
+    direction: "column",
+    css: css,
+    children: [header, jsx(MapWrapper, {
       children: jsxs(MapContainer, {
         center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
         zoom: zoom,
         zoomControl: false,
-        style: {
-          position: 'relative',
-          width: isDesktop ? '517px' : '100%',
-          height: '441px'
-        },
+        dragging: !readOnly,
+        style: isDesktop ? mapContainerStyle.desktop : mapContainerStyle.mobile,
         children: [radius && jsx(Circle, {
           center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
           radius: radius,
@@ -53560,61 +53695,30 @@ function MapPicker(props) {
           }
         }), jsx(TileLayer, {
           url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        }), showSelectButton && jsx(ButtonSelect, {}), jsx(MarkerIcon, {}), jsx(ChangeView, {
-          center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng]
-        }), jsx(InputSearch, {
+        }), showSelectButton && jsx(ButtonSelect, {
+          onClick: handleMarkerClick,
+          label: selectLocationText
+        }), jsx(MarkerIcon, {}), jsx(ChangeView, {
+          center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
+          readOnly: readOnly,
+          onDragEnd: handleSearchLatLng
+        }), !readOnly && jsx(InputSearch, {
           list: searchResult,
           value: searchQuery,
-          placeholder: t('searchPlaceholder', 'Cari ...'),
+          placeholder: searchPlaceholder || 'Cari ...',
           onChange: handleSearchChange,
           onSelect: handleSearchSelect
-        }), jsxs(Flex$1, {
-          direction: "column",
-          gap: 2,
-          css: {
-            position: 'absolute',
-            bottom: 16,
-            right: 16,
-            zIndex: 1000
-          },
-          children: [jsx(ZoomControl, {
-            onClick: () => setZoom(current => current + 1),
-            children: jsx(PlusOutline, {
-              size: 20,
-              color: "#04C99E"
-            })
-          }), jsx(ZoomControl, {
-            onClick: () => setZoom(current => current - 1),
-            children: jsx(MinusOutline, {
-              size: 20,
-              color: "#04C99E"
-            })
-          })]
+        }), jsx(ZoomControls, {
+          onZoomIn: () => setZoom(current => current + 1),
+          onZoomOut: () => setZoom(current => current - 1)
         })]
       }, zoom)
-    }), places === null || places === void 0 ? void 0 : places.map(({
-      place_id,
-      display_name
-    }) => {
-      return jsxs(AddressCard, {
-        align: "center",
-        children: [jsx(Box, {
-          css: {
-            width: 24,
-            height: 24
-          },
-          children: jsx(LocationOutline, {
-            size: 24
-          })
-        }), ' ', jsx(Address, {
-          children: display_name
-        })]
-      }, place_id);
-    })]
+    }), places === null || places === void 0 ? void 0 : places.map(place => jsx(AddressCard, {
+      place: place
+    }, place.place_id))]
   });
 }
 MapPicker.defaultProps = {
-  showBanner: true,
   value: {
     lat: -6.175392,
     lng: 106.827153
@@ -53632,22 +53736,18 @@ const ContainerInput = styled('div', {
 });
 function InputMapPicker(props) {
   var _a;
-  const {
-    t
-  } = useTranslation(['MajooUI/mapPicker', 'translation']);
   const {
     css,
     modalTitle,
     buttonLabel,
     placeholder,
-    showBanner,
-    bannerDescription,
     radius,
     value,
     showSelectButton,
+    readOnly,
     onChange,
-    onMarkerClick,
-    customInputValue
+    customInputValue,
+    header
   } = props;
   const modalTrigger = React__default.useRef(null);
   const [inputValue, setInputValue] = useState(placeholder);
@@ -53669,13 +53769,13 @@ function InputMapPicker(props) {
     var _a;
     (_a = modalTrigger === null || modalTrigger === void 0 ? void 0 : modalTrigger.current) === null || _a === void 0 ? void 0 : _a.click();
   }
-  function handleMarkerClick() {
-    handleClick();
-    onMarkerClick === null || onMarkerClick === void 0 ? void 0 : onMarkerClick();
-  }
-  function handleChange(mapObject) {
-    setInputValue(mapObject.formatted_address);
-    onChange === null || onChange === void 0 ? void 0 : onChange(mapObject);
+  function handleChange(mapObject, isConfirmed) {
+    if (isConfirmed) {
+      handleClick();
+      onChange === null || onChange === void 0 ? void 0 : onChange(mapObject);
+    } else {
+      setInputValue(mapObject.formatted_address);
+    }
   }
   const isDesktop = useMediaQuery('(min-width: 767px)');
   return jsxs(React__default.Fragment, {
@@ -53718,13 +53818,13 @@ function InputMapPicker(props) {
                 flex: 1
               },
               isTruncated: true,
-              children: (_a = customInputValue !== null && customInputValue !== void 0 ? customInputValue : inputValue) !== null && _a !== void 0 ? _a : t('mapPlaceholder', 'Tandai lokasi dalam peta')
+              children: (_a = customInputValue !== null && customInputValue !== void 0 ? customInputValue : inputValue) !== null && _a !== void 0 ? _a : 'Tandai lokasi dalam peta'
             }), isDesktop ? jsx(Button$4, {
               type: "button",
               size: "sm",
               buttonType: "secondary",
               onClick: handleClick,
-              children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : t('buttonLabelText', 'Ubah Lokasi')
+              children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : 'Ubah Lokasi'
             }) : null]
           })
         })]
@@ -53733,19 +53833,20 @@ function InputMapPicker(props) {
         size: "md",
         buttonType: "secondary",
         onClick: handleClick,
-        children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : t('buttonLabelText', 'Ubah Lokasi')
+        children: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : 'Ubah Lokasi'
       }) : null]
     }), jsxs(ModalDialog, {
       width: isDesktop ? 565 : '100%',
       layer: "$modal",
       onPointerDownOutside: e => e.preventDefault(),
+      onCloseClick: () => setInputValue(placeholder),
       children: [jsx(ModalDialogTrigger, {
         asChild: true,
         children: jsx("div", {
           ref: modalTrigger
         })
       }), jsx(ModalDialogTitle, {
-        children: modalTitle !== null && modalTitle !== void 0 ? modalTitle : t('modalTitle', 'Tambah Lokasi di Map')
+        children: modalTitle !== null && modalTitle !== void 0 ? modalTitle : 'Tambah Lokasi di Map'
       }), jsx(ModalDialogContent, {
         css: {
           overflowY: 'auto',
@@ -53753,13 +53854,12 @@ function InputMapPicker(props) {
           position: 'relative'
         },
         children: jsx(MapPicker, {
-          showBanner: showBanner,
-          bannerDescription: bannerDescription,
           value: value,
           onChange: handleChange,
-          onMarkerClick: handleMarkerClick,
           radius: radius,
-          showSelectButton: showSelectButton
+          showSelectButton: showSelectButton,
+          readOnly: readOnly,
+          header: header
         })
       })]
     })]
@@ -57117,4 +57217,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, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Cell, CheckboxGroup, CheckboxTable, ColorPicker_default as ColorPicker, Colors$1 as Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DatePickerMulti, 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, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, InputSwitchWithImage, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, 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, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, 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, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, 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, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Cell, CheckboxGroup, CheckboxTable, ColorPicker_default as ColorPicker, Colors$1 as Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DatePickerMulti, 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, Input$6 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, InputSwitchWithImage, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, 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, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, 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, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };