jattac.libs.web.zest-file-upload 0.2.0

package/dist/index.cjs.js

@@ -0,0 +1,2299 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var md = require('react-icons/md');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".FileUpload-module_fileUploadContainer__Wy-Up {\n  display: flex;\n  flex-direction: column;\n  margin: 20px 0;\n}\n\n.FileUpload-module_label__nLqx4 {\n  margin-bottom: 8px;\n  font-size: 16px;\n  color: #333;\n}\n\n.FileUpload-module_fileInputContainer__MfXbf {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: 2px dashed;\n  border-color: var(--color-primary);\n  border-radius: 8px;\n  padding: 30px 30px;\n  background-color: #fff;\n  transition: background-color 0.25s ease, box-shadow 0.25s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.FileUpload-module_disabled__FtUd7 {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.FileUpload-module_fileInputContainer__MfXbf:hover {\n  background-color: #f7f7f7;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.FileUpload-module_fileInput__ns8S- {\n  display: none; /* Keep input hidden */\n}\n\n.FileUpload-module_fileName__h7Ij- {\n  flex: 1;\n  padding: 12px;\n  border: 1px solid transparent; /* Added to maintain focus effect */\n  color: #444;\n  font-size: 16px;\n  font-family: \"Arial\", sans-serif;\n  transition: border-color 0.2s ease;\n  text-align: center;\n}\n\n.FileUpload-module_visibleElements__JqQ1- {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  cursor: \"pointer\";\n  border-radius: 5px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n.FileUpload-module_visibleElements__JqQ1-:hover {\n  color: var(--color-primary);\n  font-weight: bold;\n}\n\n.FileUpload-module_fileName__h7Ij-:focus {\n  outline: none;\n  border-color: #2980b9; /* A sharper blue for focus */\n}\n\n.FileUpload-module_fileName__h7Ij-::placeholder {\n  color: #999; /* Subtle placeholder color */\n}\n\n/* Progress dialog styles */\n.FileUpload-module_progressDialog__agLef {\n  margin-top: 12px;\n  width: 100%;\n  background-color: #f7f7f7;\n  border-radius: 8px;\n  padding: 8px;\n}\n\n.FileUpload-module_progressBar__kePxX {\n  width: 100%;\n  background-color: #ddd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.FileUpload-module_progressFill__A00Zx {\n  height: 10px;\n  background-color: #2980b9; /* Blue color for progress fill */\n  transition: width 0.25s ease;\n}\n\n/* Status message styling */\n.FileUpload-module_statusMessage__LMpk4 {\n  margin-top: 12px;\n  font-size: 16px;\n  color: #2980b9;\n  font-weight: bold;\n  text-align: right;\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n/* Success animation for 'complete' status */\n.FileUpload-module_successAnimation__X-AGb {\n  animation: FileUpload-module_fadeIn__U5yc7 0.5s ease;\n}\n\n/* Keyframe for fade-in effect */\n@keyframes FileUpload-module_fadeIn__U5yc7 {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Keyframe for error shake effect */\n@keyframes FileUpload-module_shake__xDhrR {\n  0%, 100% { transform: translateX(0); }\n  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n  20%, 40%, 60%, 80% { transform: translateX(5px); }\n}\n\n/* Error animation */\n.FileUpload-module_errorAnimation__DSUBA {\n  animation: FileUpload-module_shake__xDhrR 0.5s ease;\n  color: #dc3545;\n}\n\n/* Style changes when dragging over the drop area */\n.FileUpload-module_fileInputContainer__MfXbf.FileUpload-module_dragOver__Saj5O {\n  background-color: #eaf2f8;\n  border-color: #2980b9;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================================================\n// MOBILE BUTTONS - Delightful UI with joyous colors & dopamine effects\n// ============================================================================ */\n\n/* Pulse animation for mobile - subtle attention grabber */\n@keyframes FileUpload-module_cameraPulse__RQDx7 {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);\n  }\n  50% {\n    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);\n  }\n}\n\n/* Mobile buttons container - vertical column - stretches to fill space */\n.FileUpload-module_mobileButtons__stjus {\n  display: none;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n  min-height: 120px;\n  flex: 1;\n  justify-content: center;\n}\n\n/* Individual mobile button - stretch to fill available space */\n.FileUpload-module_mobileButton__9LmQC {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  flex: 1;\n  padding: 16px 20px;\n  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);\n  color: white;\n  font-size: 16px;\n  font-weight: 600;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.FileUpload-module_mobileButton__9LmQC:hover:not(:disabled) {\n  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\n}\n\n.FileUpload-module_mobileButton__9LmQC:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n.FileUpload-module_mobileButton__9LmQC:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Show mobile buttons on mobile/tablet only, hide desktop text */\n@media (pointer: coarse), (max-width: 1024px) {\n  .FileUpload-module_mobileButtons__stjus {\n    display: flex;\n    animation: FileUpload-module_cameraPulse__RQDx7 2s ease-in-out infinite;\n  }\n  .FileUpload-module_visibleElements__JqQ1- {\n    display: none;\n  }\n}\n\n/* ============================================================================\n// PHASE 4: IN-APP CAMERA PREVIEW - Delightful UI with joyous colors\n// ============================================================================ */\n\n/* Camera Preview Container */\n.FileUpload-module_cameraPreview__y5Hpw {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 3 / 4;\n  max-height: 400px;\n  background: #000;\n  border-radius: 12px;\n  overflow: hidden;\n  margin-top: 12px;\n}\n\n/* Video Element */\n.FileUpload-module_cameraVideo__k8kfy {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Camera Controls Bar */\n.FileUpload-module_cameraControls__EAT-W {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n  padding: 0 16px;\n  z-index: 10;\n}\n\n.FileUpload-module_cameraControlBtn__vq5ab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  border: none;\n  border-radius: 50%;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.FileUpload-module_cameraControlBtn__vq5ab:hover {\n  background: rgba(0, 0, 0, 0.7);\n  transform: scale(1.1);\n}\n\n.FileUpload-module_cameraControlBtn__vq5ab:active {\n  transform: scale(0.95);\n}\n\n/* Capture Button */\n.FileUpload-module_captureBtn__7Y0Yi {\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 72px;\n  height: 72px;\n  background: transparent;\n  border: 4px solid white;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  z-index: 100;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.FileUpload-module_captureBtnInner__3fzVL {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.FileUpload-module_captureBtn__7Y0Yi:hover .FileUpload-module_captureBtnInner__3fzVL {\n  transform: scale(0.9);\n}\n\n.FileUpload-module_captureBtn__7Y0Yi:active .FileUpload-module_captureBtnInner__3fzVL {\n  transform: scale(0.8);\n  background: #8B5CF6;\n}\n\n/* Captured Preview */\n.FileUpload-module_capturedPreview__8sCVd {\n  width: 100%;\n  aspect-ratio: 3 / 4;\n  max-height: 400px;\n  border-radius: 12px;\n  overflow: hidden;\n  margin-top: 12px;\n  background: #000;\n}\n\n.FileUpload-module_capturedImage__0XlUC {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Captured Actions (Retake / Confirm) */\n.FileUpload-module_capturedActions__7zsfS {\n  position: absolute;\n  bottom: 24px;\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  gap: 24px;\n  padding: 0 16px;\n}\n\n.FileUpload-module_retakeBtn__ztglf,\n.FileUpload-module_confirmBtn__RJpS- {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.FileUpload-module_retakeBtn__ztglf {\n  background: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(8px);\n  color: white;\n}\n\n.FileUpload-module_retakeBtn__ztglf:hover {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.FileUpload-module_confirmBtn__RJpS- {\n  background: linear-gradient(135deg, #10B981 0%, #059669 100%);\n  color: white;\n}\n\n.FileUpload-module_confirmBtn__RJpS-:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n\n/* Camera Error */\n.FileUpload-module_cameraError__DwVo- {\n  margin-top: 8px;\n  padding: 12px;\n  background: #FEF2F2;\n  border: 1px solid #FECACA;\n  border-radius: 8px;\n  color: #DC2626;\n  font-size: 14px;\n  text-align: center;\n}\n\n/* Screen Flash Animation (capture moment) */\n@keyframes FileUpload-module_screenFlash__xu1rw {\n  0% { opacity: 0; }\n  50% { opacity: 1; background: white; }\n  100% { opacity: 0; }\n}\n\n.FileUpload-module_screenFlash__xu1rw {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: white;\n  animation: FileUpload-module_screenFlash__xu1rw 0.3s ease-out;\n  pointer-events: none;\n  z-index: 200;\n}\n\n.FileUpload-module_errorMessage__AXjcm {\n  margin-top: 8px;\n  padding: 12px;\n  border: 1px solid #dc3545;\n  background: #fff5f5;\n  border-radius: 8px;\n  color: #dc3545;\n  font-size: 14px;\n  text-align: center;\n}\n\n.FileUpload-module_retryBtn__4lm-y {\n  margin-left: 12px;\n  padding: 4px 14px;\n  background: #dc3545;\n  color: #fff;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 600;\n  transition: background 0.2s ease;\n}\n\n.FileUpload-module_retryBtn__4lm-y:hover {\n  background: #b02a37;\n}\n\n@keyframes FileUpload-module_loadingPulse__CS4Se {\n  0%, 100% { opacity: 0.6; transform: scale(1); }\n  50% { opacity: 1; transform: scale(1.05); }\n}\n\n.FileUpload-module_cameraLoading__T-SW4 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background: #1a1a2e;\n  color: #fff;\n  font-size: 48px;\n  animation: FileUpload-module_loadingPulse__CS4Se 1.5s ease-in-out infinite;\n}\n\n/* Crop container for react-easy-crop */\n.FileUpload-module_cropContainer__J3-11 {\n  position: relative;\n  width: 100%;\n  height: 400px;\n  margin-top: 12px;\n  border-radius: 12px;\n  overflow: hidden;\n  background: #000;\n}\n\n/* ============================================================================\n   MULTI-FILE QUEUE — Delightful parallel upload UX\n   ============================================================================ */\n\n@keyframes FileUpload-module_slideInRow__COE9n {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes FileUpload-module_popCheck__NQqID {\n  0%   { transform: scale(0.5); opacity: 0; }\n  70%  { transform: scale(1.15); }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n@keyframes FileUpload-module_progressShimmer__jOjnv {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(200%); }\n}\n\n@keyframes FileUpload-module_completePulse__IyePh {\n  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }\n  50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2); }\n}\n\n/* Drop zone — compact variant when queue already has entries */\n.FileUpload-module_multiDropZoneCompact__9CFq- {\n  padding: 14px 30px;\n  min-height: 56px;\n}\n\n/* File queue list */\n.FileUpload-module_fileList__NYlEu {\n  list-style: none;\n  margin: 12px 0 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n/* File row: grid layout — meta | badge | actions on row 1, progress on row 2 */\n.FileUpload-module_fileRow__1Fxul {\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  grid-template-rows: auto auto;\n  gap: 6px 12px;\n  align-items: center;\n  padding: 10px 14px;\n  border: 1px solid #e5e7eb;\n  border-left: 3px solid #9ca3af;\n  border-radius: 8px;\n  background: #fff;\n  animation: FileUpload-module_slideInRow__COE9n 0.25s ease both;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.FileUpload-module_fileRow_pending__pdNXE   { border-left-color: #9ca3af; }\n.FileUpload-module_fileRow_uploading__MuNwL { border-left-color: #2980b9; }\n.FileUpload-module_fileRow_complete__zkAqi  { border-left-color: #10b981; animation: FileUpload-module_completePulse__IyePh 0.6s ease; }\n.FileUpload-module_fileRow_error__ShiDk     { border-left-color: #dc3545; animation: FileUpload-module_shake__xDhrR 0.5s ease; }\n\n/* File name and size */\n.FileUpload-module_fileRowMeta__zufyo {\n  grid-column: 1;\n  grid-row: 1;\n  min-width: 0;\n}\n\n.FileUpload-module_fileRowFilename__4fIwi {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  color: #1f2937;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.FileUpload-module_fileRowSize__qTRVw {\n  display: block;\n  font-size: 12px;\n  color: #6b7280;\n  margin-top: 1px;\n}\n\n/* Status badge */\n.FileUpload-module_fileRowBadge__o6z-- {\n  grid-column: 2;\n  grid-row: 1;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 9px;\n  border-radius: 999px;\n  white-space: nowrap;\n}\n\n.FileUpload-module_badge_pending__xQGJ0   { background: #f3f4f6; color: #6b7280; }\n.FileUpload-module_badge_uploading__8WaRF { background: #dbeafe; color: #1d4ed8; }\n.FileUpload-module_badge_complete__9nfZB  { background: #d1fae5; color: #065f46; animation: FileUpload-module_popCheck__NQqID 0.4s ease; }\n.FileUpload-module_badge_error__2vDFn     { background: #fee2e2; color: #991b1b; }\n\n/* Per-file progress bar — spans full width below the row header */\n.FileUpload-module_fileRowProgress__nR0ef {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  height: 3px;\n  background: #e5e7eb;\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.FileUpload-module_fileRowProgressFill__WNeLC {\n  height: 100%;\n  background: #2980b9;\n  border-radius: 2px;\n  transition: width 0.25s ease;\n}\n\n.FileUpload-module_fileRowProgressIndeterminate__CThl- {\n  height: 100%;\n  width: 40%;\n  background: linear-gradient(90deg, transparent, #2980b9, transparent);\n  animation: FileUpload-module_progressShimmer__jOjnv 1.2s ease-in-out infinite;\n}\n\n/* Action buttons */\n.FileUpload-module_fileRowActions__5gWBm {\n  grid-column: 3;\n  grid-row: 1;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.FileUpload-module_removeFileBtn__M5al4 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n\n.FileUpload-module_removeFileBtn__M5al4:hover {\n  background: #fee2e2;\n  color: #dc3545;\n}\n\n.FileUpload-module_retryFileBtn__HOpA7 {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border: 1px solid #dc3545;\n  border-radius: 4px;\n  background: transparent;\n  color: #dc3545;\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n\n.FileUpload-module_retryFileBtn__HOpA7:hover {\n  background: #dc3545;\n  color: #fff;\n}\n\n/* Clear all button */\n.FileUpload-module_clearAllBtn__v3oMP {\n  margin-top: 8px;\n  align-self: flex-end;\n  padding: 5px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #6b7280;\n  background: transparent;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: border-color 0.15s ease, color 0.15s ease;\n}\n\n.FileUpload-module_clearAllBtn__v3oMP:hover {\n  border-color: #dc3545;\n  color: #dc3545;\n}\n";
+var styles = {"fileUploadContainer":"FileUpload-module_fileUploadContainer__Wy-Up","label":"FileUpload-module_label__nLqx4","fileInputContainer":"FileUpload-module_fileInputContainer__MfXbf","disabled":"FileUpload-module_disabled__FtUd7","fileInput":"FileUpload-module_fileInput__ns8S-","fileName":"FileUpload-module_fileName__h7Ij-","visibleElements":"FileUpload-module_visibleElements__JqQ1-","progressDialog":"FileUpload-module_progressDialog__agLef","progressBar":"FileUpload-module_progressBar__kePxX","progressFill":"FileUpload-module_progressFill__A00Zx","statusMessage":"FileUpload-module_statusMessage__LMpk4","successAnimation":"FileUpload-module_successAnimation__X-AGb","fadeIn":"FileUpload-module_fadeIn__U5yc7","errorAnimation":"FileUpload-module_errorAnimation__DSUBA","shake":"FileUpload-module_shake__xDhrR","dragOver":"FileUpload-module_dragOver__Saj5O","mobileButtons":"FileUpload-module_mobileButtons__stjus","mobileButton":"FileUpload-module_mobileButton__9LmQC","cameraPulse":"FileUpload-module_cameraPulse__RQDx7","cameraPreview":"FileUpload-module_cameraPreview__y5Hpw","cameraVideo":"FileUpload-module_cameraVideo__k8kfy","cameraControls":"FileUpload-module_cameraControls__EAT-W","cameraControlBtn":"FileUpload-module_cameraControlBtn__vq5ab","captureBtn":"FileUpload-module_captureBtn__7Y0Yi","captureBtnInner":"FileUpload-module_captureBtnInner__3fzVL","capturedPreview":"FileUpload-module_capturedPreview__8sCVd","capturedImage":"FileUpload-module_capturedImage__0XlUC","capturedActions":"FileUpload-module_capturedActions__7zsfS","retakeBtn":"FileUpload-module_retakeBtn__ztglf","confirmBtn":"FileUpload-module_confirmBtn__RJpS-","cameraError":"FileUpload-module_cameraError__DwVo-","screenFlash":"FileUpload-module_screenFlash__xu1rw","errorMessage":"FileUpload-module_errorMessage__AXjcm","retryBtn":"FileUpload-module_retryBtn__4lm-y","cameraLoading":"FileUpload-module_cameraLoading__T-SW4","loadingPulse":"FileUpload-module_loadingPulse__CS4Se","cropContainer":"FileUpload-module_cropContainer__J3-11","multiDropZoneCompact":"FileUpload-module_multiDropZoneCompact__9CFq-","fileList":"FileUpload-module_fileList__NYlEu","fileRow":"FileUpload-module_fileRow__1Fxul","slideInRow":"FileUpload-module_slideInRow__COE9n","fileRow_pending":"FileUpload-module_fileRow_pending__pdNXE","fileRow_uploading":"FileUpload-module_fileRow_uploading__MuNwL","fileRow_complete":"FileUpload-module_fileRow_complete__zkAqi","completePulse":"FileUpload-module_completePulse__IyePh","fileRow_error":"FileUpload-module_fileRow_error__ShiDk","fileRowMeta":"FileUpload-module_fileRowMeta__zufyo","fileRowFilename":"FileUpload-module_fileRowFilename__4fIwi","fileRowSize":"FileUpload-module_fileRowSize__qTRVw","fileRowBadge":"FileUpload-module_fileRowBadge__o6z--","badge_pending":"FileUpload-module_badge_pending__xQGJ0","badge_uploading":"FileUpload-module_badge_uploading__8WaRF","badge_complete":"FileUpload-module_badge_complete__9nfZB","popCheck":"FileUpload-module_popCheck__NQqID","badge_error":"FileUpload-module_badge_error__2vDFn","fileRowProgress":"FileUpload-module_fileRowProgress__nR0ef","fileRowProgressFill":"FileUpload-module_fileRowProgressFill__WNeLC","fileRowProgressIndeterminate":"FileUpload-module_fileRowProgressIndeterminate__CThl-","progressShimmer":"FileUpload-module_progressShimmer__jOjnv","fileRowActions":"FileUpload-module_fileRowActions__5gWBm","removeFileBtn":"FileUpload-module_removeFileBtn__M5al4","retryFileBtn":"FileUpload-module_retryFileBtn__HOpA7","clearAllBtn":"FileUpload-module_clearAllBtn__v3oMP"};
+styleInject(css_248z$1);
+
+function useBrowser() {
+    const [isBrowser, setIsBrowser] = React.useState(false);
+    React.useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    return { isBrowser };
+}
+
+const isValidFileType = (file, accept) => {
+    if (!accept)
+        return true;
+    const acceptedTypes = accept
+        .split(",")
+        .map((type) => type.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const mimeType = file.type.toLowerCase();
+    return acceptedTypes.some((type) => {
+        if (type.startsWith(".")) {
+            return fileName.endsWith(type);
+        }
+        else if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return mimeType.startsWith(baseType + "/");
+        }
+        else {
+            return mimeType === type;
+        }
+    });
+};
+const useFileValidation = (accept, maxSize) => {
+    const validate = React.useCallback((file) => {
+        if (!isValidFileType(file, accept)) {
+            return { isValid: false, error: "Invalid file type" };
+        }
+        if (maxSize !== undefined && file.size > maxSize) {
+            const sizeMB = Math.ceil(maxSize / (1024 * 1024));
+            return {
+                isValid: false,
+                error: `File exceeds maximum size of ${sizeMB} MB`,
+            };
+        }
+        return { isValid: true, error: null };
+    }, [accept, maxSize]);
+    return { validate };
+};
+
+const compressImage = async (file, options = {
+    maxWidth: 1920,
+    maxHeight: 1920,
+    quality: 0.85,
+    mimeType: "image/jpeg",
+}) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+            reject(new Error("Could not get canvas context"));
+            return;
+        }
+        img.onload = () => {
+            let { width, height } = img;
+            if (width > options.maxWidth || height > options.maxHeight) {
+                const ratio = Math.min(options.maxWidth / width, options.maxHeight / height);
+                width = Math.round(width * ratio);
+                height = Math.round(height * ratio);
+            }
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            canvas.toBlob((blob) => {
+                URL.revokeObjectURL(img.src);
+                if (blob) {
+                    const compressedFile = new File([blob], file.name, {
+                        type: options.mimeType,
+                        lastModified: Date.now(),
+                    });
+                    resolve(compressedFile);
+                }
+                else {
+                    reject(new Error("Compression failed - could not create blob"));
+                }
+            }, options.mimeType, options.quality);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(img.src);
+            reject(new Error("Could not load image"));
+        };
+        img.src = URL.createObjectURL(file);
+    });
+};
+function useCamera({ capture, onFileSelect, setStatus, onError, labels, }) {
+    const { isBrowser } = useBrowser();
+    const [cameraView, setCameraView] = React.useState("none");
+    const [stream, setStream] = React.useState(null);
+    const [facingMode, setFacingMode] = React.useState(capture || "environment");
+    const [flashEnabled, setFlashEnabled] = React.useState(false);
+    const [capturedImage, setCapturedImage] = React.useState(null);
+    const [cameraError, setCameraError] = React.useState(null);
+    const [videoReady, setVideoReady] = React.useState(false);
+    const [cameraLoading, setCameraLoading] = React.useState(false);
+    const [cropCompleteArea, setCropCompleteArea] = React.useState(null);
+    const videoRef = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const cameraInputRef = React.useRef(null);
+    const capturedBlobRef = React.useRef(null);
+    const isCameraSupported = React.useCallback(() => {
+        if (!isBrowser)
+            return false;
+        return !!navigator.mediaDevices && !!navigator.mediaDevices.getUserMedia;
+    }, [isBrowser]);
+    const stopCamera = React.useCallback(() => {
+        if (stream) {
+            stream.getTracks().forEach((track) => track.stop());
+            setStream(null);
+        }
+        setVideoReady(false);
+    }, [stream]);
+    React.useEffect(() => {
+        return () => {
+            if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        };
+    }, [stream]);
+    React.useEffect(() => {
+        if (videoRef.current && stream) {
+            videoRef.current.srcObject = stream;
+            setVideoReady(false);
+            const video = videoRef.current;
+            const onLoadedMetadata = () => {
+                setVideoReady(true);
+                setCameraView("preview");
+            };
+            video.addEventListener("loadedmetadata", onLoadedMetadata);
+            return () => {
+                video.removeEventListener("loadedmetadata", onLoadedMetadata);
+            };
+        }
+    }, [stream]);
+    const handleCameraClick = async (e) => {
+        e.stopPropagation();
+        if (!isCameraSupported()) {
+            cameraInputRef.current?.click();
+            return;
+        }
+        try {
+            setCameraError(null);
+            setCameraView("loading");
+            setCameraLoading(true);
+            const mediaStream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    facingMode: facingMode,
+                    width: { ideal: 1920 },
+                    height: { ideal: 1920 },
+                },
+            });
+            setStream(mediaStream);
+            setCameraLoading(false);
+        }
+        catch (err) {
+            console.error("Camera error:", err);
+            setCameraError(labels.cameraError);
+            setCameraLoading(false);
+            cameraInputRef.current?.click();
+        }
+    };
+    const cancelCamera = () => {
+        stopCamera();
+        setCameraView("none");
+        setCapturedImage(null);
+        setCameraLoading(false);
+    };
+    const toggleCamera = async () => {
+        const newFacingMode = facingMode === "environment" ? "user" : "environment";
+        setFacingMode(newFacingMode);
+        if (stream) {
+            stopCamera();
+            try {
+                const mediaStream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: newFacingMode },
+                });
+                setStream(mediaStream);
+            }
+            catch (err) {
+                setCameraError("Could not switch camera");
+                setCameraView("none");
+            }
+        }
+    };
+    const toggleFlash = async () => {
+        if (stream) {
+            const videoTrack = stream.getVideoTracks()[0];
+            if (videoTrack && "getCapabilities" in videoTrack) {
+                const capabilities = videoTrack.getCapabilities();
+                if (capabilities && "torch" in capabilities) {
+                    try {
+                        await videoTrack.applyConstraints({
+                            advanced: [
+                                { torch: !flashEnabled },
+                            ],
+                        });
+                        setFlashEnabled(!flashEnabled);
+                    }
+                    catch (err) {
+                        console.error("Torch toggle failed:", err);
+                    }
+                }
+            }
+        }
+    };
+    const capturePhoto = () => {
+        if (!videoRef.current || !canvasRef.current)
+            return;
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+        const width = video.videoWidth || 1920;
+        const height = video.videoHeight || 1080;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        if (facingMode === "user") {
+            ctx.translate(canvas.width, 0);
+            ctx.scale(-1, 1);
+        }
+        ctx.drawImage(video, 0, 0);
+        const imageData = canvas.toDataURL("image/jpeg", 0.9);
+        setCapturedImage(imageData);
+        canvas.toBlob((blob) => {
+            capturedBlobRef.current = blob;
+        }, "image/jpeg", 0.9);
+        setCameraView("captured");
+        stopCamera();
+    };
+    const retakePhoto = async () => {
+        setCapturedImage(null);
+        capturedBlobRef.current = null;
+        setVideoReady(false);
+        setCameraLoading(true);
+        try {
+            const mediaStream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode },
+            });
+            setStream(mediaStream);
+            setCameraLoading(false);
+        }
+        catch (err) {
+            setCameraError("Could not restart camera");
+            setCameraLoading(false);
+        }
+    };
+    const confirmPhoto = () => {
+        if (!capturedImage)
+            return;
+        setCameraView("crop");
+    };
+    const cancelCrop = () => {
+        setCameraView("captured");
+        setCropCompleteArea(null);
+    };
+    const applyCrop = async () => {
+        if (!capturedImage || !cropCompleteArea)
+            return;
+        try {
+            const img = await new Promise((resolve, reject) => {
+                const image = new Image();
+                image.onload = () => resolve(image);
+                image.onerror = () => reject(new Error("Could not load image for crop"));
+                image.src = capturedImage;
+            });
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                throw new Error("Could not get canvas context");
+            const { x, y, width, height } = cropCompleteArea;
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((b) => {
+                    if (b)
+                        resolve(b);
+                    else
+                        reject(new Error("Could not create cropped blob"));
+                }, "image/jpeg", 0.9);
+            });
+            const file = new File([blob], `photo_${Date.now()}.jpg`, {
+                type: "image/jpeg",
+            });
+            const compressedFile = await compressImage(file, {
+                maxWidth: 1920,
+                maxHeight: 1920,
+                quality: 0.85,
+                mimeType: "image/jpeg",
+            });
+            setCameraView("none");
+            setCapturedImage(null);
+            capturedBlobRef.current = null;
+            setCropCompleteArea(null);
+            setStatus("uploading");
+            await onFileSelect(compressedFile);
+            setStatus("complete");
+        }
+        catch (err) {
+            console.error("Crop processing error:", err);
+            setStatus("error");
+        }
+    };
+    const videoTrack = stream?.getVideoTracks()[0];
+    const torchSupported = videoTrack
+        ? !!videoTrack.getCapabilities?.()?.torch
+        : false;
+    return {
+        stream,
+        cameraView,
+        facingMode,
+        flashEnabled,
+        capturedImage,
+        cameraError,
+        videoReady,
+        cameraLoading,
+        videoRef,
+        canvasRef,
+        cameraInputRef,
+        torchSupported,
+        cropCompleteArea,
+        handleCameraClick,
+        cancelCamera,
+        toggleCamera,
+        toggleFlash,
+        capturePhoto,
+        retakePhoto,
+        confirmPhoto,
+        cancelCrop,
+        applyCrop,
+        setCropCompleteArea,
+    };
+}
+
+class FileUploadErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("FileUploadErrorBoundary caught an error:", error, errorInfo);
+    }
+    handleRetry = () => {
+        this.setState({ hasError: false });
+    };
+    render() {
+        if (this.state.hasError) {
+            return (jsxRuntime.jsxs("div", { style: { padding: "1rem", textAlign: "center" }, children: [jsxRuntime.jsx("p", { children: this.props.fallbackMessage || "Something went wrong" }), jsxRuntime.jsx("button", { type: "button", onClick: this.handleRetry, children: "Try Again" })] }));
+        }
+        return this.props.children;
+    }
+}
+
+const CameraCapture$2 = React.lazy(() => Promise.resolve().then(function () { return CameraCapture$1; }));
+const DEFAULT_LABELS = {
+    browseFiles: "Browse Files",
+    takePhoto: "Take Photo",
+    uploadComplete: "Upload complete!",
+    uploadFailed: "Upload failed. Please try again.",
+    uploading: "Uploading...",
+    noFileSelected: "No file selected. Click or drag file here to upload",
+    invalidFileType: "Invalid file type",
+    cameraError: "Could not access camera. Please check permissions.",
+    retake: "Retake",
+    usePhoto: "Use Photo",
+    cancel: "Cancel",
+    switchCamera: "Switch Camera",
+    toggleFlash: "Toggle Flash",
+    cropTitle: "Crop Image",
+    cropSave: "Save",
+    cropCancel: "Back",
+};
+const DEFAULT_MULTI_LABELS = {
+    addMoreFiles: "Add more files",
+    removeFile: "Remove",
+    filesQueued: "files queued",
+    clearAll: "Clear all",
+    pending: "Pending",
+    retryFile: "Retry",
+};
+const DEFAULT_ICONS = {
+    camera: jsxRuntime.jsx(md.MdCameraAlt, {}),
+    browse: jsxRuntime.jsx(md.MdOutlineFileUpload, {}),
+    close: jsxRuntime.jsx(md.MdClose, {}),
+    flashOn: jsxRuntime.jsx(md.MdFlashOn, {}),
+    flashOff: jsxRuntime.jsx(md.MdFlashOff, {}),
+    switchCamera: jsxRuntime.jsx(md.MdCameraswitch, {}),
+    retake: jsxRuntime.jsx(md.MdRefresh, {}),
+    confirm: jsxRuntime.jsx(md.MdCheck, {}),
+};
+function generateFileId() {
+    return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+const FileUpload = React.forwardRef(({ disabled, label, onFileSelect, progressPercentage = 0, accept, capture, hideCompletionMessage, onError, maxFileSize, labels: labelsProp, successTimeout = 5000, errorBoundary, icons: iconsProp, multiple = false, onFilesSelect, filesProgress, maxFiles, multiLabels: multiLabelsProp, }, ref) => {
+    const labels = { ...DEFAULT_LABELS, ...labelsProp };
+    const multiLabels = { ...DEFAULT_MULTI_LABELS, ...multiLabelsProp };
+    const icons = { ...DEFAULT_ICONS, ...iconsProp };
+    // Single-mode state (unchanged)
+    const [selectedFile, setSelectedFile] = React.useState(null);
+    const [status, setStatus] = React.useState("idle");
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const { isBrowser } = useBrowser();
+    const [internalError, setInternalError] = React.useState(null);
+    const fileInputRef = React.useRef(null);
+    const successTimeoutRef = React.useRef(null);
+    const { validate } = useFileValidation(accept || "", maxFileSize);
+    // Multi-mode state (declared unconditionally — Rules of Hooks)
+    const [fileQueue, setFileQueue] = React.useState([]);
+    const [multiDragOver, setMultiDragOver] = React.useState(false);
+    // Queue mutators — all use functional update form, safe for concurrent calls
+    function markEntry(id, status, error) {
+        setFileQueue((prev) => prev.map((e) => e.id === id ? { ...e, status, error: e.error } : e));
+    }
+    function removeFromQueue(id) {
+        setFileQueue((prev) => prev.filter((e) => e.id !== id));
+    }
+    async function triggerUpload(entries) {
+        if (onFilesSelect) {
+            entries.forEach((e) => markEntry(e.id, "uploading"));
+            try {
+                await onFilesSelect(entries.map((e) => e.file));
+                entries.forEach((e) => markEntry(e.id, "complete"));
+            }
+            catch {
+                entries.forEach((e) => markEntry(e.id, "error"));
+            }
+        }
+        else {
+            await Promise.allSettled(entries.map(async (entry) => {
+                markEntry(entry.id, "uploading");
+                try {
+                    await onFileSelect(entry.file);
+                    markEntry(entry.id, "complete");
+                }
+                catch {
+                    markEntry(entry.id, "error");
+                }
+            }));
+        }
+    }
+    function addFilesToQueue(rawFiles) {
+        const remaining = maxFiles != null ? maxFiles - fileQueue.length : Infinity;
+        const capped = rawFiles.slice(0, remaining);
+        const entries = capped.map((file) => {
+            const { isValid, error } = validate(file);
+            return {
+                id: generateFileId(),
+                file,
+                status: isValid ? "pending" : "error",
+                error: isValid ? null : (error || labels.invalidFileType),
+            };
+        });
+        setFileQueue((prev) => [...prev, ...entries]);
+        const validEntries = entries.filter((e) => e.status === "pending");
+        if (validEntries.length > 0)
+            triggerUpload(validEntries);
+    }
+    function retryEntry(id) {
+        const entry = fileQueue.find((e) => e.id === id);
+        if (!entry)
+            return;
+        markEntry(id, "pending");
+        triggerUpload([{ ...entry, status: "pending" }]);
+    }
+    const camera = useCamera({
+        capture,
+        onFileSelect: multiple
+            ? async (file) => { if (file)
+                addFilesToQueue([file]); }
+            : async (file) => {
+                setSelectedFile(file);
+                await onFileSelect(file);
+            },
+        setStatus,
+        onError,
+        labels,
+    });
+    const handleFileChange = async (event) => {
+        if (multiple) {
+            const files = Array.from(event.target.files ?? []);
+            event.target.value = "";
+            addFilesToQueue(files);
+            return;
+        }
+        const file = event.target.files ? event.target.files[0] : null;
+        if (file) {
+            const { isValid, error } = validate(file);
+            if (!isValid) {
+                const msg = error || labels.invalidFileType;
+                setInternalError(msg);
+                onError?.(msg);
+                return;
+            }
+        }
+        setInternalError(null);
+        setSelectedFile(file);
+        setStatus("uploading");
+        try {
+            await onFileSelect(file);
+            setStatus("complete");
+        }
+        catch {
+            setStatus("error");
+        }
+    };
+    const clearFile = () => {
+        setSelectedFile(null);
+        onFileSelect(null).catch(() => { });
+        setStatus("idle");
+    };
+    const handleRetry = () => {
+        setSelectedFile(null);
+        setStatus("idle");
+        setInternalError(null);
+    };
+    React.useImperativeHandle(ref, () => ({
+        clearFile,
+        clearAll: () => { if (multiple)
+            setFileQueue([]); },
+    }));
+    const handleContainerClick = () => {
+        if (!isBrowser)
+            return;
+        fileInputRef.current?.click();
+    };
+    const handleBrowseClick = (e) => {
+        if (!isBrowser)
+            return;
+        e.stopPropagation();
+        fileInputRef.current?.click();
+    };
+    React.useEffect(() => {
+        if (status === "complete" && successTimeout > 0) {
+            successTimeoutRef.current = setTimeout(() => {
+                setStatus("idle");
+            }, successTimeout);
+        }
+        return () => {
+            if (successTimeoutRef.current) {
+                clearTimeout(successTimeoutRef.current);
+                successTimeoutRef.current = null;
+            }
+        };
+    }, [status, successTimeout]);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+        setIsDragOver(false);
+    };
+    const handleDrop = async (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+        if (multiple) {
+            const files = Array.from(event.dataTransfer.files);
+            setMultiDragOver(false);
+            addFilesToQueue(files);
+            return;
+        }
+        const file = event.dataTransfer.files
+            ? event.dataTransfer.files[0]
+            : null;
+        if (file) {
+            const { isValid, error } = validate(file);
+            if (!isValid) {
+                const msg = error || labels.invalidFileType;
+                setInternalError(msg);
+                onError?.(msg);
+                return;
+            }
+        }
+        setInternalError(null);
+        setSelectedFile(file);
+        setStatus("uploading");
+        try {
+            await onFileSelect(file);
+            setStatus("complete");
+        }
+        catch {
+            setStatus("error");
+        }
+    };
+    const getStatusMessage = () => {
+        switch (status) {
+            case "idle":
+                return "";
+            case "uploading":
+                return labels.uploading;
+            case "complete":
+                return hideCompletionMessage === true ? "" : labels.uploadComplete;
+            case "error":
+                return labels.uploadFailed;
+            default:
+                return "";
+        }
+    };
+    const cameraOverlay = isBrowser && camera.cameraView !== "none" && (jsxRuntime.jsx(React.Suspense, { fallback: null, children: jsxRuntime.jsx(CameraCapture$2, { cameraView: camera.cameraView, facingMode: camera.facingMode, flashEnabled: camera.flashEnabled, capturedImage: camera.capturedImage, cameraError: camera.cameraError, cameraLoading: camera.cameraLoading, videoRef: camera.videoRef, canvasRef: camera.canvasRef, torchSupported: camera.torchSupported, labels: labels, icons: {
+                close: icons.close,
+                flashOn: icons.flashOn,
+                flashOff: icons.flashOff,
+                switchCamera: icons.switchCamera,
+                retake: icons.retake,
+                confirm: icons.confirm,
+            }, onCancel: camera.cancelCamera, onToggleCamera: camera.toggleCamera, onToggleFlash: camera.toggleFlash, onCapture: camera.capturePhoto, onRetake: camera.retakePhoto, onConfirm: camera.confirmPhoto, onCropCancel: camera.cancelCrop, onApplyCrop: camera.applyCrop, onCropComplete: camera.setCropCompleteArea }) }));
+    const renderSingleMode = () => (jsxRuntime.jsxs("div", { className: `${disabled ? styles.disabled : ""} ${styles.fileUploadContainer}`, children: [jsxRuntime.jsx("label", { className: styles.label, children: label }), jsxRuntime.jsxs("div", { className: `${styles.fileInputContainer} ${isDragOver ? styles.dragOver : ""}`, onClick: handleContainerClick, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleContainerClick();
+                    }
+                }, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, tabIndex: 0, role: "button", children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", className: styles.fileInput, onChange: handleFileChange, style: { cursor: "pointer" }, accept: accept }), jsxRuntime.jsx("input", { ref: camera.cameraInputRef, type: "file", accept: "image/*", capture: capture, style: { display: "none" }, onChange: handleFileChange }), jsxRuntime.jsxs("div", { className: styles.mobileButtons, children: [jsxRuntime.jsxs("button", { type: "button", className: styles.mobileButton, onClick: camera.handleCameraClick, disabled: disabled, children: [icons.camera, jsxRuntime.jsx("span", { children: labels.takePhoto })] }), jsxRuntime.jsxs("button", { type: "button", className: styles.mobileButton, onClick: handleBrowseClick, disabled: disabled, children: [icons.browse, jsxRuntime.jsx("span", { children: labels.browseFiles })] })] }), jsxRuntime.jsxs("div", { className: styles.visibleElements, children: [jsxRuntime.jsx(md.MdOutlineFileUpload, {}), jsxRuntime.jsx("div", { children: selectedFile
+                                    ? selectedFile.name
+                                    : labels.noFileSelected })] })] }), status === "uploading" && (jsxRuntime.jsxs("div", { className: styles.progressDialog, role: "status", children: [jsxRuntime.jsx("div", { className: styles.progressBar, children: jsxRuntime.jsx("div", { className: styles.progressFill, style: { width: `${progressPercentage}%` } }) }), jsxRuntime.jsx("span", { children: `${labels.uploading} ${progressPercentage.toFixed(2)}%` })] })), status !== "idle" && status !== "uploading" && (jsxRuntime.jsxs("div", { className: `${styles.statusMessage} ${status === "complete"
+                    ? styles.successAnimation
+                    : status === "error"
+                        ? styles.errorAnimation
+                        : ""}`, "aria-live": "polite", children: [getStatusMessage(), status === "error" && (jsxRuntime.jsx("button", { type: "button", className: styles.retryBtn, onClick: handleRetry, "aria-label": "Retry upload", children: "Retry" }))] })), cameraOverlay, internalError && (jsxRuntime.jsx("div", { className: styles.errorMessage, role: "alert", children: internalError }))] }));
+    const statusLabels = {
+        pending: multiLabels.pending,
+        uploading: labels.uploading,
+        complete: labels.uploadComplete,
+    };
+    const renderMultiMode = () => (jsxRuntime.jsxs("div", { className: `${disabled ? styles.disabled : ""} ${styles.fileUploadContainer}`, children: [jsxRuntime.jsx("label", { className: styles.label, children: label }), jsxRuntime.jsxs("div", { className: `${styles.fileInputContainer} ${multiDragOver ? styles.dragOver : ""} ${fileQueue.length > 0 ? styles.multiDropZoneCompact : ""}`, onClick: handleContainerClick, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleContainerClick();
+                    }
+                }, onDragOver: (e) => { e.preventDefault(); setMultiDragOver(true); }, onDragLeave: () => setMultiDragOver(false), onDrop: handleDrop, tabIndex: 0, role: "button", children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: styles.fileInput, onChange: handleFileChange, style: { cursor: "pointer" }, accept: accept }), jsxRuntime.jsx("input", { ref: camera.cameraInputRef, type: "file", accept: "image/*", capture: capture, style: { display: "none" }, onChange: handleFileChange }), jsxRuntime.jsxs("div", { className: styles.mobileButtons, children: [jsxRuntime.jsxs("button", { type: "button", className: styles.mobileButton, onClick: camera.handleCameraClick, disabled: disabled, children: [icons.camera, jsxRuntime.jsx("span", { children: labels.takePhoto })] }), jsxRuntime.jsxs("button", { type: "button", className: styles.mobileButton, onClick: handleBrowseClick, disabled: disabled, children: [icons.browse, jsxRuntime.jsx("span", { children: labels.browseFiles })] })] }), jsxRuntime.jsxs("div", { className: styles.visibleElements, children: [jsxRuntime.jsx(md.MdOutlineFileUpload, {}), jsxRuntime.jsx("div", { children: fileQueue.length > 0
+                                    ? `${fileQueue.length} ${multiLabels.filesQueued} — drop more or browse`
+                                    : labels.noFileSelected })] })] }), fileQueue.length > 0 && (jsxRuntime.jsx("ul", { className: styles.fileList, "aria-label": "Queued files", children: fileQueue.map((entry, i) => (jsxRuntime.jsxs("li", { className: `${styles.fileRow} ${styles[`fileRow_${entry.status}`]}`, style: { animationDelay: `${i * 40}ms` }, children: [jsxRuntime.jsxs("div", { className: styles.fileRowMeta, children: [jsxRuntime.jsx("span", { className: styles.fileRowFilename, children: entry.file.name }), jsxRuntime.jsx("span", { className: styles.fileRowSize, children: formatBytes(entry.file.size) })] }), jsxRuntime.jsx("span", { className: `${styles.fileRowBadge} ${styles[`badge_${entry.status}`]}`, children: entry.status === "error"
+                                ? (entry.error ?? labels.uploadFailed)
+                                : statusLabels[entry.status] }), entry.status === "uploading" && (jsxRuntime.jsx("div", { className: styles.fileRowProgress, children: filesProgress?.[entry.id] != null
+                                ? (jsxRuntime.jsx("div", { className: styles.fileRowProgressFill, style: { width: `${filesProgress[entry.id]}%` } }))
+                                : jsxRuntime.jsx("div", { className: styles.fileRowProgressIndeterminate }) })), jsxRuntime.jsxs("div", { className: styles.fileRowActions, children: [entry.status === "error" && (jsxRuntime.jsx("button", { type: "button", className: styles.retryFileBtn, onClick: () => retryEntry(entry.id), children: multiLabels.retryFile })), entry.status !== "uploading" && (jsxRuntime.jsx("button", { type: "button", className: styles.removeFileBtn, onClick: () => removeFromQueue(entry.id), "aria-label": `${multiLabels.removeFile} ${entry.file.name}`, children: icons.close }))] })] }, entry.id))) })), fileQueue.length > 0 && (jsxRuntime.jsx("button", { type: "button", className: styles.clearAllBtn, onClick: () => setFileQueue([]), children: multiLabels.clearAll })), cameraOverlay, internalError && (jsxRuntime.jsx("div", { className: styles.errorMessage, role: "alert", children: internalError }))] }));
+    const content = multiple ? renderMultiMode() : renderSingleMode();
+    if (errorBoundary) {
+        return jsxRuntime.jsx(FileUploadErrorBoundary, { children: content });
+    }
+    return content;
+});
+FileUpload.displayName = "FileUpload";
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule UserAgent_DEPRECATED
+ */
+
+/**
+ *  Provides entirely client-side User Agent and OS detection. You should prefer
+ *  the non-deprecated UserAgent module when possible, which exposes our
+ *  authoritative server-side PHP-based detection to the client.
+ *
+ *  Usage is straightforward:
+ *
+ *    if (UserAgent_DEPRECATED.ie()) {
+ *      //  IE
+ *    }
+ *
+ *  You can also do version checks:
+ *
+ *    if (UserAgent_DEPRECATED.ie() >= 7) {
+ *      //  IE7 or better
+ *    }
+ *
+ *  The browser functions will return NaN if the browser does not match, so
+ *  you can also do version compares the other way:
+ *
+ *    if (UserAgent_DEPRECATED.ie() < 7) {
+ *      //  IE6 or worse
+ *    }
+ *
+ *  Note that the version is a float and may include a minor version number,
+ *  so you should always use range operators to perform comparisons, not
+ *  strict equality.
+ *
+ *  **Note:** You should **strongly** prefer capability detection to browser
+ *  version detection where it's reasonable:
+ *
+ *    http://www.quirksmode.org/js/support.html
+ *
+ *  Further, we have a large number of mature wrapper functions and classes
+ *  which abstract away many browser irregularities. Check the documentation,
+ *  grep for things, or ask on javascript@lists.facebook.com before writing yet
+ *  another copy of "event || window.event".
+ *
+ */
+
+var _populated = false;
+
+// Browsers
+var _ie, _firefox, _opera, _webkit, _chrome;
+
+// Actual IE browser for compatibility mode
+var _ie_real_version;
+
+// Platforms
+var _osx, _windows, _linux, _android;
+
+// Architectures
+var _win64;
+
+// Devices
+var _iphone, _ipad, _native;
+
+var _mobile;
+
+function _populate() {
+  if (_populated) {
+    return;
+  }
+
+  _populated = true;
+
+  // To work around buggy JS libraries that can't handle multi-digit
+  // version numbers, Opera 10's user agent string claims it's Opera
+  // 9, then later includes a Version/X.Y field:
+  //
+  // Opera/9.80 (foo) Presto/2.2.15 Version/10.10
+  var uas = navigator.userAgent;
+  var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
+  var os    = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
+
+  _iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
+  _ipad = /\b(iP[ao]d)/.exec(uas);
+  _android = /Android/i.exec(uas);
+  _native = /FBAN\/\w+;/i.exec(uas);
+  _mobile = /Mobile/i.exec(uas);
+
+  // Note that the IE team blog would have you believe you should be checking
+  // for 'Win64; x64'.  But MSDN then reveals that you can actually be coming
+  // from either x64 or ia64;  so ultimately, you should just check for Win64
+  // as in indicator of whether you're in 64-bit IE.  32-bit IE on 64-bit
+  // Windows will send 'WOW64' instead.
+  _win64 = !!(/Win64/.exec(uas));
+
+  if (agent) {
+    _ie = agent[1] ? parseFloat(agent[1]) : (
+          agent[5] ? parseFloat(agent[5]) : NaN);
+    // IE compatibility mode
+    if (_ie && document && document.documentMode) {
+      _ie = document.documentMode;
+    }
+    // grab the "true" ie version from the trident token if available
+    var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
+    _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
+
+    _firefox = agent[2] ? parseFloat(agent[2]) : NaN;
+    _opera   = agent[3] ? parseFloat(agent[3]) : NaN;
+    _webkit  = agent[4] ? parseFloat(agent[4]) : NaN;
+    if (_webkit) {
+      // We do not add the regexp to the above test, because it will always
+      // match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
+      // the userAgent string.
+      agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
+      _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
+    } else {
+      _chrome = NaN;
+    }
+  } else {
+    _ie = _firefox = _opera = _chrome = _webkit = NaN;
+  }
+
+  if (os) {
+    if (os[1]) {
+      // Detect OS X version.  If no version number matches, set _osx to true.
+      // Version examples:  10, 10_6_1, 10.7
+      // Parses version number as a float, taking only first two sets of
+      // digits.  If only one set of digits is found, returns just the major
+      // version number.
+      var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
+
+      _osx = ver ? parseFloat(ver[1].replace('_', '.')) : true;
+    } else {
+      _osx = false;
+    }
+    _windows = !!os[2];
+    _linux   = !!os[3];
+  } else {
+    _osx = _windows = _linux = false;
+  }
+}
+
+var UserAgent_DEPRECATED$1 = {
+
+  /**
+   *  Check if the UA is Internet Explorer.
+   *
+   *
+   *  @return float|NaN Version number (if match) or NaN.
+   */
+  ie: function() {
+    return _populate() || _ie;
+  },
+
+  /**
+   * Check if we're in Internet Explorer compatibility mode.
+   *
+   * @return bool true if in compatibility mode, false if
+   * not compatibility mode or not ie
+   */
+  ieCompatibilityMode: function() {
+    return _populate() || (_ie_real_version > _ie);
+  },
+
+
+  /**
+   * Whether the browser is 64-bit IE.  Really, this is kind of weak sauce;  we
+   * only need this because Skype can't handle 64-bit IE yet.  We need to remove
+   * this when we don't need it -- tracked by #601957.
+   */
+  ie64: function() {
+    return UserAgent_DEPRECATED$1.ie() && _win64;
+  },
+
+  /**
+   *  Check if the UA is Firefox.
+   *
+   *
+   *  @return float|NaN Version number (if match) or NaN.
+   */
+  firefox: function() {
+    return _populate() || _firefox;
+  },
+
+
+  /**
+   *  Check if the UA is Opera.
+   *
+   *
+   *  @return float|NaN Version number (if match) or NaN.
+   */
+  opera: function() {
+    return _populate() || _opera;
+  },
+
+
+  /**
+   *  Check if the UA is WebKit.
+   *
+   *
+   *  @return float|NaN Version number (if match) or NaN.
+   */
+  webkit: function() {
+    return _populate() || _webkit;
+  },
+
+  /**
+   *  For Push
+   *  WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
+   */
+  safari: function() {
+    return UserAgent_DEPRECATED$1.webkit();
+  },
+
+  /**
+   *  Check if the UA is a Chrome browser.
+   *
+   *
+   *  @return float|NaN Version number (if match) or NaN.
+   */
+  chrome : function() {
+    return _populate() || _chrome;
+  },
+
+
+  /**
+   *  Check if the user is running Windows.
+   *
+   *  @return bool `true' if the user's OS is Windows.
+   */
+  windows: function() {
+    return _populate() || _windows;
+  },
+
+
+  /**
+   *  Check if the user is running Mac OS X.
+   *
+   *  @return float|bool   Returns a float if a version number is detected,
+   *                       otherwise true/false.
+   */
+  osx: function() {
+    return _populate() || _osx;
+  },
+
+  /**
+   * Check if the user is running Linux.
+   *
+   * @return bool `true' if the user's OS is some flavor of Linux.
+   */
+  linux: function() {
+    return _populate() || _linux;
+  },
+
+  /**
+   * Check if the user is running on an iPhone or iPod platform.
+   *
+   * @return bool `true' if the user is running some flavor of the
+   *    iPhone OS.
+   */
+  iphone: function() {
+    return _populate() || _iphone;
+  },
+
+  mobile: function() {
+    return _populate() || (_iphone || _ipad || _android || _mobile);
+  },
+
+  nativeApp: function() {
+    // webviews inside of the native apps
+    return _populate() || _native;
+  },
+
+  android: function() {
+    return _populate() || _android;
+  },
+
+  ipad: function() {
+    return _populate() || _ipad;
+  }
+};
+
+var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED$1;
+
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ExecutionEnvironment
+ */
+
+var canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+/**
+ * Simple, lightweight module assisting with the detection and context of
+ * Worker. Helps avoid circular dependencies and allows code to reason about
+ * whether or not they are in a Worker, even if they never include the main
+ * `ReactWorker` dependency.
+ */
+var ExecutionEnvironment$1 = {
+
+  canUseDOM: canUseDOM};
+
+var ExecutionEnvironment_1 = ExecutionEnvironment$1;
+
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule isEventSupported
+ */
+
+var ExecutionEnvironment = ExecutionEnvironment_1;
+
+var useHasFeature;
+if (ExecutionEnvironment.canUseDOM) {
+  useHasFeature =
+    document.implementation &&
+    document.implementation.hasFeature &&
+    // always returns true in newer browsers as per the standard.
+    // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
+    document.implementation.hasFeature('', '') !== true;
+}
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ *
+ * NOTE: This will not work correctly for non-generic events such as `change`,
+ * `reset`, `load`, `error`, and `select`.
+ *
+ * Borrows from Modernizr.
+ *
+ * @param {string} eventNameSuffix Event name, e.g. "click".
+ * @param {?boolean} capture Check if the capture phase is supported.
+ * @return {boolean} True if the event is supported.
+ * @internal
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+function isEventSupported$1(eventNameSuffix, capture) {
+  if (!ExecutionEnvironment.canUseDOM ||
+      capture && !('addEventListener' in document)) {
+    return false;
+  }
+
+  var eventName = 'on' + eventNameSuffix;
+  var isSupported = eventName in document;
+
+  if (!isSupported) {
+    var element = document.createElement('div');
+    element.setAttribute(eventName, 'return;');
+    isSupported = typeof element[eventName] === 'function';
+  }
+
+  if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
+    // This is the only way to test support for the `wheel` event in IE9+.
+    isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
+  }
+
+  return isSupported;
+}
+
+var isEventSupported_1 = isEventSupported$1;
+
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule normalizeWheel
+ * @typechecks
+ */
+
+var UserAgent_DEPRECATED = UserAgent_DEPRECATED_1;
+
+var isEventSupported = isEventSupported_1;
+
+
+// Reasonable defaults
+var PIXEL_STEP  = 10;
+var LINE_HEIGHT = 40;
+var PAGE_HEIGHT = 800;
+
+/**
+ * Mouse wheel (and 2-finger trackpad) support on the web sucks.  It is
+ * complicated, thus this doc is long and (hopefully) detailed enough to answer
+ * your questions.
+ *
+ * If you need to react to the mouse wheel in a predictable way, this code is
+ * like your bestest friend. * hugs *
+ *
+ * As of today, there are 4 DOM event types you can listen to:
+ *
+ *   'wheel'                -- Chrome(31+), FF(17+), IE(9+)
+ *   'mousewheel'           -- Chrome, IE(6+), Opera, Safari
+ *   'MozMousePixelScroll'  -- FF(3.5 only!) (2010-2013) -- don't bother!
+ *   'DOMMouseScroll'       -- FF(0.9.7+) since 2003
+ *
+ * So what to do?  The is the best:
+ *
+ *   normalizeWheel.getEventType();
+ *
+ * In your event callback, use this code to get sane interpretation of the
+ * deltas.  This code will return an object with properties:
+ *
+ *   spinX   -- normalized spin speed (use for zoom) - x plane
+ *   spinY   -- " - y plane
+ *   pixelX  -- normalized distance (to pixels) - x plane
+ *   pixelY  -- " - y plane
+ *
+ * Wheel values are provided by the browser assuming you are using the wheel to
+ * scroll a web page by a number of lines or pixels (or pages).  Values can vary
+ * significantly on different platforms and browsers, forgetting that you can
+ * scroll at different speeds.  Some devices (like trackpads) emit more events
+ * at smaller increments with fine granularity, and some emit massive jumps with
+ * linear speed or acceleration.
+ *
+ * This code does its best to normalize the deltas for you:
+ *
+ *   - spin is trying to normalize how far the wheel was spun (or trackpad
+ *     dragged).  This is super useful for zoom support where you want to
+ *     throw away the chunky scroll steps on the PC and make those equal to
+ *     the slow and smooth tiny steps on the Mac. Key data: This code tries to
+ *     resolve a single slow step on a wheel to 1.
+ *
+ *   - pixel is normalizing the desired scroll delta in pixel units.  You'll
+ *     get the crazy differences between browsers, but at least it'll be in
+ *     pixels!
+ *
+ *   - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT.  This
+ *     should translate to positive value zooming IN, negative zooming OUT.
+ *     This matches the newer 'wheel' event.
+ *
+ * Why are there spinX, spinY (or pixels)?
+ *
+ *   - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
+ *     with a mouse.  It results in side-scrolling in the browser by default.
+ *
+ *   - spinY is what you expect -- it's the classic axis of a mouse wheel.
+ *
+ *   - I dropped spinZ/pixelZ.  It is supported by the DOM 3 'wheel' event and
+ *     probably is by browsers in conjunction with fancy 3D controllers .. but
+ *     you know.
+ *
+ * Implementation info:
+ *
+ * Examples of 'wheel' event if you scroll slowly (down) by one step with an
+ * average mouse:
+ *
+ *   OS X + Chrome  (mouse)     -    4   pixel delta  (wheelDelta -120)
+ *   OS X + Safari  (mouse)     -  N/A   pixel delta  (wheelDelta  -12)
+ *   OS X + Firefox (mouse)     -    0.1 line  delta  (wheelDelta  N/A)
+ *   Win8 + Chrome  (mouse)     -  100   pixel delta  (wheelDelta -120)
+ *   Win8 + Firefox (mouse)     -    3   line  delta  (wheelDelta -120)
+ *
+ * On the trackpad:
+ *
+ *   OS X + Chrome  (trackpad)  -    2   pixel delta  (wheelDelta   -6)
+ *   OS X + Firefox (trackpad)  -    1   pixel delta  (wheelDelta  N/A)
+ *
+ * On other/older browsers.. it's more complicated as there can be multiple and
+ * also missing delta values.
+ *
+ * The 'wheel' event is more standard:
+ *
+ * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
+ *
+ * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
+ * deltaX, deltaY and deltaZ.  Some browsers provide other values to maintain
+ * backward compatibility with older events.  Those other values help us
+ * better normalize spin speed.  Example of what the browsers provide:
+ *
+ *                          | event.wheelDelta | event.detail
+ *        ------------------+------------------+--------------
+ *          Safari v5/OS X  |       -120       |       0
+ *          Safari v5/Win7  |       -120       |       0
+ *         Chrome v17/OS X  |       -120       |       0
+ *         Chrome v17/Win7  |       -120       |       0
+ *                IE9/Win7  |       -120       |   undefined
+ *         Firefox v4/OS X  |     undefined    |       1
+ *         Firefox v4/Win7  |     undefined    |       3
+ *
+ */
+function normalizeWheel$2(/*object*/ event) /*object*/ {
+  var sX = 0, sY = 0,       // spinX, spinY
+      pX = 0, pY = 0;       // pixelX, pixelY
+
+  // Legacy
+  if ('detail'      in event) { sY = event.detail; }
+  if ('wheelDelta'  in event) { sY = -event.wheelDelta / 120; }
+  if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
+  if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }
+
+  // side scrolling on FF with DOMMouseScroll
+  if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
+    sX = sY;
+    sY = 0;
+  }
+
+  pX = sX * PIXEL_STEP;
+  pY = sY * PIXEL_STEP;
+
+  if ('deltaY' in event) { pY = event.deltaY; }
+  if ('deltaX' in event) { pX = event.deltaX; }
+
+  if ((pX || pY) && event.deltaMode) {
+    if (event.deltaMode == 1) {          // delta in LINE units
+      pX *= LINE_HEIGHT;
+      pY *= LINE_HEIGHT;
+    } else {                             // delta in PAGE units
+      pX *= PAGE_HEIGHT;
+      pY *= PAGE_HEIGHT;
+    }
+  }
+
+  // Fall-back if spin cannot be determined
+  if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
+  if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }
+
+  return { spinX  : sX,
+           spinY  : sY,
+           pixelX : pX,
+           pixelY : pY };
+}
+
+
+/**
+ * The best combination if you prefer spinX + spinY normalization.  It favors
+ * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
+ * 'wheel' event, making spin speed determination impossible.
+ */
+normalizeWheel$2.getEventType = function() /*string*/ {
+  return (UserAgent_DEPRECATED.firefox())
+           ? 'DOMMouseScroll'
+           : (isEventSupported('wheel'))
+               ? 'wheel'
+               : 'mousewheel';
+};
+
+var normalizeWheel_1 = normalizeWheel$2;
+
+var normalizeWheel = normalizeWheel_1;
+
+var normalizeWheel$1 = /*@__PURE__*/getDefaultExportFromCjs(normalizeWheel);
+
+/**
+ * Compute the dimension of the crop area based on media size,
+ * aspect ratio and optionally rotation
+ */
+function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var _a = rotateSize(mediaWidth, mediaHeight, rotation),
+    width = _a.width,
+    height = _a.height;
+  var fittingWidth = Math.min(width, containerWidth);
+  var fittingHeight = Math.min(height, containerHeight);
+  if (fittingWidth > fittingHeight * aspect) {
+    return {
+      width: fittingHeight * aspect,
+      height: fittingHeight
+    };
+  }
+  return {
+    width: fittingWidth,
+    height: fittingWidth / aspect
+  };
+}
+/**
+ * Compute media zoom.
+ * We fit the media into the container with "max-width: 100%; max-height: 100%;"
+ */
+function getMediaZoom(mediaSize) {
+  // Take the axis with more pixels to improve accuracy
+  return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
+}
+/**
+ * Ensure a new media position stays in the crop area.
+ */
+function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var _a = rotateSize(mediaSize.width, mediaSize.height, rotation),
+    width = _a.width,
+    height = _a.height;
+  return {
+    x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
+    y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
+  };
+}
+function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
+  var maxPosition = Math.abs(mediaSize * zoom / 2 - cropSize / 2);
+  return clamp(position, -maxPosition, maxPosition);
+}
+function getDistanceBetweenPoints(pointA, pointB) {
+  return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
+}
+function getRotationBetweenPoints(pointA, pointB) {
+  return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
+}
+/**
+ * Compute the output cropped area of the media in percentages and pixels.
+ * x/y are the top-left coordinates on the src media
+ */
+function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  if (restrictPosition === void 0) {
+    restrictPosition = true;
+  }
+  // if the media is rotated by the user, we cannot limit the position anymore
+  // as it might need to be negative.
+  var limitAreaFn = restrictPosition ? limitArea : noOp;
+  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+  // calculate the crop area in percentages
+  // in the rotated space
+  var croppedAreaPercentages = {
+    x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
+    y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
+    width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
+    height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
+  };
+  // we compute the pixels size naively
+  var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
+  var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
+  var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect;
+  // then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
+  // if the media is wider than high, when zoom is 0, the crop height will be equals to image height
+  // thus we want to compute the width from the height and aspect for accuracy.
+  // Otherwise, we compute the height from width and aspect.
+  var sizePixels = isImgWiderThanHigh ? {
+    width: Math.round(heightInPixels * aspect),
+    height: heightInPixels
+  } : {
+    width: widthInPixels,
+    height: Math.round(widthInPixels / aspect)
+  };
+  var croppedAreaPixels = __assign(__assign({}, sizePixels), {
+    x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
+    y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
+  });
+  return {
+    croppedAreaPercentages: croppedAreaPercentages,
+    croppedAreaPixels: croppedAreaPixels
+  };
+}
+/**
+ * Ensure the returned value is between 0 and max
+ */
+function limitArea(max, value) {
+  return Math.min(max, Math.max(0, value));
+}
+function noOp(_max, value) {
+  return value;
+}
+/**
+ * Compute crop and zoom from the croppedAreaPercentages.
+ */
+function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+  // This is the inverse process of computeCroppedArea
+  var zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
+  var crop = {
+    x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
+    y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
+  };
+  return {
+    crop: crop,
+    zoom: zoom
+  };
+}
+/**
+ * Compute zoom from the croppedAreaPixels
+ */
+function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
+  var mediaZoom = getMediaZoom(mediaSize);
+  return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
+}
+/**
+ * Compute crop and zoom from the croppedAreaPixels
+ */
+function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+  if (rotation === void 0) {
+    rotation = 0;
+  }
+  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+  var zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
+  var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
+  var crop = {
+    x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
+    y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
+  };
+  return {
+    crop: crop,
+    zoom: zoom
+  };
+}
+/**
+ * Return the point that is the center of point a and b
+ */
+function getCenter(a, b) {
+  return {
+    x: (b.x + a.x) / 2,
+    y: (b.y + a.y) / 2
+  };
+}
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+function rotateSize(width, height, rotation) {
+  var rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+/**
+ * Clamp value between min and max
+ */
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+/**
+ * Combine multiple class names into a single string.
+ */
+function classNames() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  return args.filter(function (value) {
+    if (typeof value === 'string' && value.length > 0) {
+      return true;
+    }
+    return false;
+  }).join(' ').trim();
+}
+
+var css_248z = ".reactEasyCrop_Container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n  width: 100%;\n  height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n  width: auto;\n  height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  box-sizing: border-box;\n  box-shadow: 0 0 0 9999em;\n  color: rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n  border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 0;\n  bottom: 0;\n  left: 33.33%;\n  right: 33.33%;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 33.33%;\n  bottom: 33.33%;\n  left: 0;\n  right: 0;\n  border-left: 0;\n  border-right: 0;\n}\n";
+
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 3;
+var KEYBOARD_STEP = 1;
+var Cropper = /** @class */function (_super) {
+  __extends(Cropper, _super);
+  function Cropper() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.cropperRef = React__namespace.createRef();
+    _this.imageRef = React__namespace.createRef();
+    _this.videoRef = React__namespace.createRef();
+    _this.containerPosition = {
+      x: 0,
+      y: 0
+    };
+    _this.containerRef = null;
+    _this.styleRef = null;
+    _this.containerRect = null;
+    _this.mediaSize = {
+      width: 0,
+      height: 0,
+      naturalWidth: 0,
+      naturalHeight: 0
+    };
+    _this.dragStartPosition = {
+      x: 0,
+      y: 0
+    };
+    _this.dragStartCrop = {
+      x: 0,
+      y: 0
+    };
+    _this.gestureZoomStart = 0;
+    _this.gestureRotationStart = 0;
+    _this.isTouching = false;
+    _this.lastPinchDistance = 0;
+    _this.lastPinchRotation = 0;
+    _this.rafDragTimeout = null;
+    _this.rafPinchTimeout = null;
+    _this.wheelTimer = null;
+    _this.currentDoc = typeof document !== 'undefined' ? document : null;
+    _this.currentWindow = typeof window !== 'undefined' ? window : null;
+    _this.resizeObserver = null;
+    _this.previousCropSize = null;
+    _this.isInitialized = false;
+    _this.state = {
+      cropSize: null,
+      hasWheelJustStarted: false,
+      mediaObjectFit: undefined
+    };
+    _this.initResizeObserver = function () {
+      if (typeof window.ResizeObserver === 'undefined' || !_this.containerRef) {
+        return;
+      }
+      var isFirstResize = true;
+      _this.resizeObserver = new window.ResizeObserver(function (entries) {
+        if (isFirstResize) {
+          isFirstResize = false; // observe() is called on mount, we don't want to trigger a recompute on mount
+          return;
+        }
+        _this.computeSizes();
+      });
+      _this.resizeObserver.observe(_this.containerRef);
+    };
+    // this is to prevent Safari on iOS >= 10 to zoom the page
+    _this.preventZoomSafari = function (e) {
+      return e.preventDefault();
+    };
+    _this.cleanEvents = function () {
+      if (!_this.currentDoc) return;
+      _this.currentDoc.removeEventListener('mousemove', _this.onMouseMove);
+      _this.currentDoc.removeEventListener('mouseup', _this.onDragStopped);
+      _this.currentDoc.removeEventListener('touchmove', _this.onTouchMove);
+      _this.currentDoc.removeEventListener('touchend', _this.onDragStopped);
+      _this.currentDoc.removeEventListener('gesturechange', _this.onGestureChange);
+      _this.currentDoc.removeEventListener('gestureend', _this.onGestureEnd);
+      _this.currentDoc.removeEventListener('scroll', _this.onScroll);
+    };
+    _this.clearScrollEvent = function () {
+      if (_this.containerRef) _this.containerRef.removeEventListener('wheel', _this.onWheel);
+      if (_this.wheelTimer) {
+        clearTimeout(_this.wheelTimer);
+      }
+    };
+    _this.onMediaLoad = function () {
+      var cropSize = _this.computeSizes();
+      if (cropSize) {
+        _this.previousCropSize = cropSize;
+        _this.emitCropData();
+        _this.setInitialCrop(cropSize);
+        _this.isInitialized = true;
+      }
+      if (_this.props.onMediaLoaded) {
+        _this.props.onMediaLoaded(_this.mediaSize);
+      }
+    };
+    _this.setInitialCrop = function (cropSize) {
+      if (_this.props.initialCroppedAreaPercentages) {
+        var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
+          crop = _a.crop,
+          zoom = _a.zoom;
+        _this.props.onCropChange(crop);
+        _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+      } else if (_this.props.initialCroppedAreaPixels) {
+        var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
+          crop = _b.crop,
+          zoom = _b.zoom;
+        _this.props.onCropChange(crop);
+        _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+      }
+    };
+    _this.computeSizes = function () {
+      var _a, _b, _c, _d, _e, _f;
+      var mediaRef = _this.imageRef.current || _this.videoRef.current;
+      if (mediaRef && _this.containerRef) {
+        _this.containerRect = _this.containerRef.getBoundingClientRect();
+        _this.saveContainerPosition();
+        var containerAspect = _this.containerRect.width / _this.containerRect.height;
+        var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
+        var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
+        var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
+        var mediaAspect = naturalWidth / naturalHeight;
+        // We do not rely on the offsetWidth/offsetHeight if the media is scaled down
+        // as the values they report are rounded. That will result in precision losses
+        // when calculating zoom. We use the fact that the media is positionned relative
+        // to the container. That allows us to use the container's dimensions
+        // and natural aspect ratio of the media to calculate accurate media size.
+        // However, for this to work, the container should not be rotated
+        var renderedMediaSize = void 0;
+        if (isMediaScaledDown) {
+          switch (_this.state.mediaObjectFit) {
+            default:
+            case 'contain':
+              renderedMediaSize = containerAspect > mediaAspect ? {
+                width: _this.containerRect.height * mediaAspect,
+                height: _this.containerRect.height
+              } : {
+                width: _this.containerRect.width,
+                height: _this.containerRect.width / mediaAspect
+              };
+              break;
+            case 'horizontal-cover':
+              renderedMediaSize = {
+                width: _this.containerRect.width,
+                height: _this.containerRect.width / mediaAspect
+              };
+              break;
+            case 'vertical-cover':
+              renderedMediaSize = {
+                width: _this.containerRect.height * mediaAspect,
+                height: _this.containerRect.height
+              };
+              break;
+          }
+        } else {
+          renderedMediaSize = {
+            width: mediaRef.offsetWidth,
+            height: mediaRef.offsetHeight
+          };
+        }
+        _this.mediaSize = __assign(__assign({}, renderedMediaSize), {
+          naturalWidth: naturalWidth,
+          naturalHeight: naturalHeight
+        });
+        // set media size in the parent
+        if (_this.props.setMediaSize) {
+          _this.props.setMediaSize(_this.mediaSize);
+        }
+        var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);
+        if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {
+          _this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);
+        }
+        _this.setState({
+          cropSize: cropSize
+        }, _this.recomputeCropPosition);
+        // pass crop size to parent
+        if (_this.props.setCropSize) {
+          _this.props.setCropSize(cropSize);
+        }
+        return cropSize;
+      }
+    };
+    _this.saveContainerPosition = function () {
+      if (_this.containerRef) {
+        var bounds = _this.containerRef.getBoundingClientRect();
+        _this.containerPosition = {
+          x: bounds.left,
+          y: bounds.top
+        };
+      }
+    };
+    _this.onMouseDown = function (e) {
+      if (!_this.currentDoc) return;
+      e.preventDefault();
+      _this.currentDoc.addEventListener('mousemove', _this.onMouseMove);
+      _this.currentDoc.addEventListener('mouseup', _this.onDragStopped);
+      _this.saveContainerPosition();
+      _this.onDragStart(Cropper.getMousePoint(e));
+    };
+    _this.onMouseMove = function (e) {
+      return _this.onDrag(Cropper.getMousePoint(e));
+    };
+    _this.onScroll = function (e) {
+      if (!_this.currentDoc) return;
+      e.preventDefault();
+      _this.saveContainerPosition();
+    };
+    _this.onTouchStart = function (e) {
+      if (!_this.currentDoc) return;
+      _this.isTouching = true;
+      if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {
+        return;
+      }
+      _this.currentDoc.addEventListener('touchmove', _this.onTouchMove, {
+        passive: false
+      }); // iOS 11 now defaults to passive: true
+      _this.currentDoc.addEventListener('touchend', _this.onDragStopped);
+      _this.saveContainerPosition();
+      if (e.touches.length === 2) {
+        _this.onPinchStart(e);
+      } else if (e.touches.length === 1) {
+        _this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
+      }
+    };
+    _this.onTouchMove = function (e) {
+      // Prevent whole page from scrolling on iOS.
+      e.preventDefault();
+      if (e.touches.length === 2) {
+        _this.onPinchMove(e);
+      } else if (e.touches.length === 1) {
+        _this.onDrag(Cropper.getTouchPoint(e.touches[0]));
+      }
+    };
+    _this.onGestureStart = function (e) {
+      if (!_this.currentDoc) return;
+      e.preventDefault();
+      _this.currentDoc.addEventListener('gesturechange', _this.onGestureChange);
+      _this.currentDoc.addEventListener('gestureend', _this.onGestureEnd);
+      _this.gestureZoomStart = _this.props.zoom;
+      _this.gestureRotationStart = _this.props.rotation;
+    };
+    _this.onGestureChange = function (e) {
+      e.preventDefault();
+      if (_this.isTouching) {
+        // this is to avoid conflict between gesture and touch events
+        return;
+      }
+      var point = Cropper.getMousePoint(e);
+      var newZoom = _this.gestureZoomStart - 1 + e.scale;
+      _this.setNewZoom(newZoom, point, {
+        shouldUpdatePosition: true
+      });
+      if (_this.props.onRotationChange) {
+        var newRotation = _this.gestureRotationStart + e.rotation;
+        _this.props.onRotationChange(newRotation);
+      }
+    };
+    _this.onGestureEnd = function (e) {
+      _this.cleanEvents();
+    };
+    _this.onDragStart = function (_a) {
+      var _b, _c;
+      var x = _a.x,
+        y = _a.y;
+      _this.dragStartPosition = {
+        x: x,
+        y: y
+      };
+      _this.dragStartCrop = __assign({}, _this.props.crop);
+      (_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);
+    };
+    _this.onDrag = function (_a) {
+      var x = _a.x,
+        y = _a.y;
+      if (!_this.currentWindow) return;
+      if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);
+      _this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function () {
+        if (!_this.state.cropSize) return;
+        if (x === undefined || y === undefined) return;
+        var offsetX = x - _this.dragStartPosition.x;
+        var offsetY = y - _this.dragStartPosition.y;
+        var requestedPosition = {
+          x: _this.dragStartCrop.x + offsetX,
+          y: _this.dragStartCrop.y + offsetY
+        };
+        var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;
+        _this.props.onCropChange(newPosition);
+      });
+    };
+    _this.onDragStopped = function () {
+      var _a, _b;
+      _this.isTouching = false;
+      _this.cleanEvents();
+      _this.emitCropData();
+      (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    _this.onWheel = function (e) {
+      if (!_this.currentWindow) return;
+      if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {
+        return;
+      }
+      e.preventDefault();
+      var point = Cropper.getMousePoint(e);
+      var pixelY = normalizeWheel$1(e).pixelY;
+      var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;
+      _this.setNewZoom(newZoom, point, {
+        shouldUpdatePosition: true
+      });
+      if (!_this.state.hasWheelJustStarted) {
+        _this.setState({
+          hasWheelJustStarted: true
+        }, function () {
+          var _a, _b;
+          return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+      }
+      if (_this.wheelTimer) {
+        clearTimeout(_this.wheelTimer);
+      }
+      _this.wheelTimer = _this.currentWindow.setTimeout(function () {
+        return _this.setState({
+          hasWheelJustStarted: false
+        }, function () {
+          var _a, _b;
+          return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+      }, 250);
+    };
+    _this.getPointOnContainer = function (_a, containerTopLeft) {
+      var x = _a.x,
+        y = _a.y;
+      if (!_this.containerRect) {
+        throw new Error('The Cropper is not mounted');
+      }
+      return {
+        x: _this.containerRect.width / 2 - (x - containerTopLeft.x),
+        y: _this.containerRect.height / 2 - (y - containerTopLeft.y)
+      };
+    };
+    _this.getPointOnMedia = function (_a) {
+      var x = _a.x,
+        y = _a.y;
+      var _b = _this.props,
+        crop = _b.crop,
+        zoom = _b.zoom;
+      return {
+        x: (x + crop.x) / zoom,
+        y: (y + crop.y) / zoom
+      };
+    };
+    _this.setNewZoom = function (zoom, point, _a) {
+      var _b = _a === void 0 ? {} : _a,
+        _c = _b.shouldUpdatePosition,
+        shouldUpdatePosition = _c === void 0 ? true : _c;
+      if (!_this.state.cropSize || !_this.props.onZoomChange) return;
+      var newZoom = clamp(zoom, _this.props.minZoom, _this.props.maxZoom);
+      if (shouldUpdatePosition) {
+        var zoomPoint = _this.getPointOnContainer(point, _this.containerPosition);
+        var zoomTarget = _this.getPointOnMedia(zoomPoint);
+        var requestedPosition = {
+          x: zoomTarget.x * newZoom - zoomPoint.x,
+          y: zoomTarget.y * newZoom - zoomPoint.y
+        };
+        var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;
+        _this.props.onCropChange(newPosition);
+      }
+      _this.props.onZoomChange(newZoom);
+    };
+    _this.getCropData = function () {
+      if (!_this.state.cropSize) {
+        return null;
+      }
+      // this is to ensure the crop is correctly restricted after a zoom back (https://github.com/ValentinH/react-easy-crop/issues/6)
+      var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
+      return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);
+    };
+    _this.emitCropData = function () {
+      var cropData = _this.getCropData();
+      if (!cropData) return;
+      var croppedAreaPercentages = cropData.croppedAreaPercentages,
+        croppedAreaPixels = cropData.croppedAreaPixels;
+      if (_this.props.onCropComplete) {
+        _this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
+      }
+      if (_this.props.onCropAreaChange) {
+        _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+      }
+    };
+    _this.emitCropAreaChange = function () {
+      var cropData = _this.getCropData();
+      if (!cropData) return;
+      var croppedAreaPercentages = cropData.croppedAreaPercentages,
+        croppedAreaPixels = cropData.croppedAreaPixels;
+      if (_this.props.onCropAreaChange) {
+        _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+      }
+    };
+    _this.recomputeCropPosition = function () {
+      var _a, _b;
+      if (!_this.state.cropSize) return;
+      var adjustedCrop = _this.props.crop;
+      // Only scale if we're initialized and this is a legitimate resize
+      if (_this.isInitialized && ((_a = _this.previousCropSize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = _this.previousCropSize) === null || _b === void 0 ? void 0 : _b.height)) {
+        var sizeChanged = Math.abs(_this.previousCropSize.width - _this.state.cropSize.width) > 1e-6 || Math.abs(_this.previousCropSize.height - _this.state.cropSize.height) > 1e-6;
+        if (sizeChanged) {
+          var scaleX = _this.state.cropSize.width / _this.previousCropSize.width;
+          var scaleY = _this.state.cropSize.height / _this.previousCropSize.height;
+          adjustedCrop = {
+            x: _this.props.crop.x * scaleX,
+            y: _this.props.crop.y * scaleY
+          };
+        }
+      }
+      var newPosition = _this.props.restrictPosition ? restrictPosition(adjustedCrop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : adjustedCrop;
+      _this.previousCropSize = _this.state.cropSize;
+      _this.props.onCropChange(newPosition);
+      _this.emitCropData();
+    };
+    _this.onKeyDown = function (event) {
+      var _a, _b;
+      var _c = _this.props,
+        crop = _c.crop,
+        onCropChange = _c.onCropChange,
+        keyboardStep = _c.keyboardStep,
+        zoom = _c.zoom,
+        rotation = _c.rotation;
+      var step = keyboardStep;
+      if (!_this.state.cropSize) return;
+      // if the shift key is pressed, reduce the step to allow finer control
+      if (event.shiftKey) {
+        step *= 0.2;
+      }
+      var newCrop = __assign({}, crop);
+      switch (event.key) {
+        case 'ArrowUp':
+          newCrop.y -= step;
+          event.preventDefault();
+          break;
+        case 'ArrowDown':
+          newCrop.y += step;
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          newCrop.x -= step;
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          newCrop.x += step;
+          event.preventDefault();
+          break;
+        default:
+          return;
+      }
+      if (_this.props.restrictPosition) {
+        newCrop = restrictPosition(newCrop, _this.mediaSize, _this.state.cropSize, zoom, rotation);
+      }
+      if (!event.repeat) {
+        (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+      onCropChange(newCrop);
+    };
+    _this.onKeyUp = function (event) {
+      var _a, _b;
+      switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          event.preventDefault();
+          break;
+        default:
+          return;
+      }
+      _this.emitCropData();
+      (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    return _this;
+  }
+  Cropper.prototype.componentDidMount = function () {
+    if (!this.currentDoc || !this.currentWindow) return;
+    if (this.containerRef) {
+      if (this.containerRef.ownerDocument) {
+        this.currentDoc = this.containerRef.ownerDocument;
+      }
+      if (this.currentDoc.defaultView) {
+        this.currentWindow = this.currentDoc.defaultView;
+      }
+      this.initResizeObserver();
+      // only add window resize listener if ResizeObserver is not supported. Otherwise, it would be redundant
+      if (typeof window.ResizeObserver === 'undefined') {
+        this.currentWindow.addEventListener('resize', this.computeSizes);
+      }
+      this.props.zoomWithScroll && this.containerRef.addEventListener('wheel', this.onWheel, {
+        passive: false
+      });
+      this.containerRef.addEventListener('gesturestart', this.onGestureStart);
+    }
+    this.currentDoc.addEventListener('scroll', this.onScroll);
+    if (!this.props.disableAutomaticStylesInjection) {
+      this.styleRef = this.currentDoc.createElement('style');
+      this.styleRef.setAttribute('type', 'text/css');
+      if (this.props.nonce) {
+        this.styleRef.setAttribute('nonce', this.props.nonce);
+      }
+      this.styleRef.innerHTML = css_248z;
+      this.currentDoc.head.appendChild(this.styleRef);
+    }
+    // when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
+    if (this.imageRef.current && this.imageRef.current.complete) {
+      this.onMediaLoad();
+    }
+    // set image and video refs in the parent if the callbacks exist
+    if (this.props.setImageRef) {
+      this.props.setImageRef(this.imageRef);
+    }
+    if (this.props.setVideoRef) {
+      this.props.setVideoRef(this.videoRef);
+    }
+    if (this.props.setCropperRef) {
+      this.props.setCropperRef(this.cropperRef);
+    }
+  };
+  Cropper.prototype.componentWillUnmount = function () {
+    var _a, _b;
+    if (!this.currentDoc || !this.currentWindow) return;
+    if (typeof window.ResizeObserver === 'undefined') {
+      this.currentWindow.removeEventListener('resize', this.computeSizes);
+    }
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    if (this.containerRef) {
+      this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari);
+    }
+    if (this.styleRef) {
+      (_b = this.styleRef.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.styleRef);
+    }
+    this.cleanEvents();
+    this.props.zoomWithScroll && this.clearScrollEvent();
+  };
+  Cropper.prototype.componentDidUpdate = function (prevProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (prevProps.rotation !== this.props.rotation) {
+      this.computeSizes();
+      this.recomputeCropPosition();
+    } else if (prevProps.aspect !== this.props.aspect) {
+      this.computeSizes();
+    } else if (prevProps.objectFit !== this.props.objectFit) {
+      this.computeSizes();
+    } else if (prevProps.zoom !== this.props.zoom) {
+      this.recomputeCropPosition();
+    } else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {
+      this.computeSizes();
+    } else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {
+      this.emitCropAreaChange();
+    }
+    if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
+      this.props.zoomWithScroll ? this.containerRef.addEventListener('wheel', this.onWheel, {
+        passive: false
+      }) : this.clearScrollEvent();
+    }
+    if (prevProps.video !== this.props.video) {
+      (_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();
+    }
+    var objectFit = this.getObjectFit();
+    if (objectFit !== this.state.mediaObjectFit) {
+      this.setState({
+        mediaObjectFit: objectFit
+      }, this.computeSizes);
+    }
+  };
+  Cropper.prototype.getAspect = function () {
+    var _a = this.props,
+      cropSize = _a.cropSize,
+      aspect = _a.aspect;
+    if (cropSize) {
+      return cropSize.width / cropSize.height;
+    }
+    return aspect;
+  };
+  Cropper.prototype.getObjectFit = function () {
+    var _a, _b, _c, _d;
+    if (this.props.objectFit === 'cover') {
+      var mediaRef = this.imageRef.current || this.videoRef.current;
+      if (mediaRef && this.containerRef) {
+        this.containerRect = this.containerRef.getBoundingClientRect();
+        var containerAspect = this.containerRect.width / this.containerRect.height;
+        var naturalWidth = ((_a = this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
+        var naturalHeight = ((_c = this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
+        var mediaAspect = naturalWidth / naturalHeight;
+        return mediaAspect < containerAspect ? 'horizontal-cover' : 'vertical-cover';
+      }
+      return 'horizontal-cover';
+    }
+    return this.props.objectFit;
+  };
+  Cropper.prototype.onPinchStart = function (e) {
+    var pointA = Cropper.getTouchPoint(e.touches[0]);
+    var pointB = Cropper.getTouchPoint(e.touches[1]);
+    this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
+    this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
+    this.onDragStart(getCenter(pointA, pointB));
+  };
+  Cropper.prototype.onPinchMove = function (e) {
+    var _this = this;
+    if (!this.currentDoc || !this.currentWindow) return;
+    var pointA = Cropper.getTouchPoint(e.touches[0]);
+    var pointB = Cropper.getTouchPoint(e.touches[1]);
+    var center = getCenter(pointA, pointB);
+    this.onDrag(center);
+    if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
+    this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function () {
+      var distance = getDistanceBetweenPoints(pointA, pointB);
+      var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);
+      _this.setNewZoom(newZoom, center, {
+        shouldUpdatePosition: false
+      });
+      _this.lastPinchDistance = distance;
+      var rotation = getRotationBetweenPoints(pointA, pointB);
+      var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);
+      _this.props.onRotationChange && _this.props.onRotationChange(newRotation);
+      _this.lastPinchRotation = rotation;
+    });
+  };
+  Cropper.prototype.render = function () {
+    var _this = this;
+    var _a;
+    var _b = this.props,
+      image = _b.image,
+      video = _b.video,
+      mediaProps = _b.mediaProps,
+      cropperProps = _b.cropperProps,
+      transform = _b.transform,
+      _c = _b.crop,
+      x = _c.x,
+      y = _c.y,
+      rotation = _b.rotation,
+      zoom = _b.zoom,
+      cropShape = _b.cropShape,
+      showGrid = _b.showGrid,
+      roundCropAreaPixels = _b.roundCropAreaPixels,
+      _d = _b.style,
+      containerStyle = _d.containerStyle,
+      cropAreaStyle = _d.cropAreaStyle,
+      mediaStyle = _d.mediaStyle,
+      _e = _b.classes,
+      containerClassName = _e.containerClassName,
+      cropAreaClassName = _e.cropAreaClassName,
+      mediaClassName = _e.mediaClassName;
+    var objectFit = (_a = this.state.mediaObjectFit) !== null && _a !== void 0 ? _a : this.getObjectFit();
+    return React__namespace.createElement("div", {
+      onMouseDown: this.onMouseDown,
+      onTouchStart: this.onTouchStart,
+      ref: function ref(el) {
+        return _this.containerRef = el;
+      },
+      "data-testid": "container",
+      style: containerStyle,
+      className: classNames('reactEasyCrop_Container', containerClassName)
+    }, image ? React__namespace.createElement("img", __assign({
+      alt: "",
+      className: classNames('reactEasyCrop_Image', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)
+    }, mediaProps, {
+      src: image,
+      ref: this.imageRef,
+      style: __assign(__assign({}, mediaStyle), {
+        transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
+      }),
+      onLoad: this.onMediaLoad
+    })) : video && React__namespace.createElement("video", __assign({
+      autoPlay: true,
+      playsInline: true,
+      loop: true,
+      muted: true,
+      className: classNames('reactEasyCrop_Video', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', mediaClassName)
+    }, mediaProps, {
+      ref: this.videoRef,
+      onLoadedMetadata: this.onMediaLoad,
+      style: __assign(__assign({}, mediaStyle), {
+        transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
+      }),
+      controls: false
+    }), (Array.isArray(video) ? video : [{
+      src: video
+    }]).map(function (item) {
+      return React__namespace.createElement("source", __assign({
+        key: item.src
+      }, item));
+    })), this.state.cropSize && React__namespace.createElement("div", __assign({
+      ref: this.cropperRef,
+      style: __assign(__assign({}, cropAreaStyle), {
+        width: roundCropAreaPixels ? Math.round(this.state.cropSize.width) : this.state.cropSize.width,
+        height: roundCropAreaPixels ? Math.round(this.state.cropSize.height) : this.state.cropSize.height
+      }),
+      tabIndex: 0,
+      onKeyDown: this.onKeyDown,
+      onKeyUp: this.onKeyUp,
+      "data-testid": "cropper",
+      className: classNames('reactEasyCrop_CropArea', cropShape === 'round' && 'reactEasyCrop_CropAreaRound', showGrid && 'reactEasyCrop_CropAreaGrid', cropAreaClassName)
+    }, cropperProps)));
+  };
+  Cropper.defaultProps = {
+    zoom: 1,
+    rotation: 0,
+    aspect: 4 / 3,
+    maxZoom: MAX_ZOOM,
+    minZoom: MIN_ZOOM,
+    cropShape: 'rect',
+    objectFit: 'contain',
+    showGrid: true,
+    style: {},
+    classes: {},
+    mediaProps: {},
+    cropperProps: {},
+    zoomSpeed: 1,
+    restrictPosition: true,
+    zoomWithScroll: true,
+    keyboardStep: KEYBOARD_STEP
+  };
+  Cropper.getMousePoint = function (e) {
+    return {
+      x: Number(e.clientX),
+      y: Number(e.clientY)
+    };
+  };
+  Cropper.getTouchPoint = function (touch) {
+    return {
+      x: Number(touch.clientX),
+      y: Number(touch.clientY)
+    };
+  };
+  return Cropper;
+}(React__namespace.Component);
+
+const CameraCapture = ({ cameraView, facingMode, flashEnabled, capturedImage, cameraError, cameraLoading, videoRef, canvasRef, torchSupported, labels, icons, onCancel, onToggleCamera, onToggleFlash, onCapture, onRetake, onConfirm, onCropCancel, onApplyCrop, onCropComplete, }) => {
+    const [showFlash, setShowFlash] = React.useState(false);
+    const [crop, setCrop] = React.useState({ x: 0, y: 0 });
+    const [zoom] = React.useState(1);
+    const handleCapture = () => {
+        setShowFlash(true);
+        setTimeout(() => setShowFlash(false), 300);
+        onCapture();
+    };
+    const handleCropComplete = React.useCallback((_, croppedAreaPixels) => {
+        onCropComplete({
+            x: croppedAreaPixels.x,
+            y: croppedAreaPixels.y,
+            width: croppedAreaPixels.width,
+            height: croppedAreaPixels.height,
+        });
+    }, [onCropComplete]);
+    if (cameraView === "none")
+        return null;
+    if (cameraView === "crop" && capturedImage) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("label", { className: styles.label, children: labels.cropTitle }), jsxRuntime.jsx("div", { className: styles.cropContainer, children: jsxRuntime.jsx(Cropper, { image: capturedImage, crop: crop, zoom: zoom, aspect: undefined, onCropChange: setCrop, onCropComplete: handleCropComplete }) }), jsxRuntime.jsxs("div", { className: styles.capturedActions, children: [jsxRuntime.jsxs("button", { type: "button", className: styles.retakeBtn, onClick: onCropCancel, children: [icons.close, jsxRuntime.jsx("span", { children: labels.cropCancel })] }), jsxRuntime.jsxs("button", { type: "button", className: styles.confirmBtn, onClick: onApplyCrop, children: [icons.confirm, jsxRuntime.jsx("span", { children: labels.cropSave })] })] }), cameraError && (jsxRuntime.jsx("div", { className: styles.cameraError, children: cameraError }))] }));
+    }
+    if (cameraView === "captured" && capturedImage) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.capturedPreview, children: [jsxRuntime.jsx("img", { src: capturedImage, alt: "Captured", className: styles.capturedImage }), jsxRuntime.jsxs("div", { className: styles.capturedActions, children: [jsxRuntime.jsxs("button", { type: "button", className: styles.retakeBtn, onClick: onRetake, children: [icons.retake, jsxRuntime.jsx("span", { children: labels.retake })] }), jsxRuntime.jsxs("button", { type: "button", className: styles.confirmBtn, onClick: onConfirm, children: [icons.confirm, jsxRuntime.jsx("span", { children: labels.usePhoto })] })] })] }), cameraError && (jsxRuntime.jsx("div", { className: styles.cameraError, children: cameraError }))] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.cameraPreview, children: [cameraLoading ? (jsxRuntime.jsxs("div", { className: styles.cameraLoading, children: [jsxRuntime.jsx(md.MdCameraAlt, {}), jsxRuntime.jsx("div", { className: styles.cameraControls, children: jsxRuntime.jsx("button", { type: "button", className: styles.cameraControlBtn, onClick: onCancel, title: labels.cancel, children: icons.close }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: styles.cameraVideo, style: {
+                                    transform: facingMode === "user" ? "scaleX(-1)" : "none",
+                                } }), jsxRuntime.jsxs("div", { className: styles.cameraControls, children: [jsxRuntime.jsx("button", { type: "button", className: styles.cameraControlBtn, onClick: onCancel, title: labels.cancel, children: icons.close }), jsxRuntime.jsx("button", { type: "button", className: styles.cameraControlBtn, onClick: onToggleFlash, title: labels.toggleFlash, disabled: !torchSupported, style: { opacity: torchSupported ? 1 : 0.4 }, children: flashEnabled ? icons.flashOn : icons.flashOff }), jsxRuntime.jsx("button", { type: "button", className: styles.cameraControlBtn, onClick: onToggleCamera, title: labels.switchCamera, children: icons.switchCamera })] }), jsxRuntime.jsx("button", { type: "button", className: styles.captureBtn, onClick: handleCapture, children: jsxRuntime.jsx("div", { className: styles.captureBtnInner }) }), showFlash && jsxRuntime.jsx("div", { className: styles.screenFlash })] })), jsxRuntime.jsx("canvas", { ref: canvasRef, style: { display: "none" } })] }), cameraError && (jsxRuntime.jsx("div", { className: styles.cameraError, children: cameraError }))] }));
+};
+
+var CameraCapture$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: CameraCapture
+});
+
+exports.ZestFileUpload = FileUpload;
+exports.default = FileUpload;
+//# sourceMappingURL=index.cjs.js.map