@ews-admin/global-design-system 1.14.0 → 1.18.0

package/dist/index.js

@@ -4,6 +4,25 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 
+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 r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const LOCAL_PORTS = {
@@ -11783,7 +11802,7 @@ const __iconNode$fN = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ];
-const File = createLucideIcon("file", __iconNode$fN);
+const File$1 = createLucideIcon("file", __iconNode$fN);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -15460,7 +15479,7 @@ const __iconNode$cX = [
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image = createLucideIcon("image", __iconNode$cX);
+const Image$1 = createLucideIcon("image", __iconNode$cX);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -27428,7 +27447,7 @@ const __iconNode$2X = [
   ],
   ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
 ];
-const Tag = createLucideIcon("tag", __iconNode$2X);
+const Tag$1 = createLucideIcon("tag", __iconNode$2X);
 
 /**
  * @license lucide-react v0.544.0 - ISC
@@ -31497,7 +31516,7 @@ var index = /*#__PURE__*/Object.freeze({
     Fence: Fence,
     FerrisWheel: FerrisWheel,
     Figma: Figma,
-    File: File,
+    File: File$1,
     FileArchive: FileArchive,
     FileAudio: FileAudio,
     FileAudio2: FileAudio2,
@@ -31730,7 +31749,7 @@ var index = /*#__PURE__*/Object.freeze({
     IceCreamCone: IceCreamCone,
     IdCard: IdCard,
     IdCardLanyard: IdCardLanyard,
-    Image: Image,
+    Image: Image$1,
     ImageDown: ImageDown,
     ImageMinus: ImageMinus,
     ImageOff: ImageOff,
@@ -32377,7 +32396,7 @@ var index = /*#__PURE__*/Object.freeze({
     Tablet: Tablet,
     TabletSmartphone: TabletSmartphone,
     Tablets: Tablets,
-    Tag: Tag,
+    Tag: Tag$1,
     Tags: Tags,
     Tally1: Tally1,
     Tally2: Tally2,
@@ -32673,7 +32692,7 @@ const Input = React.forwardRef(({ className, variant = "default", size = "md", l
 });
 Input.displayName = "Input";
 
-const Select = React.forwardRef(({ options = [], value, onChange, placeholder = "Select an option...", label, helperText, error, isError = false, size = "md", disabled = false, required = false, searchable = false, multiple: _multiple = false, selectClassName, containerClassName, dropdownClassName, maxHeight = 200, clearable = false, renderOption, renderValue, ...props }, ref) => {
+const Select = React.forwardRef(({ options = [], value, onChange, placeholder = "Select an option...", label, helperText, error, isError = false, size = "md", disabled = false, required = false, searchable = false, multiple: _multiple = false, selectClassName, containerClassName, dropdownClassName, maxHeight = 200, clearable = false, renderOption, renderValue, renderTrigger, ...props }, ref) => {
     const generatedId = React.useId();
     const selectId = `select-${generatedId}`;
     const hasError = isError || !!error;
@@ -32706,15 +32725,6 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         const spaceAbove = containerRect.top;
         // Add some buffer (20px) to prevent edge cases
         const buffer = 20;
-        console.log("Position calculation:", {
-            spaceBelow,
-            spaceAbove,
-            dropdownHeight,
-            viewportHeight,
-            containerBottom: containerRect.bottom,
-            shouldOpenTop: spaceBelow < dropdownHeight + buffer &&
-                spaceAbove > dropdownHeight + buffer,
-        });
         // If there's not enough space below but enough space above, position on top
         if (spaceBelow < dropdownHeight + buffer &&
             spaceAbove > dropdownHeight + buffer) {
@@ -32734,13 +32744,6 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         const spaceBelow = viewportHeight - containerRect.bottom;
         const spaceAbove = containerRect.top;
         const actualDropdownHeight = dropdownRect.height;
-        console.log("Position calculation with element:", {
-            spaceBelow,
-            spaceAbove,
-            actualDropdownHeight,
-            viewportHeight,
-            containerBottom: containerRect.bottom,
-        });
         // If there's not enough space below but enough space above, position on top
         if (spaceBelow < actualDropdownHeight &&
             spaceAbove > actualDropdownHeight) {
@@ -32896,7 +32899,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
                         // Text color
                         "text-ews-gray-900", 
                         // Padding for icons
-                        "pr-10", selectClassName), ...props, children: jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedOption ? (renderValue ? (renderValue(selectedOption)) : (jsxRuntime.jsx("span", { className: "truncate", children: selectedOption.label }))) : (jsxRuntime.jsx("span", { className: "text-ews-gray-500", children: placeholder })) }), jsxRuntime.jsxs("div", { className: "flex items-center ml-2 space-x-1", children: [clearable && selectedOption && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded hover:bg-ews-gray-100", children: jsxRuntime.jsx(X, { className: cn(iconSizeClasses[size], "text-ews-gray-400") }) })), jsxRuntime.jsx(ChevronDown, { className: cn(iconSizeClasses[size], hasError ? "text-ews-error" : "text-ews-gray-400", disabled && "text-ews-gray-300", isOpen && "rotate-180 transition-transform") })] })] }) }), isOpen && (jsxRuntime.jsxs("div", { ref: dropdownRef, role: "listbox", className: cn("absolute z-50 w-full bg-white rounded-md border shadow-lg border-ews-gray-300", "focus:outline-none", dropdownPosition === "top"
+                        "pr-10", selectClassName), ...props, children: jsxRuntime.jsx("div", { className: "flex justify-between items-center", children: renderTrigger ? (renderTrigger()) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: selectedOption ? (renderValue ? (renderValue(selectedOption)) : (jsxRuntime.jsx("span", { className: "truncate", children: selectedOption.label }))) : (jsxRuntime.jsx("span", { className: "text-ews-gray-500", children: placeholder })) }), jsxRuntime.jsxs("div", { className: "flex items-center ml-2 space-x-1", children: [clearable && selectedOption && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded hover:bg-ews-gray-100", children: jsxRuntime.jsx(X, { className: cn(iconSizeClasses[size], "text-ews-gray-400") }) })), jsxRuntime.jsx(ChevronDown, { className: cn(iconSizeClasses[size], hasError ? "text-ews-error" : "text-ews-gray-400", disabled && "text-ews-gray-300", isOpen && "rotate-180 transition-transform") })] })] })) }) }), isOpen && (jsxRuntime.jsxs("div", { ref: dropdownRef, role: "listbox", className: cn("absolute z-50 w-full bg-white rounded-md border shadow-lg border-ews-gray-300", "focus:outline-none", dropdownPosition === "top"
                             ? "bottom-full mb-1"
                             : "top-full mt-1", dropdownClassName), style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-ews-gray-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Search, { className: "absolute left-3 top-1/2 w-4 h-4 transform -translate-y-1/2 text-ews-gray-400" }), jsxRuntime.jsx(Input, { ref: inputRef, type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search options...", leftIcon: jsxRuntime.jsx(Search, { className: "w-4 h-4 text-ews-gray-400" }) })] }) })), jsxRuntime.jsx("div", { className: "overflow-auto py-1", style: { maxHeight: `${maxHeight - (searchable ? 60 : 0)}px` }, children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-ews-gray-500", children: searchTerm ? "No options found" : "No options available" })) : (filteredOptions.map((option, index) => {
                                     const isSelected = option.value === value;
@@ -33309,6 +33312,7 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", size = "md"
     return (jsxRuntime.jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative w-full bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", getSizeClasses(), "mx-4", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsxRuntime.jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsxRuntime.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx("div", { className: cn("p-6", contentClassName), children: jsxRuntime.jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxRuntime.jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsxRuntime.jsx(Button, { variant: "outline", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsxRuntime.jsx(Button, { variant: variant === "error" ? "error" : "ews-primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
 };
 
+const ACCEPTED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"];
 const SIZE_CLASSES = {
     sm: "h-10 w-10",
     md: "h-16 w-16",
@@ -33344,28 +33348,1414 @@ function UploadProgressBar({ progress, isLoading, }) {
     const indeterminate = isLoading && progress === 0;
     return (jsxRuntime.jsx("div", { className: "mt-2 h-1.5 w-32 rounded-full bg-gray-200", children: jsxRuntime.jsx("div", { className: cn("h-full rounded-full bg-ews-primary transition-all duration-300", indeterminate && "animate-pulse"), style: { width: indeterminate ? "35%" : `${progress}%` } }) }));
 }
-const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg", uploadProgress = 0, isLoading = false, showDeleteButton = true, accept = "image/*", maxFileSizeMB = 3, onFileSelect, onFileSizeExceeded, onDeleteConfirm, deleteConfirmTitle, deleteConfirmMessage, deleteConfirmLabel, cancelLabel, }) => {
+const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg", uploadProgress = 0, isLoading = false, showDeleteButton = true, acceptedFormats = [...ACCEPTED_MIME_TYPES], maxFileSizeMB = 5, aspectRatioHint, onFileSelect, onFileSizeExceeded, onInvalidFormat, onDeleteConfirm, deleteConfirmTitle, deleteConfirmMessage, deleteConfirmLabel, cancelLabel, }) => {
     const fileInputRef = React.useRef(null);
     const [isHovered, setIsHovered] = React.useState(false);
     const [showConfirm, setShowConfirm] = React.useState(false);
+    const acceptAttr = acceptedFormats.join(",");
     const handleEditClick = () => fileInputRef.current?.click();
     const handleFileChange = (e) => {
         const file = e.target.files?.[0];
         if (!file)
             return;
+        if (acceptedFormats.indexOf(file.type) === -1) {
+            onInvalidFormat?.();
+            e.target.value = "";
+            return;
+        }
         if (file.size > maxFileSizeMB * 1024 * 1024) {
             onFileSizeExceeded?.();
             e.target.value = "";
             return;
         }
         onFileSelect(file);
-        e.target.value = ""; // allow re-selecting the same file
+        e.target.value = "";
     };
     const handleConfirmDelete = () => {
         setShowConfirm(false);
         onDeleteConfirm();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxRuntime.jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsxRuntime.jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: accept, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsxRuntime.jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsxRuntime.jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsxRuntime.jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading })] }), jsxRuntime.jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsxRuntime.jsx("p", { children: deleteConfirmMessage }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxRuntime.jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsxRuntime.jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptAttr, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsxRuntime.jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsxRuntime.jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsxRuntime.jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading }), aspectRatioHint && (jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-gray-400", children: ["Ratio: ", aspectRatioHint] }))] }), jsxRuntime.jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsxRuntime.jsx("p", { children: deleteConfirmMessage }) })] }));
+};
+
+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);
+
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r);
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: true,
+		configurable: true,
+		writable: true
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), true).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+//#region src/helpers.ts
+/**
+* Compute the dimension of the crop area based on media size,
+* aspect ratio and optionally rotation
+*/
+function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation = 0) {
+	const { width, height } = rotateSize(mediaWidth, mediaHeight, rotation);
+	const fittingWidth = Math.min(width, containerWidth);
+	const 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) {
+	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 = 0) {
+	const { width, height } = rotateSize(mediaSize.width, mediaSize.height, rotation);
+	return {
+		x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
+		y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
+	};
+}
+function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
+	const 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 = 0, restrictPosition = true) {
+	const limitAreaFn = restrictPosition ? limitArea : noOp;
+	const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+	const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+	const 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)
+	};
+	const widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
+	const heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
+	const sizePixels = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect ? {
+		width: Math.round(heightInPixels * aspect),
+		height: heightInPixels
+	} : {
+		width: widthInPixels,
+		height: Math.round(widthInPixels / aspect)
+	};
+	return {
+		croppedAreaPercentages,
+		croppedAreaPixels: _objectSpread2(_objectSpread2({}, 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))
+		})
+	};
+}
+/**
+* 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) {
+	const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
+	const zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
+	return {
+		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)
+		},
+		zoom
+	};
+}
+/**
+* Compute zoom from the croppedAreaPixels
+*/
+function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
+	const 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 = 0, cropSize, minZoom, maxZoom) {
+	const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+	const zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
+	const cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
+	return {
+		crop: {
+			x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
+			y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
+		},
+		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) {
+	const 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(...args) {
+	return args.filter((value) => {
+		if (typeof value === "string" && value.length > 0) return true;
+		return false;
+	}).join(" ").trim();
+}
+//#endregion
+//#region src/styles.css?raw
+var styles_default = ".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  max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */\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";
+//#endregion
+//#region src/Cropper.tsx
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 3;
+const KEYBOARD_STEP = 1;
+var Cropper$1 = class Cropper extends React__namespace.Component {
+	constructor(..._args) {
+		super(..._args);
+		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: void 0
+		};
+		this.initResizeObserver = () => {
+			if (typeof window.ResizeObserver === "undefined" || !this.containerRef) return;
+			let isFirstResize = true;
+			this.resizeObserver = new window.ResizeObserver((entries) => {
+				if (isFirstResize) {
+					isFirstResize = false;
+					return;
+				}
+				this.computeSizes();
+			});
+			this.resizeObserver.observe(this.containerRef);
+		};
+		this.preventZoomSafari = (e) => e.preventDefault();
+		this.cleanEvents = () => {
+			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 = () => {
+			if (this.containerRef) this.containerRef.removeEventListener("wheel", this.onWheel);
+			if (this.wheelTimer) clearTimeout(this.wheelTimer);
+		};
+		this.onMediaLoad = () => {
+			const 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 = (cropSize) => {
+			if (this.props.initialCroppedAreaPercentages) {
+				const { crop, zoom } = getInitialCropFromCroppedAreaPercentages(this.props.initialCroppedAreaPercentages, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
+				this.props.onCropChange(crop);
+				this.props.onZoomChange && this.props.onZoomChange(zoom);
+			} else if (this.props.initialCroppedAreaPixels) {
+				const { crop, zoom } = getInitialCropFromCroppedAreaPixels(this.props.initialCroppedAreaPixels, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
+				this.props.onCropChange(crop);
+				this.props.onZoomChange && this.props.onZoomChange(zoom);
+			}
+		};
+		this.computeSizes = () => {
+			const mediaRef = this.imageRef.current || this.videoRef.current;
+			if (mediaRef && this.containerRef) {
+				var _this$imageRef$curren, _this$videoRef$curren, _this$imageRef$curren2, _this$videoRef$curren2, _this$state$cropSize, _this$state$cropSize2;
+				this.containerRect = this.containerRef.getBoundingClientRect();
+				this.saveContainerPosition();
+				const containerAspect = this.containerRect.width / this.containerRect.height;
+				const naturalWidth = ((_this$imageRef$curren = this.imageRef.current) === null || _this$imageRef$curren === void 0 ? void 0 : _this$imageRef$curren.naturalWidth) || ((_this$videoRef$curren = this.videoRef.current) === null || _this$videoRef$curren === void 0 ? void 0 : _this$videoRef$curren.videoWidth) || 0;
+				const naturalHeight = ((_this$imageRef$curren2 = this.imageRef.current) === null || _this$imageRef$curren2 === void 0 ? void 0 : _this$imageRef$curren2.naturalHeight) || ((_this$videoRef$curren2 = this.videoRef.current) === null || _this$videoRef$curren2 === void 0 ? void 0 : _this$videoRef$curren2.videoHeight) || 0;
+				const isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
+				const mediaAspect = naturalWidth / naturalHeight;
+				let renderedMediaSize;
+				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 = _objectSpread2(_objectSpread2({}, renderedMediaSize), {}, {
+					naturalWidth,
+					naturalHeight
+				});
+				if (this.props.setMediaSize) this.props.setMediaSize(this.mediaSize);
+				const 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 (((_this$state$cropSize = this.state.cropSize) === null || _this$state$cropSize === void 0 ? void 0 : _this$state$cropSize.height) !== cropSize.height || ((_this$state$cropSize2 = this.state.cropSize) === null || _this$state$cropSize2 === void 0 ? void 0 : _this$state$cropSize2.width) !== cropSize.width) this.props.onCropSizeChange && this.props.onCropSizeChange(cropSize);
+				this.setState({ cropSize }, this.recomputeCropPosition);
+				if (this.props.setCropSize) this.props.setCropSize(cropSize);
+				return cropSize;
+			}
+		};
+		this.saveContainerPosition = () => {
+			if (this.containerRef) {
+				const bounds = this.containerRef.getBoundingClientRect();
+				this.containerPosition = {
+					x: bounds.left,
+					y: bounds.top
+				};
+			}
+		};
+		this.onMouseDown = (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 = (e) => this.onDrag(Cropper.getMousePoint(e));
+		this.onScroll = (e) => {
+			if (!this.currentDoc) return;
+			e.preventDefault();
+			this.saveContainerPosition();
+		};
+		this.onTouchStart = (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 });
+			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 = (e) => {
+			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 = (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 = (e) => {
+			e.preventDefault();
+			if (this.isTouching) return;
+			const point = Cropper.getMousePoint(e);
+			const newZoom = this.gestureZoomStart - 1 + e.scale;
+			this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
+			if (this.props.onRotationChange) {
+				const newRotation = this.gestureRotationStart + e.rotation;
+				this.props.onRotationChange(newRotation);
+			}
+		};
+		this.onGestureEnd = (e) => {
+			this.cleanEvents();
+		};
+		this.onDragStart = ({ x, y }) => {
+			var _this$props$onInterac, _this$props;
+			this.dragStartPosition = {
+				x,
+				y
+			};
+			this.dragStartCrop = _objectSpread2({}, this.props.crop);
+			(_this$props$onInterac = (_this$props = this.props).onInteractionStart) === null || _this$props$onInterac === void 0 || _this$props$onInterac.call(_this$props);
+		};
+		this.onDrag = ({ x, y }) => {
+			if (!this.currentWindow) return;
+			if (this.rafDragTimeout) this.currentWindow.cancelAnimationFrame(this.rafDragTimeout);
+			this.rafDragTimeout = this.currentWindow.requestAnimationFrame(() => {
+				if (!this.state.cropSize) return;
+				if (x === void 0 || y === void 0) return;
+				const offsetX = x - this.dragStartPosition.x;
+				const offsetY = y - this.dragStartPosition.y;
+				const requestedPosition = {
+					x: this.dragStartCrop.x + offsetX,
+					y: this.dragStartCrop.y + offsetY
+				};
+				const newPosition = this.props.restrictPosition ? restrictPosition(requestedPosition, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : requestedPosition;
+				this.props.onCropChange(newPosition);
+			});
+		};
+		this.onDragStopped = () => {
+			var _this$props$onInterac2, _this$props2;
+			this.isTouching = false;
+			this.cleanEvents();
+			this.emitCropData();
+			(_this$props$onInterac2 = (_this$props2 = this.props).onInteractionEnd) === null || _this$props$onInterac2 === void 0 || _this$props$onInterac2.call(_this$props2);
+		};
+		this.onWheel = (e) => {
+			if (!this.currentWindow) return;
+			if (this.props.onWheelRequest && !this.props.onWheelRequest(e)) return;
+			e.preventDefault();
+			const point = Cropper.getMousePoint(e);
+			const { pixelY } = normalizeWheel$1(e);
+			const newZoom = this.props.zoom - pixelY * this.props.zoomSpeed / 200;
+			this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
+			if (!this.state.hasWheelJustStarted) this.setState({ hasWheelJustStarted: true }, () => {
+				var _this$props$onInterac3, _this$props3;
+				return (_this$props$onInterac3 = (_this$props3 = this.props).onInteractionStart) === null || _this$props$onInterac3 === void 0 ? void 0 : _this$props$onInterac3.call(_this$props3);
+			});
+			if (this.wheelTimer) clearTimeout(this.wheelTimer);
+			this.wheelTimer = this.currentWindow.setTimeout(() => this.setState({ hasWheelJustStarted: false }, () => {
+				var _this$props$onInterac4, _this$props4;
+				return (_this$props$onInterac4 = (_this$props4 = this.props).onInteractionEnd) === null || _this$props$onInterac4 === void 0 ? void 0 : _this$props$onInterac4.call(_this$props4);
+			}), 250);
+		};
+		this.getPointOnContainer = ({ x, y }, containerTopLeft) => {
+			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 = ({ x, y }) => {
+			const { crop, zoom } = this.props;
+			return {
+				x: (x + crop.x) / zoom,
+				y: (y + crop.y) / zoom
+			};
+		};
+		this.setNewZoom = (zoom, point, { shouldUpdatePosition = true } = {}) => {
+			if (!this.state.cropSize || !this.props.onZoomChange) return;
+			const newZoom = clamp(zoom, this.props.minZoom, this.props.maxZoom);
+			if (shouldUpdatePosition) {
+				const zoomPoint = this.getPointOnContainer(point, this.containerPosition);
+				const zoomTarget = this.getPointOnMedia(zoomPoint);
+				const requestedPosition = {
+					x: zoomTarget.x * newZoom - zoomPoint.x,
+					y: zoomTarget.y * newZoom - zoomPoint.y
+				};
+				const 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 = () => {
+			if (!this.state.cropSize) return null;
+			return computeCroppedArea(this.props.restrictPosition ? restrictPosition(this.props.crop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : this.props.crop, this.mediaSize, this.state.cropSize, this.getAspect(), this.props.zoom, this.props.rotation, this.props.restrictPosition);
+		};
+		this.emitCropData = () => {
+			const cropData = this.getCropData();
+			if (!cropData) return;
+			const { croppedAreaPercentages, croppedAreaPixels } = cropData;
+			if (this.props.onCropComplete) this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
+			if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+		};
+		this.emitCropAreaChange = () => {
+			const cropData = this.getCropData();
+			if (!cropData) return;
+			const { croppedAreaPercentages, croppedAreaPixels } = cropData;
+			if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+		};
+		this.recomputeCropPosition = () => {
+			var _this$previousCropSiz, _this$previousCropSiz2;
+			if (!this.state.cropSize) return;
+			let adjustedCrop = this.props.crop;
+			if (this.isInitialized && ((_this$previousCropSiz = this.previousCropSize) === null || _this$previousCropSiz === void 0 ? void 0 : _this$previousCropSiz.width) && ((_this$previousCropSiz2 = this.previousCropSize) === null || _this$previousCropSiz2 === void 0 ? void 0 : _this$previousCropSiz2.height)) {
+				if (Math.abs(this.previousCropSize.width - this.state.cropSize.width) > 1e-6 || Math.abs(this.previousCropSize.height - this.state.cropSize.height) > 1e-6) {
+					const scaleX = this.state.cropSize.width / this.previousCropSize.width;
+					const scaleY = this.state.cropSize.height / this.previousCropSize.height;
+					adjustedCrop = {
+						x: this.props.crop.x * scaleX,
+						y: this.props.crop.y * scaleY
+					};
+				}
+			}
+			const 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 = (event) => {
+			const { crop, onCropChange, keyboardStep, zoom, rotation } = this.props;
+			let step = keyboardStep;
+			if (!this.state.cropSize) return;
+			if (event.shiftKey) step *= .2;
+			let newCrop = _objectSpread2({}, 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) {
+				var _this$props$onInterac5, _this$props5;
+				(_this$props$onInterac5 = (_this$props5 = this.props).onInteractionStart) === null || _this$props$onInterac5 === void 0 || _this$props$onInterac5.call(_this$props5);
+			}
+			onCropChange(newCrop);
+		};
+		this.onKeyUp = (event) => {
+			var _this$props$onInterac6, _this$props6;
+			switch (event.key) {
+				case "ArrowUp":
+				case "ArrowDown":
+				case "ArrowLeft":
+				case "ArrowRight":
+					event.preventDefault();
+					break;
+				default: return;
+			}
+			this.emitCropData();
+			(_this$props$onInterac6 = (_this$props6 = this.props).onInteractionEnd) === null || _this$props$onInterac6 === void 0 || _this$props$onInterac6.call(_this$props6);
+		};
+	}
+	componentDidMount() {
+		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();
+			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 = styles_default;
+			this.currentDoc.head.appendChild(this.styleRef);
+		}
+		if (this.imageRef.current && this.imageRef.current.complete) this.onMediaLoad();
+		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);
+	}
+	componentWillUnmount() {
+		var _this$resizeObserver;
+		if (!this.currentDoc || !this.currentWindow) return;
+		if (typeof window.ResizeObserver === "undefined") this.currentWindow.removeEventListener("resize", this.computeSizes);
+		(_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
+		if (this.containerRef) this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
+		if (this.styleRef) {
+			var _this$styleRef$parent;
+			(_this$styleRef$parent = this.styleRef.parentNode) === null || _this$styleRef$parent === void 0 || _this$styleRef$parent.removeChild(this.styleRef);
+		}
+		this.cleanEvents();
+		this.props.zoomWithScroll && this.clearScrollEvent();
+	}
+	componentDidUpdate(prevProps) {
+		var _prevProps$cropSize, _this$props$cropSize, _prevProps$cropSize2, _this$props$cropSize2, _prevProps$crop, _this$props$crop, _prevProps$crop2, _this$props$crop2;
+		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 (((_prevProps$cropSize = prevProps.cropSize) === null || _prevProps$cropSize === void 0 ? void 0 : _prevProps$cropSize.height) !== ((_this$props$cropSize = this.props.cropSize) === null || _this$props$cropSize === void 0 ? void 0 : _this$props$cropSize.height) || ((_prevProps$cropSize2 = prevProps.cropSize) === null || _prevProps$cropSize2 === void 0 ? void 0 : _prevProps$cropSize2.width) !== ((_this$props$cropSize2 = this.props.cropSize) === null || _this$props$cropSize2 === void 0 ? void 0 : _this$props$cropSize2.width)) this.computeSizes();
+		else if (((_prevProps$crop = prevProps.crop) === null || _prevProps$crop === void 0 ? void 0 : _prevProps$crop.x) !== ((_this$props$crop = this.props.crop) === null || _this$props$crop === void 0 ? void 0 : _this$props$crop.x) || ((_prevProps$crop2 = prevProps.crop) === null || _prevProps$crop2 === void 0 ? void 0 : _prevProps$crop2.y) !== ((_this$props$crop2 = this.props.crop) === null || _this$props$crop2 === void 0 ? void 0 : _this$props$crop2.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) {
+			var _this$videoRef$curren3;
+			(_this$videoRef$curren3 = this.videoRef.current) === null || _this$videoRef$curren3 === void 0 || _this$videoRef$curren3.load();
+		}
+		const objectFit = this.getObjectFit();
+		if (objectFit !== this.state.mediaObjectFit) this.setState({ mediaObjectFit: objectFit }, this.computeSizes);
+	}
+	getAspect() {
+		const { cropSize, aspect } = this.props;
+		if (cropSize) return cropSize.width / cropSize.height;
+		return aspect;
+	}
+	getObjectFit() {
+		if (this.props.objectFit === "cover") {
+			if ((this.imageRef.current || this.videoRef.current) && this.containerRef) {
+				var _this$imageRef$curren3, _this$videoRef$curren4, _this$imageRef$curren4, _this$videoRef$curren5;
+				this.containerRect = this.containerRef.getBoundingClientRect();
+				const containerAspect = this.containerRect.width / this.containerRect.height;
+				return (((_this$imageRef$curren3 = this.imageRef.current) === null || _this$imageRef$curren3 === void 0 ? void 0 : _this$imageRef$curren3.naturalWidth) || ((_this$videoRef$curren4 = this.videoRef.current) === null || _this$videoRef$curren4 === void 0 ? void 0 : _this$videoRef$curren4.videoWidth) || 0) / (((_this$imageRef$curren4 = this.imageRef.current) === null || _this$imageRef$curren4 === void 0 ? void 0 : _this$imageRef$curren4.naturalHeight) || ((_this$videoRef$curren5 = this.videoRef.current) === null || _this$videoRef$curren5 === void 0 ? void 0 : _this$videoRef$curren5.videoHeight) || 0) < containerAspect ? "horizontal-cover" : "vertical-cover";
+			}
+			return "horizontal-cover";
+		}
+		return this.props.objectFit;
+	}
+	onPinchStart(e) {
+		const pointA = Cropper.getTouchPoint(e.touches[0]);
+		const pointB = Cropper.getTouchPoint(e.touches[1]);
+		this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
+		this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
+		this.onDragStart(getCenter(pointA, pointB));
+	}
+	onPinchMove(e) {
+		if (!this.currentDoc || !this.currentWindow) return;
+		const pointA = Cropper.getTouchPoint(e.touches[0]);
+		const pointB = Cropper.getTouchPoint(e.touches[1]);
+		const center = getCenter(pointA, pointB);
+		this.onDrag(center);
+		if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
+		this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(() => {
+			const distance = getDistanceBetweenPoints(pointA, pointB);
+			const newZoom = this.props.zoom * (distance / this.lastPinchDistance);
+			this.setNewZoom(newZoom, center, { shouldUpdatePosition: false });
+			this.lastPinchDistance = distance;
+			const rotation = getRotationBetweenPoints(pointA, pointB);
+			const newRotation = this.props.rotation + (rotation - this.lastPinchRotation);
+			this.props.onRotationChange && this.props.onRotationChange(newRotation);
+			this.lastPinchRotation = rotation;
+		});
+	}
+	render() {
+		var _this$state$mediaObje;
+		const { image, video, mediaProps, cropperProps, transform, crop: { x, y }, rotation, zoom, cropShape, showGrid, roundCropAreaPixels, style: { containerStyle, cropAreaStyle, mediaStyle }, classes: { containerClassName, cropAreaClassName, mediaClassName } } = this.props;
+		const objectFit = (_this$state$mediaObje = this.state.mediaObjectFit) !== null && _this$state$mediaObje !== void 0 ? _this$state$mediaObje : this.getObjectFit();
+		return /* @__PURE__ */ React__namespace.createElement("div", {
+			onMouseDown: this.onMouseDown,
+			onTouchStart: this.onTouchStart,
+			ref: (el) => this.containerRef = el,
+			"data-testid": "container",
+			style: containerStyle,
+			className: classNames("reactEasyCrop_Container", containerClassName)
+		}, image ? /* @__PURE__ */ React__namespace.createElement("img", _objectSpread2(_objectSpread2({
+			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: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
+			onLoad: this.onMediaLoad
+		})) : video && /* @__PURE__ */ React__namespace.createElement("video", _objectSpread2(_objectSpread2({
+			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: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
+			controls: false
+		}), (Array.isArray(video) ? video : [{ src: video }]).map((item) => /* @__PURE__ */ React__namespace.createElement("source", _objectSpread2({ key: item.src }, item)))), this.state.cropSize && /* @__PURE__ */ React__namespace.createElement("div", _objectSpread2({
+			ref: this.cropperRef,
+			style: _objectSpread2(_objectSpread2({}, 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$1.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$1.getMousePoint = (e) => ({
+	x: Number(e.clientX),
+	y: Number(e.clientY)
+});
+Cropper$1.getTouchPoint = (touch) => ({
+	x: Number(touch.clientX),
+	y: Number(touch.clientY)
+});
+//#endregion
+//#region src/index.ts
+var src_default = Cropper$1;
+
+async function getCroppedFile(imageSrc, pixelCrop, originalFileName) {
+    const image = await loadImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        throw new Error("Could not get 2d canvas context");
+    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (!blob) {
+                reject(new Error("canvas.toBlob produced no output"));
+                return;
+            }
+            const ext = originalFileName.substring(originalFileName.lastIndexOf(".")) || ".jpg";
+            resolve(new File([blob], `cropped${ext}`, { type: "image/jpeg" }));
+        }, "image/jpeg");
+    });
+}
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.addEventListener("load", () => resolve(img));
+        img.addEventListener("error", reject);
+        img.src = src;
+    });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Cropper = src_default;
+const ImageCropModal = ({ isOpen, imageSrc, originalFileName, aspectRatio = 1, onClose, onCropComplete, title = "Crop image", confirmLabel = "Crop & Upload", cancelLabel = "Cancel", zoomLabel = "Zoom", }) => {
+    const [crop, setCrop] = React.useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = React.useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
+    const [isCropping, setIsCropping] = React.useState(false);
+    const handleCropComplete = React.useCallback((_, pixels) => {
+        setCroppedAreaPixels(pixels);
+    }, []);
+    const handleConfirm = async () => {
+        if (!croppedAreaPixels)
+            return;
+        setIsCropping(true);
+        try {
+            const file = await getCroppedFile(imageSrc, croppedAreaPixels, originalFileName);
+            onCropComplete(file);
+        }
+        finally {
+            setIsCropping(false);
+        }
+    };
+    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, title: title, size: "lg", primaryAction: confirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirm, onSecondaryAction: onClose, isLoading: isCropping, closeOnOverlayClick: false, children: [jsxRuntime.jsx("div", { className: "relative h-80 w-full bg-gray-900", children: jsxRuntime.jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspectRatio, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: handleCropComplete }) }), jsxRuntime.jsxs("div", { className: "mt-4 px-1", children: [jsxRuntime.jsx("label", { className: "mb-1 block text-sm text-gray-500", children: zoomLabel }), jsxRuntime.jsx("input", { type: "range", min: 1, max: 3, step: 0.05, value: zoom, onChange: (e) => setZoom(Number(e.target.value)), className: "w-full accent-ews-primary" })] })] }));
 };
 
 const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
@@ -33717,6 +35107,28 @@ function RegionSelect({ country = exports.SupportedCountry.SENEGAL, value, onCha
     return (jsxRuntime.jsx(Select, { options: options, value: value, onChange: (val) => onChange?.(val), label: label, placeholder: placeholder, error: error, isError: isError, disabled: disabled, required: required, searchable: true, containerClassName: containerClassName }));
 }
 
+const Tag = ({ label, variant = "plain", className, }) => {
+    const variantClass = variant === "primary"
+        ? "bg-ews-primary text-white"
+        : variant === "secondary"
+            ? "bg-ews-secondary text-white"
+            : "bg-gray-200 text-gray-800";
+    return (jsxRuntime.jsx("span", { className: cn("inline-block rounded-md px-2.5 py-1 text-sm font-medium", variantClass, className), children: label }));
+};
+
+const DEFAULT_MAX = 3;
+const TagList = ({ items, maxVisible = DEFAULT_MAX, showMoreLabel, showLessLabel, variant = "secondary", className, renderTag, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasMore = items.length > maxVisible;
+    const visible = expanded ? items : items.slice(0, maxVisible);
+    const handleToggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setExpanded(prev => !prev);
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [visible.map((label, i) => renderTag ? (renderTag(label, i)) : (jsxRuntime.jsx(Tag, { label: label, variant: variant }, i))), hasMore && !expanded && (jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "..." })), hasMore && (jsxRuntime.jsx("button", { onClick: handleToggle, className: "text-xs text-ews-primary hover:underline", children: expanded ? showLessLabel : showMoreLabel }))] }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -35063,7 +36475,7 @@ exports.FerrisWheel = FerrisWheel;
 exports.FerrisWheelIcon = FerrisWheel;
 exports.Figma = Figma;
 exports.FigmaIcon = Figma;
-exports.File = File;
+exports.File = File$1;
 exports.FileArchive = FileArchive;
 exports.FileArchiveIcon = FileArchive;
 exports.FileAudio = FileAudio;
@@ -35116,7 +36528,7 @@ exports.FileEdit = FilePen;
 exports.FileEditIcon = FilePen;
 exports.FileHeart = FileHeart;
 exports.FileHeartIcon = FileHeart;
-exports.FileIcon = File;
+exports.FileIcon = File$1;
 exports.FileImage = FileImage;
 exports.FileImageIcon = FileImage;
 exports.FileInput = FileInput;
@@ -35602,10 +37014,11 @@ exports.IdCard = IdCard;
 exports.IdCardIcon = IdCard;
 exports.IdCardLanyard = IdCardLanyard;
 exports.IdCardLanyardIcon = IdCardLanyard;
-exports.Image = Image;
+exports.Image = Image$1;
+exports.ImageCropModal = ImageCropModal;
 exports.ImageDown = ImageDown;
 exports.ImageDownIcon = ImageDown;
-exports.ImageIcon = Image;
+exports.ImageIcon = Image$1;
 exports.ImageMinus = ImageMinus;
 exports.ImageMinusIcon = ImageMinus;
 exports.ImageOff = ImageOff;
@@ -36484,7 +37897,7 @@ exports.LucideFeather = Feather;
 exports.LucideFence = Fence;
 exports.LucideFerrisWheel = FerrisWheel;
 exports.LucideFigma = Figma;
-exports.LucideFile = File;
+exports.LucideFile = File$1;
 exports.LucideFileArchive = FileArchive;
 exports.LucideFileAudio = FileAudio;
 exports.LucideFileAudio2 = FileAudio2;
@@ -36753,7 +38166,7 @@ exports.LucideIceCreamBowl = IceCreamBowl;
 exports.LucideIceCreamCone = IceCreamCone;
 exports.LucideIdCard = IdCard;
 exports.LucideIdCardLanyard = IdCardLanyard;
-exports.LucideImage = Image;
+exports.LucideImage = Image$1;
 exports.LucideImageDown = ImageDown;
 exports.LucideImageMinus = ImageMinus;
 exports.LucideImageOff = ImageOff;
@@ -37480,7 +38893,7 @@ exports.LucideTableRowsSplit = TableRowsSplit;
 exports.LucideTablet = Tablet;
 exports.LucideTabletSmartphone = TabletSmartphone;
 exports.LucideTablets = Tablets;
-exports.LucideTag = Tag;
+exports.LucideTag = Tag$1;
 exports.LucideTags = Tags;
 exports.LucideTally1 = Tally1;
 exports.LucideTally2 = Tally2;
@@ -38929,7 +40342,8 @@ exports.TabletSmartphoneIcon = TabletSmartphone;
 exports.Tablets = Tablets;
 exports.TabletsIcon = Tablets;
 exports.Tag = Tag;
-exports.TagIcon = Tag;
+exports.TagIcon = Tag$1;
+exports.TagList = TagList;
 exports.Tags = Tags;
 exports.TagsIcon = Tags;
 exports.Tally1 = Tally1;