@herca/rn-kit 0.1.63 → 0.1.65

package/README.md

@@ -113,6 +113,7 @@ Komponen untuk mengumpulkan input dari pengguna.
 - [DropDown](./src/DropDown/README.md)
 - [Input](./src/Input/README_INPUT.md)
 - [Input Select](./src/Input/README_INPUT_SELECT.md)
+- [Input Date](./src/Input/README_INPUT_DATE.md)
 - [InputOtp](./src/Input/README_INPUT_OTP.md)
 - [Input Month](./src/Datepicker/README_MONTHPICKER.md)
 - [Input Password](./src/InputPassword/README.md)
@@ -168,6 +169,7 @@ Komponen untuk menampilkan informasi atau elemen visual.
 - [Devider](./src/Ui/README_DEVIDER.md)
 - [Drawing](./src/Drawing/README.md)
 - [Footer](./src/Ui/README_FOOTER.md)
+- [ViewInsets](./src/Ui/README_VIEWINSETS.md)
 - [Icon](./src/Icon/README.md)
 - [List](./src/List/README.md)
 - [Timeline](./src/Timeline/README.md)
@@ -181,6 +183,12 @@ Komponen untuk menampilkan informasi atau elemen visual.
 
 - [Provider](./src/Provider/README.md)
 
+---
+
+### Function
+
+- [Date Formatter](./src/function/README_DATE_FORMATTER.md)
+
 ## 🤝 Kontribusi
 
 Silakan baca panduan kontribusi pada [CONTRIBUTING.md](CONTRIBUTING.md) untuk mengetahui alur pengembangan dan kontribusi pada proyek ini.

package/lib/module/DatePicker/DatePicker.js

@@ -27,9 +27,9 @@ export default function DatePicker({
     endDate: null,
     date: null
   });
-  const handleOnChangeCalendar = useCallback(value => {
+  const handleOnChangeCalendar = useCallback(val => {
     setMarkDates({});
-    setValueDatepicker(value);
+    setValueDatepicker(val);
     setErrorValidate(false);
   }, []);
   const handleOnPressSubmitButton = useCallback(() => {

package/lib/module/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useState","useEffect","StyleSheet","View","BottomSheet","Calendar","formatDate","Button","Alert","Color","jsx","_jsx","jsxs","_jsxs","DatePicker","onChange","isOpen","onClose","required","hasError","onHasError","hint","mode","value","calendarProps","errorValidate","setErrorValidate","markDates","setMarkDates","valueDatepicker","setValueDatepicker","startDate","endDate","date","handleOnChangeCalendar","handleOnPressSubmitButton","isEmpty","isRangeMode","isInvalidRange","handleOnPressCancelButton","updatedMarkDates","selected","start","Date","end","dates","dt","setDate","getDate","dateStr","backgroundColor","primary","textColor","gray","base","white100","children","footer","style","styles","footerContainer","buttonWrapper","variant","title","color","onPress","markedDates","message","hide","create","flexDirection","justifyContent","flex"],"sourceRoot":"../../../src","sources":["DatePicker/DatePicker.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useState","useEffect","StyleSheet","View","BottomSheet","Calendar","formatDate","Button","Alert","Color","jsx","_jsx","jsxs","_jsxs","DatePicker","onChange","isOpen","onClose","required","hasError","onHasError","hint","mode","value","calendarProps","errorValidate","setErrorValidate","markDates","setMarkDates","valueDatepicker","setValueDatepicker","startDate","endDate","date","handleOnChangeCalendar","val","handleOnPressSubmitButton","isEmpty","isRangeMode","isInvalidRange","handleOnPressCancelButton","updatedMarkDates","selected","start","Date","end","dates","dt","setDate","getDate","dateStr","backgroundColor","primary","textColor","gray","base","white100","children","footer","style","styles","footerContainer","buttonWrapper","variant","title","color","onPress","markedDates","message","hide","create","flexDirection","justifyContent","flex"],"sourceRoot":"../../../src","sources":["DatePicker/DatePicker.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Input/InputDate.js

@@ -0,0 +1,170 @@
+"use strict";
+
+import { Color, DatePicker, Icon, Typography } from '@herca/rn-kit';
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { dateFormatter } from "../function/dateFormatter.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function InputDate({
+  label,
+  placeholder = 'Select here...',
+  placeholderDateEnd = 'Select here...',
+  datePickerProps,
+  value,
+  valueDateEnd,
+  onSelectClick,
+  onDatePickerClose,
+  onDateChange,
+  mode = 'single',
+  language,
+  ...props
+}) {
+  const [isDatePickerOpen, setSelectOpen] = useState(false);
+  const [dateValue, setDateValue] = useState();
+  const [raw, setRaw] = useState();
+  const handleOpenSelect = () => {
+    setSelectOpen(true);
+    onSelectClick?.();
+  };
+  const handleCloseDatePicker = () => {
+    setSelectOpen(false);
+    onDatePickerClose?.();
+  };
+  const handleDateChange = val => {
+    onDateChange?.({
+      date: val.date ?? null,
+      startDate: val.startDate ?? null,
+      endDate: val.endDate ?? null
+    });
+    const formattedValue = dateFormatter({
+      date: val.date,
+      options: {
+        language,
+        format: language ? 'localized' : 'default'
+      }
+    });
+    const formattedStartDate = dateFormatter({
+      date: val.startDate,
+      options: {
+        language,
+        format: language ? 'localized' : 'default'
+      }
+    });
+    const formattedEndDate = dateFormatter({
+      date: val.endDate,
+      options: {
+        language,
+        format: language ? 'localized' : 'default'
+      }
+    });
+    setDateValue({
+      date: formattedValue,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate
+    });
+    setRaw(val);
+  };
+  const startDate = () => {
+    if (!value) {
+      if (mode === 'single') {
+        return dateValue?.date;
+      } else if (mode === 'range') {
+        return dateValue?.startDate;
+      }
+    }
+    return value;
+  };
+  const endDate = () => {
+    if (mode === 'single') return null;
+    if (!valueDateEnd) {
+      return dateValue?.endDate;
+    }
+    return valueDateEnd;
+  };
+  const rawValue = () => {
+    if (mode === 'single') {
+      return {
+        date: datePickerProps?.value?.date ?? raw?.date
+      };
+    } else {
+      return {
+        startDate: datePickerProps?.value?.startDate ?? raw?.startDate,
+        endDate: datePickerProps?.value?.endDate ?? raw?.endDate
+      };
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.gap4,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "t2",
+      weight: "semibold",
+      color: Color.gray[900],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.wrapper,
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.pickerTrigger, value !== '' && styles.hasValue],
+        onPress: handleOpenSelect,
+        ...props,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          color: Color.gray[900],
+          weight: "medium",
+          children: startDate() ?? placeholder
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: "ArrowDown",
+          size: 14,
+          color: Color.gray[700]
+        })]
+      }), mode === 'range' && /*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.pickerTrigger, value !== '' && styles.hasValue],
+        onPress: handleOpenSelect,
+        ...props,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          color: Color.gray[900],
+          weight: "medium",
+          children: endDate() ?? placeholderDateEnd
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: "ArrowDown",
+          size: 14,
+          color: Color.gray[700]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(DatePicker, {
+      ...datePickerProps,
+      mode: mode,
+      isOpen: isDatePickerOpen,
+      onClose: handleCloseDatePicker,
+      value: rawValue(),
+      onChange: val => {
+        handleDateChange(val);
+      }
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  gap4: {
+    gap: 4
+  },
+  pickerTrigger: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    flex: 1
+  },
+  hasValue: {
+    borderColor: Color.primary[300]
+  },
+  wrapper: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center'
+  }
+});
+//# sourceMappingURL=InputDate.js.map

package/lib/module/Input/InputDate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Color","DatePicker","Icon","Typography","useState","Pressable","StyleSheet","View","dateFormatter","jsx","_jsx","jsxs","_jsxs","InputDate","label","placeholder","placeholderDateEnd","datePickerProps","value","valueDateEnd","onSelectClick","onDatePickerClose","onDateChange","mode","language","props","isDatePickerOpen","setSelectOpen","dateValue","setDateValue","raw","setRaw","handleOpenSelect","handleCloseDatePicker","handleDateChange","val","date","startDate","endDate","formattedValue","options","format","formattedStartDate","formattedEndDate","rawValue","style","styles","gap4","children","variant","weight","color","gray","wrapper","pickerTrigger","hasValue","onPress","name","size","isOpen","onClose","onChange","create","gap","paddingVertical","paddingHorizontal","borderRadius","flexDirection","justifyContent","alignItems","borderWidth","borderColor","flex","primary"],"sourceRoot":"../../../src","sources":["Input/InputDate.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Input/README_INPUT_DATE.md

@@ -0,0 +1,265 @@
+# InputDate Component
+
+Komponen React Native untuk input tanggal dengan dukungan mode single date dan date range. Terintegrasi dengan DatePicker dari `@herca/rn-kit` dan menyediakan UI yang user-friendly untuk pemilihan tanggal.
+
+## Penggunaan Dasar
+
+### Single Date Mode
+
+```jsx
+import InputDate from './InputDate';
+
+function MyForm() {
+  const [date, setDate] = useState('');
+
+  return (
+    <InputDate
+      label="Tanggal Lahir"
+      placeholder="Pilih tanggal"
+      value={date}
+      onDateChange={(val) => setDate(val.date)}
+    />
+  );
+}
+```
+
+### Date Range Mode
+
+```jsx
+import InputDate from './InputDate';
+
+function MyForm() {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  return (
+    <InputDate
+      mode="range"
+      label="Periode"
+      placeholder="Tanggal mulai"
+      placeholderDateEnd="Tanggal selesai"
+      value={startDate}
+      valueDateEnd={endDate}
+      onDateChange={(val) => {
+        setStartDate(val.startDate);
+        setEndDate(val.endDate);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+### Base Props
+
+| Prop                | Type                              | Default            | Deskripsi                                          |
+| ------------------- | --------------------------------- | ------------------ | -------------------------------------------------- |
+| `label`             | `string`                          | **Required**       | Label yang ditampilkan di atas input               |
+| `placeholder`       | `string`                          | `"Select here..."` | Placeholder untuk tanggal pertama/single           |
+| `value`             | `string`                          | `undefined`        | Nilai tanggal terpilih (formatted)                 |
+| `valueDateEnd`      | `string`                          | `undefined`        | Nilai tanggal akhir untuk mode range (formatted)   |
+| `datePickerProps`   | `DatePickerPropsWithoutOnChange`  | `undefined`        | Props tambahan untuk DatePicker (kecuali onChange) |
+| `onSelectClick`     | `() => void`                      | `undefined`        | Callback ketika input diklik                       |
+| `onDatePickerClose` | `() => void`                      | `undefined`        | Callback ketika DatePicker ditutup                 |
+| `onDateChange`      | `(value: DateRangeProps) => void` | `undefined`        | Callback ketika tanggal berubah                    |
+| `mode`              | `'single' \| 'range'`             | `'single'`         | Mode pemilihan tanggal                             |
+| `language`          | `'en' \| 'id'`                    | `undefined`        | Bahasa untuk format tanggal                        |
+
+### Single Mode Specific Props
+
+Ketika `mode` tidak diset atau `mode="single"`:
+
+| Prop                 | Type    | Deskripsi                     |
+| -------------------- | ------- | ----------------------------- |
+| `placeholderDateEnd` | `never` | Tidak tersedia di single mode |
+
+### Range Mode Specific Props
+
+Ketika `mode="range"`:
+
+| Prop                 | Type     | Deskripsi                                      |
+| -------------------- | -------- | ---------------------------------------------- |
+| `placeholderDateEnd` | `string` | **Required** - Placeholder untuk tanggal akhir |
+
+## Return Value dari onDateChange
+
+Callback `onDateChange` menerima objek dengan struktur:
+
+```typescript
+{
+  date: string | null; // Untuk single mode
+  startDate: string | null; // Untuk range mode (tanggal mulai)
+  endDate: string | null; // Untuk range mode (tanggal selesai)
+}
+```
+
+## Contoh Penggunaan
+
+### Single Date dengan Language
+
+```jsx
+<InputDate
+  label="Select Date"
+  placeholder="Choose a date"
+  mode="single"
+  language="id"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+### Date Range dengan Controlled Values
+
+```jsx
+function BookingForm() {
+  const [dateRange, setDateRange] = useState({
+    start: '',
+    end: '',
+  });
+
+  return (
+    <InputDate
+      mode="range"
+      label="Periode Booking"
+      placeholder="Check-in"
+      placeholderDateEnd="Check-out"
+      value={dateRange.start}
+      valueDateEnd={dateRange.end}
+      onDateChange={(val) => {
+        setDateRange({
+          start: val.startDate || '',
+          end: val.endDate || '',
+        });
+      }}
+    />
+  );
+}
+```
+
+### Dengan Custom DatePicker Props
+
+```jsx
+<InputDate
+  label="Tanggal Lahir"
+  placeholder="Pilih tanggal"
+  datePickerProps={{
+    minDate: new Date('1900-01-01'),
+    maxDate: new Date(),
+    value: { date: new Date() },
+  }}
+  onDateChange={(val) => console.log(val)}
+/>
+```
+
+### Dengan Event Callbacks
+
+```jsx
+<InputDate
+  label="Appointment Date"
+  placeholder="Select date"
+  onSelectClick={() => console.log('Picker opened')}
+  onDatePickerClose={() => console.log('Picker closed')}
+  onDateChange={(val) => {
+    console.log('Date changed:', val);
+  }}
+/>
+```
+
+### English Language Format
+
+```jsx
+<InputDate
+  label="Birth Date"
+  placeholder="Select date"
+  language="en"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+### Indonesian Language Format
+
+```jsx
+<InputDate
+  label="Tanggal Lahir"
+  placeholder="Pilih tanggal"
+  language="id"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+## Fitur
+
+- ✅ Dua mode: Single date dan Date range
+- ✅ Support multi-bahasa (English & Indonesian)
+- ✅ Controlled component dengan value props
+- ✅ Auto-formatting tanggal berdasarkan bahasa
+- ✅ Visual feedback untuk nilai yang sudah dipilih
+- ✅ Terintegrasi dengan DatePicker dari @herca/rn-kit
+- ✅ TypeScript support dengan discriminated unions untuk type safety
+- ✅ Customizable melalui datePickerProps
+- ✅ Event callbacks untuk lifecycle DatePicker
+
+## Styling
+
+Komponen menggunakan styling internal dengan karakteristik:
+
+- Border color berubah ke `primary[300]` ketika ada nilai terpilih
+- Layout responsive dengan flexbox
+- Gap 8px antara input start date dan end date (mode range)
+- Border radius 8px dengan padding yang konsisten
+- Typography menggunakan variant `t2` dari @herca/rn-kit
+
+## State Management Internal
+
+Komponen mengelola beberapa state internal:
+
+- `isDatePickerOpen`: Status buka/tutup DatePicker
+- `dateValue`: Nilai tanggal yang sudah diformat
+- `raw`: Nilai tanggal raw dari DatePicker
+
+State internal ini memungkinkan komponen bekerja baik sebagai controlled maupun uncontrolled component.
+
+## TypeScript
+
+Komponen menggunakan discriminated unions untuk type safety antara single dan range mode:
+
+```typescript
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderDateEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderDateEnd: string;
+};
+
+export type Props = SingleModeProps | RangeModeProps;
+```
+
+Ini memastikan `placeholderDateEnd` hanya required ketika `mode="range"`.
+
+## Dependencies
+
+- `@herca/rn-kit` - Untuk komponen DatePicker, Icon, Typography, dan Color
+- `react-native` - Core components (View, Pressable, StyleSheet)
+
+## Best Practices
+
+1. **Selalu provide label yang jelas** untuk accessibility
+2. **Gunakan language prop** untuk konsistensi format tanggal di aplikasi
+3. **Handle onDateChange** untuk update state parent component
+4. **Gunakan controlled values** untuk form validation
+5. **Provide meaningful placeholders** yang menjelaskan expected input
+
+## Catatan
+
+- Props tambahan akan diteruskan ke Pressable trigger
+- Nilai yang dikembalikan via `onDateChange` selalu dalam format yang sudah diproses menggunakan `dateFormatter`
+- Raw value dari DatePicker tetap tersimpan untuk keperluan internal
+- Komponen dapat bekerja sebagai controlled maupun uncontrolled component
+- Border color otomatis berubah ketika ada nilai terpilih untuk visual feedback
+
+## License
+
+MIT

package/lib/module/Modal/Modal.js

@@ -1,9 +1,8 @@
 "use strict";
 
+import { Color, Icon } from '@herca/rn-kit';
 import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet, Modal, TouchableOpacity, Animated, SafeAreaView, Platform } from 'react-native';
-import Icon from "../Icon/index.js";
-import Color from "../Color/Color.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalPopUp = ({
   isOpen,
@@ -17,10 +16,9 @@ const ModalPopUp = ({
   containerStyle,
   modalStyle
 }) => {
-  const [isVisible, setIsVisible] = useState(isOpen);
+  const [isVisible, setIsVisible] = useState(isOpen ?? false);
   const scaleAnim = useState(() => new Animated.Value(0))[0];
-  const showModal = useCallback(() => {
-    setIsVisible(true);
+  const animateIn = useCallback(() => {
     Animated.spring(scaleAnim, {
       toValue: 1,
       useNativeDriver: true,
@@ -28,23 +26,28 @@ const ModalPopUp = ({
       stiffness: 200
     }).start();
   }, [scaleAnim]);
-  const hideModal = useCallback(() => {
-    setIsVisible(false);
-    onRequestClose?.();
-    onClose?.();
-  }, [onClose, onRequestClose]);
-  const handleBackdropPress = useCallback(() => {
-    if (closable) {
-      hideModal?.();
-    }
-  }, [closable, hideModal]);
   useEffect(() => {
     if (isOpen) {
-      showModal();
+      setIsVisible(true);
+      animateIn();
+    } else if (isVisible) {
+      setIsVisible(false);
+      onRequestClose?.();
+      onClose?.();
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+  }, [isOpen, isVisible, animateIn, onRequestClose, onClose]);
+  const userClose = useCallback(() => {
+    if (!closable) return;
+    setIsVisible(false);
+    onRequestClose?.();
+    onClose?.();
+  }, [closable, onClose, onRequestClose]);
+  const handleBackdropPress = () => {
+    userClose();
+  };
+  const handleRequestClose = () => {
+    userClose();
+  };
   const modalContentStyle = StyleSheet.flatten([{
     transform: [{
       scale: scaleAnim
@@ -56,7 +59,7 @@ const ModalPopUp = ({
   return /*#__PURE__*/_jsx(Modal, {
     transparent: true,
     visible: isVisible,
-    onRequestClose: handleBackdropPress,
+    onRequestClose: handleRequestClose,
     statusBarTranslucent: true,
     children: /*#__PURE__*/_jsxs(View, {
       style: [styles.modalContainer, containerStyle],
@@ -69,7 +72,7 @@ const ModalPopUp = ({
         children: [closable && /*#__PURE__*/_jsx(View, {
           style: styles.closeButtonContainer,
           children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: hideModal,
+            onPress: userClose,
             style: styles.closeButton,
             children: /*#__PURE__*/_jsx(View, {
               style: styles.iconButtonClose,
@@ -134,7 +137,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignContent: 'center',
     alignItems: 'center',
-    top: 'auto',
     flex: 1
   },
   closeButton: {

package/lib/module/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","Icon","Color","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","showModal","spring","toValue","useNativeDriver","damping","stiffness","start","hideModal","handleBackdropPress","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","iconButtonClose","name","size","color","gray","contentContainer","create","flex","justifyContent","alignItems","position","top","left","right","bottom","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","alignContent","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Color","Icon","React","useState","useEffect","useCallback","View","StyleSheet","Modal","TouchableOpacity","Animated","SafeAreaView","Platform","jsx","_jsx","jsxs","_jsxs","ModalPopUp","isOpen","onClose","children","backdrop","closable","onRequestClose","bgColor","width","containerStyle","modalStyle","isVisible","setIsVisible","scaleAnim","Value","animateIn","spring","toValue","useNativeDriver","damping","stiffness","start","userClose","handleBackdropPress","handleRequestClose","modalContentStyle","flatten","transform","scale","backgroundColor","maxHeight","transparent","visible","statusBarTranslucent","style","styles","modalContainer","backdropTouch","activeOpacity","onPress","modalContent","closeButtonContainer","closeButton","iconButtonClose","name","size","color","gray","contentContainer","create","flex","justifyContent","alignItems","position","top","left","right","bottom","height","borderRadius","overflow","select","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","zIndex","alignContent","padding"],"sourceRoot":"../../../src","sources":["Modal/Modal.tsx"],"mappings":"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","ignoreList":[]}