@rahmatsaputra-my-id/react-js-library 0.0.63 → 0.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/RadioButtonMultiple/RadioButtonMultiple.component.d.ts +4 -0
  2. package/dist/components/{RadioButton/RadioButton.types.d.ts → RadioButtonMultiple/RadioButtonMultiple.types.d.ts} +1 -1
  3. package/dist/components/RadioButtonMultiple/index.d.ts +2 -0
  4. package/dist/components/RadioButtonSingle/RadioButtonSingle.component.d.ts +4 -0
  5. package/dist/components/RadioButtonSingle/RadioButtonSingle.component.styles.d.ts +29 -0
  6. package/dist/components/RadioButtonSingle/RadioButtonSingle.types.d.ts +7 -0
  7. package/dist/components/RadioButtonSingle/index.d.ts +2 -0
  8. package/dist/index.d.ts +6 -0
  9. package/dist/index.es.js +411 -48
  10. package/dist/index.es.js.map +1 -1
  11. package/dist/index.js +416 -47
  12. package/dist/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/dist/components/RadioButton/RadioButton.component.d.ts +0 -4
  15. package/dist/components/RadioButton/SingleRadioButton.component.d.ts +0 -4
  16. package/dist/components/RadioButton/index.d.ts +0 -2
  17. /package/dist/components/{RadioButton/RadioButton.styles.d.ts → RadioButtonMultiple/RadioButtonMultiple.component.styles.d.ts} +0 -0
package/dist/index.js CHANGED
@@ -101,7 +101,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
101
101
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
102
102
  };
103
103
 
104
- var styles$f = {
104
+ var styles$l = {
105
105
  backdrop: {
106
106
  position: 'fixed',
107
107
  top: 0,
@@ -194,10 +194,10 @@ var BottomSheet = function (_a) {
194
194
  }, [visible, onClose]);
195
195
  if (!visible)
196
196
  return null;
197
- return ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ style: styles$f.backdrop, onClick: onClose }, { children: jsxRuntime.jsxs("div", __assign({ style: __assign(__assign({}, styles$f.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsxs("div", __assign({ style: styles$f.header }, { children: [jsxRuntime.jsx("span", __assign({ style: styles$f.title }, { children: title })), jsxRuntime.jsx("button", __assign({ style: styles$f.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsxRuntime.jsx("div", __assign({ style: styles$f.content }, { children: children }))] })) })), document.body);
197
+ return ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ style: styles$l.backdrop, onClick: onClose }, { children: jsxRuntime.jsxs("div", __assign({ style: __assign(__assign({}, styles$l.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsxs("div", __assign({ style: styles$l.header }, { children: [jsxRuntime.jsx("span", __assign({ style: styles$l.title }, { children: title })), jsxRuntime.jsx("button", __assign({ style: styles$l.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsxRuntime.jsx("div", __assign({ style: styles$l.content }, { children: children }))] })) })), document.body);
198
198
  };
199
199
 
200
- var styles$e = {
200
+ var styles$k = {
201
201
  content: {
202
202
  display: 'flex',
203
203
  cursor: 'pointer',
@@ -212,7 +212,7 @@ var TouchableOpacity = function (_a) {
212
212
  onPress(event);
213
213
  }
214
214
  };
215
- return (jsxRuntime.jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$e.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
215
+ return (jsxRuntime.jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$k.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
216
216
  };
217
217
 
218
218
  var Colors = {
@@ -625,7 +625,7 @@ var CameraModal = function (_a) {
625
625
  return ReactDOM__default["default"].createPortal(jsxRuntime.jsxs("div", __assign({ style: cameraStyles$1.overlay }, { children: [capturedImage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: capturedImage, alt: "Captured", style: cameraStyles$1.previewImage }), jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: handleUsePhoto, style: cameraStyles$1.floatingBottomButtons }, { children: jsxRuntime.jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsxRuntime.jsx(View, __assign({ style: cameraStyles$1.innerButton }, { children: jsxRuntime.jsx(Images, { src: Icons.send, style: cameraStyles$1.sendButton }) })) })) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, style: __assign(__assign({}, cameraStyles$1.video), { transform: isFrontCamera ? 'scaleX(-1)' : 'none' }) }), jsxRuntime.jsx("canvas", { ref: canvasRef, style: { display: 'none' } }), isCameraReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: handleCapture, style: cameraStyles$1.floatingBottomButtons }, { children: jsxRuntime.jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsxRuntime.jsx(View, { style: cameraStyles$1.innerButton }) })) })), hasRearCamera && (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: toggleCamera, style: cameraStyles$1.floatingBottomRotateButtons }, { children: jsxRuntime.jsx(View, __assign({ style: cameraStyles$1.captureRotateButton }, { children: jsxRuntime.jsx(Images, { src: Icons.rotate, style: cameraStyles$1.rotateButton }) })) })))] }))] })), jsxRuntime.jsx("button", __assign({ onClick: handleOnPressClose, style: cameraStyles$1.closeButton }, { children: "\u00D7" }))] })), document.body);
626
626
  };
627
627
 
628
- var styles$d = {
628
+ var styles$j = {
629
629
  backdrop: {
630
630
  position: 'fixed',
631
631
  top: 0,
@@ -678,7 +678,7 @@ var styles$d = {
678
678
  },
679
679
  };
680
680
 
681
- var styles$c = {
681
+ var styles$i = {
682
682
  h1: {
683
683
  fontSize: 32,
684
684
  },
@@ -857,7 +857,7 @@ var styles$c = {
857
857
 
858
858
  var Text = function (_a) {
859
859
  var _b = _a.bottom, bottom = _b === void 0 ? 0 : _b, _c = _a.center, center = _c === void 0 ? false : _c, children = _a.children, _d = _a.color, color = _d === void 0 ? Colors.black : _d, _e = _a.left, left = _e === void 0 ? 0 : _e, _f = _a.right, right = _f === void 0 ? 0 : _f, _g = _a.style, style = _g === void 0 ? {} : _g, _h = _a.top, top = _h === void 0 ? 0 : _h, _j = _a.type, type = _j === void 0 ? 'normal_16' : _j, props = __rest(_a, ["bottom", "center", "children", "color", "left", "right", "style", "top", "type"]);
860
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$c[type]), style) }, props, { children: children })) }));
860
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$i[type]), style) }, props, { children: children })) }));
861
861
  };
862
862
 
863
863
  var BottomSheetPhoto = function (_a) {
@@ -939,10 +939,10 @@ var BottomSheetPhoto = function (_a) {
939
939
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { type: "file", accept: ".png,.jpg,.jpeg", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }), cameraVisible && (jsxRuntime.jsx(CameraModal, { onClose: function () { return setCameraVisible(false); }, onCapture: function (base64) {
940
940
  onUploadBase64 === null || onUploadBase64 === void 0 ? void 0 : onUploadBase64(base64, null);
941
941
  } })), visible &&
942
- ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ style: styles$d.backdrop, onClick: onClose }, { children: jsxRuntime.jsxs("div", __assign({ style: __assign(__assign({}, styles$d.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsxs("div", __assign({ style: styles$d.header }, { children: [jsxRuntime.jsx("span", __assign({ style: styles$d.title }, { children: title })), jsxRuntime.jsx("button", __assign({ style: styles$d.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsxRuntime.jsx("div", __assign({ style: styles$d.content }, { children: bottomSheetData.map(function (val, idx) { return (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: val.onPress, style: styles$d.contentBottomSheet }, { children: jsxRuntime.jsx(Text, { children: val.title }) }), idx)); }) }))] })) })), document.body)] }));
942
+ ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ style: styles$j.backdrop, onClick: onClose }, { children: jsxRuntime.jsxs("div", __assign({ style: __assign(__assign({}, styles$j.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsxs("div", __assign({ style: styles$j.header }, { children: [jsxRuntime.jsx("span", __assign({ style: styles$j.title }, { children: title })), jsxRuntime.jsx("button", __assign({ style: styles$j.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsxRuntime.jsx("div", __assign({ style: styles$j.content }, { children: bottomSheetData.map(function (val, idx) { return (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: val.onPress, style: styles$j.contentBottomSheet }, { children: jsxRuntime.jsx(Text, { children: val.title }) }), idx)); }) }))] })) })), document.body)] }));
943
943
  };
944
944
 
945
- var styles$b = {
945
+ var styles$h = {
946
946
  content: {
947
947
  display: 'flex',
948
948
  justifyContent: 'center',
@@ -953,7 +953,7 @@ var styles$b = {
953
953
  };
954
954
 
955
955
  var isMobileDisplay = window.innerWidth <= 768;
956
- var styles$a = {
956
+ var styles$g = {
957
957
  content: {
958
958
  display: 'flex',
959
959
  justifyContent: 'center',
@@ -1020,9 +1020,9 @@ styleInject(css_248z);
1020
1020
  var LoadingSpinner = function (_a) {
1021
1021
  var _b = _a.loadingType, loadingType = _b === void 0 ? false : _b, _c = _a.loadingIcon, loadingIcon = _c === void 0 ? '' : _c;
1022
1022
  var renderSpinnerComponent = function () { return jsxRuntime.jsx("div", { className: "loading-spinner" }); };
1023
- var renderSpinnerSection = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsxRuntime.jsx("div", { className: "loading-spinner-section" }) }))); };
1024
- var renderSpinnerSectionS = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsxRuntime.jsx("div", { className: "loading-spinner-section-s" }) }))); };
1025
- var renderSpinnerPage = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$a.loadingSpinnerPageContainer }, { children: jsxRuntime.jsxs(View, __assign({ style: styles$a.loadingSpinnerPageContent }, { children: [jsxRuntime.jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsxRuntime.jsx("img", { style: styles$a.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
1023
+ var renderSpinnerSection = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$g.loadingSpinnerSectionContainer }, { children: jsxRuntime.jsx("div", { className: "loading-spinner-section" }) }))); };
1024
+ var renderSpinnerSectionS = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$g.loadingSpinnerSectionContainer }, { children: jsxRuntime.jsx("div", { className: "loading-spinner-section-s" }) }))); };
1025
+ var renderSpinnerPage = function () { return (jsxRuntime.jsx(View, __assign({ style: styles$g.loadingSpinnerPageContainer }, { children: jsxRuntime.jsxs(View, __assign({ style: styles$g.loadingSpinnerPageContent }, { children: [jsxRuntime.jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsxRuntime.jsx("img", { style: styles$g.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
1026
1026
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingType === 'page'
1027
1027
  ? renderSpinnerPage()
1028
1028
  : loadingType === 'section'
@@ -1040,10 +1040,35 @@ var Button = function (_a) {
1040
1040
  ? 'transparent'
1041
1041
  : backgroundColor
1042
1042
  ? backgroundColor
1043
- : Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$b.content), disabled: isLoading || disabled, onClick: onPress, type: 'submit' }, props, { children: [!isLoading ? label : null, isLoading && jsxRuntime.jsx(LoadingSpinner, { loadingType: false })] })) }));
1043
+ : Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$h.content), disabled: isLoading || disabled, onClick: onPress, type: 'submit' }, props, { children: [!isLoading ? label : null, isLoading && jsxRuntime.jsx(LoadingSpinner, { loadingType: false })] })) }));
1044
1044
  };
1045
1045
 
1046
- var styles$9 = {
1046
+ var styles$f = {
1047
+ label: {
1048
+ display: 'flex',
1049
+ alignItems: 'center',
1050
+ userSelect: 'none',
1051
+ },
1052
+ input: {
1053
+ width: 18,
1054
+ height: 18,
1055
+ marginRight: 8,
1056
+ },
1057
+ };
1058
+
1059
+ var Checkbox = function (_a) {
1060
+ var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, handleOnChecked = _a.handleOnChecked;
1061
+ var handleChange = function (event) {
1062
+ if (disabled)
1063
+ return;
1064
+ if (handleOnChecked) {
1065
+ handleOnChecked(event.target.checked);
1066
+ }
1067
+ };
1068
+ return (jsxRuntime.jsx("label", __assign({ style: __assign(__assign({}, styles$f.label), { cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1 }) }, { children: jsxRuntime.jsx("input", { type: "checkbox", checked: disabled ? false : checked, disabled: disabled, onChange: handleChange, style: __assign(__assign({}, styles$f.input), { cursor: disabled ? 'not-allowed' : 'pointer' }) }) })));
1069
+ };
1070
+
1071
+ var styles$e = {
1047
1072
  container: {
1048
1073
  flex: 1,
1049
1074
  minHeight: '100vh',
@@ -1058,10 +1083,50 @@ var styles$9 = {
1058
1083
 
1059
1084
  var Container = function (_a) {
1060
1085
  var children = _a.children, containerStyle = _a.containerStyle, contentStyle = _a.contentStyle;
1061
- return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$9.container), { containerStyle: containerStyle }) }, { children: jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$9.content), { contentStyle: contentStyle }) }, { children: children })) })));
1086
+ return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$e.container), { containerStyle: containerStyle }) }, { children: jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$e.content), { contentStyle: contentStyle }) }, { children: children })) })));
1062
1087
  };
1063
1088
 
1064
- var styles$8 = {
1089
+ var styles$d = {
1090
+ badgeContainer: {
1091
+ position: 'absolute',
1092
+ zIndex: 1,
1093
+ pointerEvents: 'none',
1094
+ },
1095
+ ribbon: {
1096
+ position: 'absolute',
1097
+ top: 0,
1098
+ left: 0,
1099
+ width: '150px',
1100
+ height: '150px',
1101
+ overflow: 'hidden',
1102
+ },
1103
+ text: {
1104
+ position: 'absolute',
1105
+ left: -28,
1106
+ top: 10,
1107
+ transform: 'rotate(-45deg)',
1108
+ background: "linear-gradient(145deg, ".concat(Colors.red60, ", ").concat(Colors.red, ")"),
1109
+ color: Colors.white,
1110
+ paddingLeft: 30,
1111
+ paddingRight: 30,
1112
+ paddingTop: 2,
1113
+ paddingBottom: 2,
1114
+ fontWeight: 'bold',
1115
+ fontSize: 13,
1116
+ boxShadow: '0 3px 6px rgba(0,0,0,0.3)',
1117
+ borderTopRightRadius: '8px',
1118
+ borderBottomLeftRadius: '8px',
1119
+ },
1120
+ };
1121
+
1122
+ var CornerBadge = function (_a) {
1123
+ var _b = _a.text, text = _b === void 0 ? 'NEW' : _b, _c = _a.visible, visible = _c === void 0 ? true : _c;
1124
+ if (!visible)
1125
+ return null;
1126
+ return (jsxRuntime.jsx(View, __assign({ style: styles$d.badgeContainer }, { children: jsxRuntime.jsx(View, __assign({ style: styles$d.ribbon }, { children: jsxRuntime.jsx(Text, __assign({ style: styles$d.text }, { children: text })) })) })));
1127
+ };
1128
+
1129
+ var styles$c = {
1065
1130
  cardWrapper: {
1066
1131
  flexDirection: 'row',
1067
1132
  width: '100%',
@@ -1138,12 +1203,191 @@ var Countdown = function (_a) {
1138
1203
  }, [(_b = weddingDate === null || weddingDate === void 0 ? void 0 : weddingDate.reception) === null || _b === void 0 ? void 0 : _b.start]);
1139
1204
  var renderCardBox = function (_a, idx) {
1140
1205
  var label = _a.label, value = _a.value;
1141
- return (jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$8.cardBox), { cardStyle: cardStyle, marginRight: idx === data.length - 1 ? 0 : 8 }) }, { children: [jsxRuntime.jsx(Text, { style: __assign(__assign({}, styles$8.cardTitle), { fontStyle: fontStyle }), children: value ? (value < 0 ? '00' : value) : '' }), jsxRuntime.jsx(Text, { children: label, style: __assign(__assign({}, styles$8.cardDescription), { fontStyle: fontStyle }) })] }), idx));
1206
+ return (jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$c.cardBox), { cardStyle: cardStyle, marginRight: idx === data.length - 1 ? 0 : 8 }) }, { children: [jsxRuntime.jsx(Text, { style: __assign(__assign({}, styles$c.cardTitle), { fontStyle: fontStyle }), children: value ? (value < 0 ? '00' : value) : '' }), jsxRuntime.jsx(Text, { children: label, style: __assign(__assign({}, styles$c.cardDescription), { fontStyle: fontStyle }) })] }), idx));
1142
1207
  };
1143
- var render = function () { return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$8.cardWrapper), { containerStyle: containerStyle }) }, { children: data === null || data === void 0 ? void 0 : data.map(function (val, idx) { return renderCardBox(val, idx); }) }))); };
1208
+ var render = function () { return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$c.cardWrapper), { containerStyle: containerStyle }) }, { children: data === null || data === void 0 ? void 0 : data.map(function (val, idx) { return renderCardBox(val, idx); }) }))); };
1144
1209
  return render();
1145
1210
  };
1146
1211
 
1212
+ var translationID = {
1213
+ allowedFormat: function (formats) { return "Format: ".concat(formats); },
1214
+ errorInvalidFormat: function (formats) { return "File harus berformat: ".concat(formats); },
1215
+ errorMaxSize: function (size) { return "Ukuran file maksimal ".concat(size, "MB"); },
1216
+ errorMaxUpload: function (max) { return "Maksimal upload ".concat(max, " file."); },
1217
+ maxData: function (max) { return "Data: ".concat(max, " baris"); },
1218
+ maxSize: function (size) { return "Ukuran: ".concat(size, " MB"); },
1219
+ maxUpload: function (max) { return "Upload: ".concat(max, " file"); },
1220
+ pickFile: 'Pilih File',
1221
+ remove: 'Hapus',
1222
+ selectFileTitle: 'Pilih file mu di sini.',
1223
+ uploadingFiles: function (count, max) { return "Mengunggah File (".concat(count, "/").concat(max, ")"); },
1224
+ maximumLimit: 'Batas Maksimal:',
1225
+ };
1226
+
1227
+ var translationUS = {
1228
+ allowedFormat: function (formats) { return "Allowed formats: ".concat(formats); },
1229
+ errorInvalidFormat: function (formats) { return "File must be in format: ".concat(formats); },
1230
+ errorMaxSize: function (size) { return "Maximum file size is ".concat(size, "MB"); },
1231
+ errorMaxUpload: function (max) { return "Maximum upload is ".concat(max, " files."); },
1232
+ maxData: function (max) { return "Data: ".concat(max, " rows"); },
1233
+ maxSize: function (size) { return "Size: ".concat(size, " MB"); },
1234
+ maxUpload: function (max) { return "Upload: ".concat(max, " files"); },
1235
+ pickFile: 'Pick File',
1236
+ remove: 'Remove',
1237
+ selectFileTitle: 'Choose your file here.',
1238
+ uploadingFiles: function (count, max) { return "Uploading Files (".concat(count, "/").concat(max, ")"); },
1239
+ maximumLimit: 'Maximum Limit:',
1240
+ };
1241
+
1242
+ var styles$b = {
1243
+ wrapper: {
1244
+ width: '100%',
1245
+ display: 'flex',
1246
+ flexDirection: 'column',
1247
+ },
1248
+ uploadBox: {
1249
+ border: '1px solid #d1d5db',
1250
+ borderRadius: '12px',
1251
+ backgroundColor: '#f9fafb',
1252
+ textAlign: 'center',
1253
+ paddingBottom: 20,
1254
+ },
1255
+ cloudIcon: {
1256
+ fontSize: '48px',
1257
+ color: '#9ca3af',
1258
+ },
1259
+ title: {
1260
+ color: '#4b5563',
1261
+ marginTop: '8px',
1262
+ fontSize: '16px',
1263
+ },
1264
+ subtitle: {
1265
+ color: '#9ca3af',
1266
+ fontSize: '14px',
1267
+ marginTop: '4px',
1268
+ },
1269
+ noteContainer: {
1270
+ alignItems: 'center',
1271
+ },
1272
+ note: {
1273
+ color: '#9ca3af',
1274
+ marginBottom: 4,
1275
+ },
1276
+ button: {
1277
+ marginTop: '24px',
1278
+ color: 'white',
1279
+ padding: '12px 24px',
1280
+ borderRadius: '8px',
1281
+ fontSize: 14,
1282
+ fontWeight: 500,
1283
+ border: 'none',
1284
+ display: 'inline-block',
1285
+ },
1286
+ hiddenInput: {
1287
+ display: 'none',
1288
+ },
1289
+ error: {
1290
+ marginTop: '16px',
1291
+ color: '#ef4444',
1292
+ fontSize: '14px',
1293
+ paddingLeft: 32,
1294
+ paddingRight: 32,
1295
+ },
1296
+ success: {
1297
+ marginTop: '16px',
1298
+ color: '#229403ff',
1299
+ fontSize: '14px',
1300
+ paddingLeft: 32,
1301
+ paddingRight: 32,
1302
+ },
1303
+ fileListBox: {
1304
+ border: '1px solid #d1d5db',
1305
+ borderRadius: '12px',
1306
+ paddingLeft: 16,
1307
+ paddingRight: 16,
1308
+ backgroundColor: 'white',
1309
+ marginTop: 20,
1310
+ },
1311
+ fileListHeader: {
1312
+ fontSize: '16px',
1313
+ color: '#374151',
1314
+ fontWeight: 600,
1315
+ marginBottom: 10,
1316
+ },
1317
+ fileRow: {
1318
+ display: 'flex',
1319
+ justifyContent: 'space-between',
1320
+ alignItems: 'center',
1321
+ marginBottom: 8,
1322
+ },
1323
+ fileName: {
1324
+ color: '#16a34a',
1325
+ fontSize: '14px',
1326
+ },
1327
+ removeButton: {
1328
+ backgroundColor: '#ef4444',
1329
+ color: 'white',
1330
+ border: 'none',
1331
+ padding: '6px 12px',
1332
+ borderRadius: '6px',
1333
+ fontSize: '12px',
1334
+ cursor: 'pointer',
1335
+ },
1336
+ };
1337
+
1338
+ var translations = { id: translationID, us: translationUS };
1339
+ var DocumentUploader = function (_a) {
1340
+ var _b;
1341
+ var _c = _a.allowedExtensions, allowedExtensions = _c === void 0 ? ['.xlsx'] : _c, _d = _a.maxUpload, maxUpload = _d === void 0 ? 1 : _d, _e = _a.maxSizeMB, maxSizeMB = _e === void 0 ? 1 : _e, _f = _a.lang, lang = _f === void 0 ? 'us' : _f, _g = _a.maxData, maxData = _g === void 0 ? 70 : _g, _h = _a.onChangeFiles, onChangeFiles = _h === void 0 ? function () { } : _h, _j = _a.listErrorMessage, listErrorMessage = _j === void 0 ? false : _j, _k = _a.successMessage, successMessage = _k === void 0 ? false : _k;
1342
+ var t = (_b = translations[lang]) !== null && _b !== void 0 ? _b : translations.us;
1343
+ var _l = react.useState([]), files = _l[0], setFiles = _l[1];
1344
+ var _m = react.useState(null), error = _m[0], setError = _m[1];
1345
+ var fileInputRef = react.useRef(null);
1346
+ var handleFileChange = function (e) {
1347
+ var _a;
1348
+ var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
1349
+ if (!file)
1350
+ return;
1351
+ if (files.length >= maxUpload) {
1352
+ setError(t.errorMaxUpload(maxUpload));
1353
+ fileInputRef.current && (fileInputRef.current.value = '');
1354
+ return;
1355
+ }
1356
+ var isValidExt = allowedExtensions.some(function (ext) {
1357
+ return file.name.toLowerCase().endsWith(ext.toLowerCase());
1358
+ });
1359
+ if (!isValidExt) {
1360
+ setError(t.errorInvalidFormat(allowedExtensions.join(', ')));
1361
+ return;
1362
+ }
1363
+ if (file.size > maxSizeMB * 1024 * 1024) {
1364
+ setError(t.errorMaxSize(maxSizeMB));
1365
+ return;
1366
+ }
1367
+ var updated = __spreadArray(__spreadArray([], files, true), [file], false);
1368
+ setFiles(updated);
1369
+ setError(null);
1370
+ onChangeFiles(updated);
1371
+ fileInputRef.current && (fileInputRef.current.value = '');
1372
+ };
1373
+ var handleRemove = function (index) {
1374
+ var updated = files.filter(function (_, i) { return i !== index; });
1375
+ setFiles(updated);
1376
+ setError(null);
1377
+ onChangeFiles(updated);
1378
+ };
1379
+ var shortenFileName = function (name, max) {
1380
+ if (max === void 0) { max = 25; }
1381
+ if (name.length <= max)
1382
+ return name;
1383
+ var dot = name.lastIndexOf('.');
1384
+ var ext = dot !== -1 ? name.slice(dot) : '';
1385
+ return name.slice(0, max - ext.length - 3) + '...' + ext;
1386
+ };
1387
+ return (jsxRuntime.jsxs("div", __assign({ style: styles$b.wrapper }, { children: [jsxRuntime.jsxs("div", __assign({ style: styles$b.uploadBox }, { children: [jsxRuntime.jsx("div", __assign({ style: styles$b.cloudIcon }, { children: "\u2601\uFE0F" })), jsxRuntime.jsx("p", __assign({ style: styles$b.title }, { children: t.selectFileTitle })), jsxRuntime.jsxs("p", __assign({ style: styles$b.subtitle }, { children: [t.allowedFormat(allowedExtensions.join(', ')), " \u2014 ", t.maximumLimit] })), jsxRuntime.jsxs(View, __assign({ style: styles$b.noteContainer }, { children: [jsxRuntime.jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxSize(maxSizeMB) })), jsxRuntime.jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxUpload(maxUpload) })), jsxRuntime.jsx(Text, __assign({ type: "normal_14", style: styles$b.note }, { children: t.maxData(maxData) }))] })), jsxRuntime.jsxs("label", __assign({ style: __assign(__assign({}, styles$b.button), { backgroundColor: files.length >= maxUpload ? '#9ca3af' : '#f97316', cursor: files.length >= maxUpload ? 'not-allowed' : 'pointer' }) }, { children: [t.pickFile, jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: allowedExtensions.join(','), disabled: files.length >= maxUpload, style: styles$b.hiddenInput, onChange: handleFileChange })] })), error && jsxRuntime.jsxs("p", __assign({ style: styles$b.error }, { children: ["\u26A0\uFE0F ", error] })), Array.isArray(listErrorMessage) &&
1388
+ listErrorMessage.map(function (msg, i) { return (jsxRuntime.jsxs("p", __assign({ style: styles$b.error }, { children: ["\u26A0\uFE0F ", msg] }), i)); }), successMessage && jsxRuntime.jsxs("p", __assign({ style: styles$b.success }, { children: ["\u2705 ", successMessage] }))] })), files.length > 0 && (jsxRuntime.jsxs("div", __assign({ style: styles$b.fileListBox }, { children: [jsxRuntime.jsx("p", __assign({ style: styles$b.fileListHeader }, { children: t.uploadingFiles(files.length, maxUpload) })), files.map(function (file, i) { return (jsxRuntime.jsxs("div", __assign({ style: styles$b.fileRow }, { children: [jsxRuntime.jsxs("p", __assign({ style: styles$b.fileName }, { children: ["\uD83D\uDCC4 ", shortenFileName(file.name)] })), jsxRuntime.jsx("button", __assign({ style: styles$b.removeButton, onClick: function () { return handleRemove(i); } }, { children: t.remove }))] }), i)); })] })))] })));
1389
+ };
1390
+
1147
1391
  var DropDown = function (_a) {
1148
1392
  var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? Colors.darkBlue : _b, _c = _a.bottom, bottom = _c === void 0 ? 0 : _c, _d = _a.color, color = _d === void 0 ? Colors.grey2 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 12 : _e, _f = _a.id, id = _f === void 0 ? 'dropdown' : _f, _g = _a.left, left = _g === void 0 ? 0 : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { } : _h, _j = _a.options, options = _j === void 0 ? [
1149
1393
  { value: 'y', label: 'Present' },
@@ -1155,7 +1399,7 @@ var DropDown = function (_a) {
1155
1399
  }) })));
1156
1400
  };
1157
1401
 
1158
- var styles$7 = {
1402
+ var styles$a = {
1159
1403
  container: {
1160
1404
  borderRadius: 8,
1161
1405
  paddingRight: 16,
@@ -1200,7 +1444,7 @@ var styles$7 = {
1200
1444
  },
1201
1445
  };
1202
1446
 
1203
- var styles$6 = {
1447
+ var styles$9 = {
1204
1448
  backdrop: {
1205
1449
  position: 'fixed',
1206
1450
  top: 0,
@@ -1251,11 +1495,11 @@ var PhotoPreviewModal = function (_a) {
1251
1495
  }, [visible, onDismiss]);
1252
1496
  if (!visible)
1253
1497
  return null;
1254
- return ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ onClick: onDismiss, style: styles$6.backdrop }, { children: jsxRuntime.jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); }, style: styles$6.modalContent }, { children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, alt: '', onError: function (_a) {
1498
+ return ReactDOM__default["default"].createPortal(jsxRuntime.jsx("div", __assign({ onClick: onDismiss, style: styles$9.backdrop }, { children: jsxRuntime.jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); }, style: styles$9.modalContent }, { children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, alt: '', onError: function (_a) {
1255
1499
  var currentTarget = _a.currentTarget;
1256
1500
  currentTarget.onerror = null;
1257
1501
  currentTarget.src = Icons.image_not_available;
1258
- }, style: styles$6.image })) : (jsxRuntime.jsx("p", __assign({ style: styles$6.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
1502
+ }, style: styles$9.image })) : (jsxRuntime.jsx("p", __assign({ style: styles$9.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
1259
1503
  };
1260
1504
 
1261
1505
  var ImageInput = function (_a) {
@@ -1265,7 +1509,7 @@ var ImageInput = function (_a) {
1265
1509
  var _h = react.useState(false), isPreviewVisible = _h[0], setIsPreviewVisible = _h[1];
1266
1510
  var handleOnUpload = function () { return setIsVisibleBottomSheet(true); };
1267
1511
  var handleOnPreview = function () { return setIsPreviewVisible(true); };
1268
- return (jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), containerStyle) }, { children: [jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$7.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsxRuntime.jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$7.image : styles$7.iconCamera }) })), jsxRuntime.jsxs(View, __assign({ style: styles$7.containerText }, { children: [label && (jsxRuntime.jsx(Text, __assign({ type: "bold_16", style: styles$7.label }, { children: label }))), subLabel && jsxRuntime.jsx(Text, { children: subLabel }), isMandatory && jsxRuntime.jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsxRuntime.jsx(Images, { src: Icons.edit, style: styles$7.iconEdit }) }))), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsxRuntime.jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
1512
+ return (jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$a.container), containerStyle) }, { children: [jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$a.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsxRuntime.jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$a.image : styles$a.iconCamera }) })), jsxRuntime.jsxs(View, __assign({ style: styles$a.containerText }, { children: [label && (jsxRuntime.jsx(Text, __assign({ type: "bold_16", style: styles$a.label }, { children: label }))), subLabel && jsxRuntime.jsx(Text, { children: subLabel }), isMandatory && jsxRuntime.jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsxRuntime.jsx(Images, { src: Icons.edit, style: styles$a.iconEdit }) }))), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsxRuntime.jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
1269
1513
  if (typeof base64 === 'string') {
1270
1514
  setImagePreview(base64);
1271
1515
  if (typeof handleOnPickImage === 'function') {
@@ -1275,7 +1519,7 @@ var ImageInput = function (_a) {
1275
1519
  } })] })));
1276
1520
  };
1277
1521
 
1278
- var styles$5 = {
1522
+ var styles$8 = {
1279
1523
  sliderContainer: {
1280
1524
  position: 'relative',
1281
1525
  maxWidth: '600px',
@@ -1375,16 +1619,16 @@ var ImageSlider = function (_a) {
1375
1619
  return prevIndex === images.length - 1 ? 0 : prevIndex + 1;
1376
1620
  });
1377
1621
  };
1378
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxRuntime.jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$5.sliderContainer), style), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave }, { children: [jsxRuntime.jsx("img", { src: (_b = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _b === void 0 ? void 0 : _b.file, alt: "slide-".concat(currentIndex), style: styles$5.image, draggable: false, onError: function (_a) {
1622
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxRuntime.jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$8.sliderContainer), style), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave }, { children: [jsxRuntime.jsx("img", { src: (_b = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _b === void 0 ? void 0 : _b.file, alt: "slide-".concat(currentIndex), style: styles$8.image, draggable: false, onError: function (_a) {
1379
1623
  var currentTarget = _a.currentTarget;
1380
1624
  currentTarget.onerror = null;
1381
1625
  currentTarget.src = Icons.image_not_available;
1382
- } }), jsxRuntime.jsxs("div", __assign({ style: styles$5.counter }, { children: [currentIndex + 1, " / ", images.length] }))] }))) : (jsxRuntime.jsx(Images, { src: '', style: __assign(__assign({}, styles$5.imageNotAvailable), style) })), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: images.length > 0
1626
+ } }), jsxRuntime.jsxs("div", __assign({ style: styles$8.counter }, { children: [currentIndex + 1, " / ", images.length] }))] }))) : (jsxRuntime.jsx(Images, { src: '', style: __assign(__assign({}, styles$8.imageNotAvailable), style) })), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: images.length > 0
1383
1627
  ? (_c = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _c === void 0 ? void 0 : _c.file
1384
1628
  : Icons.image_not_available })] }));
1385
1629
  };
1386
1630
 
1387
- var styles$4 = {
1631
+ var styles$7 = {
1388
1632
  container: {
1389
1633
  padding: 16,
1390
1634
  backgroundColor: Colors.white,
@@ -1504,20 +1748,20 @@ var MultipleImageInput = function (_a) {
1504
1748
  return updated;
1505
1749
  });
1506
1750
  };
1507
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, __assign({ style: styles$4.title }, { children: label })), jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$4.container), style) }, { children: [jsxRuntime.jsx("div", __assign({ style: styles$4.card }, props, { children: jsxRuntime.jsxs("div", __assign({ style: styles$4.previewContainer }, { children: [images.map(function (_a, index) {
1751
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, __assign({ style: styles$7.title }, { children: label })), jsxRuntime.jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), style) }, { children: [jsxRuntime.jsx("div", __assign({ style: styles$7.card }, props, { children: jsxRuntime.jsxs("div", __assign({ style: styles$7.previewContainer }, { children: [images.map(function (_a, index) {
1508
1752
  var src = _a.src;
1509
- return (jsxRuntime.jsxs("div", __assign({ style: styles$4.previewWrapper }, { children: [jsxRuntime.jsx("button", __assign({ onClick: function () { return removeImage(index); }, style: styles$4.closeButton, "aria-label": "Remove image" }, { children: "\u00D7" })), jsxRuntime.jsx("img", { src: src, alt: "preview", style: styles$4.previewImage }), jsxRuntime.jsx("button", __assign({ onClick: function () {
1753
+ return (jsxRuntime.jsxs("div", __assign({ style: styles$7.previewWrapper }, { children: [jsxRuntime.jsx("button", __assign({ onClick: function () { return removeImage(index); }, style: styles$7.closeButton, "aria-label": "Remove image" }, { children: "\u00D7" })), jsxRuntime.jsx("img", { src: src, alt: "preview", style: styles$7.previewImage }), jsxRuntime.jsx("button", __assign({ onClick: function () {
1510
1754
  setImagePreview(src);
1511
1755
  setIsPreviewVisible(true);
1512
- }, style: styles$4.eyeButton, "aria-label": "Preview image" }, { children: "\uD83D\uDC41\uFE0F" }))] }), index));
1513
- }), jsxRuntime.jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$4.addButton, role: "button", tabIndex: 0, onKeyDown: function (e) {
1756
+ }, style: styles$7.eyeButton, "aria-label": "Preview image" }, { children: "\uD83D\uDC41\uFE0F" }))] }), index));
1757
+ }), jsxRuntime.jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$7.addButton, role: "button", tabIndex: 0, onKeyDown: function (e) {
1514
1758
  if (e.key === 'Enter' || e.key === ' ') {
1515
1759
  setIsVisibleBottomSheet(true);
1516
1760
  }
1517
- }, "aria-label": "Add images" }, { children: jsxRuntime.jsx("span", __assign({ style: styles$4.plusSign }, { children: "+" })) }))] })) })), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsxRuntime.jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, title: "Pemilihan Gambar", onUploadBase64: function (data) { return handleChange(data); } })] }))] }));
1761
+ }, "aria-label": "Add images" }, { children: jsxRuntime.jsx("span", __assign({ style: styles$7.plusSign }, { children: "+" })) }))] })) })), jsxRuntime.jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsxRuntime.jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, title: "Pemilihan Gambar", onUploadBase64: function (data) { return handleChange(data); } })] }))] }));
1518
1762
  };
1519
1763
 
1520
- var styles$3 = {
1764
+ var styles$6 = {
1521
1765
  container: {
1522
1766
  justifyContent: 'center',
1523
1767
  alignItems: 'center',
@@ -1527,10 +1771,10 @@ var styles$3 = {
1527
1771
 
1528
1772
  var NoRecord = function (_a) {
1529
1773
  var title = _a.title, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["title", "style"]);
1530
- return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$3.container), style) }, props, { children: jsxRuntime.jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
1774
+ return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$6.container), style) }, props, { children: jsxRuntime.jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
1531
1775
  };
1532
1776
 
1533
- var styles$2 = {
1777
+ var styles$5 = {
1534
1778
  container: {
1535
1779
  position: 'fixed',
1536
1780
  left: 0,
@@ -1575,7 +1819,88 @@ var PopUp = function (_a) {
1575
1819
  var _b = _a.backgroundButtonColor, backgroundButtonColor = _b === void 0 ? Colors.black : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, popUpData = _a.popUpData, _d = _a.visible, visible = _d === void 0 ? false : _d, _e = _a.styleContainer, styleContainer = _e === void 0 ? {} : _e;
1576
1820
  if (!visible)
1577
1821
  return null;
1578
- return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$2.container), styleContainer) }, { children: jsxRuntime.jsxs(View, __assign({ style: styles$2.card }, { children: [jsxRuntime.jsxs(View, { children: [jsxRuntime.jsx(Text, __assign({ style: styles$2.headerTitle }, { children: popUpData === null || popUpData === void 0 ? void 0 : popUpData.title })), (popUpData === null || popUpData === void 0 ? void 0 : popUpData.description) && (jsxRuntime.jsx(Text, __assign({ style: styles$2.headerDescription }, { children: popUpData.description })))] }), jsxRuntime.jsxs(View, { children: [(popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelDecline) && (popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressDecline) && (jsxRuntime.jsx(Button, { style: styles$2.buttonNegative, backgroundColor: backgroundButtonColor, outlineColor: Colors.black, isLoading: isLoading, label: popUpData.labelDecline, onPress: popUpData.onPressDecline })), jsxRuntime.jsx(Button, { style: styles$2.buttonPositive, backgroundColor: backgroundButtonColor, isLoading: isLoading, label: popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelAccept, onPress: popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressAccept })] })] })) })));
1822
+ return (jsxRuntime.jsx(View, __assign({ style: __assign(__assign({}, styles$5.container), styleContainer) }, { children: jsxRuntime.jsxs(View, __assign({ style: styles$5.card }, { children: [jsxRuntime.jsxs(View, { children: [jsxRuntime.jsx(Text, __assign({ style: styles$5.headerTitle }, { children: popUpData === null || popUpData === void 0 ? void 0 : popUpData.title })), (popUpData === null || popUpData === void 0 ? void 0 : popUpData.description) && (jsxRuntime.jsx(Text, __assign({ style: styles$5.headerDescription }, { children: popUpData.description })))] }), jsxRuntime.jsxs(View, { children: [(popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelDecline) && (popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressDecline) && (jsxRuntime.jsx(Button, { style: styles$5.buttonNegative, backgroundColor: backgroundButtonColor, outlineColor: Colors.black, isLoading: isLoading, label: popUpData.labelDecline, onPress: popUpData.onPressDecline })), jsxRuntime.jsx(Button, { style: styles$5.buttonPositive, backgroundColor: backgroundButtonColor, isLoading: isLoading, label: popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelAccept, onPress: popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressAccept })] })] })) })));
1823
+ };
1824
+
1825
+ var styles$4 = {
1826
+ label: {
1827
+ marginBottom: 16,
1828
+ },
1829
+ singleRadioContainer: {
1830
+ display: 'flex',
1831
+ marginBottom: '10px',
1832
+ flexDirection: 'row',
1833
+ },
1834
+ outterBullet: {
1835
+ width: 20,
1836
+ height: 20,
1837
+ borderRadius: 10,
1838
+ justifyContent: 'center',
1839
+ alignItems: 'center',
1840
+ backgroundColor: Colors.white,
1841
+ marginRight: 8,
1842
+ border: '1px solid rgba(0, 0, 0, 0.6)',
1843
+ },
1844
+ innerBulletActive: {
1845
+ width: 12,
1846
+ height: 12,
1847
+ borderRadius: 6,
1848
+ backgroundColor: Colors.black100,
1849
+ },
1850
+ innerBulletNotActive: {
1851
+ width: 12,
1852
+ height: 12,
1853
+ borderRadius: 6,
1854
+ backgroundColor: Colors.white,
1855
+ },
1856
+ };
1857
+
1858
+ var styles$3 = {
1859
+ singleRadioContainer: {
1860
+ display: 'flex',
1861
+ marginBottom: '10px',
1862
+ flexDirection: 'row',
1863
+ },
1864
+ outterBullet: {
1865
+ width: 20,
1866
+ height: 20,
1867
+ borderRadius: 10,
1868
+ justifyContent: 'center',
1869
+ alignItems: 'center',
1870
+ backgroundColor: Colors.white,
1871
+ marginRight: 8,
1872
+ border: '1px solid rgba(0, 0, 0, 0.6)',
1873
+ },
1874
+ innerBulletActive: {
1875
+ width: 12,
1876
+ height: 12,
1877
+ borderRadius: 6,
1878
+ backgroundColor: Colors.black100,
1879
+ },
1880
+ innerBulletNotActive: {
1881
+ width: 12,
1882
+ height: 12,
1883
+ borderRadius: 6,
1884
+ backgroundColor: Colors.white,
1885
+ },
1886
+ };
1887
+
1888
+ var RadioButtonSingle = function (_a) {
1889
+ var value = _a.value, handleChange = _a.handleChange, selectedOption = _a.selectedOption, children = _a.children;
1890
+ return (jsxRuntime.jsxs(TouchableOpacity, __assign({ onPress: function () { return handleChange(value); }, style: styles$3.singleRadioContainer }, { children: [jsxRuntime.jsx(View, __assign({ style: styles$3.outterBullet }, { children: jsxRuntime.jsx(View, { style: selectedOption === value
1891
+ ? styles$3.innerBulletActive
1892
+ : styles$3.innerBulletNotActive }) })), jsxRuntime.jsx(View, __assign({ style: { flex: 1 } }, { children: children }))] })));
1893
+ };
1894
+
1895
+ var RadioButtonMultiple = function (_a) {
1896
+ var label = _a.label, _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, onSelect = _a.onSelect, _c = _a.keyField, keyField = _c === void 0 ? 'key' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, styleContainer = _a.styleContainer, renderItem = _a.renderItem;
1897
+ var _e = react.useState(selectedValue), selectedOption = _e[0], setSelectedOption = _e[1];
1898
+ var handleChange = function (value) {
1899
+ setSelectedOption(value);
1900
+ if (onSelect)
1901
+ onSelect(value);
1902
+ };
1903
+ return (jsxRuntime.jsxs(View, __assign({ style: __assign({}, styleContainer) }, { children: [jsxRuntime.jsx(Text, __assign({ type: "bold_16", style: styles$4.label }, { children: label })), options.map(function (item, index) { return (jsxRuntime.jsx(RadioButtonSingle, __assign({ value: item[valueField], selectedOption: selectedOption, handleChange: handleChange }, { children: renderItem ? (renderItem(item)) : (jsxRuntime.jsx(Text, __assign({ type: "normal_14" }, { children: item[valueField] }))) }), item[keyField] || index)); })] })));
1579
1904
  };
1580
1905
 
1581
1906
  var cameraStyles = {
@@ -30158,7 +30483,7 @@ var ScannerCamera = function (_a) {
30158
30483
  return ReactDOM__default["default"].createPortal(jsxRuntime.jsxs("div", __assign({ style: cameraStyles.overlay }, { children: [jsxRuntime.jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, style: __assign(__assign({}, cameraStyles.video), { transform: isFrontCamera ? 'scaleX(-1)' : 'none', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover' }) }), drawBoundingBox(), isCameraReady && hasRearCamera && (jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: toggleCamera, style: cameraStyles.floatingBottomRotateButtons }, { children: jsxRuntime.jsx(View, __assign({ style: cameraStyles.captureRotateButton }, { children: jsxRuntime.jsx(Images, { src: Icons.rotate, style: cameraStyles.rotateButton }) })) }))), jsxRuntime.jsx("button", __assign({ onClick: handleOnPressClose, style: cameraStyles.closeButton }, { children: "\u00D7" }))] })), document.body);
30159
30484
  };
30160
30485
 
30161
- var styles$1 = {
30486
+ var styles$2 = {
30162
30487
  textInputContainer: {
30163
30488
  width: '100%',
30164
30489
  },
@@ -30201,7 +30526,7 @@ var styles$1 = {
30201
30526
  },
30202
30527
  };
30203
30528
 
30204
- var styles = {
30529
+ var styles$1 = {
30205
30530
  label: {
30206
30531
  marginBottom: 4,
30207
30532
  fontSize: 16,
@@ -30296,14 +30621,14 @@ var TextInput = function (_a) {
30296
30621
  }
30297
30622
  }, [value, multiline]);
30298
30623
  var adjustedStyleTextInput = __assign(__assign({}, styleTextInput), { paddingRight: handleOnScanQr ? 40 : styleTextInput.paddingRight, resize: 'none' });
30299
- var stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles.textArea), adjustedStyleTextInput);
30624
+ var stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles$1.textArea), adjustedStyleTextInput);
30300
30625
  var inputType = isInputRupiah || isInputNumber ? 'tel' : 'text';
30301
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(View, __assign({ style: styles.container }, { children: [jsxRuntime.jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsxRuntime.jsx(Text, { style: __assign(__assign({}, styles.label), styleLabel), children: label })), jsxRuntime.jsx(View, { children: multiline ? (jsxRuntime.jsx("textarea", __assign({ ref: textAreaRef, rows: rows, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsxRuntime.jsx("input", __assign({ type: inputType, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) }), labelError ? (jsxRuntime.jsx(Text, { style: styles.labelError, children: labelError })) : null] })), handleOnScanQr && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: label
30302
- ? styles.scanQrImageContainerWithLabel
30303
- : styles.scanQrImageContainer, onPress: function () {
30626
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(View, __assign({ style: styles$1.container }, { children: [jsxRuntime.jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsxRuntime.jsx(Text, { style: __assign(__assign({}, styles$1.label), styleLabel), children: label })), jsxRuntime.jsx(View, { children: multiline ? (jsxRuntime.jsx("textarea", __assign({ ref: textAreaRef, rows: rows, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsxRuntime.jsx("input", __assign({ type: inputType, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) }), labelError ? (jsxRuntime.jsx(Text, { style: styles$1.labelError, children: labelError })) : null] })), handleOnScanQr && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: label
30627
+ ? styles$1.scanQrImageContainerWithLabel
30628
+ : styles$1.scanQrImageContainer, onPress: function () {
30304
30629
  handleOnScanQr();
30305
30630
  setIsScannerVisible(true);
30306
- } }, { children: jsxRuntime.jsx(Images, { style: styles.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsxRuntime.jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr && handleOnScanQr(data); } }))] }));
30631
+ } }, { children: jsxRuntime.jsx(Images, { style: styles$1.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsxRuntime.jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr && handleOnScanQr(data); } }))] }));
30307
30632
  };
30308
30633
 
30309
30634
  var SearchBox = function (_a) {
@@ -30315,14 +30640,14 @@ var SearchBox = function (_a) {
30315
30640
  handleOnSubmitSearch(value);
30316
30641
  }
30317
30642
  };
30318
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(View, __assign({ style: styles$1.searchContainer }, { children: [jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: function () { return handleOnSubmitSearch(value); } }, { children: jsxRuntime.jsx(Text, __assign({ style: styles$1.iconSearch }, { children: "\uD83D\uDD0D" })) })), jsxRuntime.jsx(TextInput, __assign({ style: styles$1.textInputContainer, styleTextInput: __assign(__assign({}, styles$1.textInput), { paddingRight: handleOnScanQr ? 72 : 40 }), placeholder: placeholder, onKeyPress: handleKeyPress, value: value, onChange: onChange, onBlur: function () {
30643
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(View, __assign({ style: styles$2.searchContainer }, { children: [jsxRuntime.jsx(TouchableOpacity, __assign({ onPress: function () { return handleOnSubmitSearch(value); } }, { children: jsxRuntime.jsx(Text, __assign({ style: styles$2.iconSearch }, { children: "\uD83D\uDD0D" })) })), jsxRuntime.jsx(TextInput, __assign({ style: styles$2.textInputContainer, styleTextInput: __assign(__assign({}, styles$2.textInput), { paddingRight: handleOnScanQr ? 72 : 40 }), placeholder: placeholder, onKeyPress: handleKeyPress, value: value, onChange: onChange, onBlur: function () {
30319
30644
  if (handleOnSubmitSearch && !handleOnScanQr) {
30320
30645
  handleOnSubmitSearch(value);
30321
30646
  }
30322
- } }, props)), (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$1.closeSearchButton, onPress: handleOnClearSearch }, { children: jsxRuntime.jsx(Images, { style: __assign(__assign({}, styles$1.closeSearchButtonImage), { paddingRight: handleOnScanQr ? 48 : 16 }), src: (_b = Icons.close) !== null && _b !== void 0 ? _b : '' }) }))), handleOnScanQr && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$1.scanQrImageContainer, onPress: function () {
30647
+ } }, props)), (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$2.closeSearchButton, onPress: handleOnClearSearch }, { children: jsxRuntime.jsx(Images, { style: __assign(__assign({}, styles$2.closeSearchButtonImage), { paddingRight: handleOnScanQr ? 48 : 16 }), src: (_b = Icons.close) !== null && _b !== void 0 ? _b : '' }) }))), handleOnScanQr && (jsxRuntime.jsx(TouchableOpacity, __assign({ style: styles$2.scanQrImageContainer, onPress: function () {
30323
30648
  handleOnScanQr();
30324
30649
  setIsScannerVisible(true);
30325
- } }, { children: jsxRuntime.jsx(Images, { style: styles$1.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsxRuntime.jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr === null || handleOnScanQr === void 0 ? void 0 : handleOnScanQr(data); } }))] }));
30650
+ } }, { children: jsxRuntime.jsx(Images, { style: styles$2.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsxRuntime.jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr === null || handleOnScanQr === void 0 ? void 0 : handleOnScanQr(data); } }))] }));
30326
30651
  };
30327
30652
 
30328
30653
  var Swipeable = function (_a) {
@@ -30347,12 +30672,53 @@ var Swipeable = function (_a) {
30347
30672
  return (jsxRuntime.jsx("div", __assign({ style: style, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, props, { children: children })));
30348
30673
  };
30349
30674
 
30675
+ var styles = {
30676
+ containerWithBorder: {
30677
+ display: 'flex',
30678
+ alignItems: 'center',
30679
+ justifyContent: 'space-between',
30680
+ marginTop: 16,
30681
+ marginBottom: 16,
30682
+ backgroundColor: Colors.white,
30683
+ padding: 8,
30684
+ borderRadius: 4,
30685
+ border: "0.5px solid ".concat(Colors.grey80),
30686
+ },
30687
+ container: {
30688
+ display: 'flex',
30689
+ alignItems: 'center',
30690
+ justifyContent: 'space-between',
30691
+ marginTop: 8,
30692
+ marginBottom: 8,
30693
+ },
30694
+ toogleContainer: {
30695
+ display: 'flex',
30696
+ flexDirection: 'row',
30697
+ alignItems: 'center',
30698
+ },
30699
+ toogleText: {
30700
+ fontSize: '14px',
30701
+ marginLeft: 8,
30702
+ },
30703
+ };
30704
+
30705
+ var Switch = function (_a) {
30706
+ var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, style = _a.style, _d = _a.labelOn, labelOn = _d === void 0 ? 'ON' : _d, _e = _a.labelOff, labelOff = _e === void 0 ? 'OFF' : _e, _f = _a.isShowLabelToogle, isShowLabelToogle = _f === void 0 ? true : _f, _g = _a.withBorder, withBorder = _g === void 0 ? true : _g;
30707
+ var styleContainer = withBorder
30708
+ ? styles.containerWithBorder
30709
+ : styles.container;
30710
+ return (jsxRuntime.jsxs("div", __assign({ style: __assign(__assign({}, styleContainer), style) }, { children: [label && jsxRuntime.jsx(Text, { children: label }), jsxRuntime.jsxs(View, __assign({ style: styles.toogleContainer }, { children: [jsxRuntime.jsxs("label", __assign({ className: "switch" }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: checked, onChange: function (e) { return onChange(e.target.checked); } }), jsxRuntime.jsx("span", { className: "slider" })] })), isShowLabelToogle && (jsxRuntime.jsx("span", __assign({ style: styles.toogleText }, { children: checked ? labelOn : labelOff })))] }))] })));
30711
+ };
30712
+
30350
30713
  exports.BottomSheet = BottomSheet;
30351
30714
  exports.BottomSheetPhoto = BottomSheetPhoto;
30352
30715
  exports.Button = Button;
30716
+ exports.CheckBox = Checkbox;
30353
30717
  exports.Colors = Colors;
30354
30718
  exports.Container = Container;
30719
+ exports.CornerBadge = CornerBadge;
30355
30720
  exports.CountDown = Countdown;
30721
+ exports.DocumentUploader = DocumentUploader;
30356
30722
  exports.DropDown = DropDown;
30357
30723
  exports.Icons = Icons;
30358
30724
  exports.Image = Images;
@@ -30363,9 +30729,12 @@ exports.MultipleImageInput = MultipleImageInput;
30363
30729
  exports.NoRecord = NoRecord;
30364
30730
  exports.PopUp = PopUp;
30365
30731
  exports.PreviewPhoto = PhotoPreviewModal;
30732
+ exports.RadioButtonMultiple = RadioButtonMultiple;
30733
+ exports.RadioButtonSingle = RadioButtonSingle;
30366
30734
  exports.ScannerQR = ScannerCamera;
30367
30735
  exports.SearchBox = SearchBox;
30368
30736
  exports.Swipeable = Swipeable;
30737
+ exports.Switch = Switch;
30369
30738
  exports.Text = Text;
30370
30739
  exports.TextInput = TextInput;
30371
30740
  exports.TouchableOpacity = TouchableOpacity;